mvc-kit 2.12.5 → 2.13.1

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

@@ -0,0 +1,463 @@
+/* ── Reset & Base ─────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #f5f5f7;
+  --surface: #ffffff;
+  --text: #1d1d1f;
+  --text-secondary: #6e6e73;
+  --border: #d2d2d7;
+  --primary: #0071e3;
+  --success: #34c759;
+  --danger: #ff3b30;
+  --warning: #ff9500;
+  --navbar-bg: #1d1d1f;
+  --navbar-text: #f5f5f7;
+  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --radius: 10px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+}
+
+/* ── Navbar ───────────────────────────────────────────── */
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 56px;
+  background: var(--navbar-bg);
+  color: var(--navbar-text);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.navbar-brand {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.3px;
+}
+
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* ── Buttons ──────────────────────────────────────────── */
+.btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.btn:hover {
+  opacity: 0.85;
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
+}
+
+.btn-success {
+  background: var(--success);
+  color: white;
+}
+
+.btn-secondary {
+  background: #424245;
+  color: var(--navbar-text);
+}
+
+.btn-active {
+  background: var(--primary);
+  color: white;
+}
+
+/* ── Layout ───────────────────────────────────────────── */
+.app {
+  min-height: 100vh;
+}
+
+.main-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+/* ── Dashboard Grid ───────────────────────────────────── */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+@media (max-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Card ─────────────────────────────────────────────── */
+.card {
+  background: var(--surface);
+  border-radius: var(--radius);
+  padding: 20px;
+  box-shadow: var(--card-shadow);
+  border: 1px solid var(--border);
+  transition: opacity 0.3s;
+}
+
+.card-disconnected {
+  opacity: 0.5;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-icon {
+  font-size: 18px;
+}
+
+.card-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex: 1;
+}
+
+.card-value {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.card-number {
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -1px;
+}
+
+.card-unit {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.card-trend {
+  font-size: 18px;
+  font-weight: 700;
+  margin-left: auto;
+}
+
+.trend-up {
+  color: var(--success);
+}
+
+.trend-down {
+  color: var(--danger);
+}
+
+.trend-flat {
+  color: var(--text-secondary);
+}
+
+.card-footer {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* ── Status Indicator ─────────────────────────────────── */
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot-online {
+  background: var(--success);
+  animation: pulse 2s infinite;
+}
+
+.status-dot-offline {
+  background: var(--danger);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.status-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* ── Activity Feed ────────────────────────────────────── */
+.activity-feed {
+  background: var(--surface);
+  border-radius: var(--radius);
+  padding: 20px;
+  box-shadow: var(--card-shadow);
+  border: 1px solid var(--border);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.section-header h2 {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.item-count {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.activity-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.activity-row:last-child {
+  border-bottom: none;
+}
+
+.activity-avatar {
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.avatar-offline {
+  opacity: 0.4;
+  filter: grayscale(1);
+}
+
+.activity-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.activity-text {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.activity-time {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* ── Social Feed Panel ────────────────────────────────── */
+.social-feed-panel {
+  position: fixed;
+  top: 56px;
+  right: 0;
+  bottom: 0;
+  width: 380px;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
+  overflow-y: auto;
+  z-index: 90;
+  animation: slideIn 0.25s ease-out;
+}
+
+@keyframes slideIn {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+.social-feed-title {
+  font-size: 16px;
+  font-weight: 700;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--surface);
+}
+
+.social-feed-list {
+  padding: 12px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.social-post {
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.social-post:last-child {
+  border-bottom: none;
+}
+
+.social-post-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.social-avatar {
+  border-radius: 50%;
+}
+
+.social-author {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.social-content {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+
+.social-footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.sentinel {
+  height: 1px;
+}
+
+.end-of-feed {
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding: 12px 0;
+}
+
+/* ── Spinner ──────────────────────────────────────────── */
+.spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--border);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-center {
+  display: flex;
+  justify-content: center;
+  padding: 24px;
+}
+
+/* ── Error Banner ─────────────────────────────────────── */
+.error-banner {
+  background: #fff0f0;
+  color: var(--danger);
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+/* ── Toast ────────────────────────────────────────────── */
+.toast-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 200;
+}
+
+.toast {
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: toastIn 0.3s ease-out;
+}
+
+@keyframes toastIn {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+.toast-info {
+  background: var(--primary);
+}
+
+.toast-success {
+  background: var(--success);
+}
+
+.toast-error {
+  background: var(--danger);
+}

package/examples/react/ComplexApp/src/types/activity.ts

@@ -0,0 +1,8 @@
+export interface ActivityItem {
+  id: string;
+  text: string;
+  userName: string;
+  userAvatar: string;
+  userOnline: boolean;
+  timestamp: string;
+}

package/examples/react/ComplexApp/src/types/dashboard.ts

@@ -0,0 +1,5 @@
+export interface DashboardDataPoint {
+  id: string;
+  timestamp: string;
+  count: number;
+}

package/examples/react/ComplexApp/src/types/social.ts

@@ -0,0 +1,8 @@
+export interface SocialPost {
+  id: string;
+  content: string;
+  author: string;
+  avatarUrl: string;
+  timestamp: string;
+  likes: number;
+}

package/examples/react/ComplexApp/src/types/users.ts

@@ -0,0 +1,6 @@
+export interface User {
+    id: string;
+    avatar: string;
+    name: string;
+    online:boolean;
+}

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

@@ -0,0 +1,68 @@
+import { ViewModel, singleton } from 'mvc-kit';
+import type { ActivityItem } from '../types/activity';
+import { ActivityResource } from '../resources/ActivityResource';
+import { ActivityChannel } from '../channels/ActivityChannel';
+import { AppStateViewModel } from './AppStateViewModel';
+
+export class ActivityFeedViewModel extends ViewModel {
+  private resource = singleton(ActivityResource);
+  private channel = singleton(ActivityChannel);
+  private appState = singleton(AppStateViewModel);
+  private wasOffline = false;
+
+  // --- Computed getters ---
+
+  get items(): ActivityItem[] {
+    return [...this.resource.items].sort(
+      (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+    );
+  }
+
+  get isOnline(): boolean {
+    return this.appState.state.online;
+  }
+
+  get isConnected(): boolean {
+    return this.channel.state.connected;
+  }
+
+  get itemCount(): number {
+    return this.resource.length;
+  }
+
+  // --- Lifecycle ---
+
+  protected onInit() {
+    if (this.resource.length === 0) this.load();
+
+    this.pipeChannel(this.channel, 'activity', this.resource);
+
+    if (this.appState.state.online) {
+      this.channel.connect();
+    }
+
+    this.subscribeTo(this.appState, () => {
+      const online = this.appState.state.online;
+      if (online) {
+        this.channel.connect();
+        if (this.wasOffline) {
+          this.load();
+          this.wasOffline = false;
+        }
+      } else {
+        this.channel.disconnect();
+        this.wasOffline = true;
+      }
+    });
+  }
+
+  protected onDispose() {
+    this.channel.dispose();
+  }
+
+  // --- Actions ---
+
+  async load() {
+    await this.resource.loadInitial();
+  }
+}

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);
+}