mvc-kit 2.13.0 → 2.13.1

package/examples/react/ComplexApp/src/mock-remote/dashboard-generators.ts

@@ -0,0 +1,45 @@
+import type { MockWSConfig } from './MockWebSocket';
+
+interface GeneratorConfig {
+  baseline: number;
+  variance: number;
+  min?: number;
+  minInterval?: number;
+  maxInterval?: number;
+}
+
+const configs: Record<string, GeneratorConfig> = {
+  orders:       { baseline: 150,   variance: 10 },
+  revenue:      { baseline: 52000, variance: 500 },
+  'active-users': { baseline: 1200, variance: 50 },
+  errors:       { baseline: 3,     variance: 2,  min: 0 },
+  latency:      { baseline: 145,   variance: 30, min: 1 },
+  traffic:      { baseline: 8500,  variance: 500 },
+};
+
+let counters: Record<string, number> = {};
+
+function randomWalk(serviceId: string, cfg: GeneratorConfig): number {
+  if (!(serviceId in counters)) {
+    counters[serviceId] = cfg.baseline;
+  }
+  const delta = (Math.random() - 0.5) * 2 * cfg.variance;
+  counters[serviceId] += delta;
+  if (cfg.min !== undefined && counters[serviceId] < cfg.min) {
+    counters[serviceId] = cfg.min;
+  }
+  return Math.round(counters[serviceId]);
+}
+
+export function getDashboardConfig(serviceId: string): MockWSConfig {
+  const cfg = configs[serviceId] ?? { baseline: 100, variance: 10 };
+  return {
+    minInterval: cfg.minInterval ?? 400,
+    maxInterval: cfg.maxInterval ?? 1500,
+    generator: () => ({
+      id: `${serviceId}-${Date.now()}`,
+      timestamp: new Date().toISOString(),
+      count: randomWalk(serviceId, cfg),
+    }),
+  };
+}

package/examples/react/ComplexApp/src/mock-remote/delay.ts

@@ -0,0 +1,18 @@
+export function delay(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(signal.reason);
+      return;
+    }
+    const timer = setTimeout(resolve, ms);
+    signal?.addEventListener('abort', () => {
+      clearTimeout(timer);
+      reject(signal.reason);
+    }, { once: true });
+  });
+}
+
+export async function mockFetch<T>(data: T, ms = 300, signal?: AbortSignal): Promise<T> {
+  await delay(ms, signal);
+  return data;
+}

package/examples/react/ComplexApp/src/mock-remote/social-api.ts

@@ -0,0 +1,55 @@
+import type { SocialPost } from '../types/social';
+import { mockFetch } from './delay';
+
+const AUTHORS = [
+  'Sarah Chen', 'Mike Rodriguez', 'Emily Park', 'Chris Taylor', 'Jordan Lee',
+  'Sam Williams', 'Alex Murphy', 'Kim Nguyen', 'Pat O\'Brien', 'Robin Cruz',
+];
+
+const CONTENTS = [
+  'Just shipped a new feature! The team crushed it this sprint.',
+  'Anyone else excited about the new TypeScript release?',
+  'Great architecture review today. Clean patterns make all the difference.',
+  'Coffee and code — name a better duo.',
+  'TIL: Object.freeze is shallow. Always has been.',
+  'Pair programming session was incredibly productive today.',
+  'Hot take: tests are documentation.',
+  'Finally figured out that race condition. AbortController saves the day!',
+  'Reading through the codebase and loving the consistency.',
+  'Deployed to production with zero downtime. Feels good.',
+  'State management doesn\'t have to be complicated.',
+  'Code review feedback is a gift, not a critique.',
+  'The best code is the code you don\'t have to write.',
+  'Refactoring legacy code is oddly satisfying.',
+  'Remember: premature optimization is the root of all evil.',
+];
+
+let postSeq = 0;
+const TOTAL_POSTS = 120;
+
+export async function fetchSocialFeed(
+  page: number,
+  pageSize: number,
+  signal?: AbortSignal,
+): Promise<{ items: SocialPost[]; hasMore: boolean }> {
+  const start = page * pageSize;
+  if (start >= TOTAL_POSTS) {
+    return mockFetch({ items: [], hasMore: false }, 200, signal);
+  }
+
+  const count = Math.min(pageSize, TOTAL_POSTS - start);
+  const items: SocialPost[] = [];
+  for (let i = 0; i < count; i++) {
+    const author = AUTHORS[Math.floor(Math.random() * AUTHORS.length)]!;
+    items.push({
+      id: `post-${++postSeq}`,
+      content: CONTENTS[Math.floor(Math.random() * CONTENTS.length)]!,
+      author,
+      avatarUrl: `https://api.dicebear.com/7.x/initials/svg?seed=${encodeURIComponent(author)}`,
+      timestamp: new Date(Date.now() - Math.random() * 86400000).toISOString(),
+      likes: Math.floor(Math.random() * 50),
+    });
+  }
+
+  return mockFetch({ items, hasMore: start + count < TOTAL_POSTS }, 500, signal);
+}

package/examples/react/ComplexApp/src/resources/ActivityResource.ts

@@ -0,0 +1,12 @@
+import { Resource } from 'mvc-kit';
+import type { ActivityItem } from '../types/activity';
+import { fetchInitialActivity } from '../mock-remote/activity-api';
+
+export class ActivityResource extends Resource<ActivityItem> {
+  static override MAX_SIZE = 100;
+
+  async loadInitial(): Promise<void> {
+    const items = await fetchInitialActivity(this.disposeSignal);
+    this.reset(items);
+  }
+}

package/examples/react/ComplexApp/src/resources/SocialFeedResource.ts

@@ -0,0 +1,17 @@
+import { Resource } from 'mvc-kit';
+import type { SocialPost } from '../types/social';
+import { fetchSocialFeed } from '../mock-remote/social-api';
+
+export class SocialFeedResource extends Resource<SocialPost> {
+  private _hasMore = true;
+
+  get hasMore(): boolean {
+    return this._hasMore;
+  }
+
+  async loadPage(page: number): Promise<void> {
+    const { items, hasMore } = await fetchSocialFeed(page, 20, this.disposeSignal);
+    this._hasMore = hasMore;
+    this.upsert(...items);
+  }
+}

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