mvc-kit 2.12.5 → 2.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (382) hide show
  1. package/BEST_PRACTICES.md +1390 -0
  2. package/agent-config/bin/postinstall.mjs +4 -3
  3. package/agent-config/bin/setup.mjs +5 -1
  4. package/agent-config/claude-code/agents/mvc-kit-architect.md +16 -8
  5. package/agent-config/claude-code/skills/guide/SKILL.md +29 -7
  6. package/agent-config/claude-code/skills/guide/patterns.md +12 -0
  7. package/agent-config/claude-code/skills/guide/recipes.md +510 -0
  8. package/agent-config/claude-code/skills/guide/testing.md +297 -0
  9. package/agent-config/claude-code/skills/review/SKILL.md +3 -13
  10. package/agent-config/claude-code/skills/review/checklist.md +30 -5
  11. package/agent-config/claude-code/skills/scaffold/SKILL.md +4 -13
  12. package/agent-config/lib/install-claude.mjs +90 -25
  13. package/dist/Channel.cjs +276 -300
  14. package/dist/Channel.cjs.map +1 -1
  15. package/dist/Channel.js +275 -299
  16. package/dist/Channel.js.map +1 -1
  17. package/dist/Collection.cjs +424 -504
  18. package/dist/Collection.cjs.map +1 -1
  19. package/dist/Collection.js +423 -503
  20. package/dist/Collection.js.map +1 -1
  21. package/dist/Controller.cjs +70 -67
  22. package/dist/Controller.cjs.map +1 -1
  23. package/dist/Controller.js +69 -66
  24. package/dist/Controller.js.map +1 -1
  25. package/dist/EventBus.cjs +77 -88
  26. package/dist/EventBus.cjs.map +1 -1
  27. package/dist/EventBus.js +76 -87
  28. package/dist/EventBus.js.map +1 -1
  29. package/dist/Feed.cjs +81 -77
  30. package/dist/Feed.cjs.map +1 -1
  31. package/dist/Feed.js +80 -76
  32. package/dist/Feed.js.map +1 -1
  33. package/dist/Model.cjs +181 -207
  34. package/dist/Model.cjs.map +1 -1
  35. package/dist/Model.js +179 -205
  36. package/dist/Model.js.map +1 -1
  37. package/dist/Pagination.cjs +75 -73
  38. package/dist/Pagination.cjs.map +1 -1
  39. package/dist/Pagination.js +74 -72
  40. package/dist/Pagination.js.map +1 -1
  41. package/dist/Pending.cjs +255 -287
  42. package/dist/Pending.cjs.map +1 -1
  43. package/dist/Pending.js +253 -285
  44. package/dist/Pending.js.map +1 -1
  45. package/dist/PersistentCollection.cjs +242 -285
  46. package/dist/PersistentCollection.cjs.map +1 -1
  47. package/dist/PersistentCollection.js +241 -284
  48. package/dist/PersistentCollection.js.map +1 -1
  49. package/dist/Resource.cjs +166 -174
  50. package/dist/Resource.cjs.map +1 -1
  51. package/dist/Resource.js +164 -172
  52. package/dist/Resource.js.map +1 -1
  53. package/dist/Selection.cjs +84 -94
  54. package/dist/Selection.cjs.map +1 -1
  55. package/dist/Selection.js +83 -93
  56. package/dist/Selection.js.map +1 -1
  57. package/dist/Service.cjs +54 -55
  58. package/dist/Service.cjs.map +1 -1
  59. package/dist/Service.js +53 -54
  60. package/dist/Service.js.map +1 -1
  61. package/dist/Sorting.cjs +102 -101
  62. package/dist/Sorting.cjs.map +1 -1
  63. package/dist/Sorting.js +102 -101
  64. package/dist/Sorting.js.map +1 -1
  65. package/dist/Trackable.cjs +112 -80
  66. package/dist/Trackable.cjs.map +1 -1
  67. package/dist/Trackable.js +111 -79
  68. package/dist/Trackable.js.map +1 -1
  69. package/dist/ViewModel.cjs +528 -576
  70. package/dist/ViewModel.cjs.map +1 -1
  71. package/dist/ViewModel.js +525 -573
  72. package/dist/ViewModel.js.map +1 -1
  73. package/dist/bindPublicMethods.cjs +43 -24
  74. package/dist/bindPublicMethods.cjs.map +1 -1
  75. package/dist/bindPublicMethods.js +43 -24
  76. package/dist/bindPublicMethods.js.map +1 -1
  77. package/dist/errors.cjs +67 -68
  78. package/dist/errors.cjs.map +1 -1
  79. package/dist/errors.js +68 -71
  80. package/dist/errors.js.map +1 -1
  81. package/dist/mvc-kit.cjs +44 -46
  82. package/dist/mvc-kit.js +5 -32
  83. package/dist/produceDraft.cjs +105 -95
  84. package/dist/produceDraft.cjs.map +1 -1
  85. package/dist/produceDraft.js +106 -97
  86. package/dist/produceDraft.js.map +1 -1
  87. package/dist/react/components/CardList.cjs +30 -40
  88. package/dist/react/components/CardList.cjs.map +1 -1
  89. package/dist/react/components/CardList.js +31 -41
  90. package/dist/react/components/CardList.js.map +1 -1
  91. package/dist/react/components/DataTable.cjs +146 -169
  92. package/dist/react/components/DataTable.cjs.map +1 -1
  93. package/dist/react/components/DataTable.js +147 -170
  94. package/dist/react/components/DataTable.js.map +1 -1
  95. package/dist/react/components/InfiniteScroll.cjs +51 -42
  96. package/dist/react/components/InfiniteScroll.cjs.map +1 -1
  97. package/dist/react/components/InfiniteScroll.js +52 -43
  98. package/dist/react/components/InfiniteScroll.js.map +1 -1
  99. package/dist/react/components/types.cjs +10 -6
  100. package/dist/react/components/types.cjs.map +1 -1
  101. package/dist/react/components/types.js +11 -9
  102. package/dist/react/components/types.js.map +1 -1
  103. package/dist/react/guards.cjs +10 -6
  104. package/dist/react/guards.cjs.map +1 -1
  105. package/dist/react/guards.js +11 -9
  106. package/dist/react/guards.js.map +1 -1
  107. package/dist/react/provider.cjs +23 -20
  108. package/dist/react/provider.cjs.map +1 -1
  109. package/dist/react/provider.js +23 -21
  110. package/dist/react/provider.js.map +1 -1
  111. package/dist/react/use-event-bus.cjs +24 -20
  112. package/dist/react/use-event-bus.cjs.map +1 -1
  113. package/dist/react/use-event-bus.js +24 -21
  114. package/dist/react/use-event-bus.js.map +1 -1
  115. package/dist/react/use-instance.cjs +43 -36
  116. package/dist/react/use-instance.cjs.map +1 -1
  117. package/dist/react/use-instance.js +43 -36
  118. package/dist/react/use-instance.js.map +1 -1
  119. package/dist/react/use-local.cjs +48 -64
  120. package/dist/react/use-local.cjs.map +1 -1
  121. package/dist/react/use-local.js +47 -63
  122. package/dist/react/use-local.js.map +1 -1
  123. package/dist/react/use-model.cjs +84 -98
  124. package/dist/react/use-model.cjs.map +1 -1
  125. package/dist/react/use-model.js +84 -100
  126. package/dist/react/use-model.js.map +1 -1
  127. package/dist/react/use-singleton.cjs +19 -23
  128. package/dist/react/use-singleton.cjs.map +1 -1
  129. package/dist/react/use-singleton.js +16 -20
  130. package/dist/react/use-singleton.js.map +1 -1
  131. package/dist/react/use-subscribe-only.cjs +28 -22
  132. package/dist/react/use-subscribe-only.cjs.map +1 -1
  133. package/dist/react/use-subscribe-only.js +28 -22
  134. package/dist/react/use-subscribe-only.js.map +1 -1
  135. package/dist/react/use-teardown.cjs +20 -19
  136. package/dist/react/use-teardown.cjs.map +1 -1
  137. package/dist/react/use-teardown.js +20 -19
  138. package/dist/react/use-teardown.js.map +1 -1
  139. package/dist/react-native/NativeCollection.cjs +98 -78
  140. package/dist/react-native/NativeCollection.cjs.map +1 -1
  141. package/dist/react-native/NativeCollection.js +97 -77
  142. package/dist/react-native/NativeCollection.js.map +1 -1
  143. package/dist/react-native.cjs +2 -4
  144. package/dist/react-native.js +1 -4
  145. package/dist/react.cjs +24 -26
  146. package/dist/react.js +1 -17
  147. package/dist/singleton.cjs +28 -22
  148. package/dist/singleton.cjs.map +1 -1
  149. package/dist/singleton.js +29 -26
  150. package/dist/singleton.js.map +1 -1
  151. package/dist/walkPrototypeChain.cjs +20 -12
  152. package/dist/walkPrototypeChain.cjs.map +1 -1
  153. package/dist/walkPrototypeChain.js +21 -13
  154. package/dist/walkPrototypeChain.js.map +1 -1
  155. package/dist/web/IndexedDBCollection.cjs +53 -36
  156. package/dist/web/IndexedDBCollection.cjs.map +1 -1
  157. package/dist/web/IndexedDBCollection.js +52 -35
  158. package/dist/web/IndexedDBCollection.js.map +1 -1
  159. package/dist/web/WebStorageCollection.cjs +82 -84
  160. package/dist/web/WebStorageCollection.cjs.map +1 -1
  161. package/dist/web/WebStorageCollection.js +81 -83
  162. package/dist/web/WebStorageCollection.js.map +1 -1
  163. package/dist/web/idb.cjs +107 -99
  164. package/dist/web/idb.cjs.map +1 -1
  165. package/dist/web/idb.js +108 -105
  166. package/dist/web/idb.js.map +1 -1
  167. package/dist/web.cjs +4 -6
  168. package/dist/web.js +1 -5
  169. package/dist/wrapAsyncMethods.cjs +141 -168
  170. package/dist/wrapAsyncMethods.cjs.map +1 -1
  171. package/dist/wrapAsyncMethods.js +141 -168
  172. package/dist/wrapAsyncMethods.js.map +1 -1
  173. package/examples/primitive/channel.ts +109 -0
  174. package/examples/primitive/collection.ts +118 -0
  175. package/examples/primitive/controller.ts +118 -0
  176. package/examples/primitive/counter.ts +108 -0
  177. package/examples/primitive/env.d.ts +1 -0
  178. package/examples/primitive/eventbus.ts +77 -0
  179. package/examples/primitive/feed.ts +162 -0
  180. package/examples/primitive/model.ts +82 -0
  181. package/examples/primitive/pagination.ts +91 -0
  182. package/examples/primitive/pending.ts +189 -0
  183. package/examples/primitive/persistent-collection.ts +116 -0
  184. package/examples/primitive/resource.ts +114 -0
  185. package/examples/primitive/selection.ts +96 -0
  186. package/examples/primitive/sorting.ts +112 -0
  187. package/examples/primitive/timer.ts +58 -0
  188. package/examples/primitive/trackable.ts +225 -0
  189. package/examples/primitive/tsconfig.json +20 -0
  190. package/examples/primitive/viewmodel-service.ts +161 -0
  191. package/examples/react/AuthExample/index.html +12 -0
  192. package/examples/react/AuthExample/src/App.tsx +29 -0
  193. package/examples/react/AuthExample/src/components/AdminPage.tsx +51 -0
  194. package/examples/react/AuthExample/src/components/AppHeader.tsx +32 -0
  195. package/examples/react/AuthExample/src/components/AuthGuard.tsx +50 -0
  196. package/examples/react/AuthExample/src/components/AuthScreen.tsx +181 -0
  197. package/examples/react/AuthExample/src/components/DashboardPage.tsx +41 -0
  198. package/examples/react/AuthExample/src/components/ProfilePage.tsx +44 -0
  199. package/examples/react/AuthExample/src/components/Toast.tsx +41 -0
  200. package/examples/react/AuthExample/src/env.d.ts +10 -0
  201. package/examples/react/AuthExample/src/events/AppEventBus.ts +7 -0
  202. package/examples/react/AuthExample/src/main.tsx +10 -0
  203. package/examples/react/AuthExample/src/mock/api.ts +78 -0
  204. package/examples/react/AuthExample/src/models/LoginFormModel.ts +19 -0
  205. package/examples/react/AuthExample/src/models/RegisterFormModel.ts +25 -0
  206. package/examples/react/AuthExample/src/services/AuthService.ts +21 -0
  207. package/examples/react/AuthExample/src/styles.css +445 -0
  208. package/examples/react/AuthExample/src/types/auth.ts +12 -0
  209. package/examples/react/AuthExample/src/viewmodels/AuthViewModel.ts +111 -0
  210. package/examples/react/AuthExample/tsconfig.json +22 -0
  211. package/examples/react/AuthExample/vite.config.ts +18 -0
  212. package/examples/react/ComplexApp/index.html +12 -0
  213. package/examples/react/ComplexApp/src/App.tsx +17 -0
  214. package/examples/react/ComplexApp/src/channels/ActivityChannel.ts +24 -0
  215. package/examples/react/ComplexApp/src/channels/DashboardChannel.ts +26 -0
  216. package/examples/react/ComplexApp/src/channels/ErrorsChannel.ts +5 -0
  217. package/examples/react/ComplexApp/src/channels/LatencyChannel.ts +5 -0
  218. package/examples/react/ComplexApp/src/channels/OrdersChannel.ts +5 -0
  219. package/examples/react/ComplexApp/src/channels/RevenueChannel.ts +5 -0
  220. package/examples/react/ComplexApp/src/channels/TrafficChannel.ts +5 -0
  221. package/examples/react/ComplexApp/src/channels/UsersMetricChannel.ts +5 -0
  222. package/examples/react/ComplexApp/src/collections/DashboardCollection.ts +6 -0
  223. package/examples/react/ComplexApp/src/collections/ErrorsCollection.ts +3 -0
  224. package/examples/react/ComplexApp/src/collections/LatencyCollection.ts +3 -0
  225. package/examples/react/ComplexApp/src/collections/OrdersCollection.ts +3 -0
  226. package/examples/react/ComplexApp/src/collections/RevenueCollection.ts +3 -0
  227. package/examples/react/ComplexApp/src/collections/TrafficCollection.ts +3 -0
  228. package/examples/react/ComplexApp/src/collections/UsersMetricCollection.ts +3 -0
  229. package/examples/react/ComplexApp/src/components/activity/ActivityFeed.tsx +31 -0
  230. package/examples/react/ComplexApp/src/components/activity/ActivityItemRow.tsx +35 -0
  231. package/examples/react/ComplexApp/src/components/dashboard/DashboardCard.tsx +37 -0
  232. package/examples/react/ComplexApp/src/components/dashboard/DashboardPage.tsx +34 -0
  233. package/examples/react/ComplexApp/src/components/layout/Navbar.tsx +32 -0
  234. package/examples/react/ComplexApp/src/components/layout/SocialFeedPanel.tsx +57 -0
  235. package/examples/react/ComplexApp/src/components/shared/Spinner.tsx +3 -0
  236. package/examples/react/ComplexApp/src/components/shared/StatusIndicator.tsx +13 -0
  237. package/examples/react/ComplexApp/src/components/shared/Toast.tsx +40 -0
  238. package/examples/react/ComplexApp/src/env.d.ts +10 -0
  239. package/examples/react/ComplexApp/src/events/AppEventBus.ts +7 -0
  240. package/examples/react/ComplexApp/src/main.tsx +10 -0
  241. package/examples/react/ComplexApp/src/mock-remote/MockWebSocket.ts +38 -0
  242. package/examples/react/ComplexApp/src/mock-remote/activity-api.ts +48 -0
  243. package/examples/react/ComplexApp/src/mock-remote/dashboard-generators.ts +45 -0
  244. package/examples/react/ComplexApp/src/mock-remote/delay.ts +18 -0
  245. package/examples/react/ComplexApp/src/mock-remote/social-api.ts +55 -0
  246. package/examples/react/ComplexApp/src/resources/ActivityResource.ts +12 -0
  247. package/examples/react/ComplexApp/src/resources/SocialFeedResource.ts +17 -0
  248. package/examples/react/ComplexApp/src/styles.css +463 -0
  249. package/examples/react/ComplexApp/src/types/activity.ts +8 -0
  250. package/examples/react/ComplexApp/src/types/dashboard.ts +5 -0
  251. package/examples/react/ComplexApp/src/types/social.ts +8 -0
  252. package/examples/react/ComplexApp/src/types/users.ts +6 -0
  253. package/examples/react/ComplexApp/src/viewmodels/ActivityFeedViewModel.ts +68 -0
  254. package/examples/react/ComplexApp/src/viewmodels/AppStateViewModel.ts +26 -0
  255. package/examples/react/ComplexApp/src/viewmodels/DashboardCardViewModel.ts +69 -0
  256. package/examples/react/ComplexApp/src/viewmodels/ErrorsCardViewModel.ts +9 -0
  257. package/examples/react/ComplexApp/src/viewmodels/LatencyCardViewModel.ts +9 -0
  258. package/examples/react/ComplexApp/src/viewmodels/OrdersCardViewModel.ts +9 -0
  259. package/examples/react/ComplexApp/src/viewmodels/RevenueCardViewModel.ts +9 -0
  260. package/examples/react/ComplexApp/src/viewmodels/SocialFeedViewModel.ts +39 -0
  261. package/examples/react/ComplexApp/src/viewmodels/TrafficCardViewModel.ts +9 -0
  262. package/examples/react/ComplexApp/src/viewmodels/UsersMetricCardViewModel.ts +9 -0
  263. package/examples/react/ComplexApp/tsconfig.json +22 -0
  264. package/examples/react/ComplexApp/vite.config.ts +18 -0
  265. package/examples/react/FullApp/index.html +12 -0
  266. package/examples/react/FullApp/src/App.tsx +28 -0
  267. package/examples/react/FullApp/src/collections/ConversationsCollection.ts +4 -0
  268. package/examples/react/FullApp/src/collections/LocationsCollection.ts +4 -0
  269. package/examples/react/FullApp/src/components/auth/LoginPage.tsx +80 -0
  270. package/examples/react/FullApp/src/components/dashboard/DashboardPage.tsx +29 -0
  271. package/examples/react/FullApp/src/components/dashboard/RecentActivityCard.tsx +35 -0
  272. package/examples/react/FullApp/src/components/dashboard/StatsCard.tsx +19 -0
  273. package/examples/react/FullApp/src/components/layout/AppShell.tsx +31 -0
  274. package/examples/react/FullApp/src/components/layout/Header.tsx +25 -0
  275. package/examples/react/FullApp/src/components/layout/Sidebar.tsx +29 -0
  276. package/examples/react/FullApp/src/components/locations/LocationFilters.tsx +60 -0
  277. package/examples/react/FullApp/src/components/locations/LocationForm.tsx +112 -0
  278. package/examples/react/FullApp/src/components/locations/LocationProfilePage.tsx +81 -0
  279. package/examples/react/FullApp/src/components/locations/LocationsPage.tsx +127 -0
  280. package/examples/react/FullApp/src/components/messaging/ConversationList.tsx +59 -0
  281. package/examples/react/FullApp/src/components/messaging/MessageBubble.tsx +22 -0
  282. package/examples/react/FullApp/src/components/messaging/MessageThread.tsx +100 -0
  283. package/examples/react/FullApp/src/components/messaging/MessagingPage.tsx +52 -0
  284. package/examples/react/FullApp/src/components/shared/ErrorBanner.tsx +3 -0
  285. package/examples/react/FullApp/src/components/shared/Spinner.tsx +7 -0
  286. package/examples/react/FullApp/src/components/shared/Toast.tsx +41 -0
  287. package/examples/react/FullApp/src/components/users/UserFilters.tsx +59 -0
  288. package/examples/react/FullApp/src/components/users/UsersPage.tsx +80 -0
  289. package/examples/react/FullApp/src/components/users/UsersTable.tsx +52 -0
  290. package/examples/react/FullApp/src/env.d.ts +10 -0
  291. package/examples/react/FullApp/src/events/AppEventBus.ts +7 -0
  292. package/examples/react/FullApp/src/main.tsx +10 -0
  293. package/examples/react/FullApp/src/mock/delay.ts +21 -0
  294. package/examples/react/FullApp/src/mock/locations.ts +76 -0
  295. package/examples/react/FullApp/src/mock/messages.ts +237 -0
  296. package/examples/react/FullApp/src/mock/users.ts +84 -0
  297. package/examples/react/FullApp/src/models/LocationFormModel.ts +31 -0
  298. package/examples/react/FullApp/src/models/LoginFormModel.ts +19 -0
  299. package/examples/react/FullApp/src/resources/UsersResource.ts +12 -0
  300. package/examples/react/FullApp/src/services/AuthService.ts +18 -0
  301. package/examples/react/FullApp/src/services/LocationService.ts +23 -0
  302. package/examples/react/FullApp/src/services/MessageService.ts +65 -0
  303. package/examples/react/FullApp/src/services/UserService.ts +23 -0
  304. package/examples/react/FullApp/src/styles.css +767 -0
  305. package/examples/react/FullApp/src/types/conversation.ts +7 -0
  306. package/examples/react/FullApp/src/types/location.ts +12 -0
  307. package/examples/react/FullApp/src/types/message.ts +7 -0
  308. package/examples/react/FullApp/src/types/user.ts +10 -0
  309. package/examples/react/FullApp/src/viewmodels/AuthViewModel.ts +51 -0
  310. package/examples/react/FullApp/src/viewmodels/ConversationsViewModel.ts +89 -0
  311. package/examples/react/FullApp/src/viewmodels/DashboardViewModel.ts +56 -0
  312. package/examples/react/FullApp/src/viewmodels/LocationProfileViewModel.ts +81 -0
  313. package/examples/react/FullApp/src/viewmodels/LocationsViewModel.ts +113 -0
  314. package/examples/react/FullApp/src/viewmodels/MessageThreadViewModel.ts +83 -0
  315. package/examples/react/FullApp/src/viewmodels/UsersViewModel.ts +88 -0
  316. package/examples/react/FullApp/tsconfig.json +22 -0
  317. package/examples/react/FullApp/vite.config.ts +18 -0
  318. package/examples/react/WorkerApp/index.html +12 -0
  319. package/examples/react/WorkerApp/src/App.tsx +24 -0
  320. package/examples/react/WorkerApp/src/channels/MessagingChannel.ts +46 -0
  321. package/examples/react/WorkerApp/src/channels/WorkerStatusChannel.ts +35 -0
  322. package/examples/react/WorkerApp/src/components/auth/LoginPage.tsx +60 -0
  323. package/examples/react/WorkerApp/src/components/layout/AppShell.tsx +31 -0
  324. package/examples/react/WorkerApp/src/components/layout/Header.tsx +23 -0
  325. package/examples/react/WorkerApp/src/components/layout/Sidebar.tsx +28 -0
  326. package/examples/react/WorkerApp/src/components/messaging/ComposeBar.tsx +33 -0
  327. package/examples/react/WorkerApp/src/components/messaging/ConversationList.tsx +59 -0
  328. package/examples/react/WorkerApp/src/components/messaging/MessageBubble.tsx +45 -0
  329. package/examples/react/WorkerApp/src/components/messaging/MessageThread.tsx +93 -0
  330. package/examples/react/WorkerApp/src/components/messaging/MessagingPage.tsx +53 -0
  331. package/examples/react/WorkerApp/src/components/shared/ErrorBanner.tsx +3 -0
  332. package/examples/react/WorkerApp/src/components/shared/PendingBanner.tsx +37 -0
  333. package/examples/react/WorkerApp/src/components/shared/Spinner.tsx +7 -0
  334. package/examples/react/WorkerApp/src/components/shared/Toast.tsx +41 -0
  335. package/examples/react/WorkerApp/src/components/shift/ShiftPage.tsx +98 -0
  336. package/examples/react/WorkerApp/src/components/shift/ShiftTimer.tsx +24 -0
  337. package/examples/react/WorkerApp/src/components/shift/SiteSelector.tsx +27 -0
  338. package/examples/react/WorkerApp/src/components/sites/SiteFilters.tsx +61 -0
  339. package/examples/react/WorkerApp/src/components/sites/SitesPage.tsx +102 -0
  340. package/examples/react/WorkerApp/src/env.d.ts +10 -0
  341. package/examples/react/WorkerApp/src/events/AppEventBus.ts +7 -0
  342. package/examples/react/WorkerApp/src/main.tsx +10 -0
  343. package/examples/react/WorkerApp/src/mock/MockWebSocket.ts +38 -0
  344. package/examples/react/WorkerApp/src/mock/delay.ts +31 -0
  345. package/examples/react/WorkerApp/src/mock/messages.ts +120 -0
  346. package/examples/react/WorkerApp/src/mock/shifts.ts +57 -0
  347. package/examples/react/WorkerApp/src/mock/sites.ts +14 -0
  348. package/examples/react/WorkerApp/src/mock/workers.ts +12 -0
  349. package/examples/react/WorkerApp/src/models/ComposeMessageModel.ts +17 -0
  350. package/examples/react/WorkerApp/src/resources/ConversationsResource.ts +10 -0
  351. package/examples/react/WorkerApp/src/resources/MessagesResource.ts +32 -0
  352. package/examples/react/WorkerApp/src/resources/ShiftResource.ts +73 -0
  353. package/examples/react/WorkerApp/src/resources/SitesResource.ts +11 -0
  354. package/examples/react/WorkerApp/src/resources/WorkersResource.ts +11 -0
  355. package/examples/react/WorkerApp/src/styles.css +756 -0
  356. package/examples/react/WorkerApp/src/types/conversation.ts +7 -0
  357. package/examples/react/WorkerApp/src/types/message.ts +7 -0
  358. package/examples/react/WorkerApp/src/types/shift.ts +13 -0
  359. package/examples/react/WorkerApp/src/types/site.ts +8 -0
  360. package/examples/react/WorkerApp/src/types/worker.ts +8 -0
  361. package/examples/react/WorkerApp/src/viewmodels/AuthViewModel.ts +41 -0
  362. package/examples/react/WorkerApp/src/viewmodels/ConversationsViewModel.ts +83 -0
  363. package/examples/react/WorkerApp/src/viewmodels/MessageThreadViewModel.ts +113 -0
  364. package/examples/react/WorkerApp/src/viewmodels/ShiftViewModel.ts +147 -0
  365. package/examples/react/WorkerApp/src/viewmodels/SitesViewModel.ts +82 -0
  366. package/examples/react/WorkerApp/tsconfig.json +22 -0
  367. package/examples/react/WorkerApp/vite.config.ts +18 -0
  368. package/package.json +11 -9
  369. package/src/Pending.test.ts +1 -2
  370. package/src/Sorting.test.ts +1 -1
  371. package/src/produceDraft.test.ts +3 -3
  372. package/src/react/components/CardList.test.tsx +1 -1
  373. package/src/react/components/DataTable.test.tsx +1 -1
  374. package/src/react/components/InfiniteScroll.test.tsx +5 -5
  375. package/dist/mvc-kit.cjs.map +0 -1
  376. package/dist/mvc-kit.js.map +0 -1
  377. package/dist/react-native.cjs.map +0 -1
  378. package/dist/react-native.js.map +0 -1
  379. package/dist/react.cjs.map +0 -1
  380. package/dist/react.js.map +0 -1
  381. package/dist/web.cjs.map +0 -1
  382. package/dist/web.js.map +0 -1
