mvc-kit 2.12.5 → 2.13.1

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

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

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

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

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

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

package/examples/react/ComplexApp/src/collections/DashboardCollection.ts

@@ -0,0 +1,6 @@
+import { Collection } from 'mvc-kit';
+import type { DashboardDataPoint } from '../types/dashboard';
+
+export class DashboardCollection extends Collection<DashboardDataPoint> {
+  static override MAX_SIZE = 50;
+}

package/examples/react/ComplexApp/src/collections/ErrorsCollection.ts

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+
+export class ErrorsCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/LatencyCollection.ts

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+
+export class LatencyCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/OrdersCollection.ts

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+
+export class OrdersCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/RevenueCollection.ts

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+
+export class RevenueCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/TrafficCollection.ts

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+
+export class TrafficCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/collections/UsersMetricCollection.ts

@@ -0,0 +1,3 @@
+import { DashboardCollection } from './DashboardCollection';
+
+export class UsersMetricCollection extends DashboardCollection {}

package/examples/react/ComplexApp/src/components/activity/ActivityFeed.tsx

@@ -0,0 +1,31 @@
+import { useLocal } from 'mvc-kit/react';
+import { ActivityFeedViewModel } from '../../viewmodels/ActivityFeedViewModel';
+import { ActivityItemRow } from './ActivityItemRow';
+import { StatusIndicator } from '../shared/StatusIndicator';
+import { Spinner } from '../shared/Spinner';
+
+export function ActivityFeed() {
+  const [, vm] = useLocal(ActivityFeedViewModel);
+  const { loading, error } = vm.async.load;
+
+  return (
+    <div className="activity-feed">
+      <div className="section-header">
+        <h2>Activity Feed</h2>
+        <StatusIndicator connected={vm.isConnected} label={vm.isOnline ? 'Live' : 'Offline'} />
+        <span className="item-count">{vm.itemCount} items</span>
+      </div>
+      {loading && vm.itemCount === 0 && (
+        <div className="loading-center"><Spinner /></div>
+      )}
+      {error && (
+        <div className="error-banner">{error}</div>
+      )}
+      <div className="activity-list">
+        {vm.items.map(item => (
+          <ActivityItemRow key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/components/activity/ActivityItemRow.tsx

@@ -0,0 +1,35 @@
+import type { ActivityItem } from '../../types/activity';
+
+interface ActivityItemRowProps {
+  item: ActivityItem;
+}
+
+export function ActivityItemRow({ item }: ActivityItemRowProps) {
+  const timeAgo = getTimeAgo(item.timestamp);
+
+  return (
+    <div className="activity-row">
+      <img
+        className={`activity-avatar ${item.userOnline ? '' : 'avatar-offline'}`}
+        src={item.userAvatar}
+        alt={item.userName}
+        width={36}
+        height={36}
+      />
+      <div className="activity-content">
+        <span className="activity-text">{item.text}</span>
+        <span className="activity-time">{timeAgo}</span>
+      </div>
+    </div>
+  );
+}
+
+function getTimeAgo(timestamp: string): string {
+  const seconds = Math.floor((Date.now() - new Date(timestamp).getTime()) / 1000);
+  if (seconds < 5) return 'just now';
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ago`;
+}

package/examples/react/ComplexApp/src/components/dashboard/DashboardCard.tsx

@@ -0,0 +1,37 @@
+import { useLocal } from 'mvc-kit/react';
+import type { DashboardCardViewModel } from '../../viewmodels/DashboardCardViewModel';
+import { StatusIndicator } from '../shared/StatusIndicator';
+
+interface DashboardCardProps {
+  VMClass: new () => DashboardCardViewModel;
+  title: string;
+  icon: string;
+  unit?: string;
+}
+
+export function DashboardCard({ VMClass, title, icon, unit }: DashboardCardProps) {
+  const [, vm] = useLocal(VMClass);
+
+  const trendArrow = vm.trend === 'up' ? '\u2191' : vm.trend === 'down' ? '\u2193' : '\u2192';
+  const trendClass = `trend-${vm.trend}`;
+
+  return (
+    <div className={`card ${vm.isOnline ? '' : 'card-disconnected'}`}>
+      <div className="card-header">
+        <span className="card-icon">{icon}</span>
+        <span className="card-title">{title}</span>
+        <StatusIndicator connected={vm.isConnected} />
+      </div>
+      <div className="card-value">
+        <span className="card-number">
+          {vm.latestValue.toLocaleString()}
+        </span>
+        {unit && <span className="card-unit">{unit}</span>}
+        <span className={`card-trend ${trendClass}`}>{trendArrow}</span>
+      </div>
+      <div className="card-footer">
+        {vm.dataPointCount} data points
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { DashboardCard } from './DashboardCard';
+import type { DashboardCardViewModel } from '../../viewmodels/DashboardCardViewModel';
+import { OrdersCardViewModel } from '../../viewmodels/OrdersCardViewModel';
+import { RevenueCardViewModel } from '../../viewmodels/RevenueCardViewModel';
+import { UsersMetricCardViewModel } from '../../viewmodels/UsersMetricCardViewModel';
+import { ErrorsCardViewModel } from '../../viewmodels/ErrorsCardViewModel';
+import { LatencyCardViewModel } from '../../viewmodels/LatencyCardViewModel';
+import { TrafficCardViewModel } from '../../viewmodels/TrafficCardViewModel';
+
+interface CardConfig {
+  VMClass: new () => DashboardCardViewModel;
+  title: string;
+  icon: string;
+  unit?: string;
+}
+
+const cards: CardConfig[] = [
+  { VMClass: OrdersCardViewModel, title: 'Orders', icon: '\uD83D\uDCE6', unit: '/hr' },
+  { VMClass: RevenueCardViewModel, title: 'Revenue', icon: '\uD83D\uDCB0', unit: '$' },
+  { VMClass: UsersMetricCardViewModel, title: 'Active Users', icon: '\uD83D\uDC65' },
+  { VMClass: ErrorsCardViewModel, title: 'Errors', icon: '\u26A0\uFE0F', unit: '/min' },
+  { VMClass: LatencyCardViewModel, title: 'Latency', icon: '\u23F1\uFE0F', unit: 'ms' },
+  { VMClass: TrafficCardViewModel, title: 'Traffic', icon: '\uD83C\uDF10', unit: 'req/s' },
+];
+
+export function DashboardPage() {
+  return (
+    <div className="dashboard-grid">
+      {cards.map(({ VMClass, title, icon, unit }) => (
+        <DashboardCard key={title} VMClass={VMClass} title={title} icon={icon} unit={unit} />
+      ))}
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/components/layout/Navbar.tsx

@@ -0,0 +1,32 @@
+import { useSingleton } from 'mvc-kit/react';
+import { AppStateViewModel } from '../../viewmodels/AppStateViewModel';
+import { StatusIndicator } from '../shared/StatusIndicator';
+import { SocialFeedPanel } from './SocialFeedPanel';
+
+export function Navbar() {
+  const [state, vm] = useSingleton(AppStateViewModel);
+
+  return (
+    <>
+      <nav className="navbar">
+        <span className="navbar-brand">ComplexApp</span>
+        <div className="navbar-actions">
+          <StatusIndicator connected={state.online} label={state.online ? 'Online' : 'Offline'} />
+          <button
+            className={`btn ${state.online ? 'btn-danger' : 'btn-success'}`}
+            onClick={() => vm.toggleOnline()}
+          >
+            {state.online ? 'Go Offline' : 'Go Online'}
+          </button>
+          <button
+            className={`btn btn-secondary ${state.socialPanelOpen ? 'btn-active' : ''}`}
+            onClick={() => vm.toggleSocialPanel()}
+          >
+            Social Feed
+          </button>
+        </div>
+      </nav>
+      {state.socialPanelOpen && <SocialFeedPanel />}
+    </>
+  );
+}

package/examples/react/ComplexApp/src/components/layout/SocialFeedPanel.tsx

@@ -0,0 +1,57 @@
+import { useLocal } from 'mvc-kit/react';
+import { InfiniteScroll, CardList } from 'mvc-kit/react';
+import { SocialFeedViewModel } from '../../viewmodels/SocialFeedViewModel';
+import { Spinner } from '../shared/Spinner';
+import type { SocialPost } from '../../types/social';
+
+function PostCard({ post }: { post: SocialPost }) {
+  return (
+    <div className="social-post">
+      <div className="social-post-header">
+        <img
+          className="social-avatar"
+          src={post.avatarUrl}
+          alt={post.author}
+          width={32}
+          height={32}
+        />
+        <span className="social-author">{post.author}</span>
+      </div>
+      <p className="social-content">{post.content}</p>
+      <div className="social-footer">
+        <span className="social-likes">{'\u2764\uFE0F'} {post.likes}</span>
+        <span className="social-time">
+          {new Date(post.timestamp).toLocaleTimeString()}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function SocialFeedPanel() {
+  const [state, vm] = useLocal(SocialFeedViewModel, { page: 0 });
+  const { loading } = vm.async.loadMore;
+
+  return (
+    <div className="social-feed-panel">
+      <h3 className="social-feed-title">Social Feed</h3>
+      <InfiniteScroll
+        hasMore={vm.hasMore}
+        loading={loading}
+        onLoadMore={() => vm.loadMore()}
+        renderLoading={() => (
+          <div className="loading-center"><Spinner /></div>
+        )}
+        renderEnd={() =>
+          vm.postCount > 0 ? <p className="end-of-feed">No more posts</p> : null
+        }
+      >
+        <CardList
+          items={vm.posts}
+          keyOf={(post: SocialPost) => post.id}
+          renderItem={(post: SocialPost) => <PostCard post={post} />}
+        />
+      </InfiniteScroll>
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/components/shared/Spinner.tsx

@@ -0,0 +1,3 @@
+export function Spinner() {
+  return <span className="spinner" />;
+}

package/examples/react/ComplexApp/src/components/shared/StatusIndicator.tsx

@@ -0,0 +1,13 @@
+interface StatusIndicatorProps {
+  connected: boolean;
+  label?: string;
+}
+
+export function StatusIndicator({ connected, label }: StatusIndicatorProps) {
+  return (
+    <span className="status-indicator">
+      <span className={`status-dot ${connected ? 'status-dot-online' : 'status-dot-offline'}`} />
+      {label && <span className="status-label">{label}</span>}
+    </span>
+  );
+}

package/examples/react/ComplexApp/src/components/shared/Toast.tsx

@@ -0,0 +1,40 @@
+import { useState, useCallback } from 'react';
+import { useSingleton, useEvent } from 'mvc-kit/react';
+import { AppEventBus } from '../../events/AppEventBus';
+
+interface ToastItem {
+  id: number;
+  message: string;
+  type: 'info' | 'success' | 'error';
+}
+
+let nextId = 0;
+
+export function Toast() {
+  const bus = useSingleton(AppEventBus);
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const addToast = useCallback((item: Omit<ToastItem, 'id'>) => {
+    const id = nextId++;
+    setToasts(prev => [...prev, { ...item, id }]);
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id));
+    }, 3000);
+  }, []);
+
+  useEvent(bus, 'toast:show', ({ message, type }) => {
+    addToast({ message, type: type ?? 'info' });
+  });
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="toast-container">
+      {toasts.map(t => (
+        <div key={t.id} className={`toast toast-${t.type}`}>
+          {t.message}
+        </div>
+      ))}
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/env.d.ts

@@ -0,0 +1,10 @@
+declare const __MVC_KIT_DEV__: boolean;
+
+declare module 'react-dom/client' {
+  import type { ReactNode } from 'react';
+  interface Root {
+    render(children: ReactNode): void;
+    unmount(): void;
+  }
+  export function createRoot(container: Element): Root;
+}

package/examples/react/ComplexApp/src/events/AppEventBus.ts

@@ -0,0 +1,7 @@
+import { EventBus } from 'mvc-kit';
+
+export interface AppEvents {
+  'toast:show': { message: string; type?: 'info' | 'success' | 'error' };
+}
+
+export class AppEventBus extends EventBus<AppEvents> {}

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

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

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

@@ -0,0 +1,38 @@
+export interface MockWSConfig {
+  minInterval: number;
+  maxInterval: number;
+  generator: () => any;
+}
+
+export class MockWebSocket {
+  private timer: ReturnType<typeof setTimeout> | null = null;
+  private closed = false;
+
+  constructor(private config: MockWSConfig) {}
+
+  connect(onMessage: (data: any) => void, signal?: AbortSignal): void {
+    if (signal?.aborted) return;
+    signal?.addEventListener('abort', () => this.close(), { once: true });
+    this.scheduleNext(onMessage);
+  }
+
+  close(): void {
+    if (this.closed) return;
+    this.closed = true;
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  }
+
+  private scheduleNext(onMessage: (data: any) => void): void {
+    if (this.closed) return;
+    const { minInterval, maxInterval, generator } = this.config;
+    const interval = minInterval + Math.random() * (maxInterval - minInterval);
+    this.timer = setTimeout(() => {
+      if (this.closed) return;
+      onMessage(generator());
+      this.scheduleNext(onMessage);
+    }, interval);
+  }
+}

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

@@ -0,0 +1,48 @@
+import type { ActivityItem } from '../types/activity';
+import type { MockWSConfig } from './MockWebSocket';
+import { mockFetch } from './delay';
+
+const NAMES = [
+  'Alice Johnson', 'Bob Smith', 'Carol White', 'Dave Brown', 'Eve Davis',
+  'Frank Wilson', 'Grace Lee', 'Hank Taylor', 'Ivy Martin', 'Jack Anderson',
+];
+
+const ACTIONS = [
+  'created a new order', 'updated their profile', 'submitted a report',
+  'closed a ticket', 'uploaded a document', 'left a comment',
+  'approved a request', 'joined the team', 'completed a task', 'shared a file',
+];
+
+function randomItem<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)]!;
+}
+
+let activitySeq = 0;
+
+function generateActivity(): ActivityItem {
+  const name = randomItem(NAMES);
+  return {
+    id: `act-${++activitySeq}`,
+    text: `${name} ${randomItem(ACTIONS)}`,
+    userName: name,
+    userAvatar: `https://api.dicebear.com/7.x/initials/svg?seed=${encodeURIComponent(name)}`,
+    userOnline: Math.random() > 0.3,
+    timestamp: new Date().toISOString(),
+  };
+}
+
+export async function fetchInitialActivity(signal?: AbortSignal): Promise<ActivityItem[]> {
+  const items: ActivityItem[] = [];
+  for (let i = 0; i < 50; i++) {
+    items.push(generateActivity());
+  }
+  return mockFetch(items, 600, signal);
+}
+
+export function getActivityWSConfig(): MockWSConfig {
+  return {
+    minInterval: 1000,
+    maxInterval: 3000,
+    generator: generateActivity,
+  };
+}

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