[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-devtools-bidirectional":3,"mdc--8ri5bs-key":35,"related-org-tanstack-devtools-bidirectional":8035,"related-repo-tanstack-devtools-bidirectional":8176},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":20,"repoUrl":21,"updatedAt":22,"license":23,"forks":24,"topics":25,"repo":30,"sourceUrl":33,"mdContent":34},"devtools-bidirectional","implement bidirectional devtools communication","Two-way event patterns between devtools panel and application. App-to-devtools observation, devtools-to-app commands, time-travel debugging with snapshots and revert. structuredClone for snapshot safety, distinct event suffixes for observation vs commands, serializable payloads only.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,17],{"name":13,"slug":14,"type":15},"Observability","observability","tag",{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},"Debugging","debugging",476,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Fdevtools","2026-07-16T06:04:40.486044",null,92,[26,27,28,29],"devtool","devtools","react","solidjs",{"repoUrl":21,"stars":20,"forks":24,"topics":31,"description":32},[26,27,28,29],"🤖 Framework-agnostic devtools panel for handling TanStack libraries devtools and your custom devtool plugins","https:\u002F\u002Fgithub.com\u002FTanStack\u002Fdevtools\u002Ftree\u002FHEAD\u002Fpackages\u002Fevent-bus-client\u002Fskills\u002Fdevtools-bidirectional","---\nname: devtools-bidirectional\ndescription: Two-way event patterns between devtools panel and application. App-to-devtools observation, devtools-to-app commands, time-travel debugging with snapshots and revert. structuredClone for snapshot safety, distinct event suffixes for observation vs commands, serializable payloads only.\ntype: core\nlibrary: '@tanstack\u002Fdevtools-event-client'\nlibrary_version: '0.10.12'\nrequires: devtools-event-client\nsources:\n - packages\u002Fevent-bus-client\u002Fsrc\u002Fplugin.ts\n - docs\u002Fbidirectional-communication.md\n---\n\n# devtools-bidirectional\n\n> **Prerequisite:** Read and understand the `devtools-event-client` skill first. This skill builds on `EventClient`, its event map types, `emit()`\u002F`on()` API, pluginId namespacing, connection lifecycle, and singleton pattern. Everything here assumes you already have a working `EventClient` instance.\n\nTwo-way communication between your application and a TanStack Devtools panel using `EventClient`. The same client instance handles both directions: the app emits observation events that the panel listens to, and the panel emits command events that the app listens to.\n\n## Core Concept\n\n`EventClient` is not unidirectional. Both `emit()` and `on()` work from either side -- application code or panel code -- on the same shared event bus. The direction is a convention you establish through your event map design, not a limitation of the API.\n\n```\nApp code calls: client.emit('state-update', ...) \u002F\u002F observation\nPanel code calls: client.on('state-update', ...) \u002F\u002F observation\n\nPanel code calls: client.emit('set-state', ...) \u002F\u002F command\nApp code calls: client.on('set-state', ...) \u002F\u002F command\n```\n\n## Core Patterns\n\n### 1. App-to-Devtools Observation\n\nThe app emits state changes. The panel listens and renders.\n\n**Event map and client (shared module):**\n\n```ts\nimport { EventClient } from '@tanstack\u002Fdevtools-event-client'\n\ntype CounterEvents = {\n \u002F\u002F Observation: app -> panel\n 'state-update': { count: number; updatedAt: number }\n}\n\nclass CounterDevtoolsClient extends EventClient\u003CCounterEvents> {\n constructor() {\n super({\n pluginId: 'counter-inspector',\n enabled: process.env.NODE_ENV !== 'production',\n })\n }\n}\n\nexport const counterClient = new CounterDevtoolsClient()\n```\n\n**App side -- emit on state changes:**\n\n```ts\nimport { counterClient } from '.\u002Fcounter-devtools-client'\n\nfunction increment() {\n count += 1\n counterClient.emit('state-update', {\n count,\n updatedAt: Date.now(),\n })\n}\n```\n\n**Panel side -- listen and display:**\n\n```ts\nimport { counterClient } from '.\u002Fcounter-devtools-client'\n\nconst cleanup = counterClient.on('state-update', (event) => {\n \u002F\u002F event.payload.count\n \u002F\u002F event.payload.updatedAt\n renderPanel(event.payload)\n})\n```\n\n### 2. Devtools-to-App Commands\n\nThe panel sends commands. The app listens and mutates state.\n\n**Extend the event map with command events:**\n\n```ts\ntype CounterEvents = {\n \u002F\u002F Observation: app -> panel\n 'state-update': { count: number; updatedAt: number }\n \u002F\u002F Commands: panel -> app\n reset: void\n 'set-count': { count: number }\n}\n```\n\n**Panel side -- emit commands on user interaction:**\n\n```ts\nimport { counterClient } from '.\u002Fcounter-devtools-client'\n\nfunction handleResetClick() {\n counterClient.emit('reset', undefined)\n}\n\nfunction handleSetCount(newCount: number) {\n counterClient.emit('set-count', { count: newCount })\n}\n```\n\n**App side -- listen for commands and react:**\n\n```ts\nimport { counterClient } from '.\u002Fcounter-devtools-client'\n\ncounterClient.on('reset', () => {\n count = 0\n \u002F\u002F Re-emit observation so panel updates\n counterClient.emit('state-update', {\n count,\n updatedAt: Date.now(),\n })\n})\n\ncounterClient.on('set-count', (event) => {\n count = event.payload.count\n counterClient.emit('state-update', {\n count,\n updatedAt: Date.now(),\n })\n})\n```\n\nThe command handler re-emits an observation event after mutating state. This closes the loop so the panel sees the result of its own command.\n\n### 3. Time-Travel Debugging\n\nCombine observation (snapshots) with commands (revert) to build a time-travel slider.\n\n**Event map:**\n\n```ts\ntype TimeTravelEvents = {\n \u002F\u002F Observation: app -> panel\n snapshot: { state: unknown; timestamp: number; label: string }\n \u002F\u002F Command: panel -> app\n revert: { state: unknown }\n}\n\nclass TimeTravelClient extends EventClient\u003CTimeTravelEvents> {\n constructor() {\n super({\n pluginId: 'time-travel',\n enabled: process.env.NODE_ENV !== 'production',\n })\n }\n}\n\nexport const timeTravelClient = new TimeTravelClient()\n```\n\n**App side -- emit snapshots with structuredClone:**\n\n```ts\nimport { timeTravelClient } from '.\u002Ftime-travel-client'\n\nfunction applyAction(action: { type: string; payload: unknown }) {\n state = reducer(state, action)\n\n timeTravelClient.emit('snapshot', {\n state: structuredClone(state),\n timestamp: Date.now(),\n label: action.type,\n })\n}\n\n\u002F\u002F Listen for revert commands from devtools\ntimeTravelClient.on('revert', (event) => {\n state = event.payload.state\n rerender()\n})\n```\n\n`structuredClone(state)` is required here. Without it, the snapshot payload holds a reference to the live state object. When the app mutates state later, all previously stored snapshots in the panel are corrupted because they point to the same object.\n\n**Panel side -- collect snapshots and revert:**\n\n```tsx\nimport { timeTravelClient } from '.\u002Ftime-travel-client'\n\nfunction TimeTravelPanel() {\n const [snapshots, setSnapshots] = useState\u003C\n Array\u003C{ state: unknown; timestamp: number; label: string }>\n >([])\n const [index, setIndex] = useState(0)\n\n useEffect(() => {\n return timeTravelClient.on('snapshot', (event) => {\n setSnapshots((prev) => [...prev, event.payload])\n setIndex((prev) => prev + 1)\n })\n }, [])\n\n const handleSliderChange = (newIndex: number) => {\n setIndex(newIndex)\n timeTravelClient.emit('revert', {\n state: snapshots[newIndex].state,\n })\n }\n\n return (\n \u003Cdiv>\n \u003Cinput\n type=\"range\"\n min={0}\n max={snapshots.length - 1}\n value={index}\n onChange={(e) => handleSliderChange(Number(e.target.value))}\n \u002F>\n \u003Cp>\n {snapshots[index]?.label} (\n {new Date(snapshots[index]?.timestamp).toLocaleTimeString()})\n \u003C\u002Fp>\n \u003Cpre>{JSON.stringify(snapshots[index]?.state, null, 2)}\u003C\u002Fpre>\n \u003C\u002Fdiv>\n )\n}\n```\n\nAfter the app handles `revert`, it should re-emit a `snapshot` so the panel timeline stays current. The revert handler in the app side example above does not re-emit -- add it if your UI needs the timeline to update after a revert:\n\n```ts\ntimeTravelClient.on('revert', (event) => {\n state = event.payload.state\n rerender()\n \u002F\u002F Optional: re-emit so the timeline reflects the revert\n timeTravelClient.emit('snapshot', {\n state: structuredClone(state),\n timestamp: Date.now(),\n label: 'revert',\n })\n})\n```\n\n### 4. Bidirectional Event Map Design\n\nWhen a single plugin needs both observation and command events, define them all in one event map. Use naming conventions to distinguish direction:\n\n```ts\ntype StoreInspectorEvents = {\n \u002F\u002F Observation: app -> panel (describe what happened)\n 'state-update': { storeName: string; state: unknown; timestamp: number }\n 'action-dispatched': { storeName: string; action: string; payload: unknown }\n 'error-caught': { storeName: string; error: string; stack?: string }\n\n \u002F\u002F Commands: panel -> app (describe what to do)\n 'set-state': { storeName: string; state: unknown }\n 'dispatch-action': { storeName: string; action: string; payload: unknown }\n reset: void\n revert: { state: unknown }\n}\n```\n\nNaming convention:\n\n- **Observation events** describe what happened: `state-update`, `action-dispatched`, `error-caught`, `snapshot`\n- **Command events** describe what to do: `set-state`, `dispatch-action`, `reset`, `revert`\n\nThis distinction is purely a convention in your event map keys. The `EventClient` API is the same for both. But maintaining it makes your event map self-documenting and prevents confusion about which side emits vs listens.\n\n**Full bidirectional wiring with one client:**\n\n```ts\nimport { EventClient } from '@tanstack\u002Fdevtools-event-client'\n\ntype StoreInspectorEvents = {\n 'state-update': { storeName: string; state: unknown; timestamp: number }\n 'set-state': { storeName: string; state: unknown }\n reset: void\n}\n\nclass StoreInspectorClient extends EventClient\u003CStoreInspectorEvents> {\n constructor() {\n super({\n pluginId: 'store-inspector',\n enabled: process.env.NODE_ENV !== 'production',\n })\n }\n}\n\nexport const storeInspector = new StoreInspectorClient()\n```\n\n**App side:**\n\n```ts\nimport { storeInspector } from '.\u002Fstore-inspector-client'\n\n\u002F\u002F Observation: emit state changes\nfunction updateStore(storeName: string, newState: unknown) {\n stores[storeName] = newState\n storeInspector.emit('state-update', {\n storeName,\n state: structuredClone(newState),\n timestamp: Date.now(),\n })\n}\n\n\u002F\u002F Command handlers: listen for panel commands\nstoreInspector.on('set-state', (event) => {\n const { storeName, state } = event.payload\n stores[storeName] = state\n storeInspector.emit('state-update', {\n storeName,\n state: structuredClone(state),\n timestamp: Date.now(),\n })\n})\n\nstoreInspector.on('reset', () => {\n for (const storeName of Object.keys(stores)) {\n stores[storeName] = initialStates[storeName]\n storeInspector.emit('state-update', {\n storeName,\n state: structuredClone(initialStates[storeName]),\n timestamp: Date.now(),\n })\n }\n})\n```\n\n**Panel side:**\n\n```ts\nimport { storeInspector } from '.\u002Fstore-inspector-client'\n\n\u002F\u002F Observation: listen for state changes\nstoreInspector.on('state-update', (event) => {\n renderStore(event.payload.storeName, event.payload.state)\n})\n\n\u002F\u002F Commands: emit on user action\nfunction handleEditState(storeName: string, newState: unknown) {\n storeInspector.emit('set-state', { storeName, state: newState })\n}\n\nfunction handleReset() {\n storeInspector.emit('reset', undefined)\n}\n```\n\n## Debouncing Frequent Observations\n\nHigh-frequency state changes (e.g., mouse tracking, animation frames) can flood the event bus. Debounce on the emit side:\n\n```ts\nimport { storeInspector } from '.\u002Fstore-inspector-client'\n\nlet debounceTimer: ReturnType\u003Ctypeof setTimeout> | null = null\n\nfunction emitStateUpdate(storeName: string, state: unknown) {\n if (debounceTimer) clearTimeout(debounceTimer)\n debounceTimer = setTimeout(() => {\n storeInspector.emit('state-update', {\n storeName,\n state: structuredClone(state),\n timestamp: Date.now(),\n })\n }, 16) \u002F\u002F ~60fps cap\n}\n```\n\nDo not debounce command events. Commands are user-initiated and infrequent.\n\n## Common Mistakes\n\n### 1. Not using structuredClone for snapshots (HIGH)\n\nWithout `structuredClone`, snapshot payloads hold references to the live state object. When the app mutates state later, every stored snapshot in the panel is silently corrupted.\n\nWrong:\n\n```ts\ntimeTravelClient.emit('snapshot', {\n state,\n timestamp: Date.now(),\n label: action.type,\n})\n```\n\nThe panel stores `event.payload.state`, which is a reference to the app's `state` variable. On the next mutation, the panel's stored snapshot now reflects the new state, not the historical state.\n\nCorrect:\n\n```ts\ntimeTravelClient.emit('snapshot', {\n state: structuredClone(state),\n timestamp: Date.now(),\n label: action.type,\n})\n```\n\n`structuredClone` creates a deep copy. The snapshot is frozen in time regardless of future mutations. This applies to any observation event where the panel accumulates historical data -- not just time-travel.\n\n### 2. Non-serializable payloads in cross-tab scenarios (HIGH)\n\nWhen using the server event bus (WebSocket\u002FSSE\u002FBroadcastChannel), payloads are serialized for transport. Functions, DOM nodes, class instances with methods, `Map`, `Set`, `WeakRef`, and circular references all fail silently or lose data.\n\nThis is especially dangerous in bidirectional patterns because command payloads flow panel-to-app and may cross transport boundaries.\n\nWrong:\n\n```ts\nstoreInspector.emit('set-state', {\n storeName: 'main',\n state: {\n items: new Map([['a', 1]]), \u002F\u002F Map -- lost on serialization\n onClick: () => alert('hi'), \u002F\u002F Function -- lost on serialization\n ref: document.getElementById('x'), \u002F\u002F DOM node -- lost on serialization\n },\n})\n```\n\nCorrect:\n\n```ts\nstoreInspector.emit('set-state', {\n storeName: 'main',\n state: {\n items: Object.fromEntries(new Map([['a', 1]])),\n timestamp: Date.now(),\n },\n})\n```\n\nRule of thumb: if `JSON.parse(JSON.stringify(payload))` does not round-trip cleanly, the payload is not safe for the event bus.\n\n### 3. Not distinguishing observation from command events (MEDIUM)\n\nMixing naming conventions makes the event map confusing and error-prone. Developers end up emitting observation events from the panel or command events from the app, breaking the communication contract.\n\nWrong:\n\n```ts\ntype MyEvents = {\n state: unknown \u002F\u002F Is this observation or command?\n update: unknown \u002F\u002F Who emits this?\n count: number \u002F\u002F Unclear direction\n}\n```\n\nCorrect:\n\n```ts\ntype MyEvents = {\n 'state-update': unknown \u002F\u002F Observation: describes what happened\n 'set-state': unknown \u002F\u002F Command: describes what to do\n 'count-changed': number \u002F\u002F Observation: past tense \u002F descriptive\n reset: void \u002F\u002F Command: imperative\n}\n```\n\nUse observation suffixes that describe what happened (`-update`, `-changed`, `-dispatched`, `-caught`). Use command suffixes that describe what to do (`set-`, `dispatch-`, `reset`, `revert`). The naming convention is not enforced by the API, but consistent naming prevents wiring mistakes.\n\n## See Also\n\n- `devtools-event-client` -- base event system: event maps, `emit()`\u002F`on()`, connection lifecycle, singleton pattern\n- `devtools-instrumentation` -- strategic placement of `emit()` calls in library code benefits from bidirectional awareness (knowing that commands will flow back)\n",{"data":36,"body":44},{"name":4,"description":6,"type":37,"library":38,"library_version":39,"requires":40,"sources":41},"core","@tanstack\u002Fdevtools-event-client","0.10.12","devtools-event-client",[42,43],"packages\u002Fevent-bus-client\u002Fsrc\u002Fplugin.ts","docs\u002Fbidirectional-communication.md",{"type":45,"children":46},"root",[47,54,109,121,128,152,164,170,177,182,190,624,632,830,838,1019,1025,1030,1038,1198,1206,1438,1446,1870,1875,1881,1886,1894,2261,2269,2713,2724,2732,3836,3855,4117,4123,4128,4578,4583,4655,4667,4675,5108,5116,5976,5984,6385,6391,6396,6781,6786,6792,6798,6811,6816,6944,6964,6969,7108,7118,7124,7151,7156,7160,7441,7445,7652,7665,7671,7676,7680,7775,7779,7918,7979,7985,8029],{"type":48,"tag":49,"props":50,"children":51},"element","h1",{"id":4},[52],{"type":53,"value":4},"text",{"type":48,"tag":55,"props":56,"children":57},"blockquote",{},[58],{"type":48,"tag":59,"props":60,"children":61},"p",{},[62,68,70,76,78,84,86,92,94,100,102,107],{"type":48,"tag":63,"props":64,"children":65},"strong",{},[66],{"type":53,"value":67},"Prerequisite:",{"type":53,"value":69}," Read and understand the ",{"type":48,"tag":71,"props":72,"children":74},"code",{"className":73},[],[75],{"type":53,"value":40},{"type":53,"value":77}," skill first. This skill builds on ",{"type":48,"tag":71,"props":79,"children":81},{"className":80},[],[82],{"type":53,"value":83},"EventClient",{"type":53,"value":85},", its event map types, ",{"type":48,"tag":71,"props":87,"children":89},{"className":88},[],[90],{"type":53,"value":91},"emit()",{"type":53,"value":93},"\u002F",{"type":48,"tag":71,"props":95,"children":97},{"className":96},[],[98],{"type":53,"value":99},"on()",{"type":53,"value":101}," API, pluginId namespacing, connection lifecycle, and singleton pattern. Everything here assumes you already have a working ",{"type":48,"tag":71,"props":103,"children":105},{"className":104},[],[106],{"type":53,"value":83},{"type":53,"value":108}," instance.",{"type":48,"tag":59,"props":110,"children":111},{},[112,114,119],{"type":53,"value":113},"Two-way communication between your application and a TanStack Devtools panel using ",{"type":48,"tag":71,"props":115,"children":117},{"className":116},[],[118],{"type":53,"value":83},{"type":53,"value":120},". The same client instance handles both directions: the app emits observation events that the panel listens to, and the panel emits command events that the app listens to.",{"type":48,"tag":122,"props":123,"children":125},"h2",{"id":124},"core-concept",[126],{"type":53,"value":127},"Core Concept",{"type":48,"tag":59,"props":129,"children":130},{},[131,136,138,143,145,150],{"type":48,"tag":71,"props":132,"children":134},{"className":133},[],[135],{"type":53,"value":83},{"type":53,"value":137}," is not unidirectional. Both ",{"type":48,"tag":71,"props":139,"children":141},{"className":140},[],[142],{"type":53,"value":91},{"type":53,"value":144}," and ",{"type":48,"tag":71,"props":146,"children":148},{"className":147},[],[149],{"type":53,"value":99},{"type":53,"value":151}," work from either side -- application code or panel code -- on the same shared event bus. The direction is a convention you establish through your event map design, not a limitation of the API.",{"type":48,"tag":153,"props":154,"children":158},"pre",{"className":155,"code":157,"language":53},[156],"language-text","App code calls: client.emit('state-update', ...) \u002F\u002F observation\nPanel code calls: client.on('state-update', ...) \u002F\u002F observation\n\nPanel code calls: client.emit('set-state', ...) \u002F\u002F command\nApp code calls: client.on('set-state', ...) \u002F\u002F command\n",[159],{"type":48,"tag":71,"props":160,"children":162},{"__ignoreMap":161},"",[163],{"type":53,"value":157},{"type":48,"tag":122,"props":165,"children":167},{"id":166},"core-patterns",[168],{"type":53,"value":169},"Core Patterns",{"type":48,"tag":171,"props":172,"children":174},"h3",{"id":173},"_1-app-to-devtools-observation",[175],{"type":53,"value":176},"1. App-to-Devtools Observation",{"type":48,"tag":59,"props":178,"children":179},{},[180],{"type":53,"value":181},"The app emits state changes. The panel listens and renders.",{"type":48,"tag":59,"props":183,"children":184},{},[185],{"type":48,"tag":63,"props":186,"children":187},{},[188],{"type":53,"value":189},"Event map and client (shared module):",{"type":48,"tag":153,"props":191,"children":195},{"className":192,"code":193,"language":194,"meta":161,"style":161},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { EventClient } from '@tanstack\u002Fdevtools-event-client'\n\ntype CounterEvents = {\n \u002F\u002F Observation: app -> panel\n 'state-update': { count: number; updatedAt: number }\n}\n\nclass CounterDevtoolsClient extends EventClient\u003CCounterEvents> {\n constructor() {\n super({\n pluginId: 'counter-inspector',\n enabled: process.env.NODE_ENV !== 'production',\n })\n }\n}\n\nexport const counterClient = new CounterDevtoolsClient()\n","ts",[196],{"type":48,"tag":71,"props":197,"children":198},{"__ignoreMap":161},[199,248,258,284,294,360,369,377,419,437,456,487,546,560,569,577,585],{"type":48,"tag":200,"props":201,"children":204},"span",{"class":202,"line":203},"line",1,[205,211,217,223,228,233,238,243],{"type":48,"tag":200,"props":206,"children":208},{"style":207},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[209],{"type":53,"value":210},"import",{"type":48,"tag":200,"props":212,"children":214},{"style":213},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[215],{"type":53,"value":216}," {",{"type":48,"tag":200,"props":218,"children":220},{"style":219},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[221],{"type":53,"value":222}," EventClient",{"type":48,"tag":200,"props":224,"children":225},{"style":213},[226],{"type":53,"value":227}," }",{"type":48,"tag":200,"props":229,"children":230},{"style":207},[231],{"type":53,"value":232}," from",{"type":48,"tag":200,"props":234,"children":235},{"style":213},[236],{"type":53,"value":237}," '",{"type":48,"tag":200,"props":239,"children":241},{"style":240},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[242],{"type":53,"value":38},{"type":48,"tag":200,"props":244,"children":245},{"style":213},[246],{"type":53,"value":247},"'\n",{"type":48,"tag":200,"props":249,"children":251},{"class":202,"line":250},2,[252],{"type":48,"tag":200,"props":253,"children":255},{"emptyLinePlaceholder":254},true,[256],{"type":53,"value":257},"\n",{"type":48,"tag":200,"props":259,"children":261},{"class":202,"line":260},3,[262,268,274,279],{"type":48,"tag":200,"props":263,"children":265},{"style":264},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[266],{"type":53,"value":267},"type",{"type":48,"tag":200,"props":269,"children":271},{"style":270},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[272],{"type":53,"value":273}," CounterEvents",{"type":48,"tag":200,"props":275,"children":276},{"style":213},[277],{"type":53,"value":278}," =",{"type":48,"tag":200,"props":280,"children":281},{"style":213},[282],{"type":53,"value":283}," {\n",{"type":48,"tag":200,"props":285,"children":287},{"class":202,"line":286},4,[288],{"type":48,"tag":200,"props":289,"children":291},{"style":290},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[292],{"type":53,"value":293}," \u002F\u002F Observation: app -> panel\n",{"type":48,"tag":200,"props":295,"children":297},{"class":202,"line":296},5,[298,303,308,313,318,322,328,332,337,342,347,351,355],{"type":48,"tag":200,"props":299,"children":300},{"style":213},[301],{"type":53,"value":302}," '",{"type":48,"tag":200,"props":304,"children":305},{"style":240},[306],{"type":53,"value":307},"state-update",{"type":48,"tag":200,"props":309,"children":310},{"style":213},[311],{"type":53,"value":312},"'",{"type":48,"tag":200,"props":314,"children":315},{"style":213},[316],{"type":53,"value":317},":",{"type":48,"tag":200,"props":319,"children":320},{"style":213},[321],{"type":53,"value":216},{"type":48,"tag":200,"props":323,"children":325},{"style":324},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[326],{"type":53,"value":327}," count",{"type":48,"tag":200,"props":329,"children":330},{"style":213},[331],{"type":53,"value":317},{"type":48,"tag":200,"props":333,"children":334},{"style":270},[335],{"type":53,"value":336}," number",{"type":48,"tag":200,"props":338,"children":339},{"style":213},[340],{"type":53,"value":341},";",{"type":48,"tag":200,"props":343,"children":344},{"style":324},[345],{"type":53,"value":346}," updatedAt",{"type":48,"tag":200,"props":348,"children":349},{"style":213},[350],{"type":53,"value":317},{"type":48,"tag":200,"props":352,"children":353},{"style":270},[354],{"type":53,"value":336},{"type":48,"tag":200,"props":356,"children":357},{"style":213},[358],{"type":53,"value":359}," }\n",{"type":48,"tag":200,"props":361,"children":363},{"class":202,"line":362},6,[364],{"type":48,"tag":200,"props":365,"children":366},{"style":213},[367],{"type":53,"value":368},"}\n",{"type":48,"tag":200,"props":370,"children":372},{"class":202,"line":371},7,[373],{"type":48,"tag":200,"props":374,"children":375},{"emptyLinePlaceholder":254},[376],{"type":53,"value":257},{"type":48,"tag":200,"props":378,"children":380},{"class":202,"line":379},8,[381,386,391,396,400,405,410,415],{"type":48,"tag":200,"props":382,"children":383},{"style":264},[384],{"type":53,"value":385},"class",{"type":48,"tag":200,"props":387,"children":388},{"style":270},[389],{"type":53,"value":390}," CounterDevtoolsClient",{"type":48,"tag":200,"props":392,"children":393},{"style":264},[394],{"type":53,"value":395}," extends",{"type":48,"tag":200,"props":397,"children":398},{"style":270},[399],{"type":53,"value":222},{"type":48,"tag":200,"props":401,"children":402},{"style":213},[403],{"type":53,"value":404},"\u003C",{"type":48,"tag":200,"props":406,"children":407},{"style":270},[408],{"type":53,"value":409},"CounterEvents",{"type":48,"tag":200,"props":411,"children":412},{"style":213},[413],{"type":53,"value":414},">",{"type":48,"tag":200,"props":416,"children":417},{"style":213},[418],{"type":53,"value":283},{"type":48,"tag":200,"props":420,"children":422},{"class":202,"line":421},9,[423,428,433],{"type":48,"tag":200,"props":424,"children":425},{"style":264},[426],{"type":53,"value":427}," constructor",{"type":48,"tag":200,"props":429,"children":430},{"style":213},[431],{"type":53,"value":432},"()",{"type":48,"tag":200,"props":434,"children":435},{"style":213},[436],{"type":53,"value":283},{"type":48,"tag":200,"props":438,"children":440},{"class":202,"line":439},10,[441,446,451],{"type":48,"tag":200,"props":442,"children":443},{"style":219},[444],{"type":53,"value":445}," super",{"type":48,"tag":200,"props":447,"children":448},{"style":324},[449],{"type":53,"value":450},"(",{"type":48,"tag":200,"props":452,"children":453},{"style":213},[454],{"type":53,"value":455},"{\n",{"type":48,"tag":200,"props":457,"children":459},{"class":202,"line":458},11,[460,465,469,473,478,482],{"type":48,"tag":200,"props":461,"children":462},{"style":324},[463],{"type":53,"value":464}," pluginId",{"type":48,"tag":200,"props":466,"children":467},{"style":213},[468],{"type":53,"value":317},{"type":48,"tag":200,"props":470,"children":471},{"style":213},[472],{"type":53,"value":237},{"type":48,"tag":200,"props":474,"children":475},{"style":240},[476],{"type":53,"value":477},"counter-inspector",{"type":48,"tag":200,"props":479,"children":480},{"style":213},[481],{"type":53,"value":312},{"type":48,"tag":200,"props":483,"children":484},{"style":213},[485],{"type":53,"value":486},",\n",{"type":48,"tag":200,"props":488,"children":490},{"class":202,"line":489},12,[491,496,500,505,510,515,519,524,529,533,538,542],{"type":48,"tag":200,"props":492,"children":493},{"style":324},[494],{"type":53,"value":495}," enabled",{"type":48,"tag":200,"props":497,"children":498},{"style":213},[499],{"type":53,"value":317},{"type":48,"tag":200,"props":501,"children":502},{"style":219},[503],{"type":53,"value":504}," process",{"type":48,"tag":200,"props":506,"children":507},{"style":213},[508],{"type":53,"value":509},".",{"type":48,"tag":200,"props":511,"children":512},{"style":219},[513],{"type":53,"value":514},"env",{"type":48,"tag":200,"props":516,"children":517},{"style":213},[518],{"type":53,"value":509},{"type":48,"tag":200,"props":520,"children":521},{"style":219},[522],{"type":53,"value":523},"NODE_ENV",{"type":48,"tag":200,"props":525,"children":526},{"style":213},[527],{"type":53,"value":528}," !==",{"type":48,"tag":200,"props":530,"children":531},{"style":213},[532],{"type":53,"value":237},{"type":48,"tag":200,"props":534,"children":535},{"style":240},[536],{"type":53,"value":537},"production",{"type":48,"tag":200,"props":539,"children":540},{"style":213},[541],{"type":53,"value":312},{"type":48,"tag":200,"props":543,"children":544},{"style":213},[545],{"type":53,"value":486},{"type":48,"tag":200,"props":547,"children":549},{"class":202,"line":548},13,[550,555],{"type":48,"tag":200,"props":551,"children":552},{"style":213},[553],{"type":53,"value":554}," }",{"type":48,"tag":200,"props":556,"children":557},{"style":324},[558],{"type":53,"value":559},")\n",{"type":48,"tag":200,"props":561,"children":563},{"class":202,"line":562},14,[564],{"type":48,"tag":200,"props":565,"children":566},{"style":213},[567],{"type":53,"value":568}," }\n",{"type":48,"tag":200,"props":570,"children":572},{"class":202,"line":571},15,[573],{"type":48,"tag":200,"props":574,"children":575},{"style":213},[576],{"type":53,"value":368},{"type":48,"tag":200,"props":578,"children":580},{"class":202,"line":579},16,[581],{"type":48,"tag":200,"props":582,"children":583},{"emptyLinePlaceholder":254},[584],{"type":53,"value":257},{"type":48,"tag":200,"props":586,"children":588},{"class":202,"line":587},17,[589,594,599,604,609,614,619],{"type":48,"tag":200,"props":590,"children":591},{"style":207},[592],{"type":53,"value":593},"export",{"type":48,"tag":200,"props":595,"children":596},{"style":264},[597],{"type":53,"value":598}," const",{"type":48,"tag":200,"props":600,"children":601},{"style":219},[602],{"type":53,"value":603}," counterClient ",{"type":48,"tag":200,"props":605,"children":606},{"style":213},[607],{"type":53,"value":608},"=",{"type":48,"tag":200,"props":610,"children":611},{"style":213},[612],{"type":53,"value":613}," new",{"type":48,"tag":200,"props":615,"children":617},{"style":616},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[618],{"type":53,"value":390},{"type":48,"tag":200,"props":620,"children":621},{"style":219},[622],{"type":53,"value":623},"()\n",{"type":48,"tag":59,"props":625,"children":626},{},[627],{"type":48,"tag":63,"props":628,"children":629},{},[630],{"type":53,"value":631},"App side -- emit on state changes:",{"type":48,"tag":153,"props":633,"children":635},{"className":192,"code":634,"language":194,"meta":161,"style":161},"import { counterClient } from '.\u002Fcounter-devtools-client'\n\nfunction increment() {\n count += 1\n counterClient.emit('state-update', {\n count,\n updatedAt: Date.now(),\n })\n}\n",[636],{"type":48,"tag":71,"props":637,"children":638},{"__ignoreMap":161},[639,676,683,704,723,765,777,811,823],{"type":48,"tag":200,"props":640,"children":641},{"class":202,"line":203},[642,646,650,655,659,663,667,672],{"type":48,"tag":200,"props":643,"children":644},{"style":207},[645],{"type":53,"value":210},{"type":48,"tag":200,"props":647,"children":648},{"style":213},[649],{"type":53,"value":216},{"type":48,"tag":200,"props":651,"children":652},{"style":219},[653],{"type":53,"value":654}," counterClient",{"type":48,"tag":200,"props":656,"children":657},{"style":213},[658],{"type":53,"value":227},{"type":48,"tag":200,"props":660,"children":661},{"style":207},[662],{"type":53,"value":232},{"type":48,"tag":200,"props":664,"children":665},{"style":213},[666],{"type":53,"value":237},{"type":48,"tag":200,"props":668,"children":669},{"style":240},[670],{"type":53,"value":671},".\u002Fcounter-devtools-client",{"type":48,"tag":200,"props":673,"children":674},{"style":213},[675],{"type":53,"value":247},{"type":48,"tag":200,"props":677,"children":678},{"class":202,"line":250},[679],{"type":48,"tag":200,"props":680,"children":681},{"emptyLinePlaceholder":254},[682],{"type":53,"value":257},{"type":48,"tag":200,"props":684,"children":685},{"class":202,"line":260},[686,691,696,700],{"type":48,"tag":200,"props":687,"children":688},{"style":264},[689],{"type":53,"value":690},"function",{"type":48,"tag":200,"props":692,"children":693},{"style":616},[694],{"type":53,"value":695}," increment",{"type":48,"tag":200,"props":697,"children":698},{"style":213},[699],{"type":53,"value":432},{"type":48,"tag":200,"props":701,"children":702},{"style":213},[703],{"type":53,"value":283},{"type":48,"tag":200,"props":705,"children":706},{"class":202,"line":286},[707,712,717],{"type":48,"tag":200,"props":708,"children":709},{"style":219},[710],{"type":53,"value":711}," count",{"type":48,"tag":200,"props":713,"children":714},{"style":213},[715],{"type":53,"value":716}," +=",{"type":48,"tag":200,"props":718,"children":720},{"style":719},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[721],{"type":53,"value":722}," 1\n",{"type":48,"tag":200,"props":724,"children":725},{"class":202,"line":296},[726,731,735,740,744,748,752,756,761],{"type":48,"tag":200,"props":727,"children":728},{"style":219},[729],{"type":53,"value":730}," counterClient",{"type":48,"tag":200,"props":732,"children":733},{"style":213},[734],{"type":53,"value":509},{"type":48,"tag":200,"props":736,"children":737},{"style":616},[738],{"type":53,"value":739},"emit",{"type":48,"tag":200,"props":741,"children":742},{"style":324},[743],{"type":53,"value":450},{"type":48,"tag":200,"props":745,"children":746},{"style":213},[747],{"type":53,"value":312},{"type":48,"tag":200,"props":749,"children":750},{"style":240},[751],{"type":53,"value":307},{"type":48,"tag":200,"props":753,"children":754},{"style":213},[755],{"type":53,"value":312},{"type":48,"tag":200,"props":757,"children":758},{"style":213},[759],{"type":53,"value":760},",",{"type":48,"tag":200,"props":762,"children":763},{"style":213},[764],{"type":53,"value":283},{"type":48,"tag":200,"props":766,"children":767},{"class":202,"line":362},[768,773],{"type":48,"tag":200,"props":769,"children":770},{"style":219},[771],{"type":53,"value":772}," count",{"type":48,"tag":200,"props":774,"children":775},{"style":213},[776],{"type":53,"value":486},{"type":48,"tag":200,"props":778,"children":779},{"class":202,"line":371},[780,785,789,794,798,803,807],{"type":48,"tag":200,"props":781,"children":782},{"style":324},[783],{"type":53,"value":784}," updatedAt",{"type":48,"tag":200,"props":786,"children":787},{"style":213},[788],{"type":53,"value":317},{"type":48,"tag":200,"props":790,"children":791},{"style":219},[792],{"type":53,"value":793}," Date",{"type":48,"tag":200,"props":795,"children":796},{"style":213},[797],{"type":53,"value":509},{"type":48,"tag":200,"props":799,"children":800},{"style":616},[801],{"type":53,"value":802},"now",{"type":48,"tag":200,"props":804,"children":805},{"style":324},[806],{"type":53,"value":432},{"type":48,"tag":200,"props":808,"children":809},{"style":213},[810],{"type":53,"value":486},{"type":48,"tag":200,"props":812,"children":813},{"class":202,"line":379},[814,819],{"type":48,"tag":200,"props":815,"children":816},{"style":213},[817],{"type":53,"value":818}," }",{"type":48,"tag":200,"props":820,"children":821},{"style":324},[822],{"type":53,"value":559},{"type":48,"tag":200,"props":824,"children":825},{"class":202,"line":421},[826],{"type":48,"tag":200,"props":827,"children":828},{"style":213},[829],{"type":53,"value":368},{"type":48,"tag":59,"props":831,"children":832},{},[833],{"type":48,"tag":63,"props":834,"children":835},{},[836],{"type":53,"value":837},"Panel side -- listen and display:",{"type":48,"tag":153,"props":839,"children":841},{"className":192,"code":840,"language":194,"meta":161,"style":161},"import { counterClient } from '.\u002Fcounter-devtools-client'\n\nconst cleanup = counterClient.on('state-update', (event) => {\n \u002F\u002F event.payload.count\n \u002F\u002F event.payload.updatedAt\n renderPanel(event.payload)\n})\n",[842],{"type":48,"tag":71,"props":843,"children":844},{"__ignoreMap":161},[845,880,887,962,970,978,1007],{"type":48,"tag":200,"props":846,"children":847},{"class":202,"line":203},[848,852,856,860,864,868,872,876],{"type":48,"tag":200,"props":849,"children":850},{"style":207},[851],{"type":53,"value":210},{"type":48,"tag":200,"props":853,"children":854},{"style":213},[855],{"type":53,"value":216},{"type":48,"tag":200,"props":857,"children":858},{"style":219},[859],{"type":53,"value":654},{"type":48,"tag":200,"props":861,"children":862},{"style":213},[863],{"type":53,"value":227},{"type":48,"tag":200,"props":865,"children":866},{"style":207},[867],{"type":53,"value":232},{"type":48,"tag":200,"props":869,"children":870},{"style":213},[871],{"type":53,"value":237},{"type":48,"tag":200,"props":873,"children":874},{"style":240},[875],{"type":53,"value":671},{"type":48,"tag":200,"props":877,"children":878},{"style":213},[879],{"type":53,"value":247},{"type":48,"tag":200,"props":881,"children":882},{"class":202,"line":250},[883],{"type":48,"tag":200,"props":884,"children":885},{"emptyLinePlaceholder":254},[886],{"type":53,"value":257},{"type":48,"tag":200,"props":888,"children":889},{"class":202,"line":260},[890,895,900,904,908,912,917,921,925,929,933,937,942,948,953,958],{"type":48,"tag":200,"props":891,"children":892},{"style":264},[893],{"type":53,"value":894},"const",{"type":48,"tag":200,"props":896,"children":897},{"style":219},[898],{"type":53,"value":899}," cleanup ",{"type":48,"tag":200,"props":901,"children":902},{"style":213},[903],{"type":53,"value":608},{"type":48,"tag":200,"props":905,"children":906},{"style":219},[907],{"type":53,"value":654},{"type":48,"tag":200,"props":909,"children":910},{"style":213},[911],{"type":53,"value":509},{"type":48,"tag":200,"props":913,"children":914},{"style":616},[915],{"type":53,"value":916},"on",{"type":48,"tag":200,"props":918,"children":919},{"style":219},[920],{"type":53,"value":450},{"type":48,"tag":200,"props":922,"children":923},{"style":213},[924],{"type":53,"value":312},{"type":48,"tag":200,"props":926,"children":927},{"style":240},[928],{"type":53,"value":307},{"type":48,"tag":200,"props":930,"children":931},{"style":213},[932],{"type":53,"value":312},{"type":48,"tag":200,"props":934,"children":935},{"style":213},[936],{"type":53,"value":760},{"type":48,"tag":200,"props":938,"children":939},{"style":213},[940],{"type":53,"value":941}," (",{"type":48,"tag":200,"props":943,"children":945},{"style":944},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[946],{"type":53,"value":947},"event",{"type":48,"tag":200,"props":949,"children":950},{"style":213},[951],{"type":53,"value":952},")",{"type":48,"tag":200,"props":954,"children":955},{"style":264},[956],{"type":53,"value":957}," =>",{"type":48,"tag":200,"props":959,"children":960},{"style":213},[961],{"type":53,"value":283},{"type":48,"tag":200,"props":963,"children":964},{"class":202,"line":286},[965],{"type":48,"tag":200,"props":966,"children":967},{"style":290},[968],{"type":53,"value":969}," \u002F\u002F event.payload.count\n",{"type":48,"tag":200,"props":971,"children":972},{"class":202,"line":296},[973],{"type":48,"tag":200,"props":974,"children":975},{"style":290},[976],{"type":53,"value":977}," \u002F\u002F event.payload.updatedAt\n",{"type":48,"tag":200,"props":979,"children":980},{"class":202,"line":362},[981,986,990,994,998,1003],{"type":48,"tag":200,"props":982,"children":983},{"style":616},[984],{"type":53,"value":985}," renderPanel",{"type":48,"tag":200,"props":987,"children":988},{"style":324},[989],{"type":53,"value":450},{"type":48,"tag":200,"props":991,"children":992},{"style":219},[993],{"type":53,"value":947},{"type":48,"tag":200,"props":995,"children":996},{"style":213},[997],{"type":53,"value":509},{"type":48,"tag":200,"props":999,"children":1000},{"style":219},[1001],{"type":53,"value":1002},"payload",{"type":48,"tag":200,"props":1004,"children":1005},{"style":324},[1006],{"type":53,"value":559},{"type":48,"tag":200,"props":1008,"children":1009},{"class":202,"line":371},[1010,1015],{"type":48,"tag":200,"props":1011,"children":1012},{"style":213},[1013],{"type":53,"value":1014},"}",{"type":48,"tag":200,"props":1016,"children":1017},{"style":219},[1018],{"type":53,"value":559},{"type":48,"tag":171,"props":1020,"children":1022},{"id":1021},"_2-devtools-to-app-commands",[1023],{"type":53,"value":1024},"2. Devtools-to-App Commands",{"type":48,"tag":59,"props":1026,"children":1027},{},[1028],{"type":53,"value":1029},"The panel sends commands. The app listens and mutates state.",{"type":48,"tag":59,"props":1031,"children":1032},{},[1033],{"type":48,"tag":63,"props":1034,"children":1035},{},[1036],{"type":53,"value":1037},"Extend the event map with command events:",{"type":48,"tag":153,"props":1039,"children":1041},{"className":192,"code":1040,"language":194,"meta":161,"style":161},"type CounterEvents = {\n \u002F\u002F Observation: app -> panel\n 'state-update': { count: number; updatedAt: number }\n \u002F\u002F Commands: panel -> app\n reset: void\n 'set-count': { count: number }\n}\n",[1042],{"type":48,"tag":71,"props":1043,"children":1044},{"__ignoreMap":161},[1045,1064,1071,1126,1134,1151,1191],{"type":48,"tag":200,"props":1046,"children":1047},{"class":202,"line":203},[1048,1052,1056,1060],{"type":48,"tag":200,"props":1049,"children":1050},{"style":264},[1051],{"type":53,"value":267},{"type":48,"tag":200,"props":1053,"children":1054},{"style":270},[1055],{"type":53,"value":273},{"type":48,"tag":200,"props":1057,"children":1058},{"style":213},[1059],{"type":53,"value":278},{"type":48,"tag":200,"props":1061,"children":1062},{"style":213},[1063],{"type":53,"value":283},{"type":48,"tag":200,"props":1065,"children":1066},{"class":202,"line":250},[1067],{"type":48,"tag":200,"props":1068,"children":1069},{"style":290},[1070],{"type":53,"value":293},{"type":48,"tag":200,"props":1072,"children":1073},{"class":202,"line":260},[1074,1078,1082,1086,1090,1094,1098,1102,1106,1110,1114,1118,1122],{"type":48,"tag":200,"props":1075,"children":1076},{"style":213},[1077],{"type":53,"value":302},{"type":48,"tag":200,"props":1079,"children":1080},{"style":240},[1081],{"type":53,"value":307},{"type":48,"tag":200,"props":1083,"children":1084},{"style":213},[1085],{"type":53,"value":312},{"type":48,"tag":200,"props":1087,"children":1088},{"style":213},[1089],{"type":53,"value":317},{"type":48,"tag":200,"props":1091,"children":1092},{"style":213},[1093],{"type":53,"value":216},{"type":48,"tag":200,"props":1095,"children":1096},{"style":324},[1097],{"type":53,"value":327},{"type":48,"tag":200,"props":1099,"children":1100},{"style":213},[1101],{"type":53,"value":317},{"type":48,"tag":200,"props":1103,"children":1104},{"style":270},[1105],{"type":53,"value":336},{"type":48,"tag":200,"props":1107,"children":1108},{"style":213},[1109],{"type":53,"value":341},{"type":48,"tag":200,"props":1111,"children":1112},{"style":324},[1113],{"type":53,"value":346},{"type":48,"tag":200,"props":1115,"children":1116},{"style":213},[1117],{"type":53,"value":317},{"type":48,"tag":200,"props":1119,"children":1120},{"style":270},[1121],{"type":53,"value":336},{"type":48,"tag":200,"props":1123,"children":1124},{"style":213},[1125],{"type":53,"value":359},{"type":48,"tag":200,"props":1127,"children":1128},{"class":202,"line":286},[1129],{"type":48,"tag":200,"props":1130,"children":1131},{"style":290},[1132],{"type":53,"value":1133}," \u002F\u002F Commands: panel -> app\n",{"type":48,"tag":200,"props":1135,"children":1136},{"class":202,"line":296},[1137,1142,1146],{"type":48,"tag":200,"props":1138,"children":1139},{"style":324},[1140],{"type":53,"value":1141}," reset",{"type":48,"tag":200,"props":1143,"children":1144},{"style":213},[1145],{"type":53,"value":317},{"type":48,"tag":200,"props":1147,"children":1148},{"style":270},[1149],{"type":53,"value":1150}," void\n",{"type":48,"tag":200,"props":1152,"children":1153},{"class":202,"line":362},[1154,1158,1163,1167,1171,1175,1179,1183,1187],{"type":48,"tag":200,"props":1155,"children":1156},{"style":213},[1157],{"type":53,"value":302},{"type":48,"tag":200,"props":1159,"children":1160},{"style":240},[1161],{"type":53,"value":1162},"set-count",{"type":48,"tag":200,"props":1164,"children":1165},{"style":213},[1166],{"type":53,"value":312},{"type":48,"tag":200,"props":1168,"children":1169},{"style":213},[1170],{"type":53,"value":317},{"type":48,"tag":200,"props":1172,"children":1173},{"style":213},[1174],{"type":53,"value":216},{"type":48,"tag":200,"props":1176,"children":1177},{"style":324},[1178],{"type":53,"value":327},{"type":48,"tag":200,"props":1180,"children":1181},{"style":213},[1182],{"type":53,"value":317},{"type":48,"tag":200,"props":1184,"children":1185},{"style":270},[1186],{"type":53,"value":336},{"type":48,"tag":200,"props":1188,"children":1189},{"style":213},[1190],{"type":53,"value":359},{"type":48,"tag":200,"props":1192,"children":1193},{"class":202,"line":371},[1194],{"type":48,"tag":200,"props":1195,"children":1196},{"style":213},[1197],{"type":53,"value":368},{"type":48,"tag":59,"props":1199,"children":1200},{},[1201],{"type":48,"tag":63,"props":1202,"children":1203},{},[1204],{"type":53,"value":1205},"Panel side -- emit commands on user interaction:",{"type":48,"tag":153,"props":1207,"children":1209},{"className":192,"code":1208,"language":194,"meta":161,"style":161},"import { counterClient } from '.\u002Fcounter-devtools-client'\n\nfunction handleResetClick() {\n counterClient.emit('reset', undefined)\n}\n\nfunction handleSetCount(newCount: number) {\n counterClient.emit('set-count', { count: newCount })\n}\n",[1210],{"type":48,"tag":71,"props":1211,"children":1212},{"__ignoreMap":161},[1213,1248,1255,1275,1320,1327,1334,1371,1431],{"type":48,"tag":200,"props":1214,"children":1215},{"class":202,"line":203},[1216,1220,1224,1228,1232,1236,1240,1244],{"type":48,"tag":200,"props":1217,"children":1218},{"style":207},[1219],{"type":53,"value":210},{"type":48,"tag":200,"props":1221,"children":1222},{"style":213},[1223],{"type":53,"value":216},{"type":48,"tag":200,"props":1225,"children":1226},{"style":219},[1227],{"type":53,"value":654},{"type":48,"tag":200,"props":1229,"children":1230},{"style":213},[1231],{"type":53,"value":227},{"type":48,"tag":200,"props":1233,"children":1234},{"style":207},[1235],{"type":53,"value":232},{"type":48,"tag":200,"props":1237,"children":1238},{"style":213},[1239],{"type":53,"value":237},{"type":48,"tag":200,"props":1241,"children":1242},{"style":240},[1243],{"type":53,"value":671},{"type":48,"tag":200,"props":1245,"children":1246},{"style":213},[1247],{"type":53,"value":247},{"type":48,"tag":200,"props":1249,"children":1250},{"class":202,"line":250},[1251],{"type":48,"tag":200,"props":1252,"children":1253},{"emptyLinePlaceholder":254},[1254],{"type":53,"value":257},{"type":48,"tag":200,"props":1256,"children":1257},{"class":202,"line":260},[1258,1262,1267,1271],{"type":48,"tag":200,"props":1259,"children":1260},{"style":264},[1261],{"type":53,"value":690},{"type":48,"tag":200,"props":1263,"children":1264},{"style":616},[1265],{"type":53,"value":1266}," handleResetClick",{"type":48,"tag":200,"props":1268,"children":1269},{"style":213},[1270],{"type":53,"value":432},{"type":48,"tag":200,"props":1272,"children":1273},{"style":213},[1274],{"type":53,"value":283},{"type":48,"tag":200,"props":1276,"children":1277},{"class":202,"line":286},[1278,1282,1286,1290,1294,1298,1303,1307,1311,1316],{"type":48,"tag":200,"props":1279,"children":1280},{"style":219},[1281],{"type":53,"value":730},{"type":48,"tag":200,"props":1283,"children":1284},{"style":213},[1285],{"type":53,"value":509},{"type":48,"tag":200,"props":1287,"children":1288},{"style":616},[1289],{"type":53,"value":739},{"type":48,"tag":200,"props":1291,"children":1292},{"style":324},[1293],{"type":53,"value":450},{"type":48,"tag":200,"props":1295,"children":1296},{"style":213},[1297],{"type":53,"value":312},{"type":48,"tag":200,"props":1299,"children":1300},{"style":240},[1301],{"type":53,"value":1302},"reset",{"type":48,"tag":200,"props":1304,"children":1305},{"style":213},[1306],{"type":53,"value":312},{"type":48,"tag":200,"props":1308,"children":1309},{"style":213},[1310],{"type":53,"value":760},{"type":48,"tag":200,"props":1312,"children":1313},{"style":213},[1314],{"type":53,"value":1315}," undefined",{"type":48,"tag":200,"props":1317,"children":1318},{"style":324},[1319],{"type":53,"value":559},{"type":48,"tag":200,"props":1321,"children":1322},{"class":202,"line":296},[1323],{"type":48,"tag":200,"props":1324,"children":1325},{"style":213},[1326],{"type":53,"value":368},{"type":48,"tag":200,"props":1328,"children":1329},{"class":202,"line":362},[1330],{"type":48,"tag":200,"props":1331,"children":1332},{"emptyLinePlaceholder":254},[1333],{"type":53,"value":257},{"type":48,"tag":200,"props":1335,"children":1336},{"class":202,"line":371},[1337,1341,1346,1350,1355,1359,1363,1367],{"type":48,"tag":200,"props":1338,"children":1339},{"style":264},[1340],{"type":53,"value":690},{"type":48,"tag":200,"props":1342,"children":1343},{"style":616},[1344],{"type":53,"value":1345}," handleSetCount",{"type":48,"tag":200,"props":1347,"children":1348},{"style":213},[1349],{"type":53,"value":450},{"type":48,"tag":200,"props":1351,"children":1352},{"style":944},[1353],{"type":53,"value":1354},"newCount",{"type":48,"tag":200,"props":1356,"children":1357},{"style":213},[1358],{"type":53,"value":317},{"type":48,"tag":200,"props":1360,"children":1361},{"style":270},[1362],{"type":53,"value":336},{"type":48,"tag":200,"props":1364,"children":1365},{"style":213},[1366],{"type":53,"value":952},{"type":48,"tag":200,"props":1368,"children":1369},{"style":213},[1370],{"type":53,"value":283},{"type":48,"tag":200,"props":1372,"children":1373},{"class":202,"line":379},[1374,1378,1382,1386,1390,1394,1398,1402,1406,1410,1414,1418,1423,1427],{"type":48,"tag":200,"props":1375,"children":1376},{"style":219},[1377],{"type":53,"value":730},{"type":48,"tag":200,"props":1379,"children":1380},{"style":213},[1381],{"type":53,"value":509},{"type":48,"tag":200,"props":1383,"children":1384},{"style":616},[1385],{"type":53,"value":739},{"type":48,"tag":200,"props":1387,"children":1388},{"style":324},[1389],{"type":53,"value":450},{"type":48,"tag":200,"props":1391,"children":1392},{"style":213},[1393],{"type":53,"value":312},{"type":48,"tag":200,"props":1395,"children":1396},{"style":240},[1397],{"type":53,"value":1162},{"type":48,"tag":200,"props":1399,"children":1400},{"style":213},[1401],{"type":53,"value":312},{"type":48,"tag":200,"props":1403,"children":1404},{"style":213},[1405],{"type":53,"value":760},{"type":48,"tag":200,"props":1407,"children":1408},{"style":213},[1409],{"type":53,"value":216},{"type":48,"tag":200,"props":1411,"children":1412},{"style":324},[1413],{"type":53,"value":327},{"type":48,"tag":200,"props":1415,"children":1416},{"style":213},[1417],{"type":53,"value":317},{"type":48,"tag":200,"props":1419,"children":1420},{"style":219},[1421],{"type":53,"value":1422}," newCount",{"type":48,"tag":200,"props":1424,"children":1425},{"style":213},[1426],{"type":53,"value":227},{"type":48,"tag":200,"props":1428,"children":1429},{"style":324},[1430],{"type":53,"value":559},{"type":48,"tag":200,"props":1432,"children":1433},{"class":202,"line":421},[1434],{"type":48,"tag":200,"props":1435,"children":1436},{"style":213},[1437],{"type":53,"value":368},{"type":48,"tag":59,"props":1439,"children":1440},{},[1441],{"type":48,"tag":63,"props":1442,"children":1443},{},[1444],{"type":53,"value":1445},"App side -- listen for commands and react:",{"type":48,"tag":153,"props":1447,"children":1449},{"className":192,"code":1448,"language":194,"meta":161,"style":161},"import { counterClient } from '.\u002Fcounter-devtools-client'\n\ncounterClient.on('reset', () => {\n count = 0\n \u002F\u002F Re-emit observation so panel updates\n counterClient.emit('state-update', {\n count,\n updatedAt: Date.now(),\n })\n})\n\ncounterClient.on('set-count', (event) => {\n count = event.payload.count\n counterClient.emit('state-update', {\n count,\n updatedAt: Date.now(),\n })\n})\n",[1450],{"type":48,"tag":71,"props":1451,"children":1452},{"__ignoreMap":161},[1453,1488,1495,1544,1560,1568,1607,1618,1649,1660,1671,1678,1733,1766,1805,1816,1847,1858],{"type":48,"tag":200,"props":1454,"children":1455},{"class":202,"line":203},[1456,1460,1464,1468,1472,1476,1480,1484],{"type":48,"tag":200,"props":1457,"children":1458},{"style":207},[1459],{"type":53,"value":210},{"type":48,"tag":200,"props":1461,"children":1462},{"style":213},[1463],{"type":53,"value":216},{"type":48,"tag":200,"props":1465,"children":1466},{"style":219},[1467],{"type":53,"value":654},{"type":48,"tag":200,"props":1469,"children":1470},{"style":213},[1471],{"type":53,"value":227},{"type":48,"tag":200,"props":1473,"children":1474},{"style":207},[1475],{"type":53,"value":232},{"type":48,"tag":200,"props":1477,"children":1478},{"style":213},[1479],{"type":53,"value":237},{"type":48,"tag":200,"props":1481,"children":1482},{"style":240},[1483],{"type":53,"value":671},{"type":48,"tag":200,"props":1485,"children":1486},{"style":213},[1487],{"type":53,"value":247},{"type":48,"tag":200,"props":1489,"children":1490},{"class":202,"line":250},[1491],{"type":48,"tag":200,"props":1492,"children":1493},{"emptyLinePlaceholder":254},[1494],{"type":53,"value":257},{"type":48,"tag":200,"props":1496,"children":1497},{"class":202,"line":260},[1498,1503,1507,1511,1515,1519,1523,1527,1531,1536,1540],{"type":48,"tag":200,"props":1499,"children":1500},{"style":219},[1501],{"type":53,"value":1502},"counterClient",{"type":48,"tag":200,"props":1504,"children":1505},{"style":213},[1506],{"type":53,"value":509},{"type":48,"tag":200,"props":1508,"children":1509},{"style":616},[1510],{"type":53,"value":916},{"type":48,"tag":200,"props":1512,"children":1513},{"style":219},[1514],{"type":53,"value":450},{"type":48,"tag":200,"props":1516,"children":1517},{"style":213},[1518],{"type":53,"value":312},{"type":48,"tag":200,"props":1520,"children":1521},{"style":240},[1522],{"type":53,"value":1302},{"type":48,"tag":200,"props":1524,"children":1525},{"style":213},[1526],{"type":53,"value":312},{"type":48,"tag":200,"props":1528,"children":1529},{"style":213},[1530],{"type":53,"value":760},{"type":48,"tag":200,"props":1532,"children":1533},{"style":213},[1534],{"type":53,"value":1535}," ()",{"type":48,"tag":200,"props":1537,"children":1538},{"style":264},[1539],{"type":53,"value":957},{"type":48,"tag":200,"props":1541,"children":1542},{"style":213},[1543],{"type":53,"value":283},{"type":48,"tag":200,"props":1545,"children":1546},{"class":202,"line":286},[1547,1551,1555],{"type":48,"tag":200,"props":1548,"children":1549},{"style":219},[1550],{"type":53,"value":711},{"type":48,"tag":200,"props":1552,"children":1553},{"style":213},[1554],{"type":53,"value":278},{"type":48,"tag":200,"props":1556,"children":1557},{"style":719},[1558],{"type":53,"value":1559}," 0\n",{"type":48,"tag":200,"props":1561,"children":1562},{"class":202,"line":296},[1563],{"type":48,"tag":200,"props":1564,"children":1565},{"style":290},[1566],{"type":53,"value":1567}," \u002F\u002F Re-emit observation so panel updates\n",{"type":48,"tag":200,"props":1569,"children":1570},{"class":202,"line":362},[1571,1575,1579,1583,1587,1591,1595,1599,1603],{"type":48,"tag":200,"props":1572,"children":1573},{"style":219},[1574],{"type":53,"value":730},{"type":48,"tag":200,"props":1576,"children":1577},{"style":213},[1578],{"type":53,"value":509},{"type":48,"tag":200,"props":1580,"children":1581},{"style":616},[1582],{"type":53,"value":739},{"type":48,"tag":200,"props":1584,"children":1585},{"style":324},[1586],{"type":53,"value":450},{"type":48,"tag":200,"props":1588,"children":1589},{"style":213},[1590],{"type":53,"value":312},{"type":48,"tag":200,"props":1592,"children":1593},{"style":240},[1594],{"type":53,"value":307},{"type":48,"tag":200,"props":1596,"children":1597},{"style":213},[1598],{"type":53,"value":312},{"type":48,"tag":200,"props":1600,"children":1601},{"style":213},[1602],{"type":53,"value":760},{"type":48,"tag":200,"props":1604,"children":1605},{"style":213},[1606],{"type":53,"value":283},{"type":48,"tag":200,"props":1608,"children":1609},{"class":202,"line":371},[1610,1614],{"type":48,"tag":200,"props":1611,"children":1612},{"style":219},[1613],{"type":53,"value":772},{"type":48,"tag":200,"props":1615,"children":1616},{"style":213},[1617],{"type":53,"value":486},{"type":48,"tag":200,"props":1619,"children":1620},{"class":202,"line":379},[1621,1625,1629,1633,1637,1641,1645],{"type":48,"tag":200,"props":1622,"children":1623},{"style":324},[1624],{"type":53,"value":784},{"type":48,"tag":200,"props":1626,"children":1627},{"style":213},[1628],{"type":53,"value":317},{"type":48,"tag":200,"props":1630,"children":1631},{"style":219},[1632],{"type":53,"value":793},{"type":48,"tag":200,"props":1634,"children":1635},{"style":213},[1636],{"type":53,"value":509},{"type":48,"tag":200,"props":1638,"children":1639},{"style":616},[1640],{"type":53,"value":802},{"type":48,"tag":200,"props":1642,"children":1643},{"style":324},[1644],{"type":53,"value":432},{"type":48,"tag":200,"props":1646,"children":1647},{"style":213},[1648],{"type":53,"value":486},{"type":48,"tag":200,"props":1650,"children":1651},{"class":202,"line":421},[1652,1656],{"type":48,"tag":200,"props":1653,"children":1654},{"style":213},[1655],{"type":53,"value":818},{"type":48,"tag":200,"props":1657,"children":1658},{"style":324},[1659],{"type":53,"value":559},{"type":48,"tag":200,"props":1661,"children":1662},{"class":202,"line":439},[1663,1667],{"type":48,"tag":200,"props":1664,"children":1665},{"style":213},[1666],{"type":53,"value":1014},{"type":48,"tag":200,"props":1668,"children":1669},{"style":219},[1670],{"type":53,"value":559},{"type":48,"tag":200,"props":1672,"children":1673},{"class":202,"line":458},[1674],{"type":48,"tag":200,"props":1675,"children":1676},{"emptyLinePlaceholder":254},[1677],{"type":53,"value":257},{"type":48,"tag":200,"props":1679,"children":1680},{"class":202,"line":489},[1681,1685,1689,1693,1697,1701,1705,1709,1713,1717,1721,1725,1729],{"type":48,"tag":200,"props":1682,"children":1683},{"style":219},[1684],{"type":53,"value":1502},{"type":48,"tag":200,"props":1686,"children":1687},{"style":213},[1688],{"type":53,"value":509},{"type":48,"tag":200,"props":1690,"children":1691},{"style":616},[1692],{"type":53,"value":916},{"type":48,"tag":200,"props":1694,"children":1695},{"style":219},[1696],{"type":53,"value":450},{"type":48,"tag":200,"props":1698,"children":1699},{"style":213},[1700],{"type":53,"value":312},{"type":48,"tag":200,"props":1702,"children":1703},{"style":240},[1704],{"type":53,"value":1162},{"type":48,"tag":200,"props":1706,"children":1707},{"style":213},[1708],{"type":53,"value":312},{"type":48,"tag":200,"props":1710,"children":1711},{"style":213},[1712],{"type":53,"value":760},{"type":48,"tag":200,"props":1714,"children":1715},{"style":213},[1716],{"type":53,"value":941},{"type":48,"tag":200,"props":1718,"children":1719},{"style":944},[1720],{"type":53,"value":947},{"type":48,"tag":200,"props":1722,"children":1723},{"style":213},[1724],{"type":53,"value":952},{"type":48,"tag":200,"props":1726,"children":1727},{"style":264},[1728],{"type":53,"value":957},{"type":48,"tag":200,"props":1730,"children":1731},{"style":213},[1732],{"type":53,"value":283},{"type":48,"tag":200,"props":1734,"children":1735},{"class":202,"line":548},[1736,1740,1744,1749,1753,1757,1761],{"type":48,"tag":200,"props":1737,"children":1738},{"style":219},[1739],{"type":53,"value":711},{"type":48,"tag":200,"props":1741,"children":1742},{"style":213},[1743],{"type":53,"value":278},{"type":48,"tag":200,"props":1745,"children":1746},{"style":219},[1747],{"type":53,"value":1748}," event",{"type":48,"tag":200,"props":1750,"children":1751},{"style":213},[1752],{"type":53,"value":509},{"type":48,"tag":200,"props":1754,"children":1755},{"style":219},[1756],{"type":53,"value":1002},{"type":48,"tag":200,"props":1758,"children":1759},{"style":213},[1760],{"type":53,"value":509},{"type":48,"tag":200,"props":1762,"children":1763},{"style":219},[1764],{"type":53,"value":1765},"count\n",{"type":48,"tag":200,"props":1767,"children":1768},{"class":202,"line":562},[1769,1773,1777,1781,1785,1789,1793,1797,1801],{"type":48,"tag":200,"props":1770,"children":1771},{"style":219},[1772],{"type":53,"value":730},{"type":48,"tag":200,"props":1774,"children":1775},{"style":213},[1776],{"type":53,"value":509},{"type":48,"tag":200,"props":1778,"children":1779},{"style":616},[1780],{"type":53,"value":739},{"type":48,"tag":200,"props":1782,"children":1783},{"style":324},[1784],{"type":53,"value":450},{"type":48,"tag":200,"props":1786,"children":1787},{"style":213},[1788],{"type":53,"value":312},{"type":48,"tag":200,"props":1790,"children":1791},{"style":240},[1792],{"type":53,"value":307},{"type":48,"tag":200,"props":1794,"children":1795},{"style":213},[1796],{"type":53,"value":312},{"type":48,"tag":200,"props":1798,"children":1799},{"style":213},[1800],{"type":53,"value":760},{"type":48,"tag":200,"props":1802,"children":1803},{"style":213},[1804],{"type":53,"value":283},{"type":48,"tag":200,"props":1806,"children":1807},{"class":202,"line":571},[1808,1812],{"type":48,"tag":200,"props":1809,"children":1810},{"style":219},[1811],{"type":53,"value":772},{"type":48,"tag":200,"props":1813,"children":1814},{"style":213},[1815],{"type":53,"value":486},{"type":48,"tag":200,"props":1817,"children":1818},{"class":202,"line":579},[1819,1823,1827,1831,1835,1839,1843],{"type":48,"tag":200,"props":1820,"children":1821},{"style":324},[1822],{"type":53,"value":784},{"type":48,"tag":200,"props":1824,"children":1825},{"style":213},[1826],{"type":53,"value":317},{"type":48,"tag":200,"props":1828,"children":1829},{"style":219},[1830],{"type":53,"value":793},{"type":48,"tag":200,"props":1832,"children":1833},{"style":213},[1834],{"type":53,"value":509},{"type":48,"tag":200,"props":1836,"children":1837},{"style":616},[1838],{"type":53,"value":802},{"type":48,"tag":200,"props":1840,"children":1841},{"style":324},[1842],{"type":53,"value":432},{"type":48,"tag":200,"props":1844,"children":1845},{"style":213},[1846],{"type":53,"value":486},{"type":48,"tag":200,"props":1848,"children":1849},{"class":202,"line":587},[1850,1854],{"type":48,"tag":200,"props":1851,"children":1852},{"style":213},[1853],{"type":53,"value":818},{"type":48,"tag":200,"props":1855,"children":1856},{"style":324},[1857],{"type":53,"value":559},{"type":48,"tag":200,"props":1859,"children":1861},{"class":202,"line":1860},18,[1862,1866],{"type":48,"tag":200,"props":1863,"children":1864},{"style":213},[1865],{"type":53,"value":1014},{"type":48,"tag":200,"props":1867,"children":1868},{"style":219},[1869],{"type":53,"value":559},{"type":48,"tag":59,"props":1871,"children":1872},{},[1873],{"type":53,"value":1874},"The command handler re-emits an observation event after mutating state. This closes the loop so the panel sees the result of its own command.",{"type":48,"tag":171,"props":1876,"children":1878},{"id":1877},"_3-time-travel-debugging",[1879],{"type":53,"value":1880},"3. Time-Travel Debugging",{"type":48,"tag":59,"props":1882,"children":1883},{},[1884],{"type":53,"value":1885},"Combine observation (snapshots) with commands (revert) to build a time-travel slider.",{"type":48,"tag":59,"props":1887,"children":1888},{},[1889],{"type":48,"tag":63,"props":1890,"children":1891},{},[1892],{"type":53,"value":1893},"Event map:",{"type":48,"tag":153,"props":1895,"children":1897},{"className":192,"code":1896,"language":194,"meta":161,"style":161},"type TimeTravelEvents = {\n \u002F\u002F Observation: app -> panel\n snapshot: { state: unknown; timestamp: number; label: string }\n \u002F\u002F Command: panel -> app\n revert: { state: unknown }\n}\n\nclass TimeTravelClient extends EventClient\u003CTimeTravelEvents> {\n constructor() {\n super({\n pluginId: 'time-travel',\n enabled: process.env.NODE_ENV !== 'production',\n })\n }\n}\n\nexport const timeTravelClient = new TimeTravelClient()\n",[1898],{"type":48,"tag":71,"props":1899,"children":1900},{"__ignoreMap":161},[1901,1921,1928,1997,2005,2037,2044,2051,2088,2103,2118,2146,2197,2208,2215,2222,2229],{"type":48,"tag":200,"props":1902,"children":1903},{"class":202,"line":203},[1904,1908,1913,1917],{"type":48,"tag":200,"props":1905,"children":1906},{"style":264},[1907],{"type":53,"value":267},{"type":48,"tag":200,"props":1909,"children":1910},{"style":270},[1911],{"type":53,"value":1912}," TimeTravelEvents",{"type":48,"tag":200,"props":1914,"children":1915},{"style":213},[1916],{"type":53,"value":278},{"type":48,"tag":200,"props":1918,"children":1919},{"style":213},[1920],{"type":53,"value":283},{"type":48,"tag":200,"props":1922,"children":1923},{"class":202,"line":250},[1924],{"type":48,"tag":200,"props":1925,"children":1926},{"style":290},[1927],{"type":53,"value":293},{"type":48,"tag":200,"props":1929,"children":1930},{"class":202,"line":260},[1931,1936,1940,1944,1949,1953,1958,1962,1967,1971,1975,1979,1984,1988,1993],{"type":48,"tag":200,"props":1932,"children":1933},{"style":324},[1934],{"type":53,"value":1935}," snapshot",{"type":48,"tag":200,"props":1937,"children":1938},{"style":213},[1939],{"type":53,"value":317},{"type":48,"tag":200,"props":1941,"children":1942},{"style":213},[1943],{"type":53,"value":216},{"type":48,"tag":200,"props":1945,"children":1946},{"style":324},[1947],{"type":53,"value":1948}," state",{"type":48,"tag":200,"props":1950,"children":1951},{"style":213},[1952],{"type":53,"value":317},{"type":48,"tag":200,"props":1954,"children":1955},{"style":270},[1956],{"type":53,"value":1957}," unknown",{"type":48,"tag":200,"props":1959,"children":1960},{"style":213},[1961],{"type":53,"value":341},{"type":48,"tag":200,"props":1963,"children":1964},{"style":324},[1965],{"type":53,"value":1966}," timestamp",{"type":48,"tag":200,"props":1968,"children":1969},{"style":213},[1970],{"type":53,"value":317},{"type":48,"tag":200,"props":1972,"children":1973},{"style":270},[1974],{"type":53,"value":336},{"type":48,"tag":200,"props":1976,"children":1977},{"style":213},[1978],{"type":53,"value":341},{"type":48,"tag":200,"props":1980,"children":1981},{"style":324},[1982],{"type":53,"value":1983}," label",{"type":48,"tag":200,"props":1985,"children":1986},{"style":213},[1987],{"type":53,"value":317},{"type":48,"tag":200,"props":1989,"children":1990},{"style":270},[1991],{"type":53,"value":1992}," string",{"type":48,"tag":200,"props":1994,"children":1995},{"style":213},[1996],{"type":53,"value":359},{"type":48,"tag":200,"props":1998,"children":1999},{"class":202,"line":286},[2000],{"type":48,"tag":200,"props":2001,"children":2002},{"style":290},[2003],{"type":53,"value":2004}," \u002F\u002F Command: panel -> app\n",{"type":48,"tag":200,"props":2006,"children":2007},{"class":202,"line":296},[2008,2013,2017,2021,2025,2029,2033],{"type":48,"tag":200,"props":2009,"children":2010},{"style":324},[2011],{"type":53,"value":2012}," revert",{"type":48,"tag":200,"props":2014,"children":2015},{"style":213},[2016],{"type":53,"value":317},{"type":48,"tag":200,"props":2018,"children":2019},{"style":213},[2020],{"type":53,"value":216},{"type":48,"tag":200,"props":2022,"children":2023},{"style":324},[2024],{"type":53,"value":1948},{"type":48,"tag":200,"props":2026,"children":2027},{"style":213},[2028],{"type":53,"value":317},{"type":48,"tag":200,"props":2030,"children":2031},{"style":270},[2032],{"type":53,"value":1957},{"type":48,"tag":200,"props":2034,"children":2035},{"style":213},[2036],{"type":53,"value":359},{"type":48,"tag":200,"props":2038,"children":2039},{"class":202,"line":362},[2040],{"type":48,"tag":200,"props":2041,"children":2042},{"style":213},[2043],{"type":53,"value":368},{"type":48,"tag":200,"props":2045,"children":2046},{"class":202,"line":371},[2047],{"type":48,"tag":200,"props":2048,"children":2049},{"emptyLinePlaceholder":254},[2050],{"type":53,"value":257},{"type":48,"tag":200,"props":2052,"children":2053},{"class":202,"line":379},[2054,2058,2063,2067,2071,2075,2080,2084],{"type":48,"tag":200,"props":2055,"children":2056},{"style":264},[2057],{"type":53,"value":385},{"type":48,"tag":200,"props":2059,"children":2060},{"style":270},[2061],{"type":53,"value":2062}," TimeTravelClient",{"type":48,"tag":200,"props":2064,"children":2065},{"style":264},[2066],{"type":53,"value":395},{"type":48,"tag":200,"props":2068,"children":2069},{"style":270},[2070],{"type":53,"value":222},{"type":48,"tag":200,"props":2072,"children":2073},{"style":213},[2074],{"type":53,"value":404},{"type":48,"tag":200,"props":2076,"children":2077},{"style":270},[2078],{"type":53,"value":2079},"TimeTravelEvents",{"type":48,"tag":200,"props":2081,"children":2082},{"style":213},[2083],{"type":53,"value":414},{"type":48,"tag":200,"props":2085,"children":2086},{"style":213},[2087],{"type":53,"value":283},{"type":48,"tag":200,"props":2089,"children":2090},{"class":202,"line":421},[2091,2095,2099],{"type":48,"tag":200,"props":2092,"children":2093},{"style":264},[2094],{"type":53,"value":427},{"type":48,"tag":200,"props":2096,"children":2097},{"style":213},[2098],{"type":53,"value":432},{"type":48,"tag":200,"props":2100,"children":2101},{"style":213},[2102],{"type":53,"value":283},{"type":48,"tag":200,"props":2104,"children":2105},{"class":202,"line":439},[2106,2110,2114],{"type":48,"tag":200,"props":2107,"children":2108},{"style":219},[2109],{"type":53,"value":445},{"type":48,"tag":200,"props":2111,"children":2112},{"style":324},[2113],{"type":53,"value":450},{"type":48,"tag":200,"props":2115,"children":2116},{"style":213},[2117],{"type":53,"value":455},{"type":48,"tag":200,"props":2119,"children":2120},{"class":202,"line":458},[2121,2125,2129,2133,2138,2142],{"type":48,"tag":200,"props":2122,"children":2123},{"style":324},[2124],{"type":53,"value":464},{"type":48,"tag":200,"props":2126,"children":2127},{"style":213},[2128],{"type":53,"value":317},{"type":48,"tag":200,"props":2130,"children":2131},{"style":213},[2132],{"type":53,"value":237},{"type":48,"tag":200,"props":2134,"children":2135},{"style":240},[2136],{"type":53,"value":2137},"time-travel",{"type":48,"tag":200,"props":2139,"children":2140},{"style":213},[2141],{"type":53,"value":312},{"type":48,"tag":200,"props":2143,"children":2144},{"style":213},[2145],{"type":53,"value":486},{"type":48,"tag":200,"props":2147,"children":2148},{"class":202,"line":489},[2149,2153,2157,2161,2165,2169,2173,2177,2181,2185,2189,2193],{"type":48,"tag":200,"props":2150,"children":2151},{"style":324},[2152],{"type":53,"value":495},{"type":48,"tag":200,"props":2154,"children":2155},{"style":213},[2156],{"type":53,"value":317},{"type":48,"tag":200,"props":2158,"children":2159},{"style":219},[2160],{"type":53,"value":504},{"type":48,"tag":200,"props":2162,"children":2163},{"style":213},[2164],{"type":53,"value":509},{"type":48,"tag":200,"props":2166,"children":2167},{"style":219},[2168],{"type":53,"value":514},{"type":48,"tag":200,"props":2170,"children":2171},{"style":213},[2172],{"type":53,"value":509},{"type":48,"tag":200,"props":2174,"children":2175},{"style":219},[2176],{"type":53,"value":523},{"type":48,"tag":200,"props":2178,"children":2179},{"style":213},[2180],{"type":53,"value":528},{"type":48,"tag":200,"props":2182,"children":2183},{"style":213},[2184],{"type":53,"value":237},{"type":48,"tag":200,"props":2186,"children":2187},{"style":240},[2188],{"type":53,"value":537},{"type":48,"tag":200,"props":2190,"children":2191},{"style":213},[2192],{"type":53,"value":312},{"type":48,"tag":200,"props":2194,"children":2195},{"style":213},[2196],{"type":53,"value":486},{"type":48,"tag":200,"props":2198,"children":2199},{"class":202,"line":548},[2200,2204],{"type":48,"tag":200,"props":2201,"children":2202},{"style":213},[2203],{"type":53,"value":554},{"type":48,"tag":200,"props":2205,"children":2206},{"style":324},[2207],{"type":53,"value":559},{"type":48,"tag":200,"props":2209,"children":2210},{"class":202,"line":562},[2211],{"type":48,"tag":200,"props":2212,"children":2213},{"style":213},[2214],{"type":53,"value":568},{"type":48,"tag":200,"props":2216,"children":2217},{"class":202,"line":571},[2218],{"type":48,"tag":200,"props":2219,"children":2220},{"style":213},[2221],{"type":53,"value":368},{"type":48,"tag":200,"props":2223,"children":2224},{"class":202,"line":579},[2225],{"type":48,"tag":200,"props":2226,"children":2227},{"emptyLinePlaceholder":254},[2228],{"type":53,"value":257},{"type":48,"tag":200,"props":2230,"children":2231},{"class":202,"line":587},[2232,2236,2240,2245,2249,2253,2257],{"type":48,"tag":200,"props":2233,"children":2234},{"style":207},[2235],{"type":53,"value":593},{"type":48,"tag":200,"props":2237,"children":2238},{"style":264},[2239],{"type":53,"value":598},{"type":48,"tag":200,"props":2241,"children":2242},{"style":219},[2243],{"type":53,"value":2244}," timeTravelClient ",{"type":48,"tag":200,"props":2246,"children":2247},{"style":213},[2248],{"type":53,"value":608},{"type":48,"tag":200,"props":2250,"children":2251},{"style":213},[2252],{"type":53,"value":613},{"type":48,"tag":200,"props":2254,"children":2255},{"style":616},[2256],{"type":53,"value":2062},{"type":48,"tag":200,"props":2258,"children":2259},{"style":219},[2260],{"type":53,"value":623},{"type":48,"tag":59,"props":2262,"children":2263},{},[2264],{"type":48,"tag":63,"props":2265,"children":2266},{},[2267],{"type":53,"value":2268},"App side -- emit snapshots with structuredClone:",{"type":48,"tag":153,"props":2270,"children":2272},{"className":192,"code":2271,"language":194,"meta":161,"style":161},"import { timeTravelClient } from '.\u002Ftime-travel-client'\n\nfunction applyAction(action: { type: string; payload: unknown }) {\n state = reducer(state, action)\n\n timeTravelClient.emit('snapshot', {\n state: structuredClone(state),\n timestamp: Date.now(),\n label: action.type,\n })\n}\n\n\u002F\u002F Listen for revert commands from devtools\ntimeTravelClient.on('revert', (event) => {\n state = event.payload.state\n rerender()\n})\n",[2273],{"type":48,"tag":71,"props":2274,"children":2275},{"__ignoreMap":161},[2276,2313,2320,2388,2427,2434,2475,2508,2540,2568,2579,2586,2593,2601,2658,2690,2702],{"type":48,"tag":200,"props":2277,"children":2278},{"class":202,"line":203},[2279,2283,2287,2292,2296,2300,2304,2309],{"type":48,"tag":200,"props":2280,"children":2281},{"style":207},[2282],{"type":53,"value":210},{"type":48,"tag":200,"props":2284,"children":2285},{"style":213},[2286],{"type":53,"value":216},{"type":48,"tag":200,"props":2288,"children":2289},{"style":219},[2290],{"type":53,"value":2291}," timeTravelClient",{"type":48,"tag":200,"props":2293,"children":2294},{"style":213},[2295],{"type":53,"value":227},{"type":48,"tag":200,"props":2297,"children":2298},{"style":207},[2299],{"type":53,"value":232},{"type":48,"tag":200,"props":2301,"children":2302},{"style":213},[2303],{"type":53,"value":237},{"type":48,"tag":200,"props":2305,"children":2306},{"style":240},[2307],{"type":53,"value":2308},".\u002Ftime-travel-client",{"type":48,"tag":200,"props":2310,"children":2311},{"style":213},[2312],{"type":53,"value":247},{"type":48,"tag":200,"props":2314,"children":2315},{"class":202,"line":250},[2316],{"type":48,"tag":200,"props":2317,"children":2318},{"emptyLinePlaceholder":254},[2319],{"type":53,"value":257},{"type":48,"tag":200,"props":2321,"children":2322},{"class":202,"line":260},[2323,2327,2332,2336,2341,2345,2349,2354,2358,2362,2366,2371,2375,2379,2384],{"type":48,"tag":200,"props":2324,"children":2325},{"style":264},[2326],{"type":53,"value":690},{"type":48,"tag":200,"props":2328,"children":2329},{"style":616},[2330],{"type":53,"value":2331}," applyAction",{"type":48,"tag":200,"props":2333,"children":2334},{"style":213},[2335],{"type":53,"value":450},{"type":48,"tag":200,"props":2337,"children":2338},{"style":944},[2339],{"type":53,"value":2340},"action",{"type":48,"tag":200,"props":2342,"children":2343},{"style":213},[2344],{"type":53,"value":317},{"type":48,"tag":200,"props":2346,"children":2347},{"style":213},[2348],{"type":53,"value":216},{"type":48,"tag":200,"props":2350,"children":2351},{"style":324},[2352],{"type":53,"value":2353}," type",{"type":48,"tag":200,"props":2355,"children":2356},{"style":213},[2357],{"type":53,"value":317},{"type":48,"tag":200,"props":2359,"children":2360},{"style":270},[2361],{"type":53,"value":1992},{"type":48,"tag":200,"props":2363,"children":2364},{"style":213},[2365],{"type":53,"value":341},{"type":48,"tag":200,"props":2367,"children":2368},{"style":324},[2369],{"type":53,"value":2370}," payload",{"type":48,"tag":200,"props":2372,"children":2373},{"style":213},[2374],{"type":53,"value":317},{"type":48,"tag":200,"props":2376,"children":2377},{"style":270},[2378],{"type":53,"value":1957},{"type":48,"tag":200,"props":2380,"children":2381},{"style":213},[2382],{"type":53,"value":2383}," })",{"type":48,"tag":200,"props":2385,"children":2386},{"style":213},[2387],{"type":53,"value":283},{"type":48,"tag":200,"props":2389,"children":2390},{"class":202,"line":286},[2391,2396,2400,2405,2409,2414,2418,2423],{"type":48,"tag":200,"props":2392,"children":2393},{"style":219},[2394],{"type":53,"value":2395}," state",{"type":48,"tag":200,"props":2397,"children":2398},{"style":213},[2399],{"type":53,"value":278},{"type":48,"tag":200,"props":2401,"children":2402},{"style":616},[2403],{"type":53,"value":2404}," reducer",{"type":48,"tag":200,"props":2406,"children":2407},{"style":324},[2408],{"type":53,"value":450},{"type":48,"tag":200,"props":2410,"children":2411},{"style":219},[2412],{"type":53,"value":2413},"state",{"type":48,"tag":200,"props":2415,"children":2416},{"style":213},[2417],{"type":53,"value":760},{"type":48,"tag":200,"props":2419,"children":2420},{"style":219},[2421],{"type":53,"value":2422}," action",{"type":48,"tag":200,"props":2424,"children":2425},{"style":324},[2426],{"type":53,"value":559},{"type":48,"tag":200,"props":2428,"children":2429},{"class":202,"line":296},[2430],{"type":48,"tag":200,"props":2431,"children":2432},{"emptyLinePlaceholder":254},[2433],{"type":53,"value":257},{"type":48,"tag":200,"props":2435,"children":2436},{"class":202,"line":362},[2437,2442,2446,2450,2454,2458,2463,2467,2471],{"type":48,"tag":200,"props":2438,"children":2439},{"style":219},[2440],{"type":53,"value":2441}," timeTravelClient",{"type":48,"tag":200,"props":2443,"children":2444},{"style":213},[2445],{"type":53,"value":509},{"type":48,"tag":200,"props":2447,"children":2448},{"style":616},[2449],{"type":53,"value":739},{"type":48,"tag":200,"props":2451,"children":2452},{"style":324},[2453],{"type":53,"value":450},{"type":48,"tag":200,"props":2455,"children":2456},{"style":213},[2457],{"type":53,"value":312},{"type":48,"tag":200,"props":2459,"children":2460},{"style":240},[2461],{"type":53,"value":2462},"snapshot",{"type":48,"tag":200,"props":2464,"children":2465},{"style":213},[2466],{"type":53,"value":312},{"type":48,"tag":200,"props":2468,"children":2469},{"style":213},[2470],{"type":53,"value":760},{"type":48,"tag":200,"props":2472,"children":2473},{"style":213},[2474],{"type":53,"value":283},{"type":48,"tag":200,"props":2476,"children":2477},{"class":202,"line":371},[2478,2483,2487,2492,2496,2500,2504],{"type":48,"tag":200,"props":2479,"children":2480},{"style":324},[2481],{"type":53,"value":2482}," state",{"type":48,"tag":200,"props":2484,"children":2485},{"style":213},[2486],{"type":53,"value":317},{"type":48,"tag":200,"props":2488,"children":2489},{"style":616},[2490],{"type":53,"value":2491}," structuredClone",{"type":48,"tag":200,"props":2493,"children":2494},{"style":324},[2495],{"type":53,"value":450},{"type":48,"tag":200,"props":2497,"children":2498},{"style":219},[2499],{"type":53,"value":2413},{"type":48,"tag":200,"props":2501,"children":2502},{"style":324},[2503],{"type":53,"value":952},{"type":48,"tag":200,"props":2505,"children":2506},{"style":213},[2507],{"type":53,"value":486},{"type":48,"tag":200,"props":2509,"children":2510},{"class":202,"line":379},[2511,2516,2520,2524,2528,2532,2536],{"type":48,"tag":200,"props":2512,"children":2513},{"style":324},[2514],{"type":53,"value":2515}," timestamp",{"type":48,"tag":200,"props":2517,"children":2518},{"style":213},[2519],{"type":53,"value":317},{"type":48,"tag":200,"props":2521,"children":2522},{"style":219},[2523],{"type":53,"value":793},{"type":48,"tag":200,"props":2525,"children":2526},{"style":213},[2527],{"type":53,"value":509},{"type":48,"tag":200,"props":2529,"children":2530},{"style":616},[2531],{"type":53,"value":802},{"type":48,"tag":200,"props":2533,"children":2534},{"style":324},[2535],{"type":53,"value":432},{"type":48,"tag":200,"props":2537,"children":2538},{"style":213},[2539],{"type":53,"value":486},{"type":48,"tag":200,"props":2541,"children":2542},{"class":202,"line":421},[2543,2548,2552,2556,2560,2564],{"type":48,"tag":200,"props":2544,"children":2545},{"style":324},[2546],{"type":53,"value":2547}," label",{"type":48,"tag":200,"props":2549,"children":2550},{"style":213},[2551],{"type":53,"value":317},{"type":48,"tag":200,"props":2553,"children":2554},{"style":219},[2555],{"type":53,"value":2422},{"type":48,"tag":200,"props":2557,"children":2558},{"style":213},[2559],{"type":53,"value":509},{"type":48,"tag":200,"props":2561,"children":2562},{"style":219},[2563],{"type":53,"value":267},{"type":48,"tag":200,"props":2565,"children":2566},{"style":213},[2567],{"type":53,"value":486},{"type":48,"tag":200,"props":2569,"children":2570},{"class":202,"line":439},[2571,2575],{"type":48,"tag":200,"props":2572,"children":2573},{"style":213},[2574],{"type":53,"value":818},{"type":48,"tag":200,"props":2576,"children":2577},{"style":324},[2578],{"type":53,"value":559},{"type":48,"tag":200,"props":2580,"children":2581},{"class":202,"line":458},[2582],{"type":48,"tag":200,"props":2583,"children":2584},{"style":213},[2585],{"type":53,"value":368},{"type":48,"tag":200,"props":2587,"children":2588},{"class":202,"line":489},[2589],{"type":48,"tag":200,"props":2590,"children":2591},{"emptyLinePlaceholder":254},[2592],{"type":53,"value":257},{"type":48,"tag":200,"props":2594,"children":2595},{"class":202,"line":548},[2596],{"type":48,"tag":200,"props":2597,"children":2598},{"style":290},[2599],{"type":53,"value":2600},"\u002F\u002F Listen for revert commands from devtools\n",{"type":48,"tag":200,"props":2602,"children":2603},{"class":202,"line":562},[2604,2609,2613,2617,2621,2625,2630,2634,2638,2642,2646,2650,2654],{"type":48,"tag":200,"props":2605,"children":2606},{"style":219},[2607],{"type":53,"value":2608},"timeTravelClient",{"type":48,"tag":200,"props":2610,"children":2611},{"style":213},[2612],{"type":53,"value":509},{"type":48,"tag":200,"props":2614,"children":2615},{"style":616},[2616],{"type":53,"value":916},{"type":48,"tag":200,"props":2618,"children":2619},{"style":219},[2620],{"type":53,"value":450},{"type":48,"tag":200,"props":2622,"children":2623},{"style":213},[2624],{"type":53,"value":312},{"type":48,"tag":200,"props":2626,"children":2627},{"style":240},[2628],{"type":53,"value":2629},"revert",{"type":48,"tag":200,"props":2631,"children":2632},{"style":213},[2633],{"type":53,"value":312},{"type":48,"tag":200,"props":2635,"children":2636},{"style":213},[2637],{"type":53,"value":760},{"type":48,"tag":200,"props":2639,"children":2640},{"style":213},[2641],{"type":53,"value":941},{"type":48,"tag":200,"props":2643,"children":2644},{"style":944},[2645],{"type":53,"value":947},{"type":48,"tag":200,"props":2647,"children":2648},{"style":213},[2649],{"type":53,"value":952},{"type":48,"tag":200,"props":2651,"children":2652},{"style":264},[2653],{"type":53,"value":957},{"type":48,"tag":200,"props":2655,"children":2656},{"style":213},[2657],{"type":53,"value":283},{"type":48,"tag":200,"props":2659,"children":2660},{"class":202,"line":571},[2661,2665,2669,2673,2677,2681,2685],{"type":48,"tag":200,"props":2662,"children":2663},{"style":219},[2664],{"type":53,"value":2395},{"type":48,"tag":200,"props":2666,"children":2667},{"style":213},[2668],{"type":53,"value":278},{"type":48,"tag":200,"props":2670,"children":2671},{"style":219},[2672],{"type":53,"value":1748},{"type":48,"tag":200,"props":2674,"children":2675},{"style":213},[2676],{"type":53,"value":509},{"type":48,"tag":200,"props":2678,"children":2679},{"style":219},[2680],{"type":53,"value":1002},{"type":48,"tag":200,"props":2682,"children":2683},{"style":213},[2684],{"type":53,"value":509},{"type":48,"tag":200,"props":2686,"children":2687},{"style":219},[2688],{"type":53,"value":2689},"state\n",{"type":48,"tag":200,"props":2691,"children":2692},{"class":202,"line":579},[2693,2698],{"type":48,"tag":200,"props":2694,"children":2695},{"style":616},[2696],{"type":53,"value":2697}," rerender",{"type":48,"tag":200,"props":2699,"children":2700},{"style":324},[2701],{"type":53,"value":623},{"type":48,"tag":200,"props":2703,"children":2704},{"class":202,"line":587},[2705,2709],{"type":48,"tag":200,"props":2706,"children":2707},{"style":213},[2708],{"type":53,"value":1014},{"type":48,"tag":200,"props":2710,"children":2711},{"style":219},[2712],{"type":53,"value":559},{"type":48,"tag":59,"props":2714,"children":2715},{},[2716,2722],{"type":48,"tag":71,"props":2717,"children":2719},{"className":2718},[],[2720],{"type":53,"value":2721},"structuredClone(state)",{"type":53,"value":2723}," is required here. Without it, the snapshot payload holds a reference to the live state object. When the app mutates state later, all previously stored snapshots in the panel are corrupted because they point to the same object.",{"type":48,"tag":59,"props":2725,"children":2726},{},[2727],{"type":48,"tag":63,"props":2728,"children":2729},{},[2730],{"type":53,"value":2731},"Panel side -- collect snapshots and revert:",{"type":48,"tag":153,"props":2733,"children":2737},{"className":2734,"code":2735,"language":2736,"meta":161,"style":161},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { timeTravelClient } from '.\u002Ftime-travel-client'\n\nfunction TimeTravelPanel() {\n const [snapshots, setSnapshots] = useState\u003C\n Array\u003C{ state: unknown; timestamp: number; label: string }>\n >([])\n const [index, setIndex] = useState(0)\n\n useEffect(() => {\n return timeTravelClient.on('snapshot', (event) => {\n setSnapshots((prev) => [...prev, event.payload])\n setIndex((prev) => prev + 1)\n })\n }, [])\n\n const handleSliderChange = (newIndex: number) => {\n setIndex(newIndex)\n timeTravelClient.emit('revert', {\n state: snapshots[newIndex].state,\n })\n }\n\n return (\n \u003Cdiv>\n \u003Cinput\n type=\"range\"\n min={0}\n max={snapshots.length - 1}\n value={index}\n onChange={(e) => handleSliderChange(Number(e.target.value))}\n \u002F>\n \u003Cp>\n {snapshots[index]?.label} (\n {new Date(snapshots[index]?.timestamp).toLocaleTimeString()})\n \u003C\u002Fp>\n \u003Cpre>{JSON.stringify(snapshots[index]?.state, null, 2)}\u003C\u002Fpre>\n \u003C\u002Fdiv>\n )\n}\n","tsx",[2738],{"type":48,"tag":71,"props":2739,"children":2740},{"__ignoreMap":161},[2741,2776,2783,2803,2849,2911,2924,2974,2981,3005,3065,3128,3175,3186,3199,3206,3251,3271,3311,3354,3366,3374,3382,3396,3415,3429,3457,3479,3518,3539,3606,3615,3631,3663,3711,3728,3802,3819,3828],{"type":48,"tag":200,"props":2742,"children":2743},{"class":202,"line":203},[2744,2748,2752,2756,2760,2764,2768,2772],{"type":48,"tag":200,"props":2745,"children":2746},{"style":207},[2747],{"type":53,"value":210},{"type":48,"tag":200,"props":2749,"children":2750},{"style":213},[2751],{"type":53,"value":216},{"type":48,"tag":200,"props":2753,"children":2754},{"style":219},[2755],{"type":53,"value":2291},{"type":48,"tag":200,"props":2757,"children":2758},{"style":213},[2759],{"type":53,"value":227},{"type":48,"tag":200,"props":2761,"children":2762},{"style":207},[2763],{"type":53,"value":232},{"type":48,"tag":200,"props":2765,"children":2766},{"style":213},[2767],{"type":53,"value":237},{"type":48,"tag":200,"props":2769,"children":2770},{"style":240},[2771],{"type":53,"value":2308},{"type":48,"tag":200,"props":2773,"children":2774},{"style":213},[2775],{"type":53,"value":247},{"type":48,"tag":200,"props":2777,"children":2778},{"class":202,"line":250},[2779],{"type":48,"tag":200,"props":2780,"children":2781},{"emptyLinePlaceholder":254},[2782],{"type":53,"value":257},{"type":48,"tag":200,"props":2784,"children":2785},{"class":202,"line":260},[2786,2790,2795,2799],{"type":48,"tag":200,"props":2787,"children":2788},{"style":264},[2789],{"type":53,"value":690},{"type":48,"tag":200,"props":2791,"children":2792},{"style":616},[2793],{"type":53,"value":2794}," TimeTravelPanel",{"type":48,"tag":200,"props":2796,"children":2797},{"style":213},[2798],{"type":53,"value":432},{"type":48,"tag":200,"props":2800,"children":2801},{"style":213},[2802],{"type":53,"value":283},{"type":48,"tag":200,"props":2804,"children":2805},{"class":202,"line":286},[2806,2811,2816,2821,2825,2830,2835,2839,2844],{"type":48,"tag":200,"props":2807,"children":2808},{"style":264},[2809],{"type":53,"value":2810}," const",{"type":48,"tag":200,"props":2812,"children":2813},{"style":213},[2814],{"type":53,"value":2815}," [",{"type":48,"tag":200,"props":2817,"children":2818},{"style":219},[2819],{"type":53,"value":2820},"snapshots",{"type":48,"tag":200,"props":2822,"children":2823},{"style":213},[2824],{"type":53,"value":760},{"type":48,"tag":200,"props":2826,"children":2827},{"style":219},[2828],{"type":53,"value":2829}," setSnapshots",{"type":48,"tag":200,"props":2831,"children":2832},{"style":213},[2833],{"type":53,"value":2834},"]",{"type":48,"tag":200,"props":2836,"children":2837},{"style":213},[2838],{"type":53,"value":278},{"type":48,"tag":200,"props":2840,"children":2841},{"style":219},[2842],{"type":53,"value":2843}," useState",{"type":48,"tag":200,"props":2845,"children":2846},{"style":213},[2847],{"type":53,"value":2848},"\u003C\n",{"type":48,"tag":200,"props":2850,"children":2851},{"class":202,"line":296},[2852,2857,2862,2866,2870,2874,2878,2882,2886,2890,2894,2898,2902,2906],{"type":48,"tag":200,"props":2853,"children":2854},{"style":219},[2855],{"type":53,"value":2856}," Array",{"type":48,"tag":200,"props":2858,"children":2859},{"style":213},[2860],{"type":53,"value":2861},"\u003C{",{"type":48,"tag":200,"props":2863,"children":2864},{"style":270},[2865],{"type":53,"value":1948},{"type":48,"tag":200,"props":2867,"children":2868},{"style":213},[2869],{"type":53,"value":317},{"type":48,"tag":200,"props":2871,"children":2872},{"style":219},[2873],{"type":53,"value":1957},{"type":48,"tag":200,"props":2875,"children":2876},{"style":213},[2877],{"type":53,"value":341},{"type":48,"tag":200,"props":2879,"children":2880},{"style":270},[2881],{"type":53,"value":1966},{"type":48,"tag":200,"props":2883,"children":2884},{"style":213},[2885],{"type":53,"value":317},{"type":48,"tag":200,"props":2887,"children":2888},{"style":219},[2889],{"type":53,"value":336},{"type":48,"tag":200,"props":2891,"children":2892},{"style":213},[2893],{"type":53,"value":341},{"type":48,"tag":200,"props":2895,"children":2896},{"style":270},[2897],{"type":53,"value":1983},{"type":48,"tag":200,"props":2899,"children":2900},{"style":213},[2901],{"type":53,"value":317},{"type":48,"tag":200,"props":2903,"children":2904},{"style":219},[2905],{"type":53,"value":1992},{"type":48,"tag":200,"props":2907,"children":2908},{"style":213},[2909],{"type":53,"value":2910}," }>\n",{"type":48,"tag":200,"props":2912,"children":2913},{"class":202,"line":362},[2914,2919],{"type":48,"tag":200,"props":2915,"children":2916},{"style":213},[2917],{"type":53,"value":2918}," >",{"type":48,"tag":200,"props":2920,"children":2921},{"style":324},[2922],{"type":53,"value":2923},"([])\n",{"type":48,"tag":200,"props":2925,"children":2926},{"class":202,"line":371},[2927,2931,2935,2940,2944,2949,2953,2957,2961,2965,2970],{"type":48,"tag":200,"props":2928,"children":2929},{"style":264},[2930],{"type":53,"value":2810},{"type":48,"tag":200,"props":2932,"children":2933},{"style":213},[2934],{"type":53,"value":2815},{"type":48,"tag":200,"props":2936,"children":2937},{"style":219},[2938],{"type":53,"value":2939},"index",{"type":48,"tag":200,"props":2941,"children":2942},{"style":213},[2943],{"type":53,"value":760},{"type":48,"tag":200,"props":2945,"children":2946},{"style":219},[2947],{"type":53,"value":2948}," setIndex",{"type":48,"tag":200,"props":2950,"children":2951},{"style":213},[2952],{"type":53,"value":2834},{"type":48,"tag":200,"props":2954,"children":2955},{"style":213},[2956],{"type":53,"value":278},{"type":48,"tag":200,"props":2958,"children":2959},{"style":616},[2960],{"type":53,"value":2843},{"type":48,"tag":200,"props":2962,"children":2963},{"style":324},[2964],{"type":53,"value":450},{"type":48,"tag":200,"props":2966,"children":2967},{"style":719},[2968],{"type":53,"value":2969},"0",{"type":48,"tag":200,"props":2971,"children":2972},{"style":324},[2973],{"type":53,"value":559},{"type":48,"tag":200,"props":2975,"children":2976},{"class":202,"line":379},[2977],{"type":48,"tag":200,"props":2978,"children":2979},{"emptyLinePlaceholder":254},[2980],{"type":53,"value":257},{"type":48,"tag":200,"props":2982,"children":2983},{"class":202,"line":421},[2984,2989,2993,2997,3001],{"type":48,"tag":200,"props":2985,"children":2986},{"style":616},[2987],{"type":53,"value":2988}," useEffect",{"type":48,"tag":200,"props":2990,"children":2991},{"style":324},[2992],{"type":53,"value":450},{"type":48,"tag":200,"props":2994,"children":2995},{"style":213},[2996],{"type":53,"value":432},{"type":48,"tag":200,"props":2998,"children":2999},{"style":264},[3000],{"type":53,"value":957},{"type":48,"tag":200,"props":3002,"children":3003},{"style":213},[3004],{"type":53,"value":283},{"type":48,"tag":200,"props":3006,"children":3007},{"class":202,"line":439},[3008,3013,3017,3021,3025,3029,3033,3037,3041,3045,3049,3053,3057,3061],{"type":48,"tag":200,"props":3009,"children":3010},{"style":207},[3011],{"type":53,"value":3012}," return",{"type":48,"tag":200,"props":3014,"children":3015},{"style":219},[3016],{"type":53,"value":2291},{"type":48,"tag":200,"props":3018,"children":3019},{"style":213},[3020],{"type":53,"value":509},{"type":48,"tag":200,"props":3022,"children":3023},{"style":616},[3024],{"type":53,"value":916},{"type":48,"tag":200,"props":3026,"children":3027},{"style":324},[3028],{"type":53,"value":450},{"type":48,"tag":200,"props":3030,"children":3031},{"style":213},[3032],{"type":53,"value":312},{"type":48,"tag":200,"props":3034,"children":3035},{"style":240},[3036],{"type":53,"value":2462},{"type":48,"tag":200,"props":3038,"children":3039},{"style":213},[3040],{"type":53,"value":312},{"type":48,"tag":200,"props":3042,"children":3043},{"style":213},[3044],{"type":53,"value":760},{"type":48,"tag":200,"props":3046,"children":3047},{"style":213},[3048],{"type":53,"value":941},{"type":48,"tag":200,"props":3050,"children":3051},{"style":944},[3052],{"type":53,"value":947},{"type":48,"tag":200,"props":3054,"children":3055},{"style":213},[3056],{"type":53,"value":952},{"type":48,"tag":200,"props":3058,"children":3059},{"style":264},[3060],{"type":53,"value":957},{"type":48,"tag":200,"props":3062,"children":3063},{"style":213},[3064],{"type":53,"value":283},{"type":48,"tag":200,"props":3066,"children":3067},{"class":202,"line":458},[3068,3073,3077,3081,3086,3090,3094,3098,3103,3107,3111,3115,3119,3123],{"type":48,"tag":200,"props":3069,"children":3070},{"style":616},[3071],{"type":53,"value":3072}," setSnapshots",{"type":48,"tag":200,"props":3074,"children":3075},{"style":324},[3076],{"type":53,"value":450},{"type":48,"tag":200,"props":3078,"children":3079},{"style":213},[3080],{"type":53,"value":450},{"type":48,"tag":200,"props":3082,"children":3083},{"style":944},[3084],{"type":53,"value":3085},"prev",{"type":48,"tag":200,"props":3087,"children":3088},{"style":213},[3089],{"type":53,"value":952},{"type":48,"tag":200,"props":3091,"children":3092},{"style":264},[3093],{"type":53,"value":957},{"type":48,"tag":200,"props":3095,"children":3096},{"style":324},[3097],{"type":53,"value":2815},{"type":48,"tag":200,"props":3099,"children":3100},{"style":213},[3101],{"type":53,"value":3102},"...",{"type":48,"tag":200,"props":3104,"children":3105},{"style":219},[3106],{"type":53,"value":3085},{"type":48,"tag":200,"props":3108,"children":3109},{"style":213},[3110],{"type":53,"value":760},{"type":48,"tag":200,"props":3112,"children":3113},{"style":219},[3114],{"type":53,"value":1748},{"type":48,"tag":200,"props":3116,"children":3117},{"style":213},[3118],{"type":53,"value":509},{"type":48,"tag":200,"props":3120,"children":3121},{"style":219},[3122],{"type":53,"value":1002},{"type":48,"tag":200,"props":3124,"children":3125},{"style":324},[3126],{"type":53,"value":3127},"])\n",{"type":48,"tag":200,"props":3129,"children":3130},{"class":202,"line":489},[3131,3136,3140,3144,3148,3152,3156,3161,3166,3171],{"type":48,"tag":200,"props":3132,"children":3133},{"style":616},[3134],{"type":53,"value":3135}," setIndex",{"type":48,"tag":200,"props":3137,"children":3138},{"style":324},[3139],{"type":53,"value":450},{"type":48,"tag":200,"props":3141,"children":3142},{"style":213},[3143],{"type":53,"value":450},{"type":48,"tag":200,"props":3145,"children":3146},{"style":944},[3147],{"type":53,"value":3085},{"type":48,"tag":200,"props":3149,"children":3150},{"style":213},[3151],{"type":53,"value":952},{"type":48,"tag":200,"props":3153,"children":3154},{"style":264},[3155],{"type":53,"value":957},{"type":48,"tag":200,"props":3157,"children":3158},{"style":219},[3159],{"type":53,"value":3160}," prev",{"type":48,"tag":200,"props":3162,"children":3163},{"style":213},[3164],{"type":53,"value":3165}," +",{"type":48,"tag":200,"props":3167,"children":3168},{"style":719},[3169],{"type":53,"value":3170}," 1",{"type":48,"tag":200,"props":3172,"children":3173},{"style":324},[3174],{"type":53,"value":559},{"type":48,"tag":200,"props":3176,"children":3177},{"class":202,"line":548},[3178,3182],{"type":48,"tag":200,"props":3179,"children":3180},{"style":213},[3181],{"type":53,"value":554},{"type":48,"tag":200,"props":3183,"children":3184},{"style":324},[3185],{"type":53,"value":559},{"type":48,"tag":200,"props":3187,"children":3188},{"class":202,"line":562},[3189,3194],{"type":48,"tag":200,"props":3190,"children":3191},{"style":213},[3192],{"type":53,"value":3193}," },",{"type":48,"tag":200,"props":3195,"children":3196},{"style":324},[3197],{"type":53,"value":3198}," [])\n",{"type":48,"tag":200,"props":3200,"children":3201},{"class":202,"line":571},[3202],{"type":48,"tag":200,"props":3203,"children":3204},{"emptyLinePlaceholder":254},[3205],{"type":53,"value":257},{"type":48,"tag":200,"props":3207,"children":3208},{"class":202,"line":579},[3209,3213,3218,3222,3226,3231,3235,3239,3243,3247],{"type":48,"tag":200,"props":3210,"children":3211},{"style":264},[3212],{"type":53,"value":2810},{"type":48,"tag":200,"props":3214,"children":3215},{"style":219},[3216],{"type":53,"value":3217}," handleSliderChange",{"type":48,"tag":200,"props":3219,"children":3220},{"style":213},[3221],{"type":53,"value":278},{"type":48,"tag":200,"props":3223,"children":3224},{"style":213},[3225],{"type":53,"value":941},{"type":48,"tag":200,"props":3227,"children":3228},{"style":944},[3229],{"type":53,"value":3230},"newIndex",{"type":48,"tag":200,"props":3232,"children":3233},{"style":213},[3234],{"type":53,"value":317},{"type":48,"tag":200,"props":3236,"children":3237},{"style":270},[3238],{"type":53,"value":336},{"type":48,"tag":200,"props":3240,"children":3241},{"style":213},[3242],{"type":53,"value":952},{"type":48,"tag":200,"props":3244,"children":3245},{"style":264},[3246],{"type":53,"value":957},{"type":48,"tag":200,"props":3248,"children":3249},{"style":213},[3250],{"type":53,"value":283},{"type":48,"tag":200,"props":3252,"children":3253},{"class":202,"line":587},[3254,3259,3263,3267],{"type":48,"tag":200,"props":3255,"children":3256},{"style":616},[3257],{"type":53,"value":3258}," setIndex",{"type":48,"tag":200,"props":3260,"children":3261},{"style":324},[3262],{"type":53,"value":450},{"type":48,"tag":200,"props":3264,"children":3265},{"style":219},[3266],{"type":53,"value":3230},{"type":48,"tag":200,"props":3268,"children":3269},{"style":324},[3270],{"type":53,"value":559},{"type":48,"tag":200,"props":3272,"children":3273},{"class":202,"line":1860},[3274,3279,3283,3287,3291,3295,3299,3303,3307],{"type":48,"tag":200,"props":3275,"children":3276},{"style":219},[3277],{"type":53,"value":3278}," timeTravelClient",{"type":48,"tag":200,"props":3280,"children":3281},{"style":213},[3282],{"type":53,"value":509},{"type":48,"tag":200,"props":3284,"children":3285},{"style":616},[3286],{"type":53,"value":739},{"type":48,"tag":200,"props":3288,"children":3289},{"style":324},[3290],{"type":53,"value":450},{"type":48,"tag":200,"props":3292,"children":3293},{"style":213},[3294],{"type":53,"value":312},{"type":48,"tag":200,"props":3296,"children":3297},{"style":240},[3298],{"type":53,"value":2629},{"type":48,"tag":200,"props":3300,"children":3301},{"style":213},[3302],{"type":53,"value":312},{"type":48,"tag":200,"props":3304,"children":3305},{"style":213},[3306],{"type":53,"value":760},{"type":48,"tag":200,"props":3308,"children":3309},{"style":213},[3310],{"type":53,"value":283},{"type":48,"tag":200,"props":3312,"children":3314},{"class":202,"line":3313},19,[3315,3320,3324,3329,3334,3338,3342,3346,3350],{"type":48,"tag":200,"props":3316,"children":3317},{"style":324},[3318],{"type":53,"value":3319}," state",{"type":48,"tag":200,"props":3321,"children":3322},{"style":213},[3323],{"type":53,"value":317},{"type":48,"tag":200,"props":3325,"children":3326},{"style":219},[3327],{"type":53,"value":3328}," snapshots",{"type":48,"tag":200,"props":3330,"children":3331},{"style":324},[3332],{"type":53,"value":3333},"[",{"type":48,"tag":200,"props":3335,"children":3336},{"style":219},[3337],{"type":53,"value":3230},{"type":48,"tag":200,"props":3339,"children":3340},{"style":324},[3341],{"type":53,"value":2834},{"type":48,"tag":200,"props":3343,"children":3344},{"style":213},[3345],{"type":53,"value":509},{"type":48,"tag":200,"props":3347,"children":3348},{"style":219},[3349],{"type":53,"value":2413},{"type":48,"tag":200,"props":3351,"children":3352},{"style":213},[3353],{"type":53,"value":486},{"type":48,"tag":200,"props":3355,"children":3357},{"class":202,"line":3356},20,[3358,3362],{"type":48,"tag":200,"props":3359,"children":3360},{"style":213},[3361],{"type":53,"value":554},{"type":48,"tag":200,"props":3363,"children":3364},{"style":324},[3365],{"type":53,"value":559},{"type":48,"tag":200,"props":3367,"children":3369},{"class":202,"line":3368},21,[3370],{"type":48,"tag":200,"props":3371,"children":3372},{"style":213},[3373],{"type":53,"value":568},{"type":48,"tag":200,"props":3375,"children":3377},{"class":202,"line":3376},22,[3378],{"type":48,"tag":200,"props":3379,"children":3380},{"emptyLinePlaceholder":254},[3381],{"type":53,"value":257},{"type":48,"tag":200,"props":3383,"children":3385},{"class":202,"line":3384},23,[3386,3391],{"type":48,"tag":200,"props":3387,"children":3388},{"style":207},[3389],{"type":53,"value":3390}," return",{"type":48,"tag":200,"props":3392,"children":3393},{"style":324},[3394],{"type":53,"value":3395}," (\n",{"type":48,"tag":200,"props":3397,"children":3399},{"class":202,"line":3398},24,[3400,3405,3410],{"type":48,"tag":200,"props":3401,"children":3402},{"style":213},[3403],{"type":53,"value":3404}," \u003C",{"type":48,"tag":200,"props":3406,"children":3407},{"style":324},[3408],{"type":53,"value":3409},"div",{"type":48,"tag":200,"props":3411,"children":3412},{"style":213},[3413],{"type":53,"value":3414},">\n",{"type":48,"tag":200,"props":3416,"children":3418},{"class":202,"line":3417},25,[3419,3424],{"type":48,"tag":200,"props":3420,"children":3421},{"style":213},[3422],{"type":53,"value":3423}," \u003C",{"type":48,"tag":200,"props":3425,"children":3426},{"style":324},[3427],{"type":53,"value":3428},"input\n",{"type":48,"tag":200,"props":3430,"children":3432},{"class":202,"line":3431},26,[3433,3438,3442,3447,3452],{"type":48,"tag":200,"props":3434,"children":3435},{"style":264},[3436],{"type":53,"value":3437}," type",{"type":48,"tag":200,"props":3439,"children":3440},{"style":213},[3441],{"type":53,"value":608},{"type":48,"tag":200,"props":3443,"children":3444},{"style":213},[3445],{"type":53,"value":3446},"\"",{"type":48,"tag":200,"props":3448,"children":3449},{"style":240},[3450],{"type":53,"value":3451},"range",{"type":48,"tag":200,"props":3453,"children":3454},{"style":213},[3455],{"type":53,"value":3456},"\"\n",{"type":48,"tag":200,"props":3458,"children":3460},{"class":202,"line":3459},27,[3461,3466,3471,3475],{"type":48,"tag":200,"props":3462,"children":3463},{"style":264},[3464],{"type":53,"value":3465}," min",{"type":48,"tag":200,"props":3467,"children":3468},{"style":213},[3469],{"type":53,"value":3470},"={",{"type":48,"tag":200,"props":3472,"children":3473},{"style":719},[3474],{"type":53,"value":2969},{"type":48,"tag":200,"props":3476,"children":3477},{"style":213},[3478],{"type":53,"value":368},{"type":48,"tag":200,"props":3480,"children":3482},{"class":202,"line":3481},28,[3483,3488,3492,3496,3500,3505,3510,3514],{"type":48,"tag":200,"props":3484,"children":3485},{"style":264},[3486],{"type":53,"value":3487}," max",{"type":48,"tag":200,"props":3489,"children":3490},{"style":213},[3491],{"type":53,"value":3470},{"type":48,"tag":200,"props":3493,"children":3494},{"style":219},[3495],{"type":53,"value":2820},{"type":48,"tag":200,"props":3497,"children":3498},{"style":213},[3499],{"type":53,"value":509},{"type":48,"tag":200,"props":3501,"children":3502},{"style":219},[3503],{"type":53,"value":3504},"length ",{"type":48,"tag":200,"props":3506,"children":3507},{"style":213},[3508],{"type":53,"value":3509},"-",{"type":48,"tag":200,"props":3511,"children":3512},{"style":719},[3513],{"type":53,"value":3170},{"type":48,"tag":200,"props":3515,"children":3516},{"style":213},[3517],{"type":53,"value":368},{"type":48,"tag":200,"props":3519,"children":3521},{"class":202,"line":3520},29,[3522,3527,3531,3535],{"type":48,"tag":200,"props":3523,"children":3524},{"style":264},[3525],{"type":53,"value":3526}," value",{"type":48,"tag":200,"props":3528,"children":3529},{"style":213},[3530],{"type":53,"value":3470},{"type":48,"tag":200,"props":3532,"children":3533},{"style":219},[3534],{"type":53,"value":2939},{"type":48,"tag":200,"props":3536,"children":3537},{"style":213},[3538],{"type":53,"value":368},{"type":48,"tag":200,"props":3540,"children":3542},{"class":202,"line":3541},30,[3543,3548,3553,3558,3562,3566,3570,3574,3579,3584,3588,3593,3597,3602],{"type":48,"tag":200,"props":3544,"children":3545},{"style":264},[3546],{"type":53,"value":3547}," onChange",{"type":48,"tag":200,"props":3549,"children":3550},{"style":213},[3551],{"type":53,"value":3552},"={(",{"type":48,"tag":200,"props":3554,"children":3555},{"style":944},[3556],{"type":53,"value":3557},"e",{"type":48,"tag":200,"props":3559,"children":3560},{"style":213},[3561],{"type":53,"value":952},{"type":48,"tag":200,"props":3563,"children":3564},{"style":264},[3565],{"type":53,"value":957},{"type":48,"tag":200,"props":3567,"children":3568},{"style":616},[3569],{"type":53,"value":3217},{"type":48,"tag":200,"props":3571,"children":3572},{"style":219},[3573],{"type":53,"value":450},{"type":48,"tag":200,"props":3575,"children":3576},{"style":616},[3577],{"type":53,"value":3578},"Number",{"type":48,"tag":200,"props":3580,"children":3581},{"style":219},[3582],{"type":53,"value":3583},"(e",{"type":48,"tag":200,"props":3585,"children":3586},{"style":213},[3587],{"type":53,"value":509},{"type":48,"tag":200,"props":3589,"children":3590},{"style":219},[3591],{"type":53,"value":3592},"target",{"type":48,"tag":200,"props":3594,"children":3595},{"style":213},[3596],{"type":53,"value":509},{"type":48,"tag":200,"props":3598,"children":3599},{"style":219},[3600],{"type":53,"value":3601},"value))",{"type":48,"tag":200,"props":3603,"children":3604},{"style":213},[3605],{"type":53,"value":368},{"type":48,"tag":200,"props":3607,"children":3609},{"class":202,"line":3608},31,[3610],{"type":48,"tag":200,"props":3611,"children":3612},{"style":213},[3613],{"type":53,"value":3614}," \u002F>\n",{"type":48,"tag":200,"props":3616,"children":3618},{"class":202,"line":3617},32,[3619,3623,3627],{"type":48,"tag":200,"props":3620,"children":3621},{"style":213},[3622],{"type":53,"value":3423},{"type":48,"tag":200,"props":3624,"children":3625},{"style":324},[3626],{"type":53,"value":59},{"type":48,"tag":200,"props":3628,"children":3629},{"style":213},[3630],{"type":53,"value":3414},{"type":48,"tag":200,"props":3632,"children":3634},{"class":202,"line":3633},33,[3635,3640,3645,3650,3655,3659],{"type":48,"tag":200,"props":3636,"children":3637},{"style":213},[3638],{"type":53,"value":3639}," {",{"type":48,"tag":200,"props":3641,"children":3642},{"style":219},[3643],{"type":53,"value":3644},"snapshots[index]",{"type":48,"tag":200,"props":3646,"children":3647},{"style":213},[3648],{"type":53,"value":3649},"?.",{"type":48,"tag":200,"props":3651,"children":3652},{"style":219},[3653],{"type":53,"value":3654},"label",{"type":48,"tag":200,"props":3656,"children":3657},{"style":213},[3658],{"type":53,"value":1014},{"type":48,"tag":200,"props":3660,"children":3661},{"style":219},[3662],{"type":53,"value":3395},{"type":48,"tag":200,"props":3664,"children":3666},{"class":202,"line":3665},34,[3667,3672,3676,3681,3685,3690,3694,3699,3703,3707],{"type":48,"tag":200,"props":3668,"children":3669},{"style":213},[3670],{"type":53,"value":3671}," {new",{"type":48,"tag":200,"props":3673,"children":3674},{"style":616},[3675],{"type":53,"value":793},{"type":48,"tag":200,"props":3677,"children":3678},{"style":219},[3679],{"type":53,"value":3680},"(snapshots[index]",{"type":48,"tag":200,"props":3682,"children":3683},{"style":213},[3684],{"type":53,"value":3649},{"type":48,"tag":200,"props":3686,"children":3687},{"style":219},[3688],{"type":53,"value":3689},"timestamp)",{"type":48,"tag":200,"props":3691,"children":3692},{"style":213},[3693],{"type":53,"value":509},{"type":48,"tag":200,"props":3695,"children":3696},{"style":616},[3697],{"type":53,"value":3698},"toLocaleTimeString",{"type":48,"tag":200,"props":3700,"children":3701},{"style":219},[3702],{"type":53,"value":432},{"type":48,"tag":200,"props":3704,"children":3705},{"style":213},[3706],{"type":53,"value":1014},{"type":48,"tag":200,"props":3708,"children":3709},{"style":219},[3710],{"type":53,"value":559},{"type":48,"tag":200,"props":3712,"children":3714},{"class":202,"line":3713},35,[3715,3720,3724],{"type":48,"tag":200,"props":3716,"children":3717},{"style":213},[3718],{"type":53,"value":3719}," \u003C\u002F",{"type":48,"tag":200,"props":3721,"children":3722},{"style":324},[3723],{"type":53,"value":59},{"type":48,"tag":200,"props":3725,"children":3726},{"style":213},[3727],{"type":53,"value":3414},{"type":48,"tag":200,"props":3729,"children":3731},{"class":202,"line":3730},36,[3732,3736,3740,3745,3750,3754,3759,3763,3767,3771,3775,3780,3785,3789,3794,3798],{"type":48,"tag":200,"props":3733,"children":3734},{"style":213},[3735],{"type":53,"value":3423},{"type":48,"tag":200,"props":3737,"children":3738},{"style":324},[3739],{"type":53,"value":153},{"type":48,"tag":200,"props":3741,"children":3742},{"style":213},[3743],{"type":53,"value":3744},">{",{"type":48,"tag":200,"props":3746,"children":3747},{"style":219},[3748],{"type":53,"value":3749},"JSON",{"type":48,"tag":200,"props":3751,"children":3752},{"style":213},[3753],{"type":53,"value":509},{"type":48,"tag":200,"props":3755,"children":3756},{"style":616},[3757],{"type":53,"value":3758},"stringify",{"type":48,"tag":200,"props":3760,"children":3761},{"style":219},[3762],{"type":53,"value":3680},{"type":48,"tag":200,"props":3764,"children":3765},{"style":213},[3766],{"type":53,"value":3649},{"type":48,"tag":200,"props":3768,"children":3769},{"style":219},[3770],{"type":53,"value":2413},{"type":48,"tag":200,"props":3772,"children":3773},{"style":213},[3774],{"type":53,"value":760},{"type":48,"tag":200,"props":3776,"children":3777},{"style":213},[3778],{"type":53,"value":3779}," null,",{"type":48,"tag":200,"props":3781,"children":3782},{"style":719},[3783],{"type":53,"value":3784}," 2",{"type":48,"tag":200,"props":3786,"children":3787},{"style":219},[3788],{"type":53,"value":952},{"type":48,"tag":200,"props":3790,"children":3791},{"style":213},[3792],{"type":53,"value":3793},"}\u003C\u002F",{"type":48,"tag":200,"props":3795,"children":3796},{"style":324},[3797],{"type":53,"value":153},{"type":48,"tag":200,"props":3799,"children":3800},{"style":213},[3801],{"type":53,"value":3414},{"type":48,"tag":200,"props":3803,"children":3805},{"class":202,"line":3804},37,[3806,3811,3815],{"type":48,"tag":200,"props":3807,"children":3808},{"style":213},[3809],{"type":53,"value":3810}," \u003C\u002F",{"type":48,"tag":200,"props":3812,"children":3813},{"style":324},[3814],{"type":53,"value":3409},{"type":48,"tag":200,"props":3816,"children":3817},{"style":213},[3818],{"type":53,"value":3414},{"type":48,"tag":200,"props":3820,"children":3822},{"class":202,"line":3821},38,[3823],{"type":48,"tag":200,"props":3824,"children":3825},{"style":324},[3826],{"type":53,"value":3827}," )\n",{"type":48,"tag":200,"props":3829,"children":3831},{"class":202,"line":3830},39,[3832],{"type":48,"tag":200,"props":3833,"children":3834},{"style":213},[3835],{"type":53,"value":368},{"type":48,"tag":59,"props":3837,"children":3838},{},[3839,3841,3846,3848,3853],{"type":53,"value":3840},"After the app handles ",{"type":48,"tag":71,"props":3842,"children":3844},{"className":3843},[],[3845],{"type":53,"value":2629},{"type":53,"value":3847},", it should re-emit a ",{"type":48,"tag":71,"props":3849,"children":3851},{"className":3850},[],[3852],{"type":53,"value":2462},{"type":53,"value":3854}," so the panel timeline stays current. The revert handler in the app side example above does not re-emit -- add it if your UI needs the timeline to update after a revert:",{"type":48,"tag":153,"props":3856,"children":3858},{"className":192,"code":3857,"language":194,"meta":161,"style":161},"timeTravelClient.on('revert', (event) => {\n state = event.payload.state\n rerender()\n \u002F\u002F Optional: re-emit so the timeline reflects the revert\n timeTravelClient.emit('snapshot', {\n state: structuredClone(state),\n timestamp: Date.now(),\n label: 'revert',\n })\n})\n",[3859],{"type":48,"tag":71,"props":3860,"children":3861},{"__ignoreMap":161},[3862,3917,3948,3959,3967,4006,4037,4068,4095,4106],{"type":48,"tag":200,"props":3863,"children":3864},{"class":202,"line":203},[3865,3869,3873,3877,3881,3885,3889,3893,3897,3901,3905,3909,3913],{"type":48,"tag":200,"props":3866,"children":3867},{"style":219},[3868],{"type":53,"value":2608},{"type":48,"tag":200,"props":3870,"children":3871},{"style":213},[3872],{"type":53,"value":509},{"type":48,"tag":200,"props":3874,"children":3875},{"style":616},[3876],{"type":53,"value":916},{"type":48,"tag":200,"props":3878,"children":3879},{"style":219},[3880],{"type":53,"value":450},{"type":48,"tag":200,"props":3882,"children":3883},{"style":213},[3884],{"type":53,"value":312},{"type":48,"tag":200,"props":3886,"children":3887},{"style":240},[3888],{"type":53,"value":2629},{"type":48,"tag":200,"props":3890,"children":3891},{"style":213},[3892],{"type":53,"value":312},{"type":48,"tag":200,"props":3894,"children":3895},{"style":213},[3896],{"type":53,"value":760},{"type":48,"tag":200,"props":3898,"children":3899},{"style":213},[3900],{"type":53,"value":941},{"type":48,"tag":200,"props":3902,"children":3903},{"style":944},[3904],{"type":53,"value":947},{"type":48,"tag":200,"props":3906,"children":3907},{"style":213},[3908],{"type":53,"value":952},{"type":48,"tag":200,"props":3910,"children":3911},{"style":264},[3912],{"type":53,"value":957},{"type":48,"tag":200,"props":3914,"children":3915},{"style":213},[3916],{"type":53,"value":283},{"type":48,"tag":200,"props":3918,"children":3919},{"class":202,"line":250},[3920,3924,3928,3932,3936,3940,3944],{"type":48,"tag":200,"props":3921,"children":3922},{"style":219},[3923],{"type":53,"value":2395},{"type":48,"tag":200,"props":3925,"children":3926},{"style":213},[3927],{"type":53,"value":278},{"type":48,"tag":200,"props":3929,"children":3930},{"style":219},[3931],{"type":53,"value":1748},{"type":48,"tag":200,"props":3933,"children":3934},{"style":213},[3935],{"type":53,"value":509},{"type":48,"tag":200,"props":3937,"children":3938},{"style":219},[3939],{"type":53,"value":1002},{"type":48,"tag":200,"props":3941,"children":3942},{"style":213},[3943],{"type":53,"value":509},{"type":48,"tag":200,"props":3945,"children":3946},{"style":219},[3947],{"type":53,"value":2689},{"type":48,"tag":200,"props":3949,"children":3950},{"class":202,"line":260},[3951,3955],{"type":48,"tag":200,"props":3952,"children":3953},{"style":616},[3954],{"type":53,"value":2697},{"type":48,"tag":200,"props":3956,"children":3957},{"style":324},[3958],{"type":53,"value":623},{"type":48,"tag":200,"props":3960,"children":3961},{"class":202,"line":286},[3962],{"type":48,"tag":200,"props":3963,"children":3964},{"style":290},[3965],{"type":53,"value":3966}," \u002F\u002F Optional: re-emit so the timeline reflects the revert\n",{"type":48,"tag":200,"props":3968,"children":3969},{"class":202,"line":296},[3970,3974,3978,3982,3986,3990,3994,3998,4002],{"type":48,"tag":200,"props":3971,"children":3972},{"style":219},[3973],{"type":53,"value":2441},{"type":48,"tag":200,"props":3975,"children":3976},{"style":213},[3977],{"type":53,"value":509},{"type":48,"tag":200,"props":3979,"children":3980},{"style":616},[3981],{"type":53,"value":739},{"type":48,"tag":200,"props":3983,"children":3984},{"style":324},[3985],{"type":53,"value":450},{"type":48,"tag":200,"props":3987,"children":3988},{"style":213},[3989],{"type":53,"value":312},{"type":48,"tag":200,"props":3991,"children":3992},{"style":240},[3993],{"type":53,"value":2462},{"type":48,"tag":200,"props":3995,"children":3996},{"style":213},[3997],{"type":53,"value":312},{"type":48,"tag":200,"props":3999,"children":4000},{"style":213},[4001],{"type":53,"value":760},{"type":48,"tag":200,"props":4003,"children":4004},{"style":213},[4005],{"type":53,"value":283},{"type":48,"tag":200,"props":4007,"children":4008},{"class":202,"line":362},[4009,4013,4017,4021,4025,4029,4033],{"type":48,"tag":200,"props":4010,"children":4011},{"style":324},[4012],{"type":53,"value":2482},{"type":48,"tag":200,"props":4014,"children":4015},{"style":213},[4016],{"type":53,"value":317},{"type":48,"tag":200,"props":4018,"children":4019},{"style":616},[4020],{"type":53,"value":2491},{"type":48,"tag":200,"props":4022,"children":4023},{"style":324},[4024],{"type":53,"value":450},{"type":48,"tag":200,"props":4026,"children":4027},{"style":219},[4028],{"type":53,"value":2413},{"type":48,"tag":200,"props":4030,"children":4031},{"style":324},[4032],{"type":53,"value":952},{"type":48,"tag":200,"props":4034,"children":4035},{"style":213},[4036],{"type":53,"value":486},{"type":48,"tag":200,"props":4038,"children":4039},{"class":202,"line":371},[4040,4044,4048,4052,4056,4060,4064],{"type":48,"tag":200,"props":4041,"children":4042},{"style":324},[4043],{"type":53,"value":2515},{"type":48,"tag":200,"props":4045,"children":4046},{"style":213},[4047],{"type":53,"value":317},{"type":48,"tag":200,"props":4049,"children":4050},{"style":219},[4051],{"type":53,"value":793},{"type":48,"tag":200,"props":4053,"children":4054},{"style":213},[4055],{"type":53,"value":509},{"type":48,"tag":200,"props":4057,"children":4058},{"style":616},[4059],{"type":53,"value":802},{"type":48,"tag":200,"props":4061,"children":4062},{"style":324},[4063],{"type":53,"value":432},{"type":48,"tag":200,"props":4065,"children":4066},{"style":213},[4067],{"type":53,"value":486},{"type":48,"tag":200,"props":4069,"children":4070},{"class":202,"line":379},[4071,4075,4079,4083,4087,4091],{"type":48,"tag":200,"props":4072,"children":4073},{"style":324},[4074],{"type":53,"value":2547},{"type":48,"tag":200,"props":4076,"children":4077},{"style":213},[4078],{"type":53,"value":317},{"type":48,"tag":200,"props":4080,"children":4081},{"style":213},[4082],{"type":53,"value":237},{"type":48,"tag":200,"props":4084,"children":4085},{"style":240},[4086],{"type":53,"value":2629},{"type":48,"tag":200,"props":4088,"children":4089},{"style":213},[4090],{"type":53,"value":312},{"type":48,"tag":200,"props":4092,"children":4093},{"style":213},[4094],{"type":53,"value":486},{"type":48,"tag":200,"props":4096,"children":4097},{"class":202,"line":421},[4098,4102],{"type":48,"tag":200,"props":4099,"children":4100},{"style":213},[4101],{"type":53,"value":818},{"type":48,"tag":200,"props":4103,"children":4104},{"style":324},[4105],{"type":53,"value":559},{"type":48,"tag":200,"props":4107,"children":4108},{"class":202,"line":439},[4109,4113],{"type":48,"tag":200,"props":4110,"children":4111},{"style":213},[4112],{"type":53,"value":1014},{"type":48,"tag":200,"props":4114,"children":4115},{"style":219},[4116],{"type":53,"value":559},{"type":48,"tag":171,"props":4118,"children":4120},{"id":4119},"_4-bidirectional-event-map-design",[4121],{"type":53,"value":4122},"4. Bidirectional Event Map Design",{"type":48,"tag":59,"props":4124,"children":4125},{},[4126],{"type":53,"value":4127},"When a single plugin needs both observation and command events, define them all in one event map. Use naming conventions to distinguish direction:",{"type":48,"tag":153,"props":4129,"children":4131},{"className":192,"code":4130,"language":194,"meta":161,"style":161},"type StoreInspectorEvents = {\n \u002F\u002F Observation: app -> panel (describe what happened)\n 'state-update': { storeName: string; state: unknown; timestamp: number }\n 'action-dispatched': { storeName: string; action: string; payload: unknown }\n 'error-caught': { storeName: string; error: string; stack?: string }\n\n \u002F\u002F Commands: panel -> app (describe what to do)\n 'set-state': { storeName: string; state: unknown }\n 'dispatch-action': { storeName: string; action: string; payload: unknown }\n reset: void\n revert: { state: unknown }\n}\n",[4132],{"type":48,"tag":71,"props":4133,"children":4134},{"__ignoreMap":161},[4135,4155,4163,4235,4307,4382,4389,4397,4453,4525,4540,4571],{"type":48,"tag":200,"props":4136,"children":4137},{"class":202,"line":203},[4138,4142,4147,4151],{"type":48,"tag":200,"props":4139,"children":4140},{"style":264},[4141],{"type":53,"value":267},{"type":48,"tag":200,"props":4143,"children":4144},{"style":270},[4145],{"type":53,"value":4146}," StoreInspectorEvents",{"type":48,"tag":200,"props":4148,"children":4149},{"style":213},[4150],{"type":53,"value":278},{"type":48,"tag":200,"props":4152,"children":4153},{"style":213},[4154],{"type":53,"value":283},{"type":48,"tag":200,"props":4156,"children":4157},{"class":202,"line":250},[4158],{"type":48,"tag":200,"props":4159,"children":4160},{"style":290},[4161],{"type":53,"value":4162}," \u002F\u002F Observation: app -> panel (describe what happened)\n",{"type":48,"tag":200,"props":4164,"children":4165},{"class":202,"line":260},[4166,4170,4174,4178,4182,4186,4191,4195,4199,4203,4207,4211,4215,4219,4223,4227,4231],{"type":48,"tag":200,"props":4167,"children":4168},{"style":213},[4169],{"type":53,"value":302},{"type":48,"tag":200,"props":4171,"children":4172},{"style":240},[4173],{"type":53,"value":307},{"type":48,"tag":200,"props":4175,"children":4176},{"style":213},[4177],{"type":53,"value":312},{"type":48,"tag":200,"props":4179,"children":4180},{"style":213},[4181],{"type":53,"value":317},{"type":48,"tag":200,"props":4183,"children":4184},{"style":213},[4185],{"type":53,"value":216},{"type":48,"tag":200,"props":4187,"children":4188},{"style":324},[4189],{"type":53,"value":4190}," storeName",{"type":48,"tag":200,"props":4192,"children":4193},{"style":213},[4194],{"type":53,"value":317},{"type":48,"tag":200,"props":4196,"children":4197},{"style":270},[4198],{"type":53,"value":1992},{"type":48,"tag":200,"props":4200,"children":4201},{"style":213},[4202],{"type":53,"value":341},{"type":48,"tag":200,"props":4204,"children":4205},{"style":324},[4206],{"type":53,"value":1948},{"type":48,"tag":200,"props":4208,"children":4209},{"style":213},[4210],{"type":53,"value":317},{"type":48,"tag":200,"props":4212,"children":4213},{"style":270},[4214],{"type":53,"value":1957},{"type":48,"tag":200,"props":4216,"children":4217},{"style":213},[4218],{"type":53,"value":341},{"type":48,"tag":200,"props":4220,"children":4221},{"style":324},[4222],{"type":53,"value":1966},{"type":48,"tag":200,"props":4224,"children":4225},{"style":213},[4226],{"type":53,"value":317},{"type":48,"tag":200,"props":4228,"children":4229},{"style":270},[4230],{"type":53,"value":336},{"type":48,"tag":200,"props":4232,"children":4233},{"style":213},[4234],{"type":53,"value":359},{"type":48,"tag":200,"props":4236,"children":4237},{"class":202,"line":286},[4238,4242,4247,4251,4255,4259,4263,4267,4271,4275,4279,4283,4287,4291,4295,4299,4303],{"type":48,"tag":200,"props":4239,"children":4240},{"style":213},[4241],{"type":53,"value":302},{"type":48,"tag":200,"props":4243,"children":4244},{"style":240},[4245],{"type":53,"value":4246},"action-dispatched",{"type":48,"tag":200,"props":4248,"children":4249},{"style":213},[4250],{"type":53,"value":312},{"type":48,"tag":200,"props":4252,"children":4253},{"style":213},[4254],{"type":53,"value":317},{"type":48,"tag":200,"props":4256,"children":4257},{"style":213},[4258],{"type":53,"value":216},{"type":48,"tag":200,"props":4260,"children":4261},{"style":324},[4262],{"type":53,"value":4190},{"type":48,"tag":200,"props":4264,"children":4265},{"style":213},[4266],{"type":53,"value":317},{"type":48,"tag":200,"props":4268,"children":4269},{"style":270},[4270],{"type":53,"value":1992},{"type":48,"tag":200,"props":4272,"children":4273},{"style":213},[4274],{"type":53,"value":341},{"type":48,"tag":200,"props":4276,"children":4277},{"style":324},[4278],{"type":53,"value":2422},{"type":48,"tag":200,"props":4280,"children":4281},{"style":213},[4282],{"type":53,"value":317},{"type":48,"tag":200,"props":4284,"children":4285},{"style":270},[4286],{"type":53,"value":1992},{"type":48,"tag":200,"props":4288,"children":4289},{"style":213},[4290],{"type":53,"value":341},{"type":48,"tag":200,"props":4292,"children":4293},{"style":324},[4294],{"type":53,"value":2370},{"type":48,"tag":200,"props":4296,"children":4297},{"style":213},[4298],{"type":53,"value":317},{"type":48,"tag":200,"props":4300,"children":4301},{"style":270},[4302],{"type":53,"value":1957},{"type":48,"tag":200,"props":4304,"children":4305},{"style":213},[4306],{"type":53,"value":359},{"type":48,"tag":200,"props":4308,"children":4309},{"class":202,"line":296},[4310,4314,4319,4323,4327,4331,4335,4339,4343,4347,4352,4356,4360,4364,4369,4374,4378],{"type":48,"tag":200,"props":4311,"children":4312},{"style":213},[4313],{"type":53,"value":302},{"type":48,"tag":200,"props":4315,"children":4316},{"style":240},[4317],{"type":53,"value":4318},"error-caught",{"type":48,"tag":200,"props":4320,"children":4321},{"style":213},[4322],{"type":53,"value":312},{"type":48,"tag":200,"props":4324,"children":4325},{"style":213},[4326],{"type":53,"value":317},{"type":48,"tag":200,"props":4328,"children":4329},{"style":213},[4330],{"type":53,"value":216},{"type":48,"tag":200,"props":4332,"children":4333},{"style":324},[4334],{"type":53,"value":4190},{"type":48,"tag":200,"props":4336,"children":4337},{"style":213},[4338],{"type":53,"value":317},{"type":48,"tag":200,"props":4340,"children":4341},{"style":270},[4342],{"type":53,"value":1992},{"type":48,"tag":200,"props":4344,"children":4345},{"style":213},[4346],{"type":53,"value":341},{"type":48,"tag":200,"props":4348,"children":4349},{"style":324},[4350],{"type":53,"value":4351}," error",{"type":48,"tag":200,"props":4353,"children":4354},{"style":213},[4355],{"type":53,"value":317},{"type":48,"tag":200,"props":4357,"children":4358},{"style":270},[4359],{"type":53,"value":1992},{"type":48,"tag":200,"props":4361,"children":4362},{"style":213},[4363],{"type":53,"value":341},{"type":48,"tag":200,"props":4365,"children":4366},{"style":324},[4367],{"type":53,"value":4368}," stack",{"type":48,"tag":200,"props":4370,"children":4371},{"style":213},[4372],{"type":53,"value":4373},"?:",{"type":48,"tag":200,"props":4375,"children":4376},{"style":270},[4377],{"type":53,"value":1992},{"type":48,"tag":200,"props":4379,"children":4380},{"style":213},[4381],{"type":53,"value":359},{"type":48,"tag":200,"props":4383,"children":4384},{"class":202,"line":362},[4385],{"type":48,"tag":200,"props":4386,"children":4387},{"emptyLinePlaceholder":254},[4388],{"type":53,"value":257},{"type":48,"tag":200,"props":4390,"children":4391},{"class":202,"line":371},[4392],{"type":48,"tag":200,"props":4393,"children":4394},{"style":290},[4395],{"type":53,"value":4396}," \u002F\u002F Commands: panel -> app (describe what to do)\n",{"type":48,"tag":200,"props":4398,"children":4399},{"class":202,"line":379},[4400,4404,4409,4413,4417,4421,4425,4429,4433,4437,4441,4445,4449],{"type":48,"tag":200,"props":4401,"children":4402},{"style":213},[4403],{"type":53,"value":302},{"type":48,"tag":200,"props":4405,"children":4406},{"style":240},[4407],{"type":53,"value":4408},"set-state",{"type":48,"tag":200,"props":4410,"children":4411},{"style":213},[4412],{"type":53,"value":312},{"type":48,"tag":200,"props":4414,"children":4415},{"style":213},[4416],{"type":53,"value":317},{"type":48,"tag":200,"props":4418,"children":4419},{"style":213},[4420],{"type":53,"value":216},{"type":48,"tag":200,"props":4422,"children":4423},{"style":324},[4424],{"type":53,"value":4190},{"type":48,"tag":200,"props":4426,"children":4427},{"style":213},[4428],{"type":53,"value":317},{"type":48,"tag":200,"props":4430,"children":4431},{"style":270},[4432],{"type":53,"value":1992},{"type":48,"tag":200,"props":4434,"children":4435},{"style":213},[4436],{"type":53,"value":341},{"type":48,"tag":200,"props":4438,"children":4439},{"style":324},[4440],{"type":53,"value":1948},{"type":48,"tag":200,"props":4442,"children":4443},{"style":213},[4444],{"type":53,"value":317},{"type":48,"tag":200,"props":4446,"children":4447},{"style":270},[4448],{"type":53,"value":1957},{"type":48,"tag":200,"props":4450,"children":4451},{"style":213},[4452],{"type":53,"value":359},{"type":48,"tag":200,"props":4454,"children":4455},{"class":202,"line":421},[4456,4460,4465,4469,4473,4477,4481,4485,4489,4493,4497,4501,4505,4509,4513,4517,4521],{"type":48,"tag":200,"props":4457,"children":4458},{"style":213},[4459],{"type":53,"value":302},{"type":48,"tag":200,"props":4461,"children":4462},{"style":240},[4463],{"type":53,"value":4464},"dispatch-action",{"type":48,"tag":200,"props":4466,"children":4467},{"style":213},[4468],{"type":53,"value":312},{"type":48,"tag":200,"props":4470,"children":4471},{"style":213},[4472],{"type":53,"value":317},{"type":48,"tag":200,"props":4474,"children":4475},{"style":213},[4476],{"type":53,"value":216},{"type":48,"tag":200,"props":4478,"children":4479},{"style":324},[4480],{"type":53,"value":4190},{"type":48,"tag":200,"props":4482,"children":4483},{"style":213},[4484],{"type":53,"value":317},{"type":48,"tag":200,"props":4486,"children":4487},{"style":270},[4488],{"type":53,"value":1992},{"type":48,"tag":200,"props":4490,"children":4491},{"style":213},[4492],{"type":53,"value":341},{"type":48,"tag":200,"props":4494,"children":4495},{"style":324},[4496],{"type":53,"value":2422},{"type":48,"tag":200,"props":4498,"children":4499},{"style":213},[4500],{"type":53,"value":317},{"type":48,"tag":200,"props":4502,"children":4503},{"style":270},[4504],{"type":53,"value":1992},{"type":48,"tag":200,"props":4506,"children":4507},{"style":213},[4508],{"type":53,"value":341},{"type":48,"tag":200,"props":4510,"children":4511},{"style":324},[4512],{"type":53,"value":2370},{"type":48,"tag":200,"props":4514,"children":4515},{"style":213},[4516],{"type":53,"value":317},{"type":48,"tag":200,"props":4518,"children":4519},{"style":270},[4520],{"type":53,"value":1957},{"type":48,"tag":200,"props":4522,"children":4523},{"style":213},[4524],{"type":53,"value":359},{"type":48,"tag":200,"props":4526,"children":4527},{"class":202,"line":439},[4528,4532,4536],{"type":48,"tag":200,"props":4529,"children":4530},{"style":324},[4531],{"type":53,"value":1141},{"type":48,"tag":200,"props":4533,"children":4534},{"style":213},[4535],{"type":53,"value":317},{"type":48,"tag":200,"props":4537,"children":4538},{"style":270},[4539],{"type":53,"value":1150},{"type":48,"tag":200,"props":4541,"children":4542},{"class":202,"line":458},[4543,4547,4551,4555,4559,4563,4567],{"type":48,"tag":200,"props":4544,"children":4545},{"style":324},[4546],{"type":53,"value":2012},{"type":48,"tag":200,"props":4548,"children":4549},{"style":213},[4550],{"type":53,"value":317},{"type":48,"tag":200,"props":4552,"children":4553},{"style":213},[4554],{"type":53,"value":216},{"type":48,"tag":200,"props":4556,"children":4557},{"style":324},[4558],{"type":53,"value":1948},{"type":48,"tag":200,"props":4560,"children":4561},{"style":213},[4562],{"type":53,"value":317},{"type":48,"tag":200,"props":4564,"children":4565},{"style":270},[4566],{"type":53,"value":1957},{"type":48,"tag":200,"props":4568,"children":4569},{"style":213},[4570],{"type":53,"value":359},{"type":48,"tag":200,"props":4572,"children":4573},{"class":202,"line":489},[4574],{"type":48,"tag":200,"props":4575,"children":4576},{"style":213},[4577],{"type":53,"value":368},{"type":48,"tag":59,"props":4579,"children":4580},{},[4581],{"type":53,"value":4582},"Naming convention:",{"type":48,"tag":4584,"props":4585,"children":4586},"ul",{},[4587,4622],{"type":48,"tag":4588,"props":4589,"children":4590},"li",{},[4591,4596,4598,4603,4605,4610,4611,4616,4617],{"type":48,"tag":63,"props":4592,"children":4593},{},[4594],{"type":53,"value":4595},"Observation events",{"type":53,"value":4597}," describe what happened: ",{"type":48,"tag":71,"props":4599,"children":4601},{"className":4600},[],[4602],{"type":53,"value":307},{"type":53,"value":4604},", ",{"type":48,"tag":71,"props":4606,"children":4608},{"className":4607},[],[4609],{"type":53,"value":4246},{"type":53,"value":4604},{"type":48,"tag":71,"props":4612,"children":4614},{"className":4613},[],[4615],{"type":53,"value":4318},{"type":53,"value":4604},{"type":48,"tag":71,"props":4618,"children":4620},{"className":4619},[],[4621],{"type":53,"value":2462},{"type":48,"tag":4588,"props":4623,"children":4624},{},[4625,4630,4632,4637,4638,4643,4644,4649,4650],{"type":48,"tag":63,"props":4626,"children":4627},{},[4628],{"type":53,"value":4629},"Command events",{"type":53,"value":4631}," describe what to do: ",{"type":48,"tag":71,"props":4633,"children":4635},{"className":4634},[],[4636],{"type":53,"value":4408},{"type":53,"value":4604},{"type":48,"tag":71,"props":4639,"children":4641},{"className":4640},[],[4642],{"type":53,"value":4464},{"type":53,"value":4604},{"type":48,"tag":71,"props":4645,"children":4647},{"className":4646},[],[4648],{"type":53,"value":1302},{"type":53,"value":4604},{"type":48,"tag":71,"props":4651,"children":4653},{"className":4652},[],[4654],{"type":53,"value":2629},{"type":48,"tag":59,"props":4656,"children":4657},{},[4658,4660,4665],{"type":53,"value":4659},"This distinction is purely a convention in your event map keys. The ",{"type":48,"tag":71,"props":4661,"children":4663},{"className":4662},[],[4664],{"type":53,"value":83},{"type":53,"value":4666}," API is the same for both. But maintaining it makes your event map self-documenting and prevents confusion about which side emits vs listens.",{"type":48,"tag":59,"props":4668,"children":4669},{},[4670],{"type":48,"tag":63,"props":4671,"children":4672},{},[4673],{"type":53,"value":4674},"Full bidirectional wiring with one client:",{"type":48,"tag":153,"props":4676,"children":4678},{"className":192,"code":4677,"language":194,"meta":161,"style":161},"import { EventClient } from '@tanstack\u002Fdevtools-event-client'\n\ntype StoreInspectorEvents = {\n 'state-update': { storeName: string; state: unknown; timestamp: number }\n 'set-state': { storeName: string; state: unknown }\n reset: void\n}\n\nclass StoreInspectorClient extends EventClient\u003CStoreInspectorEvents> {\n constructor() {\n super({\n pluginId: 'store-inspector',\n enabled: process.env.NODE_ENV !== 'production',\n })\n }\n}\n\nexport const storeInspector = new StoreInspectorClient()\n",[4679],{"type":48,"tag":71,"props":4680,"children":4681},{"__ignoreMap":161},[4682,4717,4724,4743,4814,4869,4884,4891,4898,4935,4950,4965,4993,5044,5055,5062,5069,5076],{"type":48,"tag":200,"props":4683,"children":4684},{"class":202,"line":203},[4685,4689,4693,4697,4701,4705,4709,4713],{"type":48,"tag":200,"props":4686,"children":4687},{"style":207},[4688],{"type":53,"value":210},{"type":48,"tag":200,"props":4690,"children":4691},{"style":213},[4692],{"type":53,"value":216},{"type":48,"tag":200,"props":4694,"children":4695},{"style":219},[4696],{"type":53,"value":222},{"type":48,"tag":200,"props":4698,"children":4699},{"style":213},[4700],{"type":53,"value":227},{"type":48,"tag":200,"props":4702,"children":4703},{"style":207},[4704],{"type":53,"value":232},{"type":48,"tag":200,"props":4706,"children":4707},{"style":213},[4708],{"type":53,"value":237},{"type":48,"tag":200,"props":4710,"children":4711},{"style":240},[4712],{"type":53,"value":38},{"type":48,"tag":200,"props":4714,"children":4715},{"style":213},[4716],{"type":53,"value":247},{"type":48,"tag":200,"props":4718,"children":4719},{"class":202,"line":250},[4720],{"type":48,"tag":200,"props":4721,"children":4722},{"emptyLinePlaceholder":254},[4723],{"type":53,"value":257},{"type":48,"tag":200,"props":4725,"children":4726},{"class":202,"line":260},[4727,4731,4735,4739],{"type":48,"tag":200,"props":4728,"children":4729},{"style":264},[4730],{"type":53,"value":267},{"type":48,"tag":200,"props":4732,"children":4733},{"style":270},[4734],{"type":53,"value":4146},{"type":48,"tag":200,"props":4736,"children":4737},{"style":213},[4738],{"type":53,"value":278},{"type":48,"tag":200,"props":4740,"children":4741},{"style":213},[4742],{"type":53,"value":283},{"type":48,"tag":200,"props":4744,"children":4745},{"class":202,"line":286},[4746,4750,4754,4758,4762,4766,4770,4774,4778,4782,4786,4790,4794,4798,4802,4806,4810],{"type":48,"tag":200,"props":4747,"children":4748},{"style":213},[4749],{"type":53,"value":302},{"type":48,"tag":200,"props":4751,"children":4752},{"style":240},[4753],{"type":53,"value":307},{"type":48,"tag":200,"props":4755,"children":4756},{"style":213},[4757],{"type":53,"value":312},{"type":48,"tag":200,"props":4759,"children":4760},{"style":213},[4761],{"type":53,"value":317},{"type":48,"tag":200,"props":4763,"children":4764},{"style":213},[4765],{"type":53,"value":216},{"type":48,"tag":200,"props":4767,"children":4768},{"style":324},[4769],{"type":53,"value":4190},{"type":48,"tag":200,"props":4771,"children":4772},{"style":213},[4773],{"type":53,"value":317},{"type":48,"tag":200,"props":4775,"children":4776},{"style":270},[4777],{"type":53,"value":1992},{"type":48,"tag":200,"props":4779,"children":4780},{"style":213},[4781],{"type":53,"value":341},{"type":48,"tag":200,"props":4783,"children":4784},{"style":324},[4785],{"type":53,"value":1948},{"type":48,"tag":200,"props":4787,"children":4788},{"style":213},[4789],{"type":53,"value":317},{"type":48,"tag":200,"props":4791,"children":4792},{"style":270},[4793],{"type":53,"value":1957},{"type":48,"tag":200,"props":4795,"children":4796},{"style":213},[4797],{"type":53,"value":341},{"type":48,"tag":200,"props":4799,"children":4800},{"style":324},[4801],{"type":53,"value":1966},{"type":48,"tag":200,"props":4803,"children":4804},{"style":213},[4805],{"type":53,"value":317},{"type":48,"tag":200,"props":4807,"children":4808},{"style":270},[4809],{"type":53,"value":336},{"type":48,"tag":200,"props":4811,"children":4812},{"style":213},[4813],{"type":53,"value":359},{"type":48,"tag":200,"props":4815,"children":4816},{"class":202,"line":296},[4817,4821,4825,4829,4833,4837,4841,4845,4849,4853,4857,4861,4865],{"type":48,"tag":200,"props":4818,"children":4819},{"style":213},[4820],{"type":53,"value":302},{"type":48,"tag":200,"props":4822,"children":4823},{"style":240},[4824],{"type":53,"value":4408},{"type":48,"tag":200,"props":4826,"children":4827},{"style":213},[4828],{"type":53,"value":312},{"type":48,"tag":200,"props":4830,"children":4831},{"style":213},[4832],{"type":53,"value":317},{"type":48,"tag":200,"props":4834,"children":4835},{"style":213},[4836],{"type":53,"value":216},{"type":48,"tag":200,"props":4838,"children":4839},{"style":324},[4840],{"type":53,"value":4190},{"type":48,"tag":200,"props":4842,"children":4843},{"style":213},[4844],{"type":53,"value":317},{"type":48,"tag":200,"props":4846,"children":4847},{"style":270},[4848],{"type":53,"value":1992},{"type":48,"tag":200,"props":4850,"children":4851},{"style":213},[4852],{"type":53,"value":341},{"type":48,"tag":200,"props":4854,"children":4855},{"style":324},[4856],{"type":53,"value":1948},{"type":48,"tag":200,"props":4858,"children":4859},{"style":213},[4860],{"type":53,"value":317},{"type":48,"tag":200,"props":4862,"children":4863},{"style":270},[4864],{"type":53,"value":1957},{"type":48,"tag":200,"props":4866,"children":4867},{"style":213},[4868],{"type":53,"value":359},{"type":48,"tag":200,"props":4870,"children":4871},{"class":202,"line":362},[4872,4876,4880],{"type":48,"tag":200,"props":4873,"children":4874},{"style":324},[4875],{"type":53,"value":1141},{"type":48,"tag":200,"props":4877,"children":4878},{"style":213},[4879],{"type":53,"value":317},{"type":48,"tag":200,"props":4881,"children":4882},{"style":270},[4883],{"type":53,"value":1150},{"type":48,"tag":200,"props":4885,"children":4886},{"class":202,"line":371},[4887],{"type":48,"tag":200,"props":4888,"children":4889},{"style":213},[4890],{"type":53,"value":368},{"type":48,"tag":200,"props":4892,"children":4893},{"class":202,"line":379},[4894],{"type":48,"tag":200,"props":4895,"children":4896},{"emptyLinePlaceholder":254},[4897],{"type":53,"value":257},{"type":48,"tag":200,"props":4899,"children":4900},{"class":202,"line":421},[4901,4905,4910,4914,4918,4922,4927,4931],{"type":48,"tag":200,"props":4902,"children":4903},{"style":264},[4904],{"type":53,"value":385},{"type":48,"tag":200,"props":4906,"children":4907},{"style":270},[4908],{"type":53,"value":4909}," StoreInspectorClient",{"type":48,"tag":200,"props":4911,"children":4912},{"style":264},[4913],{"type":53,"value":395},{"type":48,"tag":200,"props":4915,"children":4916},{"style":270},[4917],{"type":53,"value":222},{"type":48,"tag":200,"props":4919,"children":4920},{"style":213},[4921],{"type":53,"value":404},{"type":48,"tag":200,"props":4923,"children":4924},{"style":270},[4925],{"type":53,"value":4926},"StoreInspectorEvents",{"type":48,"tag":200,"props":4928,"children":4929},{"style":213},[4930],{"type":53,"value":414},{"type":48,"tag":200,"props":4932,"children":4933},{"style":213},[4934],{"type":53,"value":283},{"type":48,"tag":200,"props":4936,"children":4937},{"class":202,"line":439},[4938,4942,4946],{"type":48,"tag":200,"props":4939,"children":4940},{"style":264},[4941],{"type":53,"value":427},{"type":48,"tag":200,"props":4943,"children":4944},{"style":213},[4945],{"type":53,"value":432},{"type":48,"tag":200,"props":4947,"children":4948},{"style":213},[4949],{"type":53,"value":283},{"type":48,"tag":200,"props":4951,"children":4952},{"class":202,"line":458},[4953,4957,4961],{"type":48,"tag":200,"props":4954,"children":4955},{"style":219},[4956],{"type":53,"value":445},{"type":48,"tag":200,"props":4958,"children":4959},{"style":324},[4960],{"type":53,"value":450},{"type":48,"tag":200,"props":4962,"children":4963},{"style":213},[4964],{"type":53,"value":455},{"type":48,"tag":200,"props":4966,"children":4967},{"class":202,"line":489},[4968,4972,4976,4980,4985,4989],{"type":48,"tag":200,"props":4969,"children":4970},{"style":324},[4971],{"type":53,"value":464},{"type":48,"tag":200,"props":4973,"children":4974},{"style":213},[4975],{"type":53,"value":317},{"type":48,"tag":200,"props":4977,"children":4978},{"style":213},[4979],{"type":53,"value":237},{"type":48,"tag":200,"props":4981,"children":4982},{"style":240},[4983],{"type":53,"value":4984},"store-inspector",{"type":48,"tag":200,"props":4986,"children":4987},{"style":213},[4988],{"type":53,"value":312},{"type":48,"tag":200,"props":4990,"children":4991},{"style":213},[4992],{"type":53,"value":486},{"type":48,"tag":200,"props":4994,"children":4995},{"class":202,"line":548},[4996,5000,5004,5008,5012,5016,5020,5024,5028,5032,5036,5040],{"type":48,"tag":200,"props":4997,"children":4998},{"style":324},[4999],{"type":53,"value":495},{"type":48,"tag":200,"props":5001,"children":5002},{"style":213},[5003],{"type":53,"value":317},{"type":48,"tag":200,"props":5005,"children":5006},{"style":219},[5007],{"type":53,"value":504},{"type":48,"tag":200,"props":5009,"children":5010},{"style":213},[5011],{"type":53,"value":509},{"type":48,"tag":200,"props":5013,"children":5014},{"style":219},[5015],{"type":53,"value":514},{"type":48,"tag":200,"props":5017,"children":5018},{"style":213},[5019],{"type":53,"value":509},{"type":48,"tag":200,"props":5021,"children":5022},{"style":219},[5023],{"type":53,"value":523},{"type":48,"tag":200,"props":5025,"children":5026},{"style":213},[5027],{"type":53,"value":528},{"type":48,"tag":200,"props":5029,"children":5030},{"style":213},[5031],{"type":53,"value":237},{"type":48,"tag":200,"props":5033,"children":5034},{"style":240},[5035],{"type":53,"value":537},{"type":48,"tag":200,"props":5037,"children":5038},{"style":213},[5039],{"type":53,"value":312},{"type":48,"tag":200,"props":5041,"children":5042},{"style":213},[5043],{"type":53,"value":486},{"type":48,"tag":200,"props":5045,"children":5046},{"class":202,"line":562},[5047,5051],{"type":48,"tag":200,"props":5048,"children":5049},{"style":213},[5050],{"type":53,"value":554},{"type":48,"tag":200,"props":5052,"children":5053},{"style":324},[5054],{"type":53,"value":559},{"type":48,"tag":200,"props":5056,"children":5057},{"class":202,"line":571},[5058],{"type":48,"tag":200,"props":5059,"children":5060},{"style":213},[5061],{"type":53,"value":568},{"type":48,"tag":200,"props":5063,"children":5064},{"class":202,"line":579},[5065],{"type":48,"tag":200,"props":5066,"children":5067},{"style":213},[5068],{"type":53,"value":368},{"type":48,"tag":200,"props":5070,"children":5071},{"class":202,"line":587},[5072],{"type":48,"tag":200,"props":5073,"children":5074},{"emptyLinePlaceholder":254},[5075],{"type":53,"value":257},{"type":48,"tag":200,"props":5077,"children":5078},{"class":202,"line":1860},[5079,5083,5087,5092,5096,5100,5104],{"type":48,"tag":200,"props":5080,"children":5081},{"style":207},[5082],{"type":53,"value":593},{"type":48,"tag":200,"props":5084,"children":5085},{"style":264},[5086],{"type":53,"value":598},{"type":48,"tag":200,"props":5088,"children":5089},{"style":219},[5090],{"type":53,"value":5091}," storeInspector ",{"type":48,"tag":200,"props":5093,"children":5094},{"style":213},[5095],{"type":53,"value":608},{"type":48,"tag":200,"props":5097,"children":5098},{"style":213},[5099],{"type":53,"value":613},{"type":48,"tag":200,"props":5101,"children":5102},{"style":616},[5103],{"type":53,"value":4909},{"type":48,"tag":200,"props":5105,"children":5106},{"style":219},[5107],{"type":53,"value":623},{"type":48,"tag":59,"props":5109,"children":5110},{},[5111],{"type":48,"tag":63,"props":5112,"children":5113},{},[5114],{"type":53,"value":5115},"App side:",{"type":48,"tag":153,"props":5117,"children":5119},{"className":192,"code":5118,"language":194,"meta":161,"style":161},"import { storeInspector } from '.\u002Fstore-inspector-client'\n\n\u002F\u002F Observation: emit state changes\nfunction updateStore(storeName: string, newState: unknown) {\n stores[storeName] = newState\n storeInspector.emit('state-update', {\n storeName,\n state: structuredClone(newState),\n timestamp: Date.now(),\n })\n}\n\n\u002F\u002F Command handlers: listen for panel commands\nstoreInspector.on('set-state', (event) => {\n const { storeName, state } = event.payload\n stores[storeName] = state\n storeInspector.emit('state-update', {\n storeName,\n state: structuredClone(state),\n timestamp: Date.now(),\n })\n})\n\nstoreInspector.on('reset', () => {\n for (const storeName of Object.keys(stores)) {\n stores[storeName] = initialStates[storeName]\n storeInspector.emit('state-update', {\n storeName,\n state: structuredClone(initialStates[storeName]),\n timestamp: Date.now(),\n })\n }\n})\n",[5120],{"type":48,"tag":71,"props":5121,"children":5122},{"__ignoreMap":161},[5123,5160,5167,5175,5229,5259,5299,5311,5343,5374,5385,5392,5399,5407,5463,5507,5535,5574,5585,5616,5647,5658,5669,5676,5723,5780,5822,5862,5874,5915,5947,5958,5965],{"type":48,"tag":200,"props":5124,"children":5125},{"class":202,"line":203},[5126,5130,5134,5139,5143,5147,5151,5156],{"type":48,"tag":200,"props":5127,"children":5128},{"style":207},[5129],{"type":53,"value":210},{"type":48,"tag":200,"props":5131,"children":5132},{"style":213},[5133],{"type":53,"value":216},{"type":48,"tag":200,"props":5135,"children":5136},{"style":219},[5137],{"type":53,"value":5138}," storeInspector",{"type":48,"tag":200,"props":5140,"children":5141},{"style":213},[5142],{"type":53,"value":227},{"type":48,"tag":200,"props":5144,"children":5145},{"style":207},[5146],{"type":53,"value":232},{"type":48,"tag":200,"props":5148,"children":5149},{"style":213},[5150],{"type":53,"value":237},{"type":48,"tag":200,"props":5152,"children":5153},{"style":240},[5154],{"type":53,"value":5155},".\u002Fstore-inspector-client",{"type":48,"tag":200,"props":5157,"children":5158},{"style":213},[5159],{"type":53,"value":247},{"type":48,"tag":200,"props":5161,"children":5162},{"class":202,"line":250},[5163],{"type":48,"tag":200,"props":5164,"children":5165},{"emptyLinePlaceholder":254},[5166],{"type":53,"value":257},{"type":48,"tag":200,"props":5168,"children":5169},{"class":202,"line":260},[5170],{"type":48,"tag":200,"props":5171,"children":5172},{"style":290},[5173],{"type":53,"value":5174},"\u002F\u002F Observation: emit state changes\n",{"type":48,"tag":200,"props":5176,"children":5177},{"class":202,"line":286},[5178,5182,5187,5191,5196,5200,5204,5208,5213,5217,5221,5225],{"type":48,"tag":200,"props":5179,"children":5180},{"style":264},[5181],{"type":53,"value":690},{"type":48,"tag":200,"props":5183,"children":5184},{"style":616},[5185],{"type":53,"value":5186}," updateStore",{"type":48,"tag":200,"props":5188,"children":5189},{"style":213},[5190],{"type":53,"value":450},{"type":48,"tag":200,"props":5192,"children":5193},{"style":944},[5194],{"type":53,"value":5195},"storeName",{"type":48,"tag":200,"props":5197,"children":5198},{"style":213},[5199],{"type":53,"value":317},{"type":48,"tag":200,"props":5201,"children":5202},{"style":270},[5203],{"type":53,"value":1992},{"type":48,"tag":200,"props":5205,"children":5206},{"style":213},[5207],{"type":53,"value":760},{"type":48,"tag":200,"props":5209,"children":5210},{"style":944},[5211],{"type":53,"value":5212}," newState",{"type":48,"tag":200,"props":5214,"children":5215},{"style":213},[5216],{"type":53,"value":317},{"type":48,"tag":200,"props":5218,"children":5219},{"style":270},[5220],{"type":53,"value":1957},{"type":48,"tag":200,"props":5222,"children":5223},{"style":213},[5224],{"type":53,"value":952},{"type":48,"tag":200,"props":5226,"children":5227},{"style":213},[5228],{"type":53,"value":283},{"type":48,"tag":200,"props":5230,"children":5231},{"class":202,"line":296},[5232,5237,5241,5245,5250,5254],{"type":48,"tag":200,"props":5233,"children":5234},{"style":219},[5235],{"type":53,"value":5236}," stores",{"type":48,"tag":200,"props":5238,"children":5239},{"style":324},[5240],{"type":53,"value":3333},{"type":48,"tag":200,"props":5242,"children":5243},{"style":219},[5244],{"type":53,"value":5195},{"type":48,"tag":200,"props":5246,"children":5247},{"style":324},[5248],{"type":53,"value":5249},"] ",{"type":48,"tag":200,"props":5251,"children":5252},{"style":213},[5253],{"type":53,"value":608},{"type":48,"tag":200,"props":5255,"children":5256},{"style":219},[5257],{"type":53,"value":5258}," newState\n",{"type":48,"tag":200,"props":5260,"children":5261},{"class":202,"line":362},[5262,5267,5271,5275,5279,5283,5287,5291,5295],{"type":48,"tag":200,"props":5263,"children":5264},{"style":219},[5265],{"type":53,"value":5266}," storeInspector",{"type":48,"tag":200,"props":5268,"children":5269},{"style":213},[5270],{"type":53,"value":509},{"type":48,"tag":200,"props":5272,"children":5273},{"style":616},[5274],{"type":53,"value":739},{"type":48,"tag":200,"props":5276,"children":5277},{"style":324},[5278],{"type":53,"value":450},{"type":48,"tag":200,"props":5280,"children":5281},{"style":213},[5282],{"type":53,"value":312},{"type":48,"tag":200,"props":5284,"children":5285},{"style":240},[5286],{"type":53,"value":307},{"type":48,"tag":200,"props":5288,"children":5289},{"style":213},[5290],{"type":53,"value":312},{"type":48,"tag":200,"props":5292,"children":5293},{"style":213},[5294],{"type":53,"value":760},{"type":48,"tag":200,"props":5296,"children":5297},{"style":213},[5298],{"type":53,"value":283},{"type":48,"tag":200,"props":5300,"children":5301},{"class":202,"line":371},[5302,5307],{"type":48,"tag":200,"props":5303,"children":5304},{"style":219},[5305],{"type":53,"value":5306}," storeName",{"type":48,"tag":200,"props":5308,"children":5309},{"style":213},[5310],{"type":53,"value":486},{"type":48,"tag":200,"props":5312,"children":5313},{"class":202,"line":379},[5314,5318,5322,5326,5330,5335,5339],{"type":48,"tag":200,"props":5315,"children":5316},{"style":324},[5317],{"type":53,"value":2482},{"type":48,"tag":200,"props":5319,"children":5320},{"style":213},[5321],{"type":53,"value":317},{"type":48,"tag":200,"props":5323,"children":5324},{"style":616},[5325],{"type":53,"value":2491},{"type":48,"tag":200,"props":5327,"children":5328},{"style":324},[5329],{"type":53,"value":450},{"type":48,"tag":200,"props":5331,"children":5332},{"style":219},[5333],{"type":53,"value":5334},"newState",{"type":48,"tag":200,"props":5336,"children":5337},{"style":324},[5338],{"type":53,"value":952},{"type":48,"tag":200,"props":5340,"children":5341},{"style":213},[5342],{"type":53,"value":486},{"type":48,"tag":200,"props":5344,"children":5345},{"class":202,"line":421},[5346,5350,5354,5358,5362,5366,5370],{"type":48,"tag":200,"props":5347,"children":5348},{"style":324},[5349],{"type":53,"value":2515},{"type":48,"tag":200,"props":5351,"children":5352},{"style":213},[5353],{"type":53,"value":317},{"type":48,"tag":200,"props":5355,"children":5356},{"style":219},[5357],{"type":53,"value":793},{"type":48,"tag":200,"props":5359,"children":5360},{"style":213},[5361],{"type":53,"value":509},{"type":48,"tag":200,"props":5363,"children":5364},{"style":616},[5365],{"type":53,"value":802},{"type":48,"tag":200,"props":5367,"children":5368},{"style":324},[5369],{"type":53,"value":432},{"type":48,"tag":200,"props":5371,"children":5372},{"style":213},[5373],{"type":53,"value":486},{"type":48,"tag":200,"props":5375,"children":5376},{"class":202,"line":439},[5377,5381],{"type":48,"tag":200,"props":5378,"children":5379},{"style":213},[5380],{"type":53,"value":818},{"type":48,"tag":200,"props":5382,"children":5383},{"style":324},[5384],{"type":53,"value":559},{"type":48,"tag":200,"props":5386,"children":5387},{"class":202,"line":458},[5388],{"type":48,"tag":200,"props":5389,"children":5390},{"style":213},[5391],{"type":53,"value":368},{"type":48,"tag":200,"props":5393,"children":5394},{"class":202,"line":489},[5395],{"type":48,"tag":200,"props":5396,"children":5397},{"emptyLinePlaceholder":254},[5398],{"type":53,"value":257},{"type":48,"tag":200,"props":5400,"children":5401},{"class":202,"line":548},[5402],{"type":48,"tag":200,"props":5403,"children":5404},{"style":290},[5405],{"type":53,"value":5406},"\u002F\u002F Command handlers: listen for panel commands\n",{"type":48,"tag":200,"props":5408,"children":5409},{"class":202,"line":562},[5410,5415,5419,5423,5427,5431,5435,5439,5443,5447,5451,5455,5459],{"type":48,"tag":200,"props":5411,"children":5412},{"style":219},[5413],{"type":53,"value":5414},"storeInspector",{"type":48,"tag":200,"props":5416,"children":5417},{"style":213},[5418],{"type":53,"value":509},{"type":48,"tag":200,"props":5420,"children":5421},{"style":616},[5422],{"type":53,"value":916},{"type":48,"tag":200,"props":5424,"children":5425},{"style":219},[5426],{"type":53,"value":450},{"type":48,"tag":200,"props":5428,"children":5429},{"style":213},[5430],{"type":53,"value":312},{"type":48,"tag":200,"props":5432,"children":5433},{"style":240},[5434],{"type":53,"value":4408},{"type":48,"tag":200,"props":5436,"children":5437},{"style":213},[5438],{"type":53,"value":312},{"type":48,"tag":200,"props":5440,"children":5441},{"style":213},[5442],{"type":53,"value":760},{"type":48,"tag":200,"props":5444,"children":5445},{"style":213},[5446],{"type":53,"value":941},{"type":48,"tag":200,"props":5448,"children":5449},{"style":944},[5450],{"type":53,"value":947},{"type":48,"tag":200,"props":5452,"children":5453},{"style":213},[5454],{"type":53,"value":952},{"type":48,"tag":200,"props":5456,"children":5457},{"style":264},[5458],{"type":53,"value":957},{"type":48,"tag":200,"props":5460,"children":5461},{"style":213},[5462],{"type":53,"value":283},{"type":48,"tag":200,"props":5464,"children":5465},{"class":202,"line":571},[5466,5470,5474,5478,5482,5486,5490,5494,5498,5502],{"type":48,"tag":200,"props":5467,"children":5468},{"style":264},[5469],{"type":53,"value":2810},{"type":48,"tag":200,"props":5471,"children":5472},{"style":213},[5473],{"type":53,"value":216},{"type":48,"tag":200,"props":5475,"children":5476},{"style":219},[5477],{"type":53,"value":4190},{"type":48,"tag":200,"props":5479,"children":5480},{"style":213},[5481],{"type":53,"value":760},{"type":48,"tag":200,"props":5483,"children":5484},{"style":219},[5485],{"type":53,"value":1948},{"type":48,"tag":200,"props":5487,"children":5488},{"style":213},[5489],{"type":53,"value":227},{"type":48,"tag":200,"props":5491,"children":5492},{"style":213},[5493],{"type":53,"value":278},{"type":48,"tag":200,"props":5495,"children":5496},{"style":219},[5497],{"type":53,"value":1748},{"type":48,"tag":200,"props":5499,"children":5500},{"style":213},[5501],{"type":53,"value":509},{"type":48,"tag":200,"props":5503,"children":5504},{"style":219},[5505],{"type":53,"value":5506},"payload\n",{"type":48,"tag":200,"props":5508,"children":5509},{"class":202,"line":579},[5510,5514,5518,5522,5526,5530],{"type":48,"tag":200,"props":5511,"children":5512},{"style":219},[5513],{"type":53,"value":5236},{"type":48,"tag":200,"props":5515,"children":5516},{"style":324},[5517],{"type":53,"value":3333},{"type":48,"tag":200,"props":5519,"children":5520},{"style":219},[5521],{"type":53,"value":5195},{"type":48,"tag":200,"props":5523,"children":5524},{"style":324},[5525],{"type":53,"value":5249},{"type":48,"tag":200,"props":5527,"children":5528},{"style":213},[5529],{"type":53,"value":608},{"type":48,"tag":200,"props":5531,"children":5532},{"style":219},[5533],{"type":53,"value":5534}," state\n",{"type":48,"tag":200,"props":5536,"children":5537},{"class":202,"line":587},[5538,5542,5546,5550,5554,5558,5562,5566,5570],{"type":48,"tag":200,"props":5539,"children":5540},{"style":219},[5541],{"type":53,"value":5266},{"type":48,"tag":200,"props":5543,"children":5544},{"style":213},[5545],{"type":53,"value":509},{"type":48,"tag":200,"props":5547,"children":5548},{"style":616},[5549],{"type":53,"value":739},{"type":48,"tag":200,"props":5551,"children":5552},{"style":324},[5553],{"type":53,"value":450},{"type":48,"tag":200,"props":5555,"children":5556},{"style":213},[5557],{"type":53,"value":312},{"type":48,"tag":200,"props":5559,"children":5560},{"style":240},[5561],{"type":53,"value":307},{"type":48,"tag":200,"props":5563,"children":5564},{"style":213},[5565],{"type":53,"value":312},{"type":48,"tag":200,"props":5567,"children":5568},{"style":213},[5569],{"type":53,"value":760},{"type":48,"tag":200,"props":5571,"children":5572},{"style":213},[5573],{"type":53,"value":283},{"type":48,"tag":200,"props":5575,"children":5576},{"class":202,"line":1860},[5577,5581],{"type":48,"tag":200,"props":5578,"children":5579},{"style":219},[5580],{"type":53,"value":5306},{"type":48,"tag":200,"props":5582,"children":5583},{"style":213},[5584],{"type":53,"value":486},{"type":48,"tag":200,"props":5586,"children":5587},{"class":202,"line":3313},[5588,5592,5596,5600,5604,5608,5612],{"type":48,"tag":200,"props":5589,"children":5590},{"style":324},[5591],{"type":53,"value":2482},{"type":48,"tag":200,"props":5593,"children":5594},{"style":213},[5595],{"type":53,"value":317},{"type":48,"tag":200,"props":5597,"children":5598},{"style":616},[5599],{"type":53,"value":2491},{"type":48,"tag":200,"props":5601,"children":5602},{"style":324},[5603],{"type":53,"value":450},{"type":48,"tag":200,"props":5605,"children":5606},{"style":219},[5607],{"type":53,"value":2413},{"type":48,"tag":200,"props":5609,"children":5610},{"style":324},[5611],{"type":53,"value":952},{"type":48,"tag":200,"props":5613,"children":5614},{"style":213},[5615],{"type":53,"value":486},{"type":48,"tag":200,"props":5617,"children":5618},{"class":202,"line":3356},[5619,5623,5627,5631,5635,5639,5643],{"type":48,"tag":200,"props":5620,"children":5621},{"style":324},[5622],{"type":53,"value":2515},{"type":48,"tag":200,"props":5624,"children":5625},{"style":213},[5626],{"type":53,"value":317},{"type":48,"tag":200,"props":5628,"children":5629},{"style":219},[5630],{"type":53,"value":793},{"type":48,"tag":200,"props":5632,"children":5633},{"style":213},[5634],{"type":53,"value":509},{"type":48,"tag":200,"props":5636,"children":5637},{"style":616},[5638],{"type":53,"value":802},{"type":48,"tag":200,"props":5640,"children":5641},{"style":324},[5642],{"type":53,"value":432},{"type":48,"tag":200,"props":5644,"children":5645},{"style":213},[5646],{"type":53,"value":486},{"type":48,"tag":200,"props":5648,"children":5649},{"class":202,"line":3368},[5650,5654],{"type":48,"tag":200,"props":5651,"children":5652},{"style":213},[5653],{"type":53,"value":818},{"type":48,"tag":200,"props":5655,"children":5656},{"style":324},[5657],{"type":53,"value":559},{"type":48,"tag":200,"props":5659,"children":5660},{"class":202,"line":3376},[5661,5665],{"type":48,"tag":200,"props":5662,"children":5663},{"style":213},[5664],{"type":53,"value":1014},{"type":48,"tag":200,"props":5666,"children":5667},{"style":219},[5668],{"type":53,"value":559},{"type":48,"tag":200,"props":5670,"children":5671},{"class":202,"line":3384},[5672],{"type":48,"tag":200,"props":5673,"children":5674},{"emptyLinePlaceholder":254},[5675],{"type":53,"value":257},{"type":48,"tag":200,"props":5677,"children":5678},{"class":202,"line":3398},[5679,5683,5687,5691,5695,5699,5703,5707,5711,5715,5719],{"type":48,"tag":200,"props":5680,"children":5681},{"style":219},[5682],{"type":53,"value":5414},{"type":48,"tag":200,"props":5684,"children":5685},{"style":213},[5686],{"type":53,"value":509},{"type":48,"tag":200,"props":5688,"children":5689},{"style":616},[5690],{"type":53,"value":916},{"type":48,"tag":200,"props":5692,"children":5693},{"style":219},[5694],{"type":53,"value":450},{"type":48,"tag":200,"props":5696,"children":5697},{"style":213},[5698],{"type":53,"value":312},{"type":48,"tag":200,"props":5700,"children":5701},{"style":240},[5702],{"type":53,"value":1302},{"type":48,"tag":200,"props":5704,"children":5705},{"style":213},[5706],{"type":53,"value":312},{"type":48,"tag":200,"props":5708,"children":5709},{"style":213},[5710],{"type":53,"value":760},{"type":48,"tag":200,"props":5712,"children":5713},{"style":213},[5714],{"type":53,"value":1535},{"type":48,"tag":200,"props":5716,"children":5717},{"style":264},[5718],{"type":53,"value":957},{"type":48,"tag":200,"props":5720,"children":5721},{"style":213},[5722],{"type":53,"value":283},{"type":48,"tag":200,"props":5724,"children":5725},{"class":202,"line":3417},[5726,5731,5735,5739,5743,5748,5753,5757,5762,5766,5771,5776],{"type":48,"tag":200,"props":5727,"children":5728},{"style":207},[5729],{"type":53,"value":5730}," for",{"type":48,"tag":200,"props":5732,"children":5733},{"style":324},[5734],{"type":53,"value":941},{"type":48,"tag":200,"props":5736,"children":5737},{"style":264},[5738],{"type":53,"value":894},{"type":48,"tag":200,"props":5740,"children":5741},{"style":219},[5742],{"type":53,"value":4190},{"type":48,"tag":200,"props":5744,"children":5745},{"style":213},[5746],{"type":53,"value":5747}," of",{"type":48,"tag":200,"props":5749,"children":5750},{"style":219},[5751],{"type":53,"value":5752}," Object",{"type":48,"tag":200,"props":5754,"children":5755},{"style":213},[5756],{"type":53,"value":509},{"type":48,"tag":200,"props":5758,"children":5759},{"style":616},[5760],{"type":53,"value":5761},"keys",{"type":48,"tag":200,"props":5763,"children":5764},{"style":324},[5765],{"type":53,"value":450},{"type":48,"tag":200,"props":5767,"children":5768},{"style":219},[5769],{"type":53,"value":5770},"stores",{"type":48,"tag":200,"props":5772,"children":5773},{"style":324},[5774],{"type":53,"value":5775},")) ",{"type":48,"tag":200,"props":5777,"children":5778},{"style":213},[5779],{"type":53,"value":455},{"type":48,"tag":200,"props":5781,"children":5782},{"class":202,"line":3431},[5783,5788,5792,5796,5800,5804,5809,5813,5817],{"type":48,"tag":200,"props":5784,"children":5785},{"style":219},[5786],{"type":53,"value":5787}," stores",{"type":48,"tag":200,"props":5789,"children":5790},{"style":324},[5791],{"type":53,"value":3333},{"type":48,"tag":200,"props":5793,"children":5794},{"style":219},[5795],{"type":53,"value":5195},{"type":48,"tag":200,"props":5797,"children":5798},{"style":324},[5799],{"type":53,"value":5249},{"type":48,"tag":200,"props":5801,"children":5802},{"style":213},[5803],{"type":53,"value":608},{"type":48,"tag":200,"props":5805,"children":5806},{"style":219},[5807],{"type":53,"value":5808}," initialStates",{"type":48,"tag":200,"props":5810,"children":5811},{"style":324},[5812],{"type":53,"value":3333},{"type":48,"tag":200,"props":5814,"children":5815},{"style":219},[5816],{"type":53,"value":5195},{"type":48,"tag":200,"props":5818,"children":5819},{"style":324},[5820],{"type":53,"value":5821},"]\n",{"type":48,"tag":200,"props":5823,"children":5824},{"class":202,"line":3459},[5825,5830,5834,5838,5842,5846,5850,5854,5858],{"type":48,"tag":200,"props":5826,"children":5827},{"style":219},[5828],{"type":53,"value":5829}," storeInspector",{"type":48,"tag":200,"props":5831,"children":5832},{"style":213},[5833],{"type":53,"value":509},{"type":48,"tag":200,"props":5835,"children":5836},{"style":616},[5837],{"type":53,"value":739},{"type":48,"tag":200,"props":5839,"children":5840},{"style":324},[5841],{"type":53,"value":450},{"type":48,"tag":200,"props":5843,"children":5844},{"style":213},[5845],{"type":53,"value":312},{"type":48,"tag":200,"props":5847,"children":5848},{"style":240},[5849],{"type":53,"value":307},{"type":48,"tag":200,"props":5851,"children":5852},{"style":213},[5853],{"type":53,"value":312},{"type":48,"tag":200,"props":5855,"children":5856},{"style":213},[5857],{"type":53,"value":760},{"type":48,"tag":200,"props":5859,"children":5860},{"style":213},[5861],{"type":53,"value":283},{"type":48,"tag":200,"props":5863,"children":5864},{"class":202,"line":3481},[5865,5870],{"type":48,"tag":200,"props":5866,"children":5867},{"style":219},[5868],{"type":53,"value":5869}," storeName",{"type":48,"tag":200,"props":5871,"children":5872},{"style":213},[5873],{"type":53,"value":486},{"type":48,"tag":200,"props":5875,"children":5876},{"class":202,"line":3520},[5877,5881,5885,5889,5893,5898,5902,5906,5911],{"type":48,"tag":200,"props":5878,"children":5879},{"style":324},[5880],{"type":53,"value":3319},{"type":48,"tag":200,"props":5882,"children":5883},{"style":213},[5884],{"type":53,"value":317},{"type":48,"tag":200,"props":5886,"children":5887},{"style":616},[5888],{"type":53,"value":2491},{"type":48,"tag":200,"props":5890,"children":5891},{"style":324},[5892],{"type":53,"value":450},{"type":48,"tag":200,"props":5894,"children":5895},{"style":219},[5896],{"type":53,"value":5897},"initialStates",{"type":48,"tag":200,"props":5899,"children":5900},{"style":324},[5901],{"type":53,"value":3333},{"type":48,"tag":200,"props":5903,"children":5904},{"style":219},[5905],{"type":53,"value":5195},{"type":48,"tag":200,"props":5907,"children":5908},{"style":324},[5909],{"type":53,"value":5910},"])",{"type":48,"tag":200,"props":5912,"children":5913},{"style":213},[5914],{"type":53,"value":486},{"type":48,"tag":200,"props":5916,"children":5917},{"class":202,"line":3541},[5918,5923,5927,5931,5935,5939,5943],{"type":48,"tag":200,"props":5919,"children":5920},{"style":324},[5921],{"type":53,"value":5922}," timestamp",{"type":48,"tag":200,"props":5924,"children":5925},{"style":213},[5926],{"type":53,"value":317},{"type":48,"tag":200,"props":5928,"children":5929},{"style":219},[5930],{"type":53,"value":793},{"type":48,"tag":200,"props":5932,"children":5933},{"style":213},[5934],{"type":53,"value":509},{"type":48,"tag":200,"props":5936,"children":5937},{"style":616},[5938],{"type":53,"value":802},{"type":48,"tag":200,"props":5940,"children":5941},{"style":324},[5942],{"type":53,"value":432},{"type":48,"tag":200,"props":5944,"children":5945},{"style":213},[5946],{"type":53,"value":486},{"type":48,"tag":200,"props":5948,"children":5949},{"class":202,"line":3608},[5950,5954],{"type":48,"tag":200,"props":5951,"children":5952},{"style":213},[5953],{"type":53,"value":554},{"type":48,"tag":200,"props":5955,"children":5956},{"style":324},[5957],{"type":53,"value":559},{"type":48,"tag":200,"props":5959,"children":5960},{"class":202,"line":3617},[5961],{"type":48,"tag":200,"props":5962,"children":5963},{"style":213},[5964],{"type":53,"value":568},{"type":48,"tag":200,"props":5966,"children":5967},{"class":202,"line":3633},[5968,5972],{"type":48,"tag":200,"props":5969,"children":5970},{"style":213},[5971],{"type":53,"value":1014},{"type":48,"tag":200,"props":5973,"children":5974},{"style":219},[5975],{"type":53,"value":559},{"type":48,"tag":59,"props":5977,"children":5978},{},[5979],{"type":48,"tag":63,"props":5980,"children":5981},{},[5982],{"type":53,"value":5983},"Panel side:",{"type":48,"tag":153,"props":5985,"children":5987},{"className":192,"code":5986,"language":194,"meta":161,"style":161},"import { storeInspector } from '.\u002Fstore-inspector-client'\n\n\u002F\u002F Observation: listen for state changes\nstoreInspector.on('state-update', (event) => {\n renderStore(event.payload.storeName, event.payload.state)\n})\n\n\u002F\u002F Commands: emit on user action\nfunction handleEditState(storeName: string, newState: unknown) {\n storeInspector.emit('set-state', { storeName, state: newState })\n}\n\nfunction handleReset() {\n storeInspector.emit('reset', undefined)\n}\n",[5988],{"type":48,"tag":71,"props":5989,"children":5990},{"__ignoreMap":161},[5991,6026,6033,6041,6096,6156,6167,6174,6182,6234,6301,6308,6315,6335,6378],{"type":48,"tag":200,"props":5992,"children":5993},{"class":202,"line":203},[5994,5998,6002,6006,6010,6014,6018,6022],{"type":48,"tag":200,"props":5995,"children":5996},{"style":207},[5997],{"type":53,"value":210},{"type":48,"tag":200,"props":5999,"children":6000},{"style":213},[6001],{"type":53,"value":216},{"type":48,"tag":200,"props":6003,"children":6004},{"style":219},[6005],{"type":53,"value":5138},{"type":48,"tag":200,"props":6007,"children":6008},{"style":213},[6009],{"type":53,"value":227},{"type":48,"tag":200,"props":6011,"children":6012},{"style":207},[6013],{"type":53,"value":232},{"type":48,"tag":200,"props":6015,"children":6016},{"style":213},[6017],{"type":53,"value":237},{"type":48,"tag":200,"props":6019,"children":6020},{"style":240},[6021],{"type":53,"value":5155},{"type":48,"tag":200,"props":6023,"children":6024},{"style":213},[6025],{"type":53,"value":247},{"type":48,"tag":200,"props":6027,"children":6028},{"class":202,"line":250},[6029],{"type":48,"tag":200,"props":6030,"children":6031},{"emptyLinePlaceholder":254},[6032],{"type":53,"value":257},{"type":48,"tag":200,"props":6034,"children":6035},{"class":202,"line":260},[6036],{"type":48,"tag":200,"props":6037,"children":6038},{"style":290},[6039],{"type":53,"value":6040},"\u002F\u002F Observation: listen for state changes\n",{"type":48,"tag":200,"props":6042,"children":6043},{"class":202,"line":286},[6044,6048,6052,6056,6060,6064,6068,6072,6076,6080,6084,6088,6092],{"type":48,"tag":200,"props":6045,"children":6046},{"style":219},[6047],{"type":53,"value":5414},{"type":48,"tag":200,"props":6049,"children":6050},{"style":213},[6051],{"type":53,"value":509},{"type":48,"tag":200,"props":6053,"children":6054},{"style":616},[6055],{"type":53,"value":916},{"type":48,"tag":200,"props":6057,"children":6058},{"style":219},[6059],{"type":53,"value":450},{"type":48,"tag":200,"props":6061,"children":6062},{"style":213},[6063],{"type":53,"value":312},{"type":48,"tag":200,"props":6065,"children":6066},{"style":240},[6067],{"type":53,"value":307},{"type":48,"tag":200,"props":6069,"children":6070},{"style":213},[6071],{"type":53,"value":312},{"type":48,"tag":200,"props":6073,"children":6074},{"style":213},[6075],{"type":53,"value":760},{"type":48,"tag":200,"props":6077,"children":6078},{"style":213},[6079],{"type":53,"value":941},{"type":48,"tag":200,"props":6081,"children":6082},{"style":944},[6083],{"type":53,"value":947},{"type":48,"tag":200,"props":6085,"children":6086},{"style":213},[6087],{"type":53,"value":952},{"type":48,"tag":200,"props":6089,"children":6090},{"style":264},[6091],{"type":53,"value":957},{"type":48,"tag":200,"props":6093,"children":6094},{"style":213},[6095],{"type":53,"value":283},{"type":48,"tag":200,"props":6097,"children":6098},{"class":202,"line":296},[6099,6104,6108,6112,6116,6120,6124,6128,6132,6136,6140,6144,6148,6152],{"type":48,"tag":200,"props":6100,"children":6101},{"style":616},[6102],{"type":53,"value":6103}," renderStore",{"type":48,"tag":200,"props":6105,"children":6106},{"style":324},[6107],{"type":53,"value":450},{"type":48,"tag":200,"props":6109,"children":6110},{"style":219},[6111],{"type":53,"value":947},{"type":48,"tag":200,"props":6113,"children":6114},{"style":213},[6115],{"type":53,"value":509},{"type":48,"tag":200,"props":6117,"children":6118},{"style":219},[6119],{"type":53,"value":1002},{"type":48,"tag":200,"props":6121,"children":6122},{"style":213},[6123],{"type":53,"value":509},{"type":48,"tag":200,"props":6125,"children":6126},{"style":219},[6127],{"type":53,"value":5195},{"type":48,"tag":200,"props":6129,"children":6130},{"style":213},[6131],{"type":53,"value":760},{"type":48,"tag":200,"props":6133,"children":6134},{"style":219},[6135],{"type":53,"value":1748},{"type":48,"tag":200,"props":6137,"children":6138},{"style":213},[6139],{"type":53,"value":509},{"type":48,"tag":200,"props":6141,"children":6142},{"style":219},[6143],{"type":53,"value":1002},{"type":48,"tag":200,"props":6145,"children":6146},{"style":213},[6147],{"type":53,"value":509},{"type":48,"tag":200,"props":6149,"children":6150},{"style":219},[6151],{"type":53,"value":2413},{"type":48,"tag":200,"props":6153,"children":6154},{"style":324},[6155],{"type":53,"value":559},{"type":48,"tag":200,"props":6157,"children":6158},{"class":202,"line":362},[6159,6163],{"type":48,"tag":200,"props":6160,"children":6161},{"style":213},[6162],{"type":53,"value":1014},{"type":48,"tag":200,"props":6164,"children":6165},{"style":219},[6166],{"type":53,"value":559},{"type":48,"tag":200,"props":6168,"children":6169},{"class":202,"line":371},[6170],{"type":48,"tag":200,"props":6171,"children":6172},{"emptyLinePlaceholder":254},[6173],{"type":53,"value":257},{"type":48,"tag":200,"props":6175,"children":6176},{"class":202,"line":379},[6177],{"type":48,"tag":200,"props":6178,"children":6179},{"style":290},[6180],{"type":53,"value":6181},"\u002F\u002F Commands: emit on user action\n",{"type":48,"tag":200,"props":6183,"children":6184},{"class":202,"line":421},[6185,6189,6194,6198,6202,6206,6210,6214,6218,6222,6226,6230],{"type":48,"tag":200,"props":6186,"children":6187},{"style":264},[6188],{"type":53,"value":690},{"type":48,"tag":200,"props":6190,"children":6191},{"style":616},[6192],{"type":53,"value":6193}," handleEditState",{"type":48,"tag":200,"props":6195,"children":6196},{"style":213},[6197],{"type":53,"value":450},{"type":48,"tag":200,"props":6199,"children":6200},{"style":944},[6201],{"type":53,"value":5195},{"type":48,"tag":200,"props":6203,"children":6204},{"style":213},[6205],{"type":53,"value":317},{"type":48,"tag":200,"props":6207,"children":6208},{"style":270},[6209],{"type":53,"value":1992},{"type":48,"tag":200,"props":6211,"children":6212},{"style":213},[6213],{"type":53,"value":760},{"type":48,"tag":200,"props":6215,"children":6216},{"style":944},[6217],{"type":53,"value":5212},{"type":48,"tag":200,"props":6219,"children":6220},{"style":213},[6221],{"type":53,"value":317},{"type":48,"tag":200,"props":6223,"children":6224},{"style":270},[6225],{"type":53,"value":1957},{"type":48,"tag":200,"props":6227,"children":6228},{"style":213},[6229],{"type":53,"value":952},{"type":48,"tag":200,"props":6231,"children":6232},{"style":213},[6233],{"type":53,"value":283},{"type":48,"tag":200,"props":6235,"children":6236},{"class":202,"line":439},[6237,6241,6245,6249,6253,6257,6261,6265,6269,6273,6277,6281,6285,6289,6293,6297],{"type":48,"tag":200,"props":6238,"children":6239},{"style":219},[6240],{"type":53,"value":5266},{"type":48,"tag":200,"props":6242,"children":6243},{"style":213},[6244],{"type":53,"value":509},{"type":48,"tag":200,"props":6246,"children":6247},{"style":616},[6248],{"type":53,"value":739},{"type":48,"tag":200,"props":6250,"children":6251},{"style":324},[6252],{"type":53,"value":450},{"type":48,"tag":200,"props":6254,"children":6255},{"style":213},[6256],{"type":53,"value":312},{"type":48,"tag":200,"props":6258,"children":6259},{"style":240},[6260],{"type":53,"value":4408},{"type":48,"tag":200,"props":6262,"children":6263},{"style":213},[6264],{"type":53,"value":312},{"type":48,"tag":200,"props":6266,"children":6267},{"style":213},[6268],{"type":53,"value":760},{"type":48,"tag":200,"props":6270,"children":6271},{"style":213},[6272],{"type":53,"value":216},{"type":48,"tag":200,"props":6274,"children":6275},{"style":219},[6276],{"type":53,"value":4190},{"type":48,"tag":200,"props":6278,"children":6279},{"style":213},[6280],{"type":53,"value":760},{"type":48,"tag":200,"props":6282,"children":6283},{"style":324},[6284],{"type":53,"value":1948},{"type":48,"tag":200,"props":6286,"children":6287},{"style":213},[6288],{"type":53,"value":317},{"type":48,"tag":200,"props":6290,"children":6291},{"style":219},[6292],{"type":53,"value":5212},{"type":48,"tag":200,"props":6294,"children":6295},{"style":213},[6296],{"type":53,"value":227},{"type":48,"tag":200,"props":6298,"children":6299},{"style":324},[6300],{"type":53,"value":559},{"type":48,"tag":200,"props":6302,"children":6303},{"class":202,"line":458},[6304],{"type":48,"tag":200,"props":6305,"children":6306},{"style":213},[6307],{"type":53,"value":368},{"type":48,"tag":200,"props":6309,"children":6310},{"class":202,"line":489},[6311],{"type":48,"tag":200,"props":6312,"children":6313},{"emptyLinePlaceholder":254},[6314],{"type":53,"value":257},{"type":48,"tag":200,"props":6316,"children":6317},{"class":202,"line":548},[6318,6322,6327,6331],{"type":48,"tag":200,"props":6319,"children":6320},{"style":264},[6321],{"type":53,"value":690},{"type":48,"tag":200,"props":6323,"children":6324},{"style":616},[6325],{"type":53,"value":6326}," handleReset",{"type":48,"tag":200,"props":6328,"children":6329},{"style":213},[6330],{"type":53,"value":432},{"type":48,"tag":200,"props":6332,"children":6333},{"style":213},[6334],{"type":53,"value":283},{"type":48,"tag":200,"props":6336,"children":6337},{"class":202,"line":562},[6338,6342,6346,6350,6354,6358,6362,6366,6370,6374],{"type":48,"tag":200,"props":6339,"children":6340},{"style":219},[6341],{"type":53,"value":5266},{"type":48,"tag":200,"props":6343,"children":6344},{"style":213},[6345],{"type":53,"value":509},{"type":48,"tag":200,"props":6347,"children":6348},{"style":616},[6349],{"type":53,"value":739},{"type":48,"tag":200,"props":6351,"children":6352},{"style":324},[6353],{"type":53,"value":450},{"type":48,"tag":200,"props":6355,"children":6356},{"style":213},[6357],{"type":53,"value":312},{"type":48,"tag":200,"props":6359,"children":6360},{"style":240},[6361],{"type":53,"value":1302},{"type":48,"tag":200,"props":6363,"children":6364},{"style":213},[6365],{"type":53,"value":312},{"type":48,"tag":200,"props":6367,"children":6368},{"style":213},[6369],{"type":53,"value":760},{"type":48,"tag":200,"props":6371,"children":6372},{"style":213},[6373],{"type":53,"value":1315},{"type":48,"tag":200,"props":6375,"children":6376},{"style":324},[6377],{"type":53,"value":559},{"type":48,"tag":200,"props":6379,"children":6380},{"class":202,"line":571},[6381],{"type":48,"tag":200,"props":6382,"children":6383},{"style":213},[6384],{"type":53,"value":368},{"type":48,"tag":122,"props":6386,"children":6388},{"id":6387},"debouncing-frequent-observations",[6389],{"type":53,"value":6390},"Debouncing Frequent Observations",{"type":48,"tag":59,"props":6392,"children":6393},{},[6394],{"type":53,"value":6395},"High-frequency state changes (e.g., mouse tracking, animation frames) can flood the event bus. Debounce on the emit side:",{"type":48,"tag":153,"props":6397,"children":6399},{"className":192,"code":6398,"language":194,"meta":161,"style":161},"import { storeInspector } from '.\u002Fstore-inspector-client'\n\nlet debounceTimer: ReturnType\u003Ctypeof setTimeout> | null = null\n\nfunction emitStateUpdate(storeName: string, state: unknown) {\n if (debounceTimer) clearTimeout(debounceTimer)\n debounceTimer = setTimeout(() => {\n storeInspector.emit('state-update', {\n storeName,\n state: structuredClone(state),\n timestamp: Date.now(),\n })\n }, 16) \u002F\u002F ~60fps cap\n}\n",[6400],{"type":48,"tag":71,"props":6401,"children":6402},{"__ignoreMap":161},[6403,6438,6445,6500,6507,6559,6598,6630,6669,6680,6711,6742,6753,6774],{"type":48,"tag":200,"props":6404,"children":6405},{"class":202,"line":203},[6406,6410,6414,6418,6422,6426,6430,6434],{"type":48,"tag":200,"props":6407,"children":6408},{"style":207},[6409],{"type":53,"value":210},{"type":48,"tag":200,"props":6411,"children":6412},{"style":213},[6413],{"type":53,"value":216},{"type":48,"tag":200,"props":6415,"children":6416},{"style":219},[6417],{"type":53,"value":5138},{"type":48,"tag":200,"props":6419,"children":6420},{"style":213},[6421],{"type":53,"value":227},{"type":48,"tag":200,"props":6423,"children":6424},{"style":207},[6425],{"type":53,"value":232},{"type":48,"tag":200,"props":6427,"children":6428},{"style":213},[6429],{"type":53,"value":237},{"type":48,"tag":200,"props":6431,"children":6432},{"style":240},[6433],{"type":53,"value":5155},{"type":48,"tag":200,"props":6435,"children":6436},{"style":213},[6437],{"type":53,"value":247},{"type":48,"tag":200,"props":6439,"children":6440},{"class":202,"line":250},[6441],{"type":48,"tag":200,"props":6442,"children":6443},{"emptyLinePlaceholder":254},[6444],{"type":53,"value":257},{"type":48,"tag":200,"props":6446,"children":6447},{"class":202,"line":260},[6448,6453,6458,6462,6467,6472,6477,6481,6486,6491,6495],{"type":48,"tag":200,"props":6449,"children":6450},{"style":264},[6451],{"type":53,"value":6452},"let",{"type":48,"tag":200,"props":6454,"children":6455},{"style":219},[6456],{"type":53,"value":6457}," debounceTimer",{"type":48,"tag":200,"props":6459,"children":6460},{"style":213},[6461],{"type":53,"value":317},{"type":48,"tag":200,"props":6463,"children":6464},{"style":270},[6465],{"type":53,"value":6466}," ReturnType",{"type":48,"tag":200,"props":6468,"children":6469},{"style":213},[6470],{"type":53,"value":6471},"\u003Ctypeof",{"type":48,"tag":200,"props":6473,"children":6474},{"style":219},[6475],{"type":53,"value":6476}," setTimeout",{"type":48,"tag":200,"props":6478,"children":6479},{"style":213},[6480],{"type":53,"value":414},{"type":48,"tag":200,"props":6482,"children":6483},{"style":213},[6484],{"type":53,"value":6485}," |",{"type":48,"tag":200,"props":6487,"children":6488},{"style":270},[6489],{"type":53,"value":6490}," null",{"type":48,"tag":200,"props":6492,"children":6493},{"style":213},[6494],{"type":53,"value":278},{"type":48,"tag":200,"props":6496,"children":6497},{"style":213},[6498],{"type":53,"value":6499}," null\n",{"type":48,"tag":200,"props":6501,"children":6502},{"class":202,"line":286},[6503],{"type":48,"tag":200,"props":6504,"children":6505},{"emptyLinePlaceholder":254},[6506],{"type":53,"value":257},{"type":48,"tag":200,"props":6508,"children":6509},{"class":202,"line":296},[6510,6514,6519,6523,6527,6531,6535,6539,6543,6547,6551,6555],{"type":48,"tag":200,"props":6511,"children":6512},{"style":264},[6513],{"type":53,"value":690},{"type":48,"tag":200,"props":6515,"children":6516},{"style":616},[6517],{"type":53,"value":6518}," emitStateUpdate",{"type":48,"tag":200,"props":6520,"children":6521},{"style":213},[6522],{"type":53,"value":450},{"type":48,"tag":200,"props":6524,"children":6525},{"style":944},[6526],{"type":53,"value":5195},{"type":48,"tag":200,"props":6528,"children":6529},{"style":213},[6530],{"type":53,"value":317},{"type":48,"tag":200,"props":6532,"children":6533},{"style":270},[6534],{"type":53,"value":1992},{"type":48,"tag":200,"props":6536,"children":6537},{"style":213},[6538],{"type":53,"value":760},{"type":48,"tag":200,"props":6540,"children":6541},{"style":944},[6542],{"type":53,"value":1948},{"type":48,"tag":200,"props":6544,"children":6545},{"style":213},[6546],{"type":53,"value":317},{"type":48,"tag":200,"props":6548,"children":6549},{"style":270},[6550],{"type":53,"value":1957},{"type":48,"tag":200,"props":6552,"children":6553},{"style":213},[6554],{"type":53,"value":952},{"type":48,"tag":200,"props":6556,"children":6557},{"style":213},[6558],{"type":53,"value":283},{"type":48,"tag":200,"props":6560,"children":6561},{"class":202,"line":362},[6562,6567,6571,6576,6581,6586,6590,6594],{"type":48,"tag":200,"props":6563,"children":6564},{"style":207},[6565],{"type":53,"value":6566}," if",{"type":48,"tag":200,"props":6568,"children":6569},{"style":324},[6570],{"type":53,"value":941},{"type":48,"tag":200,"props":6572,"children":6573},{"style":219},[6574],{"type":53,"value":6575},"debounceTimer",{"type":48,"tag":200,"props":6577,"children":6578},{"style":324},[6579],{"type":53,"value":6580},") ",{"type":48,"tag":200,"props":6582,"children":6583},{"style":616},[6584],{"type":53,"value":6585},"clearTimeout",{"type":48,"tag":200,"props":6587,"children":6588},{"style":324},[6589],{"type":53,"value":450},{"type":48,"tag":200,"props":6591,"children":6592},{"style":219},[6593],{"type":53,"value":6575},{"type":48,"tag":200,"props":6595,"children":6596},{"style":324},[6597],{"type":53,"value":559},{"type":48,"tag":200,"props":6599,"children":6600},{"class":202,"line":371},[6601,6606,6610,6614,6618,6622,6626],{"type":48,"tag":200,"props":6602,"children":6603},{"style":219},[6604],{"type":53,"value":6605}," debounceTimer",{"type":48,"tag":200,"props":6607,"children":6608},{"style":213},[6609],{"type":53,"value":278},{"type":48,"tag":200,"props":6611,"children":6612},{"style":616},[6613],{"type":53,"value":6476},{"type":48,"tag":200,"props":6615,"children":6616},{"style":324},[6617],{"type":53,"value":450},{"type":48,"tag":200,"props":6619,"children":6620},{"style":213},[6621],{"type":53,"value":432},{"type":48,"tag":200,"props":6623,"children":6624},{"style":264},[6625],{"type":53,"value":957},{"type":48,"tag":200,"props":6627,"children":6628},{"style":213},[6629],{"type":53,"value":283},{"type":48,"tag":200,"props":6631,"children":6632},{"class":202,"line":379},[6633,6637,6641,6645,6649,6653,6657,6661,6665],{"type":48,"tag":200,"props":6634,"children":6635},{"style":219},[6636],{"type":53,"value":5829},{"type":48,"tag":200,"props":6638,"children":6639},{"style":213},[6640],{"type":53,"value":509},{"type":48,"tag":200,"props":6642,"children":6643},{"style":616},[6644],{"type":53,"value":739},{"type":48,"tag":200,"props":6646,"children":6647},{"style":324},[6648],{"type":53,"value":450},{"type":48,"tag":200,"props":6650,"children":6651},{"style":213},[6652],{"type":53,"value":312},{"type":48,"tag":200,"props":6654,"children":6655},{"style":240},[6656],{"type":53,"value":307},{"type":48,"tag":200,"props":6658,"children":6659},{"style":213},[6660],{"type":53,"value":312},{"type":48,"tag":200,"props":6662,"children":6663},{"style":213},[6664],{"type":53,"value":760},{"type":48,"tag":200,"props":6666,"children":6667},{"style":213},[6668],{"type":53,"value":283},{"type":48,"tag":200,"props":6670,"children":6671},{"class":202,"line":421},[6672,6676],{"type":48,"tag":200,"props":6673,"children":6674},{"style":219},[6675],{"type":53,"value":5869},{"type":48,"tag":200,"props":6677,"children":6678},{"style":213},[6679],{"type":53,"value":486},{"type":48,"tag":200,"props":6681,"children":6682},{"class":202,"line":439},[6683,6687,6691,6695,6699,6703,6707],{"type":48,"tag":200,"props":6684,"children":6685},{"style":324},[6686],{"type":53,"value":3319},{"type":48,"tag":200,"props":6688,"children":6689},{"style":213},[6690],{"type":53,"value":317},{"type":48,"tag":200,"props":6692,"children":6693},{"style":616},[6694],{"type":53,"value":2491},{"type":48,"tag":200,"props":6696,"children":6697},{"style":324},[6698],{"type":53,"value":450},{"type":48,"tag":200,"props":6700,"children":6701},{"style":219},[6702],{"type":53,"value":2413},{"type":48,"tag":200,"props":6704,"children":6705},{"style":324},[6706],{"type":53,"value":952},{"type":48,"tag":200,"props":6708,"children":6709},{"style":213},[6710],{"type":53,"value":486},{"type":48,"tag":200,"props":6712,"children":6713},{"class":202,"line":458},[6714,6718,6722,6726,6730,6734,6738],{"type":48,"tag":200,"props":6715,"children":6716},{"style":324},[6717],{"type":53,"value":5922},{"type":48,"tag":200,"props":6719,"children":6720},{"style":213},[6721],{"type":53,"value":317},{"type":48,"tag":200,"props":6723,"children":6724},{"style":219},[6725],{"type":53,"value":793},{"type":48,"tag":200,"props":6727,"children":6728},{"style":213},[6729],{"type":53,"value":509},{"type":48,"tag":200,"props":6731,"children":6732},{"style":616},[6733],{"type":53,"value":802},{"type":48,"tag":200,"props":6735,"children":6736},{"style":324},[6737],{"type":53,"value":432},{"type":48,"tag":200,"props":6739,"children":6740},{"style":213},[6741],{"type":53,"value":486},{"type":48,"tag":200,"props":6743,"children":6744},{"class":202,"line":489},[6745,6749],{"type":48,"tag":200,"props":6746,"children":6747},{"style":213},[6748],{"type":53,"value":554},{"type":48,"tag":200,"props":6750,"children":6751},{"style":324},[6752],{"type":53,"value":559},{"type":48,"tag":200,"props":6754,"children":6755},{"class":202,"line":548},[6756,6760,6765,6769],{"type":48,"tag":200,"props":6757,"children":6758},{"style":213},[6759],{"type":53,"value":3193},{"type":48,"tag":200,"props":6761,"children":6762},{"style":719},[6763],{"type":53,"value":6764}," 16",{"type":48,"tag":200,"props":6766,"children":6767},{"style":324},[6768],{"type":53,"value":6580},{"type":48,"tag":200,"props":6770,"children":6771},{"style":290},[6772],{"type":53,"value":6773},"\u002F\u002F ~60fps cap\n",{"type":48,"tag":200,"props":6775,"children":6776},{"class":202,"line":562},[6777],{"type":48,"tag":200,"props":6778,"children":6779},{"style":213},[6780],{"type":53,"value":368},{"type":48,"tag":59,"props":6782,"children":6783},{},[6784],{"type":53,"value":6785},"Do not debounce command events. Commands are user-initiated and infrequent.",{"type":48,"tag":122,"props":6787,"children":6789},{"id":6788},"common-mistakes",[6790],{"type":53,"value":6791},"Common Mistakes",{"type":48,"tag":171,"props":6793,"children":6795},{"id":6794},"_1-not-using-structuredclone-for-snapshots-high",[6796],{"type":53,"value":6797},"1. Not using structuredClone for snapshots (HIGH)",{"type":48,"tag":59,"props":6799,"children":6800},{},[6801,6803,6809],{"type":53,"value":6802},"Without ",{"type":48,"tag":71,"props":6804,"children":6806},{"className":6805},[],[6807],{"type":53,"value":6808},"structuredClone",{"type":53,"value":6810},", snapshot payloads hold references to the live state object. When the app mutates state later, every stored snapshot in the panel is silently corrupted.",{"type":48,"tag":59,"props":6812,"children":6813},{},[6814],{"type":53,"value":6815},"Wrong:",{"type":48,"tag":153,"props":6817,"children":6819},{"className":192,"code":6818,"language":194,"meta":161,"style":161},"timeTravelClient.emit('snapshot', {\n state,\n timestamp: Date.now(),\n label: action.type,\n})\n",[6820],{"type":48,"tag":71,"props":6821,"children":6822},{"__ignoreMap":161},[6823,6862,6873,6905,6933],{"type":48,"tag":200,"props":6824,"children":6825},{"class":202,"line":203},[6826,6830,6834,6838,6842,6846,6850,6854,6858],{"type":48,"tag":200,"props":6827,"children":6828},{"style":219},[6829],{"type":53,"value":2608},{"type":48,"tag":200,"props":6831,"children":6832},{"style":213},[6833],{"type":53,"value":509},{"type":48,"tag":200,"props":6835,"children":6836},{"style":616},[6837],{"type":53,"value":739},{"type":48,"tag":200,"props":6839,"children":6840},{"style":219},[6841],{"type":53,"value":450},{"type":48,"tag":200,"props":6843,"children":6844},{"style":213},[6845],{"type":53,"value":312},{"type":48,"tag":200,"props":6847,"children":6848},{"style":240},[6849],{"type":53,"value":2462},{"type":48,"tag":200,"props":6851,"children":6852},{"style":213},[6853],{"type":53,"value":312},{"type":48,"tag":200,"props":6855,"children":6856},{"style":213},[6857],{"type":53,"value":760},{"type":48,"tag":200,"props":6859,"children":6860},{"style":213},[6861],{"type":53,"value":283},{"type":48,"tag":200,"props":6863,"children":6864},{"class":202,"line":250},[6865,6869],{"type":48,"tag":200,"props":6866,"children":6867},{"style":219},[6868],{"type":53,"value":2395},{"type":48,"tag":200,"props":6870,"children":6871},{"style":213},[6872],{"type":53,"value":486},{"type":48,"tag":200,"props":6874,"children":6875},{"class":202,"line":260},[6876,6881,6885,6889,6893,6897,6901],{"type":48,"tag":200,"props":6877,"children":6878},{"style":324},[6879],{"type":53,"value":6880}," timestamp",{"type":48,"tag":200,"props":6882,"children":6883},{"style":213},[6884],{"type":53,"value":317},{"type":48,"tag":200,"props":6886,"children":6887},{"style":219},[6888],{"type":53,"value":793},{"type":48,"tag":200,"props":6890,"children":6891},{"style":213},[6892],{"type":53,"value":509},{"type":48,"tag":200,"props":6894,"children":6895},{"style":616},[6896],{"type":53,"value":802},{"type":48,"tag":200,"props":6898,"children":6899},{"style":219},[6900],{"type":53,"value":432},{"type":48,"tag":200,"props":6902,"children":6903},{"style":213},[6904],{"type":53,"value":486},{"type":48,"tag":200,"props":6906,"children":6907},{"class":202,"line":286},[6908,6913,6917,6921,6925,6929],{"type":48,"tag":200,"props":6909,"children":6910},{"style":324},[6911],{"type":53,"value":6912}," label",{"type":48,"tag":200,"props":6914,"children":6915},{"style":213},[6916],{"type":53,"value":317},{"type":48,"tag":200,"props":6918,"children":6919},{"style":219},[6920],{"type":53,"value":2422},{"type":48,"tag":200,"props":6922,"children":6923},{"style":213},[6924],{"type":53,"value":509},{"type":48,"tag":200,"props":6926,"children":6927},{"style":219},[6928],{"type":53,"value":267},{"type":48,"tag":200,"props":6930,"children":6931},{"style":213},[6932],{"type":53,"value":486},{"type":48,"tag":200,"props":6934,"children":6935},{"class":202,"line":296},[6936,6940],{"type":48,"tag":200,"props":6937,"children":6938},{"style":213},[6939],{"type":53,"value":1014},{"type":48,"tag":200,"props":6941,"children":6942},{"style":219},[6943],{"type":53,"value":559},{"type":48,"tag":59,"props":6945,"children":6946},{},[6947,6949,6955,6957,6962],{"type":53,"value":6948},"The panel stores ",{"type":48,"tag":71,"props":6950,"children":6952},{"className":6951},[],[6953],{"type":53,"value":6954},"event.payload.state",{"type":53,"value":6956},", which is a reference to the app's ",{"type":48,"tag":71,"props":6958,"children":6960},{"className":6959},[],[6961],{"type":53,"value":2413},{"type":53,"value":6963}," variable. On the next mutation, the panel's stored snapshot now reflects the new state, not the historical state.",{"type":48,"tag":59,"props":6965,"children":6966},{},[6967],{"type":53,"value":6968},"Correct:",{"type":48,"tag":153,"props":6970,"children":6972},{"className":192,"code":6971,"language":194,"meta":161,"style":161},"timeTravelClient.emit('snapshot', {\n state: structuredClone(state),\n timestamp: Date.now(),\n label: action.type,\n})\n",[6973],{"type":48,"tag":71,"props":6974,"children":6975},{"__ignoreMap":161},[6976,7015,7039,7070,7097],{"type":48,"tag":200,"props":6977,"children":6978},{"class":202,"line":203},[6979,6983,6987,6991,6995,6999,7003,7007,7011],{"type":48,"tag":200,"props":6980,"children":6981},{"style":219},[6982],{"type":53,"value":2608},{"type":48,"tag":200,"props":6984,"children":6985},{"style":213},[6986],{"type":53,"value":509},{"type":48,"tag":200,"props":6988,"children":6989},{"style":616},[6990],{"type":53,"value":739},{"type":48,"tag":200,"props":6992,"children":6993},{"style":219},[6994],{"type":53,"value":450},{"type":48,"tag":200,"props":6996,"children":6997},{"style":213},[6998],{"type":53,"value":312},{"type":48,"tag":200,"props":7000,"children":7001},{"style":240},[7002],{"type":53,"value":2462},{"type":48,"tag":200,"props":7004,"children":7005},{"style":213},[7006],{"type":53,"value":312},{"type":48,"tag":200,"props":7008,"children":7009},{"style":213},[7010],{"type":53,"value":760},{"type":48,"tag":200,"props":7012,"children":7013},{"style":213},[7014],{"type":53,"value":283},{"type":48,"tag":200,"props":7016,"children":7017},{"class":202,"line":250},[7018,7022,7026,7030,7035],{"type":48,"tag":200,"props":7019,"children":7020},{"style":324},[7021],{"type":53,"value":2395},{"type":48,"tag":200,"props":7023,"children":7024},{"style":213},[7025],{"type":53,"value":317},{"type":48,"tag":200,"props":7027,"children":7028},{"style":616},[7029],{"type":53,"value":2491},{"type":48,"tag":200,"props":7031,"children":7032},{"style":219},[7033],{"type":53,"value":7034},"(state)",{"type":48,"tag":200,"props":7036,"children":7037},{"style":213},[7038],{"type":53,"value":486},{"type":48,"tag":200,"props":7040,"children":7041},{"class":202,"line":260},[7042,7046,7050,7054,7058,7062,7066],{"type":48,"tag":200,"props":7043,"children":7044},{"style":324},[7045],{"type":53,"value":6880},{"type":48,"tag":200,"props":7047,"children":7048},{"style":213},[7049],{"type":53,"value":317},{"type":48,"tag":200,"props":7051,"children":7052},{"style":219},[7053],{"type":53,"value":793},{"type":48,"tag":200,"props":7055,"children":7056},{"style":213},[7057],{"type":53,"value":509},{"type":48,"tag":200,"props":7059,"children":7060},{"style":616},[7061],{"type":53,"value":802},{"type":48,"tag":200,"props":7063,"children":7064},{"style":219},[7065],{"type":53,"value":432},{"type":48,"tag":200,"props":7067,"children":7068},{"style":213},[7069],{"type":53,"value":486},{"type":48,"tag":200,"props":7071,"children":7072},{"class":202,"line":286},[7073,7077,7081,7085,7089,7093],{"type":48,"tag":200,"props":7074,"children":7075},{"style":324},[7076],{"type":53,"value":6912},{"type":48,"tag":200,"props":7078,"children":7079},{"style":213},[7080],{"type":53,"value":317},{"type":48,"tag":200,"props":7082,"children":7083},{"style":219},[7084],{"type":53,"value":2422},{"type":48,"tag":200,"props":7086,"children":7087},{"style":213},[7088],{"type":53,"value":509},{"type":48,"tag":200,"props":7090,"children":7091},{"style":219},[7092],{"type":53,"value":267},{"type":48,"tag":200,"props":7094,"children":7095},{"style":213},[7096],{"type":53,"value":486},{"type":48,"tag":200,"props":7098,"children":7099},{"class":202,"line":296},[7100,7104],{"type":48,"tag":200,"props":7101,"children":7102},{"style":213},[7103],{"type":53,"value":1014},{"type":48,"tag":200,"props":7105,"children":7106},{"style":219},[7107],{"type":53,"value":559},{"type":48,"tag":59,"props":7109,"children":7110},{},[7111,7116],{"type":48,"tag":71,"props":7112,"children":7114},{"className":7113},[],[7115],{"type":53,"value":6808},{"type":53,"value":7117}," creates a deep copy. The snapshot is frozen in time regardless of future mutations. This applies to any observation event where the panel accumulates historical data -- not just time-travel.",{"type":48,"tag":171,"props":7119,"children":7121},{"id":7120},"_2-non-serializable-payloads-in-cross-tab-scenarios-high",[7122],{"type":53,"value":7123},"2. Non-serializable payloads in cross-tab scenarios (HIGH)",{"type":48,"tag":59,"props":7125,"children":7126},{},[7127,7129,7135,7136,7142,7143,7149],{"type":53,"value":7128},"When using the server event bus (WebSocket\u002FSSE\u002FBroadcastChannel), payloads are serialized for transport. Functions, DOM nodes, class instances with methods, ",{"type":48,"tag":71,"props":7130,"children":7132},{"className":7131},[],[7133],{"type":53,"value":7134},"Map",{"type":53,"value":4604},{"type":48,"tag":71,"props":7137,"children":7139},{"className":7138},[],[7140],{"type":53,"value":7141},"Set",{"type":53,"value":4604},{"type":48,"tag":71,"props":7144,"children":7146},{"className":7145},[],[7147],{"type":53,"value":7148},"WeakRef",{"type":53,"value":7150},", and circular references all fail silently or lose data.",{"type":48,"tag":59,"props":7152,"children":7153},{},[7154],{"type":53,"value":7155},"This is especially dangerous in bidirectional patterns because command payloads flow panel-to-app and may cross transport boundaries.",{"type":48,"tag":59,"props":7157,"children":7158},{},[7159],{"type":53,"value":6815},{"type":48,"tag":153,"props":7161,"children":7163},{"className":192,"code":7162,"language":194,"meta":161,"style":161},"storeInspector.emit('set-state', {\n storeName: 'main',\n state: {\n items: new Map([['a', 1]]), \u002F\u002F Map -- lost on serialization\n onClick: () => alert('hi'), \u002F\u002F Function -- lost on serialization\n ref: document.getElementById('x'), \u002F\u002F DOM node -- lost on serialization\n },\n})\n",[7164],{"type":48,"tag":71,"props":7165,"children":7166},{"__ignoreMap":161},[7167,7206,7235,7250,7311,7366,7422,7430],{"type":48,"tag":200,"props":7168,"children":7169},{"class":202,"line":203},[7170,7174,7178,7182,7186,7190,7194,7198,7202],{"type":48,"tag":200,"props":7171,"children":7172},{"style":219},[7173],{"type":53,"value":5414},{"type":48,"tag":200,"props":7175,"children":7176},{"style":213},[7177],{"type":53,"value":509},{"type":48,"tag":200,"props":7179,"children":7180},{"style":616},[7181],{"type":53,"value":739},{"type":48,"tag":200,"props":7183,"children":7184},{"style":219},[7185],{"type":53,"value":450},{"type":48,"tag":200,"props":7187,"children":7188},{"style":213},[7189],{"type":53,"value":312},{"type":48,"tag":200,"props":7191,"children":7192},{"style":240},[7193],{"type":53,"value":4408},{"type":48,"tag":200,"props":7195,"children":7196},{"style":213},[7197],{"type":53,"value":312},{"type":48,"tag":200,"props":7199,"children":7200},{"style":213},[7201],{"type":53,"value":760},{"type":48,"tag":200,"props":7203,"children":7204},{"style":213},[7205],{"type":53,"value":283},{"type":48,"tag":200,"props":7207,"children":7208},{"class":202,"line":250},[7209,7214,7218,7222,7227,7231],{"type":48,"tag":200,"props":7210,"children":7211},{"style":324},[7212],{"type":53,"value":7213}," storeName",{"type":48,"tag":200,"props":7215,"children":7216},{"style":213},[7217],{"type":53,"value":317},{"type":48,"tag":200,"props":7219,"children":7220},{"style":213},[7221],{"type":53,"value":237},{"type":48,"tag":200,"props":7223,"children":7224},{"style":240},[7225],{"type":53,"value":7226},"main",{"type":48,"tag":200,"props":7228,"children":7229},{"style":213},[7230],{"type":53,"value":312},{"type":48,"tag":200,"props":7232,"children":7233},{"style":213},[7234],{"type":53,"value":486},{"type":48,"tag":200,"props":7236,"children":7237},{"class":202,"line":260},[7238,7242,7246],{"type":48,"tag":200,"props":7239,"children":7240},{"style":324},[7241],{"type":53,"value":2395},{"type":48,"tag":200,"props":7243,"children":7244},{"style":213},[7245],{"type":53,"value":317},{"type":48,"tag":200,"props":7247,"children":7248},{"style":213},[7249],{"type":53,"value":283},{"type":48,"tag":200,"props":7251,"children":7252},{"class":202,"line":286},[7253,7258,7262,7266,7271,7276,7280,7285,7289,7293,7297,7302,7306],{"type":48,"tag":200,"props":7254,"children":7255},{"style":324},[7256],{"type":53,"value":7257}," items",{"type":48,"tag":200,"props":7259,"children":7260},{"style":213},[7261],{"type":53,"value":317},{"type":48,"tag":200,"props":7263,"children":7264},{"style":213},[7265],{"type":53,"value":613},{"type":48,"tag":200,"props":7267,"children":7268},{"style":616},[7269],{"type":53,"value":7270}," Map",{"type":48,"tag":200,"props":7272,"children":7273},{"style":219},[7274],{"type":53,"value":7275},"([[",{"type":48,"tag":200,"props":7277,"children":7278},{"style":213},[7279],{"type":53,"value":312},{"type":48,"tag":200,"props":7281,"children":7282},{"style":240},[7283],{"type":53,"value":7284},"a",{"type":48,"tag":200,"props":7286,"children":7287},{"style":213},[7288],{"type":53,"value":312},{"type":48,"tag":200,"props":7290,"children":7291},{"style":213},[7292],{"type":53,"value":760},{"type":48,"tag":200,"props":7294,"children":7295},{"style":719},[7296],{"type":53,"value":3170},{"type":48,"tag":200,"props":7298,"children":7299},{"style":219},[7300],{"type":53,"value":7301},"]])",{"type":48,"tag":200,"props":7303,"children":7304},{"style":213},[7305],{"type":53,"value":760},{"type":48,"tag":200,"props":7307,"children":7308},{"style":290},[7309],{"type":53,"value":7310}," \u002F\u002F Map -- lost on serialization\n",{"type":48,"tag":200,"props":7312,"children":7313},{"class":202,"line":296},[7314,7319,7323,7327,7331,7336,7340,7344,7349,7353,7357,7361],{"type":48,"tag":200,"props":7315,"children":7316},{"style":616},[7317],{"type":53,"value":7318}," onClick",{"type":48,"tag":200,"props":7320,"children":7321},{"style":213},[7322],{"type":53,"value":317},{"type":48,"tag":200,"props":7324,"children":7325},{"style":213},[7326],{"type":53,"value":1535},{"type":48,"tag":200,"props":7328,"children":7329},{"style":264},[7330],{"type":53,"value":957},{"type":48,"tag":200,"props":7332,"children":7333},{"style":616},[7334],{"type":53,"value":7335}," alert",{"type":48,"tag":200,"props":7337,"children":7338},{"style":219},[7339],{"type":53,"value":450},{"type":48,"tag":200,"props":7341,"children":7342},{"style":213},[7343],{"type":53,"value":312},{"type":48,"tag":200,"props":7345,"children":7346},{"style":240},[7347],{"type":53,"value":7348},"hi",{"type":48,"tag":200,"props":7350,"children":7351},{"style":213},[7352],{"type":53,"value":312},{"type":48,"tag":200,"props":7354,"children":7355},{"style":219},[7356],{"type":53,"value":952},{"type":48,"tag":200,"props":7358,"children":7359},{"style":213},[7360],{"type":53,"value":760},{"type":48,"tag":200,"props":7362,"children":7363},{"style":290},[7364],{"type":53,"value":7365}," \u002F\u002F Function -- lost on serialization\n",{"type":48,"tag":200,"props":7367,"children":7368},{"class":202,"line":362},[7369,7374,7378,7383,7387,7392,7396,7400,7405,7409,7413,7417],{"type":48,"tag":200,"props":7370,"children":7371},{"style":324},[7372],{"type":53,"value":7373}," ref",{"type":48,"tag":200,"props":7375,"children":7376},{"style":213},[7377],{"type":53,"value":317},{"type":48,"tag":200,"props":7379,"children":7380},{"style":219},[7381],{"type":53,"value":7382}," document",{"type":48,"tag":200,"props":7384,"children":7385},{"style":213},[7386],{"type":53,"value":509},{"type":48,"tag":200,"props":7388,"children":7389},{"style":616},[7390],{"type":53,"value":7391},"getElementById",{"type":48,"tag":200,"props":7393,"children":7394},{"style":219},[7395],{"type":53,"value":450},{"type":48,"tag":200,"props":7397,"children":7398},{"style":213},[7399],{"type":53,"value":312},{"type":48,"tag":200,"props":7401,"children":7402},{"style":240},[7403],{"type":53,"value":7404},"x",{"type":48,"tag":200,"props":7406,"children":7407},{"style":213},[7408],{"type":53,"value":312},{"type":48,"tag":200,"props":7410,"children":7411},{"style":219},[7412],{"type":53,"value":952},{"type":48,"tag":200,"props":7414,"children":7415},{"style":213},[7416],{"type":53,"value":760},{"type":48,"tag":200,"props":7418,"children":7419},{"style":290},[7420],{"type":53,"value":7421}," \u002F\u002F DOM node -- lost on serialization\n",{"type":48,"tag":200,"props":7423,"children":7424},{"class":202,"line":371},[7425],{"type":48,"tag":200,"props":7426,"children":7427},{"style":213},[7428],{"type":53,"value":7429}," },\n",{"type":48,"tag":200,"props":7431,"children":7432},{"class":202,"line":379},[7433,7437],{"type":48,"tag":200,"props":7434,"children":7435},{"style":213},[7436],{"type":53,"value":1014},{"type":48,"tag":200,"props":7438,"children":7439},{"style":219},[7440],{"type":53,"value":559},{"type":48,"tag":59,"props":7442,"children":7443},{},[7444],{"type":53,"value":6968},{"type":48,"tag":153,"props":7446,"children":7448},{"className":192,"code":7447,"language":194,"meta":161,"style":161},"storeInspector.emit('set-state', {\n storeName: 'main',\n state: {\n items: Object.fromEntries(new Map([['a', 1]])),\n timestamp: Date.now(),\n },\n})\n",[7449],{"type":48,"tag":71,"props":7450,"children":7451},{"__ignoreMap":161},[7452,7491,7518,7533,7603,7634,7641],{"type":48,"tag":200,"props":7453,"children":7454},{"class":202,"line":203},[7455,7459,7463,7467,7471,7475,7479,7483,7487],{"type":48,"tag":200,"props":7456,"children":7457},{"style":219},[7458],{"type":53,"value":5414},{"type":48,"tag":200,"props":7460,"children":7461},{"style":213},[7462],{"type":53,"value":509},{"type":48,"tag":200,"props":7464,"children":7465},{"style":616},[7466],{"type":53,"value":739},{"type":48,"tag":200,"props":7468,"children":7469},{"style":219},[7470],{"type":53,"value":450},{"type":48,"tag":200,"props":7472,"children":7473},{"style":213},[7474],{"type":53,"value":312},{"type":48,"tag":200,"props":7476,"children":7477},{"style":240},[7478],{"type":53,"value":4408},{"type":48,"tag":200,"props":7480,"children":7481},{"style":213},[7482],{"type":53,"value":312},{"type":48,"tag":200,"props":7484,"children":7485},{"style":213},[7486],{"type":53,"value":760},{"type":48,"tag":200,"props":7488,"children":7489},{"style":213},[7490],{"type":53,"value":283},{"type":48,"tag":200,"props":7492,"children":7493},{"class":202,"line":250},[7494,7498,7502,7506,7510,7514],{"type":48,"tag":200,"props":7495,"children":7496},{"style":324},[7497],{"type":53,"value":7213},{"type":48,"tag":200,"props":7499,"children":7500},{"style":213},[7501],{"type":53,"value":317},{"type":48,"tag":200,"props":7503,"children":7504},{"style":213},[7505],{"type":53,"value":237},{"type":48,"tag":200,"props":7507,"children":7508},{"style":240},[7509],{"type":53,"value":7226},{"type":48,"tag":200,"props":7511,"children":7512},{"style":213},[7513],{"type":53,"value":312},{"type":48,"tag":200,"props":7515,"children":7516},{"style":213},[7517],{"type":53,"value":486},{"type":48,"tag":200,"props":7519,"children":7520},{"class":202,"line":260},[7521,7525,7529],{"type":48,"tag":200,"props":7522,"children":7523},{"style":324},[7524],{"type":53,"value":2395},{"type":48,"tag":200,"props":7526,"children":7527},{"style":213},[7528],{"type":53,"value":317},{"type":48,"tag":200,"props":7530,"children":7531},{"style":213},[7532],{"type":53,"value":283},{"type":48,"tag":200,"props":7534,"children":7535},{"class":202,"line":286},[7536,7540,7544,7548,7552,7557,7561,7566,7570,7574,7578,7582,7586,7590,7594,7599],{"type":48,"tag":200,"props":7537,"children":7538},{"style":324},[7539],{"type":53,"value":7257},{"type":48,"tag":200,"props":7541,"children":7542},{"style":213},[7543],{"type":53,"value":317},{"type":48,"tag":200,"props":7545,"children":7546},{"style":219},[7547],{"type":53,"value":5752},{"type":48,"tag":200,"props":7549,"children":7550},{"style":213},[7551],{"type":53,"value":509},{"type":48,"tag":200,"props":7553,"children":7554},{"style":616},[7555],{"type":53,"value":7556},"fromEntries",{"type":48,"tag":200,"props":7558,"children":7559},{"style":219},[7560],{"type":53,"value":450},{"type":48,"tag":200,"props":7562,"children":7563},{"style":213},[7564],{"type":53,"value":7565},"new",{"type":48,"tag":200,"props":7567,"children":7568},{"style":616},[7569],{"type":53,"value":7270},{"type":48,"tag":200,"props":7571,"children":7572},{"style":219},[7573],{"type":53,"value":7275},{"type":48,"tag":200,"props":7575,"children":7576},{"style":213},[7577],{"type":53,"value":312},{"type":48,"tag":200,"props":7579,"children":7580},{"style":240},[7581],{"type":53,"value":7284},{"type":48,"tag":200,"props":7583,"children":7584},{"style":213},[7585],{"type":53,"value":312},{"type":48,"tag":200,"props":7587,"children":7588},{"style":213},[7589],{"type":53,"value":760},{"type":48,"tag":200,"props":7591,"children":7592},{"style":719},[7593],{"type":53,"value":3170},{"type":48,"tag":200,"props":7595,"children":7596},{"style":219},[7597],{"type":53,"value":7598},"]]))",{"type":48,"tag":200,"props":7600,"children":7601},{"style":213},[7602],{"type":53,"value":486},{"type":48,"tag":200,"props":7604,"children":7605},{"class":202,"line":296},[7606,7610,7614,7618,7622,7626,7630],{"type":48,"tag":200,"props":7607,"children":7608},{"style":324},[7609],{"type":53,"value":2515},{"type":48,"tag":200,"props":7611,"children":7612},{"style":213},[7613],{"type":53,"value":317},{"type":48,"tag":200,"props":7615,"children":7616},{"style":219},[7617],{"type":53,"value":793},{"type":48,"tag":200,"props":7619,"children":7620},{"style":213},[7621],{"type":53,"value":509},{"type":48,"tag":200,"props":7623,"children":7624},{"style":616},[7625],{"type":53,"value":802},{"type":48,"tag":200,"props":7627,"children":7628},{"style":219},[7629],{"type":53,"value":432},{"type":48,"tag":200,"props":7631,"children":7632},{"style":213},[7633],{"type":53,"value":486},{"type":48,"tag":200,"props":7635,"children":7636},{"class":202,"line":362},[7637],{"type":48,"tag":200,"props":7638,"children":7639},{"style":213},[7640],{"type":53,"value":7429},{"type":48,"tag":200,"props":7642,"children":7643},{"class":202,"line":371},[7644,7648],{"type":48,"tag":200,"props":7645,"children":7646},{"style":213},[7647],{"type":53,"value":1014},{"type":48,"tag":200,"props":7649,"children":7650},{"style":219},[7651],{"type":53,"value":559},{"type":48,"tag":59,"props":7653,"children":7654},{},[7655,7657,7663],{"type":53,"value":7656},"Rule of thumb: if ",{"type":48,"tag":71,"props":7658,"children":7660},{"className":7659},[],[7661],{"type":53,"value":7662},"JSON.parse(JSON.stringify(payload))",{"type":53,"value":7664}," does not round-trip cleanly, the payload is not safe for the event bus.",{"type":48,"tag":171,"props":7666,"children":7668},{"id":7667},"_3-not-distinguishing-observation-from-command-events-medium",[7669],{"type":53,"value":7670},"3. Not distinguishing observation from command events (MEDIUM)",{"type":48,"tag":59,"props":7672,"children":7673},{},[7674],{"type":53,"value":7675},"Mixing naming conventions makes the event map confusing and error-prone. Developers end up emitting observation events from the panel or command events from the app, breaking the communication contract.",{"type":48,"tag":59,"props":7677,"children":7678},{},[7679],{"type":53,"value":6815},{"type":48,"tag":153,"props":7681,"children":7683},{"className":192,"code":7682,"language":194,"meta":161,"style":161},"type MyEvents = {\n state: unknown \u002F\u002F Is this observation or command?\n update: unknown \u002F\u002F Who emits this?\n count: number \u002F\u002F Unclear direction\n}\n",[7684],{"type":48,"tag":71,"props":7685,"children":7686},{"__ignoreMap":161},[7687,7707,7727,7748,7768],{"type":48,"tag":200,"props":7688,"children":7689},{"class":202,"line":203},[7690,7694,7699,7703],{"type":48,"tag":200,"props":7691,"children":7692},{"style":264},[7693],{"type":53,"value":267},{"type":48,"tag":200,"props":7695,"children":7696},{"style":270},[7697],{"type":53,"value":7698}," MyEvents",{"type":48,"tag":200,"props":7700,"children":7701},{"style":213},[7702],{"type":53,"value":278},{"type":48,"tag":200,"props":7704,"children":7705},{"style":213},[7706],{"type":53,"value":283},{"type":48,"tag":200,"props":7708,"children":7709},{"class":202,"line":250},[7710,7714,7718,7722],{"type":48,"tag":200,"props":7711,"children":7712},{"style":324},[7713],{"type":53,"value":2395},{"type":48,"tag":200,"props":7715,"children":7716},{"style":213},[7717],{"type":53,"value":317},{"type":48,"tag":200,"props":7719,"children":7720},{"style":270},[7721],{"type":53,"value":1957},{"type":48,"tag":200,"props":7723,"children":7724},{"style":290},[7725],{"type":53,"value":7726}," \u002F\u002F Is this observation or command?\n",{"type":48,"tag":200,"props":7728,"children":7729},{"class":202,"line":260},[7730,7735,7739,7743],{"type":48,"tag":200,"props":7731,"children":7732},{"style":324},[7733],{"type":53,"value":7734}," update",{"type":48,"tag":200,"props":7736,"children":7737},{"style":213},[7738],{"type":53,"value":317},{"type":48,"tag":200,"props":7740,"children":7741},{"style":270},[7742],{"type":53,"value":1957},{"type":48,"tag":200,"props":7744,"children":7745},{"style":290},[7746],{"type":53,"value":7747}," \u002F\u002F Who emits this?\n",{"type":48,"tag":200,"props":7749,"children":7750},{"class":202,"line":286},[7751,7755,7759,7763],{"type":48,"tag":200,"props":7752,"children":7753},{"style":324},[7754],{"type":53,"value":711},{"type":48,"tag":200,"props":7756,"children":7757},{"style":213},[7758],{"type":53,"value":317},{"type":48,"tag":200,"props":7760,"children":7761},{"style":270},[7762],{"type":53,"value":336},{"type":48,"tag":200,"props":7764,"children":7765},{"style":290},[7766],{"type":53,"value":7767}," \u002F\u002F Unclear direction\n",{"type":48,"tag":200,"props":7769,"children":7770},{"class":202,"line":296},[7771],{"type":48,"tag":200,"props":7772,"children":7773},{"style":213},[7774],{"type":53,"value":368},{"type":48,"tag":59,"props":7776,"children":7777},{},[7778],{"type":53,"value":6968},{"type":48,"tag":153,"props":7780,"children":7782},{"className":192,"code":7781,"language":194,"meta":161,"style":161},"type MyEvents = {\n 'state-update': unknown \u002F\u002F Observation: describes what happened\n 'set-state': unknown \u002F\u002F Command: describes what to do\n 'count-changed': number \u002F\u002F Observation: past tense \u002F descriptive\n reset: void \u002F\u002F Command: imperative\n}\n",[7783],{"type":48,"tag":71,"props":7784,"children":7785},{"__ignoreMap":161},[7786,7805,7833,7861,7890,7911],{"type":48,"tag":200,"props":7787,"children":7788},{"class":202,"line":203},[7789,7793,7797,7801],{"type":48,"tag":200,"props":7790,"children":7791},{"style":264},[7792],{"type":53,"value":267},{"type":48,"tag":200,"props":7794,"children":7795},{"style":270},[7796],{"type":53,"value":7698},{"type":48,"tag":200,"props":7798,"children":7799},{"style":213},[7800],{"type":53,"value":278},{"type":48,"tag":200,"props":7802,"children":7803},{"style":213},[7804],{"type":53,"value":283},{"type":48,"tag":200,"props":7806,"children":7807},{"class":202,"line":250},[7808,7812,7816,7820,7824,7828],{"type":48,"tag":200,"props":7809,"children":7810},{"style":213},[7811],{"type":53,"value":302},{"type":48,"tag":200,"props":7813,"children":7814},{"style":240},[7815],{"type":53,"value":307},{"type":48,"tag":200,"props":7817,"children":7818},{"style":213},[7819],{"type":53,"value":312},{"type":48,"tag":200,"props":7821,"children":7822},{"style":213},[7823],{"type":53,"value":317},{"type":48,"tag":200,"props":7825,"children":7826},{"style":270},[7827],{"type":53,"value":1957},{"type":48,"tag":200,"props":7829,"children":7830},{"style":290},[7831],{"type":53,"value":7832}," \u002F\u002F Observation: describes what happened\n",{"type":48,"tag":200,"props":7834,"children":7835},{"class":202,"line":260},[7836,7840,7844,7848,7852,7856],{"type":48,"tag":200,"props":7837,"children":7838},{"style":213},[7839],{"type":53,"value":302},{"type":48,"tag":200,"props":7841,"children":7842},{"style":240},[7843],{"type":53,"value":4408},{"type":48,"tag":200,"props":7845,"children":7846},{"style":213},[7847],{"type":53,"value":312},{"type":48,"tag":200,"props":7849,"children":7850},{"style":213},[7851],{"type":53,"value":317},{"type":48,"tag":200,"props":7853,"children":7854},{"style":270},[7855],{"type":53,"value":1957},{"type":48,"tag":200,"props":7857,"children":7858},{"style":290},[7859],{"type":53,"value":7860}," \u002F\u002F Command: describes what to do\n",{"type":48,"tag":200,"props":7862,"children":7863},{"class":202,"line":286},[7864,7868,7873,7877,7881,7885],{"type":48,"tag":200,"props":7865,"children":7866},{"style":213},[7867],{"type":53,"value":302},{"type":48,"tag":200,"props":7869,"children":7870},{"style":240},[7871],{"type":53,"value":7872},"count-changed",{"type":48,"tag":200,"props":7874,"children":7875},{"style":213},[7876],{"type":53,"value":312},{"type":48,"tag":200,"props":7878,"children":7879},{"style":213},[7880],{"type":53,"value":317},{"type":48,"tag":200,"props":7882,"children":7883},{"style":270},[7884],{"type":53,"value":336},{"type":48,"tag":200,"props":7886,"children":7887},{"style":290},[7888],{"type":53,"value":7889}," \u002F\u002F Observation: past tense \u002F descriptive\n",{"type":48,"tag":200,"props":7891,"children":7892},{"class":202,"line":296},[7893,7897,7901,7906],{"type":48,"tag":200,"props":7894,"children":7895},{"style":324},[7896],{"type":53,"value":1141},{"type":48,"tag":200,"props":7898,"children":7899},{"style":213},[7900],{"type":53,"value":317},{"type":48,"tag":200,"props":7902,"children":7903},{"style":270},[7904],{"type":53,"value":7905}," void",{"type":48,"tag":200,"props":7907,"children":7908},{"style":290},[7909],{"type":53,"value":7910}," \u002F\u002F Command: imperative\n",{"type":48,"tag":200,"props":7912,"children":7913},{"class":202,"line":362},[7914],{"type":48,"tag":200,"props":7915,"children":7916},{"style":213},[7917],{"type":53,"value":368},{"type":48,"tag":59,"props":7919,"children":7920},{},[7921,7923,7929,7930,7936,7937,7943,7944,7950,7952,7958,7959,7965,7966,7971,7972,7977],{"type":53,"value":7922},"Use observation suffixes that describe what happened (",{"type":48,"tag":71,"props":7924,"children":7926},{"className":7925},[],[7927],{"type":53,"value":7928},"-update",{"type":53,"value":4604},{"type":48,"tag":71,"props":7931,"children":7933},{"className":7932},[],[7934],{"type":53,"value":7935},"-changed",{"type":53,"value":4604},{"type":48,"tag":71,"props":7938,"children":7940},{"className":7939},[],[7941],{"type":53,"value":7942},"-dispatched",{"type":53,"value":4604},{"type":48,"tag":71,"props":7945,"children":7947},{"className":7946},[],[7948],{"type":53,"value":7949},"-caught",{"type":53,"value":7951},"). Use command suffixes that describe what to do (",{"type":48,"tag":71,"props":7953,"children":7955},{"className":7954},[],[7956],{"type":53,"value":7957},"set-",{"type":53,"value":4604},{"type":48,"tag":71,"props":7960,"children":7962},{"className":7961},[],[7963],{"type":53,"value":7964},"dispatch-",{"type":53,"value":4604},{"type":48,"tag":71,"props":7967,"children":7969},{"className":7968},[],[7970],{"type":53,"value":1302},{"type":53,"value":4604},{"type":48,"tag":71,"props":7973,"children":7975},{"className":7974},[],[7976],{"type":53,"value":2629},{"type":53,"value":7978},"). The naming convention is not enforced by the API, but consistent naming prevents wiring mistakes.",{"type":48,"tag":122,"props":7980,"children":7982},{"id":7981},"see-also",[7983],{"type":53,"value":7984},"See Also",{"type":48,"tag":4584,"props":7986,"children":7987},{},[7988,8011],{"type":48,"tag":4588,"props":7989,"children":7990},{},[7991,7996,7998,8003,8004,8009],{"type":48,"tag":71,"props":7992,"children":7994},{"className":7993},[],[7995],{"type":53,"value":40},{"type":53,"value":7997}," -- base event system: event maps, ",{"type":48,"tag":71,"props":7999,"children":8001},{"className":8000},[],[8002],{"type":53,"value":91},{"type":53,"value":93},{"type":48,"tag":71,"props":8005,"children":8007},{"className":8006},[],[8008],{"type":53,"value":99},{"type":53,"value":8010},", connection lifecycle, singleton pattern",{"type":48,"tag":4588,"props":8012,"children":8013},{},[8014,8020,8022,8027],{"type":48,"tag":71,"props":8015,"children":8017},{"className":8016},[],[8018],{"type":53,"value":8019},"devtools-instrumentation",{"type":53,"value":8021}," -- strategic placement of ",{"type":48,"tag":71,"props":8023,"children":8025},{"className":8024},[],[8026],{"type":53,"value":91},{"type":53,"value":8028}," calls in library code benefits from bidirectional awareness (knowing that commands will flow back)",{"type":48,"tag":8030,"props":8031,"children":8032},"style",{},[8033],{"type":53,"value":8034},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":8036,"total":8175},[8037,8053,8063,8075,8090,8102,8112,8122,8135,8145,8156,8166],{"slug":8038,"name":8038,"fn":8039,"description":8040,"org":8041,"tags":8042,"stars":8050,"repoUrl":8051,"updatedAt":8052},"aggregation","perform data aggregation in TanStack Table","Aggregate TanStack Table columns independently of grouping, including grand totals, caller-selected row totals, multiple keyed aggregations, custom context-based definitions, grouped merges, manual values, and worker constraints.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8043,8046,8049],{"name":8044,"slug":8045,"type":15},"Data Analysis","data-analysis",{"name":8047,"slug":8048,"type":15},"Frontend","frontend",{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:59.429787",{"slug":8054,"name":8054,"fn":8055,"description":8056,"org":8057,"tags":8058,"stars":8050,"repoUrl":8051,"updatedAt":8062},"api-not-found","diagnose TanStack Table API errors","Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8059,8060,8061],{"name":18,"slug":19,"type":15},{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":8064,"name":8064,"fn":8065,"description":8066,"org":8067,"tags":8068,"stars":8050,"repoUrl":8051,"updatedAt":8074},"cell-selection","select rectangular cell ranges in tables","Select rectangular cell ranges with cellSelectionFeature: two-corner range state keyed by row and column id, mousedown\u002Fmouseenter handlers, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load when ranges widen unexpectedly after sorting or column reordering, when a drag re-renders the whole table, or when building copy-to-clipboard from a selection.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8069,8070,8071],{"name":8044,"slug":8045,"type":15},{"name":9,"slug":8,"type":15},{"name":8072,"slug":8073,"type":15},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":8076,"name":8076,"fn":8077,"description":8078,"org":8079,"tags":8080,"stars":8050,"repoUrl":8051,"updatedAt":8089},"client-vs-server","manage TanStack Table data pipelines","Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination in TanStack Table v9. Load for manual* flags, mixed pipelines, server counts, or deciding which dataset each row-model stage receives.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8081,8084,8085,8088],{"name":8082,"slug":8083,"type":15},"Data Pipeline","data-pipeline",{"name":8047,"slug":8048,"type":15},{"name":8086,"slug":8087,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":8091,"name":8091,"fn":8092,"description":8093,"org":8094,"tags":8095,"stars":8050,"repoUrl":8051,"updatedAt":8101},"column-faceting","build faceted filter UIs","Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8096,8099,8100],{"name":8097,"slug":8098,"type":15},"Data Visualization","data-visualization",{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":8103,"name":8103,"fn":8104,"description":8105,"org":8106,"tags":8107,"stars":8050,"repoUrl":8051,"updatedAt":8111},"column-filtering","implement column filtering in TanStack Table","Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client\u002Fserver ownership.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8108,8109,8110],{"name":8044,"slug":8045,"type":15},{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":8113,"name":8113,"fn":8114,"description":8115,"org":8116,"tags":8117,"stars":8050,"repoUrl":8051,"updatedAt":8121},"column-ordering","manage TanStack Table column ordering","Control TanStack Table v9 leaf columnOrder with stable IDs while accounting for pinning regions, visibility, and groupedColumnMode precedence. Load for drag-and-drop columns or rendered order that differs from state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8118,8119,8120],{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},{"name":8072,"slug":8073,"type":15},"2026-07-30T05:26:03.37801",{"slug":8123,"name":8123,"fn":8124,"description":8125,"org":8126,"tags":8127,"stars":8050,"repoUrl":8051,"updatedAt":8134},"column-pinning","configure column pinning in TanStack Table","Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8128,8131,8132,8133],{"name":8129,"slug":8130,"type":15},"CSS","css",{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},{"name":8072,"slug":8073,"type":15},"2026-07-30T05:25:55.377366",{"slug":8136,"name":8136,"fn":8137,"description":8138,"org":8139,"tags":8140,"stars":8050,"repoUrl":8051,"updatedAt":8144},"column-resizing","implement column resizing in TanStack Table","Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8141,8142,8143],{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},{"name":8072,"slug":8073,"type":15},"2026-07-30T05:25:51.400011",{"slug":8146,"name":8146,"fn":8147,"description":8148,"org":8149,"tags":8150,"stars":8050,"repoUrl":8051,"updatedAt":8155},"column-sizing","configure column sizing in TanStack Table","Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing\u002Fpinning layout mismatch.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8151,8152,8153,8154],{"name":8129,"slug":8130,"type":15},{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},{"name":8072,"slug":8073,"type":15},"2026-07-30T05:25:48.703799",{"slug":8157,"name":8157,"fn":8158,"description":8159,"org":8160,"tags":8161,"stars":8050,"repoUrl":8051,"updatedAt":8165},"column-visibility","manage column visibility in TanStack Table","Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Load when hidden columns remain in the DOM, false-versus-absent state is confused, or enableHiding is misunderstood.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8162,8163,8164],{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},{"name":8072,"slug":8073,"type":15},"2026-07-30T05:25:47.367943",{"slug":37,"name":37,"fn":8167,"description":8168,"org":8169,"tags":8170,"stars":8050,"repoUrl":8051,"updatedAt":8174},"build data grids with TanStack Table","Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8171,8172,8173],{"name":8044,"slug":8045,"type":15},{"name":8047,"slug":8048,"type":15},{"name":8072,"slug":8073,"type":15},"2026-07-30T05:25:52.366295",125,{"items":8177,"total":421},[8178,8188,8194,8207,8226,8236,8246],{"slug":8179,"name":8179,"fn":8180,"description":8181,"org":8182,"tags":8183,"stars":20,"repoUrl":21,"updatedAt":8187},"devtools-app-setup","configure TanStack Devtools for applications","Install TanStack Devtools, pick framework adapter (React\u002FVue\u002FSolid\u002FPreact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8184,8185,8186],{"name":18,"slug":19,"type":15},{"name":8047,"slug":8048,"type":15},{"name":9,"slug":8,"type":15},"2026-07-16T06:04:05.544655",{"slug":4,"name":4,"fn":5,"description":6,"org":8189,"tags":8190,"stars":20,"repoUrl":21,"updatedAt":22},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8191,8192,8193],{"name":18,"slug":19,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"slug":40,"name":40,"fn":8195,"description":8196,"org":8197,"tags":8198,"stars":20,"repoUrl":21,"updatedAt":8206},"implement typed event clients for libraries","Create typed EventClient for a library. Define event maps with typed payloads, pluginId auto-prepend namespacing, emit()\u002Fon()\u002FonAll()\u002FonAllPluginEvents() API. Connection lifecycle (5 retries, 300ms), event queuing, enabled\u002Fdisabled state, SSR fallbacks, singleton pattern. Unique pluginId requirement to avoid event collisions.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8199,8202,8205],{"name":8200,"slug":8201,"type":15},"API Development","api-development",{"name":8203,"slug":8204,"type":15},"Engineering","engineering",{"name":9,"slug":8,"type":15},"2026-07-16T06:04:34.254605",{"slug":8208,"name":8208,"fn":8209,"description":8210,"org":8211,"tags":8212,"stars":20,"repoUrl":21,"updatedAt":8225},"devtools-framework-adapters","create framework adapters for devtools","Use devtools-utils factory functions to create per-framework plugin adapters. createReactPlugin\u002FcreateSolidPlugin\u002FcreateVuePlugin\u002FcreatePreactPlugin, createReactPanel\u002FcreateSolidPanel\u002FcreateVuePanel\u002FcreatePreactPanel. [Plugin, NoOpPlugin] tuple for tree-shaking. DevtoolsPanelProps (theme). Vue uses (name, component) not options object. Solid render must be function.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8213,8214,8217,8219,8221,8222],{"name":8203,"slug":8204,"type":15},{"name":8215,"slug":8216,"type":15},"Preact","preact",{"name":8218,"slug":28,"type":15},"React",{"name":8220,"slug":29,"type":15},"SolidJS",{"name":9,"slug":8,"type":15},{"name":8223,"slug":8224,"type":15},"Vue","vue","2026-07-16T06:04:33.553047",{"slug":8019,"name":8019,"fn":8227,"description":8228,"org":8229,"tags":8230,"stars":20,"repoUrl":21,"updatedAt":8235},"instrument library code for devtools","Analyze library codebase for critical architecture and debugging points, add strategic event emissions. Identify middleware boundaries, state transitions, lifecycle hooks. Consolidate events (1 not 15), debounce high-frequency updates, DRY shared payload fields, guard emit() for production. Transparent server\u002Fclient event bridging.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8231,8232,8233,8234],{"name":18,"slug":19,"type":15},{"name":8203,"slug":8204,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},"2026-07-16T06:04:33.21467",{"slug":8237,"name":8237,"fn":8238,"description":8239,"org":8240,"tags":8241,"stars":20,"repoUrl":21,"updatedAt":8245},"devtools-marketplace","publish plugins to TanStack Devtools Marketplace","Publish plugin to npm and submit to TanStack Devtools Marketplace. PluginMetadata registry format, plugin-registry.ts, pluginImport (importName, type), requires (packageName, minVersion), framework tagging, multi-framework submissions, featured plugins.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8242,8244],{"name":8243,"slug":8243,"type":15},"npm",{"name":9,"slug":8,"type":15},"2026-07-16T06:04:09.110642",{"slug":8247,"name":8247,"fn":8248,"description":8249,"org":8250,"tags":8251,"stars":20,"repoUrl":21,"updatedAt":8256},"devtools-plugin-panel","build TanStack devtools panels","Build devtools panel components that display emitted event data. Listen via EventClient.on(), handle theme (light\u002Fdark), use @tanstack\u002Fdevtools-ui components. Plugin registration (name, render, id, defaultOpen), lifecycle (mount, activate, destroy), max 3 active plugins. Two paths: Solid.js core with devtools-ui for multi-framework support, or framework-specific panels.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[8252,8253,8254,8255],{"name":8047,"slug":8048,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":8072,"slug":8073,"type":15},"2026-07-16T06:03:59.434886"]