package/examples/react/ComplexApp/src/viewmodels/SocialFeedViewModel.ts ADDED
@@ -0,0 +1,39 @@
1
+ import { ViewModel, singleton } from 'mvc-kit';
2
+ import type { SocialPost } from '../types/social';
3
+ import { SocialFeedResource } from '../resources/SocialFeedResource';
4
+
5
+ interface SocialFeedState {
6
+ page: number;
7
+ }
8
+
9
+ export class SocialFeedViewModel extends ViewModel<SocialFeedState> {
10
+ private resource = singleton(SocialFeedResource);
11
+
12
+ // --- Computed getters ---
13
+
14
+ get posts(): SocialPost[] {
15
+ return this.resource.items;
16
+ }
17
+
18
+ get hasMore(): boolean {
19
+ return this.resource.hasMore;
20
+ }
21
+
22
+ get postCount(): number {
23
+ return this.resource.length;
24
+ }
25
+
26
+ // --- Lifecycle ---
27
+
28
+ protected onInit() {
29
+ if (this.resource.length === 0) this.loadMore();
30
+ }
31
+
32
+ // --- Actions ---
33
+
34
+ async loadMore() {
35
+ const page = this.state.page;
36
+ this.set({ page: page + 1 });
37
+ await this.resource.loadPage(page);
38
+ }
39
+ }
package/examples/react/ComplexApp/src/viewmodels/TrafficCardViewModel.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { singleton } from 'mvc-kit';
2
+ import { DashboardCardViewModel } from './DashboardCardViewModel';
3
+ import { TrafficChannel } from '../channels/TrafficChannel';
4
+ import { TrafficCollection } from '../collections/TrafficCollection';
5
+
6
+ export class TrafficCardViewModel extends DashboardCardViewModel {
7
+ protected channel = singleton(TrafficChannel);
8
+ protected collection = singleton(TrafficCollection);
9
+ }
package/examples/react/ComplexApp/src/viewmodels/UsersMetricCardViewModel.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { singleton } from 'mvc-kit';
2
+ import { DashboardCardViewModel } from './DashboardCardViewModel';
3
+ import { UsersMetricChannel } from '../channels/UsersMetricChannel';
4
+ import { UsersMetricCollection } from '../collections/UsersMetricCollection';
5
+
6
+ export class UsersMetricCardViewModel extends DashboardCardViewModel {
7
+ protected channel = singleton(UsersMetricChannel);
8
+ protected collection = singleton(UsersMetricCollection);
9
+ }
package/examples/react/ComplexApp/tsconfig.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2022",
4
+ "module": "ESNext",
5
+ "moduleResolution": "bundler",
6
+ "jsx": "react-jsx",
7
+ "strict": true,
8
+ "noEmit": true,
9
+ "skipLibCheck": true,
10
+ "allowImportingTsExtensions": true,
11
+ "verbatimModuleSyntax": true,
12
+ "erasableSyntaxOnly": false,
13
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
14
+ "types": [],
15
+ "baseUrl": ".",
16
+ "paths": {
17
+ "mvc-kit": ["../../../src/index.ts"],
18
+ "mvc-kit/react": ["../../../src/react/index.ts"]
19
+ }
20
+ },
21
+ "include": ["src"]
22
+ }
package/examples/react/ComplexApp/vite.config.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { defineConfig } from 'vite';
2
+ import { resolve } from 'node:path';
3
+
4
+ export default defineConfig({
5
+ root: import.meta.dirname,
6
+ define: {
7
+ __MVC_KIT_DEV__: true,
8
+ },
9
+ resolve: {
10
+ alias: {
11
+ 'mvc-kit/react': resolve(import.meta.dirname, '../../../src/react/index.ts'),
12
+ 'mvc-kit': resolve(import.meta.dirname, '../../../src/index.ts'),
13
+ },
14
+ },
15
+ server: {
16
+ port: 3001,
17
+ },
18
+ });
package/examples/react/FullApp/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>mvc-kit Full Example</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <script type="module" src="/src/main.tsx"></script>
11
+ </body>
12
+ </html>
package/examples/react/FullApp/src/App.tsx ADDED
@@ -0,0 +1,28 @@
1
+ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
2
+ import { AppShell } from './components/layout/AppShell';
3
+ import { LoginPage } from './components/auth/LoginPage';
4
+ import { DashboardPage } from './components/dashboard/DashboardPage';
5
+ import { UsersPage } from './components/users/UsersPage';
6
+ import { LocationsPage } from './components/locations/LocationsPage';
7
+ import { LocationProfilePage } from './components/locations/LocationProfilePage';
8
+ import { MessagingPage } from './components/messaging/MessagingPage';
9
+ import { Toast } from './components/shared/Toast';
10
+
11
+ export function App() {
12
+ return (
13
+ <BrowserRouter>
14
+ <Routes>
15
+ <Route path="/login" element={<LoginPage />} />
16
+ <Route element={<AppShell />}>
17
+ <Route path="/dashboard" element={<DashboardPage />} />
18
+ <Route path="/users" element={<UsersPage />} />
19
+ <Route path="/locations" element={<LocationsPage />} />
20
+ <Route path="/locations/:id" element={<LocationProfilePage />} />
21
+ <Route path="/messaging" element={<MessagingPage />} />
22
+ </Route>
23
+ <Route path="*" element={<Navigate to="/dashboard" replace />} />
24
+ </Routes>
25
+ <Toast />
26
+ </BrowserRouter>
27
+ );
28
+ }
package/examples/react/FullApp/src/collections/ConversationsCollection.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { Collection } from 'mvc-kit';
2
+ import type { ConversationState } from '../types/conversation';
3
+
4
+ export class ConversationsCollection extends Collection<ConversationState> {}
package/examples/react/FullApp/src/collections/LocationsCollection.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { Collection } from 'mvc-kit';
2
+ import type { LocationState } from '../types/location';
3
+
4
+ export class LocationsCollection extends Collection<LocationState> {}
package/examples/react/FullApp/src/components/auth/LoginPage.tsx ADDED
@@ -0,0 +1,80 @@
1
+ import { useEffect } from 'react';
2
+ import { useNavigate } from 'react-router-dom';
3
+ import { useSingleton, useEvent, useModel } from 'mvc-kit/react';
4
+ import { AuthViewModel } from '../../viewmodels/AuthViewModel';
5
+ import { LoginFormModel } from '../../models/LoginFormModel';
6
+
7
+ export function LoginPage() {
8
+ const [authState, authVM] = useSingleton(AuthViewModel);
9
+ const { loading, error } = authVM.async.login;
10
+ const { state, errors, valid, dirty, model } = useModel(
11
+ () => new LoginFormModel({ email: '', password: '' }),
12
+ );
13
+ const navigate = useNavigate();
14
+
15
+ // Redirect if already authenticated
16
+ useEffect(() => {
17
+ if (authState.isAuthenticated) {
18
+ navigate('/dashboard');
19
+ }
20
+ }, [authState.isAuthenticated, navigate]);
21
+
22
+ // Show inline error from loginFailed event
23
+ useEvent(authVM, 'loginFailed', () => {
24
+ // Error is already shown via vm.async.login error state
25
+ });
26
+
27
+ const handleSubmit = (e: React.FormEvent) => {
28
+ e.preventDefault();
29
+ if (!valid) return;
30
+ authVM.login(state.email, state.password);
31
+ };
32
+
33
+ return (
34
+ <div className="login-page">
35
+ <div className="login-card">
36
+ <h1 className="login-title">mvc-kit Demo</h1>
37
+ <p className="login-subtitle">
38
+ Enter any email and password (6+ chars) to log in
39
+ </p>
40
+
41
+ {error && <div className="error-banner">{error}</div>}
42
+
43
+ <form onSubmit={handleSubmit}>
44
+ <div className="form-group">
45
+ <label className="form-label">Email</label>
46
+ <input
47
+ className={`form-input ${errors.email && dirty ? 'error' : ''}`}
48
+ type="text"
49
+ value={state.email}
50
+ onChange={e => model.setEmail(e.target.value)}
51
+ placeholder="alice@example.com"
52
+ />
53
+ {errors.email && dirty && <div className="form-error">{errors.email}</div>}
54
+ </div>
55
+
56
+ <div className="form-group">
57
+ <label className="form-label">Password</label>
58
+ <input
59
+ className={`form-input ${errors.password && dirty ? 'error' : ''}`}
60
+ type="password"
61
+ value={state.password}
62
+ onChange={e => model.setPassword(e.target.value)}
63
+ placeholder="6+ characters"
64
+ />
65
+ {errors.password && dirty && <div className="form-error">{errors.password}</div>}
66
+ </div>
67
+
68
+ <button
69
+ type="submit"
70
+ className="btn btn-primary"
71
+ style={{ width: '100%', marginTop: '0.5rem' }}
72
+ disabled={!valid || loading}
73
+ >
74
+ {loading ? 'Signing in...' : 'Sign In'}
75
+ </button>
76
+ </form>
77
+ </div>
78
+ </div>
79
+ );
80
+ }
package/examples/react/FullApp/src/components/dashboard/DashboardPage.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import { useLocal } from 'mvc-kit/react';
2
+ import { DashboardViewModel } from '../../viewmodels/DashboardViewModel';
3
+ import { StatsCard } from './StatsCard';
4
+ import { RecentActivityCard } from './RecentActivityCard';
5
+ import { Spinner } from '../shared/Spinner';
6
+ import { ErrorBanner } from '../shared/ErrorBanner';
7
+
8
+ export function DashboardPage() {
9
+ const [, vm] = useLocal(DashboardViewModel, {});
10
+ const { loading, error } = vm.async.load;
11
+
12
+ return (
13
+ <div>
14
+ <h1 className="page-title">Dashboard</h1>
15
+
16
+ {loading && <Spinner />}
17
+ {error && <ErrorBanner message={error} />}
18
+
19
+ <div className="stats-grid">
20
+ <StatsCard title="Total Users" value={vm.totalUsers} subtitle={`${vm.activeUsers} active`} />
21
+ <StatsCard title="Total Locations" value={vm.totalLocations} subtitle={`${vm.activeLocations} active`} />
22
+ <StatsCard title="Admins" value={vm.usersByRole['admin'] ?? 0} />
23
+ <StatsCard title="Managers" value={vm.usersByRole['manager'] ?? 0} />
24
+ </div>
25
+
26
+ <RecentActivityCard users={vm.recentUsers} />
27
+ </div>
28
+ );
29
+ }
package/examples/react/FullApp/src/components/dashboard/RecentActivityCard.tsx ADDED
@@ -0,0 +1,35 @@
1
+ import type { UserState } from '../../types/user';
2
+
3
+ interface RecentActivityCardProps {
4
+ users: UserState[];
5
+ }
6
+
7
+ export function RecentActivityCard({ users }: RecentActivityCardProps) {
8
+ return (
9
+ <div className="card">
10
+ <h3 style={{ marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600 }}>
11
+ Recent Team Members
12
+ </h3>
13
+ <ul className="activity-list">
14
+ {users.map(user => (
15
+ <li key={user.id} className="activity-item">
16
+ <div className="avatar">
17
+ {user.firstName[0]}{user.lastName[0]}
18
+ </div>
19
+ <div>
20
+ <div style={{ fontWeight: 500 }}>
21
+ {user.firstName} {user.lastName}
22
+ </div>
23
+ <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)' }}>
24
+ {user.role} &middot; Joined {new Date(user.createdAt).toLocaleDateString()}
25
+ </div>
26
+ </div>
27
+ <span className={`badge badge-${user.status}`} style={{ marginLeft: 'auto' }}>
28
+ {user.status}
29
+ </span>
30
+ </li>
31
+ ))}
32
+ </ul>
33
+ </div>
34
+ );
35
+ }
package/examples/react/FullApp/src/components/dashboard/StatsCard.tsx ADDED
@@ -0,0 +1,19 @@
1
+ interface StatsCardProps {
2
+ title: string;
3
+ value: number | string;
4
+ subtitle?: string;
5
+ }
6
+
7
+ export function StatsCard({ title, value, subtitle }: StatsCardProps) {
8
+ return (
9
+ <div className="stat-card">
10
+ <div className="stat-value">{value}</div>
11
+ <div className="stat-label">{title}</div>
12
+ {subtitle && (
13
+ <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', marginTop: '0.25rem' }}>
14
+ {subtitle}
15
+ </div>
16
+ )}
17
+ </div>
18
+ );
19
+ }
package/examples/react/FullApp/src/components/layout/AppShell.tsx ADDED
@@ -0,0 +1,31 @@
1
+ import { useEffect } from 'react';
2
+ import { Outlet, useNavigate } from 'react-router-dom';
3
+ import { useSingleton } from 'mvc-kit/react';
4
+ import { AuthViewModel } from '../../viewmodels/AuthViewModel';
5
+ import { Sidebar } from './Sidebar';
6
+ import { Header } from './Header';
7
+
8
+ export function AppShell() {
9
+ const [state, vm] = useSingleton(AuthViewModel);
10
+ const navigate = useNavigate();
11
+
12
+ useEffect(() => {
13
+ if (!state.isAuthenticated) {
14
+ navigate('/login');
15
+ }
16
+ }, [state.isAuthenticated, navigate]);
17
+
18
+ if (!state.isAuthenticated || !state.user) return null;
19
+
20
+ return (
21
+ <div className="app-shell">
22
+ <Sidebar />
23
+ <div className="main-area">
24
+ <Header user={state.user} onLogout={() => vm.logout()} />
25
+ <div className="page-content">
26
+ <Outlet />
27
+ </div>
28
+ </div>
29
+ </div>
30
+ );
31
+ }
package/examples/react/FullApp/src/components/layout/Header.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import type { UserState } from '../../types/user';
2
+
3
+ interface HeaderProps {
4
+ user: UserState;
5
+ onLogout: () => void;
6
+ }
7
+
8
+ export function Header({ user, onLogout }: HeaderProps) {
9
+ return (
10
+ <header className="header">
11
+ <div />
12
+ <div className="header-user">
13
+ <span style={{ fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
14
+ {user.firstName} {user.lastName}
15
+ </span>
16
+ <div className="avatar">
17
+ {user.firstName[0]}{user.lastName[0]}
18
+ </div>
19
+ <button className="btn btn-secondary btn-sm" onClick={onLogout}>
20
+ Logout
21
+ </button>
22
+ </div>
23
+ </header>
24
+ );
25
+ }
package/examples/react/FullApp/src/components/layout/Sidebar.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import { Link, useLocation } from 'react-router-dom';
2
+
3
+ const navItems = [
4
+ { path: '/dashboard', label: 'Dashboard' },
5
+ { path: '/users', label: 'Users' },
6
+ { path: '/locations', label: 'Locations' },
7
+ { path: '/messaging', label: 'Messaging' },
8
+ ];
9
+
10
+ export function Sidebar() {
11
+ const { pathname } = useLocation();
12
+
13
+ return (
14
+ <aside className="sidebar">
15
+ <div className="sidebar-logo">mvc-kit</div>
16
+ <nav className="sidebar-nav">
17
+ {navItems.map(item => (
18
+ <Link
19
+ key={item.path}
20
+ to={item.path}
21
+ className={`sidebar-link ${pathname.startsWith(item.path) ? 'active' : ''}`}
22
+ >
23
+ {item.label}
24
+ </Link>
25
+ ))}
26
+ </nav>
27
+ </aside>
28
+ );
29
+ }
package/examples/react/FullApp/src/components/locations/LocationFilters.tsx ADDED
@@ -0,0 +1,60 @@
1
+ import type { LocationState } from '../../types/location';
2
+
3
+ interface LocationFiltersProps {
4
+ search: string;
5
+ typeFilter: 'all' | LocationState['type'];
6
+ statusFilter: 'all' | LocationState['status'];
7
+ onSearchChange: (value: string) => void;
8
+ onTypeFilterChange: (value: 'all' | LocationState['type']) => void;
9
+ onStatusFilterChange: (value: 'all' | LocationState['status']) => void;
10
+ }
11
+
12
+ export function LocationFilters({
13
+ search,
14
+ typeFilter,
15
+ statusFilter,
16
+ onSearchChange,
17
+ onTypeFilterChange,
18
+ onStatusFilterChange,
19
+ }: LocationFiltersProps) {
20
+ return (
21
+ <div className="filters">
22
+ <div className="filter-group">
23
+ <label className="filter-label">Search</label>
24
+ <input
25
+ className="filter-input"
26
+ type="text"
27
+ value={search}
28
+ onChange={e => onSearchChange(e.target.value)}
29
+ placeholder="Search by name or city..."
30
+ />
31
+ </div>
32
+ <div className="filter-group">
33
+ <label className="filter-label">Type</label>
34
+ <select
35
+ className="filter-select"
36
+ value={typeFilter}
37
+ onChange={e => onTypeFilterChange(e.target.value as 'all' | LocationState['type'])}
38
+ >
39
+ <option value="all">All Types</option>
40
+ <option value="office">Office</option>
41
+ <option value="warehouse">Warehouse</option>
42
+ <option value="retail">Retail</option>
43
+ </select>
44
+ </div>
45
+ <div className="filter-group">
46
+ <label className="filter-label">Status</label>
47
+ <select
48
+ className="filter-select"
49
+ value={statusFilter}
50
+ onChange={e => onStatusFilterChange(e.target.value as 'all' | LocationState['status'])}
51
+ >
52
+ <option value="all">All Statuses</option>
53
+ <option value="active">Active</option>
54
+ <option value="inactive">Inactive</option>
55
+ <option value="maintenance">Maintenance</option>
56
+ </select>
57
+ </div>
58
+ </div>
59
+ );
60
+ }
package/examples/react/FullApp/src/components/locations/LocationForm.tsx ADDED
@@ -0,0 +1,112 @@
1
+ import { useField } from 'mvc-kit/react';
2
+ import type { LocationFormModel } from '../../models/LocationFormModel';
3
+
4
+ interface LocationFormProps {
5
+ model: LocationFormModel;
6
+ onSave: () => void;
7
+ saving: boolean;
8
+ }
9
+
10
+ export function LocationForm({ model, onSave, saving }: LocationFormProps) {
11
+ const name = useField(model, 'name');
12
+ const type = useField(model, 'type');
13
+ const city = useField(model, 'city');
14
+ const stateName = useField(model, 'state');
15
+ const address = useField(model, 'address');
16
+ const capacity = useField(model, 'capacity');
17
+
18
+ const handleSubmit = (e: React.FormEvent) => {
19
+ e.preventDefault();
20
+ onSave();
21
+ };
22
+
23
+ return (
24
+ <form onSubmit={handleSubmit}>
25
+ <div className="form-group">
26
+ <label className="form-label">Name</label>
27
+ <input
28
+ className={`form-input ${name.error ? 'error' : ''}`}
29
+ value={name.value}
30
+ onChange={e => model.setName(e.target.value)}
31
+ />
32
+ {name.error && <div className="form-error">{name.error}</div>}
33
+ </div>
34
+
35
+ <div className="form-group">
36
+ <label className="form-label">Type</label>
37
+ <select
38
+ className="form-select"
39
+ value={type.value}
40
+ onChange={e => model.setType(e.target.value as 'office' | 'warehouse' | 'retail')}
41
+ >
42
+ <option value="office">Office</option>
43
+ <option value="warehouse">Warehouse</option>
44
+ <option value="retail">Retail</option>
45
+ </select>
46
+ </div>
47
+
48
+ <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
49
+ <div className="form-group">
50
+ <label className="form-label">City</label>
51
+ <input
52
+ className={`form-input ${city.error ? 'error' : ''}`}
53
+ value={city.value}
54
+ onChange={e => model.setCity(e.target.value)}
55
+ />
56
+ {city.error && <div className="form-error">{city.error}</div>}
57
+ </div>
58
+
59
+ <div className="form-group">
60
+ <label className="form-label">State</label>
61
+ <input
62
+ className={`form-input ${stateName.error ? 'error' : ''}`}
63
+ value={stateName.value}
64
+ onChange={e => model.setStateName(e.target.value)}
65
+ />
66
+ {stateName.error && <div className="form-error">{stateName.error}</div>}
67
+ </div>
68
+ </div>
69
+
70
+ <div className="form-group">
71
+ <label className="form-label">Address</label>
72
+ <input
73
+ className={`form-input ${address.error ? 'error' : ''}`}
74
+ value={address.value}
75
+ onChange={e => model.setAddress(e.target.value)}
76
+ />
77
+ {address.error && <div className="form-error">{address.error}</div>}
78
+ </div>
79
+
80
+ <div className="form-group">
81
+ <label className="form-label">Capacity</label>
82
+ <input
83
+ className={`form-input ${capacity.error ? 'error' : ''}`}
84
+ type="number"
85
+ value={capacity.value}
86
+ onChange={e => model.setCapacity(Number(e.target.value))}
87
+ />
88
+ {capacity.error && <div className="form-error">{capacity.error}</div>}
89
+ </div>
90
+
91
+ <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginTop: '1rem' }}>
92
+ <button
93
+ type="submit"
94
+ className="btn btn-primary"
95
+ disabled={!model.valid || !model.dirty || saving}
96
+ >
97
+ {saving ? 'Saving...' : 'Save Changes'}
98
+ </button>
99
+ {model.dirty && <span className="dirty-indicator">Unsaved changes</span>}
100
+ {model.dirty && (
101
+ <button
102
+ type="button"
103
+ className="btn btn-secondary btn-sm"
104
+ onClick={() => model.rollback()}
105
+ >
106
+ Discard
107
+ </button>
108
+ )}
109
+ </div>
110
+ </form>
111
+ );
112
+ }
package/examples/react/FullApp/src/components/locations/LocationProfilePage.tsx ADDED
@@ -0,0 +1,81 @@
1
+ import { useParams, Link } from 'react-router-dom';
2
+ import { useLocal, useEvent } from 'mvc-kit/react';
3
+ import { LocationProfileViewModel } from '../../viewmodels/LocationProfileViewModel';
4
+ import { LocationForm } from './LocationForm';
5
+ import { Spinner } from '../shared/Spinner';
6
+ import { ErrorBanner } from '../shared/ErrorBanner';
7
+
8
+ function LocationProfileContent({ locationId }: { locationId: string }) {
9
+ const [state, vm] = useLocal(LocationProfileViewModel, {
10
+ location: null,
11
+ locationId,
12
+ });
13
+ const loadState = vm.async.load;
14
+ const saveState = vm.async.save;
15
+
16
+ useEvent(vm, 'saved', () => {
17
+ // Toast is handled in the ViewModel via AppEventBus
18
+ });
19
+
20
+ if (loadState.loading) return <Spinner large />;
21
+ if (loadState.error) return <ErrorBanner message={loadState.error} />;
22
+ if (!state.location || !vm.model) return null;
23
+
24
+ return (
25
+ <div>
26
+ <Link to="/locations" className="back-link">
27
+ &larr; Back to Locations
28
+ </Link>
29
+ <h1 className="page-title">{state.location.name}</h1>
30
+
31
+ <div className="profile-layout">
32
+ <div>
33
+ <div className="card">
34
+ <h3 className="profile-section-title">Details</h3>
35
+ <div className="detail-row">
36
+ <span className="detail-label">Type</span>
37
+ <span>{state.location.type}</span>
38
+ </div>
39
+ <div className="detail-row">
40
+ <span className="detail-label">Status</span>
41
+ <span className={`badge badge-${state.location.status}`}>
42
+ {state.location.status}
43
+ </span>
44
+ </div>
45
+ <div className="detail-row">
46
+ <span className="detail-label">City</span>
47
+ <span>{state.location.city}, {state.location.state}</span>
48
+ </div>
49
+ <div className="detail-row">
50
+ <span className="detail-label">Manager</span>
51
+ <span>{vm.managerName}</span>
52
+ </div>
53
+ <div className="detail-row">
54
+ <span className="detail-label">Capacity</span>
55
+ <span>{state.location.capacity}</span>
56
+ </div>
57
+ </div>
58
+ </div>
59
+
60
+ <div>
61
+ <div className="card">
62
+ <h3 className="profile-section-title">Edit Location</h3>
63
+ {saveState.error && <ErrorBanner message={saveState.error} />}
64
+ <LocationForm
65
+ model={vm.model}
66
+ onSave={() => vm.save()}
67
+ saving={saveState.loading}
68
+ />
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ );
74
+ }
75
+
76
+ export function LocationProfilePage() {
77
+ const { id } = useParams<{ id: string }>();
78
+ if (!id) return null;
79
+ // key={id} remounts when navigating between different locations
80
+ return <LocationProfileContent key={id} locationId={id} />;
81
+ }