From cf9d10498303f331aa041e6b61518c46336de9f0 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Fri, 7 Aug 2026 01:25:53 +0200
Subject: [PATCH 01/23] perf: revisit angular adapter to improve memory usage
 and flexrender dirty checking

---
 packages/angular-table/package.json           |   1 +
 .../angular-table/src/flex-render/flags.ts    |  34 ---
 .../src/flex-render/flexRenderComponent.ts    |  90 +++++--
 .../flex-render/flexRenderComponentFactory.ts | 200 ++++++++-------
 .../angular-table/src/flex-render/renderer.ts | 236 ++++++-----------
 .../angular-table/src/flex-render/view.ts     |  47 ++--
 .../src/helpers/flexRenderCell.ts             |   7 +-
 packages/angular-table/src/injectTable.ts     |   5 +-
 packages/angular-table/src/reactivity.ts      |   8 +-
 .../flex-render-component.test-d.ts           |   6 +
 .../tests/flex-render/flex-render.bench.ts    | 239 ++++++++++++++++++
 .../flex-render/flex-render.unit.test.ts      | 153 ++++++++++-
 .../angular-table/tests/injectTable.test.ts   |  15 ++
 13 files changed, 703 insertions(+), 338 deletions(-)
 delete mode 100644 packages/angular-table/src/flex-render/flags.ts
 create mode 100644 packages/angular-table/tests/flex-render/flex-render.bench.ts

diff --git a/packages/angular-table/package.json b/packages/angular-table/package.json
index f416893bdd..e1d39df50d 100644
--- a/packages/angular-table/package.json
+++ b/packages/angular-table/package.json
@@ -56,6 +56,7 @@
   "scripts": {
     "build": "ng-packagr -p ng-package.json -c tsconfig.build.json && rimraf ./dist/package.json && find dist -name '*.map' -delete",
     "build:types": "tsc --emitDeclarationOnly",
+    "bench:flex-render": "vitest bench --run tests/flex-render/flex-render.bench.ts",
     "clean": "rimraf ./build && rimraf ./dist",
     "test:build": "publint --strict",
     "test:eslint": "eslint ./src",
diff --git a/packages/angular-table/src/flex-render/flags.ts b/packages/angular-table/src/flex-render/flags.ts
deleted file mode 100644
index e265c847c8..0000000000
--- a/packages/angular-table/src/flex-render/flags.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Flags used to manage and optimize the rendering lifecycle of the content of the cell
- * while using {@link FlexViewRenderer}.
- */
-export const FlexRenderFlags = {
-  /**
-   * Indicates that the view is being created for the first time or will be cleared during the next update phase.
-   * This is the initial state and will transition after the first ngDoCheck.
-   */
-  ViewFirstRender: 1 << 0,
-  /**
-   * Indicates the `content` property has been modified or the view requires a complete re-render.
-   * When this flag is enabled, the view will be cleared and recreated from scratch.
-   */
-  ContentChanged: 1 << 1,
-  /**
-   * Indicates that the `props` property reference has changed.
-   * When this flag is enabled, the view context is updated based on the type of the content.
-   *
-   * For Component view, inputs will be updated and view will be marked as dirty.
-   * For TemplateRef and primitive values, view will be marked as dirty
-   */
-  PropsReferenceChanged: 1 << 2,
-  /**
-   * Indicates that the current rendered view needs to be checked for changes.
-   * This will be set to true when `content(props)` result has changed or during
-   * forced update
-   */
-  Dirty: 1 << 3,
-  /**
-   * Indicates that the first render effect has been checked at least one time.
-   */
-  RenderEffectChecked: 1 << 4,
-} as const
diff --git a/packages/angular-table/src/flex-render/flexRenderComponent.ts b/packages/angular-table/src/flex-render/flexRenderComponent.ts
index 5dc958c352..113c4596e3 100644
--- a/packages/angular-table/src/flex-render/flexRenderComponent.ts
+++ b/packages/angular-table/src/flex-render/flexRenderComponent.ts
@@ -13,15 +13,50 @@ type CreateComponentOptions = Parameters<typeof createComponent>[1]
 type CreateComponentBindings = CreateComponentOptions['bindings']
 type CreateComponentDirectives = CreateComponentOptions['directives']
 
+interface FlexRenderComponentMetadata<TComponent> {
+  mirror: ComponentMirror<TComponent>
+  allowedInputNames: Array<string>
+  allowedOutputNames: Array<string>
+}
+
+const componentMetadataCache = new WeakMap<
+  Type<unknown>,
+  FlexRenderComponentMetadata<unknown>
+>()
+
 interface FlexRenderOptions<
   TInputs extends Record<string, any>,
   TOutputs extends Record<string, any>,
 > {
+  /**
+   * Optional identity used to control component instance reuse.
+   *
+   * A rendered component is reused while both its component type and key are
+   * unchanged. Change the key to explicitly destroy and recreate the component,
+   * for example when new creation-time bindings, directives, or an injector
+   * need to be applied.
+   *
+   * Inputs and outputs do not affect component identity and are synchronized
+   * onto a reused component instance.
+   *
+   * @example
+   * ```ts
+   * flexRenderComponent(EditorComponent, {
+   *   key: row.original.editorVersion,
+   *   inputs: { value: row.original.value },
+   * })
+   * ```
+   */
+  readonly key?: string | number
   /**
    * Native Angular bindings applied at component creation time via `createComponent`.
    * Use this option to set inputs, outputs, or two-way bindings at creation time.
    * Shouldn't be used together with {@link FlexRenderOptions#inputs} or {@link FlexRenderOptions#outputs} option.
    *
+   * Bindings are creation-time configuration. Changing this array after the
+   * component has mounted does not update the existing component. Change
+   * {@link FlexRenderOptions#key} to recreate the component with new bindings.
+   *
    * Binding input/outputs at creation time: {@link https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation}
    *
    * Two-way binding: {@link https://angular.dev/api/core/twoWayBinding}
@@ -54,6 +89,10 @@ interface FlexRenderOptions<
   /**
    * Directives to apply to the component at creation time.
    *
+   * Directives are creation-time configuration. Changing this array after the
+   * component has mounted does not update the existing component. Change
+   * {@link FlexRenderOptions#key} to recreate the component with new directives.
+   *
    * Binding directives at creation time: {@link https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation}
    *
    * Two-way binding: {@link https://angular.dev/api/core/twoWayBinding}
@@ -101,7 +140,11 @@ interface FlexRenderOptions<
    */
   readonly outputs?: TOutputs
   /**
-   * Optional {@link Injector} that will be used when rendering the component
+   * Optional {@link Injector} that will be used when rendering the component.
+   *
+   * The injector is applied when the component is created. Change
+   * {@link FlexRenderOptions#key} to recreate a mounted component with a
+   * different injector.
    */
   readonly injector?: Injector
 }
@@ -151,7 +194,7 @@ export function flexRenderComponent<TComponent = any>(
   component: Type<TComponent>,
   options?: FlexRenderOptions<Inputs<TComponent>, Outputs<TComponent>>,
 ): FlexRenderComponent<TComponent> {
-  const { inputs, injector, outputs, directives, bindings } = options ?? {}
+  const { key, inputs, injector, outputs, directives, bindings } = options ?? {}
   return new FlexRenderComponentInstance(
     component,
     inputs,
@@ -159,6 +202,7 @@ export function flexRenderComponent<TComponent = any>(
     outputs,
     directives,
     bindings,
+    key,
   )
 }
 
@@ -207,6 +251,13 @@ export interface FlexRenderComponent<TComponent = any> {
    * The component type
    */
   readonly component: Type<TComponent>
+  /**
+   * Optional identity used together with the component type to decide whether
+   * an existing component instance can be reused.
+   *
+   * @see {@link FlexRenderOptions#key}
+   */
+  readonly key?: string | number
   /**
    * Reflected metadata about the component.
    */
@@ -260,8 +311,8 @@ export class FlexRenderComponentInstance<
   TComponent = any,
 > implements FlexRenderComponent<TComponent> {
   readonly mirror: ComponentMirror<TComponent>
-  readonly allowedInputNames: Array<string> = []
-  readonly allowedOutputNames: Array<string> = []
+  readonly allowedInputNames: Array<string>
+  readonly allowedOutputNames: Array<string>
 
   constructor(
     readonly component: Type<TComponent>,
@@ -270,19 +321,26 @@ export class FlexRenderComponentInstance<
     readonly outputs?: Outputs<TComponent>,
     readonly directives?: CreateComponentDirectives,
     readonly bindings?: CreateComponentBindings,
+    readonly key?: string | number,
   ) {
-    const mirror = reflectComponentType(component)
-    if (!mirror) {
-      throw new Error(
-        `[@tanstack-table/angular] The provided symbol is not a component`,
-      )
-    }
-    this.mirror = mirror
-    for (const input of this.mirror.inputs) {
-      this.allowedInputNames.push(input.propName)
-    }
-    for (const output of this.mirror.outputs) {
-      this.allowedOutputNames.push(output.propName)
+    let metadata = componentMetadataCache.get(component) as
+      FlexRenderComponentMetadata<TComponent> | undefined
+    if (!metadata) {
+      const mirror = reflectComponentType(component)
+      if (!mirror) {
+        throw new Error(
+          `[@tanstack-table/angular] The provided symbol is not a component`,
+        )
+      }
+      metadata = {
+        mirror,
+        allowedInputNames: mirror.inputs.map((input) => input.propName),
+        allowedOutputNames: mirror.outputs.map((output) => output.propName),
+      }
+      componentMetadataCache.set(component, metadata)
     }
+    this.mirror = metadata.mirror
+    this.allowedInputNames = metadata.allowedInputNames
+    this.allowedOutputNames = metadata.allowedOutputNames
   }
 }
diff --git a/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts b/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
index 0cd39c79ea..ad93672e46 100644
--- a/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
+++ b/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
@@ -3,13 +3,33 @@ import {
   ComponentRef,
   Injectable,
   Injector,
-  KeyValueDiffer,
-  KeyValueDiffers,
   OutputEmitterRef,
   OutputRefSubscription,
   ViewContainerRef,
 } from '@angular/core'
 import { FlexRenderComponent } from './flexRenderComponent'
+import type { Type } from '@angular/core'
+
+const inputNameCache = new WeakMap<Type<unknown>, Map<string, string>>()
+const hasOwn = (value: object, key: PropertyKey): boolean =>
+  Object.prototype.hasOwnProperty.call(value, key)
+
+function getInputName<T>(
+  componentData: FlexRenderComponent<T>,
+  propName: string,
+): string | undefined {
+  let names = inputNameCache.get(componentData.component)
+  if (!names) {
+    names = new Map(
+      componentData.mirror.inputs.map((input) => [
+        input.propName,
+        input.templateName,
+      ]),
+    )
+    inputNameCache.set(componentData.component, names)
+  }
+  return names.get(propName)
+}
 
 /**
  * Creates and manages Angular component instances used by flex-rendered table
@@ -32,7 +52,7 @@ export class FlexRenderComponentFactory {
       {
         injector: componentInjector,
         directives: flexRenderComponent.directives,
-        bindings: flexRenderComponent.bindings ?? [],
+        bindings: flexRenderComponent.bindings,
       },
     )
     const view = new FlexRenderComponentRef(
@@ -57,10 +77,9 @@ export class FlexRenderComponentFactory {
  * be reused instead of recreated on every cell/header render.
  */
 export class FlexRenderComponentRef<T> {
-  readonly #keyValueDiffersFactory: KeyValueDiffers
   #componentData: FlexRenderComponent<T>
-  #inputValueDiffer: KeyValueDiffer<string, unknown>
-
+  readonly #inputValues: Record<string, unknown> = {}
+  readonly #creationKey: FlexRenderComponent<T>['key']
   readonly #outputRegistry: FlexRenderComponentOutputManager
 
   constructor(
@@ -69,17 +88,8 @@ export class FlexRenderComponentRef<T> {
     readonly componentInjector: Injector,
   ) {
     this.#componentData = componentData
-    this.#keyValueDiffersFactory = componentInjector.get(KeyValueDiffers)
-
-    this.#outputRegistry = new FlexRenderComponentOutputManager(
-      this.#keyValueDiffersFactory,
-      this.outputs,
-    )
-
-    this.#inputValueDiffer = this.#keyValueDiffersFactory
-      .find(this.inputs)
-      .create()
-    this.#inputValueDiffer.diff(this.inputs)
+    this.#creationKey = componentData.key
+    this.#outputRegistry = new FlexRenderComponentOutputManager()
 
     this.componentRef.onDestroy(() => this.#outputRegistry.unsubscribeAll())
   }
@@ -96,15 +106,6 @@ export class FlexRenderComponentRef<T> {
     return this.#componentData.outputs ?? {}
   }
 
-  /**
-   * Get component input and output diff by the given item
-   */
-  diff(item: FlexRenderComponent<T>) {
-    return {
-      inputDiff: this.#inputValueDiffer.diff(item.inputs ?? {}),
-      outputDiff: this.#outputRegistry.diff(item.outputs ?? {}),
-    }
-  }
   /**
    *
    * @param compare Whether the current ref component instance is the same as the given one
@@ -113,37 +114,18 @@ export class FlexRenderComponentRef<T> {
     return compare.component === this.component
   }
 
+  canReuse(compare: FlexRenderComponent<T>): boolean {
+    return this.eqType(compare) && Object.is(compare.key, this.#creationKey)
+  }
+
   /**
    * Tries to update current component refs input by the new given content component.
    */
-  update(content: FlexRenderComponent<T>) {
-    const eq = this.eqType(content)
-    if (!eq) return
-    const { inputDiff, outputDiff } = this.diff(content)
-    if (inputDiff) {
-      inputDiff.forEachAddedItem((item) =>
-        this.setInput(item.key, item.currentValue),
-      )
-      inputDiff.forEachChangedItem((item) =>
-        this.setInput(item.key, item.currentValue),
-      )
-      inputDiff.forEachRemovedItem((item) => this.setInput(item.key, undefined))
-    }
-    if (outputDiff) {
-      outputDiff.forEachAddedItem((item) => {
-        this.setOutput(item.key, item.currentValue)
-      })
-      outputDiff.forEachChangedItem((item) => {
-        if (item.currentValue) {
-          this.#outputRegistry.setListener(item.key, item.currentValue)
-        } else {
-          this.#outputRegistry.unsubscribe(item.key)
-        }
-      })
-      outputDiff.forEachRemovedItem((item) => {
-        this.#outputRegistry.unsubscribe(item.key)
-      })
-    }
+  update(content: FlexRenderComponent<T>): void {
+    if (!this.canReuse(content)) return
+
+    this.#syncInputs(content.inputs ?? {})
+    this.#syncOutputs(content.outputs ?? {})
 
     this.#componentData = content
   }
@@ -154,13 +136,21 @@ export class FlexRenderComponentRef<T> {
 
   setInputs(inputs: Record<string, unknown>) {
     for (const prop in inputs) {
-      this.setInput(prop, inputs[prop])
+      if (hasOwn(inputs, prop)) {
+        this.setInput(prop, inputs[prop])
+      }
     }
   }
 
+  updateInputs(inputs: Record<string, unknown>): void {
+    this.#syncInputs(inputs)
+  }
+
   setInput(key: string, value: unknown) {
-    if (this.#componentData.allowedInputNames.includes(key)) {
-      this.componentRef.setInput(key, value)
+    const inputName = getInputName(this.#componentData, key)
+    if (inputName) {
+      this.componentRef.setInput(inputName, value)
+      this.#inputValues[key] = value
     }
   }
 
@@ -172,7 +162,9 @@ export class FlexRenderComponentRef<T> {
   ) {
     this.#outputRegistry.unsubscribeAll()
     for (const prop in outputs) {
-      this.setOutput(prop, outputs[prop])
+      if (hasOwn(outputs, prop)) {
+        this.setOutput(prop, outputs[prop])
+      }
     }
   }
 
@@ -186,41 +178,70 @@ export class FlexRenderComponentRef<T> {
       return
     }
 
-    const hasListener = this.#outputRegistry.hasListener(outputName)
+    const hasSubscription = this.#outputRegistry.hasSubscription(outputName)
     this.#outputRegistry.setListener(outputName, emit)
 
-    if (hasListener) {
+    if (hasSubscription) {
       return
     }
 
     const instance = this.componentRef.instance
     const output = instance[outputName as keyof typeof instance]
     if (output && output instanceof OutputEmitterRef) {
-      output.subscribe((value) => {
-        this.#outputRegistry.getListener(outputName)?.(value)
-      })
+      this.#outputRegistry.setSubscription(
+        outputName,
+        output.subscribe((value) => {
+          this.#outputRegistry.getListener(outputName)?.(value)
+        }),
+      )
     }
   }
+
+  #syncInputs(inputs: Record<string, unknown>): void {
+    for (const prop in inputs) {
+      if (
+        hasOwn(inputs, prop) &&
+        (!hasOwn(this.#inputValues, prop) ||
+          !Object.is(this.#inputValues[prop], inputs[prop]))
+      ) {
+        this.setInput(prop, inputs[prop])
+      }
+    }
+    for (const prop in this.#inputValues) {
+      if (!hasOwn(inputs, prop)) {
+        const inputName = getInputName(this.#componentData, prop)
+        if (inputName) {
+          this.componentRef.setInput(inputName, undefined)
+        }
+        delete this.#inputValues[prop]
+      }
+    }
+  }
+
+  #syncOutputs(
+    outputs: Record<
+      string,
+      OutputEmitterRef<unknown>['emit'] | null | undefined
+    >,
+  ): void {
+    for (const prop in outputs) {
+      if (
+        hasOwn(outputs, prop) &&
+        !Object.is(this.#outputRegistry.getListener(prop), outputs[prop])
+      ) {
+        this.setOutput(prop, outputs[prop])
+      }
+    }
+    this.#outputRegistry.unsubscribeMissing(outputs)
+  }
 }
 
 class FlexRenderComponentOutputManager {
   readonly #outputSubscribers: Record<string, OutputRefSubscription> = {}
   readonly #outputListeners: Record<string, (...args: Array<any>) => void> = {}
 
-  readonly #valueDiffer: KeyValueDiffer<
-    string,
-    undefined | null | OutputEmitterRef<unknown>['emit']
-  >
-
-  constructor(keyValueDiffers: KeyValueDiffers, initialOutputs: any) {
-    this.#valueDiffer = keyValueDiffers.find(initialOutputs).create()
-    if (initialOutputs) {
-      this.#valueDiffer.diff(initialOutputs)
-    }
-  }
-
-  hasListener(outputName: string) {
-    return outputName in this.#outputListeners
+  hasSubscription(outputName: string) {
+    return outputName in this.#outputSubscribers
   }
 
   setListener(outputName: string, callback: (...args: Array<any>) => void) {
@@ -231,21 +252,30 @@ class FlexRenderComponentOutputManager {
     return this.#outputListeners[outputName]
   }
 
+  setSubscription(
+    outputName: string,
+    subscription: OutputRefSubscription,
+  ): void {
+    this.#outputSubscribers[outputName] = subscription
+  }
+
   unsubscribeAll(): void {
-    for (const prop in this.#outputSubscribers) {
+    for (const prop in this.#outputListeners) {
       this.unsubscribe(prop)
     }
   }
 
-  unsubscribe(outputName: string) {
-    if (outputName in this.#outputSubscribers) {
-      this.#outputSubscribers[outputName]?.unsubscribe()
-      delete this.#outputSubscribers[outputName]
-      delete this.#outputListeners[outputName]
+  unsubscribeMissing(outputs: Record<string, unknown>): void {
+    for (const prop in this.#outputListeners) {
+      if (!hasOwn(outputs, prop)) {
+        this.unsubscribe(prop)
+      }
     }
   }
 
-  diff(outputs: Record<string, OutputEmitterRef<unknown>['emit'] | undefined>) {
-    return this.#valueDiffer.diff(outputs)
+  unsubscribe(outputName: string) {
+    this.#outputSubscribers[outputName]?.unsubscribe()
+    delete this.#outputSubscribers[outputName]
+    delete this.#outputListeners[outputName]
   }
 }
diff --git a/packages/angular-table/src/flex-render/renderer.ts b/packages/angular-table/src/flex-render/renderer.ts
index 20064719ff..bc56f1bb78 100644
--- a/packages/angular-table/src/flex-render/renderer.ts
+++ b/packages/angular-table/src/flex-render/renderer.ts
@@ -1,6 +1,5 @@
 import {
   Injector,
-  computed,
   effect,
   runInInjectionContext,
   untracked,
@@ -9,7 +8,6 @@ import { TanStackTableCellToken } from '../helpers/cell'
 import { TanStackTableHeaderToken } from '../helpers/header'
 import { TanStackTableToken } from '../helpers/table'
 import { FlexRenderComponentProps } from './context'
-import { FlexRenderFlags } from './flags'
 import { flexRenderComponent } from './flexRenderComponent'
 import { FlexRenderComponentFactory } from './flexRenderComponentFactory'
 import {
@@ -109,12 +107,12 @@ export class FlexViewRenderer<
     | CellContext<TFeatures, TRowData, TValue>
     | HeaderContext<TFeatures, TRowData, TValue>,
 > {
-  #renderFlags = FlexRenderFlags.ViewFirstRender
   #renderView: FlexRenderView<
     FlexRenderViewAllowedType,
     FlexRenderTypedContent
   > | null = null
-  #currentRenderEffectRef: EffectRef | null = null
+  #renderEffectRef: EffectRef | null = null
+  #previousProps: TProps | undefined
   #content: () => FlexRenderInputContent<TProps>
   #props: () => TProps
   #injector: () => Injector
@@ -122,21 +120,6 @@ export class FlexViewRenderer<
   #templateRef: TemplateRef<unknown>
   #flexRenderComponentFactory: FlexRenderComponentFactory
 
-  readonly #getLatestContentValue = () => {
-    const content = this.#content()
-    const props = this.#props()
-    return typeof content !== 'function'
-      ? content
-      : runInInjectionContext(this.#injector(), () => content(props))
-  }
-
-  readonly #latestContent = computed(() => this.#getLatestContentValue())
-
-  #getContentValue = computed(() => {
-    const latestContent = this.#latestContent()
-    return mapToFlexRenderTypedContent(latestContent)
-  })
-
   constructor(options: RendererViewOptions<TProps>) {
     this.#content = options.content
     this.#props = options.props
@@ -149,180 +132,123 @@ export class FlexViewRenderer<
   }
 
   mount(): EffectRef {
-    let previousContent: FlexRenderInputContent<TProps>
-    let previousProps: TProps
-
-    return effect(() => {
-      const props = this.#props()
-      const content = this.#content()
-
-      if (!(this.#renderFlags & FlexRenderFlags.ViewFirstRender)) {
-        if (previousContent !== content) {
-          this.#renderFlags |= FlexRenderFlags.ContentChanged
-        }
-        if (previousProps !== props) {
-          this.#renderFlags |= FlexRenderFlags.PropsReferenceChanged
-        }
-      }
-
-      untracked(() => this.#update())
+    if (this.#renderEffectRef) {
+      return this.#renderEffectRef
+    }
 
-      if (FlexRenderFlags.ViewFirstRender & this.#renderFlags) {
-        this.#renderFlags &= ~FlexRenderFlags.ViewFirstRender
-      }
+    this.#renderEffectRef = effect(
+      () => {
+        const content = this.#content()
+        const props = this.#props()
+        const injector = this.#injector()
+        const resolvedContent =
+          typeof content === 'function'
+            ? runInInjectionContext(injector, () => content(props))
+            : content
+
+        untracked(() =>
+          this.#update(
+            mapToFlexRenderTypedContent(resolvedContent),
+            props,
+            injector,
+          ),
+        )
+      },
+      { injector: this.#viewContainerRef.injector },
+    )
 
-      previousContent = content
-      previousProps = props
-    })
+    return this.#renderEffectRef
   }
 
   destroy(): void {
-    if (this.#currentRenderEffectRef) {
-      this.#currentRenderEffectRef.destroy()
-      this.#currentRenderEffectRef = null
-    }
-    if (this.#renderView) {
-      this.#renderView.unmount()
-      this.#renderView = null
+    if (this.#renderEffectRef) {
+      this.#renderEffectRef.destroy()
+      this.#renderEffectRef = null
     }
+    this.#destroyView()
   }
 
-  #update() {
-    if (
-      this.#renderFlags &
-      (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)
-    ) {
-      this.#render()
+  #update(
+    content: FlexRenderTypedContent,
+    props: TProps,
+    injector: Injector,
+  ): void {
+    if (content.kind === 'null') {
+      this.#destroyView()
+      this.#previousProps = props
       return
     }
 
-    if (this.#renderFlags & FlexRenderFlags.PropsReferenceChanged) {
-      if (this.#renderView) this.#renderView.updateProps(this.#props())
-      this.#renderFlags &= ~FlexRenderFlags.PropsReferenceChanged
+    const parentInjector =
+      content.kind === 'flexRenderComponent'
+        ? (content.content.injector ?? injector)
+        : injector
+    const renderView = this.#renderView
+
+    if (!renderView || !renderView.eq(content)) {
+      this.#render(content, props, parentInjector)
+      return
     }
 
-    if (this.#renderFlags & FlexRenderFlags.Dirty) {
-      if (this.#renderView) this.#renderView.dirtyCheck()
-      this.#renderFlags &= ~FlexRenderFlags.Dirty
+    const propsChanged = this.#previousProps !== props
+    renderView.content = content
+    if (propsChanged) {
+      renderView.updateProps(props)
     }
+    renderView.dirtyCheck()
+    this.#previousProps = props
   }
 
-  #render() {
-    // When the view is recreated from scratch (content change or first render),
-    // we have to destroy the current effect listener since it will be recreated
-    // skipping the first call (FlexRenderFlags.RenderEffectChecked)
-    if (this.#shouldRecreateEntireView() && this.#currentRenderEffectRef) {
-      this.#currentRenderEffectRef.destroy()
-      this.#currentRenderEffectRef = null
-      this.#renderFlags &= ~FlexRenderFlags.RenderEffectChecked
-    }
+  #render(
+    content: Exclude<FlexRenderTypedContent, { kind: 'null' }>,
+    props: TProps,
+    parentInjector: Injector,
+  ): void {
+    this.#destroyView()
+    this.#renderView = this.#renderViewByContent(content, props, parentInjector)
+    this.#previousProps = props
+  }
 
-    this.#viewContainerRef.clear()
+  #destroyView(): void {
     if (this.#renderView) {
       this.#renderView.unmount()
       this.#renderView = null
     }
-
-    this.#renderFlags =
-      (this.#renderFlags & FlexRenderFlags.ViewFirstRender) |
-      (this.#renderFlags & FlexRenderFlags.RenderEffectChecked)
-
-    const resolvedContent = this.#getContentValue()
-    this.#renderView = this.#renderViewByContent(resolvedContent)
-    // If the content is a function `content(props)`, we initialize an effect
-    // to react to changes. If the current fn uses signals, we will set the DirtySignal flag
-    // to re-schedule the component updates
-    if (
-      !this.#currentRenderEffectRef &&
-      typeof untracked(this.#content) === 'function'
-    ) {
-      this.#currentRenderEffectRef = effect(
-        () => {
-          this.#latestContent()
-          if (!(this.#renderFlags & FlexRenderFlags.RenderEffectChecked)) {
-            this.#renderFlags |= FlexRenderFlags.RenderEffectChecked
-            return
-          }
-          this.#renderFlags |= FlexRenderFlags.Dirty
-          this.#doCheck()
-        },
-        { injector: this.#viewContainerRef.injector },
-      )
-    }
-  }
-
-  #shouldRecreateEntireView() {
-    return (
-      this.#renderFlags &
-      FlexRenderFlags.ContentChanged &
-      FlexRenderFlags.ViewFirstRender
-    )
-  }
-
-  #doCheck() {
-    const latestContent = this.#getContentValue()
-    if (latestContent.kind === 'null' || !this.#renderView) {
-      this.#renderFlags |= FlexRenderFlags.ContentChanged
-    } else {
-      const { kind: currentKind } = this.#renderView.content
-      if (
-        latestContent.kind !== currentKind ||
-        !this.#renderView.eq(latestContent)
-      ) {
-        this.#renderFlags |= FlexRenderFlags.ContentChanged
-      }
-      this.#renderView.content = latestContent
-    }
-    this.#update()
   }
 
   #renderViewByContent(
-    content: FlexRenderTypedContent,
+    content: Exclude<FlexRenderTypedContent, { kind: 'null' }>,
+    props: TProps,
+    parentInjector: Injector,
   ): FlexRenderView<FlexRenderViewAllowedType, FlexRenderTypedContent> | null {
     if (content.kind === 'primitive') {
       return this.#renderStringContent(content)
     } else if (content.kind === 'templateRef') {
-      return this.#renderTemplateRefContent(content)
+      return this.#renderTemplateRefContent(content, props, parentInjector)
     } else if (content.kind === 'flexRenderComponent') {
-      return this.#renderComponent(content)
-    } else if (content.kind === 'component') {
-      return this.#renderCustomComponent(content)
-    } else {
-      return null
+      return this.#renderComponent(content, parentInjector)
     }
+    return this.#renderCustomComponent(content, props, parentInjector)
   }
 
   #renderStringContent(
     template: Extract<FlexRenderTypedContent, { kind: 'primitive' }>,
   ): FlexRenderTemplateView {
-    const context = () => {
-      const content = this.#content()
-      return typeof content === 'string' || typeof content === 'number'
-        ? content
-        : runInInjectionContext(this.#injector(), () =>
-            content?.(this.#props()),
-          )
-    }
     const ref = this.#viewContainerRef.createEmbeddedView(this.#templateRef, {
-      get $implicit() {
-        return context()
-      },
+      $implicit: template.content,
     })
     return new FlexRenderTemplateView(template, ref)
   }
 
   #renderTemplateRefContent(
     template: Extract<FlexRenderTypedContent, { kind: 'templateRef' }>,
+    props: TProps,
+    parentInjector: Injector,
   ): FlexRenderTemplateView {
-    const latestContext = () => this.#props()
     const view = this.#viewContainerRef.createEmbeddedView(
       template.content,
-      {
-        get $implicit() {
-          return latestContext()
-        },
-      },
-      { injector: this.#getInjector() },
+      { $implicit: props },
+      { injector: this.#getInjector(parentInjector) },
     )
     return new FlexRenderTemplateView(template, view)
   }
@@ -332,9 +258,9 @@ export class FlexViewRenderer<
       FlexRenderTypedContent,
       { kind: 'flexRenderComponent' }
     >,
+    parentInjector: Injector,
   ): FlexRenderComponentView {
-    const { injector } = flexRenderComponent.content
-    const componentInjector = this.#getInjector(injector)
+    const componentInjector = this.#getInjector(parentInjector)
     const view = this.#flexRenderComponentFactory.createComponent(
       flexRenderComponent.content,
       componentInjector,
@@ -344,11 +270,13 @@ export class FlexViewRenderer<
 
   #renderCustomComponent(
     component: Extract<FlexRenderTypedContent, { kind: 'component' }>,
+    props: TProps,
+    parentInjector: Injector,
   ): FlexRenderComponentView {
     const instance = flexRenderComponent(component.content, {
-      inputs: this.#props(),
+      inputs: props,
     })
-    const injector = this.#getInjector(instance.injector)
+    const injector = this.#getInjector(parentInjector)
     const view = this.#flexRenderComponentFactory.createComponent(
       instance,
       injector,
@@ -356,7 +284,7 @@ export class FlexViewRenderer<
     return new FlexRenderComponentView(component, view)
   }
 
-  #getInjector(parentInjector?: Injector) {
+  #getInjector(parentInjector: Injector) {
     const getContext = () => this.#props()
     const proxy = new Proxy(this.#props(), {
       get: (_, key) => getContext()[key as keyof typeof _],
@@ -383,7 +311,7 @@ export class FlexViewRenderer<
     }
 
     return Injector.create({
-      parent: parentInjector ?? this.#injector(),
+      parent: parentInjector,
       providers: [
         ...staticProviders,
         { provide: FlexRenderComponentProps, useValue: proxy },
diff --git a/packages/angular-table/src/flex-render/view.ts b/packages/angular-table/src/flex-render/view.ts
index 39e93c2675..26fae5b640 100644
--- a/packages/angular-table/src/flex-render/view.ts
+++ b/packages/angular-table/src/flex-render/view.ts
@@ -78,8 +78,6 @@ export abstract class FlexRenderView<
 
   abstract dirtyCheck(): void
 
-  abstract onDestroy(callback: Function): void
-
   abstract eq(view: TContent): boolean
 
   abstract unmount(): void
@@ -106,26 +104,30 @@ export class FlexRenderTemplateView extends FlexRenderView<
   }
 
   override updateProps(_props: Record<string, any>) {
-    this.view.markForCheck()
+    if (this.content.kind === 'templateRef') {
+      const context = this.view.context as { $implicit: unknown }
+      context.$implicit = _props
+      this.view.markForCheck()
+    }
   }
 
   override dirtyCheck() {
-    // Basically a no-op. When the view is created via EmbeddedViewRef, we don't need to do any manual update
-    // since this type of content has a proxy as a context, then every time the root component is checked for changes,
-    // the property getter will be re-evaluated.
-    //
-    // If in a future we need to manually mark the view as dirty, just uncomment next line
-    // this.view.markForCheck()
+    if (this.content.kind !== 'primitive') return
+
+    const context = this.view.context as { $implicit: unknown }
+    context.$implicit = this.content.content
+    if (
+      this.previousContent.kind !== 'primitive' ||
+      !Object.is(this.previousContent.content, this.content.content)
+    ) {
+      this.view.markForCheck()
+    }
   }
 
   override unmount() {
     this.view.destroy()
   }
 
-  override onDestroy(callback: Function) {
-    this.view.onDestroy(callback)
-  }
-
   override eq(
     compare: Extract<
       FlexRenderTypedContent,
@@ -133,9 +135,7 @@ export class FlexRenderTemplateView extends FlexRenderView<
     >,
   ): boolean {
     return (
-      (this.content.kind === 'primitive' &&
-        compare.kind === 'primitive' &&
-        this.content.content === compare.content) ||
+      (this.content.kind === 'primitive' && compare.kind === 'primitive') ||
       (this.content.kind === 'templateRef' &&
         compare.kind === 'templateRef' &&
         this.content.content === compare.content)
@@ -166,12 +166,12 @@ export class FlexRenderComponentView extends FlexRenderView<
   override updateProps(props: Record<string, any>) {
     switch (this.content.kind) {
       case 'component': {
-        this.view.setInputs(props)
+        this.view.updateInputs(props)
         break
       }
       case 'flexRenderComponent': {
-        // No-op. When FlexRenderFlags.PropsReferenceChanged is set,
-        // FlexRenderComponent will be updated into `dirtyCheck`.
+        // Wrapper inputs and outputs come from the newly resolved content and
+        // are synchronized in `dirtyCheck`.
         break
       }
     }
@@ -187,8 +187,7 @@ export class FlexRenderComponentView extends FlexRenderView<
         break
       }
       case 'flexRenderComponent': {
-        // Given context instance will always have a different reference than the previous one,
-        // so instead of recreating the entire view, we will only update the current view
+        // Reuse the component and synchronize only changed inputs and outputs.
         if (this.view.eqType(this.content.content)) {
           this.view.update(this.content.content)
         }
@@ -202,10 +201,6 @@ export class FlexRenderComponentView extends FlexRenderView<
     this.view.componentRef.destroy()
   }
 
-  override onDestroy(callback: Function) {
-    this.view.componentRef.onDestroy(callback)
-  }
-
   override eq(
     compare: Extract<
       FlexRenderTypedContent,
@@ -218,7 +213,7 @@ export class FlexRenderComponentView extends FlexRenderView<
         this.content.content === compare.content) ||
       (this.content.kind === 'flexRenderComponent' &&
         compare.kind === 'flexRenderComponent' &&
-        this.content.content.component === compare.content.component)
+        this.view.canReuse(compare.content))
     )
   }
 }
diff --git a/packages/angular-table/src/helpers/flexRenderCell.ts b/packages/angular-table/src/helpers/flexRenderCell.ts
index 20f3a432f3..b96f02952d 100644
--- a/packages/angular-table/src/helpers/flexRenderCell.ts
+++ b/packages/angular-table/src/helpers/flexRenderCell.ts
@@ -130,12 +130,9 @@ export class FlexRenderCell<
   readonly #viewContainerRef = inject(ViewContainerRef)
 
   constructor() {
-    const content = computed(() => this.#renderData()[0])
-    const props = computed(() => this.#renderData()[1])
-
     const renderer = new FlexViewRenderer<TFeatures, TData, TValue, any>({
-      content: content,
-      props: props,
+      content: () => this.#renderData()[0],
+      props: () => this.#renderData()[1],
       injector: () => this.#injector,
       templateRef: this.#templateRef,
       viewContainerRef: this.#viewContainerRef,
diff --git a/packages/angular-table/src/injectTable.ts b/packages/angular-table/src/injectTable.ts
index 3486e93f7c..9cfeaca45a 100644
--- a/packages/angular-table/src/injectTable.ts
+++ b/packages/angular-table/src/injectTable.ts
@@ -99,14 +99,15 @@ export function injectTable<
 
   return ngZone.runOutsideAngular(() =>
     lazyInit(() => {
+      const initialOptions = options()
       // Explicit type arguments skip generic inference from the spread object
       // (a type-check hot spot); the spread only adds the angular reactivity
       // binding to `features`.
       const table = constructTable<TFeatures, TData>({
-        ...options(),
+        ...initialOptions,
         features: {
           coreReactivityFeature: angularReactivity(injector),
-          ...options().features,
+          ...initialOptions.features,
         },
       })
 
diff --git a/packages/angular-table/src/reactivity.ts b/packages/angular-table/src/reactivity.ts
index d35e0269ce..581e07f13e 100644
--- a/packages/angular-table/src/reactivity.ts
+++ b/packages/angular-table/src/reactivity.ts
@@ -21,9 +21,7 @@ function signalToReadonlyAtom<T>(
     get: () => signal(),
     subscribe: (observer: Observer<T>) => {
       return untracked(() =>
-        toObservable(computed(signal), { injector: injector }).subscribe(
-          observer,
-        ),
+        toObservable(signal, { injector: injector }).subscribe(observer),
       )
     },
   })
@@ -47,9 +45,7 @@ function signalToWritableAtom<T>(
     get: () => signal(),
     subscribe: (observer: Observer<T>) => {
       return untracked(() =>
-        toObservable(computed(signal), { injector: injector }).subscribe(
-          observer,
-        ),
+        toObservable(signal, { injector: injector }).subscribe(observer),
       )
     },
   })
diff --git a/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts b/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
index 698ec30ad7..638f90e400 100644
--- a/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
+++ b/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
@@ -12,4 +12,10 @@ test('Infer component inputs', () => {
 
   // Input is optional so we can skip passing the property
   flexRenderComponent(Test, { inputs: {} })
+
+  flexRenderComponent(Test, { key: 'stable-key' })
+  flexRenderComponent(Test, { key: 1 })
+
+  // @ts-expect-error Keys must have stable primitive identity
+  flexRenderComponent(Test, { key: {} })
 })
diff --git a/packages/angular-table/tests/flex-render/flex-render.bench.ts b/packages/angular-table/tests/flex-render/flex-render.bench.ts
new file mode 100644
index 0000000000..76e8a02a1c
--- /dev/null
+++ b/packages/angular-table/tests/flex-render/flex-render.bench.ts
@@ -0,0 +1,239 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { bench, describe } from 'vitest'
+import {
+  FlexRender,
+  flexRenderComponent,
+  injectTable,
+  stockFeatures,
+} from '../../src'
+import type { ColumnDef } from '../../src'
+
+const benchmarkOptions = { time: 2_000, warmupTime: 500 }
+
+@Component({
+  template: `
+    {{ tick() }}
+    @for (item of items; track item) {
+      <ng-container *flexRender="render; props: context; let value">
+        {{ value }}
+      </ng-container>
+    }
+  `,
+  imports: [FlexRender],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class PrimitiveTable {
+  readonly items = Array.from({ length: 500 }, (_, index) => index)
+  readonly value = signal('value')
+  readonly tick = signal(0)
+  readonly context = {}
+  readonly render = () => this.value()
+}
+
+@Component({
+  template: ``,
+})
+class RenderedComponent {}
+
+describe('flexRender hot paths', () => {
+  const fixture = TestBed.createComponent(PrimitiveTable)
+  fixture.detectChanges()
+
+  bench(
+    'unrelated change detection for 500 primitive cells',
+    () => {
+      fixture.componentInstance.tick.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'create 500 component render descriptors',
+    () => {
+      for (let index = 0; index < 500; index++) {
+        flexRenderComponent(RenderedComponent)
+      }
+    },
+    benchmarkOptions,
+  )
+})
+
+interface BenchmarkRow {
+  id: string
+  values: Array<string>
+}
+
+const rowCount = 100
+const columnCount = 12
+const largeTableData: Array<BenchmarkRow> = Array.from(
+  { length: rowCount },
+  (_, rowIndex) => ({
+    id: `row-${rowIndex}`,
+    values: Array.from(
+      { length: columnCount },
+      (_, columnIndex) => `${rowIndex}:${columnIndex}`,
+    ),
+  }),
+)
+const handleActivate = () => {}
+
+@Component({
+  selector: 'benchmark-cell-a',
+  template: `<button (click)="activate.emit()">
+    A {{ value() }}:{{ version() }}
+  </button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class BenchmarkCellA {
+  readonly value = input.required<string>()
+  readonly version = input.required<number>()
+  readonly activate = output<void>()
+}
+
+@Component({
+  selector: 'benchmark-cell-b',
+  template: `<button (click)="activate.emit()">
+    B {{ value() }}:{{ version() }}
+  </button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class BenchmarkCellB {
+  readonly value = input.required<string>()
+  readonly version = input.required<number>()
+  readonly activate = output<void>()
+}
+
+@Component({
+  template: `
+    <span data-host-tick>{{ hostTick() }}</span>
+    <table>
+      <tbody>
+        @for (row of table.getRowModel().rows; track row.id) {
+          <tr>
+            @for (cell of row.getVisibleCells(); track cell.id) {
+              <td>
+                <ng-container *flexRenderCell="cell; let value">
+                  {{ value }}
+                </ng-container>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+  imports: [FlexRender],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class LargeMixedTable {
+  readonly hostTick = signal(0)
+  readonly valueVersion = signal(0)
+  readonly componentKind = signal<'a' | 'b'>('a')
+  readonly contentKind = signal<'primitive' | 'component'>('primitive')
+
+  readonly columns: Array<ColumnDef<typeof stockFeatures, BenchmarkRow, any>> =
+    Array.from({ length: columnCount }, (_, columnIndex) => ({
+      id: `column-${columnIndex}`,
+      accessorFn: (row) => row.values[columnIndex]!,
+      cell: (context) => {
+        const value = context.getValue()
+
+        // Four primitive columns whose values change in place.
+        if (columnIndex < 4) {
+          return `${value}:${this.valueVersion()}`
+        }
+
+        // Four stable component columns whose inputs change frequently.
+        if (columnIndex < 8) {
+          const component =
+            columnIndex % 2 === 0 ? BenchmarkCellA : BenchmarkCellB
+          return flexRenderComponent(component, {
+            inputs: { value, version: this.valueVersion() },
+            outputs: { activate: handleActivate },
+          })
+        }
+
+        // Two columns that intentionally replace component A with component B.
+        if (columnIndex < 10) {
+          const component =
+            this.componentKind() === 'a' ? BenchmarkCellA : BenchmarkCellB
+          return flexRenderComponent(component, {
+            inputs: { value, version: 0 },
+            outputs: { activate: handleActivate },
+          })
+        }
+
+        // Two columns that cross the primitive/component view boundary.
+        return this.contentKind() === 'primitive'
+          ? value
+          : flexRenderComponent(BenchmarkCellA, {
+              inputs: { value, version: 0 },
+              outputs: { activate: handleActivate },
+            })
+      },
+    }))
+
+  readonly table = injectTable(() => ({
+    data: largeTableData,
+    columns: this.columns,
+    features: stockFeatures,
+    getRowId: (row) => row.id,
+  }))
+}
+
+describe('flexRender large mixed table', () => {
+  const fixture = TestBed.createComponent(LargeMixedTable)
+  fixture.detectChanges()
+
+  const instance = fixture.componentInstance
+  const renderedCellCount = fixture.nativeElement.querySelectorAll('td').length
+  if (renderedCellCount !== rowCount * columnCount) {
+    throw new Error(`Expected 1,200 cells, rendered ${renderedCellCount}`)
+  }
+
+  bench(
+    'unrelated host change with 1,200 mounted cells',
+    () => {
+      instance.hostTick.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'update 400 primitives and 400 stable component inputs',
+    () => {
+      instance.valueVersion.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'replace 200 component A/B cell views',
+    () => {
+      instance.componentKind.update((value) => (value === 'a' ? 'b' : 'a'))
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'switch 200 cells between primitive and component views',
+    () => {
+      instance.contentKind.update((value) =>
+        value === 'primitive' ? 'component' : 'primitive',
+      )
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+})
diff --git a/packages/angular-table/tests/flex-render/flex-render.unit.test.ts b/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
index 34c1c07797..e32d5eddbe 100644
--- a/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
+++ b/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
@@ -1,19 +1,15 @@
-import {
-  Component,
-  input,
-  signal,
-  ViewChild,
-  type TemplateRef,
-} from '@angular/core'
-import { TestBed, type ComponentFixture } from '@angular/core/testing'
-import { describe, expect, test } from 'vitest'
+import { Component, ViewChild, input, output, signal } from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { describe, expect, test, vi } from 'vitest'
 import {
   FlexRender,
-  flexRenderComponent,
   FlexRenderDirective,
+  flexRenderComponent,
   injectFlexRenderContext,
 } from '../../src'
 import { setFixtureSignalInput, setFixtureSignalInputs } from '../test-utils'
+import type { ComponentFixture } from '@angular/core/testing'
+import type { TemplateRef } from '@angular/core'
 
 describe('FlexRenderDirective', () => {
   test('should render primitives', () => {
@@ -62,6 +58,34 @@ describe('FlexRenderDirective', () => {
     expect((fixture.nativeElement as HTMLElement).matches(':empty')).toBe(true)
   })
 
+  test('should evaluate and update primitive content only when its dependencies change', () => {
+    const value = signal('Initial value')
+    const render = vi.fn(() => value())
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: render,
+      context: {},
+    })
+
+    const initialSpan = fixture.nativeElement.querySelector('span')
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(initialSpan.textContent).toEqual('Initial value')
+
+    fixture.detectChanges()
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.querySelector('span')).toBe(initialSpan)
+
+    value.set('Updated value')
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(2)
+    expect(fixture.nativeElement.querySelector('span')).toBe(initialSpan)
+    expect(initialSpan.textContent).toEqual('Updated value')
+  })
+
   test('should render TemplateRef', () => {
     @Component({
       template: `
@@ -122,6 +146,115 @@ describe('FlexRenderDirective', () => {
     expect(fixture.nativeElement.textContent).toEqual('Updated value')
   })
 
+  test('should release and restore component output subscriptions', () => {
+    @Component({
+      template: `<button (click)="changed.emit()">Emit</button>`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly changed = output<void>()
+    }
+
+    const enabled = signal(true)
+    const listener = vi.fn()
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(FakeComponent, {
+          outputs: enabled() ? { changed: listener } : {},
+        }),
+      context: {},
+    })
+
+    const button = fixture.nativeElement.querySelector(
+      'button',
+    ) as HTMLButtonElement
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    enabled.set(false)
+    fixture.detectChanges()
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    enabled.set(true)
+    fixture.detectChanges()
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(2)
+    expect(fixture.nativeElement.querySelector('button')).toBe(button)
+  })
+
+  test('should set component inputs by property name when they have an alias', () => {
+    @Component({
+      template: `{{ value() }}`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly value = input('', { alias: 'aliasedValue' })
+    }
+
+    const fixture = TestBed.createComponent(TestRenderComponent)
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(FakeComponent, {
+          inputs: { value: 'Aliased input value' },
+        }),
+      context: {},
+    })
+
+    expect(fixture.nativeElement.textContent).toEqual('Aliased input value')
+  })
+
+  test('should reuse a component by type and key and recreate it when the key changes', () => {
+    @Component({
+      selector: 'app-keyed-component',
+      template: `{{ value() }}`,
+      standalone: true,
+    })
+    class KeyedComponent {
+      readonly value = input.required<string>()
+    }
+
+    const key = signal<string | number>('first')
+    const value = signal('Initial value')
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(KeyedComponent, {
+          key: key(),
+          inputs: { value: value() },
+          // These creation-time arrays are intentionally recreated whenever
+          // the render function runs. They do not affect reuse without a new key.
+          bindings: [],
+          directives: [],
+        }),
+      context: {},
+    })
+
+    const initialHost = fixture.nativeElement.querySelector(
+      'app-keyed-component',
+    )
+    expect(initialHost.textContent).toEqual('Initial value')
+
+    value.set('Updated value')
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.querySelector('app-keyed-component')).toBe(
+      initialHost,
+    )
+    expect(initialHost.textContent).toEqual('Updated value')
+
+    key.set(2)
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.querySelector('app-keyed-component')).not.toBe(
+      initialHost,
+    )
+    expect(fixture.nativeElement.textContent).toEqual('Updated value')
+  })
+
   test('should rerender when content has conditional return with different component types', () => {
     @Component({
       selector: 'app-fake-a',
diff --git a/packages/angular-table/tests/injectTable.test.ts b/packages/angular-table/tests/injectTable.test.ts
index aee244543d..20b84a7af9 100644
--- a/packages/angular-table/tests/injectTable.test.ts
+++ b/packages/angular-table/tests/injectTable.test.ts
@@ -17,6 +17,21 @@ import { injectTable } from '../src'
 import type { PaginationState } from '../src'
 
 describe('injectTable', () => {
+  test('evaluates options once while constructing the table', () => {
+    const options = vi.fn(() => ({
+      data: [],
+      features: stockFeatures,
+      columns: [],
+    }))
+    const table = TestBed.runInInjectionContext(() => injectTable(options))
+
+    expect(options).not.toHaveBeenCalled()
+
+    void table.options
+
+    expect(options).toHaveBeenCalledTimes(1)
+  })
+
   test('should support required signal inputs', async () => {
     type Data = { id: string; title: string }
 

From ba686fe695c1507f669e8afe810410f8b085abc5 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Fri, 7 Aug 2026 01:26:00 +0200
Subject: [PATCH 02/23] trading grid example

---
 examples/angular/realtime-trading/README.md   | 285 +++++++
 .../angular/realtime-trading/angular.json     |  76 ++
 .../angular/realtime-trading/package.json     |  32 +
 .../realtime-trading/src/app/app.config.ts    |   6 +
 .../angular/realtime-trading/src/app/app.ts   |  69 ++
 .../src/app/benchmark-profiles.ts             |  65 ++
 .../src/app/benchmark/benchmark-monitor.ts    | 186 +++++
 .../src/app/beta-trading-table.ts             |  43 +
 .../app/core/trading-benchmark.controller.ts  | 290 +++++++
 .../src/app/current-trading-table.ts          |  43 +
 .../realtime-trading/src/app/market-data.ts   |  38 +
 .../src/app/market-feed-engine.ts             | 173 ++++
 .../src/app/market-feed-protocol.ts           |  66 ++
 .../src/app/market-feed.worker.ts             | 133 +++
 .../realtime-trading/src/app/quote-cells.ts   | 258 ++++++
 .../src/app/shell/configurator.html           | 169 ++++
 .../src/app/shell/configurator.ts             |  46 ++
 .../src/app/shell/diagnostics.ts              |  71 ++
 .../src/app/shell/market-statusbar.ts         |  38 +
 .../src/app/shell/market-toolbar.ts           |  59 ++
 .../src/app/shell/metrics-strip.ts            |  74 ++
 .../src/app/shell/selected-instrument.ts      |  36 +
 .../src/app/shell/shell-formatters.ts         |  20 +
 .../src/app/shell/shell-header.ts             |  36 +
 .../src/app/shell/trading-shell.html          |  20 +
 .../src/app/shell/trading-shell.ts            |  23 +
 .../src/app/table-row-model.worker.ts         |  44 +
 .../realtime-trading/src/app/table-v8.html    |  48 ++
 .../realtime-trading/src/app/table-v9.html    |  40 +
 .../src/app/trading-column-types.ts           |  10 +
 .../src/app/trading-columns-beta.ts           | 168 ++++
 .../src/app/trading-columns-v8.ts             | 165 ++++
 .../src/app/trading-columns.ts                | 165 ++++
 .../src/app/v8-trading-table.ts               |  43 +
 .../src/app/worker-trading-table.ts           |  79 ++
 .../angular/realtime-trading/src/index.html   |  16 +
 examples/angular/realtime-trading/src/main.ts |   5 +
 .../angular/realtime-trading/src/styles.css   | 724 ++++++++++++++++
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 139 ++++
 .../realtime-trading/tsconfig.app.json        |   9 +
 .../angular/realtime-trading/tsconfig.json    |  23 +
 examples/react/realtime-trading/README.md     | 324 ++++++++
 examples/react/realtime-trading/index.html    |  17 +
 examples/react/realtime-trading/package.json  |  32 +
 examples/react/realtime-trading/src/App.tsx   |  41 +
 .../src/benchmark-profiles.ts                 |  65 ++
 .../src/benchmark/benchmark-monitor.ts        | 445 ++++++++++
 .../src/benchmark/use-table-benchmark.ts      | 115 +++
 .../src/core/trading-benchmark-controller.ts  | 532 ++++++++++++
 .../core/use-trading-benchmark-controller.ts  |  15 +
 .../src/core/use-trading-table-runtime.ts     |  40 +
 examples/react/realtime-trading/src/index.css | 732 +++++++++++++++++
 examples/react/realtime-trading/src/main.tsx  |  10 +
 .../react/realtime-trading/src/market-data.ts |  38 +
 .../src/market-feed-engine.ts                 | 173 ++++
 .../src/market-feed-protocol.ts               |  66 ++
 .../src/market-feed.worker.ts                 | 133 +++
 .../realtime-trading/src/quote-cells.tsx      | 190 +++++
 .../src/shell/TradingShell.tsx                | 775 ++++++++++++++++++
 .../src/shell/trading-shell-context.tsx       |  33 +
 .../src/trading-table-local.tsx               | 144 ++++
 .../src/trading-table-shared.tsx              | 317 +++++++
 .../realtime-trading/src/trading-table-v8.tsx |  77 ++
 .../realtime-trading/src/trading-table.tsx    |  15 +
 .../react/realtime-trading/src/vite-env.d.ts  |   1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 170 ++++
 examples/react/realtime-trading/tsconfig.json |  20 +
 .../react/realtime-trading/vite.config.ts     |  42 +
 examples/solid/realtime-trading/README.md     | 208 +++++
 examples/solid/realtime-trading/index.html    |  16 +
 examples/solid/realtime-trading/package.json  |  24 +
 examples/solid/realtime-trading/src/App.tsx   |  50 ++
 .../src/benchmark-profiles.ts                 |  65 ++
 .../src/benchmark/benchmark-monitor.ts        | 286 +++++++
 .../src/core/trading-benchmark-controller.ts  | 300 +++++++
 examples/solid/realtime-trading/src/index.css | 722 ++++++++++++++++
 examples/solid/realtime-trading/src/index.tsx |   8 +
 .../solid/realtime-trading/src/market-data.ts |  38 +
 .../src/market-feed-engine.ts                 | 169 ++++
 .../src/market-feed-protocol.ts               |  66 ++
 .../src/market-feed.worker.ts                 | 133 +++
 .../realtime-trading/src/quote-cells.tsx      | 201 +++++
 .../src/shell/TradingShell.tsx                | 574 +++++++++++++
 .../src/shell/trading-shell-context.tsx       |  26 +
 .../realtime-trading/src/trading-table.tsx    | 339 ++++++++
 .../solid/realtime-trading/src/vite-env.d.ts  |   1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 104 +++
 examples/solid/realtime-trading/tsconfig.json |  21 +
 .../solid/realtime-trading/vite.config.ts     |  13 +
 package.json                                  |   6 +
 pnpm-lock.yaml                                | 180 ++++
 pnpm-workspace.yaml                           |   6 +
 92 files changed, 12151 insertions(+)
 create mode 100644 examples/angular/realtime-trading/README.md
 create mode 100644 examples/angular/realtime-trading/angular.json
 create mode 100644 examples/angular/realtime-trading/package.json
 create mode 100644 examples/angular/realtime-trading/src/app/app.config.ts
 create mode 100644 examples/angular/realtime-trading/src/app/app.ts
 create mode 100644 examples/angular/realtime-trading/src/app/benchmark-profiles.ts
 create mode 100644 examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
 create mode 100644 examples/angular/realtime-trading/src/app/beta-trading-table.ts
 create mode 100644 examples/angular/realtime-trading/src/app/core/trading-benchmark.controller.ts
 create mode 100644 examples/angular/realtime-trading/src/app/current-trading-table.ts
 create mode 100644 examples/angular/realtime-trading/src/app/market-data.ts
 create mode 100644 examples/angular/realtime-trading/src/app/market-feed-engine.ts
 create mode 100644 examples/angular/realtime-trading/src/app/market-feed-protocol.ts
 create mode 100644 examples/angular/realtime-trading/src/app/market-feed.worker.ts
 create mode 100644 examples/angular/realtime-trading/src/app/quote-cells.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/configurator.html
 create mode 100644 examples/angular/realtime-trading/src/app/shell/configurator.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/diagnostics.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/market-toolbar.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/selected-instrument.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/shell-formatters.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/shell-header.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/trading-shell.html
 create mode 100644 examples/angular/realtime-trading/src/app/shell/trading-shell.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table-row-model.worker.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table-v8.html
 create mode 100644 examples/angular/realtime-trading/src/app/table-v9.html
 create mode 100644 examples/angular/realtime-trading/src/app/trading-column-types.ts
 create mode 100644 examples/angular/realtime-trading/src/app/trading-columns-beta.ts
 create mode 100644 examples/angular/realtime-trading/src/app/trading-columns-v8.ts
 create mode 100644 examples/angular/realtime-trading/src/app/trading-columns.ts
 create mode 100644 examples/angular/realtime-trading/src/app/v8-trading-table.ts
 create mode 100644 examples/angular/realtime-trading/src/app/worker-trading-table.ts
 create mode 100644 examples/angular/realtime-trading/src/index.html
 create mode 100644 examples/angular/realtime-trading/src/main.ts
 create mode 100644 examples/angular/realtime-trading/src/styles.css
 create mode 100644 examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/angular/realtime-trading/tsconfig.app.json
 create mode 100644 examples/angular/realtime-trading/tsconfig.json
 create mode 100644 examples/react/realtime-trading/README.md
 create mode 100644 examples/react/realtime-trading/index.html
 create mode 100644 examples/react/realtime-trading/package.json
 create mode 100644 examples/react/realtime-trading/src/App.tsx
 create mode 100644 examples/react/realtime-trading/src/benchmark-profiles.ts
 create mode 100644 examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
 create mode 100644 examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
 create mode 100644 examples/react/realtime-trading/src/core/trading-benchmark-controller.ts
 create mode 100644 examples/react/realtime-trading/src/core/use-trading-benchmark-controller.ts
 create mode 100644 examples/react/realtime-trading/src/core/use-trading-table-runtime.ts
 create mode 100644 examples/react/realtime-trading/src/index.css
 create mode 100644 examples/react/realtime-trading/src/main.tsx
 create mode 100644 examples/react/realtime-trading/src/market-data.ts
 create mode 100644 examples/react/realtime-trading/src/market-feed-engine.ts
 create mode 100644 examples/react/realtime-trading/src/market-feed-protocol.ts
 create mode 100644 examples/react/realtime-trading/src/market-feed.worker.ts
 create mode 100644 examples/react/realtime-trading/src/quote-cells.tsx
 create mode 100644 examples/react/realtime-trading/src/shell/TradingShell.tsx
 create mode 100644 examples/react/realtime-trading/src/shell/trading-shell-context.tsx
 create mode 100644 examples/react/realtime-trading/src/trading-table-local.tsx
 create mode 100644 examples/react/realtime-trading/src/trading-table-shared.tsx
 create mode 100644 examples/react/realtime-trading/src/trading-table-v8.tsx
 create mode 100644 examples/react/realtime-trading/src/trading-table.tsx
 create mode 100644 examples/react/realtime-trading/src/vite-env.d.ts
 create mode 100644 examples/react/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/react/realtime-trading/tsconfig.json
 create mode 100644 examples/react/realtime-trading/vite.config.ts
 create mode 100644 examples/solid/realtime-trading/README.md
 create mode 100644 examples/solid/realtime-trading/index.html
 create mode 100644 examples/solid/realtime-trading/package.json
 create mode 100644 examples/solid/realtime-trading/src/App.tsx
 create mode 100644 examples/solid/realtime-trading/src/benchmark-profiles.ts
 create mode 100644 examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
 create mode 100644 examples/solid/realtime-trading/src/core/trading-benchmark-controller.ts
 create mode 100644 examples/solid/realtime-trading/src/index.css
 create mode 100644 examples/solid/realtime-trading/src/index.tsx
 create mode 100644 examples/solid/realtime-trading/src/market-data.ts
 create mode 100644 examples/solid/realtime-trading/src/market-feed-engine.ts
 create mode 100644 examples/solid/realtime-trading/src/market-feed-protocol.ts
 create mode 100644 examples/solid/realtime-trading/src/market-feed.worker.ts
 create mode 100644 examples/solid/realtime-trading/src/quote-cells.tsx
 create mode 100644 examples/solid/realtime-trading/src/shell/TradingShell.tsx
 create mode 100644 examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
 create mode 100644 examples/solid/realtime-trading/src/trading-table.tsx
 create mode 100644 examples/solid/realtime-trading/src/vite-env.d.ts
 create mode 100644 examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/solid/realtime-trading/tsconfig.json
 create mode 100644 examples/solid/realtime-trading/vite.config.ts

diff --git a/examples/angular/realtime-trading/README.md b/examples/angular/realtime-trading/README.md
new file mode 100644
index 0000000000..3ec6393e0f
--- /dev/null
+++ b/examples/angular/realtime-trading/README.md
@@ -0,0 +1,285 @@
+# Angular real-time trading flexRender lab
+
+This example generates deterministic synthetic quote events in the browser. It
+is designed to stress Angular Table's `flexRender` paths, not to model an
+exchange or display real financial data.
+
+The workload is inspired by the public
+[AG Grid finance demo](https://www.ag-grid.com/example-finance/) and its
+[source repository](https://github.com/ag-grid/ag-grid-demos/tree/main/finance),
+but is intentionally smaller and focused on Angular `flexRender` lifecycle
+behavior rather than matching that demo's features.
+
+## Run it
+
+From the repository root:
+
+```sh
+pnpm --filter tanstack-angular-table-example-realtime-trading dev
+```
+
+For representative measurements, serve the production configuration:
+
+```sh
+pnpm --filter tanstack-angular-table-example-realtime-trading ng serve --configuration production --port 7777
+```
+
+Open `http://localhost:7777`.
+
+## What it exercises
+
+The feed control has named load profiles so comparisons do not depend on
+remembering slider positions:
+
+- **Low** is 1k events/s.
+- **Medium** is 5k events/s.
+- **High** is the 10k events/s default.
+- **Very high** is 25k events/s.
+- **Max** requests 100k events/s and is intentionally a saturation test.
+- Moving the rate slider selects **Custom**.
+
+Available universe sizes are 50, 100, 150, 250, 350, 500, 750, and 1,000.
+The intermediate sizes make it easier to locate the point where an adapter
+stops meeting its frame or throughput target.
+
+The row workload selector separates four different costs:
+
+- **Stable universe** preserves row IDs and source order.
+- **Continuously sort by Last** changes input order as prices move but keeps the
+  same IDs, testing keyed row movement rather than destruction.
+- **Rotate 20% filtered rows** excludes one of five index buckets and changes
+  the excluded bucket once per second, testing removal and reinsertion.
+- **Replace 10% of ticker IDs** gives one of ten buckets new IDs and ticker
+  labels once per second. Ten percent are replacements at any instant; because
+  the previous bucket returns while the next enters, each transition crosses
+  lifecycle boundaries for roughly twenty percent of rows.
+
+These transformations happen before the selected adapter, so every version
+receives identical arrays. They test row-model and rendering consequences; they
+do not benchmark each version's public sorting or filtering API.
+
+The configurator can mount three implementations against the same workload:
+
+- **Local optimized (v9)** uses the adapter and table core from this workspace.
+- **Published 9.0.0-beta.80** uses the exact npm release and its matching
+  `@tanstack/table-core`.
+- **Published 8.21.4** uses the final v8 Angular adapter and table core 8.21.3.
+
+Changing the implementation select destroys the current table component and
+mounts the selected one. The current immutable quote array, selected symbol,
+renderer mode, and performance counters stay in the parent component, so every
+adapter receives the same live state.
+
+The local v9 adapter also exposes a **Worker row model** checkbox. It replaces
+the normal local table with a v9 table using the experimental worker plugin for
+the filtered row-model stage. The row-model worker is a second worker, separate
+from the market-feed worker. The checkbox is disabled for beta.80 and v8 because
+those published versions do not expose this plugin. Turning it off destroys the
+worker-backed table and terminates its worker.
+
+This table currently has no active user filter, so the worker stage returns the
+full row order. That is intentional: it isolates the serialization,
+postMessage, stale-while-revalidate, and row-model reconstruction overhead under
+rapid immutable data replacement. It is not expected to be faster at 250–1,000
+unfiltered rows; the plugin becomes more compelling when expensive filtering,
+grouping, or sorting dominates the transfer cost.
+
+- Quote fields are plain values, matching decoded WebSocket/SSE records rather
+  than embedding Angular signals in the data model.
+- Every worker batch publishes a new data-array reference and recreates each
+  changed quote object. Unchanged quotes preserve their identity, and
+  `getRowId` keeps table rows associated with their instruments.
+- This deliberately exercises adapter option updates and table row-model
+  recomputation in addition to `flexRender` input updates.
+- A Web Worker owns quote generation, random-walk calculations, event-rate
+  scheduling, history updates, and burst processing.
+- One quote event updates price, bid, ask, direction, and volume; the event
+  counter therefore represents market messages rather than individual field
+  changes.
+- The market-watch columns use Ticker, Last Qty, Bid / Ask Qty, Day %, Total
+  Qty, Traded Value, and Intraday terminology. Total Qty and Traded Value are
+  cumulative synthetic session fields; Last Qty is the most recent trade size.
+- Bid, ask, percentage change, quantities, and traded value are primitive
+  renderers.
+- Last price is a stable Angular component whose inputs and output callback are
+  updated frequently.
+- Tick direction can use one stable component or switch between separate up and
+  down component types.
+- Spread components receive bid and ask updates and recompute absolute and
+  basis-point spreads.
+- Depth components receive bid/ask sizes on every quote and redraw a two-sided
+  liquidity imbalance bar.
+- Quote-age components share a 100 ms clock. This intentionally invalidates the
+  whole Age column at once and can be disabled independently.
+- Sparkline components receive new array references at a configurable cadence.
+- Component create/destroy counters and the optional Chrome heap estimate help
+  expose unintended churn or retained component state.
+
+## Shared code and adapter boundaries
+
+Most of the example is deliberately shared:
+
+- `market-feed-engine.ts` is the framework-free quote algorithm that runs in
+  the worker.
+- `market-feed.worker.ts` owns scheduling, batching, coalescing, and
+  backpressure.
+- `market-feed-protocol.ts` defines typed commands and events shared across the
+  worker boundary.
+- `market-data.ts` hydrates initial worker snapshots and immutably recreates
+  changed application rows on the main thread.
+- `table-row-model.worker.ts` hosts the optional v9 shadow table used by the
+  experimental row-model worker plugin.
+- `worker-trading-table.ts` wires the local v9 table to that worker-backed
+  filtered row model and terminates it when the component is destroyed.
+- `quote-cells.ts` owns all dynamic Angular cell components and lifecycle
+  instrumentation.
+- `trading-column-types.ts` contains only the renderer-mode/state contract and
+  the diagnostics column count.
+- `trading-columns.ts` is the local-v9 column factory shared by the current and
+  worker-backed tables. It calls the local adapter's `flexRenderComponent`
+  directly only for genuine Angular component cells.
+- `trading-columns-beta.ts` and `trading-columns-v8.ts` intentionally duplicate
+  the complete adapter-specific column configuration, including IDs, labels,
+  widths, and formatters. Each calls its own package's typed
+  `flexRenderComponent`; no token spreads, generic renderer callback, or
+  `unknown` cast crosses the version boundary. Primitive cells continue to
+  return primitive values.
+- `core/trading-benchmark.controller.ts` owns application signals, worker
+  transport, derived table inputs, and user commands.
+- `benchmark/benchmark-monitor.ts` owns browser observers, render
+  acknowledgements, and published metrics.
+- `shell/` contains independent header, toolbar, metrics, status-bar,
+  diagnostics, selected-instrument, and configurator components. Each injects
+  the same controller directly.
+- `shell/trading-shell.html` is only the layout and `<ng-content>` projection
+  point.
+- `app.ts` owns the projected local/beta/v8 adapter switch.
+
+Table construction and component-render descriptors are version-specific. The
+local and beta v9 components share `table-v9.html` and use `injectTable`,
+`stockFeatures`, and the `flexRenderCell` / `flexRenderHeader` shorthand
+directives. The v8 component uses `createAngularTable`, `getCoreRowModel`, and
+the older direct `flexRender` microsyntax in `table-v8.html`.
+
+## Architecture
+
+`App` deliberately has no knowledge of workers, timers, render callbacks, or
+adapter commands. It selects the active adapter and projects it through
+`TradingShell`. The injected `TradingBenchmarkController` is the single
+stateful boundary: it subscribes to the feed worker, converts protocol events
+into immutable row snapshots, derives the selected workload, and exposes
+signals plus commands to every shell component.
+
+Benchmark instrumentation is a separate collaborator. `BenchmarkMonitor`
+contains the mutable sampling runtime and publishes immutable metric snapshots
+back through the controller. This keeps measurement policy out of both the
+table adapters and the presentational shell.
+
+All deliberate mutable runtime is grouped behind `const` object or class
+identities. TypeScript source files do not use `let`; counters and handles
+change as properties of those stable runtime owners instead of being scattered
+mutable bindings. Angular template `@for (...; let index = ...)` declarations,
+where present, are template syntax rather than JavaScript mutable bindings.
+
+The beta and v8 dependencies use exact npm tarball URLs. This is intentional:
+the repository globally redirects `@tanstack/angular-table` to the local
+workspace package, and a normal npm alias would therefore not provide an
+independent published baseline. Version-specific overrides also keep each
+adapter paired with the table-core version it was released against.
+
+## Worker transport and backpressure
+
+The worker is intentionally shaped like an external market-data transport. The
+Angular application sends configuration commands and listens for `ready` and
+`batch` messages, much as an application would listen to a WebSocket or SSE
+client.
+
+The worker does not post one browser message for every quote event. It
+coalesces all pending changes by instrument and allows only one batch to be in
+flight. Angular acknowledges that batch after `afterEveryRender`; only then can
+the worker send the next one. While the main thread is busy, the worker keeps
+the newest snapshot for each instrument in a bounded map rather than building
+an unbounded message queue.
+
+For that reason, **batch events** and **row updates** are separate diagnostics.
+A batch may represent thousands of source events but contain at most one final
+update per instrument. The event counter still measures the requested source
+load, while row updates describe the amount of data copied and applied by the
+UI.
+
+This protects the main thread from quote-generation work and queue growth, but
+it does not make rendering free. Recreating changed rows, publishing the new
+data array, Angular change detection, table row-model work, `flexRender`,
+layout, and paint must still happen on the main thread.
+In a production application, the WebSocket connection and parsing could also
+live inside the worker and use this same message protocol. If the WebSocket or
+`EventSource` is created in the window instead, its JavaScript event handlers
+still run on the main thread.
+
+## Performance metrics
+
+The dashboard keeps browser scheduling and Angular work separate:
+
+- **RAF rate** counts `requestAnimationFrame` callbacks and divides them by the
+  real wall-clock sampling duration. It is not clamped and therefore includes
+  long main-thread stalls. It describes browser frame opportunities, not table
+  renders, and will normally follow the display refresh rate.
+- **Table renders** counts worker batches that reach `afterEveryRender` and are
+  acknowledged back to the worker. This is the UI's actual feed-render
+  throughput.
+- **Average / P95 render** measures worker-message reception through Angular's
+  completed render callback. It excludes worker calculation, browser paint,
+  and time coalescing behind an in-flight batch.
+- **Long frames** uses a feature-detected `PerformanceObserver` with the
+  `long-animation-frame` entry type. It counts complete browser animation
+  frames longer than 50 ms and records the worst duration since reset.
+- **Renders over 16.7 ms** remains an application-level diagnostic for the most
+  recent sample. It assumes a 60 Hz frame budget and is intentionally distinct
+  from the browser's Long Animation Frames API.
+
+Long Animation Frames are currently supported by Chromium-based browsers. The
+dashboard shows `N/A` when the browser does not expose that performance entry
+type. For exact frame, layout, paint, and compositor attribution, record the
+same workload in the browser's Performance tools.
+
+## A repeatable comparison
+
+1. Use the same production browser build and machine for both commits.
+2. Start at 250 instruments, 10k events/s, stable Tick renderer, quote ages,
+   and sparklines enabled.
+3. Select one implementation, reset the session, and let it warm up for 20–30
+   seconds.
+4. Record actual throughput, RAF rate, table renders/s, P95 render time, long
+   frames, live components, and heap over a fixed measurement window.
+5. Repeat step 3 for the other implementations without changing the controls.
+6. Increase the event target until actual throughput cannot keep up or P95
+   exceeds the 16.7 ms frame budget.
+7. Repeat with component swapping, quote ages, and sparklines toggled
+   separately. The 25k burst is useful for profiling worker aggregation and one
+   large coalesced UI update.
+
+Component create/destroy totals are cumulative across adapter switches. A
+switch should destroy the old table's dynamic cell components and create the
+new table's components, so both totals jump by design. Likewise, the JS heap
+can rise temporarily while the old tree waits for garbage collection. Compare
+post-GC heap plateaus after several identical switch cycles; a rising raw heap
+line by itself does not prove a leak.
+
+Immutable batches also allocate a new array plus one object per changed row.
+Those short-lived objects are expected garbage. Memory analysis should compare
+post-GC plateaus rather than expecting a flat allocation graph.
+
+The displayed Chrome heap estimate is diagnostic only. Treat the browser's
+Memory profiler as the source of truth when separating the main realm, worker
+realm, detached DOM, and garbage awaiting collection.
+
+Because this lab bundles three adapter and table-core generations, its download
+size is intentionally larger than a normal application and should not be used
+for bundle-size comparison.
+
+The UI resembles a market-watch blotter, but the feed is deterministic
+synthetic data rather than an exchange simulator. A production-confidence test
+should replay a timestamped, sanitized capture through the worker protocol so
+burstiness and symbol skew are preserved. Use browser Performance and Memory
+recordings as the source of truth for scripting, layout, paint, detached nodes,
+and post-GC heap; the in-app counters are comparison aids.
diff --git a/examples/angular/realtime-trading/angular.json b/examples/angular/realtime-trading/angular.json
new file mode 100644
index 0000000000..5512416689
--- /dev/null
+++ b/examples/angular/realtime-trading/angular.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "pnpm",
+    "analytics": false,
+    "cache": {
+      "enabled": false
+    }
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "realtime-trading": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [],
+            "styles": ["src/styles.css"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "options": {
+            "allowedHosts": true
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "realtime-trading:build:production"
+            },
+            "development": {
+              "buildTarget": "realtime-trading:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}
diff --git a/examples/angular/realtime-trading/package.json b/examples/angular/realtime-trading/package.json
new file mode 100644
index 0000000000..7156570054
--- /dev/null
+++ b/examples/angular/realtime-trading/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "tanstack-angular-table-example-realtime-trading",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --port 7777",
+    "dev": "ng serve --port 7777",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "lint": "eslint ./src",
+    "test:types": "tsc -p tsconfig.app.json --noEmit",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "private": true,
+  "packageManager": "pnpm@11.18.0",
+  "dependencies": {
+    "@angular/common": "^22.1.0",
+    "@angular/compiler": "^22.1.0",
+    "@angular/core": "^22.1.0",
+    "@angular/platform-browser": "^22.1.0",
+    "@tanstack/angular-table": "^9.0.0",
+    "@tanstack/angular-table-beta": "https://registry.npmjs.org/@tanstack/angular-table/-/angular-table-9.0.0-beta.80.tgz",
+    "@tanstack/angular-table-v8": "https://registry.npmjs.org/@tanstack/angular-table/-/angular-table-8.21.4.tgz",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@angular/build": "^22.1.2",
+    "@angular/cli": "^22.1.2",
+    "@angular/compiler-cli": "^22.1.0",
+    "typescript": "6.0.3"
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/app.config.ts b/examples/angular/realtime-trading/src/app/app.config.ts
new file mode 100644
index 0000000000..cbb47d366c
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/app.config.ts
@@ -0,0 +1,6 @@
+import { provideBrowserGlobalErrorListeners } from '@angular/core'
+import type { ApplicationConfig } from '@angular/core'
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideBrowserGlobalErrorListeners()],
+}
diff --git a/examples/angular/realtime-trading/src/app/app.ts b/examples/angular/realtime-trading/src/app/app.ts
new file mode 100644
index 0000000000..553d3dad06
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/app.ts
@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { BetaTradingTable } from './beta-trading-table'
+import { TradingBenchmarkController } from './core/trading-benchmark.controller'
+import { CurrentTradingTable } from './current-trading-table'
+import { TradingShell } from './shell/trading-shell'
+import { V8TradingTable } from './v8-trading-table'
+import { WorkerTradingTable } from './worker-trading-table'
+
+@Component({
+  selector: 'app-root',
+  imports: [
+    BetaTradingTable,
+    CurrentTradingTable,
+    TradingShell,
+    V8TradingTable,
+    WorkerTradingTable,
+  ],
+  template: `
+    <app-trading-shell>
+      @switch (controller.tableAdapter()) {
+        @case ('local') {
+          @if (controller.tableWorkerEnabled()) {
+            <app-worker-trading-table
+              [quotes]="controller.displayQuotes()"
+              [rendererMode]="controller.rendererMode()"
+              [updateQuoteAges]="controller.updateQuoteAges()"
+              [quoteClock]="controller.quoteClock()"
+              [selectedSymbol]="controller.selectedSymbol()"
+              (symbolSelected)="controller.selectedSymbol.set($event)"
+            />
+          } @else {
+            <app-current-trading-table
+              [quotes]="controller.displayQuotes()"
+              [rendererMode]="controller.rendererMode()"
+              [updateQuoteAges]="controller.updateQuoteAges()"
+              [quoteClock]="controller.quoteClock()"
+              [selectedSymbol]="controller.selectedSymbol()"
+              (symbolSelected)="controller.selectedSymbol.set($event)"
+            />
+          }
+        }
+        @case ('beta') {
+          <app-beta-trading-table
+            [quotes]="controller.displayQuotes()"
+            [rendererMode]="controller.rendererMode()"
+            [updateQuoteAges]="controller.updateQuoteAges()"
+            [quoteClock]="controller.quoteClock()"
+            [selectedSymbol]="controller.selectedSymbol()"
+            (symbolSelected)="controller.selectedSymbol.set($event)"
+          />
+        }
+        @case ('v8') {
+          <app-v8-trading-table
+            [quotes]="controller.displayQuotes()"
+            [rendererMode]="controller.rendererMode()"
+            [updateQuoteAges]="controller.updateQuoteAges()"
+            [quoteClock]="controller.quoteClock()"
+            [selectedSymbol]="controller.selectedSymbol()"
+            (symbolSelected)="controller.selectedSymbol.set($event)"
+          />
+        }
+      }
+    </app-trading-shell>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class App {
+  readonly controller = inject(TradingBenchmarkController)
+}
diff --git a/examples/angular/realtime-trading/src/app/benchmark-profiles.ts b/examples/angular/realtime-trading/src/app/benchmark-profiles.ts
new file mode 100644
index 0000000000..848fc28880
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/benchmark-profiles.ts
@@ -0,0 +1,65 @@
+import type { MarketQuote } from './market-data'
+
+export type FeedLoadProfile =
+  'low' | 'medium' | 'high' | 'very-high' | 'max' | 'custom'
+
+export type RowWorkloadMode =
+  'stable' | 'price-sort' | 'rotating-filter' | 'identity-churn'
+
+export const feedLoadRates: Record<
+  Exclude<FeedLoadProfile, 'custom'>,
+  number
+> = {
+  low: 1_000,
+  medium: 5_000,
+  high: 10_000,
+  'very-high': 25_000,
+  max: 100_000,
+}
+
+export function deriveBenchmarkQuotes(
+  quotes: Array<MarketQuote>,
+  mode: RowWorkloadMode,
+  epoch: number,
+): Array<MarketQuote> {
+  if (mode === 'stable') {
+    return quotes
+  }
+
+  if (mode === 'price-sort') {
+    return [...quotes].sort(
+      (left, right) =>
+        right.price - left.price || left.symbol.localeCompare(right.symbol),
+    )
+  }
+
+  if (mode === 'rotating-filter') {
+    const excludedBucket = epoch % 5
+    return quotes.filter((_, index) => index % 5 !== excludedBucket)
+  }
+
+  const replacementBucket = epoch % 10
+  return quotes.map((quote, index) =>
+    index % 10 === replacementBucket
+      ? {
+          ...quote,
+          id: `${quote.id}-replacement-${epoch}`,
+          symbol: `${quote.symbol}R${epoch % 100}`,
+          company: `${quote.company} replacement`,
+        }
+      : quote,
+  )
+}
+
+export function rowWorkloadLabel(mode: RowWorkloadMode): string {
+  switch (mode) {
+    case 'price-sort':
+      return 'PRICE REORDER'
+    case 'rotating-filter':
+      return 'FILTER ROTATION'
+    case 'identity-churn':
+      return 'TICKER REPLACEMENT'
+    default:
+      return 'STABLE UNIVERSE'
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts b/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..d92631820f
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
@@ -0,0 +1,186 @@
+import { quoteCellLifecycle } from '../quote-cells'
+import type { MarketFeedCommand } from '../market-feed-protocol'
+
+export interface FeedMetrics {
+  actualEventsPerSecond: number
+  totalEvents: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualEventsPerSecond: 0,
+  totalEvents: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+}
+
+interface PendingAck {
+  generation: number
+  sequence: number
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    pendingAck: null as PendingAck | null,
+    renderSamples: [] as Array<number>,
+    totalEvents: 0,
+    eventsInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  setPendingAck(ack: PendingAck | null): void {
+    this.#runtime.pendingAck = ack
+  }
+
+  recordCompletedRender(postCommand: (command: MarketFeedCommand) => void) {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      runtime.renderSamples.push(
+        performance.now() - runtime.pendingRenderStartedAt,
+      )
+      runtime.pendingRenderStartedAt = null
+    }
+    if (runtime.pendingAck) {
+      runtime.tableRendersInSample++
+      postCommand({ type: 'ack', ...runtime.pendingAck })
+      runtime.pendingAck = null
+    }
+  }
+
+  recordBatch(eventCount: number, updateCount: number): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = eventCount
+    runtime.lastUpdateCount = updateCount
+    runtime.eventsInSample += eventCount
+    runtime.totalEvents += eventCount
+    runtime.workerMessages++
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const sortedRenderSamples = [...runtime.renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const averageRenderMs =
+      runtime.renderSamples.length === 0
+        ? 0
+        : runtime.renderSamples.reduce((sum, value) => sum + value, 0) /
+          runtime.renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualEventsPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.eventsInSample / sampleDuration) * 1_000,
+      totalEvents: runtime.totalEvents,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: runtime.renderSamples.filter((value) => value > 16.7)
+        .length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.eventsInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.pendingAck = null
+    runtime.renderSamples = []
+    runtime.totalEvents = 0
+    runtime.eventsInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+  }
+}
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
diff --git a/examples/angular/realtime-trading/src/app/beta-trading-table.ts b/examples/angular/realtime-trading/src/app/beta-trading-table.ts
new file mode 100644
index 0000000000..2576824653
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/beta-trading-table.ts
@@ -0,0 +1,43 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core'
+import {
+  FlexRender,
+  injectTable,
+  stockFeatures,
+} from '@tanstack/angular-table-beta'
+import { createBetaTradingColumns } from './trading-columns-beta'
+import type { MarketQuote } from './market-data'
+import type { RendererMode } from './trading-column-types'
+
+@Component({
+  selector: 'app-beta-trading-table',
+  imports: [FlexRender],
+  templateUrl: './table-v9.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BetaTradingTable {
+  readonly quotes = input.required<Array<MarketQuote>>()
+  readonly rendererMode = input.required<RendererMode>()
+  readonly updateQuoteAges = input.required<boolean>()
+  readonly quoteClock = input.required<number>()
+  readonly selectedSymbol = input<string | null>(null)
+  readonly symbolSelected = output<string>()
+
+  readonly columns = createBetaTradingColumns({
+    rendererMode: () => this.rendererMode(),
+    updateQuoteAges: () => this.updateQuoteAges(),
+    quoteClock: () => this.quoteClock(),
+    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
+  })
+
+  readonly table = injectTable(() => ({
+    data: this.quotes(),
+    columns: this.columns,
+    features: stockFeatures,
+    getRowId: (row) => row.id,
+  }))
+}
diff --git a/examples/angular/realtime-trading/src/app/core/trading-benchmark.controller.ts b/examples/angular/realtime-trading/src/app/core/trading-benchmark.controller.ts
new file mode 100644
index 0000000000..462d024dbf
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/core/trading-benchmark.controller.ts
@@ -0,0 +1,290 @@
+import {
+  DestroyRef,
+  Injectable,
+  NgZone,
+  afterEveryRender,
+  computed,
+  inject,
+  isDevMode,
+  signal,
+} from '@angular/core'
+import {
+  deriveBenchmarkQuotes,
+  feedLoadRates,
+  rowWorkloadLabel,
+} from '../benchmark-profiles'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+} from '../benchmark/benchmark-monitor'
+import { applyMarketUpdates, hydrateMarketQuotes } from '../market-data'
+import { TRADING_COLUMN_COUNT } from '../trading-column-types'
+import type { FeedMetrics } from '../benchmark/benchmark-monitor'
+import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from '../market-feed-protocol'
+import type { MarketQuote } from '../market-data'
+import type { RendererMode } from '../trading-column-types'
+
+export type TableAdapter = 'local' | 'beta' | 'v8'
+
+@Injectable({ providedIn: 'root' })
+export class TradingBenchmarkController {
+  readonly #zone = inject(NgZone)
+  readonly #destroyRef = inject(DestroyRef)
+  readonly #worker: Worker
+  readonly #longAnimationFrameObserver: PerformanceObserver | null
+  readonly #monitor = new BenchmarkMonitor()
+
+  readonly devMode = isDevMode()
+  readonly longAnimationFramesSupported =
+    PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+  readonly workerReady = signal(false)
+  readonly running = signal(true)
+  readonly instrumentCount = signal(250)
+  readonly feedLoadProfile = signal<FeedLoadProfile>('high')
+  readonly targetEventsPerSecond = signal(10_000)
+  readonly rowWorkloadMode = signal<RowWorkloadMode>('stable')
+  readonly rowWorkloadEpoch = signal(0)
+  readonly tableAdapter = signal<TableAdapter>('local')
+  readonly tableWorkerEnabled = signal(false)
+  readonly rendererMode = signal<RendererMode>('stable')
+  readonly updateSparklines = signal(true)
+  readonly updateQuoteAges = signal(true)
+  readonly quoteClock = signal(Date.now())
+  readonly quotes = signal<Array<MarketQuote>>([])
+  readonly selectedSymbol = signal<string | null>(null)
+  readonly metrics = signal<FeedMetrics>(initialMetrics)
+  readonly displayQuotes = computed(() =>
+    deriveBenchmarkQuotes(
+      this.quotes(),
+      this.rowWorkloadMode(),
+      this.rowWorkloadEpoch(),
+    ),
+  )
+  readonly selectedQuote = computed(() => {
+    const symbol = this.selectedSymbol()
+    return symbol
+      ? (this.displayQuotes().find((quote) => quote.symbol === symbol) ?? null)
+      : null
+  })
+
+  readonly mountedCells = computed(
+    () => this.displayQuotes().length * TRADING_COLUMN_COUNT,
+  )
+  readonly rowWorkloadLabel = computed(() =>
+    rowWorkloadLabel(this.rowWorkloadMode()),
+  )
+  readonly liveComponents = computed(() => {
+    const metrics = this.metrics()
+    return metrics.componentsCreated - metrics.componentsDestroyed
+  })
+
+  #animationFrameId: number | null = null
+  #feedGeneration = 0
+  #lastAgeClockAt = performance.now()
+  #lastRowWorkloadAt = performance.now()
+
+  constructor() {
+    this.#worker = new Worker(
+      new URL('../market-feed.worker', import.meta.url),
+      { type: 'module' },
+    )
+    this.#longAnimationFrameObserver = this.longAnimationFramesSupported
+      ? new PerformanceObserver(this.#recordLongAnimationFrames)
+      : null
+    afterEveryRender(() =>
+      this.#monitor.recordCompletedRender((command) =>
+        this.#postToWorker(command),
+      ),
+    )
+    this.#zone.runOutsideAngular(() => {
+      this.#worker.addEventListener('message', this.#handleWorkerMessage)
+      this.#worker.addEventListener('error', this.#handleWorkerError)
+      this.#longAnimationFrameObserver?.observe({
+        type: 'long-animation-frame',
+        buffered: true,
+      })
+      this.#animationFrameId = requestAnimationFrame(this.#feedFrame)
+    })
+    this.#postToWorker({
+      type: 'initialize',
+      rowCount: this.instrumentCount(),
+      seed: 42 + this.instrumentCount(),
+      running: this.running(),
+      targetEventsPerSecond: this.targetEventsPerSecond(),
+      updateSparklines: this.updateSparklines(),
+    })
+    this.#destroyRef.onDestroy(() => {
+      if (this.#animationFrameId !== null) {
+        cancelAnimationFrame(this.#animationFrameId)
+      }
+      this.#longAnimationFrameObserver?.disconnect()
+      this.#worker.terminate()
+    })
+  }
+
+  toggleFeed(): void {
+    const running = !this.running()
+    this.running.set(running)
+    this.#postToWorker({ type: 'configure', running })
+  }
+
+  setRowCount(count: number): void {
+    this.instrumentCount.set(count)
+    this.#resetWorkerMarket(count)
+  }
+
+  setTargetRate(rate: number): void {
+    this.feedLoadProfile.set('custom')
+    this.targetEventsPerSecond.set(rate)
+    this.#postToWorker({
+      type: 'configure',
+      targetEventsPerSecond: rate,
+    })
+  }
+
+  setFeedLoadProfile(profile: FeedLoadProfile): void {
+    this.feedLoadProfile.set(profile)
+    if (profile === 'custom') {
+      return
+    }
+
+    const rate = feedLoadRates[profile]
+    this.targetEventsPerSecond.set(rate)
+    this.#postToWorker({
+      type: 'configure',
+      targetEventsPerSecond: rate,
+    })
+  }
+
+  setRowWorkloadMode(mode: RowWorkloadMode): void {
+    this.rowWorkloadMode.set(mode)
+    this.rowWorkloadEpoch.set(0)
+    this.#lastRowWorkloadAt = performance.now()
+    this.selectedSymbol.set(null)
+  }
+
+  setTableAdapter(adapter: TableAdapter): void {
+    this.tableAdapter.set(adapter)
+  }
+
+  setRendererMode(shouldSwap: boolean): void {
+    this.rendererMode.set(shouldSwap ? 'swap' : 'stable')
+  }
+
+  setTableWorkerEnabled(enabled: boolean): void {
+    this.tableWorkerEnabled.set(enabled)
+  }
+
+  setSparklineUpdates(updateSparklines: boolean): void {
+    this.updateSparklines.set(updateSparklines)
+    this.#postToWorker({ type: 'configure', updateSparklines })
+  }
+
+  setQuoteAgeUpdates(enabled: boolean): void {
+    this.updateQuoteAges.set(enabled)
+  }
+
+  runBurst(): void {
+    this.#postToWorker({ type: 'burst', eventCount: 25_000 })
+  }
+
+  resetMarket(): void {
+    const count = this.instrumentCount()
+    this.selectedSymbol.set(null)
+    this.#monitor.reset()
+    this.#lastRowWorkloadAt = performance.now()
+    this.rowWorkloadEpoch.set(0)
+    this.quoteClock.set(Date.now())
+    this.metrics.set(initialMetrics)
+    this.#resetWorkerMarket(count)
+  }
+
+  readonly #feedFrame = (now: number): void => {
+    this.#monitor.recordAnimationFrame()
+
+    if (this.updateQuoteAges() && now - this.#lastAgeClockAt >= 100) {
+      this.#monitor.markRenderPending()
+      this.#lastAgeClockAt = now
+      this.quoteClock.set(Date.now())
+    }
+
+    if (
+      this.running() &&
+      (this.rowWorkloadMode() === 'rotating-filter' ||
+        this.rowWorkloadMode() === 'identity-churn') &&
+      now - this.#lastRowWorkloadAt >= 1_000
+    ) {
+      this.#monitor.markRenderPending()
+      this.#lastRowWorkloadAt = now
+      this.rowWorkloadEpoch.update((epoch) => epoch + 1)
+    }
+
+    if (this.#monitor.shouldPublish(now)) {
+      this.metrics.set(this.#monitor.publish(now))
+    }
+
+    this.#animationFrameId = requestAnimationFrame(this.#feedFrame)
+  }
+
+  readonly #recordLongAnimationFrames = (
+    entries: PerformanceObserverEntryList,
+  ): void => {
+    for (const entry of entries.getEntries()) {
+      this.#monitor.recordLongAnimationFrame(entry.duration)
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'ready') {
+      this.#feedGeneration = data.generation
+      this.#monitor.setPendingAck(null)
+      this.#monitor.markRenderPending()
+      this.quotes.set(hydrateMarketQuotes(data.quotes))
+      this.workerReady.set(true)
+      return
+    }
+
+    if (data.generation !== this.#feedGeneration) {
+      this.#postToWorker({
+        type: 'ack',
+        generation: data.generation,
+        sequence: data.sequence,
+      })
+      return
+    }
+
+    this.#monitor.markRenderPending()
+    this.quotes.update((quotes) => applyMarketUpdates(quotes, data.updates))
+    this.#monitor.recordBatch(data.eventCount, data.updates.length)
+    this.#monitor.setPendingAck({
+      generation: data.generation,
+      sequence: data.sequence,
+    })
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.workerReady.set(false)
+    this.running.set(false)
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorkerMarket(rowCount: number): void {
+    this.workerReady.set(false)
+    this.#monitor.setPendingAck(null)
+    this.#postToWorker({
+      type: 'reset',
+      rowCount,
+      seed: 42 + rowCount,
+    })
+  }
+
+  #postToWorker(command: MarketFeedCommand): void {
+    this.#worker.postMessage(command)
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/current-trading-table.ts b/examples/angular/realtime-trading/src/app/current-trading-table.ts
new file mode 100644
index 0000000000..3d6225a519
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/current-trading-table.ts
@@ -0,0 +1,43 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core'
+import {
+  FlexRender,
+  injectTable,
+  stockFeatures,
+} from '@tanstack/angular-table'
+import { createTradingColumns } from './trading-columns'
+import type { MarketQuote } from './market-data'
+import type { RendererMode } from './trading-column-types'
+
+@Component({
+  selector: 'app-current-trading-table',
+  imports: [FlexRender],
+  templateUrl: './table-v9.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CurrentTradingTable {
+  readonly quotes = input.required<Array<MarketQuote>>()
+  readonly rendererMode = input.required<RendererMode>()
+  readonly updateQuoteAges = input.required<boolean>()
+  readonly quoteClock = input.required<number>()
+  readonly selectedSymbol = input<string | null>(null)
+  readonly symbolSelected = output<string>()
+
+  readonly columns = createTradingColumns({
+    rendererMode: () => this.rendererMode(),
+    updateQuoteAges: () => this.updateQuoteAges(),
+    quoteClock: () => this.quoteClock(),
+    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
+  })
+
+  readonly table = injectTable(() => ({
+    data: this.quotes(),
+    columns: this.columns,
+    features: stockFeatures,
+    getRowId: (row) => row.id,
+  }))
+}
diff --git a/examples/angular/realtime-trading/src/app/market-data.ts b/examples/angular/realtime-trading/src/app/market-data.ts
new file mode 100644
index 0000000000..02eefa28c3
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/angular/realtime-trading/src/app/market-feed-engine.ts b/examples/angular/realtime-trading/src/app/market-feed-engine.ts
new file mode 100644
index 0000000000..e77d76656c
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/market-feed-engine.ts
@@ -0,0 +1,173 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const baseInstruments = [
+  ['ALP', 'Alpine Systems', 'XNAS'],
+  ['ARC', 'Arcadia Cloud', 'XNYS'],
+  ['BLU', 'Blue River Energy', 'BATS'],
+  ['CRN', 'Crown Robotics', 'XNAS'],
+  ['DYN', 'Dynasty Networks', 'XNYS'],
+  ['ECO', 'Ecoframe Materials', 'IEX'],
+  ['FLX', 'Flux Semiconductors', 'XNAS'],
+  ['GEO', 'Geode Analytics', 'BATS'],
+  ['HLX', 'Helix Biotech', 'XNYS'],
+  ['ION', 'Ion Mobility', 'IEX'],
+  ['JDE', 'Jade Financial', 'XNYS'],
+  ['KNT', 'Kinetic Aerospace', 'XNAS'],
+] as const
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #historyTick = 0
+  #eventIndex = 0
+
+  reset(count: number, seed: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(seed)
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, venue] =
+        baseInstruments[index % baseInstruments.length]
+      const series = Math.floor(index / baseInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const open = roundPrice(20 + random() * 480)
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue,
+        open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: Date.now(),
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(2_026 + seed)
+    this.#rowCursor = 0
+    this.#historyTick = 0
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyEvents(
+    eventCount: number,
+    updateSparklines: boolean,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || eventCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#eventIndex = 0
+    while (this.#eventIndex < eventCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines && this.#historyTick++ % 4 === 0
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#eventIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(
+      stateValue ^ (stateValue >>> 15),
+      stateValue | 1,
+    )
+    const secondMix =
+      firstMix +
+      Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/angular/realtime-trading/src/app/market-feed-protocol.ts b/examples/angular/realtime-trading/src/app/market-feed-protocol.ts
new file mode 100644
index 0000000000..0a8b9925f5
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/market-feed-protocol.ts
@@ -0,0 +1,66 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  open: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'initialize'
+      rowCount: number
+      seed: number
+      running: boolean
+      targetEventsPerSecond: number
+      updateSparklines: boolean
+    }
+  | {
+      type: 'configure'
+      running?: boolean
+      targetEventsPerSecond?: number
+      updateSparklines?: boolean
+    }
+  | { type: 'reset'; rowCount: number; seed: number }
+  | { type: 'burst'; eventCount: number }
+  | { type: 'ack'; generation: number; sequence: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'ready'
+      generation: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'batch'
+      generation: number
+      sequence: number
+      eventCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/angular/realtime-trading/src/app/market-feed.worker.ts b/examples/angular/realtime-trading/src/app/market-feed.worker.ts
new file mode 100644
index 0000000000..7ce6313798
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/market-feed.worker.ts
@@ -0,0 +1,133 @@
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+
+const runtime = {
+  generation: 0,
+  sequence: 0,
+  inFlightSequence: null as number | null,
+  pendingEventCount: 0,
+  initialized: false,
+  running: true,
+  targetEventsPerSecond: 10_000,
+  updateSparklines: true,
+  eventBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'initialize':
+      runtime.running = data.running
+      runtime.targetEventsPerSecond = data.targetEventsPerSecond
+      runtime.updateSparklines = data.updateSparklines
+      reset(data.rowCount, data.seed)
+      break
+    case 'configure':
+      runtime.running = data.running ?? runtime.running
+      runtime.targetEventsPerSecond =
+        data.targetEventsPerSecond ?? runtime.targetEventsPerSecond
+      runtime.updateSparklines =
+        data.updateSparklines ?? runtime.updateSparklines
+      break
+    case 'reset':
+      reset(data.rowCount, data.seed)
+      break
+    case 'burst':
+      produceEvents(data.eventCount)
+      flush()
+      break
+    case 'ack':
+      if (
+        data.generation === runtime.generation &&
+        data.sequence === runtime.inFlightSequence
+      ) {
+        runtime.inFlightSequence = null
+        flush()
+      }
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.eventBudget +=
+      (runtime.targetEventsPerSecond * elapsed) / 1_000
+    const eventCount = Math.floor(runtime.eventBudget)
+    runtime.eventBudget -= eventCount
+    produceEvents(eventCount)
+  }
+
+  flush()
+}, 16)
+
+function reset(rowCount: number, seed: number): void {
+  runtime.initialized = true
+  runtime.generation++
+  runtime.sequence = 0
+  runtime.inFlightSequence = null
+  runtime.pendingEventCount = 0
+  pendingUpdates.clear()
+  runtime.eventBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'ready',
+    generation: runtime.generation,
+    quotes: engine.reset(rowCount, seed),
+  })
+}
+
+function produceEvents(eventCount: number): void {
+  if (!runtime.initialized || eventCount <= 0) return
+
+  runtime.pendingEventCount += eventCount
+  for (const update of engine.applyEvents(
+    eventCount,
+    runtime.updateSparklines,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (
+    runtime.inFlightSequence !== null ||
+    runtime.pendingEventCount === 0
+  )
+    return
+
+  const nextSequence = ++runtime.sequence
+  const message: MarketFeedEvent = {
+    type: 'batch',
+    generation: runtime.generation,
+    sequence: nextSequence,
+    eventCount: runtime.pendingEventCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingEventCount = 0
+  pendingUpdates.clear()
+  runtime.inFlightSequence = nextSequence
+  post(message)
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/angular/realtime-trading/src/app/quote-cells.ts b/examples/angular/realtime-trading/src/app/quote-cells.ts
new file mode 100644
index 0000000000..7f2e3cf9e1
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/quote-cells.ts
@@ -0,0 +1,258 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core'
+import type { OnDestroy } from '@angular/core'
+
+const compactNumber = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export const quoteCellLifecycle = {
+  created: 0,
+  destroyed: 0,
+}
+
+function trackCreation(): void {
+  quoteCellLifecycle.created++
+}
+
+function trackDestruction(): void {
+  quoteCellLifecycle.destroyed++
+}
+
+@Component({
+  selector: 'app-price-cell',
+  template: `
+    <button
+      class="price-button"
+      [class.quote-up]="move() >= 0"
+      [class.quote-down]="move() < 0"
+      (click)="select.emit()"
+    >
+      {{ formattedPrice() }}
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PriceCell implements OnDestroy {
+  readonly price = input.required<number>()
+  readonly move = input.required<number>()
+  readonly select = output<void>()
+  readonly formattedPrice = computed(() => this.price().toFixed(2))
+
+  constructor() {
+    trackCreation()
+  }
+
+  ngOnDestroy(): void {
+    trackDestruction()
+  }
+}
+
+@Component({
+  selector: 'app-stable-move-cell',
+  template: `
+    <span
+      class="move-cell"
+      [class.quote-up]="move() >= 0"
+      [class.quote-down]="move() < 0"
+    >
+      {{ formattedMove() }}
+    </span>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StableMoveCell implements OnDestroy {
+  readonly move = input.required<number>()
+  readonly formattedMove = computed(() => formatSigned(this.move()))
+
+  constructor() {
+    trackCreation()
+  }
+
+  ngOnDestroy(): void {
+    trackDestruction()
+  }
+}
+
+@Component({
+  selector: 'app-spread-cell',
+  template: `
+    <span class="spread-cell" [class.spread-wide]="basisPoints() >= 4">
+      {{ formattedSpread() }}
+      <small>{{ basisPoints().toFixed(1) }} bp</small>
+    </span>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpreadCell implements OnDestroy {
+  readonly bid = input.required<number>()
+  readonly ask = input.required<number>()
+  readonly spread = computed(() => Math.max(0, this.ask() - this.bid()))
+  readonly basisPoints = computed(() => {
+    const midpoint = (this.bid() + this.ask()) / 2
+    return midpoint === 0 ? 0 : (this.spread() / midpoint) * 10_000
+  })
+  readonly formattedSpread = computed(() => this.spread().toFixed(2))
+
+  constructor() {
+    trackCreation()
+  }
+
+  ngOnDestroy(): void {
+    trackDestruction()
+  }
+}
+
+@Component({
+  selector: 'app-depth-cell',
+  template: `
+    <div
+      class="depth-cell"
+      [attr.title]="'Bid ' + bidSize() + ' / Ask ' + askSize()"
+    >
+      <span class="depth-bid" [style.width.%]="bidShare()"></span>
+      <span class="depth-ask" [style.width.%]="100 - bidShare()"></span>
+      <span class="depth-values">
+        <span>{{ formattedBidSize() }}</span>
+        <span>{{ formattedAskSize() }}</span>
+      </span>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DepthCell implements OnDestroy {
+  readonly bidSize = input.required<number>()
+  readonly askSize = input.required<number>()
+  readonly bidShare = computed(() => {
+    const total = this.bidSize() + this.askSize()
+    return total === 0 ? 50 : (this.bidSize() / total) * 100
+  })
+  readonly formattedBidSize = computed(() =>
+    compactNumber.format(this.bidSize()),
+  )
+  readonly formattedAskSize = computed(() =>
+    compactNumber.format(this.askSize()),
+  )
+
+  constructor() {
+    trackCreation()
+  }
+
+  ngOnDestroy(): void {
+    trackDestruction()
+  }
+}
+
+@Component({
+  selector: 'app-quote-age-cell',
+  template: `
+    <span
+      class="quote-age"
+      [class.quote-age-warm]="ageMs() >= 500"
+      [class.quote-age-stale]="ageMs() >= 1_500"
+    >
+      {{ formattedAge() }}
+    </span>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QuoteAgeCell implements OnDestroy {
+  readonly ageMs = input.required<number>()
+  readonly formattedAge = computed(() => {
+    const age = this.ageMs()
+    return age < 1_000
+      ? `${Math.round(age)} ms`
+      : `${(age / 1_000).toFixed(1)} s`
+  })
+
+  constructor() {
+    trackCreation()
+  }
+
+  ngOnDestroy(): void {
+    trackDestruction()
+  }
+}
+
+@Component({
+  selector: 'app-up-move-cell',
+  template: `<span class="move-cell quote-up">▲ {{ formattedMove() }}</span>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UpMoveCell implements OnDestroy {
+  readonly move = input.required<number>()
+  readonly formattedMove = computed(() => formatSigned(this.move()))
+
+  constructor() {
+    trackCreation()
+  }
+
+  ngOnDestroy(): void {
+    trackDestruction()
+  }
+}
+
+@Component({
+  selector: 'app-down-move-cell',
+  template: `<span class="move-cell quote-down">▼ {{ formattedMove() }}</span>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DownMoveCell implements OnDestroy {
+  readonly move = input.required<number>()
+  readonly formattedMove = computed(() => formatSigned(this.move()))
+
+  constructor() {
+    trackCreation()
+  }
+
+  ngOnDestroy(): void {
+    trackDestruction()
+  }
+}
+
+@Component({
+  selector: 'app-sparkline-cell',
+  template: `
+    <svg class="sparkline" viewBox="0 0 100 24" preserveAspectRatio="none">
+      <polyline [attr.points]="points()" />
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SparklineCell implements OnDestroy {
+  readonly values = input.required<ReadonlyArray<number>>()
+  readonly points = computed(() => {
+    const values = this.values()
+    const min = Math.min(...values)
+    const max = Math.max(...values)
+    const range = max - min || 1
+    const denominator = Math.max(1, values.length - 1)
+
+    return values
+      .map((value, index) => {
+        const x = (index / denominator) * 100
+        const y = 22 - ((value - min) / range) * 20
+        return `${x.toFixed(1)},${y.toFixed(1)}`
+      })
+      .join(' ')
+  })
+
+  constructor() {
+    trackCreation()
+  }
+
+  ngOnDestroy(): void {
+    trackDestruction()
+  }
+}
+
+function formatSigned(value: number): string {
+  const sign = value >= 0 ? '+' : ''
+  return `${sign}${value.toFixed(2)}`
+}
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.html b/examples/angular/realtime-trading/src/app/shell/configurator.html
new file mode 100644
index 0000000000..c5c1b47f4a
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.html
@@ -0,0 +1,169 @@
+<aside class="configurator" aria-label="Benchmark configurator">
+  <header>
+    <span>CONFIGURATOR</span>
+    <small>RUN PARAMETERS</small>
+  </header>
+
+  <section class="config-section" aria-labelledby="adapter-settings">
+    <h2 id="adapter-settings">TABLE ADAPTER</h2>
+    <label class="field">
+      <span>Implementation</span>
+      <select
+        data-testid="adapter-select"
+        [value]="controller.tableAdapter()"
+        (change)="setTableAdapter($event)"
+      >
+        <option value="local">Local optimized (v9)</option>
+        <option value="beta">Published 9.0.0-beta.80</option>
+        <option value="v8">Published 8.21.4</option>
+      </select>
+      <small>Switching destroys the active table and mounts the selected adapter.</small>
+    </label>
+  </section>
+
+  <section class="config-section" aria-labelledby="feed-settings">
+    <h2 id="feed-settings">FEED</h2>
+    <button
+      class="primary-action"
+      type="button"
+      data-testid="feed-toggle"
+      (click)="controller.toggleFeed()"
+    >
+      {{ controller.running() ? 'PAUSE FEED' : 'START FEED' }}
+    </button>
+
+    <label class="field">
+      <span>Instruments</span>
+      <select
+        data-testid="instrument-count-select"
+        [value]="controller.instrumentCount()"
+        (change)="setRowCount($event)"
+      >
+        <option value="50">50</option>
+        <option value="100">100</option>
+        <option value="150">150</option>
+        <option value="250">250</option>
+        <option value="350">350</option>
+        <option value="500">500</option>
+        <option value="750">750</option>
+        <option value="1000">1,000</option>
+      </select>
+    </label>
+
+    <label class="field">
+      <span>Load profile</span>
+      <select
+        data-testid="load-profile-select"
+        [value]="controller.feedLoadProfile()"
+        (change)="setFeedLoadProfile($event)"
+      >
+        <option value="low">Low · 1K/s</option>
+        <option value="medium">Medium · 5K/s</option>
+        <option value="high">High · 10K/s</option>
+        <option value="very-high">Very high · 25K/s</option>
+        <option value="max">Max · 100K/s</option>
+        <option value="custom">Custom</option>
+      </select>
+      <small>High is the repeatable default; Max is intentionally saturating.</small>
+    </label>
+
+    <label class="field rate-field">
+      <span>
+        Target event rate
+        <strong>{{ formatRate(controller.targetEventsPerSecond()) }}/s</strong>
+      </span>
+      <input
+        data-testid="target-rate-slider"
+        type="range"
+        min="100"
+        max="100000"
+        step="100"
+        [value]="controller.targetEventsPerSecond()"
+        (input)="setTargetRate($event)"
+      />
+      <small>100 — 100,000 events/s</small>
+    </label>
+  </section>
+
+  <section class="config-section" aria-labelledby="render-settings">
+    <h2 id="render-settings">RENDER PATH</h2>
+    <label class="field">
+      <span>Row workload</span>
+      <select
+        data-testid="row-workload-select"
+        [value]="controller.rowWorkloadMode()"
+        (change)="setRowWorkloadMode($event)"
+      >
+        <option value="stable">Stable universe</option>
+        <option value="price-sort">Continuously sort by Last</option>
+        <option value="rotating-filter">Rotate 20% filtered rows</option>
+        <option value="identity-churn">Replace 10% of ticker IDs</option>
+      </select>
+      <small>
+        Reorder preserves IDs; filter removes/reinserts rows; replacement forces
+        new row identities.
+      </small>
+    </label>
+
+    <label class="toggle-field">
+      <input
+        data-testid="table-worker-toggle"
+        type="checkbox"
+        [disabled]="controller.tableAdapter() !== 'local'"
+        [checked]="controller.tableWorkerEnabled()"
+        (change)="setTableWorkerEnabled($event)"
+      />
+      <span>
+        Worker row model (v9 only)
+        <small>offloads the filtered row-model stage to a dedicated worker</small>
+      </span>
+    </label>
+
+    <label class="toggle-field">
+      <input
+        type="checkbox"
+        [checked]="controller.rendererMode() === 'swap'"
+        (change)="setRendererMode($event)"
+      />
+      <span>
+        Swap Tick component A ↔ B
+        <small>destroy and recreate when direction changes</small>
+      </span>
+    </label>
+
+    <label class="toggle-field">
+      <input
+        type="checkbox"
+        [checked]="controller.updateSparklines()"
+        (change)="setSparklineUpdates($event)"
+      />
+      <span>
+        Update sparklines
+        <small>new history input every four quote events</small>
+      </span>
+    </label>
+
+    <label class="toggle-field">
+      <input
+        type="checkbox"
+        [checked]="controller.updateQuoteAges()"
+        (change)="setQuoteAgeUpdates($event)"
+      />
+      <span>
+        Update quote age clock
+        <small>invalidates every Age cell on a shared 100 ms clock</small>
+      </span>
+    </label>
+  </section>
+
+  <section class="config-section" aria-labelledby="stress-actions">
+    <h2 id="stress-actions">STRESS ACTIONS</h2>
+    <div class="action-grid">
+      <button type="button" (click)="controller.runBurst()">RUN 25K BURST</button>
+      <button type="button" (click)="controller.resetMarket()">RESET SESSION</button>
+    </div>
+  </section>
+
+  <app-diagnostics />
+  <app-selected-instrument />
+</aside>
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.ts b/examples/angular/realtime-trading/src/app/shell/configurator.ts
new file mode 100644
index 0000000000..560774567f
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.ts
@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { Diagnostics } from './diagnostics'
+import { SelectedInstrument } from './selected-instrument'
+import {
+  formatRate,
+  inputChecked,
+  inputValue,
+  selectValue,
+} from './shell-formatters'
+import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
+import type { TableAdapter } from '../core/trading-benchmark.controller'
+
+@Component({
+  selector: 'app-configurator',
+  imports: [Diagnostics, SelectedInstrument],
+  templateUrl: './configurator.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Configurator {
+  readonly controller = inject(TradingBenchmarkController)
+  readonly formatRate = formatRate
+
+  readonly setRowCount = (event: Event) =>
+    this.controller.setRowCount(Number(selectValue(event)))
+  readonly setTargetRate = (event: Event) =>
+    this.controller.setTargetRate(Number(inputValue(event)))
+  readonly setFeedLoadProfile = (event: Event) =>
+    this.controller.setFeedLoadProfile(
+      selectValue(event) as FeedLoadProfile,
+    )
+  readonly setRowWorkloadMode = (event: Event) =>
+    this.controller.setRowWorkloadMode(
+      selectValue(event) as RowWorkloadMode,
+    )
+  readonly setTableAdapter = (event: Event) =>
+    this.controller.setTableAdapter(selectValue(event) as TableAdapter)
+  readonly setRendererMode = (event: Event) =>
+    this.controller.setRendererMode(inputChecked(event))
+  readonly setTableWorkerEnabled = (event: Event) =>
+    this.controller.setTableWorkerEnabled(inputChecked(event))
+  readonly setSparklineUpdates = (event: Event) =>
+    this.controller.setSparklineUpdates(inputChecked(event))
+  readonly setQuoteAgeUpdates = (event: Event) =>
+    this.controller.setQuoteAgeUpdates(inputChecked(event))
+}
diff --git a/examples/angular/realtime-trading/src/app/shell/diagnostics.ts b/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
new file mode 100644
index 0000000000..d295b51ff9
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { formatInteger } from './shell-formatters'
+
+@Component({
+  selector: 'app-diagnostics',
+  template: `
+    <section class="config-section diagnostics" aria-labelledby="diagnostics">
+      <h2 id="diagnostics">DIAGNOSTICS</h2>
+      <dl>
+        <div>
+          <dt>Mounted cells</dt>
+          <dd>{{ formatInteger(controller.mountedCells()) }}</dd>
+        </div>
+        <div>
+          <dt>Live components</dt>
+          <dd>{{ formatInteger(controller.liveComponents()) }}</dd>
+        </div>
+        <div>
+          <dt>Created / destroyed</dt>
+          <dd>
+            {{ formatInteger(controller.metrics().componentsCreated) }} /
+            {{ formatInteger(controller.metrics().componentsDestroyed) }}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages</dt>
+          <dd data-testid="worker-messages">
+            {{ formatInteger(controller.metrics().workerMessages) }}
+          </dd>
+        </div>
+        <div>
+          <dt>Last batch events / rows</dt>
+          <dd>
+            {{ formatInteger(controller.metrics().lastBatchSize) }} /
+            {{ formatInteger(controller.metrics().lastUpdateCount) }}
+          </dd>
+        </div>
+        <div>
+          <dt>Renders &gt; 16.7 ms</dt>
+          <dd>{{ controller.metrics().slowRenders }}</dd>
+        </div>
+        <div>
+          <dt>Long animation frames</dt>
+          <dd>
+            {{
+              controller.longAnimationFramesSupported
+                ? formatInteger(controller.metrics().longAnimationFrames)
+                : 'Unsupported'
+            }}
+          </dd>
+        </div>
+        <div>
+          <dt>JS heap</dt>
+          <dd>
+            {{
+              controller.metrics().heapMb === null
+                ? 'N/A'
+                : controller.metrics().heapMb!.toFixed(1) + ' MB'
+            }}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Diagnostics {
+  readonly controller = inject(TradingBenchmarkController)
+  readonly formatInteger = formatInteger
+}
diff --git a/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts b/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
new file mode 100644
index 0000000000..3006101ab0
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { formatInteger } from './shell-formatters'
+
+@Component({
+  selector: 'app-market-statusbar',
+  template: `
+    <footer class="market-statusbar">
+      <span>
+        BATCH EVENTS
+        <strong>
+          {{ formatInteger(controller.metrics().lastBatchSize) }}
+        </strong>
+      </span>
+      <span>
+        ROW UPDATES
+        <strong>
+          {{ formatInteger(controller.metrics().lastUpdateCount) }}
+        </strong>
+      </span>
+      <span>
+        HOSTS
+        <strong>{{ formatInteger(controller.mountedCells()) }}</strong>
+      </span>
+      <span>
+        COMPONENTS
+        <strong>{{ formatInteger(controller.liveComponents()) }}</strong>
+      </span>
+      <span class="statusbar-spacer"></span>
+      <span>WORKER / ACKNOWLEDGED / IMMUTABLE</span>
+    </footer>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MarketStatusbar {
+  readonly controller = inject(TradingBenchmarkController)
+  readonly formatInteger = formatInteger
+}
diff --git a/examples/angular/realtime-trading/src/app/shell/market-toolbar.ts b/examples/angular/realtime-trading/src/app/shell/market-toolbar.ts
new file mode 100644
index 0000000000..a42c0e55c7
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/market-toolbar.ts
@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { formatInteger } from './shell-formatters'
+
+@Component({
+  selector: 'app-market-toolbar',
+  template: `
+    <header class="market-toolbar">
+      <div class="watchlist-name">
+        <span>WATCHLIST</span>
+        <strong>ALL INSTRUMENTS</strong>
+      </div>
+      <div class="market-context">
+        <span>
+          {{ formatInteger(controller.displayQuotes().length) }} /
+          {{ formatInteger(controller.quotes().length) }} SYMBOLS
+        </span>
+        <span>
+          {{
+            controller.tableAdapter() === 'local'
+              ? 'LOCAL OPTIMIZED'
+              : controller.tableAdapter() === 'beta'
+                ? 'BETA.80'
+                : 'V8.21.4'
+          }}
+        </span>
+        <span>WORKER STREAM</span>
+        <span>
+          {{
+            controller.tableAdapter() === 'local' &&
+            controller.tableWorkerEnabled()
+              ? 'ROW MODEL WORKER ON'
+              : 'ROW MODEL MAIN THREAD'
+          }}
+        </span>
+        <span>IMMUTABLE ROWS</span>
+        <span>{{ controller.rowWorkloadLabel() }}</span>
+        <span>
+          {{
+            controller.rendererMode() === 'stable'
+              ? 'STABLE CELLS'
+              : 'A/B CELL SWAP'
+          }}
+        </span>
+        <span>
+          {{ controller.updateSparklines() ? 'CHARTS ON' : 'CHARTS OFF' }}
+        </span>
+        <span>
+          {{ controller.updateQuoteAges() ? 'AGE CLOCK ON' : 'AGE CLOCK OFF' }}
+        </span>
+      </div>
+    </header>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MarketToolbar {
+  readonly controller = inject(TradingBenchmarkController)
+  readonly formatInteger = formatInteger
+}
diff --git a/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts b/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
new file mode 100644
index 0000000000..145d7121f7
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { formatInteger, formatMs, formatRate } from './shell-formatters'
+
+@Component({
+  selector: 'app-metrics-strip',
+  template: `
+    <section class="metrics-strip" aria-label="Live performance metrics">
+      <article>
+        <span>THROUGHPUT</span>
+        <strong data-testid="actual-rate">
+          {{ formatRate(controller.metrics().actualEventsPerSecond) }}
+        </strong>
+        <small>events/s</small>
+      </article>
+      <article>
+        <span>RAF RATE</span>
+        <strong data-testid="raf-rate">
+          {{ controller.metrics().rafCallbacksPerSecond.toFixed(1) }}
+        </strong>
+        <small>callbacks/s</small>
+      </article>
+      <article>
+        <span>TABLE RENDERS</span>
+        <strong data-testid="table-render-rate">
+          {{ controller.metrics().tableRendersPerSecond.toFixed(1) }}
+        </strong>
+        <small>worker batches/s</small>
+      </article>
+      <article>
+        <span>AVG RENDER</span>
+        <strong>{{ formatMs(controller.metrics().averageRenderMs) }}</strong>
+        <small>mutation → render</small>
+      </article>
+      <article>
+        <span>P95 RENDER</span>
+        <strong>{{ formatMs(controller.metrics().p95RenderMs) }}</strong>
+        <small>max {{ formatMs(controller.metrics().maxRenderMs) }}</small>
+      </article>
+      <article>
+        <span>LONG FRAMES</span>
+        @if (controller.longAnimationFramesSupported) {
+          <strong
+            data-testid="long-frame-count"
+            [class.metric-alert]="controller.metrics().longAnimationFrames > 0"
+          >
+            {{ controller.metrics().longAnimationFrames }}
+          </strong>
+          <small>
+            worst
+            {{ formatMs(controller.metrics().worstLongAnimationFrameMs) }}
+          </small>
+        } @else {
+          <strong data-testid="long-frame-count">N/A</strong>
+          <small>unsupported</small>
+        }
+      </article>
+      <article>
+        <span>TOTAL EVENTS</span>
+        <strong data-testid="total-events">
+          {{ formatInteger(controller.metrics().totalEvents) }}
+        </strong>
+        <small>since reset</small>
+      </article>
+    </section>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetricsStrip {
+  readonly controller = inject(TradingBenchmarkController)
+  readonly formatInteger = formatInteger
+  readonly formatMs = formatMs
+  readonly formatRate = formatRate
+}
diff --git a/examples/angular/realtime-trading/src/app/shell/selected-instrument.ts b/examples/angular/realtime-trading/src/app/shell/selected-instrument.ts
new file mode 100644
index 0000000000..541d30fe2b
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/selected-instrument.ts
@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+
+@Component({
+  selector: 'app-selected-instrument',
+  template: `
+    <section class="config-section selected-instrument">
+      <h2>SELECTED INSTRUMENT</h2>
+      @if (controller.selectedQuote(); as quote) {
+        <div class="selection">
+          <div>
+            <strong>{{ quote.symbol }}</strong>
+            <span>{{ quote.company }}</span>
+          </div>
+          <small>{{ quote.venue }}</small>
+        </div>
+        <dl>
+          <div>
+            <dt>Last</dt>
+            <dd>{{ quote.price.toFixed(2) }}</dd>
+          </div>
+          <div>
+            <dt>Bid / ask</dt>
+            <dd>{{ quote.bid.toFixed(2) }} / {{ quote.ask.toFixed(2) }}</dd>
+          </div>
+        </dl>
+      } @else {
+        <p>Click a value in the Last column to inspect its output.</p>
+      }
+    </section>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectedInstrument {
+  readonly controller = inject(TradingBenchmarkController)
+}
diff --git a/examples/angular/realtime-trading/src/app/shell/shell-formatters.ts b/examples/angular/realtime-trading/src/app/shell/shell-formatters.ts
new file mode 100644
index 0000000000..7686f5fbaa
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/shell-formatters.ts
@@ -0,0 +1,20 @@
+const integerFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 0,
+})
+const rateFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export const formatInteger = (value: number): string =>
+  integerFormatter.format(value)
+export const formatRate = (value: number): string =>
+  rateFormatter.format(value)
+export const formatMs = (value: number): string => `${value.toFixed(2)} ms`
+
+export const selectValue = (event: Event): string =>
+  (event.target as HTMLSelectElement).value
+export const inputValue = (event: Event): string =>
+  (event.target as HTMLInputElement).value
+export const inputChecked = (event: Event): boolean =>
+  (event.target as HTMLInputElement).checked
diff --git a/examples/angular/realtime-trading/src/app/shell/shell-header.ts b/examples/angular/realtime-trading/src/app/shell/shell-header.ts
new file mode 100644
index 0000000000..04e763f0f3
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/shell-header.ts
@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+
+@Component({
+  selector: 'app-shell-header',
+  template: `
+    <header class="app-bar">
+      <div class="brand">
+        <span class="brand-mark">TT</span>
+        <strong>MARKET MONITOR</strong>
+        <span class="environment">SIMULATED</span>
+      </div>
+      <div class="session-info">
+        <span>ANGULAR / FLEX RENDER</span>
+        <span
+          class="feed-status"
+          data-testid="feed-status"
+          [class.is-running]="controller.workerReady() && controller.running()"
+        >
+          <span class="status-dot" aria-hidden="true"></span>
+          {{
+            !controller.workerReady()
+              ? 'FEED CONNECTING'
+              : controller.running()
+                ? 'FEED LIVE'
+                : 'FEED PAUSED'
+          }}
+        </span>
+      </div>
+    </header>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShellHeader {
+  readonly controller = inject(TradingBenchmarkController)
+}
diff --git a/examples/angular/realtime-trading/src/app/shell/trading-shell.html b/examples/angular/realtime-trading/src/app/shell/trading-shell.html
new file mode 100644
index 0000000000..02abfd1289
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/trading-shell.html
@@ -0,0 +1,20 @@
+<main class="trading-terminal">
+  <app-shell-header />
+
+  @if (devMode) {
+    <aside class="development-warning">
+      DEV BUILD — use the production configuration before recording results.
+    </aside>
+  }
+
+  <div class="workspace">
+    <section class="market-panel" aria-label="Live synthetic quotes">
+      <app-market-toolbar />
+      <app-metrics-strip />
+      <ng-content />
+      <app-market-statusbar />
+    </section>
+
+    <app-configurator />
+  </div>
+</main>
diff --git a/examples/angular/realtime-trading/src/app/shell/trading-shell.ts b/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
new file mode 100644
index 0000000000..bff3c49918
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { Configurator } from './configurator'
+import { MarketStatusbar } from './market-statusbar'
+import { MarketToolbar } from './market-toolbar'
+import { MetricsStrip } from './metrics-strip'
+import { ShellHeader } from './shell-header'
+
+@Component({
+  selector: 'app-trading-shell',
+  imports: [
+    Configurator,
+    MarketStatusbar,
+    MarketToolbar,
+    MetricsStrip,
+    ShellHeader,
+  ],
+  templateUrl: './trading-shell.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TradingShell {
+  readonly devMode = inject(TradingBenchmarkController).devMode
+}
diff --git a/examples/angular/realtime-trading/src/app/table-row-model.worker.ts b/examples/angular/realtime-trading/src/app/table-row-model.worker.ts
new file mode 100644
index 0000000000..ad7a0357ad
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table-row-model.worker.ts
@@ -0,0 +1,44 @@
+import {
+  createFilteredRowModel,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/angular-table'
+import {
+  initTableWorker,
+  workerRowModelsFeature,
+} from '@tanstack/angular-table/experimental-worker-plugin'
+import type { ColumnDef } from '@tanstack/angular-table'
+import type { MarketQuote } from './market-data'
+
+const workerFeatures = tableFeatures({
+  ...stockFeatures,
+  workerRowModelsFeature,
+  filteredRowModel: createFilteredRowModel(),
+})
+
+// The worker only computes row models, so it needs portable accessors but none
+// of the Angular render components used by the visible table.
+const workerColumns: Array<
+  ColumnDef<typeof workerFeatures, MarketQuote, unknown>
+> = [
+  { accessorKey: 'symbol' },
+  { accessorKey: 'venue' },
+  { accessorKey: 'bid' },
+  { accessorKey: 'ask' },
+  { accessorKey: 'price' },
+  { accessorKey: 'lastMove' },
+  { accessorKey: 'bidSize' },
+  { accessorKey: 'askSize' },
+  { accessorKey: 'lastSize' },
+  { accessorKey: 'lastUpdatedAt' },
+  { accessorKey: 'open' },
+  { accessorKey: 'volume' },
+  { accessorKey: 'turnover' },
+  { accessorKey: 'history' },
+]
+
+initTableWorker({
+  features: workerFeatures,
+  columns: workerColumns,
+  getRowId: (row) => row.id,
+})
diff --git a/examples/angular/realtime-trading/src/app/table-v8.html b/examples/angular/realtime-trading/src/app/table-v8.html
new file mode 100644
index 0000000000..6d8153d3c8
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table-v8.html
@@ -0,0 +1,48 @@
+<div class="table-scroll">
+  <table [style.width.px]="table.getTotalSize()">
+    <thead>
+      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
+        <tr>
+          @for (header of headerGroup.headers; track header.id) {
+            <th [style.width.px]="header.getSize()">
+              @if (!header.isPlaceholder) {
+                <ng-container
+                  *flexRender="
+                    header.column.columnDef.header;
+                    props: header.getContext();
+                    let headerCell
+                  "
+                >
+                  {{ headerCell }}
+                </ng-container>
+              }
+            </th>
+          }
+        </tr>
+      }
+    </thead>
+    <tbody>
+      @for (row of table.getRowModel().rows; track row.id) {
+        <tr
+          [class.is-selected]="selectedSymbol() === row.original.symbol"
+          [attr.data-symbol]="row.original.symbol"
+          [attr.data-row-id]="row.original.id"
+          [attr.title]="row.original.company"
+        >
+          @for (cell of row.getVisibleCells(); track cell.id) {
+            <td
+              [style.width.px]="cell.column.getSize()"
+              [class.numeric-cell]="cell.column.id !== 'symbol' && cell.column.id !== 'venue'"
+            >
+              <ng-container
+                *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let renderCell"
+              >
+                {{ renderCell }}
+              </ng-container>
+            </td>
+          }
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>
diff --git a/examples/angular/realtime-trading/src/app/table-v9.html b/examples/angular/realtime-trading/src/app/table-v9.html
new file mode 100644
index 0000000000..9563edc157
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table-v9.html
@@ -0,0 +1,40 @@
+<div class="table-scroll">
+  <table [style.width.px]="table.getTotalSize()">
+    <thead>
+      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
+        <tr>
+          @for (header of headerGroup.headers; track header.id) {
+            <th [style.width.px]="header.getSize()">
+              @if (!header.isPlaceholder) {
+                <ng-container *flexRenderHeader="header; let headerCell">
+                  {{ headerCell }}
+                </ng-container>
+              }
+            </th>
+          }
+        </tr>
+      }
+    </thead>
+    <tbody>
+      @for (row of table.getRowModel().rows; track row.id) {
+        <tr
+          [class.is-selected]="selectedSymbol() === row.original.symbol"
+          [attr.data-symbol]="row.original.symbol"
+          [attr.data-row-id]="row.original.id"
+          [attr.title]="row.original.company"
+        >
+          @for (cell of row.getVisibleCells(); track cell.id) {
+            <td
+              [style.width.px]="cell.column.getSize()"
+              [class.numeric-cell]="cell.column.id !== 'symbol' && cell.column.id !== 'venue'"
+            >
+              <ng-container *flexRenderCell="cell; let renderCell">
+                {{ renderCell }}
+              </ng-container>
+            </td>
+          }
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>
diff --git a/examples/angular/realtime-trading/src/app/trading-column-types.ts b/examples/angular/realtime-trading/src/app/trading-column-types.ts
new file mode 100644
index 0000000000..bfac6f3870
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/trading-column-types.ts
@@ -0,0 +1,10 @@
+export type RendererMode = 'stable' | 'swap'
+
+export interface TradingColumnState {
+  quoteClock: () => number
+  rendererMode: () => RendererMode
+  selectSymbol: (symbol: string) => void
+  updateQuoteAges: () => boolean
+}
+
+export const TRADING_COLUMN_COUNT = 14
diff --git a/examples/angular/realtime-trading/src/app/trading-columns-beta.ts b/examples/angular/realtime-trading/src/app/trading-columns-beta.ts
new file mode 100644
index 0000000000..03c6175e35
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/trading-columns-beta.ts
@@ -0,0 +1,168 @@
+import { flexRenderComponent } from '@tanstack/angular-table-beta'
+import {
+  DepthCell,
+  DownMoveCell,
+  PriceCell,
+  QuoteAgeCell,
+  SparklineCell,
+  SpreadCell,
+  StableMoveCell,
+  UpMoveCell,
+} from './quote-cells'
+import type {
+  ColumnDef,
+  TableFeatures,
+} from '@tanstack/angular-table-beta'
+import type { MarketQuote } from './market-data'
+import type { TradingColumnState } from './trading-column-types'
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+  style: 'currency',
+  currency: 'USD',
+})
+
+export function createBetaTradingColumns(
+  state: TradingColumnState,
+): Array<ColumnDef<TableFeatures, MarketQuote, unknown>> {
+  return [
+    {
+      id: 'symbol',
+      header: 'Ticker',
+      size: 90,
+      cell: ({ row }) => row.original.symbol,
+    },
+    {
+      id: 'venue',
+      header: 'Venue',
+      size: 70,
+      cell: ({ row }) => row.original.venue,
+    },
+    {
+      id: 'bid',
+      header: 'Bid',
+      size: 90,
+      cell: ({ row }) => row.original.bid.toFixed(2),
+    },
+    {
+      id: 'ask',
+      header: 'Ask',
+      size: 90,
+      cell: ({ row }) => row.original.ask.toFixed(2),
+    },
+    {
+      id: 'spread',
+      header: 'Spread',
+      size: 95,
+      cell: ({ row }) =>
+        flexRenderComponent(SpreadCell, {
+          inputs: {
+            bid: row.original.bid,
+            ask: row.original.ask,
+          },
+        }),
+    },
+    {
+      id: 'price',
+      header: 'Last',
+      size: 100,
+      cell: ({ row }) =>
+        flexRenderComponent(PriceCell, {
+          inputs: {
+            price: row.original.price,
+            move: row.original.lastMove,
+          },
+          outputs: {
+            select: () => state.selectSymbol(row.original.symbol),
+          },
+        }),
+    },
+    {
+      id: 'lastMove',
+      header: 'Last Move',
+      size: 105,
+      cell: ({ row }) => {
+        const move = row.original.lastMove
+        if (state.rendererMode() === 'stable') {
+          return flexRenderComponent(StableMoveCell, {
+            inputs: { move },
+          })
+        }
+        return flexRenderComponent(move >= 0 ? UpMoveCell : DownMoveCell, {
+          inputs: { move },
+        })
+      },
+    },
+    {
+      id: 'lastSize',
+      header: 'Last Qty',
+      size: 90,
+      cell: ({ row }) => compactFormatter.format(row.original.lastSize),
+    },
+    {
+      id: 'depth',
+      header: 'Bid / Ask Qty',
+      size: 145,
+      cell: ({ row }) =>
+        flexRenderComponent(DepthCell, {
+          inputs: {
+            bidSize: row.original.bidSize,
+            askSize: row.original.askSize,
+          },
+        }),
+    },
+    {
+      id: 'age',
+      header: 'Quote Age',
+      size: 85,
+      cell: ({ row }) =>
+        flexRenderComponent(QuoteAgeCell, {
+          inputs: {
+            ageMs: state.updateQuoteAges()
+              ? Math.max(
+                  0,
+                  state.quoteClock() - row.original.lastUpdatedAt,
+                )
+              : 0,
+          },
+        }),
+    },
+    {
+      id: 'change',
+      header: 'Day %',
+      size: 90,
+      cell: ({ row }) => {
+        const change = (row.original.price / row.original.open - 1) * 100
+        const sign = change >= 0 ? '+' : ''
+        return `${sign}${change.toFixed(2)}%`
+      },
+    },
+    {
+      id: 'volume',
+      header: 'Total Qty',
+      size: 100,
+      cell: ({ row }) => compactFormatter.format(row.original.volume),
+    },
+    {
+      id: 'turnover',
+      header: 'Traded Value',
+      size: 115,
+      cell: ({ row }) => currencyFormatter.format(row.original.turnover),
+    },
+    {
+      id: 'history',
+      header: 'Intraday',
+      size: 150,
+      cell: ({ row }) =>
+        flexRenderComponent(SparklineCell, {
+          inputs: { values: row.original.history },
+        }),
+    },
+  ]
+}
diff --git a/examples/angular/realtime-trading/src/app/trading-columns-v8.ts b/examples/angular/realtime-trading/src/app/trading-columns-v8.ts
new file mode 100644
index 0000000000..1f13889d18
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/trading-columns-v8.ts
@@ -0,0 +1,165 @@
+import { flexRenderComponent } from '@tanstack/angular-table-v8'
+import {
+  DepthCell,
+  DownMoveCell,
+  PriceCell,
+  QuoteAgeCell,
+  SparklineCell,
+  SpreadCell,
+  StableMoveCell,
+  UpMoveCell,
+} from './quote-cells'
+import type { ColumnDef } from '@tanstack/angular-table-v8'
+import type { MarketQuote } from './market-data'
+import type { TradingColumnState } from './trading-column-types'
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+  style: 'currency',
+  currency: 'USD',
+})
+
+export function createV8TradingColumns(
+  state: TradingColumnState,
+): Array<ColumnDef<MarketQuote>> {
+  return [
+    {
+      id: 'symbol',
+      header: 'Ticker',
+      size: 90,
+      cell: ({ row }) => row.original.symbol,
+    },
+    {
+      id: 'venue',
+      header: 'Venue',
+      size: 70,
+      cell: ({ row }) => row.original.venue,
+    },
+    {
+      id: 'bid',
+      header: 'Bid',
+      size: 90,
+      cell: ({ row }) => row.original.bid.toFixed(2),
+    },
+    {
+      id: 'ask',
+      header: 'Ask',
+      size: 90,
+      cell: ({ row }) => row.original.ask.toFixed(2),
+    },
+    {
+      id: 'spread',
+      header: 'Spread',
+      size: 95,
+      cell: ({ row }) =>
+        flexRenderComponent(SpreadCell, {
+          inputs: {
+            bid: row.original.bid,
+            ask: row.original.ask,
+          },
+        }),
+    },
+    {
+      id: 'price',
+      header: 'Last',
+      size: 100,
+      cell: ({ row }) =>
+        flexRenderComponent(PriceCell, {
+          inputs: {
+            price: row.original.price,
+            move: row.original.lastMove,
+          },
+          outputs: {
+            select: () => state.selectSymbol(row.original.symbol),
+          },
+        }),
+    },
+    {
+      id: 'lastMove',
+      header: 'Last Move',
+      size: 105,
+      cell: ({ row }) => {
+        const move = row.original.lastMove
+        if (state.rendererMode() === 'stable') {
+          return flexRenderComponent(StableMoveCell, {
+            inputs: { move },
+          })
+        }
+        return flexRenderComponent(move >= 0 ? UpMoveCell : DownMoveCell, {
+          inputs: { move },
+        })
+      },
+    },
+    {
+      id: 'lastSize',
+      header: 'Last Qty',
+      size: 90,
+      cell: ({ row }) => compactFormatter.format(row.original.lastSize),
+    },
+    {
+      id: 'depth',
+      header: 'Bid / Ask Qty',
+      size: 145,
+      cell: ({ row }) =>
+        flexRenderComponent(DepthCell, {
+          inputs: {
+            bidSize: row.original.bidSize,
+            askSize: row.original.askSize,
+          },
+        }),
+    },
+    {
+      id: 'age',
+      header: 'Quote Age',
+      size: 85,
+      cell: ({ row }) =>
+        flexRenderComponent(QuoteAgeCell, {
+          inputs: {
+            ageMs: state.updateQuoteAges()
+              ? Math.max(
+                  0,
+                  state.quoteClock() - row.original.lastUpdatedAt,
+                )
+              : 0,
+          },
+        }),
+    },
+    {
+      id: 'change',
+      header: 'Day %',
+      size: 90,
+      cell: ({ row }) => {
+        const change = (row.original.price / row.original.open - 1) * 100
+        const sign = change >= 0 ? '+' : ''
+        return `${sign}${change.toFixed(2)}%`
+      },
+    },
+    {
+      id: 'volume',
+      header: 'Total Qty',
+      size: 100,
+      cell: ({ row }) => compactFormatter.format(row.original.volume),
+    },
+    {
+      id: 'turnover',
+      header: 'Traded Value',
+      size: 115,
+      cell: ({ row }) => currencyFormatter.format(row.original.turnover),
+    },
+    {
+      id: 'history',
+      header: 'Intraday',
+      size: 150,
+      cell: ({ row }) =>
+        flexRenderComponent(SparklineCell, {
+          inputs: { values: row.original.history },
+        }),
+    },
+  ]
+}
diff --git a/examples/angular/realtime-trading/src/app/trading-columns.ts b/examples/angular/realtime-trading/src/app/trading-columns.ts
new file mode 100644
index 0000000000..5fdc40efcb
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/trading-columns.ts
@@ -0,0 +1,165 @@
+import { flexRenderComponent } from '@tanstack/angular-table'
+import {
+  DepthCell,
+  DownMoveCell,
+  PriceCell,
+  QuoteAgeCell,
+  SparklineCell,
+  SpreadCell,
+  StableMoveCell,
+  UpMoveCell,
+} from './quote-cells'
+import type { ColumnDef, TableFeatures } from '@tanstack/angular-table'
+import type { MarketQuote } from './market-data'
+import type { TradingColumnState } from './trading-column-types'
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+  style: 'currency',
+  currency: 'USD',
+})
+
+export function createTradingColumns(
+  state: TradingColumnState,
+): Array<ColumnDef<TableFeatures, MarketQuote, unknown>> {
+  return [
+    {
+      id: 'symbol',
+      header: 'Ticker',
+      size: 90,
+      cell: ({ row }) => row.original.symbol,
+    },
+    {
+      id: 'venue',
+      header: 'Venue',
+      size: 70,
+      cell: ({ row }) => row.original.venue,
+    },
+    {
+      id: 'bid',
+      header: 'Bid',
+      size: 90,
+      cell: ({ row }) => row.original.bid.toFixed(2),
+    },
+    {
+      id: 'ask',
+      header: 'Ask',
+      size: 90,
+      cell: ({ row }) => row.original.ask.toFixed(2),
+    },
+    {
+      id: 'spread',
+      header: 'Spread',
+      size: 95,
+      cell: ({ row }) =>
+        flexRenderComponent(SpreadCell, {
+          inputs: {
+            bid: row.original.bid,
+            ask: row.original.ask,
+          },
+        }),
+    },
+    {
+      id: 'price',
+      header: 'Last',
+      size: 100,
+      cell: ({ row }) =>
+        flexRenderComponent(PriceCell, {
+          inputs: {
+            price: row.original.price,
+            move: row.original.lastMove,
+          },
+          outputs: {
+            select: () => state.selectSymbol(row.original.symbol),
+          },
+        }),
+    },
+    {
+      id: 'lastMove',
+      header: 'Last Move',
+      size: 105,
+      cell: ({ row }) => {
+        const move = row.original.lastMove
+        if (state.rendererMode() === 'stable') {
+          return flexRenderComponent(StableMoveCell, {
+            inputs: { move },
+          })
+        }
+        return flexRenderComponent(move >= 0 ? UpMoveCell : DownMoveCell, {
+          inputs: { move },
+        })
+      },
+    },
+    {
+      id: 'lastSize',
+      header: 'Last Qty',
+      size: 90,
+      cell: ({ row }) => compactFormatter.format(row.original.lastSize),
+    },
+    {
+      id: 'depth',
+      header: 'Bid / Ask Qty',
+      size: 145,
+      cell: ({ row }) =>
+        flexRenderComponent(DepthCell, {
+          inputs: {
+            bidSize: row.original.bidSize,
+            askSize: row.original.askSize,
+          },
+        }),
+    },
+    {
+      id: 'age',
+      header: 'Quote Age',
+      size: 85,
+      cell: ({ row }) =>
+        flexRenderComponent(QuoteAgeCell, {
+          inputs: {
+            ageMs: state.updateQuoteAges()
+              ? Math.max(
+                  0,
+                  state.quoteClock() - row.original.lastUpdatedAt,
+                )
+              : 0,
+          },
+        }),
+    },
+    {
+      id: 'change',
+      header: 'Day %',
+      size: 90,
+      cell: ({ row }) => {
+        const change = (row.original.price / row.original.open - 1) * 100
+        const sign = change >= 0 ? '+' : ''
+        return `${sign}${change.toFixed(2)}%`
+      },
+    },
+    {
+      id: 'volume',
+      header: 'Total Qty',
+      size: 100,
+      cell: ({ row }) => compactFormatter.format(row.original.volume),
+    },
+    {
+      id: 'turnover',
+      header: 'Traded Value',
+      size: 115,
+      cell: ({ row }) => currencyFormatter.format(row.original.turnover),
+    },
+    {
+      id: 'history',
+      header: 'Intraday',
+      size: 150,
+      cell: ({ row }) =>
+        flexRenderComponent(SparklineCell, {
+          inputs: { values: row.original.history },
+        }),
+    },
+  ]
+}
diff --git a/examples/angular/realtime-trading/src/app/v8-trading-table.ts b/examples/angular/realtime-trading/src/app/v8-trading-table.ts
new file mode 100644
index 0000000000..87e254af66
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/v8-trading-table.ts
@@ -0,0 +1,43 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core'
+import {
+  FlexRenderDirective,
+  createAngularTable,
+  getCoreRowModel,
+} from '@tanstack/angular-table-v8'
+import { createV8TradingColumns } from './trading-columns-v8'
+import type { MarketQuote } from './market-data'
+import type { RendererMode } from './trading-column-types'
+
+@Component({
+  selector: 'app-v8-trading-table',
+  imports: [FlexRenderDirective],
+  templateUrl: './table-v8.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class V8TradingTable {
+  readonly quotes = input.required<Array<MarketQuote>>()
+  readonly rendererMode = input.required<RendererMode>()
+  readonly updateQuoteAges = input.required<boolean>()
+  readonly quoteClock = input.required<number>()
+  readonly selectedSymbol = input<string | null>(null)
+  readonly symbolSelected = output<string>()
+
+  readonly columns = createV8TradingColumns({
+    rendererMode: () => this.rendererMode(),
+    updateQuoteAges: () => this.updateQuoteAges(),
+    quoteClock: () => this.quoteClock(),
+    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
+  })
+
+  readonly table = createAngularTable(() => ({
+    data: this.quotes(),
+    columns: this.columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id,
+  }))
+}
diff --git a/examples/angular/realtime-trading/src/app/worker-trading-table.ts b/examples/angular/realtime-trading/src/app/worker-trading-table.ts
new file mode 100644
index 0000000000..9fad8b38da
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/worker-trading-table.ts
@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  input,
+  output,
+} from '@angular/core'
+import {
+  FlexRender,
+  injectTable,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/angular-table'
+import {
+  createTableWorker,
+  createWorkerRowModel,
+  workerRowModelsFeature,
+} from '@tanstack/angular-table/experimental-worker-plugin'
+import { createTradingColumns } from './trading-columns'
+import type { OnDestroy } from '@angular/core'
+import type { MarketQuote } from './market-data'
+import type { RendererMode } from './trading-column-types'
+
+const tableWorker = createTableWorker({
+  createWorker: () =>
+    new Worker(new URL('./table-row-model.worker', import.meta.url), {
+      type: 'module',
+    }),
+})
+
+const workerFeatures = tableFeatures({
+  ...stockFeatures,
+  workerRowModelsFeature,
+  filteredRowModel: createWorkerRowModel(tableWorker, 'filtered'),
+})
+
+@Component({
+  selector: 'app-worker-trading-table',
+  imports: [FlexRender],
+  templateUrl: './table-v9.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkerTradingTable implements OnDestroy {
+  readonly quotes = input.required<Array<MarketQuote>>()
+  readonly rendererMode = input.required<RendererMode>()
+  readonly updateQuoteAges = input.required<boolean>()
+  readonly quoteClock = input.required<number>()
+  readonly selectedSymbol = input<string | null>(null)
+  readonly symbolSelected = output<string>()
+
+  readonly columns = createTradingColumns({
+    rendererMode: () => this.rendererMode(),
+    updateQuoteAges: () => this.updateQuoteAges(),
+    quoteClock: () => this.quoteClock(),
+    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
+  })
+
+  readonly table = injectTable(() => ({
+    data: this.quotes(),
+    columns: this.columns,
+    features: workerFeatures,
+    getRowId: (row) => row.id,
+  }))
+
+  @HostBinding('attr.data-table-worker-pending')
+  get workerPending(): string {
+    return String(this.table.store.get().workerRowModels.isPending)
+  }
+
+  @HostBinding('attr.data-table-worker-compute-ms')
+  get workerComputeMs(): string | null {
+    const computeMs = this.table.store.get().workerRowModels.lastComputeMs
+    return computeMs === undefined ? null : computeMs.toFixed(3)
+  }
+
+  ngOnDestroy(): void {
+    tableWorker.terminate()
+  }
+}
diff --git a/examples/angular/realtime-trading/src/index.html b/examples/angular/realtime-trading/src/index.html
new file mode 100644
index 0000000000..f1b1a69962
--- /dev/null
+++ b/examples/angular/realtime-trading/src/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular Real-time Trading flexRender Lab</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="A synthetic real-time market benchmark for TanStack Angular Table flexRender."
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/examples/angular/realtime-trading/src/main.ts b/examples/angular/realtime-trading/src/main.ts
new file mode 100644
index 0000000000..c9b5d07d64
--- /dev/null
+++ b/examples/angular/realtime-trading/src/main.ts
@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser'
+import { App } from './app/app'
+import { appConfig } from './app/app.config'
+
+bootstrapApplication(App, appConfig).catch((error) => console.error(error))
diff --git a/examples/angular/realtime-trading/src/styles.css b/examples/angular/realtime-trading/src/styles.css
new file mode 100644
index 0000000000..d728afdc74
--- /dev/null
+++ b/examples/angular/realtime-trading/src/styles.css
@@ -0,0 +1,724 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-synthesis: none;
+  --background: #090c11;
+  --panel: #10151c;
+  --panel-raised: #151b24;
+  --panel-hover: #19212b;
+  --border: #28313d;
+  --border-soft: #1d2530;
+  --text: #d7dde5;
+  --text-strong: #f1f4f8;
+  --muted: #7f8a98;
+  --blue: #4f8cff;
+  --blue-soft: #8cb5ff;
+  --green: #42c98a;
+  --red: #ef6a78;
+  --amber: #e8b95f;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid #394452;
+  border-radius: 2px;
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: #1c2530;
+  border-color: #536171;
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  min-height: 640px;
+  overflow: hidden;
+  background: var(--background);
+}
+
+.app-bar {
+  display: flex;
+  flex: 0 0 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  background: #0d1117;
+  border-bottom: 1px solid var(--border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.session-info,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.brand-mark {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  color: #fff;
+  background: var(--blue);
+  font-size: 0.62rem;
+  font-weight: 800;
+}
+
+.environment {
+  padding: 0.16rem 0.3rem;
+  color: var(--amber);
+  background: rgb(232 185 95 / 8%);
+  border: 1px solid rgb(232 185 95 / 40%);
+  font-size: 0.58rem;
+}
+
+.session-info {
+  gap: 1rem;
+  color: var(--muted);
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: #9aa4b1;
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: #66717d;
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: #e9c67e;
+  background: #211b11;
+  border-bottom: 1px solid #4a3d25;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.workspace {
+  display: grid;
+  flex: 1;
+  grid-template-columns: minmax(0, 1fr) 288px;
+  min-height: 0;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+}
+
+.market-toolbar {
+  display: flex;
+  flex: 0 0 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  background: #11171f;
+  border-bottom: 1px solid var(--border);
+}
+
+.watchlist-name {
+  display: flex;
+  gap: 0.6rem;
+  align-items: baseline;
+  font-size: 0.67rem;
+}
+
+.watchlist-name span {
+  color: var(--muted);
+}
+
+.watchlist-name strong {
+  color: var(--text-strong);
+  font-size: 0.72rem;
+  letter-spacing: 0.035em;
+}
+
+.market-context {
+  display: flex;
+  gap: 1rem;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6rem;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 64px;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.55rem 0.65rem;
+  background: #0e131a;
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.22rem 0 0.12rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: #0d1218;
+}
+
+app-current-trading-table,
+app-worker-trading-table,
+app-beta-trading-table,
+app-v8-trading-table {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: 28px;
+  padding: 0 0.6rem;
+  color: #8e99a6;
+  background: #171e27;
+  border-right: 1px solid #222b36;
+  border-bottom: 1px solid #394452;
+  font-size: 0.58rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+td {
+  height: 27px;
+  padding: 0 0.6rem;
+  overflow: hidden;
+  color: #cbd2db;
+  border-right: 1px solid #1a222c;
+  border-bottom: 1px solid #1b232d;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+.numeric-cell {
+  text-align: right;
+}
+
+tbody tr:nth-child(even) {
+  background: rgb(255 255 255 / 1.3%);
+}
+
+tbody tr:hover {
+  background: #17202a;
+}
+
+tbody tr.is-selected {
+  background: rgb(79 140 255 / 13%);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: inline-block;
+  min-width: 4.8rem;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: #cbd2db;
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+app-depth-cell {
+  display: block;
+  width: 100%;
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: #151b23;
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.28;
+}
+
+.depth-bid {
+  background: var(--blue);
+  border-right: 1px solid #10151c;
+}
+
+.depth-ask {
+  background: var(--red);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: #dce2e9;
+  font-size: 0.57rem;
+  text-shadow: 0 1px #080b0f;
+}
+
+.quote-age {
+  color: #aab3bf;
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 8rem;
+  height: 1.2rem;
+  margin-left: auto;
+  overflow: visible;
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: var(--blue-soft);
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 25px;
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: #0d1117;
+  border-top: 1px solid var(--border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.56rem;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: #c4ccd6;
+  font-weight: 500;
+}
+
+.statusbar-spacer {
+  flex: 1;
+}
+
+.configurator {
+  min-height: 0;
+  overflow: auto;
+  background: #0d1218;
+}
+
+.configurator > header {
+  display: flex;
+  height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  color: var(--text-strong);
+  background: #11171f;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: #8e99a6;
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: #fff;
+  background: #316fdd;
+  border-color: #4f8cff;
+}
+
+.primary-action:hover {
+  background: #397bed;
+  border-color: #73a2ff;
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: #9ba5b1;
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-weight: 500;
+}
+
+.field small {
+  color: #66717e;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: #b8c0ca;
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: #687482;
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: #d4dae2;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  .workspace {
+    grid-template-columns: minmax(0, 1fr) 250px;
+  }
+
+  .market-context span:not(:first-child) {
+    display: none;
+  }
+
+  .metrics-strip {
+    grid-template-columns: repeat(3, 1fr);
+    flex-basis: 166px;
+  }
+}
+
+@media (max-width: 720px) {
+  html,
+  body {
+    min-height: 100%;
+  }
+
+  body {
+    overflow: auto;
+  }
+
+  .trading-terminal {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  .session-info > span:first-child {
+    display: none;
+  }
+
+  .workspace {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .market-panel {
+    min-height: 68vh;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .metrics-strip {
+    grid-template-columns: repeat(2, 1fr);
+    flex-basis: 220px;
+  }
+
+  .table-scroll {
+    height: 58vh;
+    flex: none;
+  }
+
+  .market-context {
+    display: none;
+  }
+
+  .configurator {
+    overflow: visible;
+  }
+}
diff --git a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..86283a6826
--- /dev/null
+++ b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,139 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+
+  return errors
+}
+
+test('runs the same workload across all three table adapters', async ({
+  page,
+}) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByRole('table')
+    await expect(table).toBeVisible()
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(table.locator('thead th')).toHaveCount(14)
+    await expect(table.locator('thead')).toContainText('Ticker')
+    await expect(table.locator('thead')).toContainText('Last Qty')
+    await expect(table.locator('thead')).toContainText('Traded Value')
+
+    const adapter = page.getByTestId('adapter-select')
+    await expect(adapter).toHaveValue('local')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const loadProfile = page.getByTestId('load-profile-select')
+    await expect(loadProfile).toHaveValue('high')
+    await loadProfile.selectOption('very-high')
+    await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
+    await loadProfile.selectOption('high')
+
+    const rowWorkload = page.getByTestId('row-workload-select')
+    await rowWorkload.selectOption('rotating-filter')
+    await expect(table.locator('tbody tr')).toHaveCount(200)
+    await rowWorkload.selectOption('identity-churn')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(
+      table.locator('tbody tr[data-row-id*="-replacement-"]'),
+    ).toHaveCount(25)
+    await rowWorkload.selectOption('price-sort')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await rowWorkload.selectOption('stable')
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('total-events').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('raf-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('long-frame-count')).toHaveText(
+      /^(?:N\/A|\d+)$/,
+    )
+
+    const tableWorker = page.getByTestId('table-worker-toggle')
+    await expect(tableWorker).toBeEnabled()
+    await tableWorker.check()
+    await expect(page.getByText('ROW MODEL WORKER ON')).toBeVisible()
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await page.getByTestId('feed-toggle').click()
+    await expect
+      .poll(() =>
+        page
+          .locator('app-worker-trading-table')
+          .getAttribute('data-table-worker-compute-ms'),
+      )
+      .not.toBeNull()
+    await expect(page.locator('app-worker-trading-table')).toHaveAttribute(
+      'data-table-worker-pending',
+      'false',
+    )
+    await page.getByTestId('feed-toggle').click()
+    await tableWorker.uncheck()
+
+    for (const implementation of ['beta', 'v8', 'local']) {
+      await adapter.selectOption(implementation)
+      await expect(adapter).toHaveValue(implementation)
+      if (implementation === 'local') {
+        await expect(tableWorker).toBeEnabled()
+      } else {
+        await expect(tableWorker).toBeDisabled()
+      }
+      await expect(page.getByRole('table')).toBeVisible()
+      await expect(page.locator('tbody tr')).toHaveCount(250)
+
+      const firstPrice = page.locator('tbody tr').first().getByRole('button')
+      const priceBeforeUpdate = await firstPrice.textContent()
+      await expect
+        .poll(() => firstPrice.textContent())
+        .not.toBe(priceBeforeUpdate)
+    }
+
+    await page
+      .getByLabel(
+        'Swap Tick component A ↔ B destroy and recreate when direction changes',
+      )
+      .check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/angular/realtime-trading/tsconfig.app.json b/examples/angular/realtime-trading/tsconfig.app.json
new file mode 100644
index 0000000000..8426ad9558
--- /dev/null
+++ b/examples/angular/realtime-trading/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}
diff --git a/examples/angular/realtime-trading/tsconfig.json b/examples/angular/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..9ff0bce067
--- /dev/null
+++ b/examples/angular/realtime-trading/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "include": ["**/*.ts", "tests/e2e"]
+}
diff --git a/examples/react/realtime-trading/README.md b/examples/react/realtime-trading/README.md
new file mode 100644
index 0000000000..4570f701a4
--- /dev/null
+++ b/examples/react/realtime-trading/README.md
@@ -0,0 +1,324 @@
+# React real-time trading FlexRender lab
+
+This standalone example generates deterministic synthetic quote events in the
+browser and stresses two React Table render paths. It is not a real
+exchange feed and does not display financial advice or real market data.
+
+The workload is inspired by the public
+[AG Grid finance demo](https://www.ag-grid.com/example-finance/) and its
+[source](https://github.com/ag-grid/ag-grid-demos/tree/main/finance), but is
+focused on renderer lifecycle, immutable high-frequency updates, backpressure,
+and browser performance APIs.
+
+## Run it
+
+From the repository root:
+
+```sh
+pnpm --filter tanstack-react-table-example-realtime-trading dev
+```
+
+Open `http://localhost:7778`. For measurements, build and serve the production
+bundle so development checks do not distort the result. Use the dedicated
+profiling build when the in-page React Profiler metrics are part of the run:
+
+```sh
+pnpm --filter tanstack-react-table-example-realtime-trading build:profile
+pnpm --filter tanstack-react-table-example-realtime-trading serve
+```
+
+The regular `build` command deliberately keeps React's smaller standard
+production bundle. React disables `<Profiler>` callbacks in that build, so the
+widget labels its commit timings as unavailable. `build:profile` aliases the
+root renderer to React's production profiling bundle.
+
+Like the other React examples in this repository, `index.html` also loads the
+React Scan widget from `https://unpkg.com/react-scan/dist/auto.global.js`.
+React Scan provides the visual rerender overlay and interactive diagnostics;
+the in-page Profiler metrics provide repeatable numeric samples. Keep React
+Scan enabled while locating unnecessary rerenders, then disable or stub it when
+recording final adapter comparisons because its instrumentation adds work.
+
+## What is copied into this example
+
+This directory is self-contained. It does not import the feed implementation,
+styles, components, or benchmark shell from the Angular or Solid examples:
+
+- `market-feed-engine.ts` owns the deterministic quote algorithm.
+- `market-feed.worker.ts` schedules, batches, coalesces, and applies
+  backpressure.
+- `market-feed-protocol.ts` defines commands and events across the worker
+  boundary.
+- `market-data.ts` creates a new data array and new objects for changed rows.
+- `quote-cells.tsx` implements all dynamic React cells and lifecycle counters.
+- `trading-table-local.tsx` and `trading-table-v8.tsx` isolate the two adapter
+  implementations.
+- `trading-table-shared.tsx` owns the stable column definition, leaf-level
+  Store subscriptions, shared types, and row-model measurement.
+- `core/trading-benchmark-controller.ts` owns the TanStack Store, worker
+  transport, derived table inputs, and user commands.
+- `core/use-trading-benchmark-controller.ts` only binds that stable controller
+  to the React mount lifecycle.
+- `core/use-trading-table-runtime.ts` gives each adapter only its own data and
+  benchmark subscriptions.
+- `benchmark/benchmark-monitor.ts` owns Profiler samples, browser observers,
+  render acknowledgements, scroll pressure, and published metrics.
+- `benchmark/use-table-benchmark.ts` binds table commits, DOM mutation
+  observation, and automated scroll pressure to the mounted adapter.
+- `shell/TradingShell.tsx` composes independent header, toolbar, metrics,
+  status-bar, diagnostics, and configurator components.
+- `shell/trading-shell-context.tsx` lets every shell component consume the
+  controller without prop drilling.
+- `App.tsx` creates the controller and owns only the projected adapter switch.
+- `index.css` is a complete local copy of the trading-terminal styles.
+
+The duplication is intentional: each framework example can be copied, changed,
+or profiled on its own. Keep the workload files synchronized manually when
+making cross-framework comparisons.
+
+## Adapter matrix
+
+The configurator mounts exactly one implementation at a time:
+
+- **Local v9** imports the React adapter from this workspace.
+- **8.21.3** imports the final published React v8 adapter and matching core.
+
+Changing the select unmounts the current table before mounting the next one.
+Feed state remains in the controller, so both receive the same immutable
+snapshots.
+The exact v8 tarball alias prevents this workspace from silently replacing the
+published baseline with local packages.
+
+## React Compiler
+
+The Vite build enables React Compiler through `reactCompilerPreset`. The local
+v9 table component uses the compiler and its emitted function contains React
+memo-cache code.
+
+The v8 adapter lives in its own module with a module-level `'use no memo'`
+directive and retains its explicit `memo` wrapper. This prevents compiler
+optimization from interacting with v8's mutable table instance while keeping
+the rest of the example compiled.
+
+The benchmark-only `recordCellRender` and lifecycle-counter functions also use
+function-level `'use no memo'`. They intentionally mutate write-only diagnostic
+counters on every invocation; compiling or memoizing that instrumentation
+would change the measurement. This is safe only because those counters do not
+participate in rendered output. `recordCellRender` receives an already-evaluated
+value and a typed column name rather than an anonymous callback.
+
+## Architecture
+
+`App` deliberately has no knowledge of workers, timers, data, or table render
+options. It provides the stable controller, subscribes only to the adapter
+choice, and projects that table into the shell layout.
+`TradingBenchmarkController` subscribes to the feed worker, converts protocol
+events into immutable row snapshots, derives the selected workload, and
+exposes a TanStack Store plus stable actions.
+
+The React context transports only the controller identity. Components call
+`useTradingShellState(selector)` to subscribe to the exact state slice they
+render. Quote snapshots therefore update the table outlet without rerendering
+the header or configurator, while the 500 ms performance snapshot updates only
+the metrics strip, status bar, and diagnostics. Multi-field selectors use
+TanStack Store's `shallow` comparator, so returning a small object does not
+turn it back into a whole-store subscription. Controller operations that
+publish several related fields use TanStack Store `batch`, exposing one
+coherent snapshot to subscribers.
+
+Each adapter calls its own runtime hook. The local v9 `useTable` owner selects
+`null`, so table state does not rerender the entire owner. Sorting and filtering
+are external table atoms, and a `table.Subscribe` boundary rerenders only the
+row-model body. The body receives the immutable quote snapshot as an explicit
+input as well: external table-state subscriptions do not represent changes to
+the `data` option, and this dependency prevents React Compiler from retaining
+the initial empty body. Renderer mode, quote age, and selection are read by the
+leaf cell/row components that use them; they no longer travel through the table
+outlet or a broad render-options context. Quote data still rerenders the table
+owner and body because `data` is a table option and the row model must process
+a new immutable snapshot.
+
+Benchmark instrumentation is a separate collaborator. `BenchmarkMonitor`
+contains the mutable sampling runtime and publishes immutable metric snapshots
+to the same store. `useTableBenchmark` owns the React/DOM lifecycle bridge.
+This keeps measurement policy out of both the table adapters and the
+presentational shell.
+
+All deliberate mutable runtime is grouped behind `const` object or ref
+identities. Source files do not use `let`; counters and handles change as
+properties of those stable runtime owners instead of being scattered mutable
+bindings.
+
+## Render workload
+
+The table contains 14 columns and up to 1,000 instruments. Its market-watch
+labels are Ticker, Venue, Bid, Ask, Spread, Last, Last Move, Last Qty,
+Bid / Ask Qty, Quote Age, Day %, Total Qty, Traded Value, and Intraday. It
+combines:
+
+- primitive bid, ask, daily change, quantity, and traded-value cells;
+- a clickable price component;
+- a stable Tick component or two alternating Up/Down component types;
+- spread, market-depth, quote-age, and sparkline components;
+- immutable row replacement with stable instrument IDs;
+- optional 100 ms quote-age invalidation for every visible Age cell; and
+- optional history-array replacement for sparklines.
+
+The feed control provides repeatable load profiles: Low 1k/s, Medium 5k/s,
+High 10k/s, Very high 25k/s, and Max 100k/s. High is the default; Max is a
+deliberate saturation test. Moving the rate slider switches the profile to
+Custom. Available universe sizes are 50, 100, 150, 250, 350, 500, 750, and
+1,000.
+
+The row workload selector separates four different behaviors:
+
+- **Stable universe** preserves source order and IDs.
+- **Continuously sort by Last** reorders keyed rows as prices move without
+  recreating their identity.
+- **Rotate 20% filtered rows** changes one excluded index bucket each second,
+  forcing row removal and reinsertion.
+- **Replace 10% of ticker IDs** changes one bucket's IDs and ticker labels each
+  second. Ten percent are replacements at any instant; transitions dispose the
+  previous bucket and create the next, crossing lifecycle boundaries for about
+  twenty percent of rows.
+
+These transformations run before the selected adapter so both versions
+receive the same arrays. They test sorting/filtering consequences and keyed
+reconciliation.
+
+The separate **TanStack core row model** selector exercises the adapters'
+sorting and filtering APIs:
+
+- **Sort Last descending** installs and executes the sorted row model.
+- **Filter Ticker** installs and executes the filtered row model with a
+  case-insensitive Ticker accessor.
+- **Filter + sort Last** composes both row models.
+
+The local v9 and v8 adapters each configure their own version's factories.
+This is intentionally independent of **Row workload**, so a run can
+measure core row-model work alone or combine it with upstream identity and
+ordering pressure.
+
+React `StrictMode` is deliberately omitted because its development-only mount
+replay would contaminate the component create/destroy counters. The table
+component is memoized so the 500 ms diagnostics publication does not by itself
+rerender every table cell. Data, quote-clock, selection, and renderer changes
+still drive the table normally.
+
+`useLifecycleCounter` increments the component-function counter during render,
+then uses passive `useEffect` for committed create/destroy lifetimes. A layout
+effect would not make these counters more accurate: it would synchronously add
+work to every mounted dynamic cell before paint and contaminate the timing this
+example is trying to observe. Function-call counters can include concurrent
+retries or abandoned render attempts, while effect create/destroy counters
+represent committed lifetimes with a short post-paint reporting delay. The
+table-scoped React Profiler is the committed-render timing reference.
+
+## Worker transport
+
+The Worker acts like an external WebSocket/SSE transport. It permits one batch
+in flight. React acknowledges a batch from `useLayoutEffect`, after the
+corresponding commit. While a commit is pending, the Worker coalesces newer
+events by instrument in a bounded map instead of growing an unbounded message
+queue.
+
+`batch events` therefore counts source events, while `row updates` counts the
+final row snapshots copied into a particular UI batch. A batch can contain
+thousands of events but at most one final update per instrument.
+
+The Worker removes quote generation and batching from the main thread. React
+rendering, TanStack row-model work, DOM reconciliation, layout, and paint still
+run on the main thread.
+
+## Metrics
+
+- **Throughput** is the source-event rate represented by acknowledged batches.
+- **RAF rate** is actual `requestAnimationFrame` callbacks divided by elapsed
+  wall time. It is not an FPS estimate derived from table renders.
+- **Table renders** is the rate of feed batches that reach a completed React
+  commit and are acknowledged.
+- **Average / P95 render** spans worker-message receipt through the layout
+  effect after commit. It excludes worker calculation and browser paint.
+- **Long frames** uses the browser Long Animation Frames API when available.
+- **Heap** uses Chromium's non-standard `performance.memory` when available.
+- **Created / destroyed** distinguishes expected type-swap churn from live
+  component retention.
+- **Cell renderer calls/s** counts executions of column `cell` functions. The
+  per-column breakdown identifies which callback was invoked.
+- **Component renders/s** counts executions of the dynamic React cell
+  component functions. The per-type breakdown identifies the exact component;
+  development Strict Mode and abandoned renders can legitimately produce
+  function calls without matching DOM mutations.
+- **DOM mutation records/s** comes from a `MutationObserver` attached to the
+  active `tbody`. It counts observer records, not changed elements or painted
+  pixels.
+- **React Profiler commits/s** and actual/base durations come directly from a
+  `<Profiler>` wrapped around only the active table adapter. Actual duration is
+  the work performed for that commit; base duration is React's estimate of the
+  subtree cost without memoization.
+- **Core row model calls/s** times `table.getRowModel()` around the actual rows
+  consumed by the render. It includes memo lookup overhead and, when inputs
+  change, sorting/filtering computation.
+- **Automated scroll pressure** drives the real table scroll container
+  vertically, horizontally, or both. It reports callback rate, distance, and
+  frames delayed beyond 34 ms.
+
+The app also writes browser User Timing entries that appear in a Chrome
+Performance recording:
+
+- `react-profiler-commit`
+- `market-update-to-layout-commit`
+- `tanstack-row-model`
+- `benchmark:*` marks for adapter, core-mode, and scroll changes
+
+Entries are periodically cleared from the live performance buffer to keep the
+benchmark instrumentation itself bounded. A DevTools recording still captures
+the marks and measures that occurred while recording.
+
+The heap line is diagnostic. Immutable updates continuously allocate short-lived
+arrays, row objects, and render objects, so raw heap can rise before garbage
+collection. Compare post-GC plateaus in the browser Memory profiler.
+
+The three counters are deliberately simple but do add instrumentation overhead.
+Use them to catch accidental full-table work and compare ratios. For final
+timings, corroborate them with a Chrome Performance recording and React
+DevTools Profiler. A realistic healthy run keeps source throughput near target,
+avoids a cell-render rate equal to every cell on every worker batch, and reaches
+a stable post-GC heap plateau.
+
+## Is this a real financial grid?
+
+The presentation and workload shape are realistic for a market-watch blotter,
+but the prices, venues, sizes, volume, and traded value are deterministic
+synthetic data. There is no order book, exchange calendar, corporate actions,
+network jitter, reconnect logic, entitlement processing, or real WebSocket
+decoder. That makes the lab reproducible, not production-representative.
+
+For higher confidence, replay a timestamped, sanitized capture through the same
+worker protocol. Preserve burstiness and symbol skew, then compare adapters
+using the same capture, production build, browser, viewport, and fixed
+measurement window.
+
+## Repeatable comparison
+
+1. Use production builds in the same browser and on the same machine.
+2. Start at 250 instruments and 10k events/s.
+3. Keep stable Tick cells, quote ages, and sparklines enabled.
+4. Reset and warm up for 20–30 seconds.
+5. Record throughput, RAF rate, table renders/s, cell/component calls, DOM
+   mutations, P95, long frames, and post-GC heap over a fixed window.
+6. Repeat with the Angular and Solid standalone examples using identical
+   controls.
+7. Toggle Tick A/B swapping, quote ages, and sparklines separately to isolate
+   component churn, shared-clock invalidation, and array-input cost.
+
+The 25k burst is useful for profiling coalescing and a large render, but a
+sustained target rate is the better test of steady-state behavior.
+
+For a scroll run, select 750 or 1,000 instruments and start with vertical
+pressure. This table is deliberately not virtualized: every row remains mounted,
+so the scroll test primarily exposes browser style/layout/paint responsiveness
+and main-thread contention. It is not a virtualization benchmark and should not
+be interpreted as one. Add a separately named virtualized adapter if that
+architecture needs comparison, since virtualization changes the amount of DOM
+and React work rather than merely optimizing the same path.
diff --git a/examples/react/realtime-trading/index.html b/examples/react/realtime-trading/index.html
new file mode 100644
index 0000000000..812fb572fc
--- /dev/null
+++ b/examples/react/realtime-trading/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="React Table real-time trading render benchmark"
+    />
+    <title>React Table — Real-time Trading Benchmark</title>
+    <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/realtime-trading/package.json b/examples/react/realtime-trading/package.json
new file mode 100644
index 0000000000..55a68bde1f
--- /dev/null
+++ b/examples/react/realtime-trading/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "tanstack-react-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "build:profile": "vite build --mode profile",
+    "serve": "vite preview",
+    "lint": "eslint ./src",
+    "test:types": "tsc --noEmit",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "dependencies": {
+    "@tanstack/react-store": "^0.11.0",
+    "@tanstack/react-table": "^9.0.0",
+    "@tanstack/react-table-v8": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "typescript": "6.0.3",
+    "vite": "^8.2.0"
+  }
+}
diff --git a/examples/react/realtime-trading/src/App.tsx b/examples/react/realtime-trading/src/App.tsx
new file mode 100644
index 0000000000..b1adde339d
--- /dev/null
+++ b/examples/react/realtime-trading/src/App.tsx
@@ -0,0 +1,41 @@
+import { Profiler } from 'react'
+import { useTradingBenchmarkController } from './core/use-trading-benchmark-controller'
+import { TradingShell } from './shell/TradingShell'
+import {
+  TradingShellProvider,
+  useTradingShellController,
+  useTradingShellState,
+} from './shell/trading-shell-context'
+import {
+  LocalTradingTable,
+  V8TradingTable,
+} from './trading-table'
+
+export function App() {
+  const controller = useTradingBenchmarkController()
+  return (
+    <TradingShellProvider controller={controller}>
+      <TradingShell>
+        <TradingTableOutlet />
+      </TradingShell>
+    </TradingShellProvider>
+  )
+}
+
+function TradingTableOutlet() {
+  const controller = useTradingShellController()
+  const tableAdapter = useTradingShellState((state) => state.tableAdapter)
+  const ActiveTradingTable =
+    tableAdapter === 'local'
+      ? LocalTradingTable
+      : V8TradingTable
+
+  return (
+    <Profiler
+      id={`trading-table-${tableAdapter}`}
+      onRender={controller.monitor.recordProfilerRender}
+    >
+      <ActiveTradingTable key={tableAdapter} />
+    </Profiler>
+  )
+}
diff --git a/examples/react/realtime-trading/src/benchmark-profiles.ts b/examples/react/realtime-trading/src/benchmark-profiles.ts
new file mode 100644
index 0000000000..848fc28880
--- /dev/null
+++ b/examples/react/realtime-trading/src/benchmark-profiles.ts
@@ -0,0 +1,65 @@
+import type { MarketQuote } from './market-data'
+
+export type FeedLoadProfile =
+  'low' | 'medium' | 'high' | 'very-high' | 'max' | 'custom'
+
+export type RowWorkloadMode =
+  'stable' | 'price-sort' | 'rotating-filter' | 'identity-churn'
+
+export const feedLoadRates: Record<
+  Exclude<FeedLoadProfile, 'custom'>,
+  number
+> = {
+  low: 1_000,
+  medium: 5_000,
+  high: 10_000,
+  'very-high': 25_000,
+  max: 100_000,
+}
+
+export function deriveBenchmarkQuotes(
+  quotes: Array<MarketQuote>,
+  mode: RowWorkloadMode,
+  epoch: number,
+): Array<MarketQuote> {
+  if (mode === 'stable') {
+    return quotes
+  }
+
+  if (mode === 'price-sort') {
+    return [...quotes].sort(
+      (left, right) =>
+        right.price - left.price || left.symbol.localeCompare(right.symbol),
+    )
+  }
+
+  if (mode === 'rotating-filter') {
+    const excludedBucket = epoch % 5
+    return quotes.filter((_, index) => index % 5 !== excludedBucket)
+  }
+
+  const replacementBucket = epoch % 10
+  return quotes.map((quote, index) =>
+    index % 10 === replacementBucket
+      ? {
+          ...quote,
+          id: `${quote.id}-replacement-${epoch}`,
+          symbol: `${quote.symbol}R${epoch % 100}`,
+          company: `${quote.company} replacement`,
+        }
+      : quote,
+  )
+}
+
+export function rowWorkloadLabel(mode: RowWorkloadMode): string {
+  switch (mode) {
+    case 'price-sort':
+      return 'PRICE REORDER'
+    case 'rotating-filter':
+      return 'FILTER ROTATION'
+    case 'identity-churn':
+      return 'TICKER REPLACEMENT'
+    default:
+      return 'STABLE UNIVERSE'
+  }
+}
diff --git a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..329649bc27
--- /dev/null
+++ b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -0,0 +1,445 @@
+import { quoteCellLifecycle, quoteRenderDiagnostics } from '../quote-cells'
+import { rowModelDiagnostics } from '../trading-table'
+import type { ProfilerOnRenderCallback } from 'react'
+import type { MarketFeedCommand } from '../market-feed-protocol'
+import type { TableAdapter } from '../trading-table'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualEventsPerSecond: number
+  totalEvents: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+  profilerCommitsPerSecond: number
+  profilerAverageActualMs: number
+  profilerP95ActualMs: number
+  profilerAverageBaseMs: number
+  rowModelCallsPerSecond: number
+  rowModelAverageMs: number
+  rowModelMaxMs: number
+  visibleRows: number
+  scrollCallbacksPerSecond: number
+  scrollDistancePerSecond: number
+  scrollJankFrames: number
+}
+
+export type ScrollStressMode = 'off' | 'vertical' | 'horizontal' | 'both'
+
+export const initialMetrics: FeedMetrics = {
+  actualEventsPerSecond: 0,
+  totalEvents: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+  profilerCommitsPerSecond: 0,
+  profilerAverageActualMs: 0,
+  profilerP95ActualMs: 0,
+  profilerAverageBaseMs: 0,
+  rowModelCallsPerSecond: 0,
+  rowModelAverageMs: 0,
+  rowModelMaxMs: 0,
+  visibleRows: 0,
+  scrollCallbacksPerSecond: 0,
+  scrollDistancePerSecond: 0,
+  scrollJankFrames: 0,
+}
+
+const userTiming = { entryCount: 0 }
+
+export function recordMeasure(
+  name: string,
+  start: number,
+  end: number,
+  detail: Record<string, unknown>,
+): void {
+  try {
+    performance.measure(name, { start, end, detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('react-profiler-commit')
+      performance.clearMeasures('market-update-to-layout-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
+export function markBenchmarkAction(
+  name: string,
+  detail: Record<string, unknown> = {},
+): void {
+  try {
+    performance.mark(`benchmark:${name}`, { detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMarks()
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+}
+
+interface PendingAck {
+  generation: number
+  sequence: number
+}
+
+interface ProfilerSample {
+  actualDuration: number
+  baseDuration: number
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    pendingAck: null as PendingAck | null,
+    renderSamples: [] as Array<number>,
+    profilerSamples: [] as Array<ProfilerSample>,
+    totalEvents: 0,
+    eventsInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+    previousRowModelCalls: 0,
+    previousRowModelDuration: 0,
+    scrollCallbacksInSample: 0,
+    scrollDistanceInSample: 0,
+    scrollJankFramesInSample: 0,
+  }
+
+  readonly recordProfilerRender: ProfilerOnRenderCallback = (
+    id,
+    phase,
+    actualDuration,
+    baseDuration,
+    startTime,
+    commitTime,
+  ) => {
+    this.#runtime.profilerSamples.push({ actualDuration, baseDuration })
+    recordMeasure('react-profiler-commit', startTime, commitTime, {
+      id,
+      phase,
+      actualDuration,
+      baseDuration,
+    })
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  setPendingAck(ack: PendingAck | null): void {
+    this.#runtime.pendingAck = ack
+  }
+
+  recordCompletedRender(
+    adapter: TableAdapter,
+    postCommand: (command: MarketFeedCommand) => void,
+  ): void {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      const renderEndedAt = performance.now()
+      runtime.renderSamples.push(
+        renderEndedAt - runtime.pendingRenderStartedAt,
+      )
+      recordMeasure(
+        'market-update-to-layout-commit',
+        runtime.pendingRenderStartedAt,
+        renderEndedAt,
+        { adapter },
+      )
+      runtime.pendingRenderStartedAt = null
+    }
+
+    if (runtime.pendingAck) {
+      runtime.tableRendersInSample++
+      postCommand({ type: 'ack', ...runtime.pendingAck })
+      runtime.pendingAck = null
+    }
+  }
+
+  recordBatch(eventCount: number, updateCount: number): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = eventCount
+    runtime.lastUpdateCount = updateCount
+    runtime.eventsInSample += eventCount
+    runtime.totalEvents += eventCount
+    runtime.workerMessages++
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  recordScrollFrame(distance: number, delayed: boolean): void {
+    const runtime = this.#runtime
+    runtime.scrollCallbacksInSample++
+    runtime.scrollDistanceInSample += distance
+    if (delayed) {
+      runtime.scrollJankFramesInSample++
+    }
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const renderSamples = runtime.renderSamples
+    const sortedRenderSamples = [...renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const profilerSamples = runtime.profilerSamples
+    const sortedProfilerSamples = profilerSamples
+      .map((sample) => sample.actualDuration)
+      .sort((left, right) => left - right)
+    const rowModelCalls =
+      rowModelDiagnostics.calls - runtime.previousRowModelCalls
+    const rowModelDuration =
+      rowModelDiagnostics.totalDurationMs -
+      runtime.previousRowModelDuration
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const averageRenderMs =
+      renderSamples.length === 0
+        ? 0
+        : renderSamples.reduce((sum, value) => sum + value, 0) /
+          renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const profilerP95Index = Math.max(
+      0,
+      Math.ceil(sortedProfilerSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualEventsPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.eventsInSample / sampleDuration) * 1_000,
+      totalEvents: runtime.totalEvents,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond:
+        (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+      profilerCommitsPerSecond:
+        (profilerSamples.length / sampleDuration) * 1_000,
+      profilerAverageActualMs:
+        profilerSamples.length === 0
+          ? 0
+          : profilerSamples.reduce(
+              (sum, sample) => sum + sample.actualDuration,
+              0,
+            ) / profilerSamples.length,
+      profilerP95ActualMs:
+        sortedProfilerSamples[profilerP95Index] ?? 0,
+      profilerAverageBaseMs:
+        profilerSamples.length === 0
+          ? 0
+          : profilerSamples.reduce(
+              (sum, sample) => sum + sample.baseDuration,
+              0,
+            ) / profilerSamples.length,
+      rowModelCallsPerSecond: (rowModelCalls / sampleDuration) * 1_000,
+      rowModelAverageMs:
+        rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
+      rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
+      visibleRows: rowModelDiagnostics.lastRowCount,
+      scrollCallbacksPerSecond:
+        (runtime.scrollCallbacksInSample / sampleDuration) * 1_000,
+      scrollDistancePerSecond:
+        (runtime.scrollDistanceInSample / sampleDuration) * 1_000,
+      scrollJankFrames: runtime.scrollJankFramesInSample,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.profilerSamples = []
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.scrollCallbacksInSample = 0
+    runtime.scrollDistanceInSample = 0
+    runtime.scrollJankFramesInSample = 0
+    runtime.eventsInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.pendingAck = null
+    runtime.renderSamples = []
+    runtime.profilerSamples = []
+    runtime.totalEvents = 0
+    runtime.eventsInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.scrollCallbacksInSample = 0
+    runtime.scrollDistanceInSample = 0
+    runtime.scrollJankFramesInSample = 0
+    rowModelDiagnostics.maxDurationMs = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
new file mode 100644
index 0000000000..b0410938ed
--- /dev/null
+++ b/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -0,0 +1,115 @@
+import { useEffect, useLayoutEffect } from 'react'
+import { markBenchmarkAction } from './benchmark-monitor'
+import type { ScrollStressMode } from './benchmark-monitor'
+import type { TradingBenchmarkController } from '../core/trading-benchmark-controller'
+import type { TableAdapter } from '../trading-table'
+
+export function useTableBenchmark(
+  controller: TradingBenchmarkController,
+  tableAdapter: TableAdapter,
+  scrollStressMode: ScrollStressMode,
+): void {
+  'use no memo'
+  useLayoutEffect(() => {
+    controller.recordCompletedRender()
+  })
+
+  useEffect(() => {
+    const tableBody = document.querySelector(
+      '.market-panel [data-table-adapter] tbody',
+    )
+    if (!tableBody) {
+      return
+    }
+
+    controller.monitor.resetDomMutations()
+    const observer = new MutationObserver((records) => {
+      controller.monitor.recordDomMutations(records.length)
+    })
+    observer.observe(tableBody, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+    return () => observer.disconnect()
+  }, [controller, tableAdapter])
+
+  useEffect(() => {
+    const scrollContainer = document.querySelector<HTMLElement>(
+      '.market-panel [data-table-adapter]',
+    )
+    if (!scrollContainer) {
+      return
+    }
+
+    if (scrollStressMode === 'off') {
+      scrollContainer.scrollTop = 0
+      scrollContainer.scrollLeft = 0
+      return
+    }
+
+    markBenchmarkAction('scroll-start', {
+      mode: scrollStressMode,
+      adapter: tableAdapter,
+    })
+    const runtime = {
+      animationFrameId: 0,
+      previousFrameAt: performance.now(),
+      verticalDirection: 1,
+      horizontalDirection: 1,
+    }
+    const scrollFrame = (now: number): void => {
+      const rawElapsed = now - runtime.previousFrameAt
+      const elapsed = Math.min(rawElapsed, 50)
+      runtime.previousFrameAt = now
+      const previousTop = scrollContainer.scrollTop
+      const previousLeft = scrollContainer.scrollLeft
+
+      if (
+        scrollStressMode === 'vertical' ||
+        scrollStressMode === 'both'
+      ) {
+        const maxTop =
+          scrollContainer.scrollHeight - scrollContainer.clientHeight
+        const candidateTop =
+          scrollContainer.scrollTop +
+          (runtime.verticalDirection * (700 * elapsed)) / 1_000
+        const nextTop = Math.max(0, Math.min(maxTop, candidateTop))
+        if (maxTop > 0) {
+          scrollContainer.scrollTop = nextTop
+          if (candidateTop >= maxTop || candidateTop <= 0) {
+            runtime.verticalDirection *= -1
+          }
+        }
+      }
+
+      if (
+        scrollStressMode === 'horizontal' ||
+        scrollStressMode === 'both'
+      ) {
+        const maxLeft =
+          scrollContainer.scrollWidth - scrollContainer.clientWidth
+        const candidateLeft =
+          scrollContainer.scrollLeft +
+          (runtime.horizontalDirection * (420 * elapsed)) / 1_000
+        const nextLeft = Math.max(0, Math.min(maxLeft, candidateLeft))
+        if (maxLeft > 0) {
+          scrollContainer.scrollLeft = nextLeft
+          if (candidateLeft >= maxLeft || candidateLeft <= 0) {
+            runtime.horizontalDirection *= -1
+          }
+        }
+      }
+
+      const distance =
+        Math.abs(scrollContainer.scrollTop - previousTop) +
+        Math.abs(scrollContainer.scrollLeft - previousLeft)
+      controller.monitor.recordScrollFrame(distance, rawElapsed > 34)
+      runtime.animationFrameId = requestAnimationFrame(scrollFrame)
+    }
+
+    runtime.animationFrameId = requestAnimationFrame(scrollFrame)
+    return () => cancelAnimationFrame(runtime.animationFrameId)
+  }, [controller, scrollStressMode, tableAdapter])
+}
diff --git a/examples/react/realtime-trading/src/core/trading-benchmark-controller.ts b/examples/react/realtime-trading/src/core/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..b853af88c3
--- /dev/null
+++ b/examples/react/realtime-trading/src/core/trading-benchmark-controller.ts
@@ -0,0 +1,532 @@
+import { batch, createAtom, createStore } from '@tanstack/react-store'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+  markBenchmarkAction,
+} from '../benchmark/benchmark-monitor'
+import {
+  deriveBenchmarkQuotes,
+  feedLoadRates,
+  rowWorkloadLabel,
+} from '../benchmark-profiles'
+import { applyMarketUpdates, hydrateMarketQuotes } from '../market-data'
+import { TRADING_COLUMN_COUNT, rowModelDiagnostics } from '../trading-table'
+import type {
+  FeedMetrics,
+  ScrollStressMode,
+} from '../benchmark/benchmark-monitor'
+import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from '../market-feed-protocol'
+import type { MarketQuote } from '../market-data'
+import type {
+  CoreRowModelMode,
+  CoreTableState,
+  RendererMode,
+  TableAdapter,
+} from '../trading-table'
+
+export interface TradingBenchmarkState {
+  workerReady: boolean
+  running: boolean
+  tableAdapter: TableAdapter
+  instrumentCount: number
+  feedLoadProfile: FeedLoadProfile
+  targetEventsPerSecond: number
+  rowWorkloadMode: RowWorkloadMode
+  rowWorkloadEpoch: number
+  coreRowModelMode: CoreRowModelMode
+  coreFilterValue: string
+  scrollStressMode: ScrollStressMode
+  rendererMode: RendererMode
+  updateSparklines: boolean
+  updateQuoteAges: boolean
+  quoteClock: number
+  quotes: Array<MarketQuote>
+  selectedSymbol: string | null
+  metrics: FeedMetrics
+  displayQuotes: Array<MarketQuote>
+  selectedQuote: MarketQuote | null
+  mountedCells: number
+  liveComponents: number
+  adapterLabel: string
+  workloadLabel: string
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  toggleFeed: () => void
+  setInstrumentCount: (count: number) => void
+  setFeedLoadProfile: (profile: FeedLoadProfile) => void
+  setTargetEventsPerSecond: (rate: number) => void
+  setRowWorkloadMode: (mode: RowWorkloadMode) => void
+  setTableAdapter: (adapter: TableAdapter) => void
+  setCoreRowModelMode: (mode: CoreRowModelMode) => void
+  setCoreFilterValue: (value: string) => void
+  setScrollStressMode: (mode: ScrollStressMode) => void
+  setRendererMode: (mode: RendererMode) => void
+  setUpdateQuoteAges: (enabled: boolean) => void
+  setUpdateSparklines: (enabled: boolean) => void
+  selectSymbol: (symbol: string | null) => void
+  runBurst: () => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  workerReady: false,
+  running: true,
+  tableAdapter: 'local',
+  instrumentCount: 250,
+  feedLoadProfile: 'high',
+  targetEventsPerSecond: 10_000,
+  rowWorkloadMode: 'stable',
+  rowWorkloadEpoch: 0,
+  coreRowModelMode: 'none',
+  coreFilterValue: 'ALP',
+  scrollStressMode: 'off',
+  rendererMode: 'stable',
+  updateSparklines: true,
+  updateQuoteAges: true,
+  quoteClock: Date.now(),
+  quotes: [],
+  selectedSymbol: null,
+  metrics: initialMetrics,
+  displayQuotes: [],
+  selectedQuote: null,
+  mountedCells: 0,
+  liveComponents: 0,
+  adapterLabel: 'LOCAL V9',
+  workloadLabel: rowWorkloadLabel('stable'),
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly tableAtoms = {
+    sorting: createAtom<CoreTableState['sorting']>([]),
+    columnFilters: createAtom<CoreTableState['columnFilters']>([]),
+  }
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+    quoteAge: createAtom({
+      enabled: true,
+      clock: initialState.quoteClock,
+    }),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    worker: null as Worker | null,
+    animationFrameId: 0,
+    feedGeneration: 0,
+    lastAgeClockAt: performance.now(),
+    lastRowWorkloadAt: performance.now(),
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+  }
+
+  constructor() {
+    this.actions = {
+      toggleFeed: () => {
+        const nextRunning = !this.store.get().running
+        this.#patch({ running: nextRunning })
+        this.#postToWorker({ type: 'configure', running: nextRunning })
+      },
+      setInstrumentCount: (count) => {
+        batch(() => {
+          this.#patch({ instrumentCount: count })
+          this.#setWorkloadState({ rowWorkloadEpoch: 0 })
+          this.#resetWorkerMarket(count)
+        })
+      },
+      setFeedLoadProfile: (profile) => {
+        if (profile === 'custom') {
+          this.#patch({ feedLoadProfile: profile })
+          return
+        }
+        const rate = feedLoadRates[profile]
+        this.#patch({
+          feedLoadProfile: profile,
+          targetEventsPerSecond: rate,
+        })
+        this.#postToWorker({
+          type: 'configure',
+          targetEventsPerSecond: rate,
+        })
+      },
+      setTargetEventsPerSecond: (rate) => {
+        this.#patch({
+          feedLoadProfile: 'custom',
+          targetEventsPerSecond: rate,
+        })
+        this.#postToWorker({
+          type: 'configure',
+          targetEventsPerSecond: rate,
+        })
+      },
+      setRowWorkloadMode: (mode) => {
+        this.#runtime.lastRowWorkloadAt = performance.now()
+        batch(() => {
+          this.#setWorkloadState({
+            rowWorkloadMode: mode,
+            rowWorkloadEpoch: 0,
+            selectedSymbol: null,
+          })
+          this.renderAtoms.selectedSymbol.set(null)
+        })
+      },
+      setTableAdapter: (adapter) => {
+        markBenchmarkAction('adapter-change', { adapter })
+        this.#patch({
+          tableAdapter: adapter,
+          adapterLabel: adapterLabel(adapter),
+        })
+      },
+      setCoreRowModelMode: (mode) => {
+        markBenchmarkAction('core-row-model-change', { mode })
+        batch(() => {
+          this.#setSelectionState({
+            coreRowModelMode: mode,
+            selectedSymbol: null,
+          })
+          this.#syncCoreTableAtoms(mode, this.store.get().coreFilterValue)
+          this.renderAtoms.selectedSymbol.set(null)
+        })
+      },
+      setCoreFilterValue: (value) => {
+        batch(() => {
+          this.#patch({ coreFilterValue: value })
+          this.#syncCoreTableAtoms(
+            this.store.get().coreRowModelMode,
+            value,
+          )
+        })
+      },
+      setScrollStressMode: (mode) => {
+        this.#patch({ scrollStressMode: mode })
+      },
+      setRendererMode: (mode) => {
+        batch(() => {
+          this.#patch({ rendererMode: mode })
+          this.renderAtoms.rendererMode.set(mode)
+        })
+      },
+      setUpdateQuoteAges: (enabled) => {
+        batch(() => {
+          this.#patch({ updateQuoteAges: enabled })
+          this.renderAtoms.quoteAge.set((current) => ({
+            ...current,
+            enabled,
+          }))
+        })
+      },
+      setUpdateSparklines: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#postToWorker({
+          type: 'configure',
+          updateSparklines: enabled,
+        })
+      },
+      selectSymbol: (symbol) => {
+        batch(() => {
+          this.#setSelectionState({ selectedSymbol: symbol })
+          this.renderAtoms.selectedSymbol.set(symbol)
+        })
+      },
+      runBurst: () => {
+        this.#postToWorker({ type: 'burst', eventCount: 25_000 })
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.#runtime.lastRowWorkloadAt = performance.now()
+          this.store.setState((state) => ({
+            ...state,
+            selectedSymbol: null,
+            selectedQuote: null,
+            rowWorkloadEpoch: 0,
+            quoteClock: Date.now(),
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.#resetWorkerMarket(this.store.get().instrumentCount)
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('../market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.worker = worker
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    worker.postMessage({
+      type: 'initialize',
+      rowCount: initialState.instrumentCount,
+      seed: 292,
+      running: initialState.running,
+      targetEventsPerSecond: initialState.targetEventsPerSecond,
+      updateSparklines: initialState.updateSparklines,
+    } satisfies MarketFeedCommand)
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#feedFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#runtime.longAnimationFrameObserver = null
+  }
+
+  recordCompletedRender(): void {
+    this.monitor.recordCompletedRender(
+      this.store.get().tableAdapter,
+      this.#postToWorker,
+    )
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#postToWorker({
+        type: 'configure',
+        running: this.store.get().running,
+      })
+    }
+  }
+
+  readonly #postToWorker = (command: MarketFeedCommand): void => {
+    this.#runtime.worker?.postMessage(command)
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'ready') {
+      this.#runtime.feedGeneration = data.generation
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.monitor.setPendingAck(null)
+      this.monitor.markRenderPending()
+      batch(() => {
+        this.#setQuotes(hydrateMarketQuotes(data.quotes))
+        this.#patch({ workerReady: true })
+      })
+      return
+    }
+
+    if (data.generation !== this.#runtime.feedGeneration) {
+      this.#postToWorker({
+        type: 'ack',
+        generation: data.generation,
+        sequence: data.sequence,
+      })
+      return
+    }
+
+    this.monitor.markRenderPending()
+    this.#setQuotes(applyMarketUpdates(this.store.get().quotes, data.updates))
+    this.monitor.recordBatch(data.eventCount, data.updates.length)
+    this.monitor.setPendingAck({
+      generation: data.generation,
+      sequence: data.sequence,
+    })
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  readonly #feedFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    const state = this.store.get()
+    batch(() => {
+      if (
+        state.updateQuoteAges &&
+        now - this.#runtime.lastAgeClockAt >= 100
+      ) {
+        this.#runtime.lastAgeClockAt = now
+        const clock = Date.now()
+        this.#patch({ quoteClock: clock })
+        this.renderAtoms.quoteAge.set((current) => ({
+          ...current,
+          clock,
+        }))
+      }
+
+      if (
+        state.running &&
+        (state.rowWorkloadMode === 'rotating-filter' ||
+          state.rowWorkloadMode === 'identity-churn') &&
+        now - this.#runtime.lastRowWorkloadAt >= 1_000
+      ) {
+        this.monitor.markRenderPending()
+        this.#runtime.lastRowWorkloadAt = now
+        this.#setWorkloadState({
+          rowWorkloadEpoch: state.rowWorkloadEpoch + 1,
+        })
+      }
+
+      if (this.monitor.shouldPublish(now)) {
+        this.#publishMetrics(this.monitor.publish(now))
+      }
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#feedFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #setQuotes(quotes: Array<MarketQuote>): void {
+    this.store.setState((state) => {
+      const displayQuotes = deriveBenchmarkQuotes(
+        quotes,
+        state.rowWorkloadMode,
+        state.rowWorkloadEpoch,
+      )
+      return {
+        ...state,
+        quotes,
+        displayQuotes,
+        selectedQuote: findSelectedQuote(
+          displayQuotes,
+          state.selectedSymbol,
+        ),
+      }
+    })
+  }
+
+  #setWorkloadState(
+    patch: Partial<
+      Pick<
+        TradingBenchmarkState,
+        'rowWorkloadMode' | 'rowWorkloadEpoch' | 'selectedSymbol'
+      >
+    >,
+  ): void {
+    this.store.setState((state) => {
+      const nextState = { ...state, ...patch }
+      const displayQuotes = deriveBenchmarkQuotes(
+        state.quotes,
+        nextState.rowWorkloadMode,
+        nextState.rowWorkloadEpoch,
+      )
+      return {
+        ...nextState,
+        displayQuotes,
+        selectedQuote: findSelectedQuote(
+          displayQuotes,
+          nextState.selectedSymbol,
+        ),
+        workloadLabel: rowWorkloadLabel(nextState.rowWorkloadMode),
+      }
+    })
+  }
+
+  #setSelectionState(
+    patch: Partial<
+      Pick<
+        TradingBenchmarkState,
+        'coreRowModelMode' | 'selectedSymbol'
+      >
+    >,
+  ): void {
+    this.store.setState((state) => {
+      const nextState = { ...state, ...patch }
+      return {
+        ...nextState,
+        selectedQuote: findSelectedQuote(
+          nextState.displayQuotes,
+          nextState.selectedSymbol,
+        ),
+      }
+    })
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    const visibleRows = rowModelDiagnostics.hasMeasurement
+      ? rowModelDiagnostics.lastRowCount
+      : this.store.get().displayQuotes.length
+    this.#patch({
+      metrics,
+      mountedCells: visibleRows * TRADING_COLUMN_COUNT,
+      liveComponents:
+        metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+
+  #syncCoreTableAtoms(
+    mode: CoreRowModelMode,
+    filterValue: string,
+  ): void {
+    const sorts = mode === 'sort' || mode === 'sort-filter'
+    const trimmedFilter = filterValue.trim()
+    const filters =
+      (mode === 'filter' || mode === 'sort-filter') &&
+      trimmedFilter.length > 0
+    this.tableAtoms.sorting.set(() =>
+      sorts ? [{ id: 'price', desc: true }] : [],
+    )
+    this.tableAtoms.columnFilters.set(() =>
+      filters ? [{ id: 'symbol', value: trimmedFilter }] : [],
+    )
+  }
+
+  #resetWorkerMarket(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.monitor.setPendingAck(null)
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#postToWorker({ type: 'configure', running: false })
+    this.#postToWorker({ type: 'reset', rowCount, seed: 42 + rowCount })
+  }
+}
+
+function findSelectedQuote(
+  quotes: Array<MarketQuote>,
+  selectedSymbol: string | null,
+): MarketQuote | null {
+  return (
+    quotes.find((quote) => quote.symbol === selectedSymbol) ?? null
+  )
+}
+
+function adapterLabel(adapter: TableAdapter): string {
+  return adapter === 'local' ? 'LOCAL V9' : 'V8.21.3'
+}
diff --git a/examples/react/realtime-trading/src/core/use-trading-benchmark-controller.ts b/examples/react/realtime-trading/src/core/use-trading-benchmark-controller.ts
new file mode 100644
index 0000000000..08cb3179a6
--- /dev/null
+++ b/examples/react/realtime-trading/src/core/use-trading-benchmark-controller.ts
@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react'
+import { TradingBenchmarkController } from './trading-benchmark-controller'
+
+export function useTradingBenchmarkController() {
+  'use no memo'
+  const controllerRef = useRef<TradingBenchmarkController | null>(null)
+  controllerRef.current ??= new TradingBenchmarkController()
+  const controller = controllerRef.current
+
+  useEffect(() => controller.start(), [controller])
+
+  return controller
+}
+
+export type { TradingBenchmarkController } from './trading-benchmark-controller'
diff --git a/examples/react/realtime-trading/src/core/use-trading-table-runtime.ts b/examples/react/realtime-trading/src/core/use-trading-table-runtime.ts
new file mode 100644
index 0000000000..ece6b2bf55
--- /dev/null
+++ b/examples/react/realtime-trading/src/core/use-trading-table-runtime.ts
@@ -0,0 +1,40 @@
+import { shallow } from '@tanstack/react-store'
+import { useTableBenchmark } from '../benchmark/use-table-benchmark'
+import {
+  useTradingShellController,
+  useTradingShellState,
+} from '../shell/trading-shell-context'
+
+export function useV9TradingTableRuntime(adapter: 'local') {
+  const controller = useTradingShellController()
+  const quotes = useTradingShellState((state) => state.displayQuotes)
+  const scrollStressMode = useTradingShellState(
+    (state) => state.scrollStressMode,
+  )
+
+  useTableBenchmark(controller, adapter, scrollStressMode)
+
+  return {
+    quotes,
+    tableAtoms: controller.tableAtoms,
+  }
+}
+
+export function useV8TradingTableRuntime() {
+  const controller = useTradingShellController()
+  const state = useTradingShellState(
+    (storeState) => ({
+      quotes: storeState.displayQuotes,
+      coreRowModelMode: storeState.coreRowModelMode,
+      coreFilterValue: storeState.coreFilterValue,
+    }),
+    { compare: shallow },
+  )
+  const scrollStressMode = useTradingShellState(
+    (storeState) => storeState.scrollStressMode,
+  )
+
+  useTableBenchmark(controller, 'v8', scrollStressMode)
+
+  return state
+}
diff --git a/examples/react/realtime-trading/src/index.css b/examples/react/realtime-trading/src/index.css
new file mode 100644
index 0000000000..b3f25e0699
--- /dev/null
+++ b/examples/react/realtime-trading/src/index.css
@@ -0,0 +1,732 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-synthesis: none;
+  --background: #090c11;
+  --panel: #10151c;
+  --panel-raised: #151b24;
+  --panel-hover: #19212b;
+  --border: #28313d;
+  --border-soft: #1d2530;
+  --text: #d7dde5;
+  --text-strong: #f1f4f8;
+  --muted: #7f8a98;
+  --blue: #4f8cff;
+  --blue-soft: #8cb5ff;
+  --green: #42c98a;
+  --red: #ef6a78;
+  --amber: #e8b95f;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid #394452;
+  border-radius: 2px;
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: #1c2530;
+  border-color: #536171;
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+input[type='text'] {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid #394452;
+  border-radius: 2px;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  min-height: 640px;
+  overflow: hidden;
+  background: var(--background);
+}
+
+.app-bar {
+  display: flex;
+  flex: 0 0 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  background: #0d1117;
+  border-bottom: 1px solid var(--border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.session-info,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.brand-mark {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  color: #fff;
+  background: var(--blue);
+  font-size: 0.62rem;
+  font-weight: 800;
+}
+
+.environment {
+  padding: 0.16rem 0.3rem;
+  color: var(--amber);
+  background: rgb(232 185 95 / 8%);
+  border: 1px solid rgb(232 185 95 / 40%);
+  font-size: 0.58rem;
+}
+
+.session-info {
+  gap: 1rem;
+  color: var(--muted);
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: #9aa4b1;
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: #66717d;
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: #e9c67e;
+  background: #211b11;
+  border-bottom: 1px solid #4a3d25;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.workspace {
+  display: grid;
+  flex: 1;
+  grid-template-columns: minmax(0, 1fr) 288px;
+  min-height: 0;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+}
+
+.market-toolbar {
+  display: flex;
+  flex: 0 0 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  background: #11171f;
+  border-bottom: 1px solid var(--border);
+}
+
+.watchlist-name {
+  display: flex;
+  gap: 0.6rem;
+  align-items: baseline;
+  font-size: 0.67rem;
+}
+
+.watchlist-name span {
+  color: var(--muted);
+}
+
+.watchlist-name strong {
+  color: var(--text-strong);
+  font-size: 0.72rem;
+  letter-spacing: 0.035em;
+}
+
+.market-context {
+  display: flex;
+  gap: 1rem;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6rem;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 64px;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.55rem 0.65rem;
+  background: #0e131a;
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.22rem 0 0.12rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: #0d1218;
+}
+
+app-current-trading-table,
+app-v8-trading-table {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: 28px;
+  padding: 0 0.6rem;
+  color: #8e99a6;
+  background: #171e27;
+  border-right: 1px solid #222b36;
+  border-bottom: 1px solid #394452;
+  font-size: 0.58rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+td {
+  height: 27px;
+  padding: 0 0.6rem;
+  overflow: hidden;
+  color: #cbd2db;
+  border-right: 1px solid #1a222c;
+  border-bottom: 1px solid #1b232d;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+.numeric-cell {
+  text-align: right;
+}
+
+tbody tr:nth-child(even) {
+  background: rgb(255 255 255 / 1.3%);
+}
+
+tbody tr:hover {
+  background: #17202a;
+}
+
+tbody tr.is-selected {
+  background: rgb(79 140 255 / 13%);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: inline-block;
+  min-width: 4.8rem;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: #cbd2db;
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+app-depth-cell {
+  display: block;
+  width: 100%;
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: #151b23;
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.28;
+}
+
+.depth-bid {
+  background: var(--blue);
+  border-right: 1px solid #10151c;
+}
+
+.depth-ask {
+  background: var(--red);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: #dce2e9;
+  font-size: 0.57rem;
+  text-shadow: 0 1px #080b0f;
+}
+
+.quote-age {
+  color: #aab3bf;
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 8rem;
+  height: 1.2rem;
+  margin-left: auto;
+  overflow: visible;
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: var(--blue-soft);
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 25px;
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: #0d1117;
+  border-top: 1px solid var(--border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.56rem;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: #c4ccd6;
+  font-weight: 500;
+}
+
+.statusbar-spacer {
+  flex: 1;
+}
+
+.configurator {
+  min-height: 0;
+  overflow: auto;
+  background: #0d1218;
+}
+
+.configurator > header {
+  display: flex;
+  height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  color: var(--text-strong);
+  background: #11171f;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: #8e99a6;
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: #fff;
+  background: #316fdd;
+  border-color: #4f8cff;
+}
+
+.primary-action:hover {
+  background: #397bed;
+  border-color: #73a2ff;
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: #9ba5b1;
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-weight: 500;
+}
+
+.field small {
+  color: #66717e;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: #b8c0ca;
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: #687482;
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: #d4dae2;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  .workspace {
+    grid-template-columns: minmax(0, 1fr) 250px;
+  }
+
+  .market-context span:not(:first-child) {
+    display: none;
+  }
+
+  .metrics-strip {
+    grid-template-columns: repeat(3, 1fr);
+    flex-basis: 166px;
+  }
+}
+
+@media (max-width: 720px) {
+  html,
+  body {
+    min-height: 100%;
+  }
+
+  body {
+    overflow: auto;
+  }
+
+  .trading-terminal {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  .session-info > span:first-child {
+    display: none;
+  }
+
+  .workspace {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .market-panel {
+    min-height: 68vh;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .metrics-strip {
+    grid-template-columns: repeat(2, 1fr);
+    flex-basis: 220px;
+  }
+
+  .table-scroll {
+    height: 58vh;
+    flex: none;
+  }
+
+  .market-context {
+    display: none;
+  }
+
+  .configurator {
+    overflow: visible;
+  }
+}
diff --git a/examples/react/realtime-trading/src/main.tsx b/examples/react/realtime-trading/src/main.tsx
new file mode 100644
index 0000000000..f3a5967836
--- /dev/null
+++ b/examples/react/realtime-trading/src/main.tsx
@@ -0,0 +1,10 @@
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import './index.css'
+
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Failed to find the root element')
+
+// StrictMode is intentionally omitted: its development-only mount replay would
+// contaminate the component lifecycle counters used by this benchmark.
+createRoot(rootElement).render(<App />)
diff --git a/examples/react/realtime-trading/src/market-data.ts b/examples/react/realtime-trading/src/market-data.ts
new file mode 100644
index 0000000000..02eefa28c3
--- /dev/null
+++ b/examples/react/realtime-trading/src/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/react/realtime-trading/src/market-feed-engine.ts b/examples/react/realtime-trading/src/market-feed-engine.ts
new file mode 100644
index 0000000000..e77d76656c
--- /dev/null
+++ b/examples/react/realtime-trading/src/market-feed-engine.ts
@@ -0,0 +1,173 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const baseInstruments = [
+  ['ALP', 'Alpine Systems', 'XNAS'],
+  ['ARC', 'Arcadia Cloud', 'XNYS'],
+  ['BLU', 'Blue River Energy', 'BATS'],
+  ['CRN', 'Crown Robotics', 'XNAS'],
+  ['DYN', 'Dynasty Networks', 'XNYS'],
+  ['ECO', 'Ecoframe Materials', 'IEX'],
+  ['FLX', 'Flux Semiconductors', 'XNAS'],
+  ['GEO', 'Geode Analytics', 'BATS'],
+  ['HLX', 'Helix Biotech', 'XNYS'],
+  ['ION', 'Ion Mobility', 'IEX'],
+  ['JDE', 'Jade Financial', 'XNYS'],
+  ['KNT', 'Kinetic Aerospace', 'XNAS'],
+] as const
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #historyTick = 0
+  #eventIndex = 0
+
+  reset(count: number, seed: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(seed)
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, venue] =
+        baseInstruments[index % baseInstruments.length]
+      const series = Math.floor(index / baseInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const open = roundPrice(20 + random() * 480)
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue,
+        open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: Date.now(),
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(2_026 + seed)
+    this.#rowCursor = 0
+    this.#historyTick = 0
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyEvents(
+    eventCount: number,
+    updateSparklines: boolean,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || eventCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#eventIndex = 0
+    while (this.#eventIndex < eventCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines && this.#historyTick++ % 4 === 0
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#eventIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(
+      stateValue ^ (stateValue >>> 15),
+      stateValue | 1,
+    )
+    const secondMix =
+      firstMix +
+      Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/react/realtime-trading/src/market-feed-protocol.ts b/examples/react/realtime-trading/src/market-feed-protocol.ts
new file mode 100644
index 0000000000..0a8b9925f5
--- /dev/null
+++ b/examples/react/realtime-trading/src/market-feed-protocol.ts
@@ -0,0 +1,66 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  open: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'initialize'
+      rowCount: number
+      seed: number
+      running: boolean
+      targetEventsPerSecond: number
+      updateSparklines: boolean
+    }
+  | {
+      type: 'configure'
+      running?: boolean
+      targetEventsPerSecond?: number
+      updateSparklines?: boolean
+    }
+  | { type: 'reset'; rowCount: number; seed: number }
+  | { type: 'burst'; eventCount: number }
+  | { type: 'ack'; generation: number; sequence: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'ready'
+      generation: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'batch'
+      generation: number
+      sequence: number
+      eventCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/react/realtime-trading/src/market-feed.worker.ts b/examples/react/realtime-trading/src/market-feed.worker.ts
new file mode 100644
index 0000000000..7ce6313798
--- /dev/null
+++ b/examples/react/realtime-trading/src/market-feed.worker.ts
@@ -0,0 +1,133 @@
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+
+const runtime = {
+  generation: 0,
+  sequence: 0,
+  inFlightSequence: null as number | null,
+  pendingEventCount: 0,
+  initialized: false,
+  running: true,
+  targetEventsPerSecond: 10_000,
+  updateSparklines: true,
+  eventBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'initialize':
+      runtime.running = data.running
+      runtime.targetEventsPerSecond = data.targetEventsPerSecond
+      runtime.updateSparklines = data.updateSparklines
+      reset(data.rowCount, data.seed)
+      break
+    case 'configure':
+      runtime.running = data.running ?? runtime.running
+      runtime.targetEventsPerSecond =
+        data.targetEventsPerSecond ?? runtime.targetEventsPerSecond
+      runtime.updateSparklines =
+        data.updateSparklines ?? runtime.updateSparklines
+      break
+    case 'reset':
+      reset(data.rowCount, data.seed)
+      break
+    case 'burst':
+      produceEvents(data.eventCount)
+      flush()
+      break
+    case 'ack':
+      if (
+        data.generation === runtime.generation &&
+        data.sequence === runtime.inFlightSequence
+      ) {
+        runtime.inFlightSequence = null
+        flush()
+      }
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.eventBudget +=
+      (runtime.targetEventsPerSecond * elapsed) / 1_000
+    const eventCount = Math.floor(runtime.eventBudget)
+    runtime.eventBudget -= eventCount
+    produceEvents(eventCount)
+  }
+
+  flush()
+}, 16)
+
+function reset(rowCount: number, seed: number): void {
+  runtime.initialized = true
+  runtime.generation++
+  runtime.sequence = 0
+  runtime.inFlightSequence = null
+  runtime.pendingEventCount = 0
+  pendingUpdates.clear()
+  runtime.eventBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'ready',
+    generation: runtime.generation,
+    quotes: engine.reset(rowCount, seed),
+  })
+}
+
+function produceEvents(eventCount: number): void {
+  if (!runtime.initialized || eventCount <= 0) return
+
+  runtime.pendingEventCount += eventCount
+  for (const update of engine.applyEvents(
+    eventCount,
+    runtime.updateSparklines,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (
+    runtime.inFlightSequence !== null ||
+    runtime.pendingEventCount === 0
+  )
+    return
+
+  const nextSequence = ++runtime.sequence
+  const message: MarketFeedEvent = {
+    type: 'batch',
+    generation: runtime.generation,
+    sequence: nextSequence,
+    eventCount: runtime.pendingEventCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingEventCount = 0
+  pendingUpdates.clear()
+  runtime.inFlightSequence = nextSequence
+  post(message)
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/react/realtime-trading/src/quote-cells.tsx b/examples/react/realtime-trading/src/quote-cells.tsx
new file mode 100644
index 0000000000..ab38df1ad8
--- /dev/null
+++ b/examples/react/realtime-trading/src/quote-cells.tsx
@@ -0,0 +1,190 @@
+import { useEffect } from 'react'
+
+const compactNumber = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export const quoteCellLifecycle = {
+  created: 0,
+  destroyed: 0,
+}
+
+export const quoteCellRendererNames = [
+  'Ticker',
+  'Venue',
+  'Bid',
+  'Ask',
+  'Spread',
+  'Last',
+  'LastMove',
+  'LastQty',
+  'Depth',
+  'QuoteAge',
+  'DayChange',
+  'TotalQty',
+  'TradedValue',
+  'Intraday',
+] as const
+
+export const quoteComponentNames = [
+  'PriceCell',
+  'StableMoveCell',
+  'UpMoveCell',
+  'DownMoveCell',
+  'SpreadCell',
+  'DepthCell',
+  'QuoteAgeCell',
+  'SparklineCell',
+] as const
+
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+
+const createCounterMap = <Name extends string>(
+  names: ReadonlyArray<Name>,
+): Record<Name, number> =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
+  cellRendererCallsByName: createCounterMap(quoteCellRendererNames),
+  componentRenderCallsByName: createCounterMap(quoteComponentNames),
+}
+
+export function recordCellRender<T>(
+  name: QuoteCellRendererName,
+  value: T,
+): T {
+  'use no memo'
+  // Benchmark instrumentation is intentionally impure and must run per call.
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value
+}
+
+function useLifecycleCounter(componentName: QuoteComponentName): void {
+  'use no memo'
+  // This diagnostic mutation measures component-function invocation itself.
+  quoteRenderDiagnostics.componentRenderCalls++
+  quoteRenderDiagnostics.componentRenderCallsByName[componentName]++
+  useEffect(() => {
+    quoteCellLifecycle.created++
+    return () => {
+      quoteCellLifecycle.destroyed++
+    }
+  }, [])
+}
+
+export function PriceCell(props: {
+  price: number
+  move: number
+  onSelect: () => void
+}) {
+  useLifecycleCounter('PriceCell')
+  return (
+    <button
+      className={`price-button ${props.move >= 0 ? 'quote-up' : 'quote-down'}`}
+      onClick={props.onSelect}
+    >
+      {props.price.toFixed(2)}
+    </button>
+  )
+}
+
+export function StableMoveCell({ move }: { move: number }) {
+  useLifecycleCounter('StableMoveCell')
+  return (
+    <span className={`move-cell ${move >= 0 ? 'quote-up' : 'quote-down'}`}>
+      {formatSigned(move)}
+    </span>
+  )
+}
+
+export function UpMoveCell({ move }: { move: number }) {
+  useLifecycleCounter('UpMoveCell')
+  return <span className="move-cell quote-up">▲ {formatSigned(move)}</span>
+}
+
+export function DownMoveCell({ move }: { move: number }) {
+  useLifecycleCounter('DownMoveCell')
+  return <span className="move-cell quote-down">▼ {formatSigned(move)}</span>
+}
+
+export function SpreadCell({ bid, ask }: { bid: number; ask: number }) {
+  useLifecycleCounter('SpreadCell')
+  const spread = Math.max(0, ask - bid)
+  const midpoint = (bid + ask) / 2
+  const basisPoints = midpoint === 0 ? 0 : (spread / midpoint) * 10_000
+
+  return (
+    <span className={`spread-cell ${basisPoints >= 4 ? 'spread-wide' : ''}`}>
+      {spread.toFixed(2)}
+      <small>{basisPoints.toFixed(1)} bp</small>
+    </span>
+  )
+}
+
+export function DepthCell(props: { bidSize: number; askSize: number }) {
+  useLifecycleCounter('DepthCell')
+  const total = props.bidSize + props.askSize
+  const bidShare = total === 0 ? 50 : (props.bidSize / total) * 100
+
+  return (
+    <div
+      className="depth-cell"
+      title={`Bid ${props.bidSize} / Ask ${props.askSize}`}
+    >
+      <span className="depth-bid" style={{ width: `${bidShare}%` }} />
+      <span className="depth-ask" style={{ width: `${100 - bidShare}%` }} />
+      <span className="depth-values">
+        <span>{compactNumber.format(props.bidSize)}</span>
+        <span>{compactNumber.format(props.askSize)}</span>
+      </span>
+    </div>
+  )
+}
+
+export function QuoteAgeCell({ ageMs }: { ageMs: number }) {
+  useLifecycleCounter('QuoteAgeCell')
+  const className =
+    ageMs >= 1_500
+      ? 'quote-age quote-age-stale'
+      : ageMs >= 500
+        ? 'quote-age quote-age-warm'
+        : 'quote-age'
+
+  return (
+    <span className={className}>
+      {ageMs < 1_000
+        ? `${Math.round(ageMs)} ms`
+        : `${(ageMs / 1_000).toFixed(1)} s`}
+    </span>
+  )
+}
+
+export function SparklineCell({ values }: { values: ReadonlyArray<number> }) {
+  useLifecycleCounter('SparklineCell')
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  const range = max - min || 1
+  const denominator = Math.max(1, values.length - 1)
+  const points = values
+    .map((value, index) => {
+      const x = (index / denominator) * 100
+      const y = 22 - ((value - min) / range) * 20
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    })
+    .join(' ')
+
+  return (
+    <svg className="sparkline" viewBox="0 0 100 24" preserveAspectRatio="none">
+      <polyline points={points} />
+    </svg>
+  )
+}
+
+function formatSigned(value: number): string {
+  return `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+}
diff --git a/examples/react/realtime-trading/src/shell/TradingShell.tsx b/examples/react/realtime-trading/src/shell/TradingShell.tsx
new file mode 100644
index 0000000000..3e2aa38fe4
--- /dev/null
+++ b/examples/react/realtime-trading/src/shell/TradingShell.tsx
@@ -0,0 +1,775 @@
+import { shallow } from '@tanstack/react-store'
+import {
+  useTradingShellController,
+  useTradingShellState,
+} from './trading-shell-context'
+import type { ReactNode } from 'react'
+import type {
+  FeedMetrics,
+  ScrollStressMode,
+} from '../benchmark/benchmark-monitor'
+import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
+import type {
+  CoreRowModelMode,
+  TableAdapter,
+} from '../trading-table'
+
+const integerFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 0,
+})
+const rateFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+export function TradingShell(props: { children: ReactNode }) {
+  return (
+    <main className="trading-terminal">
+      <AppHeader />
+
+      {import.meta.env.DEV && (
+        <aside className="development-warning">
+          DEV BUILD — use the profiling production configuration before
+          recording React timings.
+        </aside>
+      )}
+
+      {import.meta.env.MODE === 'production' && (
+        <aside className="development-warning">
+          STANDARD PRODUCTION BUILD — React Profiler callbacks are disabled;
+          run the profile build for commit timings.
+        </aside>
+      )}
+
+      <div className="workspace">
+        <section className="market-panel" aria-label="Live synthetic quotes">
+          <MarketToolbar />
+          <MetricsStrip />
+          {props.children}
+          <MarketStatusbar />
+        </section>
+        <Configurator />
+      </div>
+    </main>
+  )
+}
+
+function AppHeader() {
+  const { workerReady, running } = useTradingShellState(
+    (state) => ({
+      workerReady: state.workerReady,
+      running: state.running,
+    }),
+    { compare: shallow },
+  )
+  return (
+    <header className="app-bar">
+      <div className="brand">
+        <span className="brand-mark">TT</span>
+        <strong>MARKET MONITOR</strong>
+        <span className="environment">SIMULATED</span>
+      </div>
+      <div className="session-info">
+        <span>REACT / FLEX RENDER</span>
+        <span
+          className={`feed-status ${workerReady && running ? 'is-running' : ''}`}
+          data-testid="feed-status"
+        >
+          <span className="status-dot" aria-hidden="true" />
+          {!workerReady
+            ? 'FEED CONNECTING'
+            : running
+              ? 'FEED LIVE'
+              : 'FEED PAUSED'}
+        </span>
+      </div>
+    </header>
+  )
+}
+
+function MarketToolbar() {
+  const {
+    coreRowModelMode,
+    rendererMode,
+    updateSparklines,
+    updateQuoteAges,
+    quoteCount,
+    displayQuoteCount,
+    adapterLabel,
+    workloadLabel,
+  } = useTradingShellState(
+    (state) => ({
+      coreRowModelMode: state.coreRowModelMode,
+      rendererMode: state.rendererMode,
+      updateSparklines: state.updateSparklines,
+      updateQuoteAges: state.updateQuoteAges,
+      quoteCount: state.quotes.length,
+      displayQuoteCount: state.displayQuotes.length,
+      adapterLabel: state.adapterLabel,
+      workloadLabel: state.workloadLabel,
+    }),
+    { compare: shallow },
+  )
+  return (
+    <header className="market-toolbar">
+      <div className="watchlist-name">
+        <span>WATCHLIST</span>
+        <strong>ALL INSTRUMENTS</strong>
+      </div>
+      <div className="market-context">
+        <span>
+          {formatInteger(displayQuoteCount)} / {formatInteger(quoteCount)}{' '}
+          SYMBOLS
+        </span>
+        <span>REACT {adapterLabel}</span>
+        <span>WORKER STREAM</span>
+        <span>IMMUTABLE ROWS</span>
+        <span>{workloadLabel}</span>
+        <span>
+          {coreRowModelMode === 'none'
+            ? 'CORE ROW MODEL OFF'
+            : `CORE ${coreRowModelMode.toUpperCase()}`}
+        </span>
+        <span>
+          {rendererMode === 'stable' ? 'STABLE CELLS' : 'A/B CELL SWAP'}
+        </span>
+        <span>{updateSparklines ? 'CHARTS ON' : 'CHARTS OFF'}</span>
+        <span>{updateQuoteAges ? 'AGE CLOCK ON' : 'AGE CLOCK OFF'}</span>
+      </div>
+    </header>
+  )
+}
+
+function MarketStatusbar() {
+  const { lastBatchSize, lastUpdateCount, mountedCells, liveComponents } =
+    useTradingShellState(
+      (state) => ({
+        lastBatchSize: state.metrics.lastBatchSize,
+        lastUpdateCount: state.metrics.lastUpdateCount,
+        mountedCells: state.mountedCells,
+        liveComponents: state.liveComponents,
+      }),
+      { compare: shallow },
+    )
+  return (
+    <footer className="market-statusbar">
+      <span>
+        BATCH EVENTS <strong>{formatInteger(lastBatchSize)}</strong>
+      </span>
+      <span>
+        ROW UPDATES <strong>{formatInteger(lastUpdateCount)}</strong>
+      </span>
+      <span>
+        HOSTS <strong>{formatInteger(mountedCells)}</strong>
+      </span>
+      <span>
+        COMPONENTS <strong>{formatInteger(liveComponents)}</strong>
+      </span>
+      <span className="statusbar-spacer" />
+      <span>WORKER / ACKNOWLEDGED / IMMUTABLE</span>
+    </footer>
+  )
+}
+
+function Configurator() {
+  const state = useTradingShellState(
+    (storeState) => ({
+      running: storeState.running,
+      tableAdapter: storeState.tableAdapter,
+      instrumentCount: storeState.instrumentCount,
+      feedLoadProfile: storeState.feedLoadProfile,
+      targetEventsPerSecond: storeState.targetEventsPerSecond,
+      rowWorkloadMode: storeState.rowWorkloadMode,
+      coreRowModelMode: storeState.coreRowModelMode,
+      coreFilterValue: storeState.coreFilterValue,
+      scrollStressMode: storeState.scrollStressMode,
+      rendererMode: storeState.rendererMode,
+      updateSparklines: storeState.updateSparklines,
+      updateQuoteAges: storeState.updateQuoteAges,
+    }),
+    { compare: shallow },
+  )
+  const { actions } = useTradingShellController()
+  const {
+    running,
+    tableAdapter,
+    instrumentCount,
+    feedLoadProfile,
+    targetEventsPerSecond,
+    rowWorkloadMode,
+    coreRowModelMode,
+    coreFilterValue,
+    scrollStressMode,
+    rendererMode,
+    updateSparklines,
+    updateQuoteAges,
+  } = state
+  const {
+    toggleFeed,
+    setInstrumentCount,
+    setFeedLoadProfile,
+    setTargetEventsPerSecond,
+    setRowWorkloadMode,
+    setTableAdapter,
+    setCoreRowModelMode,
+    setCoreFilterValue,
+    setScrollStressMode,
+    setRendererMode,
+    setUpdateSparklines,
+    setUpdateQuoteAges,
+    runBurst,
+    resetMarket,
+  } = actions
+
+  return (
+    <aside className="configurator" aria-label="Benchmark configurator">
+          <header>
+            <span>CONFIGURATOR</span>
+            <small>RUN PARAMETERS</small>
+          </header>
+
+          <section className="config-section" aria-labelledby="react-adapter">
+            <h2 id="react-adapter">TABLE ADAPTER</h2>
+            <label className="field">
+              <span>Implementation</span>
+              <select
+                data-testid="adapter-select"
+                value={tableAdapter}
+                onChange={(event) =>
+                  setTableAdapter(event.currentTarget.value as TableAdapter)
+                }
+              >
+                <option value="local">React Table local v9</option>
+                <option value="v8">React Table 8.21.3</option>
+              </select>
+              <small>Switching unmounts one adapter and mounts the next.</small>
+            </label>
+          </section>
+
+          <section className="config-section" aria-labelledby="feed-settings">
+            <h2 id="feed-settings">FEED</h2>
+            <button
+              className="primary-action"
+              type="button"
+              data-testid="feed-toggle"
+              onClick={toggleFeed}
+            >
+              {running ? 'PAUSE FEED' : 'START FEED'}
+            </button>
+
+            <label className="field">
+              <span>Instruments</span>
+              <select
+                data-testid="instrument-count-select"
+                value={instrumentCount}
+                onChange={(event) =>
+                  setInstrumentCount(Number(event.currentTarget.value))
+                }
+              >
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="150">150</option>
+                <option value="250">250</option>
+                <option value="350">350</option>
+                <option value="500">500</option>
+                <option value="750">750</option>
+                <option value="1000">1,000</option>
+              </select>
+            </label>
+
+            <label className="field">
+              <span>Load profile</span>
+              <select
+                data-testid="load-profile-select"
+                value={feedLoadProfile}
+                onChange={(event) =>
+                  setFeedLoadProfile(
+                    event.currentTarget.value as FeedLoadProfile,
+                  )
+                }
+              >
+                <option value="low">Low · 1K/s</option>
+                <option value="medium">Medium · 5K/s</option>
+                <option value="high">High · 10K/s</option>
+                <option value="very-high">Very high · 25K/s</option>
+                <option value="max">Max · 100K/s</option>
+                <option value="custom">Custom</option>
+              </select>
+              <small>
+                High is the repeatable default; Max is intentionally saturating.
+              </small>
+            </label>
+
+            <label className="field rate-field">
+              <span>
+                Target event rate
+                <strong>{formatRate(targetEventsPerSecond)}/s</strong>
+              </span>
+              <input
+                data-testid="target-rate-slider"
+                type="range"
+                min="100"
+                max="100000"
+                step="100"
+                value={targetEventsPerSecond}
+                onChange={(event) =>
+                  setTargetEventsPerSecond(
+                    Number(event.currentTarget.value),
+                  )
+                }
+              />
+              <small>100 — 100,000 events/s</small>
+            </label>
+          </section>
+
+          <section className="config-section" aria-labelledby="render-settings">
+            <h2 id="render-settings">RENDER PATH</h2>
+            <label className="field">
+              <span>Row workload</span>
+              <select
+                data-testid="row-workload-select"
+                value={rowWorkloadMode}
+                onChange={(event) =>
+                  setRowWorkloadMode(
+                    event.currentTarget.value as RowWorkloadMode,
+                  )
+                }
+              >
+                <option value="stable">Stable universe</option>
+                <option value="price-sort">Continuously sort by Last</option>
+                <option value="rotating-filter">
+                  Rotate 20% filtered rows
+                </option>
+                <option value="identity-churn">
+                  Replace 10% of ticker IDs
+                </option>
+              </select>
+              <small>
+                Reorder preserves IDs; filter removes/reinserts rows;
+                replacement forces new row identities.
+              </small>
+            </label>
+
+            <label className="field">
+              <span>TanStack core row model</span>
+              <select
+                data-testid="core-row-model-select"
+                value={coreRowModelMode}
+                onChange={(event) =>
+                  setCoreRowModelMode(
+                    event.currentTarget.value as CoreRowModelMode,
+                  )
+                }
+              >
+                <option value="none">Off · source order</option>
+                <option value="sort">Sort Last descending</option>
+                <option value="filter">Filter Ticker</option>
+                <option value="sort-filter">Filter + sort Last</option>
+              </select>
+              <small>
+                Runs inside the selected adapter; unlike Row workload, this is
+                not a pre-transformed array.
+              </small>
+            </label>
+
+            {(coreRowModelMode === 'filter' ||
+              coreRowModelMode === 'sort-filter') && (
+              <label className="field">
+                <span>Ticker contains</span>
+                <input
+                  data-testid="core-filter-input"
+                  type="text"
+                  value={coreFilterValue}
+                  onChange={(event) =>
+                    setCoreFilterValue(event.currentTarget.value)
+                  }
+                />
+                <small>Case-insensitive column filter; try ALP, 1, or R.</small>
+              </label>
+            )}
+
+            <label className="toggle-field">
+              <input
+                type="checkbox"
+                checked={rendererMode === 'swap'}
+                onChange={(event) =>
+                  setRendererMode(
+                    event.currentTarget.checked ? 'swap' : 'stable',
+                  )
+                }
+              />
+              <span>
+                Swap Tick component A ↔ B
+                <small>destroy and recreate when direction changes</small>
+              </span>
+            </label>
+
+            <label className="toggle-field">
+              <input
+                type="checkbox"
+                checked={updateSparklines}
+                onChange={(event) =>
+                  setUpdateSparklines(event.currentTarget.checked)
+                }
+              />
+              <span>
+                Update sparklines
+                <small>new history input every four quote events</small>
+              </span>
+            </label>
+
+            <label className="toggle-field">
+              <input
+                type="checkbox"
+                checked={updateQuoteAges}
+                onChange={(event) =>
+                  setUpdateQuoteAges(event.currentTarget.checked)
+                }
+              />
+              <span>
+                Update quote age clock
+                <small>
+                  invalidates every Age cell on a shared 100 ms clock
+                </small>
+              </span>
+            </label>
+          </section>
+
+          <section className="config-section" aria-labelledby="stress-actions">
+            <h2 id="stress-actions">STRESS ACTIONS</h2>
+            <label className="field">
+              <span>Automated scroll pressure</span>
+              <select
+                data-testid="scroll-stress-select"
+                value={scrollStressMode}
+                onChange={(event) =>
+                  setScrollStressMode(
+                    event.currentTarget.value as ScrollStressMode,
+                  )
+                }
+              >
+                <option value="off">Off</option>
+                <option value="vertical">Vertical · 700 px/s</option>
+                <option value="horizontal">Horizontal · 420 px/s</option>
+                <option value="both">Vertical + horizontal</option>
+              </select>
+              <small>
+                Bounces the real table viewport and records callback rate,
+                distance, and delayed scroll frames.
+              </small>
+            </label>
+            <div className="action-grid">
+              <button type="button" onClick={runBurst}>
+                RUN 25K BURST
+              </button>
+              <button type="button" onClick={resetMarket}>
+                RESET SESSION
+              </button>
+            </div>
+          </section>
+
+          <Diagnostics />
+          <SelectedInstrument />
+    </aside>
+  )
+}
+
+function MetricsStrip() {
+  const { metrics, longAnimationFramesSupported } =
+    useTradingShellState(
+      (state) => ({
+        metrics: state.metrics,
+        longAnimationFramesSupported: state.longAnimationFramesSupported,
+      }),
+      { compare: shallow },
+    )
+  return (
+    <section className="metrics-strip" aria-label="Live performance metrics">
+      <article>
+        <span>THROUGHPUT</span>
+        <strong data-testid="actual-rate">
+          {formatRate(metrics.actualEventsPerSecond)}
+        </strong>
+        <small>events/s</small>
+      </article>
+      <article>
+        <span>RAF RATE</span>
+        <strong data-testid="raf-rate">
+          {metrics.rafCallbacksPerSecond.toFixed(1)}
+        </strong>
+        <small>callbacks/s</small>
+      </article>
+      <article>
+        <span>TABLE RENDERS</span>
+        <strong data-testid="table-render-rate">
+          {metrics.tableRendersPerSecond.toFixed(1)}
+        </strong>
+        <small>worker batches/s</small>
+      </article>
+      <article>
+        <span>AVG RENDER</span>
+        <strong>{formatMs(metrics.averageRenderMs)}</strong>
+        <small>mutation → render</small>
+      </article>
+      <article>
+        <span>P95 RENDER</span>
+        <strong>{formatMs(metrics.p95RenderMs)}</strong>
+        <small>max {formatMs(metrics.maxRenderMs)}</small>
+      </article>
+      <article>
+        <span>LONG FRAMES</span>
+        {longAnimationFramesSupported ? (
+          <>
+            <strong
+              data-testid="long-frame-count"
+              className={metrics.longAnimationFrames > 0 ? 'metric-alert' : ''}
+            >
+              {metrics.longAnimationFrames}
+            </strong>
+            <small>worst {formatMs(metrics.worstLongAnimationFrameMs)}</small>
+          </>
+        ) : (
+          <>
+            <strong data-testid="long-frame-count">N/A</strong>
+            <small>unsupported</small>
+          </>
+        )}
+      </article>
+      <article>
+        <span>TOTAL EVENTS</span>
+        <strong data-testid="total-events">
+          {formatInteger(metrics.totalEvents)}
+        </strong>
+        <small>since reset</small>
+      </article>
+    </section>
+  )
+}
+
+function Diagnostics() {
+  const {
+    metrics,
+    mountedCells,
+    liveComponents,
+    longAnimationFramesSupported,
+  } = useTradingShellState(
+    (state) => ({
+      metrics: state.metrics,
+      mountedCells: state.mountedCells,
+      liveComponents: state.liveComponents,
+      longAnimationFramesSupported: state.longAnimationFramesSupported,
+    }),
+    { compare: shallow },
+  )
+  const profilerEnabled =
+    import.meta.env.DEV || import.meta.env.MODE === 'profile'
+  return (
+    <section
+      className="config-section diagnostics"
+      aria-labelledby="diagnostics"
+    >
+      <h2 id="diagnostics">DIAGNOSTICS</h2>
+      <dl>
+        <div>
+          <dt>Mounted cells</dt>
+          <dd>{formatInteger(mountedCells)}</dd>
+        </div>
+        <div>
+          <dt>Live components</dt>
+          <dd>{formatInteger(liveComponents)}</dd>
+        </div>
+        <div>
+          <dt>Created / destroyed</dt>
+          <dd>
+            {formatInteger(metrics.componentsCreated)} /{' '}
+            {formatInteger(metrics.componentsDestroyed)}
+          </dd>
+        </div>
+        <div>
+          <dt>Cell renderer calls / s</dt>
+          <dd data-testid="cell-render-rate">
+            {formatRate(metrics.cellRendererCallsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Component function calls / s</dt>
+          <dd data-testid="component-render-rate">
+            {formatRate(metrics.componentRenderCallsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Component function calls by type / s</dt>
+          <dd data-testid="component-render-breakdown">
+            {formatInvocationRates(metrics.componentRenderRates)}
+          </dd>
+        </div>
+        <div>
+          <dt>Cell callbacks by column / s</dt>
+          <dd data-testid="cell-render-breakdown">
+            {formatInvocationRates(metrics.cellRendererRates)}
+          </dd>
+        </div>
+        <div>
+          <dt>DOM mutation records / s</dt>
+          <dd data-testid="dom-mutation-rate">
+            {formatRate(metrics.domMutationsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>React Profiler commits / s</dt>
+          <dd data-testid="profiler-commit-rate">
+            {profilerEnabled
+              ? metrics.profilerCommitsPerSecond.toFixed(1)
+              : 'PROFILE BUILD REQUIRED'}
+          </dd>
+        </div>
+        <div>
+          <dt>Profiler actual avg / p95</dt>
+          <dd data-testid="profiler-actual-duration">
+            {profilerEnabled
+              ? `${formatMs(metrics.profilerAverageActualMs)} / ${formatMs(
+                  metrics.profilerP95ActualMs,
+                )}`
+              : 'N/A'}
+          </dd>
+        </div>
+        <div>
+          <dt>Profiler base avg</dt>
+          <dd>
+            {profilerEnabled
+              ? formatMs(metrics.profilerAverageBaseMs)
+              : 'N/A'}
+          </dd>
+        </div>
+        <div>
+          <dt>Core row model calls / s</dt>
+          <dd data-testid="row-model-call-rate">
+            {metrics.rowModelCallsPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>Core row model avg / max</dt>
+          <dd data-testid="row-model-duration">
+            {formatMs(metrics.rowModelAverageMs)} /{' '}
+            {formatMs(metrics.rowModelMaxMs)}
+          </dd>
+        </div>
+        <div>
+          <dt>Visible rows</dt>
+          <dd data-testid="visible-row-count">
+            {formatInteger(metrics.visibleRows)}
+          </dd>
+        </div>
+        <div>
+          <dt>Scroll callbacks / distance</dt>
+          <dd data-testid="scroll-pressure-rate">
+            {metrics.scrollCallbacksPerSecond.toFixed(1)} /{' '}
+            {formatRate(metrics.scrollDistancePerSecond)} px/s
+          </dd>
+        </div>
+        <div>
+          <dt>Delayed scroll frames (&gt;34 ms)</dt>
+          <dd data-testid="scroll-jank-frames">
+            {formatInteger(metrics.scrollJankFrames)}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages</dt>
+          <dd data-testid="worker-messages">
+            {formatInteger(metrics.workerMessages)}
+          </dd>
+        </div>
+        <div>
+          <dt>Last batch events / rows</dt>
+          <dd>
+            {formatInteger(metrics.lastBatchSize)} /{' '}
+            {formatInteger(metrics.lastUpdateCount)}
+          </dd>
+        </div>
+        <div>
+          <dt>Renders &gt; 16.7 ms</dt>
+          <dd>{metrics.slowRenders}</dd>
+        </div>
+        <div>
+          <dt>Long animation frames</dt>
+          <dd>
+            {longAnimationFramesSupported
+              ? formatInteger(metrics.longAnimationFrames)
+              : 'Unsupported'}
+          </dd>
+        </div>
+        <div>
+          <dt>JS heap</dt>
+          <dd>
+            {metrics.heapMb === null
+              ? 'N/A'
+              : `${metrics.heapMb.toFixed(1)} MB`}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  )
+}
+
+function SelectedInstrument() {
+  const selectedQuote = useTradingShellState(
+    (state) => state.selectedQuote,
+  )
+  return (
+    <section className="config-section selected-instrument">
+      <h2>SELECTED INSTRUMENT</h2>
+      {selectedQuote ? (
+        <>
+          <div className="selection">
+            <div>
+              <strong>{selectedQuote.symbol}</strong>
+              <span>{selectedQuote.company}</span>
+            </div>
+            <small>{selectedQuote.venue}</small>
+          </div>
+          <dl>
+            <div>
+              <dt>Last</dt>
+              <dd>{selectedQuote.price.toFixed(2)}</dd>
+            </div>
+            <div>
+              <dt>Bid / ask</dt>
+              <dd>
+                {selectedQuote.bid.toFixed(2)} /{' '}
+                {selectedQuote.ask.toFixed(2)}
+              </dd>
+            </div>
+          </dl>
+        </>
+      ) : (
+        <p>Click a value in the Last column to inspect its output.</p>
+      )}
+    </section>
+  )
+}
+
+function formatInteger(value: number): string {
+  return integerFormatter.format(value)
+}
+
+function formatRate(value: number): string {
+  return rateFormatter.format(value)
+}
+
+function formatMs(value: number): string {
+  return `${value.toFixed(2)} ms`
+}
+
+function formatInvocationRates(
+  rates: FeedMetrics['componentRenderRates'],
+): string {
+  const activeRates = rates
+    .filter((rate) => rate.callsPerSecond > 0)
+    .sort((left, right) => right.callsPerSecond - left.callsPerSecond)
+  return activeRates.length === 0
+    ? 'No calls in sample'
+    : activeRates
+        .map(
+          (rate) => `${rate.name} ${formatRate(rate.callsPerSecond)}`,
+        )
+        .join(' · ')
+}
diff --git a/examples/react/realtime-trading/src/shell/trading-shell-context.tsx b/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
new file mode 100644
index 0000000000..90af58c01c
--- /dev/null
+++ b/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
@@ -0,0 +1,33 @@
+import { createStoreContext, useSelector } from '@tanstack/react-store'
+import type { ReactNode } from 'react'
+import type { TradingBenchmarkController } from '../core/use-trading-benchmark-controller'
+import type {
+  TradingBenchmarkState,
+} from '../core/trading-benchmark-controller'
+import type { UseSelectorOptions } from '@tanstack/react-store'
+
+const {
+  StoreProvider: TradingStoreProvider,
+  useStoreContext: useTradingShellController,
+} = createStoreContext<TradingBenchmarkController>()
+
+export function TradingShellProvider(props: {
+  controller: TradingBenchmarkController
+  children: ReactNode
+}) {
+  return (
+    <TradingStoreProvider value={props.controller}>
+      {props.children}
+    </TradingStoreProvider>
+  )
+}
+
+export { useTradingShellController }
+
+export function useTradingShellState<TSelected>(
+  selector: (state: TradingBenchmarkState) => TSelected,
+  options?: UseSelectorOptions<TSelected>,
+): TSelected {
+  const controller = useTradingShellController()
+  return useSelector(controller.store, selector, options)
+}
diff --git a/examples/react/realtime-trading/src/trading-table-local.tsx b/examples/react/realtime-trading/src/trading-table-local.tsx
new file mode 100644
index 0000000000..a732ead873
--- /dev/null
+++ b/examples/react/realtime-trading/src/trading-table-local.tsx
@@ -0,0 +1,144 @@
+import {
+  FlexRender,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  sortFn_basic,
+  stockFeatures,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
+import {
+  TradingRow,
+  readMeasuredRows,
+  tradingColumns,
+} from './trading-table-shared'
+import { useTableBenchmark } from './benchmark/use-table-benchmark'
+import {
+  useTradingShellController,
+  useTradingShellState,
+} from './shell/trading-shell-context'
+import type { MarketQuote } from './market-data'
+import type { CoreTableState } from './trading-table-shared'
+
+const localFeatures = tableFeatures({
+  ...stockFeatures,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { basic: sortFn_basic },
+})
+
+export function LocalTradingTable() {
+  const controller = useTradingShellController()
+  const quotes = useTradingShellState((state) => state.displayQuotes)
+  const scrollStressMode = useTradingShellState(
+    (state) => state.scrollStressMode,
+  )
+
+  useTableBenchmark(controller, 'local', scrollStressMode)
+  const table = useLocalTradingTable({
+    quotes,
+    tableAtoms: controller.tableAtoms,
+  })
+
+  return (
+    <div className="table-scroll" data-table-adapter="local">
+      <table style={{ width: table.getTotalSize() }}>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id} style={{ width: header.getSize() }}>
+                  {!header.isPlaceholder && <FlexRender header={header} />}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <LocalTradingTableBody table={table} quotes={quotes} />
+      </table>
+    </div>
+  )
+}
+
+function useLocalTradingTable(props: {
+  quotes: Array<MarketQuote>
+  tableAtoms: ReturnType<typeof useTradingShellController>['tableAtoms']
+}) {
+  return useTable(
+    {
+      key: 'react-realtime-trading-local',
+      features: localFeatures,
+      columns: tradingColumns,
+      data: props.quotes,
+      getRowId: (row) => row.id,
+      atoms: props.tableAtoms,
+    },
+    () => null,
+  )
+}
+
+function LocalTradingTableBody(props: {
+  table: ReturnType<typeof useLocalTradingTable>
+  quotes: Array<MarketQuote>
+}) {
+  return (
+    <props.table.Subscribe
+      selector={(state) => ({
+        sorting: state.sorting,
+        columnFilters: state.columnFilters,
+      })}
+    >
+      {(coreState) => (
+        <LocalTradingRows
+          table={props.table}
+          quoteSnapshot={props.quotes}
+          coreState={coreState}
+        />
+      )}
+    </props.table.Subscribe>
+  )
+}
+
+function LocalTradingRows(props: {
+  table: ReturnType<typeof useLocalTradingTable>
+  quoteSnapshot: Array<MarketQuote>
+  coreState: CoreTableState
+}) {
+  const rows = readLocalRows(props.table, props.quoteSnapshot, props.coreState)
+
+  return (
+    <tbody data-source-row-count={props.quoteSnapshot.length}>
+      {rows.map((row) => (
+        <TradingRow key={row.id} quote={row.original}>
+          {row.getVisibleCells().map((cell) => (
+            <td
+              key={cell.id}
+              style={{ width: cell.column.getSize() }}
+              className={
+                cell.column.id !== 'symbol' && cell.column.id !== 'venue'
+                  ? 'numeric-cell'
+                  : undefined
+              }
+            >
+              <FlexRender cell={cell} />
+            </td>
+          ))}
+        </TradingRow>
+      ))}
+    </tbody>
+  )
+}
+
+function readLocalRows(
+  table: ReturnType<typeof useLocalTradingTable>,
+  quoteSnapshot: Array<MarketQuote>,
+  coreState: CoreTableState,
+) {
+  // These explicit inputs describe the external dependencies behind the
+  // table's mutable row-model API to React Compiler.
+  void quoteSnapshot
+  void coreState
+  return readMeasuredRows('local', () => table.getRowModel().rows)
+}
diff --git a/examples/react/realtime-trading/src/trading-table-shared.tsx b/examples/react/realtime-trading/src/trading-table-shared.tsx
new file mode 100644
index 0000000000..8071159ce0
--- /dev/null
+++ b/examples/react/realtime-trading/src/trading-table-shared.tsx
@@ -0,0 +1,317 @@
+import { useMemo } from 'react'
+import { useSelector } from '@tanstack/react-store'
+import {
+  DepthCell,
+  DownMoveCell,
+  PriceCell,
+  QuoteAgeCell,
+  SparklineCell,
+  SpreadCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells'
+import {
+  useTradingShellController,
+} from './shell/trading-shell-context'
+import type { ReactNode } from 'react'
+import type { MarketQuote } from './market-data'
+
+export type RendererMode = 'stable' | 'swap'
+export type TableAdapter = 'local' | 'v8'
+export type CoreRowModelMode = 'none' | 'sort' | 'filter' | 'sort-filter'
+
+export interface TradingTableProps {
+  quotes: Array<MarketQuote>
+  coreRowModelMode: CoreRowModelMode
+  coreFilterValue: string
+}
+
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+
+interface TradingCellContext {
+  row: { original: MarketQuote }
+}
+
+export interface TradingColumnDefinition {
+  id: string
+  header: string
+  size: number
+  accessorFn?: (row: MarketQuote) => unknown
+  filterFn?: 'includesString'
+  sortFn?: 'basic'
+  cell: (context: TradingCellContext) => ReactNode
+}
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+  style: 'currency',
+  currency: 'USD',
+})
+
+export const tradingColumns: Array<TradingColumnDefinition> = [
+  {
+    id: 'symbol',
+    header: 'Ticker',
+    size: 90,
+    accessorFn: (row) => row.symbol,
+    filterFn: 'includesString',
+    cell: ({ row }) => recordCellRender('Ticker', row.original.symbol),
+  },
+  {
+    id: 'venue',
+    header: 'Venue',
+    size: 70,
+    cell: ({ row }) => recordCellRender('Venue', row.original.venue),
+  },
+  {
+    id: 'bid',
+    header: 'Bid',
+    size: 90,
+    cell: ({ row }) =>
+      recordCellRender('Bid', row.original.bid.toFixed(2)),
+  },
+  {
+    id: 'ask',
+    header: 'Ask',
+    size: 90,
+    cell: ({ row }) =>
+      recordCellRender('Ask', row.original.ask.toFixed(2)),
+  },
+  {
+    id: 'spread',
+    header: 'Spread',
+    size: 95,
+    cell: ({ row }) =>
+      recordCellRender(
+        'Spread',
+        <SpreadCell bid={row.original.bid} ask={row.original.ask} />,
+      ),
+  },
+  {
+    id: 'price',
+    header: 'Last',
+    size: 100,
+    accessorFn: (row) => row.price,
+    sortFn: 'basic',
+    cell: ({ row }) =>
+      recordCellRender('Last', <LastPriceCell quote={row.original} />),
+  },
+  {
+    id: 'lastMove',
+    header: 'Last Move',
+    size: 105,
+    cell: ({ row }) =>
+      recordCellRender('LastMove', <LastMoveCell quote={row.original} />),
+  },
+  {
+    id: 'lastSize',
+    header: 'Last Qty',
+    size: 90,
+    cell: ({ row }) =>
+      recordCellRender(
+        'LastQty',
+        compactFormatter.format(row.original.lastSize),
+      ),
+  },
+  {
+    id: 'depth',
+    header: 'Bid / Ask Qty',
+    size: 145,
+    cell: ({ row }) =>
+      recordCellRender(
+        'Depth',
+        <DepthCell
+          bidSize={row.original.bidSize}
+          askSize={row.original.askSize}
+        />,
+      ),
+  },
+  {
+    id: 'age',
+    header: 'Quote Age',
+    size: 85,
+    cell: ({ row }) =>
+      recordCellRender('QuoteAge', <AgeCell quote={row.original} />),
+  },
+  {
+    id: 'change',
+    header: 'Day %',
+    size: 90,
+    cell: ({ row }) =>
+      recordCellRender(
+        'DayChange',
+        formatDayChange(row.original.price, row.original.open),
+      ),
+  },
+  {
+    id: 'volume',
+    header: 'Total Qty',
+    size: 100,
+    cell: ({ row }) =>
+      recordCellRender(
+        'TotalQty',
+        compactFormatter.format(row.original.volume),
+      ),
+  },
+  {
+    id: 'turnover',
+    header: 'Traded Value',
+    size: 115,
+    cell: ({ row }) =>
+      recordCellRender(
+        'TradedValue',
+        currencyFormatter.format(row.original.turnover),
+      ),
+  },
+  {
+    id: 'history',
+    header: 'Intraday',
+    size: 150,
+    cell: ({ row }) =>
+      recordCellRender(
+        'Intraday',
+        <SparklineCell values={row.original.history} />,
+      ),
+  },
+]
+
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
+
+export const TRADING_COLUMN_COUNT = tradingColumns.length
+
+export function getCoreTableState(props: TradingTableProps) {
+  const sorts =
+    props.coreRowModelMode === 'sort' ||
+    props.coreRowModelMode === 'sort-filter'
+  const filters =
+    (props.coreRowModelMode === 'filter' ||
+      props.coreRowModelMode === 'sort-filter') &&
+    props.coreFilterValue.trim().length > 0
+
+  return {
+    sorting: sorts ? [{ id: 'price', desc: true }] : [],
+    columnFilters: filters
+      ? [{ id: 'symbol', value: props.coreFilterValue.trim() }]
+      : [],
+  } satisfies CoreTableState
+}
+
+export function useCoreTableState(props: TradingTableProps) {
+  return useMemo(
+    () => getCoreTableState(props),
+    [props.coreFilterValue, props.coreRowModelMode],
+  )
+}
+
+export function readMeasuredRows<Row>(
+  adapter: TableAdapter,
+  readRows: () => Array<Row>,
+): Array<Row> {
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(
+    rowModelDiagnostics.maxDurationMs,
+    duration,
+  )
+  rowModelDiagnostics.lastRowCount = rows.length
+
+  try {
+    performance.measure('tanstack-row-model', {
+      start,
+      end,
+      detail: { adapter, rowCount: rows.length },
+    })
+    if (rowModelDiagnostics.calls % 1_000 === 0) {
+      performance.clearMeasures('tanstack-row-model')
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+
+  return rows
+}
+
+function LastPriceCell(props: { quote: MarketQuote }) {
+  const { selectSymbol } = useTradingShellController().actions
+  return (
+    <PriceCell
+      price={props.quote.price}
+      move={props.quote.lastMove}
+      onSelect={() => selectSymbol(props.quote.symbol)}
+    />
+  )
+}
+
+function LastMoveCell(props: { quote: MarketQuote }) {
+  const { rendererMode } = useTradingShellController().renderAtoms
+  const mode = useSelector(rendererMode)
+  if (mode === 'stable') {
+    return <StableMoveCell move={props.quote.lastMove} />
+  }
+  return props.quote.lastMove >= 0 ? (
+    <UpMoveCell move={props.quote.lastMove} />
+  ) : (
+    <DownMoveCell move={props.quote.lastMove} />
+  )
+}
+
+function AgeCell(props: { quote: MarketQuote }) {
+  const { quoteAge } = useTradingShellController().renderAtoms
+  const { enabled, clock } = useSelector(quoteAge)
+  return (
+    <QuoteAgeCell
+      ageMs={
+        enabled
+          ? Math.max(0, clock - props.quote.lastUpdatedAt)
+          : 0
+      }
+    />
+  )
+}
+
+export function TradingRow(props: {
+  quote: MarketQuote
+  children: ReactNode
+}) {
+  const { selectedSymbol } = useTradingShellController().renderAtoms
+  const selected = useSelector(
+    selectedSymbol,
+    (symbol) => symbol === props.quote.symbol,
+  )
+  return (
+    <tr
+      className={selected ? 'is-selected' : undefined}
+      data-symbol={props.quote.symbol}
+      data-row-id={props.quote.id}
+      title={props.quote.company}
+    >
+      {props.children}
+    </tr>
+  )
+}
+
+function formatDayChange(price: number, open: number): string {
+  const change = (price / open - 1) * 100
+  return `${change >= 0 ? '+' : ''}${change.toFixed(2)}%`
+}
diff --git a/examples/react/realtime-trading/src/trading-table-v8.tsx b/examples/react/realtime-trading/src/trading-table-v8.tsx
new file mode 100644
index 0000000000..f281b7b344
--- /dev/null
+++ b/examples/react/realtime-trading/src/trading-table-v8.tsx
@@ -0,0 +1,77 @@
+'use no memo'
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table-v8'
+import { memo } from 'react'
+import {
+  TradingRow,
+  readMeasuredRows,
+  tradingColumns,
+  useCoreTableState,
+} from './trading-table-shared'
+import { useV8TradingTableRuntime } from './core/use-trading-table-runtime'
+
+export const V8TradingTable = memo(function V8TradingTable() {
+  const props = useV8TradingTableRuntime()
+  const coreTableState = useCoreTableState(props)
+  const table = useReactTable({
+    columns: tradingColumns,
+    data: props.quotes,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+    state: coreTableState,
+  })
+  const rows = readMeasuredRows('v8', () => table.getRowModel().rows)
+
+  return (
+    <div className="table-scroll" data-table-adapter="v8">
+      <table style={{ width: table.getTotalSize() }}>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id} style={{ width: header.getSize() }}>
+                  {!header.isPlaceholder &&
+                    flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <TradingRow key={row.id} quote={row.original}>
+              {row.getVisibleCells().map((cell) => (
+                <td
+                  key={cell.id}
+                  style={{ width: cell.column.getSize() }}
+                  className={
+                    cell.column.id !== 'symbol' &&
+                    cell.column.id !== 'venue'
+                      ? 'numeric-cell'
+                      : undefined
+                  }
+                >
+                  {flexRender(
+                    cell.column.columnDef.cell,
+                    cell.getContext(),
+                  )}
+                </td>
+              ))}
+            </TradingRow>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+})
diff --git a/examples/react/realtime-trading/src/trading-table.tsx b/examples/react/realtime-trading/src/trading-table.tsx
new file mode 100644
index 0000000000..4fb2e19648
--- /dev/null
+++ b/examples/react/realtime-trading/src/trading-table.tsx
@@ -0,0 +1,15 @@
+export { LocalTradingTable } from './trading-table-local'
+export { V8TradingTable } from './trading-table-v8'
+export {
+  TRADING_COLUMN_COUNT,
+  TradingRow,
+  getCoreTableState,
+  rowModelDiagnostics,
+} from './trading-table-shared'
+export type {
+  CoreRowModelMode,
+  CoreTableState,
+  RendererMode,
+  TableAdapter,
+  TradingTableProps,
+} from './trading-table-shared'
diff --git a/examples/react/realtime-trading/src/vite-env.d.ts b/examples/react/realtime-trading/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/react/realtime-trading/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..9fd51c0680
--- /dev/null
+++ b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,170 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the same React workload across both table adapters', async ({
+  page,
+}) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.route(
+      'https://unpkg.com/react-scan/dist/auto.global.js',
+      (route) =>
+        route.fulfill({
+          contentType: 'application/javascript',
+          body: '',
+        }),
+    )
+
+    await page.goto(server.url)
+
+    const table = page.getByRole('table')
+    await expect(table).toBeVisible()
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(table.locator('thead th')).toHaveCount(14)
+    await expect(table.locator('thead')).toContainText('Ticker')
+    await expect(table.locator('thead')).toContainText('Last Qty')
+    await expect(table.locator('thead')).toContainText('Traded Value')
+    const adapter = page.getByTestId('adapter-select')
+    await expect(adapter).toHaveValue('local')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const loadProfile = page.getByTestId('load-profile-select')
+    await expect(loadProfile).toHaveValue('high')
+    await loadProfile.selectOption('very-high')
+    await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
+    await loadProfile.selectOption('high')
+
+    const rowWorkload = page.getByTestId('row-workload-select')
+    await rowWorkload.selectOption('rotating-filter')
+    await expect(table.locator('tbody tr')).toHaveCount(200)
+    await rowWorkload.selectOption('identity-churn')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(
+      table.locator('tbody tr[data-row-id*="-replacement-"]'),
+    ).toHaveCount(25)
+    await rowWorkload.selectOption('price-sort')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await rowWorkload.selectOption('stable')
+
+    const coreRowModel = page.getByTestId('core-row-model-select')
+    await coreRowModel.selectOption('filter')
+    await expect(page.getByTestId('core-filter-input')).toHaveValue('ALP')
+    await expect(table.locator('tbody tr')).toHaveCount(21)
+    await page.getByTestId('core-filter-input').fill('CRN')
+    await expect(table.locator('tbody tr')).toHaveCount(21)
+    await coreRowModel.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('total-events').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('raf-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    for (const implementation of ['v8', 'local']) {
+      await adapter.selectOption(implementation)
+      await expect(adapter).toHaveValue(implementation)
+      await expect(page.getByRole('table')).toBeVisible()
+      await expect(page.locator('tbody tr')).toHaveCount(250)
+
+      await coreRowModel.selectOption('filter')
+      await page.getByTestId('core-filter-input').fill('ALP')
+      await expect(page.locator('tbody tr')).toHaveCount(21)
+      await coreRowModel.selectOption('none')
+      await expect(page.locator('tbody tr')).toHaveCount(250)
+
+      const firstPrice = page.locator('tbody tr').first().getByRole('button')
+      const priceBeforeUpdate = await firstPrice.textContent()
+      await expect
+        .poll(() => firstPrice.textContent())
+        .not.toBe(priceBeforeUpdate)
+    }
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    await coreRowModel.selectOption('sort')
+    const sortedPrices = await table.locator('tbody tr').evaluateAll((rows) =>
+      rows.map((row) =>
+        Number(row.querySelector<HTMLButtonElement>('.price-button')?.textContent),
+      ),
+    )
+    expect(sortedPrices).toEqual([...sortedPrices].sort((a, b) => b - a))
+
+    await instrumentCount.selectOption('750')
+    await expect(table.locator('tbody tr')).toHaveCount(750)
+    await page.getByTestId('scroll-stress-select').selectOption('vertical')
+    await expect
+      .poll(() =>
+        page
+          .locator('.table-scroll')
+          .evaluate((element) => element.scrollTop),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(
+          (await page.getByTestId('scroll-pressure-rate').textContent())
+            ?.split('/')[0]
+            .trim(),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await page.getByTestId('scroll-stress-select').selectOption('off')
+
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('profiler-commit-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    expect(
+      await page.evaluate(
+        () =>
+          performance.getEntriesByName('react-profiler-commit').length > 0 &&
+          performance.getEntriesByName('tanstack-row-model').length > 0,
+      ),
+    ).toBe(true)
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/react/realtime-trading/tsconfig.json b/examples/react/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..6bb83b8604
--- /dev/null
+++ b/examples/react/realtime-trading/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "tests/e2e", "vite.config.ts"]
+}
diff --git a/examples/react/realtime-trading/vite.config.ts b/examples/react/realtime-trading/vite.config.ts
new file mode 100644
index 0000000000..e105049171
--- /dev/null
+++ b/examples/react/realtime-trading/vite.config.ts
@@ -0,0 +1,42 @@
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'
+import rollupReplace from '@rollup/plugin-replace'
+import { defineConfig } from 'vite'
+
+export default defineConfig(({ mode }) => {
+  const development = mode === 'development'
+  const profiling = mode === 'profile'
+
+  return {
+    server: {
+      port: 7778,
+      allowedHosts: true,
+    },
+    plugins: [
+      rollupReplace({
+        preventAssignment: true,
+        values: {
+          __DEV__: JSON.stringify(development),
+          'process.env.NODE_ENV': JSON.stringify(
+            development ? 'development' : 'production',
+          ),
+        },
+      }),
+      react(),
+      babel({
+        presets: [reactCompilerPreset()],
+        include: [/\/src\/.*\.[jt]sx?$/],
+      }),
+    ],
+    resolve: {
+      alias: profiling
+        ? [
+            {
+              find: /^react-dom\/client$/,
+              replacement: 'react-dom/profiling',
+            },
+          ]
+        : [],
+    },
+  }
+})
diff --git a/examples/solid/realtime-trading/README.md b/examples/solid/realtime-trading/README.md
new file mode 100644
index 0000000000..fdad66799b
--- /dev/null
+++ b/examples/solid/realtime-trading/README.md
@@ -0,0 +1,208 @@
+# Solid real-time trading FlexRender lab
+
+This standalone example generates deterministic synthetic quote events in the
+browser and stresses two Solid Table render paths. It is not a real
+exchange feed and does not display financial advice or real market data.
+
+The workload is inspired by the public
+[AG Grid finance demo](https://www.ag-grid.com/example-finance/) and its
+[source](https://github.com/ag-grid/ag-grid-demos/tree/main/finance), but is
+focused on renderer lifecycle, immutable high-frequency updates, backpressure,
+and browser performance APIs.
+
+## Run it
+
+From the repository root:
+
+```sh
+pnpm --filter tanstack-solid-table-example-realtime-trading dev
+```
+
+Open `http://localhost:7779`. For measurements, build and serve the production
+bundle so development checks do not distort the result:
+
+```sh
+pnpm --filter tanstack-solid-table-example-realtime-trading build
+pnpm --filter tanstack-solid-table-example-realtime-trading serve
+```
+
+## What is copied into this example
+
+This directory is self-contained. It does not import the feed implementation,
+styles, components, or benchmark shell from the Angular or React examples:
+
+- `market-feed-engine.ts` owns the deterministic quote algorithm.
+- `market-feed.worker.ts` schedules, batches, coalesces, and applies
+  backpressure.
+- `market-feed-protocol.ts` defines commands and events across the worker
+  boundary.
+- `market-data.ts` creates a new data array and new objects for changed rows.
+- `quote-cells.tsx` implements all dynamic Solid cells and lifecycle counters.
+- `trading-table.tsx` keeps the local v9 and v8 table construction separate
+  while sharing one column definition.
+- `core/trading-benchmark-controller.ts` owns application state, worker
+  transport, derived table inputs, and user commands.
+- `benchmark/benchmark-monitor.ts` owns browser observers, render
+  acknowledgements, and published metrics.
+- `shell/TradingShell.tsx` composes independent header, toolbar, metrics,
+  status-bar, diagnostics, and configurator components.
+- `shell/trading-shell-context.tsx` lets every shell component consume the
+  controller without prop drilling.
+- `App.tsx` creates the controller and owns only the projected adapter switch.
+- `index.css` is a complete local copy of the trading-terminal styles.
+
+The duplication is intentional: each framework example can be copied, changed,
+or profiled on its own. Keep the workload files synchronized manually when
+making cross-framework comparisons.
+
+## Architecture
+
+`App` deliberately has no knowledge of workers, timers, observers, or adapter
+commands. It provides the controller, selects the active adapter, and projects
+that table into the shell layout. `createTradingBenchmarkController` is the
+single stateful boundary: it subscribes to the feed worker, converts protocol
+events into immutable row snapshots, derives the selected workload, and
+exposes a small `state` / `actions` contract to the shell context.
+
+Benchmark instrumentation is a separate collaborator. `BenchmarkMonitor`
+contains the mutable sampling runtime and publishes immutable metric snapshots
+back through the controller. This keeps measurement policy out of both the
+table adapters and the presentational shell.
+
+All deliberate mutable runtime is grouped behind `const` object identities.
+Source files do not use `let`; counters and handles change as properties of
+those stable runtime owners instead of being scattered mutable bindings.
+
+## Adapter matrix
+
+The configurator mounts exactly one implementation at a time:
+
+- **Local v9** imports the Solid adapter from this workspace.
+- **8.21.3** imports the final published Solid v8 adapter and matching core.
+
+Changing the select disposes the current table before mounting the next one.
+Feed state remains in the controller, so both receive the same immutable
+snapshots.
+The exact v8 tarball alias prevents this workspace from silently replacing the
+published baseline with local packages.
+
+## Render workload
+
+The table contains 14 columns and up to 1,000 instruments. Its market-watch
+labels are Ticker, Venue, Bid, Ask, Spread, Last, Last Move, Last Qty,
+Bid / Ask Qty, Quote Age, Day %, Total Qty, Traded Value, and Intraday. It
+combines:
+
+- primitive bid, ask, daily change, quantity, and traded-value cells;
+- a clickable price component;
+- a stable Tick component or two alternating Up/Down component types;
+- spread, market-depth, quote-age, and sparkline components;
+- immutable row replacement with stable instrument IDs;
+- optional 100 ms quote-age invalidation for every visible Age cell; and
+- optional history-array replacement for sparklines.
+
+The feed control provides repeatable load profiles: Low 1k/s, Medium 5k/s,
+High 10k/s, Very high 25k/s, and Max 100k/s. High is the default; Max is a
+deliberate saturation test. Moving the rate slider switches the profile to
+Custom. Available universe sizes are 50, 100, 150, 250, 350, 500, 750, and
+1,000.
+
+The row workload selector separates four different behaviors:
+
+- **Stable universe** preserves source order and IDs.
+- **Continuously sort by Last** reorders keyed rows as prices move without
+  recreating their identity.
+- **Rotate 20% filtered rows** changes one excluded index bucket each second,
+  forcing row removal and reinsertion.
+- **Replace 10% of ticker IDs** changes one bucket's IDs and ticker labels each
+  second. Ten percent are replacements at any instant; transitions dispose the
+  previous bucket and create the next, crossing lifecycle boundaries for about
+  twenty percent of rows.
+
+These transformations run before the selected adapter so both versions
+receive the same arrays. They test sorting/filtering consequences and keyed
+reconciliation, not the adapters' public sorting/filtering APIs.
+
+Solid's lifecycle counters use `onMount` and `onCleanup`. Switching from the
+stable Tick renderer to the alternating Up/Down renderers intentionally makes
+direction changes destroy one component type and mount the other. Stable mode
+updates the same component instead.
+
+## Worker transport
+
+The Worker acts like an external WebSocket/SSE transport. It permits one batch
+in flight. A Solid effect tracking only table-driving signals acknowledges the
+batch after the corresponding reactive DOM update. While an update is pending,
+the Worker coalesces newer events by instrument in a bounded map instead of
+growing an unbounded message queue.
+
+`batch events` therefore counts source events, while `row updates` counts the
+final row snapshots copied into a particular UI batch. A batch can contain
+thousands of events but at most one final update per instrument.
+
+The Worker removes quote generation and batching from the main thread. Solid
+rendering, TanStack row-model work, DOM updates, layout, and paint still run on
+the main thread.
+
+## Metrics
+
+- **Throughput** is the source-event rate represented by acknowledged batches.
+- **RAF rate** is actual `requestAnimationFrame` callbacks divided by elapsed
+  wall time. It is not an FPS estimate derived from table renders.
+- **Table renders** is the rate of feed batches that reach the completed Solid
+  reactive update and are acknowledged.
+- **Average / P95 render** spans worker-message receipt through that completed
+  effect. It excludes worker calculation and browser paint.
+- **Long frames** uses the browser Long Animation Frames API when available.
+- **Heap** uses Chromium's non-standard `performance.memory` when available.
+- **Created / destroyed** distinguishes expected type-swap churn from live
+  component retention.
+- **Cell renderer calls/s** counts executions of column `cell` functions. The
+  per-column breakdown identifies which callback was invoked.
+- **Component renders/s** counts executions of dynamic Solid cell component
+  functions, with an exact per-type breakdown. Fine-grained reactive DOM
+  updates normally do not re-execute a whole component, so these calls mostly
+  indicate component creation rather than React-style rerendering.
+- **DOM mutation records/s** comes from a `MutationObserver` attached to the
+  active `tbody`. It counts observer records, not changed elements or painted
+  pixels.
+
+The heap line is diagnostic. Immutable updates continuously allocate short-lived
+arrays, row objects, and render objects, so raw heap can rise before garbage
+collection. Compare post-GC plateaus in the browser Memory profiler.
+
+The three counters are deliberately simple but do add instrumentation overhead.
+Use them to catch accidental full-table work and compare ratios. For final
+timings, corroborate them with a Chrome Performance recording and Solid
+DevTools. A realistic healthy run keeps source throughput near target, avoids
+reconstructing every cell on every worker batch, and reaches a stable post-GC
+heap plateau.
+
+## Is this a real financial grid?
+
+The presentation and workload shape are realistic for a market-watch blotter,
+but the prices, venues, sizes, volume, and traded value are deterministic
+synthetic data. There is no order book, exchange calendar, corporate actions,
+network jitter, reconnect logic, entitlement processing, or real WebSocket
+decoder. That makes the lab reproducible, not production-representative.
+
+For higher confidence, replay a timestamped, sanitized capture through the same
+worker protocol. Preserve burstiness and symbol skew, then compare adapters
+using the same capture, production build, browser, viewport, and fixed
+measurement window.
+
+## Repeatable comparison
+
+1. Use production builds in the same browser and on the same machine.
+2. Start at 250 instruments and 10k events/s.
+3. Keep stable Tick cells, quote ages, and sparklines enabled.
+4. Reset and warm up for 20–30 seconds.
+5. Record throughput, RAF rate, table renders/s, cell/component calls, DOM
+   mutations, P95, long frames, and post-GC heap over a fixed window.
+6. Repeat with the Angular and React standalone examples using identical
+   controls.
+7. Toggle Tick A/B swapping, quote ages, and sparklines separately to isolate
+   component churn, shared-clock invalidation, and array-input cost.
+
+The 25k burst is useful for profiling coalescing and a large render, but a
+sustained target rate is the better test of steady-state behavior.
diff --git a/examples/solid/realtime-trading/index.html b/examples/solid/realtime-trading/index.html
new file mode 100644
index 0000000000..37fed0181d
--- /dev/null
+++ b/examples/solid/realtime-trading/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Solid Table real-time trading render benchmark"
+    />
+    <title>Solid Table — Real-time Trading Benchmark</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/solid/realtime-trading/package.json b/examples/solid/realtime-trading/package.json
new file mode 100644
index 0000000000..4d61e11d84
--- /dev/null
+++ b/examples/solid/realtime-trading/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "tanstack-solid-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src",
+    "test:types": "tsc --noEmit",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "dependencies": {
+    "@tanstack/solid-table": "^9.0.0",
+    "@tanstack/solid-table-v8": "https://registry.npmjs.org/@tanstack/solid-table/-/solid-table-8.21.3.tgz",
+    "solid-js": "^1.9.14"
+  },
+  "devDependencies": {
+    "typescript": "6.0.3",
+    "vite": "^8.2.0",
+    "vite-plugin-solid": "^2.11.14"
+  }
+}
diff --git a/examples/solid/realtime-trading/src/App.tsx b/examples/solid/realtime-trading/src/App.tsx
new file mode 100644
index 0000000000..3e1f40500e
--- /dev/null
+++ b/examples/solid/realtime-trading/src/App.tsx
@@ -0,0 +1,50 @@
+import { Match, Switch } from 'solid-js'
+import { createTradingBenchmarkController } from './core/trading-benchmark-controller'
+import { TradingShell } from './shell/TradingShell'
+import {
+  TradingShellProvider,
+  useTradingShellController,
+} from './shell/trading-shell-context'
+import {
+  LocalTradingTable,
+  V8TradingTable,
+} from './trading-table'
+
+export default function App() {
+  const controller = createTradingBenchmarkController()
+  return (
+    <TradingShellProvider controller={controller}>
+      <TradingShell>
+        <TradingTableOutlet />
+      </TradingShell>
+    </TradingShellProvider>
+  )
+}
+
+function TradingTableOutlet() {
+  const { state, actions } = useTradingShellController()
+  return (
+    <Switch>
+      <Match when={state.tableAdapter() === 'local'}>
+        <LocalTradingTable
+          quotes={state.displayQuotes()}
+          rendererMode={state.rendererMode()}
+          updateQuoteAges={state.updateQuoteAges()}
+          quoteClock={state.quoteClock()}
+          selectedSymbol={state.selectedSymbol()}
+          onSelectSymbol={actions.selectSymbol}
+        />
+      </Match>
+      <Match when={state.tableAdapter() === 'v8'}>
+        <V8TradingTable
+          quotes={state.displayQuotes()}
+          rendererMode={state.rendererMode()}
+          updateQuoteAges={state.updateQuoteAges()}
+          quoteClock={state.quoteClock()}
+          selectedSymbol={state.selectedSymbol()}
+          onSelectSymbol={actions.selectSymbol}
+        />
+      </Match>
+    </Switch>
+  )
+}
diff --git a/examples/solid/realtime-trading/src/benchmark-profiles.ts b/examples/solid/realtime-trading/src/benchmark-profiles.ts
new file mode 100644
index 0000000000..848fc28880
--- /dev/null
+++ b/examples/solid/realtime-trading/src/benchmark-profiles.ts
@@ -0,0 +1,65 @@
+import type { MarketQuote } from './market-data'
+
+export type FeedLoadProfile =
+  'low' | 'medium' | 'high' | 'very-high' | 'max' | 'custom'
+
+export type RowWorkloadMode =
+  'stable' | 'price-sort' | 'rotating-filter' | 'identity-churn'
+
+export const feedLoadRates: Record<
+  Exclude<FeedLoadProfile, 'custom'>,
+  number
+> = {
+  low: 1_000,
+  medium: 5_000,
+  high: 10_000,
+  'very-high': 25_000,
+  max: 100_000,
+}
+
+export function deriveBenchmarkQuotes(
+  quotes: Array<MarketQuote>,
+  mode: RowWorkloadMode,
+  epoch: number,
+): Array<MarketQuote> {
+  if (mode === 'stable') {
+    return quotes
+  }
+
+  if (mode === 'price-sort') {
+    return [...quotes].sort(
+      (left, right) =>
+        right.price - left.price || left.symbol.localeCompare(right.symbol),
+    )
+  }
+
+  if (mode === 'rotating-filter') {
+    const excludedBucket = epoch % 5
+    return quotes.filter((_, index) => index % 5 !== excludedBucket)
+  }
+
+  const replacementBucket = epoch % 10
+  return quotes.map((quote, index) =>
+    index % 10 === replacementBucket
+      ? {
+          ...quote,
+          id: `${quote.id}-replacement-${epoch}`,
+          symbol: `${quote.symbol}R${epoch % 100}`,
+          company: `${quote.company} replacement`,
+        }
+      : quote,
+  )
+}
+
+export function rowWorkloadLabel(mode: RowWorkloadMode): string {
+  switch (mode) {
+    case 'price-sort':
+      return 'PRICE REORDER'
+    case 'rotating-filter':
+      return 'FILTER ROTATION'
+    case 'identity-churn':
+      return 'TICKER REPLACEMENT'
+    default:
+      return 'STABLE UNIVERSE'
+  }
+}
diff --git a/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..c0031a812f
--- /dev/null
+++ b/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -0,0 +1,286 @@
+import { quoteCellLifecycle, quoteRenderDiagnostics } from '../quote-cells'
+import type { MarketFeedCommand } from '../market-feed-protocol'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualEventsPerSecond: number
+  totalEvents: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualEventsPerSecond: 0,
+  totalEvents: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+}
+
+interface PendingAck {
+  generation: number
+  sequence: number
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    pendingAck: null as PendingAck | null,
+    renderSamples: [] as Array<number>,
+    totalEvents: 0,
+    eventsInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  setPendingAck(ack: PendingAck | null): void {
+    this.#runtime.pendingAck = ack
+  }
+
+  recordCompletedRender(postCommand: (command: MarketFeedCommand) => void) {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      runtime.renderSamples.push(
+        performance.now() - runtime.pendingRenderStartedAt,
+      )
+      runtime.pendingRenderStartedAt = null
+    }
+
+    if (runtime.pendingAck) {
+      runtime.tableRendersInSample++
+      postCommand({ type: 'ack', ...runtime.pendingAck })
+      runtime.pendingAck = null
+    }
+  }
+
+  recordBatch(eventCount: number, updateCount: number): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = eventCount
+    runtime.lastUpdateCount = updateCount
+    runtime.eventsInSample += eventCount
+    runtime.totalEvents += eventCount
+    runtime.workerMessages++
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const sortedRenderSamples = [...runtime.renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const averageRenderMs =
+      runtime.renderSamples.length === 0
+        ? 0
+        : runtime.renderSamples.reduce((sum, value) => sum + value, 0) /
+          runtime.renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualEventsPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.eventsInSample / sampleDuration) * 1_000,
+      totalEvents: runtime.totalEvents,
+      rafCallbacksPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: runtime.renderSamples.filter((value) => value > 16.7)
+        .length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond:
+        (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.eventsInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.pendingAck = null
+    runtime.renderSamples = []
+    runtime.totalEvents = 0
+    runtime.eventsInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/solid/realtime-trading/src/core/trading-benchmark-controller.ts b/examples/solid/realtime-trading/src/core/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..674ae71497
--- /dev/null
+++ b/examples/solid/realtime-trading/src/core/trading-benchmark-controller.ts
@@ -0,0 +1,300 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+} from 'solid-js'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from '../benchmark/benchmark-monitor'
+import {
+  deriveBenchmarkQuotes,
+  feedLoadRates,
+  rowWorkloadLabel,
+} from '../benchmark-profiles'
+import { applyMarketUpdates, hydrateMarketQuotes } from '../market-data'
+import { TRADING_COLUMN_COUNT } from '../trading-table'
+import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
+import type { MarketFeedCommand, MarketFeedEvent } from '../market-feed-protocol'
+import type { MarketQuote } from '../market-data'
+import type { RendererMode, TableAdapter } from '../trading-table'
+
+export function createTradingBenchmarkController() {
+  const [workerReady, setWorkerReady] = createSignal(false)
+  const [running, setRunning] = createSignal(true)
+  const [tableAdapter, setTableAdapter] = createSignal<TableAdapter>('local')
+  const [instrumentCount, setInstrumentCount] = createSignal(250)
+  const [feedLoadProfile, setFeedLoadProfile] =
+    createSignal<FeedLoadProfile>('high')
+  const [targetEventsPerSecond, setTargetEventsPerSecond] = createSignal(10_000)
+  const [rowWorkloadMode, setRowWorkloadMode] =
+    createSignal<RowWorkloadMode>('stable')
+  const [rowWorkloadEpoch, setRowWorkloadEpoch] = createSignal(0)
+  const [rendererMode, setRendererMode] = createSignal<RendererMode>('stable')
+  const [updateSparklines, setUpdateSparklines] = createSignal(true)
+  const [updateQuoteAges, setUpdateQuoteAges] = createSignal(true)
+  const [quoteClock, setQuoteClock] = createSignal(Date.now())
+  const [quotes, setQuotes] = createSignal<Array<MarketQuote>>([])
+  const [selectedSymbol, setSelectedSymbol] = createSignal<string | null>(null)
+  const [metrics, setMetrics] = createSignal(initialMetrics)
+  const monitor = new BenchmarkMonitor()
+  const runtime = {
+    worker: null as Worker | null,
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    feedGeneration: 0,
+    lastAgeClockAt: performance.now(),
+    lastRowWorkloadAt: performance.now(),
+  }
+
+  const postToWorker = (command: MarketFeedCommand) =>
+    runtime.worker?.postMessage(command)
+
+  createEffect(() => {
+    quotes()
+    quoteClock()
+    monitor.recordCompletedRender(postToWorker)
+  })
+
+  createEffect(() => {
+    tableAdapter()
+    const tableBody = document.querySelector(
+      '.market-panel [data-table-adapter] tbody',
+    )
+    if (!tableBody) {
+      return
+    }
+
+    monitor.resetDomMutations()
+    const observer = new MutationObserver((records) => {
+      monitor.recordDomMutations(records.length)
+    })
+    observer.observe(tableBody, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+    onCleanup(() => observer.disconnect())
+  })
+
+  const handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'ready') {
+      runtime.feedGeneration = data.generation
+      monitor.setPendingAck(null)
+      monitor.markRenderPending()
+      setQuotes(hydrateMarketQuotes(data.quotes))
+      setWorkerReady(true)
+      return
+    }
+
+    if (data.generation !== runtime.feedGeneration) {
+      postToWorker({
+        type: 'ack',
+        generation: data.generation,
+        sequence: data.sequence,
+      })
+      return
+    }
+
+    monitor.markRenderPending()
+    setQuotes((currentQuotes) =>
+      applyMarketUpdates(currentQuotes, data.updates),
+    )
+    monitor.recordBatch(data.eventCount, data.updates.length)
+    monitor.setPendingAck({
+      generation: data.generation,
+      sequence: data.sequence,
+    })
+  }
+
+  const handleWorkerError = (error: ErrorEvent): void => {
+    setWorkerReady(false)
+    setRunning(false)
+    console.error('Market feed worker failed', error)
+  }
+
+  const feedFrame = (now: number): void => {
+    monitor.recordAnimationFrame()
+
+    if (updateQuoteAges() && now - runtime.lastAgeClockAt >= 100) {
+      monitor.markRenderPending()
+      runtime.lastAgeClockAt = now
+      setQuoteClock(Date.now())
+    }
+
+    if (
+      running() &&
+      (rowWorkloadMode() === 'rotating-filter' ||
+        rowWorkloadMode() === 'identity-churn') &&
+      now - runtime.lastRowWorkloadAt >= 1_000
+    ) {
+      monitor.markRenderPending()
+      runtime.lastRowWorkloadAt = now
+      setRowWorkloadEpoch((epoch) => epoch + 1)
+    }
+
+    if (monitor.shouldPublish(now)) {
+      setMetrics(monitor.publish(now))
+    }
+
+    runtime.animationFrameId = requestAnimationFrame(feedFrame)
+  }
+
+  onMount(() => {
+    runtime.worker = new Worker(
+      new URL('../market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    runtime.worker.addEventListener('message', handleWorkerMessage)
+    runtime.worker.addEventListener('error', handleWorkerError)
+
+    if (longAnimationFramesSupported) {
+      runtime.longAnimationFrameObserver = new PerformanceObserver((entries) => {
+        for (const entry of entries.getEntries()) {
+          monitor.recordLongAnimationFrame(entry.duration)
+        }
+      })
+      runtime.longAnimationFrameObserver.observe({
+        type: 'long-animation-frame',
+        buffered: true,
+      })
+    }
+
+    postToWorker({
+      type: 'initialize',
+      rowCount: instrumentCount(),
+      seed: 42 + instrumentCount(),
+      running: running(),
+      targetEventsPerSecond: targetEventsPerSecond(),
+      updateSparklines: updateSparklines(),
+    })
+    runtime.animationFrameId = requestAnimationFrame(feedFrame)
+  })
+
+  onCleanup(() => {
+    cancelAnimationFrame(runtime.animationFrameId)
+    runtime.longAnimationFrameObserver?.disconnect()
+    runtime.worker?.terminate()
+    runtime.worker = null
+  })
+
+  const resetWorkerMarket = (rowCount: number): void => {
+    setWorkerReady(false)
+    monitor.setPendingAck(null)
+    postToWorker({
+      type: 'reset',
+      rowCount,
+      seed: 42 + rowCount,
+    })
+  }
+
+  const actions = {
+    toggleFeed(): void {
+      const nextRunning = !running()
+      setRunning(nextRunning)
+      postToWorker({ type: 'configure', running: nextRunning })
+    },
+    setInstrumentCount(count: number): void {
+      setInstrumentCount(count)
+      setRowWorkloadEpoch(0)
+      resetWorkerMarket(count)
+    },
+    setFeedLoadProfile(profile: FeedLoadProfile): void {
+      setFeedLoadProfile(profile)
+      if (profile === 'custom') {
+        return
+      }
+      const rate = feedLoadRates[profile]
+      setTargetEventsPerSecond(rate)
+      postToWorker({ type: 'configure', targetEventsPerSecond: rate })
+    },
+    setTargetEventsPerSecond(rate: number): void {
+      setFeedLoadProfile('custom')
+      setTargetEventsPerSecond(rate)
+      postToWorker({ type: 'configure', targetEventsPerSecond: rate })
+    },
+    setRowWorkloadMode(mode: RowWorkloadMode): void {
+      setRowWorkloadMode(mode)
+      setRowWorkloadEpoch(0)
+      runtime.lastRowWorkloadAt = performance.now()
+      setSelectedSymbol(null)
+    },
+    setTableAdapter,
+    setRendererMode,
+    setUpdateQuoteAges,
+    setUpdateSparklines(enabled: boolean): void {
+      setUpdateSparklines(enabled)
+      postToWorker({ type: 'configure', updateSparklines: enabled })
+    },
+    selectSymbol: setSelectedSymbol,
+    runBurst(): void {
+      postToWorker({ type: 'burst', eventCount: 25_000 })
+    },
+    resetMarket(): void {
+      setSelectedSymbol(null)
+      monitor.reset()
+      runtime.lastRowWorkloadAt = performance.now()
+      setRowWorkloadEpoch(0)
+      setQuoteClock(Date.now())
+      setMetrics({ ...initialMetrics })
+      resetWorkerMarket(instrumentCount())
+    },
+  }
+
+  const displayQuotes = createMemo(() =>
+    deriveBenchmarkQuotes(quotes(), rowWorkloadMode(), rowWorkloadEpoch()),
+  )
+  const selectedQuote = createMemo(
+    () =>
+      displayQuotes().find((quote) => quote.symbol === selectedSymbol()) ??
+      null,
+  )
+  const mountedCells = createMemo(
+    () => displayQuotes().length * TRADING_COLUMN_COUNT,
+  )
+  const liveComponents = createMemo(
+    () => metrics().componentsCreated - metrics().componentsDestroyed,
+  )
+  const adapterLabel = createMemo(() =>
+    tableAdapter() === 'local' ? 'LOCAL V9' : 'V8.21.3',
+  )
+  const workloadLabel = createMemo(() =>
+    rowWorkloadLabel(rowWorkloadMode()),
+  )
+
+  return {
+    state: {
+      workerReady,
+      running,
+      tableAdapter,
+      instrumentCount,
+      feedLoadProfile,
+      targetEventsPerSecond,
+      rowWorkloadMode,
+      rendererMode,
+      updateSparklines,
+      updateQuoteAges,
+      quoteClock,
+      quotes,
+      selectedSymbol,
+      metrics,
+      displayQuotes,
+      selectedQuote,
+      mountedCells,
+      liveComponents,
+      adapterLabel,
+      workloadLabel,
+    },
+    actions,
+  }
+}
+
+export type TradingBenchmarkController = ReturnType<
+  typeof createTradingBenchmarkController
+>
diff --git a/examples/solid/realtime-trading/src/index.css b/examples/solid/realtime-trading/src/index.css
new file mode 100644
index 0000000000..31c314c951
--- /dev/null
+++ b/examples/solid/realtime-trading/src/index.css
@@ -0,0 +1,722 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-synthesis: none;
+  --background: #090c11;
+  --panel: #10151c;
+  --panel-raised: #151b24;
+  --panel-hover: #19212b;
+  --border: #28313d;
+  --border-soft: #1d2530;
+  --text: #d7dde5;
+  --text-strong: #f1f4f8;
+  --muted: #7f8a98;
+  --blue: #4f8cff;
+  --blue-soft: #8cb5ff;
+  --green: #42c98a;
+  --red: #ef6a78;
+  --amber: #e8b95f;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid #394452;
+  border-radius: 2px;
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: #1c2530;
+  border-color: #536171;
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  min-height: 640px;
+  overflow: hidden;
+  background: var(--background);
+}
+
+.app-bar {
+  display: flex;
+  flex: 0 0 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  background: #0d1117;
+  border-bottom: 1px solid var(--border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.session-info,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.brand-mark {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  color: #fff;
+  background: var(--blue);
+  font-size: 0.62rem;
+  font-weight: 800;
+}
+
+.environment {
+  padding: 0.16rem 0.3rem;
+  color: var(--amber);
+  background: rgb(232 185 95 / 8%);
+  border: 1px solid rgb(232 185 95 / 40%);
+  font-size: 0.58rem;
+}
+
+.session-info {
+  gap: 1rem;
+  color: var(--muted);
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: #9aa4b1;
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: #66717d;
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: #e9c67e;
+  background: #211b11;
+  border-bottom: 1px solid #4a3d25;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.workspace {
+  display: grid;
+  flex: 1;
+  grid-template-columns: minmax(0, 1fr) 288px;
+  min-height: 0;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+}
+
+.market-toolbar {
+  display: flex;
+  flex: 0 0 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  background: #11171f;
+  border-bottom: 1px solid var(--border);
+}
+
+.watchlist-name {
+  display: flex;
+  gap: 0.6rem;
+  align-items: baseline;
+  font-size: 0.67rem;
+}
+
+.watchlist-name span {
+  color: var(--muted);
+}
+
+.watchlist-name strong {
+  color: var(--text-strong);
+  font-size: 0.72rem;
+  letter-spacing: 0.035em;
+}
+
+.market-context {
+  display: flex;
+  gap: 1rem;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6rem;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 64px;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.55rem 0.65rem;
+  background: #0e131a;
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.22rem 0 0.12rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: #0d1218;
+}
+
+app-current-trading-table,
+app-v8-trading-table {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: 28px;
+  padding: 0 0.6rem;
+  color: #8e99a6;
+  background: #171e27;
+  border-right: 1px solid #222b36;
+  border-bottom: 1px solid #394452;
+  font-size: 0.58rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+td {
+  height: 27px;
+  padding: 0 0.6rem;
+  overflow: hidden;
+  color: #cbd2db;
+  border-right: 1px solid #1a222c;
+  border-bottom: 1px solid #1b232d;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+.numeric-cell {
+  text-align: right;
+}
+
+tbody tr:nth-child(even) {
+  background: rgb(255 255 255 / 1.3%);
+}
+
+tbody tr:hover {
+  background: #17202a;
+}
+
+tbody tr.is-selected {
+  background: rgb(79 140 255 / 13%);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: inline-block;
+  min-width: 4.8rem;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: #cbd2db;
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+app-depth-cell {
+  display: block;
+  width: 100%;
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: #151b23;
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.28;
+}
+
+.depth-bid {
+  background: var(--blue);
+  border-right: 1px solid #10151c;
+}
+
+.depth-ask {
+  background: var(--red);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: #dce2e9;
+  font-size: 0.57rem;
+  text-shadow: 0 1px #080b0f;
+}
+
+.quote-age {
+  color: #aab3bf;
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 8rem;
+  height: 1.2rem;
+  margin-left: auto;
+  overflow: visible;
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: var(--blue-soft);
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 25px;
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: #0d1117;
+  border-top: 1px solid var(--border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.56rem;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: #c4ccd6;
+  font-weight: 500;
+}
+
+.statusbar-spacer {
+  flex: 1;
+}
+
+.configurator {
+  min-height: 0;
+  overflow: auto;
+  background: #0d1218;
+}
+
+.configurator > header {
+  display: flex;
+  height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem;
+  color: var(--text-strong);
+  background: #11171f;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: #8e99a6;
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: #fff;
+  background: #316fdd;
+  border-color: #4f8cff;
+}
+
+.primary-action:hover {
+  background: #397bed;
+  border-color: #73a2ff;
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: #9ba5b1;
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-weight: 500;
+}
+
+.field small {
+  color: #66717e;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: #b8c0ca;
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: #687482;
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: #d4dae2;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  .workspace {
+    grid-template-columns: minmax(0, 1fr) 250px;
+  }
+
+  .market-context span:not(:first-child) {
+    display: none;
+  }
+
+  .metrics-strip {
+    grid-template-columns: repeat(3, 1fr);
+    flex-basis: 166px;
+  }
+}
+
+@media (max-width: 720px) {
+  html,
+  body {
+    min-height: 100%;
+  }
+
+  body {
+    overflow: auto;
+  }
+
+  .trading-terminal {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  .session-info > span:first-child {
+    display: none;
+  }
+
+  .workspace {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .market-panel {
+    min-height: 68vh;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .metrics-strip {
+    grid-template-columns: repeat(2, 1fr);
+    flex-basis: 220px;
+  }
+
+  .table-scroll {
+    height: 58vh;
+    flex: none;
+  }
+
+  .market-context {
+    display: none;
+  }
+
+  .configurator {
+    overflow: visible;
+  }
+}
diff --git a/examples/solid/realtime-trading/src/index.tsx b/examples/solid/realtime-trading/src/index.tsx
new file mode 100644
index 0000000000..3b0ef7f19f
--- /dev/null
+++ b/examples/solid/realtime-trading/src/index.tsx
@@ -0,0 +1,8 @@
+import { render } from 'solid-js/web'
+import App from './App'
+import './index.css'
+
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Failed to find the root element')
+
+render(() => <App />, rootElement)
diff --git a/examples/solid/realtime-trading/src/market-data.ts b/examples/solid/realtime-trading/src/market-data.ts
new file mode 100644
index 0000000000..02eefa28c3
--- /dev/null
+++ b/examples/solid/realtime-trading/src/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/solid/realtime-trading/src/market-feed-engine.ts b/examples/solid/realtime-trading/src/market-feed-engine.ts
new file mode 100644
index 0000000000..da91131351
--- /dev/null
+++ b/examples/solid/realtime-trading/src/market-feed-engine.ts
@@ -0,0 +1,169 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const baseInstruments = [
+  ['ALP', 'Alpine Systems', 'XNAS'],
+  ['ARC', 'Arcadia Cloud', 'XNYS'],
+  ['BLU', 'Blue River Energy', 'BATS'],
+  ['CRN', 'Crown Robotics', 'XNAS'],
+  ['DYN', 'Dynasty Networks', 'XNYS'],
+  ['ECO', 'Ecoframe Materials', 'IEX'],
+  ['FLX', 'Flux Semiconductors', 'XNAS'],
+  ['GEO', 'Geode Analytics', 'BATS'],
+  ['HLX', 'Helix Biotech', 'XNYS'],
+  ['ION', 'Ion Mobility', 'IEX'],
+  ['JDE', 'Jade Financial', 'XNYS'],
+  ['KNT', 'Kinetic Aerospace', 'XNAS'],
+] as const
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #historyTick = 0
+  #eventIndex = 0
+
+  reset(count: number, seed: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(seed)
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, venue] =
+        baseInstruments[index % baseInstruments.length]
+      const series = Math.floor(index / baseInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const open = roundPrice(20 + random() * 480)
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue,
+        open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: Date.now(),
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(2_026 + seed)
+    this.#rowCursor = 0
+    this.#historyTick = 0
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyEvents(
+    eventCount: number,
+    updateSparklines: boolean,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || eventCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#eventIndex = 0
+    while (this.#eventIndex < eventCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines && this.#historyTick++ % 4 === 0
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#eventIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
+    const secondMix =
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/solid/realtime-trading/src/market-feed-protocol.ts b/examples/solid/realtime-trading/src/market-feed-protocol.ts
new file mode 100644
index 0000000000..0a8b9925f5
--- /dev/null
+++ b/examples/solid/realtime-trading/src/market-feed-protocol.ts
@@ -0,0 +1,66 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  open: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'initialize'
+      rowCount: number
+      seed: number
+      running: boolean
+      targetEventsPerSecond: number
+      updateSparklines: boolean
+    }
+  | {
+      type: 'configure'
+      running?: boolean
+      targetEventsPerSecond?: number
+      updateSparklines?: boolean
+    }
+  | { type: 'reset'; rowCount: number; seed: number }
+  | { type: 'burst'; eventCount: number }
+  | { type: 'ack'; generation: number; sequence: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'ready'
+      generation: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'batch'
+      generation: number
+      sequence: number
+      eventCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/solid/realtime-trading/src/market-feed.worker.ts b/examples/solid/realtime-trading/src/market-feed.worker.ts
new file mode 100644
index 0000000000..7ce6313798
--- /dev/null
+++ b/examples/solid/realtime-trading/src/market-feed.worker.ts
@@ -0,0 +1,133 @@
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+
+const runtime = {
+  generation: 0,
+  sequence: 0,
+  inFlightSequence: null as number | null,
+  pendingEventCount: 0,
+  initialized: false,
+  running: true,
+  targetEventsPerSecond: 10_000,
+  updateSparklines: true,
+  eventBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'initialize':
+      runtime.running = data.running
+      runtime.targetEventsPerSecond = data.targetEventsPerSecond
+      runtime.updateSparklines = data.updateSparklines
+      reset(data.rowCount, data.seed)
+      break
+    case 'configure':
+      runtime.running = data.running ?? runtime.running
+      runtime.targetEventsPerSecond =
+        data.targetEventsPerSecond ?? runtime.targetEventsPerSecond
+      runtime.updateSparklines =
+        data.updateSparklines ?? runtime.updateSparklines
+      break
+    case 'reset':
+      reset(data.rowCount, data.seed)
+      break
+    case 'burst':
+      produceEvents(data.eventCount)
+      flush()
+      break
+    case 'ack':
+      if (
+        data.generation === runtime.generation &&
+        data.sequence === runtime.inFlightSequence
+      ) {
+        runtime.inFlightSequence = null
+        flush()
+      }
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.eventBudget +=
+      (runtime.targetEventsPerSecond * elapsed) / 1_000
+    const eventCount = Math.floor(runtime.eventBudget)
+    runtime.eventBudget -= eventCount
+    produceEvents(eventCount)
+  }
+
+  flush()
+}, 16)
+
+function reset(rowCount: number, seed: number): void {
+  runtime.initialized = true
+  runtime.generation++
+  runtime.sequence = 0
+  runtime.inFlightSequence = null
+  runtime.pendingEventCount = 0
+  pendingUpdates.clear()
+  runtime.eventBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'ready',
+    generation: runtime.generation,
+    quotes: engine.reset(rowCount, seed),
+  })
+}
+
+function produceEvents(eventCount: number): void {
+  if (!runtime.initialized || eventCount <= 0) return
+
+  runtime.pendingEventCount += eventCount
+  for (const update of engine.applyEvents(
+    eventCount,
+    runtime.updateSparklines,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (
+    runtime.inFlightSequence !== null ||
+    runtime.pendingEventCount === 0
+  )
+    return
+
+  const nextSequence = ++runtime.sequence
+  const message: MarketFeedEvent = {
+    type: 'batch',
+    generation: runtime.generation,
+    sequence: nextSequence,
+    eventCount: runtime.pendingEventCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingEventCount = 0
+  pendingUpdates.clear()
+  runtime.inFlightSequence = nextSequence
+  post(message)
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/solid/realtime-trading/src/quote-cells.tsx b/examples/solid/realtime-trading/src/quote-cells.tsx
new file mode 100644
index 0000000000..f797042441
--- /dev/null
+++ b/examples/solid/realtime-trading/src/quote-cells.tsx
@@ -0,0 +1,201 @@
+import { onCleanup, onMount } from 'solid-js'
+
+const compactNumber = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export const quoteCellLifecycle = {
+  created: 0,
+  destroyed: 0,
+}
+
+export const quoteCellRendererNames = [
+  'Ticker',
+  'Venue',
+  'Bid',
+  'Ask',
+  'Spread',
+  'Last',
+  'LastMove',
+  'LastQty',
+  'Depth',
+  'QuoteAge',
+  'DayChange',
+  'TotalQty',
+  'TradedValue',
+  'Intraday',
+] as const
+
+export const quoteComponentNames = [
+  'PriceCell',
+  'StableMoveCell',
+  'UpMoveCell',
+  'DownMoveCell',
+  'SpreadCell',
+  'DepthCell',
+  'QuoteAgeCell',
+  'SparklineCell',
+] as const
+
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+
+const createCounterMap = <Name extends string>(
+  names: ReadonlyArray<Name>,
+): Record<Name, number> =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
+  cellRendererCallsByName: createCounterMap(quoteCellRendererNames),
+  componentRenderCallsByName: createCounterMap(quoteComponentNames),
+}
+
+export function recordCellRender<T>(
+  name: QuoteCellRendererName,
+  value: () => T,
+): T {
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value()
+}
+
+function trackLifecycle(componentName: QuoteComponentName): void {
+  quoteRenderDiagnostics.componentRenderCalls++
+  quoteRenderDiagnostics.componentRenderCallsByName[componentName]++
+  onMount(() => {
+    quoteCellLifecycle.created++
+  })
+  onCleanup(() => {
+    quoteCellLifecycle.destroyed++
+  })
+}
+
+export function PriceCell(props: {
+  price: number
+  move: number
+  onSelect: () => void
+}) {
+  trackLifecycle('PriceCell')
+  return (
+    <button
+      class="price-button"
+      classList={{
+        'quote-up': props.move >= 0,
+        'quote-down': props.move < 0,
+      }}
+      onClick={props.onSelect}
+    >
+      {props.price.toFixed(2)}
+    </button>
+  )
+}
+
+export function StableMoveCell(props: { move: number }) {
+  trackLifecycle('StableMoveCell')
+  return (
+    <span
+      class="move-cell"
+      classList={{
+        'quote-up': props.move >= 0,
+        'quote-down': props.move < 0,
+      }}
+    >
+      {formatSigned(props.move)}
+    </span>
+  )
+}
+
+export function UpMoveCell(props: { move: number }) {
+  trackLifecycle('UpMoveCell')
+  return <span class="move-cell quote-up">▲ {formatSigned(props.move)}</span>
+}
+
+export function DownMoveCell(props: { move: number }) {
+  trackLifecycle('DownMoveCell')
+  return <span class="move-cell quote-down">▼ {formatSigned(props.move)}</span>
+}
+
+export function SpreadCell(props: { bid: number; ask: number }) {
+  trackLifecycle('SpreadCell')
+  const spread = () => Math.max(0, props.ask - props.bid)
+  const basisPoints = () => {
+    const midpoint = (props.bid + props.ask) / 2
+    return midpoint === 0 ? 0 : (spread() / midpoint) * 10_000
+  }
+
+  return (
+    <span class="spread-cell" classList={{ 'spread-wide': basisPoints() >= 4 }}>
+      {spread().toFixed(2)}
+      <small>{basisPoints().toFixed(1)} bp</small>
+    </span>
+  )
+}
+
+export function DepthCell(props: { bidSize: number; askSize: number }) {
+  trackLifecycle('DepthCell')
+  const bidShare = () => {
+    const total = props.bidSize + props.askSize
+    return total === 0 ? 50 : (props.bidSize / total) * 100
+  }
+
+  return (
+    <div
+      class="depth-cell"
+      title={`Bid ${props.bidSize} / Ask ${props.askSize}`}
+    >
+      <span class="depth-bid" style={{ width: `${bidShare()}%` }} />
+      <span class="depth-ask" style={{ width: `${100 - bidShare()}%` }} />
+      <span class="depth-values">
+        <span>{compactNumber.format(props.bidSize)}</span>
+        <span>{compactNumber.format(props.askSize)}</span>
+      </span>
+    </div>
+  )
+}
+
+export function QuoteAgeCell(props: { ageMs: number }) {
+  trackLifecycle('QuoteAgeCell')
+  return (
+    <span
+      class="quote-age"
+      classList={{
+        'quote-age-warm': props.ageMs >= 500,
+        'quote-age-stale': props.ageMs >= 1_500,
+      }}
+    >
+      {props.ageMs < 1_000
+        ? `${Math.round(props.ageMs)} ms`
+        : `${(props.ageMs / 1_000).toFixed(1)} s`}
+    </span>
+  )
+}
+
+export function SparklineCell(props: { values: ReadonlyArray<number> }) {
+  trackLifecycle('SparklineCell')
+  const points = () => {
+    const min = Math.min(...props.values)
+    const max = Math.max(...props.values)
+    const range = max - min || 1
+    const denominator = Math.max(1, props.values.length - 1)
+    return props.values
+      .map((value, index) => {
+        const x = (index / denominator) * 100
+        const y = 22 - ((value - min) / range) * 20
+        return `${x.toFixed(1)},${y.toFixed(1)}`
+      })
+      .join(' ')
+  }
+
+  return (
+    <svg class="sparkline" viewBox="0 0 100 24" preserveAspectRatio="none">
+      <polyline points={points()} />
+    </svg>
+  )
+}
+
+function formatSigned(value: number): string {
+  return `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+}
diff --git a/examples/solid/realtime-trading/src/shell/TradingShell.tsx b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
new file mode 100644
index 0000000000..c312b11b4b
--- /dev/null
+++ b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
@@ -0,0 +1,574 @@
+import { Show } from 'solid-js'
+import { longAnimationFramesSupported } from '../benchmark/benchmark-monitor'
+import { useTradingShellController } from './trading-shell-context'
+import type { JSX } from 'solid-js'
+import type { FeedMetrics } from '../benchmark/benchmark-monitor'
+import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
+import type { TableAdapter } from '../trading-table'
+
+const integerFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 0,
+})
+const rateFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+export function TradingShell(props: { children: JSX.Element }) {
+  return (
+    <main class="trading-terminal">
+      <AppHeader />
+
+      <Show when={import.meta.env.DEV}>
+        <aside class="development-warning">
+          DEV BUILD — use the production configuration before recording results.
+        </aside>
+      </Show>
+
+      <div class="workspace">
+        <section class="market-panel" aria-label="Live synthetic quotes">
+          <MarketToolbar />
+          <MetricsStrip />
+          {props.children}
+          <MarketStatusbar />
+        </section>
+        <Configurator />
+      </div>
+    </main>
+  )
+}
+
+function AppHeader() {
+  const { workerReady, running } = useTradingShellController().state
+  return (
+    <header class="app-bar">
+      <div class="brand">
+        <span class="brand-mark">TT</span>
+        <strong>MARKET MONITOR</strong>
+        <span class="environment">SIMULATED</span>
+      </div>
+      <div class="session-info">
+        <span>SOLID / FLEX RENDER</span>
+        <span
+          class="feed-status"
+          classList={{ 'is-running': workerReady() && running() }}
+          data-testid="feed-status"
+        >
+          <span class="status-dot" aria-hidden="true" />
+          {!workerReady()
+            ? 'FEED CONNECTING'
+            : running()
+              ? 'FEED LIVE'
+              : 'FEED PAUSED'}
+        </span>
+      </div>
+    </header>
+  )
+}
+
+function MarketToolbar() {
+  const {
+    rendererMode,
+    updateSparklines,
+    updateQuoteAges,
+    quotes,
+    displayQuotes,
+    adapterLabel,
+    workloadLabel,
+  } = useTradingShellController().state
+  return (
+    <header class="market-toolbar">
+      <div class="watchlist-name">
+        <span>WATCHLIST</span>
+        <strong>ALL INSTRUMENTS</strong>
+      </div>
+      <div class="market-context">
+        <span>
+          {formatInteger(displayQuotes().length)} /{' '}
+          {formatInteger(quotes().length)} SYMBOLS
+        </span>
+        <span>SOLID {adapterLabel()}</span>
+        <span>WORKER STREAM</span>
+        <span>IMMUTABLE ROWS</span>
+        <span>{workloadLabel()}</span>
+        <span>
+          {rendererMode() === 'stable' ? 'STABLE CELLS' : 'A/B CELL SWAP'}
+        </span>
+        <span>{updateSparklines() ? 'CHARTS ON' : 'CHARTS OFF'}</span>
+        <span>{updateQuoteAges() ? 'AGE CLOCK ON' : 'AGE CLOCK OFF'}</span>
+      </div>
+    </header>
+  )
+}
+
+function MarketStatusbar() {
+  const { metrics, mountedCells, liveComponents } =
+    useTradingShellController().state
+  return (
+    <footer class="market-statusbar">
+      <span>
+        BATCH EVENTS <strong>{formatInteger(metrics().lastBatchSize)}</strong>
+      </span>
+      <span>
+        ROW UPDATES <strong>{formatInteger(metrics().lastUpdateCount)}</strong>
+      </span>
+      <span>
+        HOSTS <strong>{formatInteger(mountedCells())}</strong>
+      </span>
+      <span>
+        COMPONENTS <strong>{formatInteger(liveComponents())}</strong>
+      </span>
+      <span class="statusbar-spacer" />
+      <span>WORKER / ACKNOWLEDGED / IMMUTABLE</span>
+    </footer>
+  )
+}
+
+function Configurator() {
+  const { state, actions } = useTradingShellController()
+  const {
+    running,
+    tableAdapter,
+    instrumentCount,
+    feedLoadProfile,
+    targetEventsPerSecond,
+    rowWorkloadMode,
+    rendererMode,
+    updateSparklines,
+    updateQuoteAges,
+    metrics,
+    selectedQuote,
+    mountedCells,
+    liveComponents,
+  } = state
+  const {
+    toggleFeed,
+    setInstrumentCount,
+    setFeedLoadProfile,
+    setTargetEventsPerSecond,
+    setRowWorkloadMode,
+    setTableAdapter,
+    setRendererMode,
+    setUpdateSparklines,
+    setUpdateQuoteAges,
+    runBurst,
+    resetMarket,
+  } = actions
+  return (
+    <aside class="configurator" aria-label="Benchmark configurator">
+          <header>
+            <span>CONFIGURATOR</span>
+            <small>RUN PARAMETERS</small>
+          </header>
+
+          <section class="config-section" aria-labelledby="solid-adapter">
+            <h2 id="solid-adapter">TABLE ADAPTER</h2>
+            <label class="field">
+              <span>Implementation</span>
+              <select
+                data-testid="adapter-select"
+                value={tableAdapter()}
+                onChange={(event) =>
+                  setTableAdapter(event.currentTarget.value as TableAdapter)
+                }
+              >
+                <option value="local">Solid Table local v9</option>
+                <option value="v8">Solid Table 8.21.3</option>
+              </select>
+              <small>Switching disposes one adapter and mounts the next.</small>
+            </label>
+          </section>
+
+          <section class="config-section" aria-labelledby="feed-settings">
+            <h2 id="feed-settings">FEED</h2>
+            <button
+              class="primary-action"
+              type="button"
+              data-testid="feed-toggle"
+              onClick={toggleFeed}
+            >
+              {running() ? 'PAUSE FEED' : 'START FEED'}
+            </button>
+
+            <label class="field">
+              <span>Instruments</span>
+              <select
+                data-testid="instrument-count-select"
+                value={instrumentCount()}
+                onChange={(event) =>
+                  setInstrumentCount(Number(event.currentTarget.value))
+                }
+              >
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="150">150</option>
+                <option value="250">250</option>
+                <option value="350">350</option>
+                <option value="500">500</option>
+                <option value="750">750</option>
+                <option value="1000">1,000</option>
+              </select>
+            </label>
+
+            <label class="field">
+              <span>Load profile</span>
+              <select
+                data-testid="load-profile-select"
+                value={feedLoadProfile()}
+                onChange={(event) =>
+                  setFeedLoadProfile(
+                    event.currentTarget.value as FeedLoadProfile,
+                  )
+                }
+              >
+                <option value="low">Low · 1K/s</option>
+                <option value="medium">Medium · 5K/s</option>
+                <option value="high">High · 10K/s</option>
+                <option value="very-high">Very high · 25K/s</option>
+                <option value="max">Max · 100K/s</option>
+                <option value="custom">Custom</option>
+              </select>
+              <small>
+                High is the repeatable default; Max is intentionally saturating.
+              </small>
+            </label>
+
+            <label class="field rate-field">
+              <span>
+                Target event rate
+                <strong>{formatRate(targetEventsPerSecond())}/s</strong>
+              </span>
+              <input
+                data-testid="target-rate-slider"
+                type="range"
+                min="100"
+                max="100000"
+                step="100"
+                value={targetEventsPerSecond()}
+                onInput={(event) =>
+                  setTargetEventsPerSecond(
+                    Number(event.currentTarget.value),
+                  )
+                }
+              />
+              <small>100 — 100,000 events/s</small>
+            </label>
+          </section>
+
+          <section class="config-section" aria-labelledby="render-settings">
+            <h2 id="render-settings">RENDER PATH</h2>
+            <label class="field">
+              <span>Row workload</span>
+              <select
+                data-testid="row-workload-select"
+                value={rowWorkloadMode()}
+                onChange={(event) =>
+                  setRowWorkloadMode(
+                    event.currentTarget.value as RowWorkloadMode,
+                  )
+                }
+              >
+                <option value="stable">Stable universe</option>
+                <option value="price-sort">Continuously sort by Last</option>
+                <option value="rotating-filter">
+                  Rotate 20% filtered rows
+                </option>
+                <option value="identity-churn">
+                  Replace 10% of ticker IDs
+                </option>
+              </select>
+              <small>
+                Reorder preserves IDs; filter removes/reinserts rows;
+                replacement forces new row identities.
+              </small>
+            </label>
+
+            <label class="toggle-field">
+              <input
+                type="checkbox"
+                checked={rendererMode() === 'swap'}
+                onChange={(event) =>
+                  setRendererMode(
+                    event.currentTarget.checked ? 'swap' : 'stable',
+                  )
+                }
+              />
+              <span>
+                Swap Tick component A ↔ B
+                <small>destroy and recreate when direction changes</small>
+              </span>
+            </label>
+
+            <label class="toggle-field">
+              <input
+                type="checkbox"
+                checked={updateSparklines()}
+                onChange={(event) =>
+                  setUpdateSparklines(event.currentTarget.checked)
+                }
+              />
+              <span>
+                Update sparklines
+                <small>new history input every four quote events</small>
+              </span>
+            </label>
+
+            <label class="toggle-field">
+              <input
+                type="checkbox"
+                checked={updateQuoteAges()}
+                onChange={(event) =>
+                  setUpdateQuoteAges(event.currentTarget.checked)
+                }
+              />
+              <span>
+                Update quote age clock
+                <small>
+                  invalidates every Age cell on a shared 100 ms clock
+                </small>
+              </span>
+            </label>
+          </section>
+
+          <section class="config-section" aria-labelledby="stress-actions">
+            <h2 id="stress-actions">STRESS ACTIONS</h2>
+            <div class="action-grid">
+              <button type="button" onClick={runBurst}>
+                RUN 25K BURST
+              </button>
+              <button type="button" onClick={resetMarket}>
+                RESET SESSION
+              </button>
+            </div>
+          </section>
+
+          <Diagnostics
+            metrics={metrics()}
+            mountedCells={mountedCells()}
+            liveComponents={liveComponents()}
+          />
+
+          <section class="config-section selected-instrument">
+            <h2>SELECTED INSTRUMENT</h2>
+            <Show
+              when={selectedQuote()}
+              fallback={
+                <p>Click a value in the Last column to inspect its output.</p>
+              }
+            >
+              {(quote) => (
+                <>
+                  <div class="selection">
+                    <div>
+                      <strong>{quote().symbol}</strong>
+                      <span>{quote().company}</span>
+                    </div>
+                    <small>{quote().venue}</small>
+                  </div>
+                  <dl>
+                    <div>
+                      <dt>Last</dt>
+                      <dd>{quote().price.toFixed(2)}</dd>
+                    </div>
+                    <div>
+                      <dt>Bid / ask</dt>
+                      <dd>
+                        {quote().bid.toFixed(2)} / {quote().ask.toFixed(2)}
+                      </dd>
+                    </div>
+                  </dl>
+                </>
+              )}
+            </Show>
+          </section>
+    </aside>
+  )
+}
+
+function MetricsStrip() {
+  const { metrics } = useTradingShellController().state
+  return (
+    <section class="metrics-strip" aria-label="Live performance metrics">
+      <article>
+        <span>THROUGHPUT</span>
+        <strong data-testid="actual-rate">
+          {formatRate(metrics().actualEventsPerSecond)}
+        </strong>
+        <small>events/s</small>
+      </article>
+      <article>
+        <span>RAF RATE</span>
+        <strong data-testid="raf-rate">
+          {metrics().rafCallbacksPerSecond.toFixed(1)}
+        </strong>
+        <small>callbacks/s</small>
+      </article>
+      <article>
+        <span>TABLE RENDERS</span>
+        <strong data-testid="table-render-rate">
+          {metrics().tableRendersPerSecond.toFixed(1)}
+        </strong>
+        <small>worker batches/s</small>
+      </article>
+      <article>
+        <span>AVG RENDER</span>
+        <strong>{formatMs(metrics().averageRenderMs)}</strong>
+        <small>mutation → render</small>
+      </article>
+      <article>
+        <span>P95 RENDER</span>
+        <strong>{formatMs(metrics().p95RenderMs)}</strong>
+        <small>max {formatMs(metrics().maxRenderMs)}</small>
+      </article>
+      <article>
+        <span>LONG FRAMES</span>
+        <Show
+          when={longAnimationFramesSupported}
+          fallback={
+            <>
+              <strong data-testid="long-frame-count">N/A</strong>
+              <small>unsupported</small>
+            </>
+          }
+        >
+          <strong
+            data-testid="long-frame-count"
+            classList={{
+              'metric-alert': metrics().longAnimationFrames > 0,
+            }}
+          >
+            {metrics().longAnimationFrames}
+          </strong>
+          <small>
+            worst {formatMs(metrics().worstLongAnimationFrameMs)}
+          </small>
+        </Show>
+      </article>
+      <article>
+        <span>TOTAL EVENTS</span>
+        <strong data-testid="total-events">
+          {formatInteger(metrics().totalEvents)}
+        </strong>
+        <small>since reset</small>
+      </article>
+    </section>
+  )
+}
+
+function Diagnostics(props: {
+  metrics: FeedMetrics
+  mountedCells: number
+  liveComponents: number
+}) {
+  return (
+    <section class="config-section diagnostics" aria-labelledby="diagnostics">
+      <h2 id="diagnostics">DIAGNOSTICS</h2>
+      <dl>
+        <div>
+          <dt>Mounted cells</dt>
+          <dd>{formatInteger(props.mountedCells)}</dd>
+        </div>
+        <div>
+          <dt>Live components</dt>
+          <dd>{formatInteger(props.liveComponents)}</dd>
+        </div>
+        <div>
+          <dt>Created / destroyed</dt>
+          <dd>
+            {formatInteger(props.metrics.componentsCreated)} /{' '}
+            {formatInteger(props.metrics.componentsDestroyed)}
+          </dd>
+        </div>
+        <div>
+          <dt>Cell renderer calls / s</dt>
+          <dd data-testid="cell-render-rate">
+            {formatRate(props.metrics.cellRendererCallsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Component function calls / s</dt>
+          <dd data-testid="component-render-rate">
+            {formatRate(props.metrics.componentRenderCallsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Component function calls by type / s</dt>
+          <dd data-testid="component-render-breakdown">
+            {formatInvocationRates(props.metrics.componentRenderRates)}
+          </dd>
+        </div>
+        <div>
+          <dt>Cell callbacks by column / s</dt>
+          <dd data-testid="cell-render-breakdown">
+            {formatInvocationRates(props.metrics.cellRendererRates)}
+          </dd>
+        </div>
+        <div>
+          <dt>DOM mutation records / s</dt>
+          <dd data-testid="dom-mutation-rate">
+            {formatRate(props.metrics.domMutationsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages</dt>
+          <dd data-testid="worker-messages">
+            {formatInteger(props.metrics.workerMessages)}
+          </dd>
+        </div>
+        <div>
+          <dt>Last batch events / rows</dt>
+          <dd>
+            {formatInteger(props.metrics.lastBatchSize)} /{' '}
+            {formatInteger(props.metrics.lastUpdateCount)}
+          </dd>
+        </div>
+        <div>
+          <dt>Renders &gt; 16.7 ms</dt>
+          <dd>{props.metrics.slowRenders}</dd>
+        </div>
+        <div>
+          <dt>Long animation frames</dt>
+          <dd>
+            {longAnimationFramesSupported
+              ? formatInteger(props.metrics.longAnimationFrames)
+              : 'Unsupported'}
+          </dd>
+        </div>
+        <div>
+          <dt>JS heap</dt>
+          <dd>
+            {props.metrics.heapMb === null
+              ? 'N/A'
+              : `${props.metrics.heapMb.toFixed(1)} MB`}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  )
+}
+
+function formatInteger(value: number): string {
+  return integerFormatter.format(value)
+}
+
+function formatRate(value: number): string {
+  return rateFormatter.format(value)
+}
+
+function formatMs(value: number): string {
+  return `${value.toFixed(2)} ms`
+}
+
+function formatInvocationRates(
+  rates: FeedMetrics['componentRenderRates'],
+): string {
+  const activeRates = rates
+    .filter((rate) => rate.callsPerSecond > 0)
+    .sort((left, right) => right.callsPerSecond - left.callsPerSecond)
+  return activeRates.length === 0
+    ? 'No calls in sample'
+    : activeRates
+        .map(
+          (rate) => `${rate.name} ${formatRate(rate.callsPerSecond)}`,
+        )
+        .join(' · ')
+}
diff --git a/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx b/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
new file mode 100644
index 0000000000..99b4794fdd
--- /dev/null
+++ b/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'solid-js'
+import type { JSX } from 'solid-js'
+import type { TradingBenchmarkController } from '../core/trading-benchmark-controller'
+
+const TradingShellContext = createContext<TradingBenchmarkController>()
+
+export function TradingShellProvider(props: {
+  controller: TradingBenchmarkController
+  children: JSX.Element
+}) {
+  return (
+    <TradingShellContext.Provider value={props.controller}>
+      {props.children}
+    </TradingShellContext.Provider>
+  )
+}
+
+export function useTradingShellController(): TradingBenchmarkController {
+  const controller = useContext(TradingShellContext)
+  if (!controller) {
+    throw new Error(
+      'Trading shell components must be rendered inside TradingShellProvider',
+    )
+  }
+  return controller
+}
diff --git a/examples/solid/realtime-trading/src/trading-table.tsx b/examples/solid/realtime-trading/src/trading-table.tsx
new file mode 100644
index 0000000000..dda337e88e
--- /dev/null
+++ b/examples/solid/realtime-trading/src/trading-table.tsx
@@ -0,0 +1,339 @@
+import {
+  createSolidTable,
+  flexRender as flexRenderV8,
+  getCoreRowModel,
+} from '@tanstack/solid-table-v8'
+import { FlexRender, createTable, stockFeatures } from '@tanstack/solid-table'
+import { For, Show } from 'solid-js'
+import {
+  DepthCell,
+  DownMoveCell,
+  PriceCell,
+  QuoteAgeCell,
+  SparklineCell,
+  SpreadCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells'
+import type { JSX } from 'solid-js'
+import type { MarketQuote } from './market-data'
+
+export type RendererMode = 'stable' | 'swap'
+export type TableAdapter = 'local' | 'v8'
+
+export interface TradingTableProps {
+  quotes: Array<MarketQuote>
+  rendererMode: RendererMode
+  updateQuoteAges: boolean
+  quoteClock: number
+  selectedSymbol: string | null
+  onSelectSymbol: (symbol: string) => void
+}
+
+interface TradingCellContext {
+  row: { original: MarketQuote }
+}
+
+interface TradingColumnDefinition {
+  id: string
+  header: string
+  size: number
+  cell: (context: TradingCellContext) => JSX.Element
+}
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+  style: 'currency',
+  currency: 'USD',
+})
+
+function createTradingColumns(
+  props: TradingTableProps,
+): Array<TradingColumnDefinition> {
+  return [
+    {
+      id: 'symbol',
+      header: 'Ticker',
+      size: 90,
+      cell: ({ row }) =>
+        recordCellRender('Ticker', () => row.original.symbol),
+    },
+    {
+      id: 'venue',
+      header: 'Venue',
+      size: 70,
+      cell: ({ row }) => recordCellRender('Venue', () => row.original.venue),
+    },
+    {
+      id: 'bid',
+      header: 'Bid',
+      size: 90,
+      cell: ({ row }) =>
+        recordCellRender('Bid', () => row.original.bid.toFixed(2)),
+    },
+    {
+      id: 'ask',
+      header: 'Ask',
+      size: 90,
+      cell: ({ row }) =>
+        recordCellRender('Ask', () => row.original.ask.toFixed(2)),
+    },
+    {
+      id: 'spread',
+      header: 'Spread',
+      size: 95,
+      cell: ({ row }) =>
+        recordCellRender('Spread', () => (
+          <SpreadCell bid={row.original.bid} ask={row.original.ask} />
+        )),
+    },
+    {
+      id: 'price',
+      header: 'Last',
+      size: 100,
+      cell: ({ row }) =>
+        recordCellRender('Last', () => (
+          <PriceCell
+            price={row.original.price}
+            move={row.original.lastMove}
+            onSelect={() => props.onSelectSymbol(row.original.symbol)}
+          />
+        )),
+    },
+    {
+      id: 'lastMove',
+      header: 'Last Move',
+      size: 105,
+      cell: ({ row }) =>
+        recordCellRender('LastMove', () => {
+          const move = row.original.lastMove
+          if (props.rendererMode === 'stable') {
+            return <StableMoveCell move={move} />
+          }
+          return move >= 0 ? (
+            <UpMoveCell move={move} />
+          ) : (
+            <DownMoveCell move={move} />
+          )
+        }),
+    },
+    {
+      id: 'lastSize',
+      header: 'Last Qty',
+      size: 90,
+      cell: ({ row }) =>
+        recordCellRender('LastQty', () =>
+          compactFormatter.format(row.original.lastSize),
+        ),
+    },
+    {
+      id: 'depth',
+      header: 'Bid / Ask Qty',
+      size: 145,
+      cell: ({ row }) =>
+        recordCellRender('Depth', () => (
+          <DepthCell
+            bidSize={row.original.bidSize}
+            askSize={row.original.askSize}
+          />
+        )),
+    },
+    {
+      id: 'age',
+      header: 'Quote Age',
+      size: 85,
+      cell: ({ row }) =>
+        recordCellRender('QuoteAge', () => (
+          <QuoteAgeCell
+            ageMs={
+              props.updateQuoteAges
+                ? Math.max(0, props.quoteClock - row.original.lastUpdatedAt)
+                : 0
+            }
+          />
+        )),
+    },
+    {
+      id: 'change',
+      header: 'Day %',
+      size: 90,
+      cell: ({ row }) =>
+        recordCellRender('DayChange', () => {
+          const change = (row.original.price / row.original.open - 1) * 100
+          return `${change >= 0 ? '+' : ''}${change.toFixed(2)}%`
+        }),
+    },
+    {
+      id: 'volume',
+      header: 'Total Qty',
+      size: 100,
+      cell: ({ row }) =>
+        recordCellRender('TotalQty', () =>
+          compactFormatter.format(row.original.volume),
+        ),
+    },
+    {
+      id: 'turnover',
+      header: 'Traded Value',
+      size: 115,
+      cell: ({ row }) =>
+        recordCellRender('TradedValue', () =>
+          currencyFormatter.format(row.original.turnover),
+        ),
+    },
+    {
+      id: 'history',
+      header: 'Intraday',
+      size: 150,
+      cell: ({ row }) =>
+        recordCellRender('Intraday', () => (
+          <SparklineCell values={row.original.history} />
+        )),
+    },
+  ]
+}
+
+export function LocalTradingTable(props: TradingTableProps) {
+  const columns = createTradingColumns(props)
+  const table = createTable({
+    key: 'solid-realtime-trading-local',
+    features: stockFeatures,
+    columns,
+    get data() {
+      return props.quotes
+    },
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <div class="table-scroll" data-table-adapter="local">
+      <table style={{ width: `${table.getTotalSize()}px` }}>
+        <thead>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (
+              <tr>
+                <For each={headerGroup.headers}>
+                  {(header) => (
+                    <th style={{ width: `${header.getSize()}px` }}>
+                      <Show when={!header.isPlaceholder}>
+                        <FlexRender header={header} />
+                      </Show>
+                    </th>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </thead>
+        <tbody>
+          <For each={table.getRowModel().rows}>
+            {(row) => (
+              <tr
+                classList={{
+                  'is-selected': props.selectedSymbol === row.original.symbol,
+                }}
+                data-symbol={row.original.symbol}
+                data-row-id={row.original.id}
+                title={row.original.company}
+              >
+                <For each={row.getVisibleCells()}>
+                  {(cell) => (
+                    <td
+                      style={{ width: `${cell.column.getSize()}px` }}
+                      classList={{
+                        'numeric-cell':
+                          cell.column.id !== 'symbol' &&
+                          cell.column.id !== 'venue',
+                      }}
+                    >
+                      <FlexRender cell={cell} />
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function V8TradingTable(props: TradingTableProps) {
+  const columns = createTradingColumns(props)
+  const table = createSolidTable({
+    columns,
+    get data() {
+      return props.quotes
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <div class="table-scroll" data-table-adapter="v8">
+      <table style={{ width: `${table.getTotalSize()}px` }}>
+        <thead>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (
+              <tr>
+                <For each={headerGroup.headers}>
+                  {(header) => (
+                    <th style={{ width: `${header.getSize()}px` }}>
+                      <Show when={!header.isPlaceholder}>
+                        {flexRenderV8(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      </Show>
+                    </th>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </thead>
+        <tbody>
+          <For each={table.getRowModel().rows}>
+            {(row) => (
+              <tr
+                classList={{
+                  'is-selected': props.selectedSymbol === row.original.symbol,
+                }}
+                data-symbol={row.original.symbol}
+                data-row-id={row.original.id}
+                title={row.original.company}
+              >
+                <For each={row.getVisibleCells()}>
+                  {(cell) => (
+                    <td
+                      style={{ width: `${cell.column.getSize()}px` }}
+                      classList={{
+                        'numeric-cell':
+                          cell.column.id !== 'symbol' &&
+                          cell.column.id !== 'venue',
+                      }}
+                    >
+                      {flexRenderV8(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export const TRADING_COLUMN_COUNT = 14
diff --git a/examples/solid/realtime-trading/src/vite-env.d.ts b/examples/solid/realtime-trading/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/solid/realtime-trading/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..07452e8a0e
--- /dev/null
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,104 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the same Solid workload across both table adapters', async ({
+  page,
+}) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByRole('table')
+    await expect(table).toBeVisible()
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(table.locator('thead th')).toHaveCount(14)
+    await expect(table.locator('thead')).toContainText('Ticker')
+    await expect(table.locator('thead')).toContainText('Last Qty')
+    await expect(table.locator('thead')).toContainText('Traded Value')
+    const adapter = page.getByTestId('adapter-select')
+    await expect(adapter).toHaveValue('local')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const loadProfile = page.getByTestId('load-profile-select')
+    await expect(loadProfile).toHaveValue('high')
+    await loadProfile.selectOption('very-high')
+    await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
+    await loadProfile.selectOption('high')
+
+    const rowWorkload = page.getByTestId('row-workload-select')
+    await rowWorkload.selectOption('rotating-filter')
+    await expect(table.locator('tbody tr')).toHaveCount(200)
+    await rowWorkload.selectOption('identity-churn')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(
+      table.locator('tbody tr[data-row-id*="-replacement-"]'),
+    ).toHaveCount(25)
+    await rowWorkload.selectOption('price-sort')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await rowWorkload.selectOption('stable')
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('total-events').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('raf-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    for (const implementation of ['v8', 'local']) {
+      await adapter.selectOption(implementation)
+      await expect(adapter).toHaveValue(implementation)
+      await expect(page.getByRole('table')).toBeVisible()
+      await expect(page.locator('tbody tr')).toHaveCount(250)
+
+      const firstPrice = page.locator('tbody tr').first().getByRole('button')
+      const priceBeforeUpdate = await firstPrice.textContent()
+      await expect
+        .poll(() => firstPrice.textContent())
+        .not.toBe(priceBeforeUpdate)
+    }
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/solid/realtime-trading/tsconfig.json b/examples/solid/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..24795ad41a
--- /dev/null
+++ b/examples/solid/realtime-trading/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "tests/e2e", "vite.config.ts"]
+}
diff --git a/examples/solid/realtime-trading/vite.config.ts b/examples/solid/realtime-trading/vite.config.ts
new file mode 100644
index 0000000000..eb6fcca05e
--- /dev/null
+++ b/examples/solid/realtime-trading/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import solidPlugin from 'vite-plugin-solid'
+
+export default defineConfig({
+  server: {
+    port: 7779,
+    allowedHosts: true,
+  },
+  plugins: [solidPlugin()],
+  build: {
+    target: 'esnext',
+  },
+})
diff --git a/package.json b/package.json
index 75da2ae0c9..23e1743677 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,12 @@
   "overrides": {
     "@tanstack/alpine-table": "workspace:*",
     "@tanstack/angular-table": "workspace:*",
+    "@tanstack/angular-table@8.21.4>@tanstack/table-core": "8.21.3",
+    "@tanstack/angular-table@9.0.0-beta.80>@tanstack/table-core": "9.0.0-beta.80",
+    "@tanstack/react-table@8.21.3>@tanstack/table-core": "8.21.3",
+    "@tanstack/react-table@9.0.0-beta.80>@tanstack/table-core": "9.0.0-beta.80",
+    "@tanstack/solid-table@8.21.3>@tanstack/table-core": "8.21.3",
+    "@tanstack/solid-table@9.0.0-beta.80>@tanstack/table-core": "9.0.0-beta.80",
     "@tanstack/angular-table-devtools": "workspace:*",
     "@tanstack/ember-table": "workspace:*",
     "@tanstack/lit-table": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62d2e470ee..c787e80224 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,12 @@ overrides:
   '@tanstack/alpine-table': workspace:*
   '@tanstack/angular-table-devtools': workspace:*
   '@tanstack/angular-table': workspace:*
+  '@tanstack/angular-table@8.21.4>@tanstack/table-core': 8.21.3
+  '@tanstack/angular-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
+  '@tanstack/react-table@8.21.3>@tanstack/table-core': 8.21.3
+  '@tanstack/react-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
+  '@tanstack/solid-table@8.21.3>@tanstack/table-core': 8.21.3
+  '@tanstack/solid-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
   '@tanstack/ember-table': workspace:*
   '@tanstack/lit-table': workspace:*
   '@tanstack/match-sorter-utils': workspace:*
@@ -2266,6 +2272,49 @@ importers:
         specifier: 6.0.3
         version: 6.0.3
 
+  examples/angular/realtime-trading:
+    dependencies:
+      '@angular/common':
+        specifier: ^22.1.0
+        version: 22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2)
+      '@angular/compiler':
+        specifier: ^22.1.0
+        version: 22.1.0
+      '@angular/core':
+        specifier: ^22.1.0
+        version: 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
+      '@angular/platform-browser':
+        specifier: ^22.1.0
+        version: 22.1.0(@angular/animations@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)))(@angular/common@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))
+      '@tanstack/angular-table':
+        specifier: workspace:*
+        version: link:../../../packages/angular-table
+      '@tanstack/angular-table-beta':
+        specifier: https://registry.npmjs.org/@tanstack/angular-table/-/angular-table-9.0.0-beta.80.tgz
+        version: '@tanstack/angular-table@9.0.0-beta.80(@angular/common@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))'
+      '@tanstack/angular-table-v8':
+        specifier: https://registry.npmjs.org/@tanstack/angular-table/-/angular-table-8.21.4.tgz
+        version: '@tanstack/angular-table@8.21.4(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))'
+      rxjs:
+        specifier: ~7.8.2
+        version: 7.8.2
+      tslib:
+        specifier: ^2.8.1
+        version: 2.8.1
+    devDependencies:
+      '@angular/build':
+        specifier: ^22.1.2
+        version: 22.1.2(0935b688b04d27585268941dfe103369)
+      '@angular/cli':
+        specifier: ^22.1.2
+        version: 22.1.2(@types/node@26.1.2)(chokidar@5.0.0)(supports-color@8.1.1)
+      '@angular/compiler-cli':
+        specifier: ^22.1.0
+        version: 22.1.0(@angular/compiler@22.1.0)(typescript@6.0.3)
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+
   examples/angular/remote-data:
     dependencies:
       '@angular/common':
@@ -10214,6 +10263,49 @@ importers:
         specifier: ^8.2.0
         version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
+  examples/react/realtime-trading:
+    dependencies:
+      '@tanstack/react-store':
+        specifier: ^0.11.0
+        version: 0.11.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@tanstack/react-table':
+        specifier: workspace:*
+        version: link:../../../packages/react-table
+      '@tanstack/react-table-v8':
+        specifier: https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz
+        version: '@tanstack/react-table@8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)'
+      react:
+        specifier: ^19.2.8
+        version: 19.2.8
+      react-dom:
+        specifier: ^19.2.8
+        version: 19.2.8(react@19.2.8)
+    devDependencies:
+      '@rolldown/plugin-babel':
+        specifier: ^0.2.3
+        version: 0.2.3(@babel/core@8.0.1)(@babel/plugin-transform-runtime@8.0.1(@babel/core@8.0.1))(@babel/runtime@8.0.0)(rolldown@1.2.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+      '@rollup/plugin-replace':
+        specifier: ^6.0.3
+        version: 6.0.3(rollup@4.62.3)
+      '@types/react':
+        specifier: 19.2.16
+        version: 19.2.16
+      '@types/react-dom':
+        specifier: ^19.2.4
+        version: 19.2.4(@types/react@19.2.16)
+      '@vitejs/plugin-react':
+        specifier: ^6.0.5
+        version: 6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@8.0.1)(@babel/plugin-transform-runtime@8.0.1(@babel/core@8.0.1))(@babel/runtime@8.0.0)(rolldown@1.2.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+      babel-plugin-react-compiler:
+        specifier: ^1.0.0
+        version: 1.0.0
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+
   examples/react/row-dnd:
     dependencies:
       '@dnd-kit/core':
@@ -11573,6 +11665,28 @@ importers:
         specifier: ^2.11.14
         version: 2.11.14(@testing-library/jest-dom@7.0.0(@testing-library/dom@10.4.1))(solid-js@1.9.14)(supports-color@8.1.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
 
+  examples/solid/realtime-trading:
+    dependencies:
+      '@tanstack/solid-table':
+        specifier: workspace:*
+        version: link:../../../packages/solid-table
+      '@tanstack/solid-table-v8':
+        specifier: https://registry.npmjs.org/@tanstack/solid-table/-/solid-table-8.21.3.tgz
+        version: '@tanstack/solid-table@8.21.3(solid-js@1.9.14)'
+      solid-js:
+        specifier: ^1.9.14
+        version: 1.9.14
+    devDependencies:
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+      vite-plugin-solid:
+        specifier: ^2.11.14
+        version: 2.11.14(@testing-library/jest-dom@7.0.0(@testing-library/dom@10.4.1))(solid-js@1.9.14)(supports-color@8.1.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+
   examples/solid/row-pinning:
     dependencies:
       '@tanstack/solid-table':
@@ -17661,6 +17775,7 @@ packages:
   '@ngtools/webpack@22.1.2':
     resolution: {integrity: sha512-5o3zbOdEHv5+wjRCMN+t6RBou28dbPkio5/rxEJBsQ9iEq11K+atsSKEaZXBMUhYr9nLYR8Pckm5Cqx2FP9R2Q==}
     engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    deprecated: Angular's Webpack support is deprecated. Use the esbuild and Vite-based "@angular/build" package instead.
     peerDependencies:
       '@angular/compiler-cli': ^22.0.0
       typescript: '>=6.0 <6.1'
@@ -20366,6 +20481,18 @@ packages:
       '@angular/common': '>=19.0.0'
       '@angular/core': '>=19.0.0'
 
+  '@tanstack/angular-table@8.21.4':
+    resolution: {integrity: sha512-djyuJFvIB/pBuBIqny8b7+5ozeXJSElaxYRZyyKLpYrXn4xQSysBT//X51eDT/mi3kS0spcjIHhoObjk3iCjcQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@angular/core': '>=17'
+
+  '@tanstack/angular-table@9.0.0-beta.80':
+    resolution: {integrity: sha512-ILLMlF4tiXU7bvdX+pkmVZFIl1nbZmGrm3KgUxIrNAH71W/QnwMo4hYHzh3ZDDBH/ZmOH5pfUEPPKkb5GWtTNw==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@angular/core': '>=19'
+
   '@tanstack/angular-virtual@6.0.2':
     resolution: {integrity: sha512-y/u2ZKAN5ob+ljwUoSK+r2j2piXw/ol63ykFbzZ8Hahj0dRU9xCJ0cJIDxTQ9zRoGbk0ZIiy3BK5w8Mso1daKA==}
     peerDependencies:
@@ -20693,6 +20820,13 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   '@tanstack/react-virtual@3.14.9':
     resolution: {integrity: sha512-qZyr0FZDP8rDC4WBhsryIZmAd9bveJvFGUJJtskWaew6/0dTRS6wZxnR6VQ5bY2KwL3LjerrHqQLk3a0GKcPXQ==}
     peerDependencies:
@@ -20810,6 +20944,12 @@ packages:
     peerDependencies:
       solid-js: ^1.6.0
 
+  '@tanstack/solid-table@8.21.3':
+    resolution: {integrity: sha512-PmhfSLBxVKiFs01LtYOYrCRhCyTUjxmb4KlxRQiqcALtip8+DOJeeezQM4RSX/GUS0SMVHyH/dNboCpcO++k2A==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      solid-js: '>=1.3'
+
   '@tanstack/solid-virtual@3.13.36':
     resolution: {integrity: sha512-9x4Eg3M+t7cY0/lswB6JnK1C/3YcsdBttUYQgSre+5zcwVJMZnp0Gy3mT++jeSN1bi7M5pxUPnAVoD1YE9DuLQ==}
     peerDependencies:
@@ -20874,6 +21014,14 @@ packages:
     peerDependencies:
       svelte: ^3.48.0 || ^4.0.0 || ^5.0.0
 
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/table-core@9.0.0-beta.80':
+    resolution: {integrity: sha512-tD98Q6/qzjvbEomMtDqxrAQUAf9nsBD7RihY1073E0eaeYwP3GyW5Gdlb+PztSk9F0CsYArXeOqcrt1hV29O8w==}
+    engines: {node: '>=20'}
+
   '@tanstack/typedoc-config@0.3.3':
     resolution: {integrity: sha512-wVT2YfKDSpd+4f7fk6UaPIP3a2J7LSovlyVuFF1PH2yQb7gjqehod5zdFiwFyEXgvI9XGuFvvs1OehkKNYcr6A==}
     engines: {node: '>=18'}
@@ -34163,6 +34311,21 @@ snapshots:
       '@tanstack/store': 0.9.3
       tslib: 2.8.1
 
+  '@tanstack/angular-table@8.21.4(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))':
+    dependencies:
+      '@angular/core': 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
+      '@tanstack/table-core': 8.21.3
+      tslib: 2.8.1
+
+  '@tanstack/angular-table@9.0.0-beta.80(@angular/common@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))':
+    dependencies:
+      '@angular/core': 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
+      '@tanstack/angular-store': 0.11.0(@angular/common@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))
+      '@tanstack/table-core': 9.0.0-beta.80
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@angular/common'
+
   '@tanstack/angular-virtual@6.0.2(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))':
     dependencies:
       '@angular/core': 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
@@ -34550,6 +34713,12 @@ snapshots:
       react-dom: 19.2.8(react@19.2.8)
       use-sync-external-store: 1.6.0(react@19.2.8)
 
+  '@tanstack/react-table@8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   '@tanstack/react-virtual@3.14.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@tanstack/virtual-core': 3.17.7
@@ -34716,6 +34885,11 @@ snapshots:
       '@tanstack/store': 0.11.0
       solid-js: 1.9.14
 
+  '@tanstack/solid-table@8.21.3(solid-js@1.9.14)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      solid-js: 1.9.14
+
   '@tanstack/solid-virtual@3.13.36(solid-js@1.9.14)':
     dependencies:
       '@tanstack/virtual-core': 3.17.7
@@ -34807,6 +34981,12 @@ snapshots:
       '@tanstack/virtual-core': 3.17.7
       svelte: 5.56.8(@typescript-eslint/types@8.65.0)
 
+  '@tanstack/table-core@8.21.3': {}
+
+  '@tanstack/table-core@9.0.0-beta.80':
+    dependencies:
+      '@tanstack/store': 0.11.0
+
   '@tanstack/typedoc-config@0.3.3(typescript@6.0.3)':
     dependencies:
       typedoc: 0.28.14(typescript@6.0.3)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 2b3d1e2913..daa834bc6e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -7,6 +7,12 @@ overrides:
   '@tanstack/alpine-table': 'workspace:*'
   '@tanstack/angular-table-devtools': 'workspace:*'
   '@tanstack/angular-table': 'workspace:*'
+  '@tanstack/angular-table@8.21.4>@tanstack/table-core': 8.21.3
+  '@tanstack/angular-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
+  '@tanstack/react-table@8.21.3>@tanstack/table-core': 8.21.3
+  '@tanstack/react-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
+  '@tanstack/solid-table@8.21.3>@tanstack/table-core': 8.21.3
+  '@tanstack/solid-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
   '@tanstack/ember-table': 'workspace:*'
   '@tanstack/lit-table': 'workspace:*'
   '@tanstack/match-sorter-utils': 'workspace:*'

From 3977cc439ad204e72ccf556fa1579ae8c5c44c99 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Fri, 7 Aug 2026 01:25:53 +0200
Subject: [PATCH 03/23] perf: revisit angular adapter to improve memory usage
 and flexrender dirty checking

---
 packages/angular-table/package.json           |   1 +
 .../angular-table/src/flex-render/flags.ts    |  29 +-
 .../src/flex-render/flexRenderComponent.ts    | 110 +++--
 .../flex-render/flexRenderComponentFactory.ts | 174 ++++----
 .../angular-table/src/flex-render/renderer.ts | 208 +++++-----
 .../angular-table/src/flex-render/view.ts     |  56 +--
 .../src/helpers/flexRenderCell.ts             |   7 +-
 packages/angular-table/src/injectTable.ts     |   5 +-
 packages/angular-table/src/reactivity.ts      |   8 +-
 .../flex-render-component.test-d.ts           |   6 +
 .../tests/flex-render/flex-render.bench.ts    | 239 +++++++++++
 .../flex-render/flex-render.unit.test.ts      | 388 +++++++++++++++++-
 .../angular-table/tests/injectTable.test.ts   |  15 +
 13 files changed, 963 insertions(+), 283 deletions(-)
 create mode 100644 packages/angular-table/tests/flex-render/flex-render.bench.ts

diff --git a/packages/angular-table/package.json b/packages/angular-table/package.json
index c902d00f7c..00c0634c78 100644
--- a/packages/angular-table/package.json
+++ b/packages/angular-table/package.json
@@ -56,6 +56,7 @@
   "scripts": {
     "build": "ng-packagr -p ng-package.json -c tsconfig.build.json && rimraf ./dist/package.json && find dist -name '*.map' -delete",
     "build:types": "tsc --emitDeclarationOnly",
+    "bench:flex-render": "vitest bench --run tests/flex-render/flex-render.bench.ts",
     "clean": "rimraf ./build && rimraf ./dist",
     "test:build": "publint --strict",
     "test:eslint": "eslint ./src",
diff --git a/packages/angular-table/src/flex-render/flags.ts b/packages/angular-table/src/flex-render/flags.ts
index e265c847c8..6a26987f8b 100644
--- a/packages/angular-table/src/flex-render/flags.ts
+++ b/packages/angular-table/src/flex-render/flags.ts
@@ -1,34 +1,33 @@
 /**
- * Flags used to manage and optimize the rendering lifecycle of the content of the cell
- * while using {@link FlexViewRenderer}.
+ * Flags used to manage and optimize the rendering lifecycle of content inside
+ * {@link FlexViewRenderer}.
  */
 export const FlexRenderFlags = {
   /**
-   * Indicates that the view is being created for the first time or will be cleared during the next update phase.
-   * This is the initial state and will transition after the first ngDoCheck.
+   * The renderer has not completed its initial update. The first update creates
+   * the view from scratch, then clears this flag.
    */
   ViewFirstRender: 1 << 0,
   /**
-   * Indicates the `content` property has been modified or the view requires a complete re-render.
-   * When this flag is enabled, the view will be cleared and recreated from scratch.
+   * The `content` input changed by reference, or its resolved value is not
+   * compatible with the mounted view. The next update recreates the view.
    */
   ContentChanged: 1 << 1,
   /**
-   * Indicates that the `props` property reference has changed.
-   * When this flag is enabled, the view context is updated based on the type of the content.
-   *
-   * For Component view, inputs will be updated and view will be marked as dirty.
-   * For TemplateRef and primitive values, view will be marked as dirty
+   * The `props` input changed by reference. Components receive the latest
+   * inputs and embedded templates are marked so their getter-backed context is
+   * evaluated again.
    */
   PropsReferenceChanged: 1 << 2,
   /**
-   * Indicates that the current rendered view needs to be checked for changes.
-   * This will be set to true when `content(props)` result has changed or during
-   * forced update
+   * A render function produced compatible content that must be synchronized
+   * with the mounted view without recreating it.
    */
   Dirty: 1 << 3,
   /**
-   * Indicates that the first render effect has been checked at least one time.
+   * The render-function effect completed its initial dependency read. That
+   * first execution records dependencies; subsequent executions update the
+   * view.
    */
   RenderEffectChecked: 1 << 4,
 } as const
diff --git a/packages/angular-table/src/flex-render/flexRenderComponent.ts b/packages/angular-table/src/flex-render/flexRenderComponent.ts
index 5dc958c352..396b2a0017 100644
--- a/packages/angular-table/src/flex-render/flexRenderComponent.ts
+++ b/packages/angular-table/src/flex-render/flexRenderComponent.ts
@@ -17,11 +17,35 @@ interface FlexRenderOptions<
   TInputs extends Record<string, any>,
   TOutputs extends Record<string, any>,
 > {
+  /**
+   * Optional identity used to control component instance reuse.
+   *
+   * A rendered component is reused while both its component type and key are
+   * unchanged. Change the key to explicitly destroy and recreate the component,
+   * for example when new creation-time bindings, directives, or an injector
+   * need to be applied.
+   *
+   * Inputs and outputs do not affect component identity and are synchronized
+   * onto a reused component instance.
+   *
+   * @example
+   * ```ts
+   * flexRenderComponent(EditorComponent, {
+   *   key: row.original.editorVersion,
+   *   inputs: { value: row.original.value },
+   * })
+   * ```
+   */
+  readonly key?: string | number
   /**
    * Native Angular bindings applied at component creation time via `createComponent`.
    * Use this option to set inputs, outputs, or two-way bindings at creation time.
    * Shouldn't be used together with {@link FlexRenderOptions#inputs} or {@link FlexRenderOptions#outputs} option.
    *
+   * Bindings are creation-time configuration. Changing this array after the
+   * component has mounted does not update the existing component. Change
+   * {@link FlexRenderOptions#key} to recreate the component with new bindings.
+   *
    * Binding input/outputs at creation time: {@link https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation}
    *
    * Two-way binding: {@link https://angular.dev/api/core/twoWayBinding}
@@ -54,6 +78,10 @@ interface FlexRenderOptions<
   /**
    * Directives to apply to the component at creation time.
    *
+   * Directives are creation-time configuration. Changing this array after the
+   * component has mounted does not update the existing component. Change
+   * {@link FlexRenderOptions#key} to recreate the component with new directives.
+   *
    * Binding directives at creation time: {@link https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation}
    *
    * Two-way binding: {@link https://angular.dev/api/core/twoWayBinding}
@@ -88,6 +116,8 @@ interface FlexRenderOptions<
    *
    * These values are assigned after the component has been created using
    * [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput).
+   * On a reused component, omitted keys keep their current value. Pass
+   * `undefined` explicitly when an input needs to be cleared.
    *
    * Shouldn't be used together with {@link FlexRenderOptions#bindings} option
    */
@@ -101,7 +131,11 @@ interface FlexRenderOptions<
    */
   readonly outputs?: TOutputs
   /**
-   * Optional {@link Injector} that will be used when rendering the component
+   * Optional {@link Injector} that will be used when rendering the component.
+   *
+   * The injector is applied when the component is created. Change
+   * {@link FlexRenderOptions#key} to recreate a mounted component with a
+   * different injector.
    */
   readonly injector?: Injector
 }
@@ -151,7 +185,7 @@ export function flexRenderComponent<TComponent = any>(
   component: Type<TComponent>,
   options?: FlexRenderOptions<Inputs<TComponent>, Outputs<TComponent>>,
 ): FlexRenderComponent<TComponent> {
-  const { inputs, injector, outputs, directives, bindings } = options ?? {}
+  const { key, inputs, injector, outputs, directives, bindings } = options ?? {}
   return new FlexRenderComponentInstance(
     component,
     inputs,
@@ -159,6 +193,7 @@ export function flexRenderComponent<TComponent = any>(
     outputs,
     directives,
     bindings,
+    key,
   )
 }
 
@@ -208,17 +243,20 @@ export interface FlexRenderComponent<TComponent = any> {
    */
   readonly component: Type<TComponent>
   /**
-   * Reflected metadata about the component.
+   * Optional identity used together with the component type to decide whether
+   * an existing component instance can be reused.
+   *
+   * @see {@link FlexRenderOptions#key}
    */
-  readonly mirror: ComponentMirror<TComponent>
+  readonly key?: string | number
   /**
-   * List of allowed input names.
+   * Reflected metadata about the component.
    */
-  readonly allowedInputNames: Array<string>
+  readonly mirror: ComponentMirror<TComponent>
   /**
-   * List of allowed output names.
+   * Cached component metadata used by the flex renderer.
    */
-  readonly allowedOutputNames: Array<string>
+  readonly metadata: ResolvedComponentMetadata<TComponent>
   /**
    * Component instance outputs. Subscribed via {@link OutputEmitterRef#subscribe}
    *
@@ -254,14 +292,13 @@ export interface FlexRenderComponent<TComponent = any> {
 /**
  * Wrapper class for a component that will be used as content for {@link FlexRenderDirective}
  *
- * Prefer {@link flexRenderComponent} helper for better type-safety
+ * Prefer {@link flexRenderComponent} for better type-safety.
  */
 export class FlexRenderComponentInstance<
   TComponent = any,
 > implements FlexRenderComponent<TComponent> {
   readonly mirror: ComponentMirror<TComponent>
-  readonly allowedInputNames: Array<string> = []
-  readonly allowedOutputNames: Array<string> = []
+  readonly metadata: ResolvedComponentMetadata<TComponent>
 
   constructor(
     readonly component: Type<TComponent>,
@@ -270,19 +307,46 @@ export class FlexRenderComponentInstance<
     readonly outputs?: Outputs<TComponent>,
     readonly directives?: CreateComponentDirectives,
     readonly bindings?: CreateComponentBindings,
+    readonly key?: string | number,
   ) {
-    const mirror = reflectComponentType(component)
-    if (!mirror) {
-      throw new Error(
-        `[@tanstack-table/angular] The provided symbol is not a component`,
-      )
-    }
-    this.mirror = mirror
-    for (const input of this.mirror.inputs) {
-      this.allowedInputNames.push(input.propName)
-    }
-    for (const output of this.mirror.outputs) {
-      this.allowedOutputNames.push(output.propName)
+    this.metadata = resolveComponentTypeMetadata(component)
+    this.mirror = this.metadata.mirror
+  }
+}
+
+interface ResolvedComponentMetadata<TComponent = unknown> {
+  readonly mirror: ComponentMirror<TComponent>
+  readonly inputNames: ReadonlyMap<string, string>
+  readonly outputNames: ReadonlySet<string>
+}
+
+const typeCache = new WeakMap<Type<unknown>, ResolvedComponentMetadata>()
+
+function resolveComponentTypeMetadata<T>(
+  type: Type<T>,
+): ResolvedComponentMetadata<T> {
+  let metadata = typeCache.get(type) as ResolvedComponentMetadata<T> | undefined
+  if (metadata) return metadata
+  const mirror = reflectComponentType(type)
+  if (!mirror) {
+    throw new Error(
+      `[@tanstack-table/angular] The provided symbol is not a component`,
+    )
+  }
+  const inputNames = new Map<string, string>()
+  const outputNames = new Set<string>()
+  for (const input of mirror.inputs) {
+    inputNames.set(input.propName, input.templateName)
+    if (input.templateName !== input.propName) {
+      inputNames.set(input.templateName, input.templateName)
     }
   }
+  for (const output of mirror.outputs) {
+    // Outputs are read from the component instance, so only their class
+    // property names are valid here. Template aliases are not instance keys.
+    outputNames.add(output.propName)
+  }
+  metadata = { mirror, inputNames, outputNames }
+  typeCache.set(type, metadata)
+  return metadata
 }
diff --git a/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts b/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
index 0cd39c79ea..2764bc2d3b 100644
--- a/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
+++ b/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
@@ -3,13 +3,12 @@ import {
   ComponentRef,
   Injectable,
   Injector,
-  KeyValueDiffer,
-  KeyValueDiffers,
   OutputEmitterRef,
   OutputRefSubscription,
   ViewContainerRef,
 } from '@angular/core'
-import { FlexRenderComponent } from './flexRenderComponent'
+import { hasOwn } from '@tanstack/table-core'
+import type { FlexRenderComponent } from './flexRenderComponent'
 
 /**
  * Creates and manages Angular component instances used by flex-rendered table
@@ -32,7 +31,7 @@ export class FlexRenderComponentFactory {
       {
         injector: componentInjector,
         directives: flexRenderComponent.directives,
-        bindings: flexRenderComponent.bindings ?? [],
+        bindings: flexRenderComponent.bindings,
       },
     )
     const view = new FlexRenderComponentRef(
@@ -57,10 +56,8 @@ export class FlexRenderComponentFactory {
  * be reused instead of recreated on every cell/header render.
  */
 export class FlexRenderComponentRef<T> {
-  readonly #keyValueDiffersFactory: KeyValueDiffers
   #componentData: FlexRenderComponent<T>
-  #inputValueDiffer: KeyValueDiffer<string, unknown>
-
+  readonly #creationKey: FlexRenderComponent<T>['key']
   readonly #outputRegistry: FlexRenderComponentOutputManager
 
   constructor(
@@ -69,18 +66,8 @@ export class FlexRenderComponentRef<T> {
     readonly componentInjector: Injector,
   ) {
     this.#componentData = componentData
-    this.#keyValueDiffersFactory = componentInjector.get(KeyValueDiffers)
-
-    this.#outputRegistry = new FlexRenderComponentOutputManager(
-      this.#keyValueDiffersFactory,
-      this.outputs,
-    )
-
-    this.#inputValueDiffer = this.#keyValueDiffersFactory
-      .find(this.inputs)
-      .create()
-    this.#inputValueDiffer.diff(this.inputs)
-
+    this.#creationKey = componentData.key
+    this.#outputRegistry = new FlexRenderComponentOutputManager()
     this.componentRef.onDestroy(() => this.#outputRegistry.unsubscribeAll())
   }
 
@@ -96,15 +83,6 @@ export class FlexRenderComponentRef<T> {
     return this.#componentData.outputs ?? {}
   }
 
-  /**
-   * Get component input and output diff by the given item
-   */
-  diff(item: FlexRenderComponent<T>) {
-    return {
-      inputDiff: this.#inputValueDiffer.diff(item.inputs ?? {}),
-      outputDiff: this.#outputRegistry.diff(item.outputs ?? {}),
-    }
-  }
   /**
    *
    * @param compare Whether the current ref component instance is the same as the given one
@@ -113,37 +91,18 @@ export class FlexRenderComponentRef<T> {
     return compare.component === this.component
   }
 
+  canReuse(compare: FlexRenderComponent<T>): boolean {
+    return this.eqType(compare) && Object.is(compare.key, this.#creationKey)
+  }
+
   /**
    * Tries to update current component refs input by the new given content component.
    */
-  update(content: FlexRenderComponent<T>) {
-    const eq = this.eqType(content)
-    if (!eq) return
-    const { inputDiff, outputDiff } = this.diff(content)
-    if (inputDiff) {
-      inputDiff.forEachAddedItem((item) =>
-        this.setInput(item.key, item.currentValue),
-      )
-      inputDiff.forEachChangedItem((item) =>
-        this.setInput(item.key, item.currentValue),
-      )
-      inputDiff.forEachRemovedItem((item) => this.setInput(item.key, undefined))
-    }
-    if (outputDiff) {
-      outputDiff.forEachAddedItem((item) => {
-        this.setOutput(item.key, item.currentValue)
-      })
-      outputDiff.forEachChangedItem((item) => {
-        if (item.currentValue) {
-          this.#outputRegistry.setListener(item.key, item.currentValue)
-        } else {
-          this.#outputRegistry.unsubscribe(item.key)
-        }
-      })
-      outputDiff.forEachRemovedItem((item) => {
-        this.#outputRegistry.unsubscribe(item.key)
-      })
-    }
+  update(content: FlexRenderComponent<T>): void {
+    if (!this.canReuse(content)) return
+
+    this.#syncInputs(content.inputs ?? {})
+    this.#syncOutputs(content.outputs ?? {})
 
     this.#componentData = content
   }
@@ -159,9 +118,9 @@ export class FlexRenderComponentRef<T> {
   }
 
   setInput(key: string, value: unknown) {
-    if (this.#componentData.allowedInputNames.includes(key)) {
-      this.componentRef.setInput(key, value)
-    }
+    const inputName = this.#componentData.metadata.inputNames.get(key)
+    if (inputName === undefined) return
+    this.componentRef.setInput(inputName, value)
   }
 
   setOutputs(
@@ -177,75 +136,102 @@ export class FlexRenderComponentRef<T> {
   }
 
   setOutput(
-    outputName: string,
+    key: string,
     emit: OutputEmitterRef<unknown>['emit'] | undefined | null,
   ): void {
-    if (!this.#componentData.allowedOutputNames.includes(outputName)) return
+    if (!this.#componentData.metadata.outputNames.has(key)) return
+    const outputName = key
     if (!emit) {
       this.#outputRegistry.unsubscribe(outputName)
       return
     }
 
-    const hasListener = this.#outputRegistry.hasListener(outputName)
+    // If the output was already subscribed, just swap the listener callback.
+    const hasSubscription = this.#outputRegistry.hasSubscription(outputName)
     this.#outputRegistry.setListener(outputName, emit)
 
-    if (hasListener) {
+    if (hasSubscription) {
       return
     }
 
     const instance = this.componentRef.instance
     const output = instance[outputName as keyof typeof instance]
     if (output && output instanceof OutputEmitterRef) {
-      output.subscribe((value) => {
-        this.#outputRegistry.getListener(outputName)?.(value)
-      })
+      this.#outputRegistry.setSubscription(
+        outputName,
+        output.subscribe((value) => {
+          this.#outputRegistry.getListener(outputName)?.(value)
+        }),
+      )
+    }
+  }
+
+  #syncInputs(newInputs: Record<string, unknown>): void {
+    // Inputs use patch semantics: omitted keys keep their current value, while
+    // an explicitly provided `undefined` is forwarded to Angular.
+    for (const prop in newInputs) {
+      if (hasOwn(newInputs, prop)) {
+        this.setInput(prop, newInputs[prop])
+      }
+    }
+  }
+
+  #syncOutputs(
+    outputs: Record<
+      string,
+      OutputEmitterRef<unknown>['emit'] | null | undefined
+    >,
+  ): void {
+    const outputKeys = Object.keys(outputs)
+    const currentSubscribedKeys = this.#outputRegistry.getSubscribedKeys()
+    // When outputs updates, unsubscribe missing keys
+    for (const key of currentSubscribedKeys) {
+      if (!outputKeys.includes(key)) {
+        this.#outputRegistry.unsubscribe(key)
+      }
+    }
+    for (const prop in outputs) {
+      this.setOutput(prop, outputs[prop])
     }
   }
 }
 
 class FlexRenderComponentOutputManager {
-  readonly #outputSubscribers: Record<string, OutputRefSubscription> = {}
-  readonly #outputListeners: Record<string, (...args: Array<any>) => void> = {}
-
-  readonly #valueDiffer: KeyValueDiffer<
-    string,
-    undefined | null | OutputEmitterRef<unknown>['emit']
-  >
-
-  constructor(keyValueDiffers: KeyValueDiffers, initialOutputs: any) {
-    this.#valueDiffer = keyValueDiffers.find(initialOutputs).create()
-    if (initialOutputs) {
-      this.#valueDiffer.diff(initialOutputs)
-    }
+  readonly #outputSubscribers = new Map<string, OutputRefSubscription>()
+  readonly #outputListeners = new Map<string, (...args: Array<any>) => void>()
+
+  getSubscribedKeys() {
+    return Array.from(this.#outputListeners.keys())
   }
 
-  hasListener(outputName: string) {
-    return outputName in this.#outputListeners
+  hasSubscription(outputName: string) {
+    return this.#outputSubscribers.has(outputName)
   }
 
   setListener(outputName: string, callback: (...args: Array<any>) => void) {
-    this.#outputListeners[outputName] = callback
+    this.#outputListeners.set(outputName, callback)
   }
 
   getListener(outputName: string) {
-    return this.#outputListeners[outputName]
+    return this.#outputListeners.get(outputName)
   }
 
-  unsubscribeAll(): void {
-    for (const prop in this.#outputSubscribers) {
-      this.unsubscribe(prop)
-    }
+  setSubscription(
+    outputName: string,
+    subscription: OutputRefSubscription,
+  ): void {
+    this.#outputSubscribers.set(outputName, subscription)
   }
 
-  unsubscribe(outputName: string) {
-    if (outputName in this.#outputSubscribers) {
-      this.#outputSubscribers[outputName]?.unsubscribe()
-      delete this.#outputSubscribers[outputName]
-      delete this.#outputListeners[outputName]
+  unsubscribeAll(): void {
+    for (const outputName of this.#outputListeners.keys()) {
+      this.unsubscribe(outputName)
     }
   }
 
-  diff(outputs: Record<string, OutputEmitterRef<unknown>['emit'] | undefined>) {
-    return this.#valueDiffer.diff(outputs)
+  unsubscribe(outputName: string) {
+    this.#outputSubscribers.get(outputName)?.unsubscribe()
+    this.#outputSubscribers.delete(outputName)
+    this.#outputListeners.delete(outputName)
   }
 }
diff --git a/packages/angular-table/src/flex-render/renderer.ts b/packages/angular-table/src/flex-render/renderer.ts
index 20064719ff..5853d3c2ea 100644
--- a/packages/angular-table/src/flex-render/renderer.ts
+++ b/packages/angular-table/src/flex-render/renderer.ts
@@ -114,6 +114,7 @@ export class FlexViewRenderer<
     FlexRenderViewAllowedType,
     FlexRenderTypedContent
   > | null = null
+  #outerRenderEffectRef: EffectRef | null = null
   #currentRenderEffectRef: EffectRef | null = null
   #content: () => FlexRenderInputContent<TProps>
   #props: () => TProps
@@ -132,9 +133,8 @@ export class FlexViewRenderer<
 
   readonly #latestContent = computed(() => this.#getLatestContentValue())
 
-  #getContentValue = computed(() => {
-    const latestContent = this.#latestContent()
-    return mapToFlexRenderTypedContent(latestContent)
+  readonly #getContentValue = computed(() => {
+    return mapToFlexRenderTypedContent(this.#latestContent())
   })
 
   constructor(options: RendererViewOptions<TProps>) {
@@ -149,45 +149,61 @@ export class FlexViewRenderer<
   }
 
   mount(): EffectRef {
-    let previousContent: FlexRenderInputContent<TProps>
-    let previousProps: TProps
+    if (this.#outerRenderEffectRef) {
+      return this.#outerRenderEffectRef
+    }
 
-    return effect(() => {
-      const props = this.#props()
-      const content = this.#content()
+    let previousContent: FlexRenderInputContent<TProps> | undefined
+    let previousProps: TProps | undefined
 
-      if (!(this.#renderFlags & FlexRenderFlags.ViewFirstRender)) {
-        if (previousContent !== content) {
-          this.#renderFlags |= FlexRenderFlags.ContentChanged
-        }
-        if (previousProps !== props) {
-          this.#renderFlags |= FlexRenderFlags.PropsReferenceChanged
+    this.#outerRenderEffectRef = effect(
+      () => {
+        const props = this.#props()
+        const content = this.#content()
+
+        if (!(this.#renderFlags & FlexRenderFlags.ViewFirstRender)) {
+          if (previousContent !== content) {
+            this.#renderFlags |= FlexRenderFlags.ContentChanged
+          }
+          if (previousProps !== props) {
+            this.#renderFlags |= FlexRenderFlags.PropsReferenceChanged
+          }
         }
-      }
 
-      untracked(() => this.#update())
+        untracked(() => this.#update())
 
-      if (FlexRenderFlags.ViewFirstRender & this.#renderFlags) {
-        this.#renderFlags &= ~FlexRenderFlags.ViewFirstRender
-      }
+        if (this.#renderFlags & FlexRenderFlags.ViewFirstRender) {
+          this.#renderFlags &= ~FlexRenderFlags.ViewFirstRender
+        }
 
-      previousContent = content
-      previousProps = props
-    })
+        previousContent = content
+        previousProps = props
+      },
+      { injector: this.#viewContainerRef.injector },
+    )
+
+    return this.#outerRenderEffectRef
   }
 
   destroy(): void {
+    if (this.#outerRenderEffectRef) {
+      this.#outerRenderEffectRef.destroy()
+      this.#outerRenderEffectRef = null
+    }
+    this.#destroyContentEffect()
+    this.#destroyView()
+    this.#renderFlags = FlexRenderFlags.ViewFirstRender
+  }
+
+  #destroyContentEffect(): void {
     if (this.#currentRenderEffectRef) {
       this.#currentRenderEffectRef.destroy()
       this.#currentRenderEffectRef = null
     }
-    if (this.#renderView) {
-      this.#renderView.unmount()
-      this.#renderView = null
-    }
+    this.#renderFlags &= ~FlexRenderFlags.RenderEffectChecked
   }
 
-  #update() {
+  #update(): void {
     if (
       this.#renderFlags &
       (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)
@@ -197,115 +213,120 @@ export class FlexViewRenderer<
     }
 
     if (this.#renderFlags & FlexRenderFlags.PropsReferenceChanged) {
-      if (this.#renderView) this.#renderView.updateProps(this.#props())
+      this.#renderView?.updateProps(this.#props())
       this.#renderFlags &= ~FlexRenderFlags.PropsReferenceChanged
     }
 
     if (this.#renderFlags & FlexRenderFlags.Dirty) {
-      if (this.#renderView) this.#renderView.dirtyCheck()
+      this.#renderView?.dirtyCheck()
       this.#renderFlags &= ~FlexRenderFlags.Dirty
     }
   }
 
-  #render() {
-    // When the view is recreated from scratch (content change or first render),
-    // we have to destroy the current effect listener since it will be recreated
-    // skipping the first call (FlexRenderFlags.RenderEffectChecked)
-    if (this.#shouldRecreateEntireView() && this.#currentRenderEffectRef) {
-      this.#currentRenderEffectRef.destroy()
-      this.#currentRenderEffectRef = null
-      this.#renderFlags &= ~FlexRenderFlags.RenderEffectChecked
+  #render(): void {
+    // Recreating a view also recreates its render-function effect. Its first
+    // execution only records dependencies; later executions schedule updates.
+    if (this.#shouldRecreateEntireView()) {
+      this.#destroyContentEffect()
     }
 
-    this.#viewContainerRef.clear()
-    if (this.#renderView) {
-      this.#renderView.unmount()
-      this.#renderView = null
+    this.#destroyView()
+
+    this.#renderFlags &=
+      FlexRenderFlags.ViewFirstRender | FlexRenderFlags.RenderEffectChecked
+
+    const content = this.#getContentValue()
+    if (content.kind !== 'null') {
+      const injector = this.#injector()
+      const parentInjector =
+        content.kind === 'flexRenderComponent'
+          ? (content.content.injector ?? injector)
+          : injector
+      this.#renderView = this.#renderViewByContent(
+        content,
+        this.#props(),
+        parentInjector,
+      )
     }
 
-    this.#renderFlags =
-      (this.#renderFlags & FlexRenderFlags.ViewFirstRender) |
-      (this.#renderFlags & FlexRenderFlags.RenderEffectChecked)
-
-    const resolvedContent = this.#getContentValue()
-    this.#renderView = this.#renderViewByContent(resolvedContent)
-    // If the content is a function `content(props)`, we initialize an effect
-    // to react to changes. If the current fn uses signals, we will set the DirtySignal flag
-    // to re-schedule the component updates
+    // Render functions can read signals. Keep their dependency tracking in a
+    // dedicated effect so the outer effect remains responsible only for
+    // content and props input-reference changes.
     if (
       !this.#currentRenderEffectRef &&
       typeof untracked(this.#content) === 'function'
     ) {
       this.#currentRenderEffectRef = effect(
         () => {
-          this.#latestContent()
+          const latestContent = this.#getContentValue()
           if (!(this.#renderFlags & FlexRenderFlags.RenderEffectChecked)) {
             this.#renderFlags |= FlexRenderFlags.RenderEffectChecked
             return
           }
-          this.#renderFlags |= FlexRenderFlags.Dirty
-          this.#doCheck()
+
+          untracked(() => {
+            this.#renderFlags |= FlexRenderFlags.Dirty
+            this.#doCheck(latestContent)
+          })
         },
         { injector: this.#viewContainerRef.injector },
       )
     }
   }
 
-  #shouldRecreateEntireView() {
-    return (
+  #shouldRecreateEntireView(): boolean {
+    return !!(
       this.#renderFlags &
-      FlexRenderFlags.ContentChanged &
-      FlexRenderFlags.ViewFirstRender
+      (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)
     )
   }
 
-  #doCheck() {
-    const latestContent = this.#getContentValue()
-    if (latestContent.kind === 'null' || !this.#renderView) {
+  #doCheck(latestContent: FlexRenderTypedContent): void {
+    if (
+      latestContent.kind === 'null' ||
+      !this.#renderView ||
+      !this.#renderView.canReuse(latestContent)
+    ) {
       this.#renderFlags |= FlexRenderFlags.ContentChanged
     } else {
-      const { kind: currentKind } = this.#renderView.content
-      if (
-        latestContent.kind !== currentKind ||
-        !this.#renderView.eq(latestContent)
-      ) {
-        this.#renderFlags |= FlexRenderFlags.ContentChanged
-      }
       this.#renderView.content = latestContent
     }
+
     this.#update()
   }
 
+  #destroyView(): void {
+    if (this.#renderView) {
+      this.#renderView.unmount()
+      this.#renderView = null
+    }
+  }
+
   #renderViewByContent(
-    content: FlexRenderTypedContent,
+    content: Exclude<FlexRenderTypedContent, { kind: 'null' }>,
+    props: TProps,
+    parentInjector: Injector,
   ): FlexRenderView<FlexRenderViewAllowedType, FlexRenderTypedContent> | null {
     if (content.kind === 'primitive') {
       return this.#renderStringContent(content)
     } else if (content.kind === 'templateRef') {
-      return this.#renderTemplateRefContent(content)
+      return this.#renderTemplateRefContent(content, parentInjector)
     } else if (content.kind === 'flexRenderComponent') {
-      return this.#renderComponent(content)
-    } else if (content.kind === 'component') {
-      return this.#renderCustomComponent(content)
-    } else {
-      return null
+      return this.#renderComponent(content, parentInjector)
     }
+    return this.#renderCustomComponent(content, props, parentInjector)
   }
 
   #renderStringContent(
     template: Extract<FlexRenderTypedContent, { kind: 'primitive' }>,
   ): FlexRenderTemplateView {
-    const context = () => {
-      const content = this.#content()
-      return typeof content === 'string' || typeof content === 'number'
-        ? content
-        : runInInjectionContext(this.#injector(), () =>
-            content?.(this.#props()),
-          )
-    }
+    const latestContent = () => untracked(this.#getContentValue)
     const ref = this.#viewContainerRef.createEmbeddedView(this.#templateRef, {
       get $implicit() {
-        return context()
+        // The view can be checked while an incompatible replacement is being
+        // scheduled. Only expose content that still belongs to this context.
+        const content = latestContent()
+        return content.kind === 'primitive' ? content.content : undefined
       },
     })
     return new FlexRenderTemplateView(template, ref)
@@ -313,16 +334,17 @@ export class FlexViewRenderer<
 
   #renderTemplateRefContent(
     template: Extract<FlexRenderTypedContent, { kind: 'templateRef' }>,
+    parentInjector: Injector,
   ): FlexRenderTemplateView {
-    const latestContext = () => this.#props()
+    const latestProps = () => untracked(this.#props)
     const view = this.#viewContainerRef.createEmbeddedView(
       template.content,
       {
         get $implicit() {
-          return latestContext()
+          return latestProps()
         },
       },
-      { injector: this.#getInjector() },
+      { injector: this.#getInjector(parentInjector) },
     )
     return new FlexRenderTemplateView(template, view)
   }
@@ -332,9 +354,9 @@ export class FlexViewRenderer<
       FlexRenderTypedContent,
       { kind: 'flexRenderComponent' }
     >,
+    parentInjector: Injector,
   ): FlexRenderComponentView {
-    const { injector } = flexRenderComponent.content
-    const componentInjector = this.#getInjector(injector)
+    const componentInjector = this.#getInjector(parentInjector)
     const view = this.#flexRenderComponentFactory.createComponent(
       flexRenderComponent.content,
       componentInjector,
@@ -344,11 +366,13 @@ export class FlexViewRenderer<
 
   #renderCustomComponent(
     component: Extract<FlexRenderTypedContent, { kind: 'component' }>,
+    props: TProps,
+    parentInjector: Injector,
   ): FlexRenderComponentView {
     const instance = flexRenderComponent(component.content, {
-      inputs: this.#props(),
+      inputs: props,
     })
-    const injector = this.#getInjector(instance.injector)
+    const injector = this.#getInjector(parentInjector)
     const view = this.#flexRenderComponentFactory.createComponent(
       instance,
       injector,
@@ -356,7 +380,7 @@ export class FlexViewRenderer<
     return new FlexRenderComponentView(component, view)
   }
 
-  #getInjector(parentInjector?: Injector) {
+  #getInjector(parentInjector: Injector) {
     const getContext = () => this.#props()
     const proxy = new Proxy(this.#props(), {
       get: (_, key) => getContext()[key as keyof typeof _],
@@ -383,7 +407,7 @@ export class FlexViewRenderer<
     }
 
     return Injector.create({
-      parent: parentInjector ?? this.#injector(),
+      parent: parentInjector,
       providers: [
         ...staticProviders,
         { provide: FlexRenderComponentProps, useValue: proxy },
diff --git a/packages/angular-table/src/flex-render/view.ts b/packages/angular-table/src/flex-render/view.ts
index 39e93c2675..902d0899ca 100644
--- a/packages/angular-table/src/flex-render/view.ts
+++ b/packages/angular-table/src/flex-render/view.ts
@@ -50,7 +50,6 @@ export abstract class FlexRenderView<
   TContent extends FlexRenderTypedContent,
 > {
   readonly view: TView
-  #previousContent: FlexRenderTypedContent | undefined
   #content: FlexRenderTypedContent
 
   protected constructor(
@@ -61,16 +60,11 @@ export abstract class FlexRenderView<
     this.view = view
   }
 
-  get previousContent(): FlexRenderTypedContent {
-    return this.#previousContent ?? { kind: 'null' }
-  }
-
   get content() {
     return this.#content
   }
 
   set content(content: FlexRenderTypedContent) {
-    this.#previousContent = this.#content
     this.#content = content
   }
 
@@ -78,9 +72,7 @@ export abstract class FlexRenderView<
 
   abstract dirtyCheck(): void
 
-  abstract onDestroy(callback: Function): void
-
-  abstract eq(view: TContent): boolean
+  abstract canReuse(content: TContent): boolean
 
   abstract unmount(): void
 }
@@ -106,36 +98,35 @@ export class FlexRenderTemplateView extends FlexRenderView<
   }
 
   override updateProps(_props: Record<string, any>) {
-    this.view.markForCheck()
+    if (this.content.kind === 'templateRef') {
+      // Template contexts are getter-backed. Mark the embedded view so Angular
+      // reads the latest props; the context object itself does not need to be
+      // replaced.
+      this.view.markForCheck()
+    }
   }
 
   override dirtyCheck() {
-    // Basically a no-op. When the view is created via EmbeddedViewRef, we don't need to do any manual update
-    // since this type of content has a proxy as a context, then every time the root component is checked for changes,
-    // the property getter will be re-evaluated.
-    //
-    // If in a future we need to manually mark the view as dirty, just uncomment next line
-    // this.view.markForCheck()
+    if (this.content.kind === 'primitive') {
+      // Primitive contexts are getter-backed too. The renderer has already
+      // memoized the new value, so checking the view is enough to refresh
+      // `$implicit` without mutating the context.
+      this.view.markForCheck()
+    }
   }
 
   override unmount() {
     this.view.destroy()
   }
 
-  override onDestroy(callback: Function) {
-    this.view.onDestroy(callback)
-  }
-
-  override eq(
+  override canReuse(
     compare: Extract<
       FlexRenderTypedContent,
       { kind: 'primitive' | 'templateRef' }
     >,
   ): boolean {
     return (
-      (this.content.kind === 'primitive' &&
-        compare.kind === 'primitive' &&
-        this.content.content === compare.content) ||
+      (this.content.kind === 'primitive' && compare.kind === 'primitive') ||
       (this.content.kind === 'templateRef' &&
         compare.kind === 'templateRef' &&
         this.content.content === compare.content)
@@ -170,8 +161,8 @@ export class FlexRenderComponentView extends FlexRenderView<
         break
       }
       case 'flexRenderComponent': {
-        // No-op. When FlexRenderFlags.PropsReferenceChanged is set,
-        // FlexRenderComponent will be updated into `dirtyCheck`.
+        // No-op. A props change can produce a new wrapper descriptor; its
+        // inputs and outputs are synchronized by `dirtyCheck`.
         break
       }
     }
@@ -187,8 +178,9 @@ export class FlexRenderComponentView extends FlexRenderView<
         break
       }
       case 'flexRenderComponent': {
-        // Given context instance will always have a different reference than the previous one,
-        // so instead of recreating the entire view, we will only update the current view
+        // Render functions commonly create a new descriptor on every run. If
+        // its type and key still identify the mounted instance, update that
+        // instance instead of recreating the component view.
         if (this.view.eqType(this.content.content)) {
           this.view.update(this.content.content)
         }
@@ -202,11 +194,7 @@ export class FlexRenderComponentView extends FlexRenderView<
     this.view.componentRef.destroy()
   }
 
-  override onDestroy(callback: Function) {
-    this.view.componentRef.onDestroy(callback)
-  }
-
-  override eq(
+  override canReuse(
     compare: Extract<
       FlexRenderTypedContent,
       { kind: 'component' | 'flexRenderComponent' }
@@ -218,7 +206,7 @@ export class FlexRenderComponentView extends FlexRenderView<
         this.content.content === compare.content) ||
       (this.content.kind === 'flexRenderComponent' &&
         compare.kind === 'flexRenderComponent' &&
-        this.content.content.component === compare.content.component)
+        this.view.canReuse(compare.content))
     )
   }
 }
diff --git a/packages/angular-table/src/helpers/flexRenderCell.ts b/packages/angular-table/src/helpers/flexRenderCell.ts
index 20f3a432f3..b96f02952d 100644
--- a/packages/angular-table/src/helpers/flexRenderCell.ts
+++ b/packages/angular-table/src/helpers/flexRenderCell.ts
@@ -130,12 +130,9 @@ export class FlexRenderCell<
   readonly #viewContainerRef = inject(ViewContainerRef)
 
   constructor() {
-    const content = computed(() => this.#renderData()[0])
-    const props = computed(() => this.#renderData()[1])
-
     const renderer = new FlexViewRenderer<TFeatures, TData, TValue, any>({
-      content: content,
-      props: props,
+      content: () => this.#renderData()[0],
+      props: () => this.#renderData()[1],
       injector: () => this.#injector,
       templateRef: this.#templateRef,
       viewContainerRef: this.#viewContainerRef,
diff --git a/packages/angular-table/src/injectTable.ts b/packages/angular-table/src/injectTable.ts
index 3486e93f7c..9cfeaca45a 100644
--- a/packages/angular-table/src/injectTable.ts
+++ b/packages/angular-table/src/injectTable.ts
@@ -99,14 +99,15 @@ export function injectTable<
 
   return ngZone.runOutsideAngular(() =>
     lazyInit(() => {
+      const initialOptions = options()
       // Explicit type arguments skip generic inference from the spread object
       // (a type-check hot spot); the spread only adds the angular reactivity
       // binding to `features`.
       const table = constructTable<TFeatures, TData>({
-        ...options(),
+        ...initialOptions,
         features: {
           coreReactivityFeature: angularReactivity(injector),
-          ...options().features,
+          ...initialOptions.features,
         },
       })
 
diff --git a/packages/angular-table/src/reactivity.ts b/packages/angular-table/src/reactivity.ts
index d35e0269ce..581e07f13e 100644
--- a/packages/angular-table/src/reactivity.ts
+++ b/packages/angular-table/src/reactivity.ts
@@ -21,9 +21,7 @@ function signalToReadonlyAtom<T>(
     get: () => signal(),
     subscribe: (observer: Observer<T>) => {
       return untracked(() =>
-        toObservable(computed(signal), { injector: injector }).subscribe(
-          observer,
-        ),
+        toObservable(signal, { injector: injector }).subscribe(observer),
       )
     },
   })
@@ -47,9 +45,7 @@ function signalToWritableAtom<T>(
     get: () => signal(),
     subscribe: (observer: Observer<T>) => {
       return untracked(() =>
-        toObservable(computed(signal), { injector: injector }).subscribe(
-          observer,
-        ),
+        toObservable(signal, { injector: injector }).subscribe(observer),
       )
     },
   })
diff --git a/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts b/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
index 698ec30ad7..638f90e400 100644
--- a/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
+++ b/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
@@ -12,4 +12,10 @@ test('Infer component inputs', () => {
 
   // Input is optional so we can skip passing the property
   flexRenderComponent(Test, { inputs: {} })
+
+  flexRenderComponent(Test, { key: 'stable-key' })
+  flexRenderComponent(Test, { key: 1 })
+
+  // @ts-expect-error Keys must have stable primitive identity
+  flexRenderComponent(Test, { key: {} })
 })
diff --git a/packages/angular-table/tests/flex-render/flex-render.bench.ts b/packages/angular-table/tests/flex-render/flex-render.bench.ts
new file mode 100644
index 0000000000..76e8a02a1c
--- /dev/null
+++ b/packages/angular-table/tests/flex-render/flex-render.bench.ts
@@ -0,0 +1,239 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { bench, describe } from 'vitest'
+import {
+  FlexRender,
+  flexRenderComponent,
+  injectTable,
+  stockFeatures,
+} from '../../src'
+import type { ColumnDef } from '../../src'
+
+const benchmarkOptions = { time: 2_000, warmupTime: 500 }
+
+@Component({
+  template: `
+    {{ tick() }}
+    @for (item of items; track item) {
+      <ng-container *flexRender="render; props: context; let value">
+        {{ value }}
+      </ng-container>
+    }
+  `,
+  imports: [FlexRender],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class PrimitiveTable {
+  readonly items = Array.from({ length: 500 }, (_, index) => index)
+  readonly value = signal('value')
+  readonly tick = signal(0)
+  readonly context = {}
+  readonly render = () => this.value()
+}
+
+@Component({
+  template: ``,
+})
+class RenderedComponent {}
+
+describe('flexRender hot paths', () => {
+  const fixture = TestBed.createComponent(PrimitiveTable)
+  fixture.detectChanges()
+
+  bench(
+    'unrelated change detection for 500 primitive cells',
+    () => {
+      fixture.componentInstance.tick.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'create 500 component render descriptors',
+    () => {
+      for (let index = 0; index < 500; index++) {
+        flexRenderComponent(RenderedComponent)
+      }
+    },
+    benchmarkOptions,
+  )
+})
+
+interface BenchmarkRow {
+  id: string
+  values: Array<string>
+}
+
+const rowCount = 100
+const columnCount = 12
+const largeTableData: Array<BenchmarkRow> = Array.from(
+  { length: rowCount },
+  (_, rowIndex) => ({
+    id: `row-${rowIndex}`,
+    values: Array.from(
+      { length: columnCount },
+      (_, columnIndex) => `${rowIndex}:${columnIndex}`,
+    ),
+  }),
+)
+const handleActivate = () => {}
+
+@Component({
+  selector: 'benchmark-cell-a',
+  template: `<button (click)="activate.emit()">
+    A {{ value() }}:{{ version() }}
+  </button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class BenchmarkCellA {
+  readonly value = input.required<string>()
+  readonly version = input.required<number>()
+  readonly activate = output<void>()
+}
+
+@Component({
+  selector: 'benchmark-cell-b',
+  template: `<button (click)="activate.emit()">
+    B {{ value() }}:{{ version() }}
+  </button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class BenchmarkCellB {
+  readonly value = input.required<string>()
+  readonly version = input.required<number>()
+  readonly activate = output<void>()
+}
+
+@Component({
+  template: `
+    <span data-host-tick>{{ hostTick() }}</span>
+    <table>
+      <tbody>
+        @for (row of table.getRowModel().rows; track row.id) {
+          <tr>
+            @for (cell of row.getVisibleCells(); track cell.id) {
+              <td>
+                <ng-container *flexRenderCell="cell; let value">
+                  {{ value }}
+                </ng-container>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+  imports: [FlexRender],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class LargeMixedTable {
+  readonly hostTick = signal(0)
+  readonly valueVersion = signal(0)
+  readonly componentKind = signal<'a' | 'b'>('a')
+  readonly contentKind = signal<'primitive' | 'component'>('primitive')
+
+  readonly columns: Array<ColumnDef<typeof stockFeatures, BenchmarkRow, any>> =
+    Array.from({ length: columnCount }, (_, columnIndex) => ({
+      id: `column-${columnIndex}`,
+      accessorFn: (row) => row.values[columnIndex]!,
+      cell: (context) => {
+        const value = context.getValue()
+
+        // Four primitive columns whose values change in place.
+        if (columnIndex < 4) {
+          return `${value}:${this.valueVersion()}`
+        }
+
+        // Four stable component columns whose inputs change frequently.
+        if (columnIndex < 8) {
+          const component =
+            columnIndex % 2 === 0 ? BenchmarkCellA : BenchmarkCellB
+          return flexRenderComponent(component, {
+            inputs: { value, version: this.valueVersion() },
+            outputs: { activate: handleActivate },
+          })
+        }
+
+        // Two columns that intentionally replace component A with component B.
+        if (columnIndex < 10) {
+          const component =
+            this.componentKind() === 'a' ? BenchmarkCellA : BenchmarkCellB
+          return flexRenderComponent(component, {
+            inputs: { value, version: 0 },
+            outputs: { activate: handleActivate },
+          })
+        }
+
+        // Two columns that cross the primitive/component view boundary.
+        return this.contentKind() === 'primitive'
+          ? value
+          : flexRenderComponent(BenchmarkCellA, {
+              inputs: { value, version: 0 },
+              outputs: { activate: handleActivate },
+            })
+      },
+    }))
+
+  readonly table = injectTable(() => ({
+    data: largeTableData,
+    columns: this.columns,
+    features: stockFeatures,
+    getRowId: (row) => row.id,
+  }))
+}
+
+describe('flexRender large mixed table', () => {
+  const fixture = TestBed.createComponent(LargeMixedTable)
+  fixture.detectChanges()
+
+  const instance = fixture.componentInstance
+  const renderedCellCount = fixture.nativeElement.querySelectorAll('td').length
+  if (renderedCellCount !== rowCount * columnCount) {
+    throw new Error(`Expected 1,200 cells, rendered ${renderedCellCount}`)
+  }
+
+  bench(
+    'unrelated host change with 1,200 mounted cells',
+    () => {
+      instance.hostTick.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'update 400 primitives and 400 stable component inputs',
+    () => {
+      instance.valueVersion.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'replace 200 component A/B cell views',
+    () => {
+      instance.componentKind.update((value) => (value === 'a' ? 'b' : 'a'))
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'switch 200 cells between primitive and component views',
+    () => {
+      instance.contentKind.update((value) =>
+        value === 'primitive' ? 'component' : 'primitive',
+      )
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+})
diff --git a/packages/angular-table/tests/flex-render/flex-render.unit.test.ts b/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
index 34c1c07797..e92ca5638c 100644
--- a/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
+++ b/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
@@ -1,19 +1,15 @@
-import {
-  Component,
-  input,
-  signal,
-  ViewChild,
-  type TemplateRef,
-} from '@angular/core'
-import { TestBed, type ComponentFixture } from '@angular/core/testing'
-import { describe, expect, test } from 'vitest'
+import { Component, ViewChild, input, output, signal } from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { describe, expect, test, vi } from 'vitest'
 import {
   FlexRender,
-  flexRenderComponent,
   FlexRenderDirective,
+  flexRenderComponent,
   injectFlexRenderContext,
 } from '../../src'
 import { setFixtureSignalInput, setFixtureSignalInputs } from '../test-utils'
+import type { ComponentFixture } from '@angular/core/testing'
+import type { TemplateRef } from '@angular/core'
 
 describe('FlexRenderDirective', () => {
   test('should render primitives', () => {
@@ -62,6 +58,123 @@ describe('FlexRenderDirective', () => {
     expect((fixture.nativeElement as HTMLElement).matches(':empty')).toBe(true)
   })
 
+  test('should evaluate and update primitive content only when its dependencies change', () => {
+    const value = signal('Initial value')
+    const render = vi.fn(() => value())
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: render,
+      context: {},
+    })
+
+    const initialSpan = fixture.nativeElement.querySelector('span')
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(initialSpan.textContent).toEqual('Initial value')
+
+    fixture.detectChanges()
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.querySelector('span')).toBe(initialSpan)
+
+    value.set('Updated value')
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(2)
+    expect(fixture.nativeElement.querySelector('span')).toBe(initialSpan)
+    expect(initialSpan.textContent).toEqual('Updated value')
+  })
+
+  test('should memoize resolved content across input and internal signal updates', () => {
+    const value = signal('first')
+    const render = vi.fn(
+      (context: Record<string, unknown>) => `${context['label']}:${value()}`,
+    )
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: render,
+      context: { label: 'initial' },
+    })
+
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('initial:first')
+
+    setFixtureSignalInput(fixture, 'context', { label: 'updated' })
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(2)
+    expect(fixture.nativeElement.textContent).toEqual('updated:first')
+
+    value.set('second')
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(3)
+    expect(fixture.nativeElement.textContent).toEqual('updated:second')
+  })
+
+  test('should replace render-function effects when the content input changes', () => {
+    const firstValue = signal('first')
+    const secondValue = signal('second')
+    const firstRender = vi.fn(() => firstValue())
+    const secondRender = vi.fn(() => secondValue())
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: firstRender,
+      context: {},
+    })
+
+    expect(firstRender).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('first')
+
+    setFixtureSignalInput(fixture, 'content', secondRender)
+    fixture.detectChanges()
+
+    expect(secondRender).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('second')
+
+    firstValue.set('stale first')
+    fixture.detectChanges()
+
+    expect(firstRender).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('second')
+
+    setFixtureSignalInput(fixture, 'content', 'static')
+    fixture.detectChanges()
+    secondValue.set('stale second')
+    fixture.detectChanges()
+
+    expect(secondRender).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('static')
+
+    setFixtureSignalInput(fixture, 'content', firstRender)
+    fixture.detectChanges()
+    firstValue.set('live first')
+    fixture.detectChanges()
+
+    expect(firstRender).toHaveBeenCalledTimes(3)
+    expect(fixture.nativeElement.textContent).toEqual('live first')
+  })
+
+  test('should react when a render function changes from null to content', () => {
+    const visible = signal(false)
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: () => (visible() ? 'Visible' : null),
+      context: {},
+    })
+
+    expect((fixture.nativeElement as HTMLElement).matches(':empty')).toBe(true)
+
+    visible.set(true)
+    fixture.detectChanges()
+
+    expectPrimitiveValueIs(fixture, 'Visible')
+  })
+
   test('should render TemplateRef', () => {
     @Component({
       template: `
@@ -122,6 +235,229 @@ describe('FlexRenderDirective', () => {
     expect(fixture.nativeElement.textContent).toEqual('Updated value')
   })
 
+  test('should release and restore component output subscriptions', () => {
+    @Component({
+      template: `<button (click)="changed.emit()">Emit</button>`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly changed = output<void>()
+    }
+
+    const enabled = signal(true)
+    const listener = vi.fn()
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(FakeComponent, {
+          outputs: enabled() ? { changed: listener } : {},
+        }),
+      context: {},
+    })
+
+    const button = fixture.nativeElement.querySelector(
+      'button',
+    ) as HTMLButtonElement
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    enabled.set(false)
+    fixture.detectChanges()
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    enabled.set(true)
+    fixture.detectChanges()
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(2)
+    expect(fixture.nativeElement.querySelector('button')).toBe(button)
+  })
+
+  test('should set component inputs by property name when they have an alias', () => {
+    @Component({
+      template: `{{ value() }}`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly value = input('', { alias: 'aliasedValue' })
+    }
+
+    const fixture = TestBed.createComponent(TestRenderComponent)
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(FakeComponent, {
+          inputs: { value: 'Aliased input value' },
+        }),
+      context: {},
+    })
+
+    expect(fixture.nativeElement.textContent).toEqual('Aliased input value')
+  })
+
+  test('should subscribe to aliased outputs by property name', () => {
+    @Component({
+      template: `<button (click)="changed.emit()">Emit</button>`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly changed = output<void>({ alias: 'aliasedChanged' })
+    }
+
+    const listener = vi.fn()
+    const fixture = TestBed.createComponent(TestRenderComponent)
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(FakeComponent, {
+          outputs: { changed: listener },
+        }),
+      context: {},
+    })
+
+    fixture.nativeElement.querySelector('button').click()
+
+    expect(listener).toHaveBeenCalledTimes(1)
+  })
+
+  test('should preserve omitted inputs and forward explicit undefined', () => {
+    @Component({
+      selector: 'app-patched-input-component',
+      template: `{{ value() === undefined ? 'undefined' : value() }}`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly value = input<string | undefined>('initial')
+    }
+
+    const mode = signal<'set' | 'omit' | 'clear'>('set')
+    const fixture = TestBed.createComponent(TestRenderComponent)
+    setFixtureSignalInputs(fixture, {
+      content: () => {
+        const currentMode = mode()
+        const inputs: { value?: string | undefined } =
+          currentMode === 'set'
+            ? { value: 'updated' }
+            : currentMode === 'clear'
+              ? { value: undefined }
+              : {}
+        return flexRenderComponent(FakeComponent, { inputs })
+      },
+      context: {},
+    })
+
+    const initialHost = fixture.nativeElement.querySelector(
+      'app-patched-input-component',
+    )
+    expect(initialHost.textContent).toEqual('updated')
+
+    mode.set('omit')
+    fixture.detectChanges()
+
+    expect(
+      fixture.nativeElement.querySelector('app-patched-input-component'),
+    ).toBe(initialHost)
+    expect(initialHost.textContent).toEqual('updated')
+
+    mode.set('clear')
+    fixture.detectChanges()
+
+    expect(initialHost.textContent).toEqual('undefined')
+  })
+
+  test('should reuse a component by type and key and recreate it when the key changes', () => {
+    @Component({
+      selector: 'app-keyed-component',
+      template: `{{ value() }}`,
+      standalone: true,
+    })
+    class KeyedComponent {
+      readonly value = input.required<string>()
+    }
+
+    const key = signal<string | number>('first')
+    const value = signal('Initial value')
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(KeyedComponent, {
+          key: key(),
+          inputs: { value: value() },
+          // These creation-time arrays are intentionally recreated whenever
+          // the render function runs. They do not affect reuse without a new key.
+          bindings: [],
+          directives: [],
+        }),
+      context: {},
+    })
+
+    const initialHost = fixture.nativeElement.querySelector(
+      'app-keyed-component',
+    )
+    expect(initialHost.textContent).toEqual('Initial value')
+
+    value.set('Updated value')
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.querySelector('app-keyed-component')).toBe(
+      initialHost,
+    )
+    expect(initialHost.textContent).toEqual('Updated value')
+
+    key.set(2)
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.querySelector('app-keyed-component')).not.toBe(
+      initialHost,
+    )
+    expect(fixture.nativeElement.textContent).toEqual('Updated value')
+  })
+
+  test('should recreate content when the content function reference changes', () => {
+    @Component({
+      selector: 'app-reusable-component',
+      template: `{{ value() }}`,
+      standalone: true,
+    })
+    class ReusableComponent {
+      readonly value = input.required<string>()
+    }
+
+    const firstRender = vi.fn(() =>
+      flexRenderComponent(ReusableComponent, {
+        key: 'stable',
+        inputs: { value: 'first' },
+      }),
+    )
+    const secondRender = vi.fn(() =>
+      flexRenderComponent(ReusableComponent, {
+        key: 'stable',
+        inputs: { value: 'second' },
+      }),
+    )
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: firstRender,
+      context: {},
+    })
+
+    const initialHost = fixture.nativeElement.querySelector(
+      'app-reusable-component',
+    )
+    expect(firstRender).toHaveBeenCalledTimes(1)
+    expect(initialHost.textContent).toEqual('first')
+
+    setFixtureSignalInput(fixture, 'content', secondRender)
+    fixture.detectChanges()
+
+    expect(secondRender).toHaveBeenCalledTimes(1)
+    expect(
+      fixture.nativeElement.querySelector('app-reusable-component'),
+    ).not.toBe(initialHost)
+    expect(fixture.nativeElement.textContent).toEqual('second')
+  })
+
   test('should rerender when content has conditional return with different component types', () => {
     @Component({
       selector: 'app-fake-a',
@@ -160,8 +496,6 @@ describe('FlexRenderDirective', () => {
     expect(fixture.nativeElement.textContent).toEqual('B component')
   })
 
-  // Skip for now, test framework (using ComponentRef.setInput) cannot recognize signal inputs
-  // as component inputs
   test('should render custom components', async () => {
     @Component({
       template: `{{ row().property }}`,
@@ -193,6 +527,36 @@ describe('FlexRenderDirective', () => {
 
     expect(fixture.nativeElement.textContent).toEqual('Updated value')
   })
+
+  test('should ignore context properties that are not component inputs', () => {
+    @Component({
+      template: `{{ row() }}`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly row = input.required<string>()
+    }
+
+    const consoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
+    try {
+      const fixture = TestBed.createComponent(TestRenderComponent)
+      setFixtureSignalInputs(fixture, {
+        content: () => FakeComponent,
+        context: {
+          row: 'Known input',
+          unknownContextProperty: 'Ignored value',
+        },
+      })
+
+      expect(fixture.nativeElement.textContent).toEqual('Known input')
+      expect(consoleError).not.toHaveBeenCalled()
+    } finally {
+      consoleError.mockRestore()
+    }
+  })
 })
 
 @Component({
diff --git a/packages/angular-table/tests/injectTable.test.ts b/packages/angular-table/tests/injectTable.test.ts
index aee244543d..20b84a7af9 100644
--- a/packages/angular-table/tests/injectTable.test.ts
+++ b/packages/angular-table/tests/injectTable.test.ts
@@ -17,6 +17,21 @@ import { injectTable } from '../src'
 import type { PaginationState } from '../src'
 
 describe('injectTable', () => {
+  test('evaluates options once while constructing the table', () => {
+    const options = vi.fn(() => ({
+      data: [],
+      features: stockFeatures,
+      columns: [],
+    }))
+    const table = TestBed.runInInjectionContext(() => injectTable(options))
+
+    expect(options).not.toHaveBeenCalled()
+
+    void table.options
+
+    expect(options).toHaveBeenCalledTimes(1)
+  })
+
   test('should support required signal inputs', async () => {
     type Data = { id: string; title: string }
 

From 9e871de15002ef37c74f6153fe8d14332552c35b Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Fri, 7 Aug 2026 01:25:53 +0200
Subject: [PATCH 04/23] perf: revisit angular adapter to improve memory usage
 and flexrender dirty checking

---
 packages/angular-table/package.json           |   1 +
 .../angular-table/src/flex-render/flags.ts    |  29 +-
 .../src/flex-render/flexRenderComponent.ts    | 110 +++--
 .../flex-render/flexRenderComponentFactory.ts | 174 ++++----
 .../angular-table/src/flex-render/renderer.ts | 208 +++++-----
 .../angular-table/src/flex-render/view.ts     |  56 +--
 packages/angular-table/src/injectTable.ts     |   5 +-
 packages/angular-table/src/reactivity.ts      |   8 +-
 .../flex-render-component.test-d.ts           |   6 +
 .../tests/flex-render/flex-render.bench.ts    | 239 +++++++++++
 .../flex-render/flex-render.unit.test.ts      | 388 +++++++++++++++++-
 .../angular-table/tests/injectTable.test.ts   |  15 +
 12 files changed, 961 insertions(+), 278 deletions(-)
 create mode 100644 packages/angular-table/tests/flex-render/flex-render.bench.ts

diff --git a/packages/angular-table/package.json b/packages/angular-table/package.json
index c902d00f7c..00c0634c78 100644
--- a/packages/angular-table/package.json
+++ b/packages/angular-table/package.json
@@ -56,6 +56,7 @@
   "scripts": {
     "build": "ng-packagr -p ng-package.json -c tsconfig.build.json && rimraf ./dist/package.json && find dist -name '*.map' -delete",
     "build:types": "tsc --emitDeclarationOnly",
+    "bench:flex-render": "vitest bench --run tests/flex-render/flex-render.bench.ts",
     "clean": "rimraf ./build && rimraf ./dist",
     "test:build": "publint --strict",
     "test:eslint": "eslint ./src",
diff --git a/packages/angular-table/src/flex-render/flags.ts b/packages/angular-table/src/flex-render/flags.ts
index e265c847c8..6a26987f8b 100644
--- a/packages/angular-table/src/flex-render/flags.ts
+++ b/packages/angular-table/src/flex-render/flags.ts
@@ -1,34 +1,33 @@
 /**
- * Flags used to manage and optimize the rendering lifecycle of the content of the cell
- * while using {@link FlexViewRenderer}.
+ * Flags used to manage and optimize the rendering lifecycle of content inside
+ * {@link FlexViewRenderer}.
  */
 export const FlexRenderFlags = {
   /**
-   * Indicates that the view is being created for the first time or will be cleared during the next update phase.
-   * This is the initial state and will transition after the first ngDoCheck.
+   * The renderer has not completed its initial update. The first update creates
+   * the view from scratch, then clears this flag.
    */
   ViewFirstRender: 1 << 0,
   /**
-   * Indicates the `content` property has been modified or the view requires a complete re-render.
-   * When this flag is enabled, the view will be cleared and recreated from scratch.
+   * The `content` input changed by reference, or its resolved value is not
+   * compatible with the mounted view. The next update recreates the view.
    */
   ContentChanged: 1 << 1,
   /**
-   * Indicates that the `props` property reference has changed.
-   * When this flag is enabled, the view context is updated based on the type of the content.
-   *
-   * For Component view, inputs will be updated and view will be marked as dirty.
-   * For TemplateRef and primitive values, view will be marked as dirty
+   * The `props` input changed by reference. Components receive the latest
+   * inputs and embedded templates are marked so their getter-backed context is
+   * evaluated again.
    */
   PropsReferenceChanged: 1 << 2,
   /**
-   * Indicates that the current rendered view needs to be checked for changes.
-   * This will be set to true when `content(props)` result has changed or during
-   * forced update
+   * A render function produced compatible content that must be synchronized
+   * with the mounted view without recreating it.
    */
   Dirty: 1 << 3,
   /**
-   * Indicates that the first render effect has been checked at least one time.
+   * The render-function effect completed its initial dependency read. That
+   * first execution records dependencies; subsequent executions update the
+   * view.
    */
   RenderEffectChecked: 1 << 4,
 } as const
diff --git a/packages/angular-table/src/flex-render/flexRenderComponent.ts b/packages/angular-table/src/flex-render/flexRenderComponent.ts
index 5dc958c352..396b2a0017 100644
--- a/packages/angular-table/src/flex-render/flexRenderComponent.ts
+++ b/packages/angular-table/src/flex-render/flexRenderComponent.ts
@@ -17,11 +17,35 @@ interface FlexRenderOptions<
   TInputs extends Record<string, any>,
   TOutputs extends Record<string, any>,
 > {
+  /**
+   * Optional identity used to control component instance reuse.
+   *
+   * A rendered component is reused while both its component type and key are
+   * unchanged. Change the key to explicitly destroy and recreate the component,
+   * for example when new creation-time bindings, directives, or an injector
+   * need to be applied.
+   *
+   * Inputs and outputs do not affect component identity and are synchronized
+   * onto a reused component instance.
+   *
+   * @example
+   * ```ts
+   * flexRenderComponent(EditorComponent, {
+   *   key: row.original.editorVersion,
+   *   inputs: { value: row.original.value },
+   * })
+   * ```
+   */
+  readonly key?: string | number
   /**
    * Native Angular bindings applied at component creation time via `createComponent`.
    * Use this option to set inputs, outputs, or two-way bindings at creation time.
    * Shouldn't be used together with {@link FlexRenderOptions#inputs} or {@link FlexRenderOptions#outputs} option.
    *
+   * Bindings are creation-time configuration. Changing this array after the
+   * component has mounted does not update the existing component. Change
+   * {@link FlexRenderOptions#key} to recreate the component with new bindings.
+   *
    * Binding input/outputs at creation time: {@link https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation}
    *
    * Two-way binding: {@link https://angular.dev/api/core/twoWayBinding}
@@ -54,6 +78,10 @@ interface FlexRenderOptions<
   /**
    * Directives to apply to the component at creation time.
    *
+   * Directives are creation-time configuration. Changing this array after the
+   * component has mounted does not update the existing component. Change
+   * {@link FlexRenderOptions#key} to recreate the component with new directives.
+   *
    * Binding directives at creation time: {@link https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation}
    *
    * Two-way binding: {@link https://angular.dev/api/core/twoWayBinding}
@@ -88,6 +116,8 @@ interface FlexRenderOptions<
    *
    * These values are assigned after the component has been created using
    * [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput).
+   * On a reused component, omitted keys keep their current value. Pass
+   * `undefined` explicitly when an input needs to be cleared.
    *
    * Shouldn't be used together with {@link FlexRenderOptions#bindings} option
    */
@@ -101,7 +131,11 @@ interface FlexRenderOptions<
    */
   readonly outputs?: TOutputs
   /**
-   * Optional {@link Injector} that will be used when rendering the component
+   * Optional {@link Injector} that will be used when rendering the component.
+   *
+   * The injector is applied when the component is created. Change
+   * {@link FlexRenderOptions#key} to recreate a mounted component with a
+   * different injector.
    */
   readonly injector?: Injector
 }
@@ -151,7 +185,7 @@ export function flexRenderComponent<TComponent = any>(
   component: Type<TComponent>,
   options?: FlexRenderOptions<Inputs<TComponent>, Outputs<TComponent>>,
 ): FlexRenderComponent<TComponent> {
-  const { inputs, injector, outputs, directives, bindings } = options ?? {}
+  const { key, inputs, injector, outputs, directives, bindings } = options ?? {}
   return new FlexRenderComponentInstance(
     component,
     inputs,
@@ -159,6 +193,7 @@ export function flexRenderComponent<TComponent = any>(
     outputs,
     directives,
     bindings,
+    key,
   )
 }
 
@@ -208,17 +243,20 @@ export interface FlexRenderComponent<TComponent = any> {
    */
   readonly component: Type<TComponent>
   /**
-   * Reflected metadata about the component.
+   * Optional identity used together with the component type to decide whether
+   * an existing component instance can be reused.
+   *
+   * @see {@link FlexRenderOptions#key}
    */
-  readonly mirror: ComponentMirror<TComponent>
+  readonly key?: string | number
   /**
-   * List of allowed input names.
+   * Reflected metadata about the component.
    */
-  readonly allowedInputNames: Array<string>
+  readonly mirror: ComponentMirror<TComponent>
   /**
-   * List of allowed output names.
+   * Cached component metadata used by the flex renderer.
    */
-  readonly allowedOutputNames: Array<string>
+  readonly metadata: ResolvedComponentMetadata<TComponent>
   /**
    * Component instance outputs. Subscribed via {@link OutputEmitterRef#subscribe}
    *
@@ -254,14 +292,13 @@ export interface FlexRenderComponent<TComponent = any> {
 /**
  * Wrapper class for a component that will be used as content for {@link FlexRenderDirective}
  *
- * Prefer {@link flexRenderComponent} helper for better type-safety
+ * Prefer {@link flexRenderComponent} for better type-safety.
  */
 export class FlexRenderComponentInstance<
   TComponent = any,
 > implements FlexRenderComponent<TComponent> {
   readonly mirror: ComponentMirror<TComponent>
-  readonly allowedInputNames: Array<string> = []
-  readonly allowedOutputNames: Array<string> = []
+  readonly metadata: ResolvedComponentMetadata<TComponent>
 
   constructor(
     readonly component: Type<TComponent>,
@@ -270,19 +307,46 @@ export class FlexRenderComponentInstance<
     readonly outputs?: Outputs<TComponent>,
     readonly directives?: CreateComponentDirectives,
     readonly bindings?: CreateComponentBindings,
+    readonly key?: string | number,
   ) {
-    const mirror = reflectComponentType(component)
-    if (!mirror) {
-      throw new Error(
-        `[@tanstack-table/angular] The provided symbol is not a component`,
-      )
-    }
-    this.mirror = mirror
-    for (const input of this.mirror.inputs) {
-      this.allowedInputNames.push(input.propName)
-    }
-    for (const output of this.mirror.outputs) {
-      this.allowedOutputNames.push(output.propName)
+    this.metadata = resolveComponentTypeMetadata(component)
+    this.mirror = this.metadata.mirror
+  }
+}
+
+interface ResolvedComponentMetadata<TComponent = unknown> {
+  readonly mirror: ComponentMirror<TComponent>
+  readonly inputNames: ReadonlyMap<string, string>
+  readonly outputNames: ReadonlySet<string>
+}
+
+const typeCache = new WeakMap<Type<unknown>, ResolvedComponentMetadata>()
+
+function resolveComponentTypeMetadata<T>(
+  type: Type<T>,
+): ResolvedComponentMetadata<T> {
+  let metadata = typeCache.get(type) as ResolvedComponentMetadata<T> | undefined
+  if (metadata) return metadata
+  const mirror = reflectComponentType(type)
+  if (!mirror) {
+    throw new Error(
+      `[@tanstack-table/angular] The provided symbol is not a component`,
+    )
+  }
+  const inputNames = new Map<string, string>()
+  const outputNames = new Set<string>()
+  for (const input of mirror.inputs) {
+    inputNames.set(input.propName, input.templateName)
+    if (input.templateName !== input.propName) {
+      inputNames.set(input.templateName, input.templateName)
     }
   }
+  for (const output of mirror.outputs) {
+    // Outputs are read from the component instance, so only their class
+    // property names are valid here. Template aliases are not instance keys.
+    outputNames.add(output.propName)
+  }
+  metadata = { mirror, inputNames, outputNames }
+  typeCache.set(type, metadata)
+  return metadata
 }
diff --git a/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts b/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
index 0cd39c79ea..2764bc2d3b 100644
--- a/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
+++ b/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
@@ -3,13 +3,12 @@ import {
   ComponentRef,
   Injectable,
   Injector,
-  KeyValueDiffer,
-  KeyValueDiffers,
   OutputEmitterRef,
   OutputRefSubscription,
   ViewContainerRef,
 } from '@angular/core'
-import { FlexRenderComponent } from './flexRenderComponent'
+import { hasOwn } from '@tanstack/table-core'
+import type { FlexRenderComponent } from './flexRenderComponent'
 
 /**
  * Creates and manages Angular component instances used by flex-rendered table
@@ -32,7 +31,7 @@ export class FlexRenderComponentFactory {
       {
         injector: componentInjector,
         directives: flexRenderComponent.directives,
-        bindings: flexRenderComponent.bindings ?? [],
+        bindings: flexRenderComponent.bindings,
       },
     )
     const view = new FlexRenderComponentRef(
@@ -57,10 +56,8 @@ export class FlexRenderComponentFactory {
  * be reused instead of recreated on every cell/header render.
  */
 export class FlexRenderComponentRef<T> {
-  readonly #keyValueDiffersFactory: KeyValueDiffers
   #componentData: FlexRenderComponent<T>
-  #inputValueDiffer: KeyValueDiffer<string, unknown>
-
+  readonly #creationKey: FlexRenderComponent<T>['key']
   readonly #outputRegistry: FlexRenderComponentOutputManager
 
   constructor(
@@ -69,18 +66,8 @@ export class FlexRenderComponentRef<T> {
     readonly componentInjector: Injector,
   ) {
     this.#componentData = componentData
-    this.#keyValueDiffersFactory = componentInjector.get(KeyValueDiffers)
-
-    this.#outputRegistry = new FlexRenderComponentOutputManager(
-      this.#keyValueDiffersFactory,
-      this.outputs,
-    )
-
-    this.#inputValueDiffer = this.#keyValueDiffersFactory
-      .find(this.inputs)
-      .create()
-    this.#inputValueDiffer.diff(this.inputs)
-
+    this.#creationKey = componentData.key
+    this.#outputRegistry = new FlexRenderComponentOutputManager()
     this.componentRef.onDestroy(() => this.#outputRegistry.unsubscribeAll())
   }
 
@@ -96,15 +83,6 @@ export class FlexRenderComponentRef<T> {
     return this.#componentData.outputs ?? {}
   }
 
-  /**
-   * Get component input and output diff by the given item
-   */
-  diff(item: FlexRenderComponent<T>) {
-    return {
-      inputDiff: this.#inputValueDiffer.diff(item.inputs ?? {}),
-      outputDiff: this.#outputRegistry.diff(item.outputs ?? {}),
-    }
-  }
   /**
    *
    * @param compare Whether the current ref component instance is the same as the given one
@@ -113,37 +91,18 @@ export class FlexRenderComponentRef<T> {
     return compare.component === this.component
   }
 
+  canReuse(compare: FlexRenderComponent<T>): boolean {
+    return this.eqType(compare) && Object.is(compare.key, this.#creationKey)
+  }
+
   /**
    * Tries to update current component refs input by the new given content component.
    */
-  update(content: FlexRenderComponent<T>) {
-    const eq = this.eqType(content)
-    if (!eq) return
-    const { inputDiff, outputDiff } = this.diff(content)
-    if (inputDiff) {
-      inputDiff.forEachAddedItem((item) =>
-        this.setInput(item.key, item.currentValue),
-      )
-      inputDiff.forEachChangedItem((item) =>
-        this.setInput(item.key, item.currentValue),
-      )
-      inputDiff.forEachRemovedItem((item) => this.setInput(item.key, undefined))
-    }
-    if (outputDiff) {
-      outputDiff.forEachAddedItem((item) => {
-        this.setOutput(item.key, item.currentValue)
-      })
-      outputDiff.forEachChangedItem((item) => {
-        if (item.currentValue) {
-          this.#outputRegistry.setListener(item.key, item.currentValue)
-        } else {
-          this.#outputRegistry.unsubscribe(item.key)
-        }
-      })
-      outputDiff.forEachRemovedItem((item) => {
-        this.#outputRegistry.unsubscribe(item.key)
-      })
-    }
+  update(content: FlexRenderComponent<T>): void {
+    if (!this.canReuse(content)) return
+
+    this.#syncInputs(content.inputs ?? {})
+    this.#syncOutputs(content.outputs ?? {})
 
     this.#componentData = content
   }
@@ -159,9 +118,9 @@ export class FlexRenderComponentRef<T> {
   }
 
   setInput(key: string, value: unknown) {
-    if (this.#componentData.allowedInputNames.includes(key)) {
-      this.componentRef.setInput(key, value)
-    }
+    const inputName = this.#componentData.metadata.inputNames.get(key)
+    if (inputName === undefined) return
+    this.componentRef.setInput(inputName, value)
   }
 
   setOutputs(
@@ -177,75 +136,102 @@ export class FlexRenderComponentRef<T> {
   }
 
   setOutput(
-    outputName: string,
+    key: string,
     emit: OutputEmitterRef<unknown>['emit'] | undefined | null,
   ): void {
-    if (!this.#componentData.allowedOutputNames.includes(outputName)) return
+    if (!this.#componentData.metadata.outputNames.has(key)) return
+    const outputName = key
     if (!emit) {
       this.#outputRegistry.unsubscribe(outputName)
       return
     }
 
-    const hasListener = this.#outputRegistry.hasListener(outputName)
+    // If the output was already subscribed, just swap the listener callback.
+    const hasSubscription = this.#outputRegistry.hasSubscription(outputName)
     this.#outputRegistry.setListener(outputName, emit)
 
-    if (hasListener) {
+    if (hasSubscription) {
       return
     }
 
     const instance = this.componentRef.instance
     const output = instance[outputName as keyof typeof instance]
     if (output && output instanceof OutputEmitterRef) {
-      output.subscribe((value) => {
-        this.#outputRegistry.getListener(outputName)?.(value)
-      })
+      this.#outputRegistry.setSubscription(
+        outputName,
+        output.subscribe((value) => {
+          this.#outputRegistry.getListener(outputName)?.(value)
+        }),
+      )
+    }
+  }
+
+  #syncInputs(newInputs: Record<string, unknown>): void {
+    // Inputs use patch semantics: omitted keys keep their current value, while
+    // an explicitly provided `undefined` is forwarded to Angular.
+    for (const prop in newInputs) {
+      if (hasOwn(newInputs, prop)) {
+        this.setInput(prop, newInputs[prop])
+      }
+    }
+  }
+
+  #syncOutputs(
+    outputs: Record<
+      string,
+      OutputEmitterRef<unknown>['emit'] | null | undefined
+    >,
+  ): void {
+    const outputKeys = Object.keys(outputs)
+    const currentSubscribedKeys = this.#outputRegistry.getSubscribedKeys()
+    // When outputs updates, unsubscribe missing keys
+    for (const key of currentSubscribedKeys) {
+      if (!outputKeys.includes(key)) {
+        this.#outputRegistry.unsubscribe(key)
+      }
+    }
+    for (const prop in outputs) {
+      this.setOutput(prop, outputs[prop])
     }
   }
 }
 
 class FlexRenderComponentOutputManager {
-  readonly #outputSubscribers: Record<string, OutputRefSubscription> = {}
-  readonly #outputListeners: Record<string, (...args: Array<any>) => void> = {}
-
-  readonly #valueDiffer: KeyValueDiffer<
-    string,
-    undefined | null | OutputEmitterRef<unknown>['emit']
-  >
-
-  constructor(keyValueDiffers: KeyValueDiffers, initialOutputs: any) {
-    this.#valueDiffer = keyValueDiffers.find(initialOutputs).create()
-    if (initialOutputs) {
-      this.#valueDiffer.diff(initialOutputs)
-    }
+  readonly #outputSubscribers = new Map<string, OutputRefSubscription>()
+  readonly #outputListeners = new Map<string, (...args: Array<any>) => void>()
+
+  getSubscribedKeys() {
+    return Array.from(this.#outputListeners.keys())
   }
 
-  hasListener(outputName: string) {
-    return outputName in this.#outputListeners
+  hasSubscription(outputName: string) {
+    return this.#outputSubscribers.has(outputName)
   }
 
   setListener(outputName: string, callback: (...args: Array<any>) => void) {
-    this.#outputListeners[outputName] = callback
+    this.#outputListeners.set(outputName, callback)
   }
 
   getListener(outputName: string) {
-    return this.#outputListeners[outputName]
+    return this.#outputListeners.get(outputName)
   }
 
-  unsubscribeAll(): void {
-    for (const prop in this.#outputSubscribers) {
-      this.unsubscribe(prop)
-    }
+  setSubscription(
+    outputName: string,
+    subscription: OutputRefSubscription,
+  ): void {
+    this.#outputSubscribers.set(outputName, subscription)
   }
 
-  unsubscribe(outputName: string) {
-    if (outputName in this.#outputSubscribers) {
-      this.#outputSubscribers[outputName]?.unsubscribe()
-      delete this.#outputSubscribers[outputName]
-      delete this.#outputListeners[outputName]
+  unsubscribeAll(): void {
+    for (const outputName of this.#outputListeners.keys()) {
+      this.unsubscribe(outputName)
     }
   }
 
-  diff(outputs: Record<string, OutputEmitterRef<unknown>['emit'] | undefined>) {
-    return this.#valueDiffer.diff(outputs)
+  unsubscribe(outputName: string) {
+    this.#outputSubscribers.get(outputName)?.unsubscribe()
+    this.#outputSubscribers.delete(outputName)
+    this.#outputListeners.delete(outputName)
   }
 }
diff --git a/packages/angular-table/src/flex-render/renderer.ts b/packages/angular-table/src/flex-render/renderer.ts
index 20064719ff..5853d3c2ea 100644
--- a/packages/angular-table/src/flex-render/renderer.ts
+++ b/packages/angular-table/src/flex-render/renderer.ts
@@ -114,6 +114,7 @@ export class FlexViewRenderer<
     FlexRenderViewAllowedType,
     FlexRenderTypedContent
   > | null = null
+  #outerRenderEffectRef: EffectRef | null = null
   #currentRenderEffectRef: EffectRef | null = null
   #content: () => FlexRenderInputContent<TProps>
   #props: () => TProps
@@ -132,9 +133,8 @@ export class FlexViewRenderer<
 
   readonly #latestContent = computed(() => this.#getLatestContentValue())
 
-  #getContentValue = computed(() => {
-    const latestContent = this.#latestContent()
-    return mapToFlexRenderTypedContent(latestContent)
+  readonly #getContentValue = computed(() => {
+    return mapToFlexRenderTypedContent(this.#latestContent())
   })
 
   constructor(options: RendererViewOptions<TProps>) {
@@ -149,45 +149,61 @@ export class FlexViewRenderer<
   }
 
   mount(): EffectRef {
-    let previousContent: FlexRenderInputContent<TProps>
-    let previousProps: TProps
+    if (this.#outerRenderEffectRef) {
+      return this.#outerRenderEffectRef
+    }
 
-    return effect(() => {
-      const props = this.#props()
-      const content = this.#content()
+    let previousContent: FlexRenderInputContent<TProps> | undefined
+    let previousProps: TProps | undefined
 
-      if (!(this.#renderFlags & FlexRenderFlags.ViewFirstRender)) {
-        if (previousContent !== content) {
-          this.#renderFlags |= FlexRenderFlags.ContentChanged
-        }
-        if (previousProps !== props) {
-          this.#renderFlags |= FlexRenderFlags.PropsReferenceChanged
+    this.#outerRenderEffectRef = effect(
+      () => {
+        const props = this.#props()
+        const content = this.#content()
+
+        if (!(this.#renderFlags & FlexRenderFlags.ViewFirstRender)) {
+          if (previousContent !== content) {
+            this.#renderFlags |= FlexRenderFlags.ContentChanged
+          }
+          if (previousProps !== props) {
+            this.#renderFlags |= FlexRenderFlags.PropsReferenceChanged
+          }
         }
-      }
 
-      untracked(() => this.#update())
+        untracked(() => this.#update())
 
-      if (FlexRenderFlags.ViewFirstRender & this.#renderFlags) {
-        this.#renderFlags &= ~FlexRenderFlags.ViewFirstRender
-      }
+        if (this.#renderFlags & FlexRenderFlags.ViewFirstRender) {
+          this.#renderFlags &= ~FlexRenderFlags.ViewFirstRender
+        }
 
-      previousContent = content
-      previousProps = props
-    })
+        previousContent = content
+        previousProps = props
+      },
+      { injector: this.#viewContainerRef.injector },
+    )
+
+    return this.#outerRenderEffectRef
   }
 
   destroy(): void {
+    if (this.#outerRenderEffectRef) {
+      this.#outerRenderEffectRef.destroy()
+      this.#outerRenderEffectRef = null
+    }
+    this.#destroyContentEffect()
+    this.#destroyView()
+    this.#renderFlags = FlexRenderFlags.ViewFirstRender
+  }
+
+  #destroyContentEffect(): void {
     if (this.#currentRenderEffectRef) {
       this.#currentRenderEffectRef.destroy()
       this.#currentRenderEffectRef = null
     }
-    if (this.#renderView) {
-      this.#renderView.unmount()
-      this.#renderView = null
-    }
+    this.#renderFlags &= ~FlexRenderFlags.RenderEffectChecked
   }
 
-  #update() {
+  #update(): void {
     if (
       this.#renderFlags &
       (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)
@@ -197,115 +213,120 @@ export class FlexViewRenderer<
     }
 
     if (this.#renderFlags & FlexRenderFlags.PropsReferenceChanged) {
-      if (this.#renderView) this.#renderView.updateProps(this.#props())
+      this.#renderView?.updateProps(this.#props())
       this.#renderFlags &= ~FlexRenderFlags.PropsReferenceChanged
     }
 
     if (this.#renderFlags & FlexRenderFlags.Dirty) {
-      if (this.#renderView) this.#renderView.dirtyCheck()
+      this.#renderView?.dirtyCheck()
       this.#renderFlags &= ~FlexRenderFlags.Dirty
     }
   }
 
-  #render() {
-    // When the view is recreated from scratch (content change or first render),
-    // we have to destroy the current effect listener since it will be recreated
-    // skipping the first call (FlexRenderFlags.RenderEffectChecked)
-    if (this.#shouldRecreateEntireView() && this.#currentRenderEffectRef) {
-      this.#currentRenderEffectRef.destroy()
-      this.#currentRenderEffectRef = null
-      this.#renderFlags &= ~FlexRenderFlags.RenderEffectChecked
+  #render(): void {
+    // Recreating a view also recreates its render-function effect. Its first
+    // execution only records dependencies; later executions schedule updates.
+    if (this.#shouldRecreateEntireView()) {
+      this.#destroyContentEffect()
     }
 
-    this.#viewContainerRef.clear()
-    if (this.#renderView) {
-      this.#renderView.unmount()
-      this.#renderView = null
+    this.#destroyView()
+
+    this.#renderFlags &=
+      FlexRenderFlags.ViewFirstRender | FlexRenderFlags.RenderEffectChecked
+
+    const content = this.#getContentValue()
+    if (content.kind !== 'null') {
+      const injector = this.#injector()
+      const parentInjector =
+        content.kind === 'flexRenderComponent'
+          ? (content.content.injector ?? injector)
+          : injector
+      this.#renderView = this.#renderViewByContent(
+        content,
+        this.#props(),
+        parentInjector,
+      )
     }
 
-    this.#renderFlags =
-      (this.#renderFlags & FlexRenderFlags.ViewFirstRender) |
-      (this.#renderFlags & FlexRenderFlags.RenderEffectChecked)
-
-    const resolvedContent = this.#getContentValue()
-    this.#renderView = this.#renderViewByContent(resolvedContent)
-    // If the content is a function `content(props)`, we initialize an effect
-    // to react to changes. If the current fn uses signals, we will set the DirtySignal flag
-    // to re-schedule the component updates
+    // Render functions can read signals. Keep their dependency tracking in a
+    // dedicated effect so the outer effect remains responsible only for
+    // content and props input-reference changes.
     if (
       !this.#currentRenderEffectRef &&
       typeof untracked(this.#content) === 'function'
     ) {
       this.#currentRenderEffectRef = effect(
         () => {
-          this.#latestContent()
+          const latestContent = this.#getContentValue()
           if (!(this.#renderFlags & FlexRenderFlags.RenderEffectChecked)) {
             this.#renderFlags |= FlexRenderFlags.RenderEffectChecked
             return
           }
-          this.#renderFlags |= FlexRenderFlags.Dirty
-          this.#doCheck()
+
+          untracked(() => {
+            this.#renderFlags |= FlexRenderFlags.Dirty
+            this.#doCheck(latestContent)
+          })
         },
         { injector: this.#viewContainerRef.injector },
       )
     }
   }
 
-  #shouldRecreateEntireView() {
-    return (
+  #shouldRecreateEntireView(): boolean {
+    return !!(
       this.#renderFlags &
-      FlexRenderFlags.ContentChanged &
-      FlexRenderFlags.ViewFirstRender
+      (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)
     )
   }
 
-  #doCheck() {
-    const latestContent = this.#getContentValue()
-    if (latestContent.kind === 'null' || !this.#renderView) {
+  #doCheck(latestContent: FlexRenderTypedContent): void {
+    if (
+      latestContent.kind === 'null' ||
+      !this.#renderView ||
+      !this.#renderView.canReuse(latestContent)
+    ) {
       this.#renderFlags |= FlexRenderFlags.ContentChanged
     } else {
-      const { kind: currentKind } = this.#renderView.content
-      if (
-        latestContent.kind !== currentKind ||
-        !this.#renderView.eq(latestContent)
-      ) {
-        this.#renderFlags |= FlexRenderFlags.ContentChanged
-      }
       this.#renderView.content = latestContent
     }
+
     this.#update()
   }
 
+  #destroyView(): void {
+    if (this.#renderView) {
+      this.#renderView.unmount()
+      this.#renderView = null
+    }
+  }
+
   #renderViewByContent(
-    content: FlexRenderTypedContent,
+    content: Exclude<FlexRenderTypedContent, { kind: 'null' }>,
+    props: TProps,
+    parentInjector: Injector,
   ): FlexRenderView<FlexRenderViewAllowedType, FlexRenderTypedContent> | null {
     if (content.kind === 'primitive') {
       return this.#renderStringContent(content)
     } else if (content.kind === 'templateRef') {
-      return this.#renderTemplateRefContent(content)
+      return this.#renderTemplateRefContent(content, parentInjector)
     } else if (content.kind === 'flexRenderComponent') {
-      return this.#renderComponent(content)
-    } else if (content.kind === 'component') {
-      return this.#renderCustomComponent(content)
-    } else {
-      return null
+      return this.#renderComponent(content, parentInjector)
     }
+    return this.#renderCustomComponent(content, props, parentInjector)
   }
 
   #renderStringContent(
     template: Extract<FlexRenderTypedContent, { kind: 'primitive' }>,
   ): FlexRenderTemplateView {
-    const context = () => {
-      const content = this.#content()
-      return typeof content === 'string' || typeof content === 'number'
-        ? content
-        : runInInjectionContext(this.#injector(), () =>
-            content?.(this.#props()),
-          )
-    }
+    const latestContent = () => untracked(this.#getContentValue)
     const ref = this.#viewContainerRef.createEmbeddedView(this.#templateRef, {
       get $implicit() {
-        return context()
+        // The view can be checked while an incompatible replacement is being
+        // scheduled. Only expose content that still belongs to this context.
+        const content = latestContent()
+        return content.kind === 'primitive' ? content.content : undefined
       },
     })
     return new FlexRenderTemplateView(template, ref)
@@ -313,16 +334,17 @@ export class FlexViewRenderer<
 
   #renderTemplateRefContent(
     template: Extract<FlexRenderTypedContent, { kind: 'templateRef' }>,
+    parentInjector: Injector,
   ): FlexRenderTemplateView {
-    const latestContext = () => this.#props()
+    const latestProps = () => untracked(this.#props)
     const view = this.#viewContainerRef.createEmbeddedView(
       template.content,
       {
         get $implicit() {
-          return latestContext()
+          return latestProps()
         },
       },
-      { injector: this.#getInjector() },
+      { injector: this.#getInjector(parentInjector) },
     )
     return new FlexRenderTemplateView(template, view)
   }
@@ -332,9 +354,9 @@ export class FlexViewRenderer<
       FlexRenderTypedContent,
       { kind: 'flexRenderComponent' }
     >,
+    parentInjector: Injector,
   ): FlexRenderComponentView {
-    const { injector } = flexRenderComponent.content
-    const componentInjector = this.#getInjector(injector)
+    const componentInjector = this.#getInjector(parentInjector)
     const view = this.#flexRenderComponentFactory.createComponent(
       flexRenderComponent.content,
       componentInjector,
@@ -344,11 +366,13 @@ export class FlexViewRenderer<
 
   #renderCustomComponent(
     component: Extract<FlexRenderTypedContent, { kind: 'component' }>,
+    props: TProps,
+    parentInjector: Injector,
   ): FlexRenderComponentView {
     const instance = flexRenderComponent(component.content, {
-      inputs: this.#props(),
+      inputs: props,
     })
-    const injector = this.#getInjector(instance.injector)
+    const injector = this.#getInjector(parentInjector)
     const view = this.#flexRenderComponentFactory.createComponent(
       instance,
       injector,
@@ -356,7 +380,7 @@ export class FlexViewRenderer<
     return new FlexRenderComponentView(component, view)
   }
 
-  #getInjector(parentInjector?: Injector) {
+  #getInjector(parentInjector: Injector) {
     const getContext = () => this.#props()
     const proxy = new Proxy(this.#props(), {
       get: (_, key) => getContext()[key as keyof typeof _],
@@ -383,7 +407,7 @@ export class FlexViewRenderer<
     }
 
     return Injector.create({
-      parent: parentInjector ?? this.#injector(),
+      parent: parentInjector,
       providers: [
         ...staticProviders,
         { provide: FlexRenderComponentProps, useValue: proxy },
diff --git a/packages/angular-table/src/flex-render/view.ts b/packages/angular-table/src/flex-render/view.ts
index 39e93c2675..902d0899ca 100644
--- a/packages/angular-table/src/flex-render/view.ts
+++ b/packages/angular-table/src/flex-render/view.ts
@@ -50,7 +50,6 @@ export abstract class FlexRenderView<
   TContent extends FlexRenderTypedContent,
 > {
   readonly view: TView
-  #previousContent: FlexRenderTypedContent | undefined
   #content: FlexRenderTypedContent
 
   protected constructor(
@@ -61,16 +60,11 @@ export abstract class FlexRenderView<
     this.view = view
   }
 
-  get previousContent(): FlexRenderTypedContent {
-    return this.#previousContent ?? { kind: 'null' }
-  }
-
   get content() {
     return this.#content
   }
 
   set content(content: FlexRenderTypedContent) {
-    this.#previousContent = this.#content
     this.#content = content
   }
 
@@ -78,9 +72,7 @@ export abstract class FlexRenderView<
 
   abstract dirtyCheck(): void
 
-  abstract onDestroy(callback: Function): void
-
-  abstract eq(view: TContent): boolean
+  abstract canReuse(content: TContent): boolean
 
   abstract unmount(): void
 }
@@ -106,36 +98,35 @@ export class FlexRenderTemplateView extends FlexRenderView<
   }
 
   override updateProps(_props: Record<string, any>) {
-    this.view.markForCheck()
+    if (this.content.kind === 'templateRef') {
+      // Template contexts are getter-backed. Mark the embedded view so Angular
+      // reads the latest props; the context object itself does not need to be
+      // replaced.
+      this.view.markForCheck()
+    }
   }
 
   override dirtyCheck() {
-    // Basically a no-op. When the view is created via EmbeddedViewRef, we don't need to do any manual update
-    // since this type of content has a proxy as a context, then every time the root component is checked for changes,
-    // the property getter will be re-evaluated.
-    //
-    // If in a future we need to manually mark the view as dirty, just uncomment next line
-    // this.view.markForCheck()
+    if (this.content.kind === 'primitive') {
+      // Primitive contexts are getter-backed too. The renderer has already
+      // memoized the new value, so checking the view is enough to refresh
+      // `$implicit` without mutating the context.
+      this.view.markForCheck()
+    }
   }
 
   override unmount() {
     this.view.destroy()
   }
 
-  override onDestroy(callback: Function) {
-    this.view.onDestroy(callback)
-  }
-
-  override eq(
+  override canReuse(
     compare: Extract<
       FlexRenderTypedContent,
       { kind: 'primitive' | 'templateRef' }
     >,
   ): boolean {
     return (
-      (this.content.kind === 'primitive' &&
-        compare.kind === 'primitive' &&
-        this.content.content === compare.content) ||
+      (this.content.kind === 'primitive' && compare.kind === 'primitive') ||
       (this.content.kind === 'templateRef' &&
         compare.kind === 'templateRef' &&
         this.content.content === compare.content)
@@ -170,8 +161,8 @@ export class FlexRenderComponentView extends FlexRenderView<
         break
       }
       case 'flexRenderComponent': {
-        // No-op. When FlexRenderFlags.PropsReferenceChanged is set,
-        // FlexRenderComponent will be updated into `dirtyCheck`.
+        // No-op. A props change can produce a new wrapper descriptor; its
+        // inputs and outputs are synchronized by `dirtyCheck`.
         break
       }
     }
@@ -187,8 +178,9 @@ export class FlexRenderComponentView extends FlexRenderView<
         break
       }
       case 'flexRenderComponent': {
-        // Given context instance will always have a different reference than the previous one,
-        // so instead of recreating the entire view, we will only update the current view
+        // Render functions commonly create a new descriptor on every run. If
+        // its type and key still identify the mounted instance, update that
+        // instance instead of recreating the component view.
         if (this.view.eqType(this.content.content)) {
           this.view.update(this.content.content)
         }
@@ -202,11 +194,7 @@ export class FlexRenderComponentView extends FlexRenderView<
     this.view.componentRef.destroy()
   }
 
-  override onDestroy(callback: Function) {
-    this.view.componentRef.onDestroy(callback)
-  }
-
-  override eq(
+  override canReuse(
     compare: Extract<
       FlexRenderTypedContent,
       { kind: 'component' | 'flexRenderComponent' }
@@ -218,7 +206,7 @@ export class FlexRenderComponentView extends FlexRenderView<
         this.content.content === compare.content) ||
       (this.content.kind === 'flexRenderComponent' &&
         compare.kind === 'flexRenderComponent' &&
-        this.content.content.component === compare.content.component)
+        this.view.canReuse(compare.content))
     )
   }
 }
diff --git a/packages/angular-table/src/injectTable.ts b/packages/angular-table/src/injectTable.ts
index 3486e93f7c..9cfeaca45a 100644
--- a/packages/angular-table/src/injectTable.ts
+++ b/packages/angular-table/src/injectTable.ts
@@ -99,14 +99,15 @@ export function injectTable<
 
   return ngZone.runOutsideAngular(() =>
     lazyInit(() => {
+      const initialOptions = options()
       // Explicit type arguments skip generic inference from the spread object
       // (a type-check hot spot); the spread only adds the angular reactivity
       // binding to `features`.
       const table = constructTable<TFeatures, TData>({
-        ...options(),
+        ...initialOptions,
         features: {
           coreReactivityFeature: angularReactivity(injector),
-          ...options().features,
+          ...initialOptions.features,
         },
       })
 
diff --git a/packages/angular-table/src/reactivity.ts b/packages/angular-table/src/reactivity.ts
index d35e0269ce..581e07f13e 100644
--- a/packages/angular-table/src/reactivity.ts
+++ b/packages/angular-table/src/reactivity.ts
@@ -21,9 +21,7 @@ function signalToReadonlyAtom<T>(
     get: () => signal(),
     subscribe: (observer: Observer<T>) => {
       return untracked(() =>
-        toObservable(computed(signal), { injector: injector }).subscribe(
-          observer,
-        ),
+        toObservable(signal, { injector: injector }).subscribe(observer),
       )
     },
   })
@@ -47,9 +45,7 @@ function signalToWritableAtom<T>(
     get: () => signal(),
     subscribe: (observer: Observer<T>) => {
       return untracked(() =>
-        toObservable(computed(signal), { injector: injector }).subscribe(
-          observer,
-        ),
+        toObservable(signal, { injector: injector }).subscribe(observer),
       )
     },
   })
diff --git a/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts b/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
index 698ec30ad7..638f90e400 100644
--- a/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
+++ b/packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
@@ -12,4 +12,10 @@ test('Infer component inputs', () => {
 
   // Input is optional so we can skip passing the property
   flexRenderComponent(Test, { inputs: {} })
+
+  flexRenderComponent(Test, { key: 'stable-key' })
+  flexRenderComponent(Test, { key: 1 })
+
+  // @ts-expect-error Keys must have stable primitive identity
+  flexRenderComponent(Test, { key: {} })
 })
diff --git a/packages/angular-table/tests/flex-render/flex-render.bench.ts b/packages/angular-table/tests/flex-render/flex-render.bench.ts
new file mode 100644
index 0000000000..76e8a02a1c
--- /dev/null
+++ b/packages/angular-table/tests/flex-render/flex-render.bench.ts
@@ -0,0 +1,239 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { bench, describe } from 'vitest'
+import {
+  FlexRender,
+  flexRenderComponent,
+  injectTable,
+  stockFeatures,
+} from '../../src'
+import type { ColumnDef } from '../../src'
+
+const benchmarkOptions = { time: 2_000, warmupTime: 500 }
+
+@Component({
+  template: `
+    {{ tick() }}
+    @for (item of items; track item) {
+      <ng-container *flexRender="render; props: context; let value">
+        {{ value }}
+      </ng-container>
+    }
+  `,
+  imports: [FlexRender],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class PrimitiveTable {
+  readonly items = Array.from({ length: 500 }, (_, index) => index)
+  readonly value = signal('value')
+  readonly tick = signal(0)
+  readonly context = {}
+  readonly render = () => this.value()
+}
+
+@Component({
+  template: ``,
+})
+class RenderedComponent {}
+
+describe('flexRender hot paths', () => {
+  const fixture = TestBed.createComponent(PrimitiveTable)
+  fixture.detectChanges()
+
+  bench(
+    'unrelated change detection for 500 primitive cells',
+    () => {
+      fixture.componentInstance.tick.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'create 500 component render descriptors',
+    () => {
+      for (let index = 0; index < 500; index++) {
+        flexRenderComponent(RenderedComponent)
+      }
+    },
+    benchmarkOptions,
+  )
+})
+
+interface BenchmarkRow {
+  id: string
+  values: Array<string>
+}
+
+const rowCount = 100
+const columnCount = 12
+const largeTableData: Array<BenchmarkRow> = Array.from(
+  { length: rowCount },
+  (_, rowIndex) => ({
+    id: `row-${rowIndex}`,
+    values: Array.from(
+      { length: columnCount },
+      (_, columnIndex) => `${rowIndex}:${columnIndex}`,
+    ),
+  }),
+)
+const handleActivate = () => {}
+
+@Component({
+  selector: 'benchmark-cell-a',
+  template: `<button (click)="activate.emit()">
+    A {{ value() }}:{{ version() }}
+  </button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class BenchmarkCellA {
+  readonly value = input.required<string>()
+  readonly version = input.required<number>()
+  readonly activate = output<void>()
+}
+
+@Component({
+  selector: 'benchmark-cell-b',
+  template: `<button (click)="activate.emit()">
+    B {{ value() }}:{{ version() }}
+  </button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class BenchmarkCellB {
+  readonly value = input.required<string>()
+  readonly version = input.required<number>()
+  readonly activate = output<void>()
+}
+
+@Component({
+  template: `
+    <span data-host-tick>{{ hostTick() }}</span>
+    <table>
+      <tbody>
+        @for (row of table.getRowModel().rows; track row.id) {
+          <tr>
+            @for (cell of row.getVisibleCells(); track cell.id) {
+              <td>
+                <ng-container *flexRenderCell="cell; let value">
+                  {{ value }}
+                </ng-container>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+  imports: [FlexRender],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class LargeMixedTable {
+  readonly hostTick = signal(0)
+  readonly valueVersion = signal(0)
+  readonly componentKind = signal<'a' | 'b'>('a')
+  readonly contentKind = signal<'primitive' | 'component'>('primitive')
+
+  readonly columns: Array<ColumnDef<typeof stockFeatures, BenchmarkRow, any>> =
+    Array.from({ length: columnCount }, (_, columnIndex) => ({
+      id: `column-${columnIndex}`,
+      accessorFn: (row) => row.values[columnIndex]!,
+      cell: (context) => {
+        const value = context.getValue()
+
+        // Four primitive columns whose values change in place.
+        if (columnIndex < 4) {
+          return `${value}:${this.valueVersion()}`
+        }
+
+        // Four stable component columns whose inputs change frequently.
+        if (columnIndex < 8) {
+          const component =
+            columnIndex % 2 === 0 ? BenchmarkCellA : BenchmarkCellB
+          return flexRenderComponent(component, {
+            inputs: { value, version: this.valueVersion() },
+            outputs: { activate: handleActivate },
+          })
+        }
+
+        // Two columns that intentionally replace component A with component B.
+        if (columnIndex < 10) {
+          const component =
+            this.componentKind() === 'a' ? BenchmarkCellA : BenchmarkCellB
+          return flexRenderComponent(component, {
+            inputs: { value, version: 0 },
+            outputs: { activate: handleActivate },
+          })
+        }
+
+        // Two columns that cross the primitive/component view boundary.
+        return this.contentKind() === 'primitive'
+          ? value
+          : flexRenderComponent(BenchmarkCellA, {
+              inputs: { value, version: 0 },
+              outputs: { activate: handleActivate },
+            })
+      },
+    }))
+
+  readonly table = injectTable(() => ({
+    data: largeTableData,
+    columns: this.columns,
+    features: stockFeatures,
+    getRowId: (row) => row.id,
+  }))
+}
+
+describe('flexRender large mixed table', () => {
+  const fixture = TestBed.createComponent(LargeMixedTable)
+  fixture.detectChanges()
+
+  const instance = fixture.componentInstance
+  const renderedCellCount = fixture.nativeElement.querySelectorAll('td').length
+  if (renderedCellCount !== rowCount * columnCount) {
+    throw new Error(`Expected 1,200 cells, rendered ${renderedCellCount}`)
+  }
+
+  bench(
+    'unrelated host change with 1,200 mounted cells',
+    () => {
+      instance.hostTick.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'update 400 primitives and 400 stable component inputs',
+    () => {
+      instance.valueVersion.update((value) => value + 1)
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'replace 200 component A/B cell views',
+    () => {
+      instance.componentKind.update((value) => (value === 'a' ? 'b' : 'a'))
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+
+  bench(
+    'switch 200 cells between primitive and component views',
+    () => {
+      instance.contentKind.update((value) =>
+        value === 'primitive' ? 'component' : 'primitive',
+      )
+      fixture.detectChanges()
+    },
+    benchmarkOptions,
+  )
+})
diff --git a/packages/angular-table/tests/flex-render/flex-render.unit.test.ts b/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
index 34c1c07797..e92ca5638c 100644
--- a/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
+++ b/packages/angular-table/tests/flex-render/flex-render.unit.test.ts
@@ -1,19 +1,15 @@
-import {
-  Component,
-  input,
-  signal,
-  ViewChild,
-  type TemplateRef,
-} from '@angular/core'
-import { TestBed, type ComponentFixture } from '@angular/core/testing'
-import { describe, expect, test } from 'vitest'
+import { Component, ViewChild, input, output, signal } from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { describe, expect, test, vi } from 'vitest'
 import {
   FlexRender,
-  flexRenderComponent,
   FlexRenderDirective,
+  flexRenderComponent,
   injectFlexRenderContext,
 } from '../../src'
 import { setFixtureSignalInput, setFixtureSignalInputs } from '../test-utils'
+import type { ComponentFixture } from '@angular/core/testing'
+import type { TemplateRef } from '@angular/core'
 
 describe('FlexRenderDirective', () => {
   test('should render primitives', () => {
@@ -62,6 +58,123 @@ describe('FlexRenderDirective', () => {
     expect((fixture.nativeElement as HTMLElement).matches(':empty')).toBe(true)
   })
 
+  test('should evaluate and update primitive content only when its dependencies change', () => {
+    const value = signal('Initial value')
+    const render = vi.fn(() => value())
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: render,
+      context: {},
+    })
+
+    const initialSpan = fixture.nativeElement.querySelector('span')
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(initialSpan.textContent).toEqual('Initial value')
+
+    fixture.detectChanges()
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.querySelector('span')).toBe(initialSpan)
+
+    value.set('Updated value')
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(2)
+    expect(fixture.nativeElement.querySelector('span')).toBe(initialSpan)
+    expect(initialSpan.textContent).toEqual('Updated value')
+  })
+
+  test('should memoize resolved content across input and internal signal updates', () => {
+    const value = signal('first')
+    const render = vi.fn(
+      (context: Record<string, unknown>) => `${context['label']}:${value()}`,
+    )
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: render,
+      context: { label: 'initial' },
+    })
+
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('initial:first')
+
+    setFixtureSignalInput(fixture, 'context', { label: 'updated' })
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(2)
+    expect(fixture.nativeElement.textContent).toEqual('updated:first')
+
+    value.set('second')
+    fixture.detectChanges()
+
+    expect(render).toHaveBeenCalledTimes(3)
+    expect(fixture.nativeElement.textContent).toEqual('updated:second')
+  })
+
+  test('should replace render-function effects when the content input changes', () => {
+    const firstValue = signal('first')
+    const secondValue = signal('second')
+    const firstRender = vi.fn(() => firstValue())
+    const secondRender = vi.fn(() => secondValue())
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: firstRender,
+      context: {},
+    })
+
+    expect(firstRender).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('first')
+
+    setFixtureSignalInput(fixture, 'content', secondRender)
+    fixture.detectChanges()
+
+    expect(secondRender).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('second')
+
+    firstValue.set('stale first')
+    fixture.detectChanges()
+
+    expect(firstRender).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('second')
+
+    setFixtureSignalInput(fixture, 'content', 'static')
+    fixture.detectChanges()
+    secondValue.set('stale second')
+    fixture.detectChanges()
+
+    expect(secondRender).toHaveBeenCalledTimes(1)
+    expect(fixture.nativeElement.textContent).toEqual('static')
+
+    setFixtureSignalInput(fixture, 'content', firstRender)
+    fixture.detectChanges()
+    firstValue.set('live first')
+    fixture.detectChanges()
+
+    expect(firstRender).toHaveBeenCalledTimes(3)
+    expect(fixture.nativeElement.textContent).toEqual('live first')
+  })
+
+  test('should react when a render function changes from null to content', () => {
+    const visible = signal(false)
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: () => (visible() ? 'Visible' : null),
+      context: {},
+    })
+
+    expect((fixture.nativeElement as HTMLElement).matches(':empty')).toBe(true)
+
+    visible.set(true)
+    fixture.detectChanges()
+
+    expectPrimitiveValueIs(fixture, 'Visible')
+  })
+
   test('should render TemplateRef', () => {
     @Component({
       template: `
@@ -122,6 +235,229 @@ describe('FlexRenderDirective', () => {
     expect(fixture.nativeElement.textContent).toEqual('Updated value')
   })
 
+  test('should release and restore component output subscriptions', () => {
+    @Component({
+      template: `<button (click)="changed.emit()">Emit</button>`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly changed = output<void>()
+    }
+
+    const enabled = signal(true)
+    const listener = vi.fn()
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(FakeComponent, {
+          outputs: enabled() ? { changed: listener } : {},
+        }),
+      context: {},
+    })
+
+    const button = fixture.nativeElement.querySelector(
+      'button',
+    ) as HTMLButtonElement
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    enabled.set(false)
+    fixture.detectChanges()
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    enabled.set(true)
+    fixture.detectChanges()
+    button.click()
+    expect(listener).toHaveBeenCalledTimes(2)
+    expect(fixture.nativeElement.querySelector('button')).toBe(button)
+  })
+
+  test('should set component inputs by property name when they have an alias', () => {
+    @Component({
+      template: `{{ value() }}`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly value = input('', { alias: 'aliasedValue' })
+    }
+
+    const fixture = TestBed.createComponent(TestRenderComponent)
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(FakeComponent, {
+          inputs: { value: 'Aliased input value' },
+        }),
+      context: {},
+    })
+
+    expect(fixture.nativeElement.textContent).toEqual('Aliased input value')
+  })
+
+  test('should subscribe to aliased outputs by property name', () => {
+    @Component({
+      template: `<button (click)="changed.emit()">Emit</button>`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly changed = output<void>({ alias: 'aliasedChanged' })
+    }
+
+    const listener = vi.fn()
+    const fixture = TestBed.createComponent(TestRenderComponent)
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(FakeComponent, {
+          outputs: { changed: listener },
+        }),
+      context: {},
+    })
+
+    fixture.nativeElement.querySelector('button').click()
+
+    expect(listener).toHaveBeenCalledTimes(1)
+  })
+
+  test('should preserve omitted inputs and forward explicit undefined', () => {
+    @Component({
+      selector: 'app-patched-input-component',
+      template: `{{ value() === undefined ? 'undefined' : value() }}`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly value = input<string | undefined>('initial')
+    }
+
+    const mode = signal<'set' | 'omit' | 'clear'>('set')
+    const fixture = TestBed.createComponent(TestRenderComponent)
+    setFixtureSignalInputs(fixture, {
+      content: () => {
+        const currentMode = mode()
+        const inputs: { value?: string | undefined } =
+          currentMode === 'set'
+            ? { value: 'updated' }
+            : currentMode === 'clear'
+              ? { value: undefined }
+              : {}
+        return flexRenderComponent(FakeComponent, { inputs })
+      },
+      context: {},
+    })
+
+    const initialHost = fixture.nativeElement.querySelector(
+      'app-patched-input-component',
+    )
+    expect(initialHost.textContent).toEqual('updated')
+
+    mode.set('omit')
+    fixture.detectChanges()
+
+    expect(
+      fixture.nativeElement.querySelector('app-patched-input-component'),
+    ).toBe(initialHost)
+    expect(initialHost.textContent).toEqual('updated')
+
+    mode.set('clear')
+    fixture.detectChanges()
+
+    expect(initialHost.textContent).toEqual('undefined')
+  })
+
+  test('should reuse a component by type and key and recreate it when the key changes', () => {
+    @Component({
+      selector: 'app-keyed-component',
+      template: `{{ value() }}`,
+      standalone: true,
+    })
+    class KeyedComponent {
+      readonly value = input.required<string>()
+    }
+
+    const key = signal<string | number>('first')
+    const value = signal('Initial value')
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: () =>
+        flexRenderComponent(KeyedComponent, {
+          key: key(),
+          inputs: { value: value() },
+          // These creation-time arrays are intentionally recreated whenever
+          // the render function runs. They do not affect reuse without a new key.
+          bindings: [],
+          directives: [],
+        }),
+      context: {},
+    })
+
+    const initialHost = fixture.nativeElement.querySelector(
+      'app-keyed-component',
+    )
+    expect(initialHost.textContent).toEqual('Initial value')
+
+    value.set('Updated value')
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.querySelector('app-keyed-component')).toBe(
+      initialHost,
+    )
+    expect(initialHost.textContent).toEqual('Updated value')
+
+    key.set(2)
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.querySelector('app-keyed-component')).not.toBe(
+      initialHost,
+    )
+    expect(fixture.nativeElement.textContent).toEqual('Updated value')
+  })
+
+  test('should recreate content when the content function reference changes', () => {
+    @Component({
+      selector: 'app-reusable-component',
+      template: `{{ value() }}`,
+      standalone: true,
+    })
+    class ReusableComponent {
+      readonly value = input.required<string>()
+    }
+
+    const firstRender = vi.fn(() =>
+      flexRenderComponent(ReusableComponent, {
+        key: 'stable',
+        inputs: { value: 'first' },
+      }),
+    )
+    const secondRender = vi.fn(() =>
+      flexRenderComponent(ReusableComponent, {
+        key: 'stable',
+        inputs: { value: 'second' },
+      }),
+    )
+    const fixture = TestBed.createComponent(TestRenderComponent)
+
+    setFixtureSignalInputs(fixture, {
+      content: firstRender,
+      context: {},
+    })
+
+    const initialHost = fixture.nativeElement.querySelector(
+      'app-reusable-component',
+    )
+    expect(firstRender).toHaveBeenCalledTimes(1)
+    expect(initialHost.textContent).toEqual('first')
+
+    setFixtureSignalInput(fixture, 'content', secondRender)
+    fixture.detectChanges()
+
+    expect(secondRender).toHaveBeenCalledTimes(1)
+    expect(
+      fixture.nativeElement.querySelector('app-reusable-component'),
+    ).not.toBe(initialHost)
+    expect(fixture.nativeElement.textContent).toEqual('second')
+  })
+
   test('should rerender when content has conditional return with different component types', () => {
     @Component({
       selector: 'app-fake-a',
@@ -160,8 +496,6 @@ describe('FlexRenderDirective', () => {
     expect(fixture.nativeElement.textContent).toEqual('B component')
   })
 
-  // Skip for now, test framework (using ComponentRef.setInput) cannot recognize signal inputs
-  // as component inputs
   test('should render custom components', async () => {
     @Component({
       template: `{{ row().property }}`,
@@ -193,6 +527,36 @@ describe('FlexRenderDirective', () => {
 
     expect(fixture.nativeElement.textContent).toEqual('Updated value')
   })
+
+  test('should ignore context properties that are not component inputs', () => {
+    @Component({
+      template: `{{ row() }}`,
+      standalone: true,
+    })
+    class FakeComponent {
+      readonly row = input.required<string>()
+    }
+
+    const consoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
+    try {
+      const fixture = TestBed.createComponent(TestRenderComponent)
+      setFixtureSignalInputs(fixture, {
+        content: () => FakeComponent,
+        context: {
+          row: 'Known input',
+          unknownContextProperty: 'Ignored value',
+        },
+      })
+
+      expect(fixture.nativeElement.textContent).toEqual('Known input')
+      expect(consoleError).not.toHaveBeenCalled()
+    } finally {
+      consoleError.mockRestore()
+    }
+  })
 })
 
 @Component({
diff --git a/packages/angular-table/tests/injectTable.test.ts b/packages/angular-table/tests/injectTable.test.ts
index aee244543d..20b84a7af9 100644
--- a/packages/angular-table/tests/injectTable.test.ts
+++ b/packages/angular-table/tests/injectTable.test.ts
@@ -17,6 +17,21 @@ import { injectTable } from '../src'
 import type { PaginationState } from '../src'
 
 describe('injectTable', () => {
+  test('evaluates options once while constructing the table', () => {
+    const options = vi.fn(() => ({
+      data: [],
+      features: stockFeatures,
+      columns: [],
+    }))
+    const table = TestBed.runInInjectionContext(() => injectTable(options))
+
+    expect(options).not.toHaveBeenCalled()
+
+    void table.options
+
+    expect(options).toHaveBeenCalledTimes(1)
+  })
+
   test('should support required signal inputs', async () => {
     type Data = { id: string; title: string }
 

From cb351819fc10ac5e9d6bb4e565e4736f6b4cb2b3 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sat, 15 Aug 2026 18:17:19 +0200
Subject: [PATCH 05/23] update example

---
 examples/angular/realtime-trading/README.md   | 351 ++------
 .../angular/realtime-trading/package.json     |   5 +-
 .../angular/realtime-trading/src/app/app.ts   |  74 +-
 .../src/app/benchmark-profiles.ts             |  65 --
 .../src/app/benchmark/benchmark-monitor.ts    |  96 ++-
 .../benchmark/trading-benchmark.controller.ts | 129 +++
 .../src/app/beta-trading-table.ts             |  43 -
 .../app/core/trading-benchmark.controller.ts  | 290 -------
 .../src/app/current-trading-table.ts          |  43 -
 .../src/app/feed/feed-load-profiles.ts        |  18 +
 .../src/app/feed}/market-data.ts              |   2 +-
 .../src/app/feed/market-feed.service.ts       | 181 +++++
 .../app/feed/worker}/market-feed-engine.ts    |  82 +-
 .../app/feed/worker}/market-feed-protocol.ts  |  40 +-
 .../src/app/feed/worker/market-feed.worker.ts | 142 ++++
 .../src/app/market-feed.worker.ts             | 133 ---
 .../src/app/shell/configurator.html           | 136 ++--
 .../src/app/shell/configurator.ts             |  35 +-
 .../src/app/shell/diagnostics.ts              |  22 +-
 .../src/app/shell/market-statusbar.ts         |   8 +-
 .../src/app/shell/market-toolbar.ts           |  59 --
 .../src/app/shell/metrics-strip.ts            |  44 +-
 .../src/app/shell/selected-instrument.ts      |  11 +-
 .../src/app/shell/shell-header.ts             |  64 +-
 .../src/app/shell/trading-shell.html          |  35 +-
 .../src/app/shell/trading-shell.ts            |  13 +-
 .../src/app/table-row-model.worker.ts         |  44 -
 .../realtime-trading/src/app/table-v8.html    |  48 --
 .../realtime-trading/src/app/table-v9.html    |  40 -
 .../src/app/table/current-trading-table.ts    | 110 +++
 .../{ => table/table-config}/quote-cells.ts   | 106 +--
 .../table-config}/trading-column-types.ts     |   2 -
 .../app/table/table-config/trading-columns.ts | 199 +++++
 .../src/app/table/table-interactions.ts       | 181 +++++
 .../src/app/table/table-v9.html               | 132 +++
 .../src/app/table/trading-row-virtualizer.ts  | 101 +++
 .../app/table/trading-table-initial-fit.ts    |  63 ++
 .../table/view/trading-grid-cell.directive.ts |  95 +++
 .../view/trading-grid-selection.directive.ts  |  52 ++
 .../app/table/view/trading-header-cell.html   |  53 ++
 .../src/app/table/view/trading-header-cell.ts |  64 ++
 .../table/worker/table-row-model.worker.ts    |  59 ++
 .../app/table/worker/worker-trading-table.ts  | 137 ++++
 .../src/app/trading-columns-beta.ts           | 168 ----
 .../src/app/trading-columns-v8.ts             | 165 ----
 .../src/app/trading-columns.ts                | 165 ----
 .../src/app/v8-trading-table.ts               |  43 -
 .../src/app/worker-trading-table.ts           |  79 --
 .../angular/realtime-trading/src/index.html   |   1 +
 .../angular/realtime-trading/src/styles.css   | 765 +++++++++++++-----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 176 ++--
 examples/react/realtime-trading/README.md     | 356 ++------
 examples/react/realtime-trading/package.json  |   3 +-
 examples/react/realtime-trading/src/App.tsx   |  21 +-
 .../src/benchmark-profiles.ts                 |  65 --
 .../src/benchmark/benchmark-monitor.ts        | 124 +--
 .../benchmark/trading-benchmark-controller.ts | 255 ++++++
 .../src/benchmark/use-table-benchmark.ts      |  29 +-
 .../use-trading-benchmark-controller.ts       |   5 +-
 .../src/core/trading-benchmark-controller.ts  | 532 ------------
 .../src/core/use-trading-table-runtime.ts     |  40 -
 .../src/feed/feed-load-profiles.ts            |  18 +
 .../src/{ => feed}/market-data.ts             |   2 +-
 .../src/feed/market-feed-controller.ts        | 240 ++++++
 .../src/feed/use-market-feed-controller.ts    |  14 +
 .../src/feed/worker}/market-feed-engine.ts    |  74 +-
 .../src/feed/worker}/market-feed-protocol.ts  |  40 +-
 .../src/feed/worker/market-feed.worker.ts     | 142 ++++
 examples/react/realtime-trading/src/index.css | 711 +++++++++++-----
 .../src/market-feed.worker.ts                 | 133 ---
 .../src/shell/TradingShell.tsx                | 765 +++++++++---------
 .../src/shell/trading-shell-context.tsx       |  42 +-
 .../{ => table/table-config}/quote-cells.tsx  |  47 +-
 .../table-config/trading-table-config.tsx     | 351 ++++++++
 .../src/table/table-interactions.ts           | 107 +++
 .../src/table/trading-table.tsx               | 505 ++++++++++++
 .../src/trading-table-local.tsx               | 144 ----
 .../src/trading-table-shared.tsx              | 317 --------
 .../realtime-trading/src/trading-table-v8.tsx |  77 --
 .../realtime-trading/src/trading-table.tsx    |  15 -
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  87 +-
 .../sp500-instruments.d.ts                    |  27 +
 .../sp500-instruments.js                      | 718 ++++++++++++++++
 examples/solid/realtime-trading/README.md     | 250 ++----
 examples/solid/realtime-trading/index.html    |   1 +
 examples/solid/realtime-trading/package.json  |   3 +-
 examples/solid/realtime-trading/src/App.tsx   |  40 +-
 .../src/benchmark-profiles.ts                 |  65 --
 .../src/benchmark/benchmark-monitor.ts        | 109 ++-
 .../benchmark/trading-benchmark-controller.ts | 132 +++
 .../src/core/trading-benchmark-controller.ts  | 300 -------
 .../src/feed/feed-load-profiles.ts            |  18 +
 .../realtime-trading/src/feed}/market-data.ts |   2 +-
 .../src/feed/market-feed-controller.ts        | 196 +++++
 .../src/feed/worker}/market-feed-engine.ts    |  82 +-
 .../{ => feed/worker}/market-feed-protocol.ts |  40 +-
 .../src/feed/worker/market-feed.worker.ts     | 142 ++++
 examples/solid/realtime-trading/src/index.css | 707 +++++++++++-----
 .../src/market-feed.worker.ts                 | 133 ---
 .../src/shell/TradingShell.tsx                | 657 +++++++--------
 .../src/shell/trading-shell-context.tsx       |  31 +-
 .../{ => table/table-config}/quote-cells.tsx  |  47 +-
 .../table/table-config/trading-columns.tsx    | 240 ++++++
 .../src/table/table-interactions.ts           | 100 +++
 .../src/table/trading-table.tsx               | 335 ++++++++
 .../realtime-trading/src/trading-table.tsx    | 339 --------
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  63 +-
 packages/angular-table/src/injectTable.ts     |  19 +-
 pnpm-lock.yaml                                |  92 +--
 pnpm-workspace.yaml                           |   6 -
 110 files changed, 8775 insertions(+), 6549 deletions(-)
 delete mode 100644 examples/angular/realtime-trading/src/app/benchmark-profiles.ts
 create mode 100644 examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/beta-trading-table.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/core/trading-benchmark.controller.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/current-trading-table.ts
 create mode 100644 examples/angular/realtime-trading/src/app/feed/feed-load-profiles.ts
 rename examples/{solid/realtime-trading/src => angular/realtime-trading/src/app/feed}/market-data.ts (95%)
 create mode 100644 examples/angular/realtime-trading/src/app/feed/market-feed.service.ts
 rename examples/{react/realtime-trading/src => angular/realtime-trading/src/app/feed/worker}/market-feed-engine.ts (67%)
 rename examples/{react/realtime-trading/src => angular/realtime-trading/src/app/feed/worker}/market-feed-protocol.ts (54%)
 create mode 100644 examples/angular/realtime-trading/src/app/feed/worker/market-feed.worker.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/market-feed.worker.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/shell/market-toolbar.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/table-row-model.worker.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/table-v8.html
 delete mode 100644 examples/angular/realtime-trading/src/app/table-v9.html
 create mode 100644 examples/angular/realtime-trading/src/app/table/current-trading-table.ts
 rename examples/angular/realtime-trading/src/app/{ => table/table-config}/quote-cells.ts (78%)
 rename examples/angular/realtime-trading/src/app/{ => table/table-config}/trading-column-types.ts (77%)
 create mode 100644 examples/angular/realtime-trading/src/app/table/table-config/trading-columns.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table/table-interactions.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table/table-v9.html
 create mode 100644 examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table/trading-table-initial-fit.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table/view/trading-grid-cell.directive.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table/view/trading-grid-selection.directive.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table/view/trading-header-cell.html
 create mode 100644 examples/angular/realtime-trading/src/app/table/view/trading-header-cell.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table/worker/table-row-model.worker.ts
 create mode 100644 examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/trading-columns-beta.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/trading-columns-v8.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/trading-columns.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/v8-trading-table.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/worker-trading-table.ts
 delete mode 100644 examples/react/realtime-trading/src/benchmark-profiles.ts
 create mode 100644 examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
 rename examples/react/realtime-trading/src/{core => benchmark}/use-trading-benchmark-controller.ts (65%)
 delete mode 100644 examples/react/realtime-trading/src/core/trading-benchmark-controller.ts
 delete mode 100644 examples/react/realtime-trading/src/core/use-trading-table-runtime.ts
 create mode 100644 examples/react/realtime-trading/src/feed/feed-load-profiles.ts
 rename examples/react/realtime-trading/src/{ => feed}/market-data.ts (95%)
 create mode 100644 examples/react/realtime-trading/src/feed/market-feed-controller.ts
 create mode 100644 examples/react/realtime-trading/src/feed/use-market-feed-controller.ts
 rename examples/{solid/realtime-trading/src => react/realtime-trading/src/feed/worker}/market-feed-engine.ts (70%)
 rename examples/{angular/realtime-trading/src/app => react/realtime-trading/src/feed/worker}/market-feed-protocol.ts (54%)
 create mode 100644 examples/react/realtime-trading/src/feed/worker/market-feed.worker.ts
 delete mode 100644 examples/react/realtime-trading/src/market-feed.worker.ts
 rename examples/react/realtime-trading/src/{ => table/table-config}/quote-cells.tsx (86%)
 create mode 100644 examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
 create mode 100644 examples/react/realtime-trading/src/table/table-interactions.ts
 create mode 100644 examples/react/realtime-trading/src/table/trading-table.tsx
 delete mode 100644 examples/react/realtime-trading/src/trading-table-local.tsx
 delete mode 100644 examples/react/realtime-trading/src/trading-table-shared.tsx
 delete mode 100644 examples/react/realtime-trading/src/trading-table-v8.tsx
 delete mode 100644 examples/react/realtime-trading/src/trading-table.tsx
 create mode 100644 examples/realtime-trading-shared/sp500-instruments.d.ts
 create mode 100644 examples/realtime-trading-shared/sp500-instruments.js
 delete mode 100644 examples/solid/realtime-trading/src/benchmark-profiles.ts
 create mode 100644 examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
 delete mode 100644 examples/solid/realtime-trading/src/core/trading-benchmark-controller.ts
 create mode 100644 examples/solid/realtime-trading/src/feed/feed-load-profiles.ts
 rename examples/{angular/realtime-trading/src/app => solid/realtime-trading/src/feed}/market-data.ts (95%)
 create mode 100644 examples/solid/realtime-trading/src/feed/market-feed-controller.ts
 rename examples/{angular/realtime-trading/src/app => solid/realtime-trading/src/feed/worker}/market-feed-engine.ts (67%)
 rename examples/solid/realtime-trading/src/{ => feed/worker}/market-feed-protocol.ts (54%)
 create mode 100644 examples/solid/realtime-trading/src/feed/worker/market-feed.worker.ts
 delete mode 100644 examples/solid/realtime-trading/src/market-feed.worker.ts
 rename examples/solid/realtime-trading/src/{ => table/table-config}/quote-cells.tsx (86%)
 create mode 100644 examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
 create mode 100644 examples/solid/realtime-trading/src/table/table-interactions.ts
 create mode 100644 examples/solid/realtime-trading/src/table/trading-table.tsx
 delete mode 100644 examples/solid/realtime-trading/src/trading-table.tsx

diff --git a/examples/angular/realtime-trading/README.md b/examples/angular/realtime-trading/README.md
index 3ec6393e0f..31e5101bcf 100644
--- a/examples/angular/realtime-trading/README.md
+++ b/examples/angular/realtime-trading/README.md
@@ -1,285 +1,88 @@
-# Angular real-time trading flexRender lab
+# Angular realtime trading benchmark
 
-This example generates deterministic synthetic quote events in the browser. It
-is designed to stress Angular Table's `flexRender` paths, not to model an
-exchange or display real financial data.
+This example stresses the current Angular Table adapter with a synthetic market
+feed, immutable quote snapshots, dynamic cell components, row-model workloads,
+and optional row virtualization.
 
-The workload is inspired by the public
-[AG Grid finance demo](https://www.ag-grid.com/example-finance/) and its
-[source repository](https://github.com/ag-grid/ag-grid-demos/tree/main/finance),
-but is intentionally smaller and focused on Angular `flexRender` lifecycle
-behavior rather than matching that demo's features.
+## Run
 
-## Run it
-
-From the repository root:
-
-```sh
-pnpm --filter tanstack-angular-table-example-realtime-trading dev
-```
-
-For representative measurements, serve the production configuration:
-
-```sh
-pnpm --filter tanstack-angular-table-example-realtime-trading ng serve --configuration production --port 7777
+```bash
+pnpm --dir examples/angular/realtime-trading dev
 ```
 
 Open `http://localhost:7777`.
 
-## What it exercises
-
-The feed control has named load profiles so comparisons do not depend on
-remembering slider positions:
-
-- **Low** is 1k events/s.
-- **Medium** is 5k events/s.
-- **High** is the 10k events/s default.
-- **Very high** is 25k events/s.
-- **Max** requests 100k events/s and is intentionally a saturation test.
-- Moving the rate slider selects **Custom**.
-
-Available universe sizes are 50, 100, 150, 250, 350, 500, 750, and 1,000.
-The intermediate sizes make it easier to locate the point where an adapter
-stops meeting its frame or throughput target.
-
-The row workload selector separates four different costs:
-
-- **Stable universe** preserves row IDs and source order.
-- **Continuously sort by Last** changes input order as prices move but keeps the
-  same IDs, testing keyed row movement rather than destruction.
-- **Rotate 20% filtered rows** excludes one of five index buckets and changes
-  the excluded bucket once per second, testing removal and reinsertion.
-- **Replace 10% of ticker IDs** gives one of ten buckets new IDs and ticker
-  labels once per second. Ten percent are replacements at any instant; because
-  the previous bucket returns while the next enters, each transition crosses
-  lifecycle boundaries for roughly twenty percent of rows.
-
-These transformations happen before the selected adapter, so every version
-receives identical arrays. They test row-model and rendering consequences; they
-do not benchmark each version's public sorting or filtering API.
+Use a production build for performance recordings:
 
-The configurator can mount three implementations against the same workload:
-
-- **Local optimized (v9)** uses the adapter and table core from this workspace.
-- **Published 9.0.0-beta.80** uses the exact npm release and its matching
-  `@tanstack/table-core`.
-- **Published 8.21.4** uses the final v8 Angular adapter and table core 8.21.3.
-
-Changing the implementation select destroys the current table component and
-mounts the selected one. The current immutable quote array, selected symbol,
-renderer mode, and performance counters stay in the parent component, so every
-adapter receives the same live state.
-
-The local v9 adapter also exposes a **Worker row model** checkbox. It replaces
-the normal local table with a v9 table using the experimental worker plugin for
-the filtered row-model stage. The row-model worker is a second worker, separate
-from the market-feed worker. The checkbox is disabled for beta.80 and v8 because
-those published versions do not expose this plugin. Turning it off destroys the
-worker-backed table and terminates its worker.
-
-This table currently has no active user filter, so the worker stage returns the
-full row order. That is intentional: it isolates the serialization,
-postMessage, stale-while-revalidate, and row-model reconstruction overhead under
-rapid immutable data replacement. It is not expected to be faster at 250–1,000
-unfiltered rows; the plugin becomes more compelling when expensive filtering,
-grouping, or sorting dominates the transfer cost.
-
-- Quote fields are plain values, matching decoded WebSocket/SSE records rather
-  than embedding Angular signals in the data model.
-- Every worker batch publishes a new data-array reference and recreates each
-  changed quote object. Unchanged quotes preserve their identity, and
-  `getRowId` keeps table rows associated with their instruments.
-- This deliberately exercises adapter option updates and table row-model
-  recomputation in addition to `flexRender` input updates.
-- A Web Worker owns quote generation, random-walk calculations, event-rate
-  scheduling, history updates, and burst processing.
-- One quote event updates price, bid, ask, direction, and volume; the event
-  counter therefore represents market messages rather than individual field
-  changes.
-- The market-watch columns use Ticker, Last Qty, Bid / Ask Qty, Day %, Total
-  Qty, Traded Value, and Intraday terminology. Total Qty and Traded Value are
-  cumulative synthetic session fields; Last Qty is the most recent trade size.
-- Bid, ask, percentage change, quantities, and traded value are primitive
-  renderers.
-- Last price is a stable Angular component whose inputs and output callback are
-  updated frequently.
-- Tick direction can use one stable component or switch between separate up and
-  down component types.
-- Spread components receive bid and ask updates and recompute absolute and
-  basis-point spreads.
-- Depth components receive bid/ask sizes on every quote and redraw a two-sided
-  liquidity imbalance bar.
-- Quote-age components share a 100 ms clock. This intentionally invalidates the
-  whole Age column at once and can be disabled independently.
-- Sparkline components receive new array references at a configurable cadence.
-- Component create/destroy counters and the optional Chrome heap estimate help
-  expose unintended churn or retained component state.
-
-## Shared code and adapter boundaries
-
-Most of the example is deliberately shared:
-
-- `market-feed-engine.ts` is the framework-free quote algorithm that runs in
-  the worker.
-- `market-feed.worker.ts` owns scheduling, batching, coalescing, and
-  backpressure.
-- `market-feed-protocol.ts` defines typed commands and events shared across the
-  worker boundary.
-- `market-data.ts` hydrates initial worker snapshots and immutably recreates
-  changed application rows on the main thread.
-- `table-row-model.worker.ts` hosts the optional v9 shadow table used by the
-  experimental row-model worker plugin.
-- `worker-trading-table.ts` wires the local v9 table to that worker-backed
-  filtered row model and terminates it when the component is destroyed.
-- `quote-cells.ts` owns all dynamic Angular cell components and lifecycle
-  instrumentation.
-- `trading-column-types.ts` contains only the renderer-mode/state contract and
-  the diagnostics column count.
-- `trading-columns.ts` is the local-v9 column factory shared by the current and
-  worker-backed tables. It calls the local adapter's `flexRenderComponent`
-  directly only for genuine Angular component cells.
-- `trading-columns-beta.ts` and `trading-columns-v8.ts` intentionally duplicate
-  the complete adapter-specific column configuration, including IDs, labels,
-  widths, and formatters. Each calls its own package's typed
-  `flexRenderComponent`; no token spreads, generic renderer callback, or
-  `unknown` cast crosses the version boundary. Primitive cells continue to
-  return primitive values.
-- `core/trading-benchmark.controller.ts` owns application signals, worker
-  transport, derived table inputs, and user commands.
-- `benchmark/benchmark-monitor.ts` owns browser observers, render
-  acknowledgements, and published metrics.
-- `shell/` contains independent header, toolbar, metrics, status-bar,
-  diagnostics, selected-instrument, and configurator components. Each injects
-  the same controller directly.
-- `shell/trading-shell.html` is only the layout and `<ng-content>` projection
-  point.
-- `app.ts` owns the projected local/beta/v8 adapter switch.
-
-Table construction and component-render descriptors are version-specific. The
-local and beta v9 components share `table-v9.html` and use `injectTable`,
-`stockFeatures`, and the `flexRenderCell` / `flexRenderHeader` shorthand
-directives. The v8 component uses `createAngularTable`, `getCoreRowModel`, and
-the older direct `flexRender` microsyntax in `table-v8.html`.
+```bash
+pnpm --dir examples/angular/realtime-trading build
+```
 
 ## Architecture
 
-`App` deliberately has no knowledge of workers, timers, render callbacks, or
-adapter commands. It selects the active adapter and projects it through
-`TradingShell`. The injected `TradingBenchmarkController` is the single
-stateful boundary: it subscribes to the feed worker, converts protocol events
-into immutable row snapshots, derives the selected workload, and exposes
-signals plus commands to every shell component.
-
-Benchmark instrumentation is a separate collaborator. `BenchmarkMonitor`
-contains the mutable sampling runtime and publishes immutable metric snapshots
-back through the controller. This keeps measurement policy out of both the
-table adapters and the presentational shell.
-
-All deliberate mutable runtime is grouped behind `const` object or class
-identities. TypeScript source files do not use `let`; counters and handles
-change as properties of those stable runtime owners instead of being scattered
-mutable bindings. Angular template `@for (...; let index = ...)` declarations,
-where present, are template syntax rather than JavaScript mutable bindings.
-
-The beta and v8 dependencies use exact npm tarball URLs. This is intentional:
-the repository globally redirects `@tanstack/angular-table` to the local
-workspace package, and a normal npm alias would therefore not provide an
-independent published baseline. Version-specific overrides also keep each
-adapter paired with the table-core version it was released against.
-
-## Worker transport and backpressure
-
-The worker is intentionally shaped like an external market-data transport. The
-Angular application sends configuration commands and listens for `ready` and
-`batch` messages, much as an application would listen to a WebSocket or SSE
-client.
-
-The worker does not post one browser message for every quote event. It
-coalesces all pending changes by instrument and allows only one batch to be in
-flight. Angular acknowledges that batch after `afterEveryRender`; only then can
-the worker send the next one. While the main thread is busy, the worker keeps
-the newest snapshot for each instrument in a bounded map rather than building
-an unbounded message queue.
-
-For that reason, **batch events** and **row updates** are separate diagnostics.
-A batch may represent thousands of source events but contain at most one final
-update per instrument. The event counter still measures the requested source
-load, while row updates describe the amount of data copied and applied by the
-UI.
-
-This protects the main thread from quote-generation work and queue growth, but
-it does not make rendering free. Recreating changed rows, publishing the new
-data array, Angular change detection, table row-model work, `flexRender`,
-layout, and paint must still happen on the main thread.
-In a production application, the WebSocket connection and parsing could also
-live inside the worker and use this same message protocol. If the WebSocket or
-`EventSource` is created in the window instead, its JavaScript event handlers
-still run on the main thread.
-
-## Performance metrics
-
-The dashboard keeps browser scheduling and Angular work separate:
-
-- **RAF rate** counts `requestAnimationFrame` callbacks and divides them by the
-  real wall-clock sampling duration. It is not clamped and therefore includes
-  long main-thread stalls. It describes browser frame opportunities, not table
-  renders, and will normally follow the display refresh rate.
-- **Table renders** counts worker batches that reach `afterEveryRender` and are
-  acknowledged back to the worker. This is the UI's actual feed-render
-  throughput.
-- **Average / P95 render** measures worker-message reception through Angular's
-  completed render callback. It excludes worker calculation, browser paint,
-  and time coalescing behind an in-flight batch.
-- **Long frames** uses a feature-detected `PerformanceObserver` with the
-  `long-animation-frame` entry type. It counts complete browser animation
-  frames longer than 50 ms and records the worst duration since reset.
-- **Renders over 16.7 ms** remains an application-level diagnostic for the most
-  recent sample. It assumes a 60 Hz frame budget and is intentionally distinct
-  from the browser's Long Animation Frames API.
-
-Long Animation Frames are currently supported by Chromium-based browsers. The
-dashboard shows `N/A` when the browser does not expose that performance entry
-type. For exact frame, layout, paint, and compositor attribution, record the
-same workload in the browser's Performance tools.
-
-## A repeatable comparison
-
-1. Use the same production browser build and machine for both commits.
-2. Start at 250 instruments, 10k events/s, stable Tick renderer, quote ages,
-   and sparklines enabled.
-3. Select one implementation, reset the session, and let it warm up for 20–30
-   seconds.
-4. Record actual throughput, RAF rate, table renders/s, P95 render time, long
-   frames, live components, and heap over a fixed measurement window.
-5. Repeat step 3 for the other implementations without changing the controls.
-6. Increase the event target until actual throughput cannot keep up or P95
-   exceeds the 16.7 ms frame budget.
-7. Repeat with component swapping, quote ages, and sparklines toggled
-   separately. The 25k burst is useful for profiling worker aggregation and one
-   large coalesced UI update.
-
-Component create/destroy totals are cumulative across adapter switches. A
-switch should destroy the old table's dynamic cell components and create the
-new table's components, so both totals jump by design. Likewise, the JS heap
-can rise temporarily while the old tree waits for garbage collection. Compare
-post-GC heap plateaus after several identical switch cycles; a rising raw heap
-line by itself does not prove a leak.
-
-Immutable batches also allocate a new array plus one object per changed row.
-Those short-lived objects are expected garbage. Memory analysis should compare
-post-GC plateaus rather than expecting a flat allocation graph.
-
-The displayed Chrome heap estimate is diagnostic only. Treat the browser's
-Memory profiler as the source of truth when separating the main realm, worker
-realm, detached DOM, and garbage awaiting collection.
-
-Because this lab bundles three adapter and table-core generations, its download
-size is intentionally larger than a normal application and should not be used
-for bundle-size comparison.
-
-The UI resembles a market-watch blotter, but the feed is deterministic
-synthetic data rather than an exchange simulator. A production-confidence test
-should replay a timestamped, sanitized capture through the worker protocol so
-burstiness and symbol skew are preserved. Use browser Performance and Memory
-recordings as the source of truth for scripting, layout, paint, detached nodes,
-and post-GC heap; the in-app counters are comparison aids.
+- `TradingBenchmarkController` owns feed state, benchmark controls, derived
+  quote snapshots, and diagnostics.
+- `market-feed.worker.ts` produces synthetic quote samples outside the main
+  thread. Multiple samples for the same instrument are coalesced into one row
+  update per published message.
+- `CurrentTradingTable` renders the current Angular Table implementation.
+- `WorkerTradingTable` uses the same columns and template while moving the
+  filtered row-model stage to the experimental table worker plugin.
+- `trading-row-virtualizer.ts` integrates TanStack Virtual and reports the
+  visible and mounted row ranges.
+- Components under `shell/` own the surrounding terminal UI and inject the
+  controller directly.
+
+The application root only selects between the normal and worker-backed current
+table. There are no historical adapter implementations in this benchmark.
+
+The Angular 22 application is zoneless by default. Components use signal
+inputs, outputs, queries and derived state; resource cleanup is registered with
+`DestroyRef`, and no `ngOnInit`, `ngOnDestroy`, `@HostBinding`, or
+`@HostListener` hooks are used.
+
+## Row rendering
+
+The row count and the row-rendering control select the rendering path:
+
+- Below 1,500 instruments, **TanStack Virtual** can be enabled or disabled to
+  compare it with **Full DOM**.
+- At 1,500 instruments or more, **TanStack Virtual** is enabled and locked. It
+  mounts a keyed overscan window and positions rows with a transform.
+- Both paths apply `content-visibility: auto` and a fixed intrinsic row height;
+  the Full DOM path can therefore skip offscreen browser rendering without
+  avoiding framework work or DOM creation.
+
+Angular CDK scrolling is intentionally not part of this example.
+
+## Feed rate
+
+The configured sample rate controls synthetic quote generation inside the
+worker. It is not a browser event or `postMessage` rate. The publish interval
+separately controls the target message cadence. The worker coalesces repeated
+instruments in each message and posts independently of render completion, like
+an external stream. Random seeds stay private to the feed engine.
+
+## Workloads
+
+- The market-data universe preserves row order and IDs.
+- **Swap Tick component A ↔ B** exercises component destruction and creation.
+- Sparkline and quote-age toggles control high-frequency component input
+  invalidation.
+- Intraday history is sampled independently per instrument in the worker. Its
+  minimum sampling interval is configurable from 100 ms to 2,000 ms.
+
+## Dependency resolution
+
+The example pins `@tanstack/angular-table` to the current repository version.
+The root workspace override resolves that dependency to `packages/angular-table`
+while preserving a release-like manifest.
+
+## Verification
+
+```bash
+pnpm --dir examples/angular/realtime-trading test:types
+pnpm --dir examples/angular/realtime-trading lint
+pnpm --dir examples/angular/realtime-trading build
+pnpm --dir examples/angular/realtime-trading test:e2e
+```
diff --git a/examples/angular/realtime-trading/package.json b/examples/angular/realtime-trading/package.json
index 7156570054..1f270dbc84 100644
--- a/examples/angular/realtime-trading/package.json
+++ b/examples/angular/realtime-trading/package.json
@@ -17,9 +17,8 @@
     "@angular/compiler": "^22.1.0",
     "@angular/core": "^22.1.0",
     "@angular/platform-browser": "^22.1.0",
-    "@tanstack/angular-table": "^9.0.0",
-    "@tanstack/angular-table-beta": "https://registry.npmjs.org/@tanstack/angular-table/-/angular-table-9.0.0-beta.80.tgz",
-    "@tanstack/angular-table-v8": "https://registry.npmjs.org/@tanstack/angular-table/-/angular-table-8.21.4.tgz",
+    "@tanstack/angular-table": "9.1.3",
+    "@tanstack/angular-virtual": "^6.0.2",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },
diff --git a/examples/angular/realtime-trading/src/app/app.ts b/examples/angular/realtime-trading/src/app/app.ts
index 553d3dad06..e348e9374c 100644
--- a/examples/angular/realtime-trading/src/app/app.ts
+++ b/examples/angular/realtime-trading/src/app/app.ts
@@ -1,64 +1,30 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { BetaTradingTable } from './beta-trading-table'
-import { TradingBenchmarkController } from './core/trading-benchmark.controller'
-import { CurrentTradingTable } from './current-trading-table'
+import { TradingBenchmarkController } from './benchmark/trading-benchmark.controller'
+import { CurrentTradingTable } from './table/current-trading-table'
 import { TradingShell } from './shell/trading-shell'
-import { V8TradingTable } from './v8-trading-table'
-import { WorkerTradingTable } from './worker-trading-table'
+import { WorkerTradingTable } from './table/worker/worker-trading-table'
 
 @Component({
   selector: 'app-root',
-  imports: [
-    BetaTradingTable,
-    CurrentTradingTable,
-    TradingShell,
-    V8TradingTable,
-    WorkerTradingTable,
-  ],
+  imports: [CurrentTradingTable, TradingShell, WorkerTradingTable],
   template: `
     <app-trading-shell>
-      @switch (controller.tableAdapter()) {
-        @case ('local') {
-          @if (controller.tableWorkerEnabled()) {
-            <app-worker-trading-table
-              [quotes]="controller.displayQuotes()"
-              [rendererMode]="controller.rendererMode()"
-              [updateQuoteAges]="controller.updateQuoteAges()"
-              [quoteClock]="controller.quoteClock()"
-              [selectedSymbol]="controller.selectedSymbol()"
-              (symbolSelected)="controller.selectedSymbol.set($event)"
-            />
-          } @else {
-            <app-current-trading-table
-              [quotes]="controller.displayQuotes()"
-              [rendererMode]="controller.rendererMode()"
-              [updateQuoteAges]="controller.updateQuoteAges()"
-              [quoteClock]="controller.quoteClock()"
-              [selectedSymbol]="controller.selectedSymbol()"
-              (symbolSelected)="controller.selectedSymbol.set($event)"
-            />
-          }
-        }
-        @case ('beta') {
-          <app-beta-trading-table
-            [quotes]="controller.displayQuotes()"
-            [rendererMode]="controller.rendererMode()"
-            [updateQuoteAges]="controller.updateQuoteAges()"
-            [quoteClock]="controller.quoteClock()"
-            [selectedSymbol]="controller.selectedSymbol()"
-            (symbolSelected)="controller.selectedSymbol.set($event)"
-          />
-        }
-        @case ('v8') {
-          <app-v8-trading-table
-            [quotes]="controller.displayQuotes()"
-            [rendererMode]="controller.rendererMode()"
-            [updateQuoteAges]="controller.updateQuoteAges()"
-            [quoteClock]="controller.quoteClock()"
-            [selectedSymbol]="controller.selectedSymbol()"
-            (symbolSelected)="controller.selectedSymbol.set($event)"
-          />
-        }
+      @if (controller.tableWorkerEnabled()) {
+        <app-worker-trading-table
+          [quotes]="controller.displayQuotes()"
+          [rendererMode]="controller.rendererMode()"
+          [selectedSymbol]="controller.selectedSymbol()"
+          [virtualScrollMode]="controller.virtualScrollMode()"
+          (symbolSelected)="controller.selectedSymbol.set($event)"
+        />
+      } @else {
+        <app-current-trading-table
+          [quotes]="controller.displayQuotes()"
+          [rendererMode]="controller.rendererMode()"
+          [selectedSymbol]="controller.selectedSymbol()"
+          [virtualScrollMode]="controller.virtualScrollMode()"
+          (symbolSelected)="controller.selectedSymbol.set($event)"
+        />
       }
     </app-trading-shell>
   `,
diff --git a/examples/angular/realtime-trading/src/app/benchmark-profiles.ts b/examples/angular/realtime-trading/src/app/benchmark-profiles.ts
deleted file mode 100644
index 848fc28880..0000000000
--- a/examples/angular/realtime-trading/src/app/benchmark-profiles.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { MarketQuote } from './market-data'
-
-export type FeedLoadProfile =
-  'low' | 'medium' | 'high' | 'very-high' | 'max' | 'custom'
-
-export type RowWorkloadMode =
-  'stable' | 'price-sort' | 'rotating-filter' | 'identity-churn'
-
-export const feedLoadRates: Record<
-  Exclude<FeedLoadProfile, 'custom'>,
-  number
-> = {
-  low: 1_000,
-  medium: 5_000,
-  high: 10_000,
-  'very-high': 25_000,
-  max: 100_000,
-}
-
-export function deriveBenchmarkQuotes(
-  quotes: Array<MarketQuote>,
-  mode: RowWorkloadMode,
-  epoch: number,
-): Array<MarketQuote> {
-  if (mode === 'stable') {
-    return quotes
-  }
-
-  if (mode === 'price-sort') {
-    return [...quotes].sort(
-      (left, right) =>
-        right.price - left.price || left.symbol.localeCompare(right.symbol),
-    )
-  }
-
-  if (mode === 'rotating-filter') {
-    const excludedBucket = epoch % 5
-    return quotes.filter((_, index) => index % 5 !== excludedBucket)
-  }
-
-  const replacementBucket = epoch % 10
-  return quotes.map((quote, index) =>
-    index % 10 === replacementBucket
-      ? {
-          ...quote,
-          id: `${quote.id}-replacement-${epoch}`,
-          symbol: `${quote.symbol}R${epoch % 100}`,
-          company: `${quote.company} replacement`,
-        }
-      : quote,
-  )
-}
-
-export function rowWorkloadLabel(mode: RowWorkloadMode): string {
-  switch (mode) {
-    case 'price-sort':
-      return 'PRICE REORDER'
-    case 'rotating-filter':
-      return 'FILTER ROTATION'
-    case 'identity-churn':
-      return 'TICKER REPLACEMENT'
-    default:
-      return 'STABLE UNIVERSE'
-  }
-}
diff --git a/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts b/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
index d92631820f..830c4100b5 100644
--- a/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
+++ b/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
@@ -1,9 +1,12 @@
-import { quoteCellLifecycle } from '../quote-cells'
-import type { MarketFeedCommand } from '../market-feed-protocol'
+import { quoteCellLifecycle } from '../table/table-config/quote-cells'
 
 export interface FeedMetrics {
-  actualEventsPerSecond: number
-  totalEvents: number
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
   rafCallbacksPerSecond: number
   tableRendersPerSecond: number
   lastBatchSize: number
@@ -21,8 +24,12 @@ export interface FeedMetrics {
 }
 
 export const initialMetrics: FeedMetrics = {
-  actualEventsPerSecond: 0,
-  totalEvents: 0,
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
   rafCallbacksPerSecond: 0,
   tableRendersPerSecond: 0,
   lastBatchSize: 0,
@@ -39,19 +46,17 @@ export const initialMetrics: FeedMetrics = {
   lastUpdateCount: 0,
 }
 
-interface PendingAck {
-  generation: number
-  sequence: number
-}
-
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
     pendingRenderStartedAt: null as number | null,
-    pendingAck: null as PendingAck | null,
     renderSamples: [] as Array<number>,
-    totalEvents: 0,
-    eventsInSample: 0,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
@@ -65,32 +70,35 @@ export class BenchmarkMonitor {
     this.#runtime.pendingRenderStartedAt ??= performance.now()
   }
 
-  setPendingAck(ack: PendingAck | null): void {
-    this.#runtime.pendingAck = ack
-  }
-
-  recordCompletedRender(postCommand: (command: MarketFeedCommand) => void) {
+  recordCompletedRender(): void {
     const runtime = this.#runtime
     if (runtime.pendingRenderStartedAt !== null) {
       runtime.renderSamples.push(
         performance.now() - runtime.pendingRenderStartedAt,
       )
       runtime.pendingRenderStartedAt = null
-    }
-    if (runtime.pendingAck) {
       runtime.tableRendersInSample++
-      postCommand({ type: 'ack', ...runtime.pendingAck })
-      runtime.pendingAck = null
     }
   }
 
-  recordBatch(eventCount: number, updateCount: number): void {
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
     const runtime = this.#runtime
-    runtime.lastBatchSize = eventCount
+    runtime.lastBatchSize = tickCount
     runtime.lastUpdateCount = updateCount
-    runtime.eventsInSample += eventCount
-    runtime.totalEvents += eventCount
-    runtime.workerMessages++
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
   recordAnimationFrame(): void {
@@ -126,11 +134,19 @@ export class BenchmarkMonitor {
       Math.ceil(sortedRenderSamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
-      actualEventsPerSecond:
+      actualTicksPerSecond:
         sampleDuration === 0
           ? 0
-          : (runtime.eventsInSample / sampleDuration) * 1_000,
-      totalEvents: runtime.totalEvents,
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
         (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
       tableRendersPerSecond:
@@ -139,8 +155,7 @@ export class BenchmarkMonitor {
       averageRenderMs,
       p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
       maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: runtime.renderSamples.filter((value) => value > 16.7)
-        .length,
+      slowRenders: runtime.renderSamples.filter((value) => value > 16.7).length,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -151,7 +166,11 @@ export class BenchmarkMonitor {
     }
 
     runtime.sampleStartedAt = now
-    runtime.eventsInSample = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
     runtime.renderSamples = []
     runtime.rafCallbacksInSample = 0
     runtime.tableRendersInSample = 0
@@ -162,10 +181,13 @@ export class BenchmarkMonitor {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
     runtime.pendingRenderStartedAt = null
-    runtime.pendingAck = null
     runtime.renderSamples = []
-    runtime.totalEvents = 0
-    runtime.eventsInSample = 0
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
diff --git a/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts b/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
new file mode 100644
index 0000000000..8f066ef474
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
@@ -0,0 +1,129 @@
+import {
+  DestroyRef,
+  Injectable,
+  computed,
+  inject,
+  isDevMode,
+  signal,
+} from '@angular/core'
+import { TRADING_COLUMN_COUNT } from '../table/table-config/trading-column-types'
+import { MarketFeedService } from '../feed/market-feed.service'
+import { BenchmarkMonitor, initialMetrics } from './benchmark-monitor'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { FeedMetrics } from './benchmark-monitor'
+import type { RendererMode } from '../table/table-config/trading-column-types'
+
+const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
+
+@Injectable({ providedIn: 'root' })
+export class TradingBenchmarkController {
+  readonly #destroyRef = inject(DestroyRef)
+  readonly #monitor = new BenchmarkMonitor()
+  readonly #feed = inject(MarketFeedService)
+  readonly #longAnimationFrameObserver: PerformanceObserver | null
+
+  readonly devMode = isDevMode()
+  readonly longAnimationFramesSupported =
+    PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+  readonly tableWorkerEnabled = signal(false)
+  readonly renderedRowCount = signal(0)
+  readonly rendererMode = signal<RendererMode>('stable')
+  readonly requestedVirtualScrollMode = signal<VirtualScrollMode>('none')
+  readonly selectedSymbol = signal<string | null>(null)
+  readonly metrics = signal<FeedMetrics>(initialMetrics)
+  readonly displayQuotes = this.#feed.quotes
+  readonly selectedQuote = computed(() => {
+    const symbol = this.selectedSymbol()
+    return symbol
+      ? (this.displayQuotes().find((quote) => quote.symbol === symbol) ?? null)
+      : null
+  })
+  readonly virtualScrollForced = computed(
+    () => this.#feed.instrumentCount() >= FORCED_VIRTUALIZATION_ROW_COUNT,
+  )
+  readonly virtualScrollMode = computed<VirtualScrollMode>(() =>
+    this.virtualScrollForced() ? 'tanstack' : this.requestedVirtualScrollMode(),
+  )
+  readonly mountedCells = computed(
+    () => this.renderedRowCount() * TRADING_COLUMN_COUNT,
+  )
+  readonly liveComponents = computed(() => {
+    const metrics = this.metrics()
+    return metrics.componentsCreated - metrics.componentsDestroyed
+  })
+
+  #animationFrameId: number | null = null
+
+  constructor() {
+    const stopObservingFeed = this.#feed.observe({
+      messageReceived: () => this.#monitor.recordWorkerMessage(),
+      mutationStarted: () => this.#monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.#monitor.recordBatch(
+          tickCount,
+          updateCount,
+          supersededUpdateCount,
+        ),
+      renderCommitted: () => this.#monitor.recordCompletedRender(),
+    })
+    this.#longAnimationFrameObserver = this.longAnimationFramesSupported
+      ? new PerformanceObserver(this.#recordLongAnimationFrames)
+      : null
+    this.#longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+    this.#destroyRef.onDestroy(() => {
+      stopObservingFeed()
+      if (this.#animationFrameId !== null) {
+        cancelAnimationFrame(this.#animationFrameId)
+      }
+      this.#longAnimationFrameObserver?.disconnect()
+    })
+  }
+
+  setRendererMode(shouldSwap: boolean): void {
+    this.rendererMode.set(shouldSwap ? 'swap' : 'stable')
+  }
+
+  setTableWorkerEnabled(enabled: boolean): void {
+    this.tableWorkerEnabled.set(enabled)
+  }
+
+  setVirtualScrollEnabled(enabled: boolean): void {
+    if (this.virtualScrollForced()) return
+    this.requestedVirtualScrollMode.set(enabled ? 'tanstack' : 'none')
+  }
+
+  setRenderedRowCount(count: number): void {
+    this.renderedRowCount.set(count)
+  }
+
+  resetViewState(): void {
+    this.selectedSymbol.set(null)
+  }
+
+  resetMarket(): void {
+    this.#monitor.reset()
+    this.resetViewState()
+    this.metrics.set(initialMetrics)
+    this.#feed.reset()
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.#monitor.recordAnimationFrame()
+    if (this.#monitor.shouldPublish(now)) {
+      this.metrics.set(this.#monitor.publish(now))
+    }
+    this.#animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  readonly #recordLongAnimationFrames = (
+    entries: PerformanceObserverEntryList,
+  ): void => {
+    for (const entry of entries.getEntries()) {
+      this.#monitor.recordLongAnimationFrame(entry.duration)
+    }
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/beta-trading-table.ts b/examples/angular/realtime-trading/src/app/beta-trading-table.ts
deleted file mode 100644
index 2576824653..0000000000
--- a/examples/angular/realtime-trading/src/app/beta-trading-table.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  output,
-} from '@angular/core'
-import {
-  FlexRender,
-  injectTable,
-  stockFeatures,
-} from '@tanstack/angular-table-beta'
-import { createBetaTradingColumns } from './trading-columns-beta'
-import type { MarketQuote } from './market-data'
-import type { RendererMode } from './trading-column-types'
-
-@Component({
-  selector: 'app-beta-trading-table',
-  imports: [FlexRender],
-  templateUrl: './table-v9.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BetaTradingTable {
-  readonly quotes = input.required<Array<MarketQuote>>()
-  readonly rendererMode = input.required<RendererMode>()
-  readonly updateQuoteAges = input.required<boolean>()
-  readonly quoteClock = input.required<number>()
-  readonly selectedSymbol = input<string | null>(null)
-  readonly symbolSelected = output<string>()
-
-  readonly columns = createBetaTradingColumns({
-    rendererMode: () => this.rendererMode(),
-    updateQuoteAges: () => this.updateQuoteAges(),
-    quoteClock: () => this.quoteClock(),
-    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
-  })
-
-  readonly table = injectTable(() => ({
-    data: this.quotes(),
-    columns: this.columns,
-    features: stockFeatures,
-    getRowId: (row) => row.id,
-  }))
-}
diff --git a/examples/angular/realtime-trading/src/app/core/trading-benchmark.controller.ts b/examples/angular/realtime-trading/src/app/core/trading-benchmark.controller.ts
deleted file mode 100644
index 462d024dbf..0000000000
--- a/examples/angular/realtime-trading/src/app/core/trading-benchmark.controller.ts
+++ /dev/null
@@ -1,290 +0,0 @@
-import {
-  DestroyRef,
-  Injectable,
-  NgZone,
-  afterEveryRender,
-  computed,
-  inject,
-  isDevMode,
-  signal,
-} from '@angular/core'
-import {
-  deriveBenchmarkQuotes,
-  feedLoadRates,
-  rowWorkloadLabel,
-} from '../benchmark-profiles'
-import {
-  BenchmarkMonitor,
-  initialMetrics,
-} from '../benchmark/benchmark-monitor'
-import { applyMarketUpdates, hydrateMarketQuotes } from '../market-data'
-import { TRADING_COLUMN_COUNT } from '../trading-column-types'
-import type { FeedMetrics } from '../benchmark/benchmark-monitor'
-import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
-import type {
-  MarketFeedCommand,
-  MarketFeedEvent,
-} from '../market-feed-protocol'
-import type { MarketQuote } from '../market-data'
-import type { RendererMode } from '../trading-column-types'
-
-export type TableAdapter = 'local' | 'beta' | 'v8'
-
-@Injectable({ providedIn: 'root' })
-export class TradingBenchmarkController {
-  readonly #zone = inject(NgZone)
-  readonly #destroyRef = inject(DestroyRef)
-  readonly #worker: Worker
-  readonly #longAnimationFrameObserver: PerformanceObserver | null
-  readonly #monitor = new BenchmarkMonitor()
-
-  readonly devMode = isDevMode()
-  readonly longAnimationFramesSupported =
-    PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
-  readonly workerReady = signal(false)
-  readonly running = signal(true)
-  readonly instrumentCount = signal(250)
-  readonly feedLoadProfile = signal<FeedLoadProfile>('high')
-  readonly targetEventsPerSecond = signal(10_000)
-  readonly rowWorkloadMode = signal<RowWorkloadMode>('stable')
-  readonly rowWorkloadEpoch = signal(0)
-  readonly tableAdapter = signal<TableAdapter>('local')
-  readonly tableWorkerEnabled = signal(false)
-  readonly rendererMode = signal<RendererMode>('stable')
-  readonly updateSparklines = signal(true)
-  readonly updateQuoteAges = signal(true)
-  readonly quoteClock = signal(Date.now())
-  readonly quotes = signal<Array<MarketQuote>>([])
-  readonly selectedSymbol = signal<string | null>(null)
-  readonly metrics = signal<FeedMetrics>(initialMetrics)
-  readonly displayQuotes = computed(() =>
-    deriveBenchmarkQuotes(
-      this.quotes(),
-      this.rowWorkloadMode(),
-      this.rowWorkloadEpoch(),
-    ),
-  )
-  readonly selectedQuote = computed(() => {
-    const symbol = this.selectedSymbol()
-    return symbol
-      ? (this.displayQuotes().find((quote) => quote.symbol === symbol) ?? null)
-      : null
-  })
-
-  readonly mountedCells = computed(
-    () => this.displayQuotes().length * TRADING_COLUMN_COUNT,
-  )
-  readonly rowWorkloadLabel = computed(() =>
-    rowWorkloadLabel(this.rowWorkloadMode()),
-  )
-  readonly liveComponents = computed(() => {
-    const metrics = this.metrics()
-    return metrics.componentsCreated - metrics.componentsDestroyed
-  })
-
-  #animationFrameId: number | null = null
-  #feedGeneration = 0
-  #lastAgeClockAt = performance.now()
-  #lastRowWorkloadAt = performance.now()
-
-  constructor() {
-    this.#worker = new Worker(
-      new URL('../market-feed.worker', import.meta.url),
-      { type: 'module' },
-    )
-    this.#longAnimationFrameObserver = this.longAnimationFramesSupported
-      ? new PerformanceObserver(this.#recordLongAnimationFrames)
-      : null
-    afterEveryRender(() =>
-      this.#monitor.recordCompletedRender((command) =>
-        this.#postToWorker(command),
-      ),
-    )
-    this.#zone.runOutsideAngular(() => {
-      this.#worker.addEventListener('message', this.#handleWorkerMessage)
-      this.#worker.addEventListener('error', this.#handleWorkerError)
-      this.#longAnimationFrameObserver?.observe({
-        type: 'long-animation-frame',
-        buffered: true,
-      })
-      this.#animationFrameId = requestAnimationFrame(this.#feedFrame)
-    })
-    this.#postToWorker({
-      type: 'initialize',
-      rowCount: this.instrumentCount(),
-      seed: 42 + this.instrumentCount(),
-      running: this.running(),
-      targetEventsPerSecond: this.targetEventsPerSecond(),
-      updateSparklines: this.updateSparklines(),
-    })
-    this.#destroyRef.onDestroy(() => {
-      if (this.#animationFrameId !== null) {
-        cancelAnimationFrame(this.#animationFrameId)
-      }
-      this.#longAnimationFrameObserver?.disconnect()
-      this.#worker.terminate()
-    })
-  }
-
-  toggleFeed(): void {
-    const running = !this.running()
-    this.running.set(running)
-    this.#postToWorker({ type: 'configure', running })
-  }
-
-  setRowCount(count: number): void {
-    this.instrumentCount.set(count)
-    this.#resetWorkerMarket(count)
-  }
-
-  setTargetRate(rate: number): void {
-    this.feedLoadProfile.set('custom')
-    this.targetEventsPerSecond.set(rate)
-    this.#postToWorker({
-      type: 'configure',
-      targetEventsPerSecond: rate,
-    })
-  }
-
-  setFeedLoadProfile(profile: FeedLoadProfile): void {
-    this.feedLoadProfile.set(profile)
-    if (profile === 'custom') {
-      return
-    }
-
-    const rate = feedLoadRates[profile]
-    this.targetEventsPerSecond.set(rate)
-    this.#postToWorker({
-      type: 'configure',
-      targetEventsPerSecond: rate,
-    })
-  }
-
-  setRowWorkloadMode(mode: RowWorkloadMode): void {
-    this.rowWorkloadMode.set(mode)
-    this.rowWorkloadEpoch.set(0)
-    this.#lastRowWorkloadAt = performance.now()
-    this.selectedSymbol.set(null)
-  }
-
-  setTableAdapter(adapter: TableAdapter): void {
-    this.tableAdapter.set(adapter)
-  }
-
-  setRendererMode(shouldSwap: boolean): void {
-    this.rendererMode.set(shouldSwap ? 'swap' : 'stable')
-  }
-
-  setTableWorkerEnabled(enabled: boolean): void {
-    this.tableWorkerEnabled.set(enabled)
-  }
-
-  setSparklineUpdates(updateSparklines: boolean): void {
-    this.updateSparklines.set(updateSparklines)
-    this.#postToWorker({ type: 'configure', updateSparklines })
-  }
-
-  setQuoteAgeUpdates(enabled: boolean): void {
-    this.updateQuoteAges.set(enabled)
-  }
-
-  runBurst(): void {
-    this.#postToWorker({ type: 'burst', eventCount: 25_000 })
-  }
-
-  resetMarket(): void {
-    const count = this.instrumentCount()
-    this.selectedSymbol.set(null)
-    this.#monitor.reset()
-    this.#lastRowWorkloadAt = performance.now()
-    this.rowWorkloadEpoch.set(0)
-    this.quoteClock.set(Date.now())
-    this.metrics.set(initialMetrics)
-    this.#resetWorkerMarket(count)
-  }
-
-  readonly #feedFrame = (now: number): void => {
-    this.#monitor.recordAnimationFrame()
-
-    if (this.updateQuoteAges() && now - this.#lastAgeClockAt >= 100) {
-      this.#monitor.markRenderPending()
-      this.#lastAgeClockAt = now
-      this.quoteClock.set(Date.now())
-    }
-
-    if (
-      this.running() &&
-      (this.rowWorkloadMode() === 'rotating-filter' ||
-        this.rowWorkloadMode() === 'identity-churn') &&
-      now - this.#lastRowWorkloadAt >= 1_000
-    ) {
-      this.#monitor.markRenderPending()
-      this.#lastRowWorkloadAt = now
-      this.rowWorkloadEpoch.update((epoch) => epoch + 1)
-    }
-
-    if (this.#monitor.shouldPublish(now)) {
-      this.metrics.set(this.#monitor.publish(now))
-    }
-
-    this.#animationFrameId = requestAnimationFrame(this.#feedFrame)
-  }
-
-  readonly #recordLongAnimationFrames = (
-    entries: PerformanceObserverEntryList,
-  ): void => {
-    for (const entry of entries.getEntries()) {
-      this.#monitor.recordLongAnimationFrame(entry.duration)
-    }
-  }
-
-  readonly #handleWorkerMessage = ({
-    data,
-  }: MessageEvent<MarketFeedEvent>): void => {
-    if (data.type === 'ready') {
-      this.#feedGeneration = data.generation
-      this.#monitor.setPendingAck(null)
-      this.#monitor.markRenderPending()
-      this.quotes.set(hydrateMarketQuotes(data.quotes))
-      this.workerReady.set(true)
-      return
-    }
-
-    if (data.generation !== this.#feedGeneration) {
-      this.#postToWorker({
-        type: 'ack',
-        generation: data.generation,
-        sequence: data.sequence,
-      })
-      return
-    }
-
-    this.#monitor.markRenderPending()
-    this.quotes.update((quotes) => applyMarketUpdates(quotes, data.updates))
-    this.#monitor.recordBatch(data.eventCount, data.updates.length)
-    this.#monitor.setPendingAck({
-      generation: data.generation,
-      sequence: data.sequence,
-    })
-  }
-
-  readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.workerReady.set(false)
-    this.running.set(false)
-    console.error('Market feed worker failed', error)
-  }
-
-  #resetWorkerMarket(rowCount: number): void {
-    this.workerReady.set(false)
-    this.#monitor.setPendingAck(null)
-    this.#postToWorker({
-      type: 'reset',
-      rowCount,
-      seed: 42 + rowCount,
-    })
-  }
-
-  #postToWorker(command: MarketFeedCommand): void {
-    this.#worker.postMessage(command)
-  }
-}
diff --git a/examples/angular/realtime-trading/src/app/current-trading-table.ts b/examples/angular/realtime-trading/src/app/current-trading-table.ts
deleted file mode 100644
index 3d6225a519..0000000000
--- a/examples/angular/realtime-trading/src/app/current-trading-table.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  output,
-} from '@angular/core'
-import {
-  FlexRender,
-  injectTable,
-  stockFeatures,
-} from '@tanstack/angular-table'
-import { createTradingColumns } from './trading-columns'
-import type { MarketQuote } from './market-data'
-import type { RendererMode } from './trading-column-types'
-
-@Component({
-  selector: 'app-current-trading-table',
-  imports: [FlexRender],
-  templateUrl: './table-v9.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class CurrentTradingTable {
-  readonly quotes = input.required<Array<MarketQuote>>()
-  readonly rendererMode = input.required<RendererMode>()
-  readonly updateQuoteAges = input.required<boolean>()
-  readonly quoteClock = input.required<number>()
-  readonly selectedSymbol = input<string | null>(null)
-  readonly symbolSelected = output<string>()
-
-  readonly columns = createTradingColumns({
-    rendererMode: () => this.rendererMode(),
-    updateQuoteAges: () => this.updateQuoteAges(),
-    quoteClock: () => this.quoteClock(),
-    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
-  })
-
-  readonly table = injectTable(() => ({
-    data: this.quotes(),
-    columns: this.columns,
-    features: stockFeatures,
-    getRowId: (row) => row.id,
-  }))
-}
diff --git a/examples/angular/realtime-trading/src/app/feed/feed-load-profiles.ts b/examples/angular/realtime-trading/src/app/feed/feed-load-profiles.ts
new file mode 100644
index 0000000000..417177ff0f
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/feed/feed-load-profiles.ts
@@ -0,0 +1,18 @@
+export type FeedLoadProfile =
+  | 'low'
+  | 'medium'
+  | 'high'
+  | 'very-high'
+  | 'max'
+  | 'custom'
+
+export const feedLoadRates: Record<
+  Exclude<FeedLoadProfile, 'custom'>,
+  number
+> = {
+  low: 1_000,
+  medium: 5_000,
+  high: 10_000,
+  'very-high': 25_000,
+  max: 100_000,
+}
diff --git a/examples/solid/realtime-trading/src/market-data.ts b/examples/angular/realtime-trading/src/app/feed/market-data.ts
similarity index 95%
rename from examples/solid/realtime-trading/src/market-data.ts
rename to examples/angular/realtime-trading/src/app/feed/market-data.ts
index 02eefa28c3..6231865d3f 100644
--- a/examples/solid/realtime-trading/src/market-data.ts
+++ b/examples/angular/realtime-trading/src/app/feed/market-data.ts
@@ -1,7 +1,7 @@
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
-} from './market-feed-protocol'
+} from './worker/market-feed-protocol'
 
 export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
   history: ReadonlyArray<number>
diff --git a/examples/angular/realtime-trading/src/app/feed/market-feed.service.ts b/examples/angular/realtime-trading/src/app/feed/market-feed.service.ts
new file mode 100644
index 0000000000..56bc97f5af
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/feed/market-feed.service.ts
@@ -0,0 +1,181 @@
+import {
+  DestroyRef,
+  Injectable,
+  afterEveryRender,
+  inject,
+  signal,
+} from '@angular/core'
+import { feedLoadRates } from './feed-load-profiles'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type { FeedLoadProfile } from './feed-load-profiles'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+@Injectable({ providedIn: 'root' })
+export class MarketFeedService {
+  readonly #destroyRef = inject(DestroyRef)
+  readonly #worker = new Worker(
+    new URL('./worker/market-feed.worker', import.meta.url),
+    { type: 'module' },
+  )
+  readonly #observers = new Set<MarketFeedObserver>()
+
+  readonly workerReady = signal(false)
+  readonly running = signal(true)
+  readonly instrumentCount = signal(250)
+  readonly feedLoadProfile = signal<FeedLoadProfile>('high')
+  readonly targetTicksPerSecond = signal(10_000)
+  readonly publishIntervalMs = signal(20)
+  readonly updateSparklines = signal(true)
+  readonly sparklineSampleIntervalMs = signal(250)
+  readonly quotes = signal<Array<MarketQuote>>([])
+
+  #feedSessionId = 0
+  #renderPending = false
+
+  constructor() {
+    afterEveryRender(() => this.completeRender())
+    this.#worker.addEventListener('message', this.#handleWorkerMessage)
+    this.#worker.addEventListener('error', this.#handleWorkerError)
+    this.#post({
+      type: 'start',
+      rowCount: this.instrumentCount(),
+      running: this.running(),
+      ticksPerSecond: this.targetTicksPerSecond(),
+      publishIntervalMs: this.publishIntervalMs(),
+      updateSparklines: this.updateSparklines(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs(),
+    })
+    this.#destroyRef.onDestroy(() => {
+      this.#worker.removeEventListener('message', this.#handleWorkerMessage)
+      this.#worker.removeEventListener('error', this.#handleWorkerError)
+      this.#worker.terminate()
+      this.#observers.clear()
+    })
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  completeRender(): void {
+    if (!this.#renderPending) return
+
+    this.#renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+  }
+
+  toggle(): void {
+    const running = !this.running()
+    this.running.set(running)
+    this.#post({ type: 'set-running', running })
+  }
+
+  setInstrumentCount(count: number): void {
+    this.instrumentCount.set(count)
+    this.reset()
+  }
+
+  setTargetRate(rate: number): void {
+    this.feedLoadProfile.set('custom')
+    this.targetTicksPerSecond.set(rate)
+    this.#post({ type: 'set-rate', ticksPerSecond: rate })
+  }
+
+  setLoadProfile(profile: FeedLoadProfile): void {
+    this.feedLoadProfile.set(profile)
+    if (profile === 'custom') return
+
+    const rate = feedLoadRates[profile]
+    this.targetTicksPerSecond.set(rate)
+    this.#post({ type: 'set-rate', ticksPerSecond: rate })
+  }
+
+  setPublishInterval(publishIntervalMs: number): void {
+    this.publishIntervalMs.set(publishIntervalMs)
+    this.#post({ type: 'set-publish-interval', intervalMs: publishIntervalMs })
+  }
+
+  setSparklineUpdates(enabled: boolean): void {
+    this.updateSparklines.set(enabled)
+    this.#post({ type: 'set-sparklines', enabled })
+  }
+
+  setSparklineSampleInterval(intervalMs: number): void {
+    this.sparklineSampleIntervalMs.set(intervalMs)
+    this.#post({ type: 'set-sparkline-interval', intervalMs })
+  }
+
+  runBurst(): void {
+    this.#post({ type: 'burst', tickCount: 25_000 })
+  }
+
+  reset(): void {
+    this.workerReady.set(false)
+    this.#post({ type: 'reset', rowCount: this.instrumentCount() })
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#feedSessionId = data.sessionId
+      this.#startMutation()
+      this.quotes.set(hydrateMarketQuotes(data.quotes))
+      this.workerReady.set(true)
+      return
+    }
+
+    if (data.sessionId !== this.#feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.quotes.update((quotes) => applyMarketUpdates(quotes, data.updates))
+    const batch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(batch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.workerReady.set(false)
+    this.running.set(false)
+    console.error('Market feed worker failed', error)
+  }
+
+  #startMutation(): void {
+    this.#renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#worker.postMessage(command)
+  }
+}
diff --git a/examples/react/realtime-trading/src/market-feed-engine.ts b/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
similarity index 67%
rename from examples/react/realtime-trading/src/market-feed-engine.ts
rename to examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
index e77d76656c..c562427bba 100644
--- a/examples/react/realtime-trading/src/market-feed-engine.ts
+++ b/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
@@ -1,39 +1,30 @@
+import { globalInstruments } from '../../../../../../realtime-trading-shared/sp500-instruments'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
 } from './market-feed-protocol'
 
-const baseInstruments = [
-  ['ALP', 'Alpine Systems', 'XNAS'],
-  ['ARC', 'Arcadia Cloud', 'XNYS'],
-  ['BLU', 'Blue River Energy', 'BATS'],
-  ['CRN', 'Crown Robotics', 'XNAS'],
-  ['DYN', 'Dynasty Networks', 'XNYS'],
-  ['ECO', 'Ecoframe Materials', 'IEX'],
-  ['FLX', 'Flux Semiconductors', 'XNAS'],
-  ['GEO', 'Geode Analytics', 'BATS'],
-  ['HLX', 'Helix Biotech', 'XNYS'],
-  ['ION', 'Ion Mobility', 'IEX'],
-  ['JDE', 'Jade Financial', 'XNYS'],
-  ['KNT', 'Kinetic Aerospace', 'XNAS'],
-] as const
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
 
 export class MarketFeedEngine {
   #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
   #random = createRandom(2_026)
   #rowCursor = 0
-  #historyTick = 0
-  #eventIndex = 0
+  #tickIndex = 0
 
-  reset(count: number, seed: number): Array<MarketQuoteSnapshot> {
-    const random = createRandom(seed)
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
 
     this.#quotes = Array.from({ length: count }, (_, index) => {
-      const [baseSymbol, company, venue] =
-        baseInstruments[index % baseInstruments.length]
-      const series = Math.floor(index / baseInstruments.length)
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
       const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
-      const open = roundPrice(20 + random() * 480)
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
       const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
       const history = Array.from({ length: 24 }, (_, historyIndex) =>
         roundPrice(
@@ -48,8 +39,11 @@ export class MarketFeedEngine {
         id: `instrument-${index}`,
         symbol,
         company,
-        venue,
+        venue: market,
+        previousClose,
         open,
+        high: open,
+        low: open,
         price: open,
         bid: roundPrice(open - spread / 2),
         ask: roundPrice(open + spread / 2),
@@ -57,16 +51,17 @@ export class MarketFeedEngine {
         askSize: Math.floor(100 + random() * 25_000),
         lastSize,
         lastMove: 0,
-        lastUpdatedAt: Date.now(),
+        lastUpdatedAt: createdAt,
         volume,
         turnover: roundMoney(open * volume),
         history,
       }
     })
 
-    this.#random = createRandom(2_026 + seed)
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
     this.#rowCursor = 0
-    this.#historyTick = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
 
     return this.#quotes.map((quote) => ({
       ...quote,
@@ -74,22 +69,31 @@ export class MarketFeedEngine {
     }))
   }
 
-  applyEvents(
-    eventCount: number,
+  applyTicks(
+    tickCount: number,
     updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
   ): Array<MarketQuoteUpdate> {
-    if (this.#quotes.length === 0 || eventCount <= 0) return []
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
 
     const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
     const updatedQuotes = new Map<number, MarketQuoteUpdate>()
     const stride = 97
 
-    this.#eventIndex = 0
-    while (this.#eventIndex < eventCount) {
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
       this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
       const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
       const shouldUpdateHistory =
-        updateSparklines && this.#historyTick++ % 4 === 0
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
 
       this.#applyTick(quote, shouldUpdateHistory, updatedAt)
 
@@ -104,13 +108,15 @@ export class MarketFeedEngine {
         lastSize: quote.lastSize,
         lastMove: quote.lastMove,
         lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
         volume: quote.volume,
         turnover: quote.turnover,
         ...(shouldUpdateHistory || previousUpdate?.history
           ? { history: [...quote.history] }
           : {}),
       })
-      this.#eventIndex++
+      this.#tickIndex++
     }
 
     return [...updatedQuotes.values()]
@@ -132,6 +138,8 @@ export class MarketFeedEngine {
 
     quote.lastMove = nextPrice - previousPrice
     quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
     quote.bid = roundPrice(nextPrice - spread / 2)
     quote.ask = roundPrice(nextPrice + spread / 2)
     quote.bidSize = Math.floor(100 + this.#random() * 25_000)
@@ -152,13 +160,9 @@ function createRandom(seed: number): () => number {
   return () => {
     runtime.state += 0x6d2b79f5
     const stateValue = runtime.state
-    const firstMix = Math.imul(
-      stateValue ^ (stateValue >>> 15),
-      stateValue | 1,
-    )
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
     const secondMix =
-      firstMix +
-      Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
     const value = firstMix ^ secondMix
     return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
   }
diff --git a/examples/react/realtime-trading/src/market-feed-protocol.ts b/examples/angular/realtime-trading/src/app/feed/worker/market-feed-protocol.ts
similarity index 54%
rename from examples/react/realtime-trading/src/market-feed-protocol.ts
rename to examples/angular/realtime-trading/src/app/feed/worker/market-feed-protocol.ts
index 0a8b9925f5..21997ec89c 100644
--- a/examples/react/realtime-trading/src/market-feed-protocol.ts
+++ b/examples/angular/realtime-trading/src/app/feed/worker/market-feed-protocol.ts
@@ -3,7 +3,10 @@ export interface MarketQuoteSnapshot {
   symbol: string
   company: string
   venue: string
+  previousClose: number
   open: number
+  high: number
+  low: number
   price: number
   bid: number
   ask: number
@@ -27,6 +30,8 @@ export interface MarketQuoteUpdate {
   lastSize: number
   lastMove: number
   lastUpdatedAt: number
+  high: number
+  low: number
   volume: number
   turnover: number
   history?: Array<number>
@@ -34,33 +39,32 @@ export interface MarketQuoteUpdate {
 
 export type MarketFeedCommand =
   | {
-      type: 'initialize'
+      type: 'start'
       rowCount: number
-      seed: number
       running: boolean
-      targetEventsPerSecond: number
+      ticksPerSecond: number
+      publishIntervalMs: number
       updateSparklines: boolean
+      sparklineSampleIntervalMs: number
     }
-  | {
-      type: 'configure'
-      running?: boolean
-      targetEventsPerSecond?: number
-      updateSparklines?: boolean
-    }
-  | { type: 'reset'; rowCount: number; seed: number }
-  | { type: 'burst'; eventCount: number }
-  | { type: 'ack'; generation: number; sequence: number }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
 
 export type MarketFeedEvent =
   | {
-      type: 'ready'
-      generation: number
+      type: 'snapshot'
+      sessionId: number
       quotes: Array<MarketQuoteSnapshot>
     }
   | {
-      type: 'batch'
-      generation: number
-      sequence: number
-      eventCount: number
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
       updates: Array<MarketQuoteUpdate>
     }
diff --git a/examples/angular/realtime-trading/src/app/feed/worker/market-feed.worker.ts b/examples/angular/realtime-trading/src/app/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..7b22656f2e
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/feed/worker/market-feed.worker.ts
@@ -0,0 +1,142 @@
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: 10_000,
+  publishIntervalMs: 20,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 250,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/angular/realtime-trading/src/app/market-feed.worker.ts b/examples/angular/realtime-trading/src/app/market-feed.worker.ts
deleted file mode 100644
index 7ce6313798..0000000000
--- a/examples/angular/realtime-trading/src/app/market-feed.worker.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { MarketFeedEngine } from './market-feed-engine'
-import type {
-  MarketFeedCommand,
-  MarketFeedEvent,
-  MarketQuoteUpdate,
-} from './market-feed-protocol'
-
-const engine = new MarketFeedEngine()
-const pendingUpdates = new Map<number, MarketQuoteUpdate>()
-
-const runtime = {
-  generation: 0,
-  sequence: 0,
-  inFlightSequence: null as number | null,
-  pendingEventCount: 0,
-  initialized: false,
-  running: true,
-  targetEventsPerSecond: 10_000,
-  updateSparklines: true,
-  eventBudget: 0,
-  lastTickAt: performance.now(),
-}
-
-addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
-  switch (data.type) {
-    case 'initialize':
-      runtime.running = data.running
-      runtime.targetEventsPerSecond = data.targetEventsPerSecond
-      runtime.updateSparklines = data.updateSparklines
-      reset(data.rowCount, data.seed)
-      break
-    case 'configure':
-      runtime.running = data.running ?? runtime.running
-      runtime.targetEventsPerSecond =
-        data.targetEventsPerSecond ?? runtime.targetEventsPerSecond
-      runtime.updateSparklines =
-        data.updateSparklines ?? runtime.updateSparklines
-      break
-    case 'reset':
-      reset(data.rowCount, data.seed)
-      break
-    case 'burst':
-      produceEvents(data.eventCount)
-      flush()
-      break
-    case 'ack':
-      if (
-        data.generation === runtime.generation &&
-        data.sequence === runtime.inFlightSequence
-      ) {
-        runtime.inFlightSequence = null
-        flush()
-      }
-      break
-  }
-})
-
-setInterval(() => {
-  const now = performance.now()
-  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
-  runtime.lastTickAt = now
-
-  if (runtime.initialized && runtime.running) {
-    runtime.eventBudget +=
-      (runtime.targetEventsPerSecond * elapsed) / 1_000
-    const eventCount = Math.floor(runtime.eventBudget)
-    runtime.eventBudget -= eventCount
-    produceEvents(eventCount)
-  }
-
-  flush()
-}, 16)
-
-function reset(rowCount: number, seed: number): void {
-  runtime.initialized = true
-  runtime.generation++
-  runtime.sequence = 0
-  runtime.inFlightSequence = null
-  runtime.pendingEventCount = 0
-  pendingUpdates.clear()
-  runtime.eventBudget = 0
-  runtime.lastTickAt = performance.now()
-
-  post({
-    type: 'ready',
-    generation: runtime.generation,
-    quotes: engine.reset(rowCount, seed),
-  })
-}
-
-function produceEvents(eventCount: number): void {
-  if (!runtime.initialized || eventCount <= 0) return
-
-  runtime.pendingEventCount += eventCount
-  for (const update of engine.applyEvents(
-    eventCount,
-    runtime.updateSparklines,
-  )) {
-    const previousUpdate = pendingUpdates.get(update.index)
-    pendingUpdates.set(update.index, {
-      ...update,
-      ...(update.history || !previousUpdate?.history
-        ? {}
-        : { history: previousUpdate.history }),
-    })
-  }
-}
-
-function flush(): void {
-  if (
-    runtime.inFlightSequence !== null ||
-    runtime.pendingEventCount === 0
-  )
-    return
-
-  const nextSequence = ++runtime.sequence
-  const message: MarketFeedEvent = {
-    type: 'batch',
-    generation: runtime.generation,
-    sequence: nextSequence,
-    eventCount: runtime.pendingEventCount,
-    updates: [...pendingUpdates.values()],
-  }
-
-  runtime.pendingEventCount = 0
-  pendingUpdates.clear()
-  runtime.inFlightSequence = nextSequence
-  post(message)
-}
-
-function post(event: MarketFeedEvent): void {
-  postMessage(event)
-}
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.html b/examples/angular/realtime-trading/src/app/shell/configurator.html
index c5c1b47f4a..465bca411c 100644
--- a/examples/angular/realtime-trading/src/app/shell/configurator.html
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.html
@@ -1,42 +1,20 @@
-<aside class="configurator" aria-label="Benchmark configurator">
+<aside id="benchmark-configurator" class="configurator" aria-label="Benchmark configurator">
   <header>
     <span>CONFIGURATOR</span>
     <small>RUN PARAMETERS</small>
   </header>
 
-  <section class="config-section" aria-labelledby="adapter-settings">
-    <h2 id="adapter-settings">TABLE ADAPTER</h2>
-    <label class="field">
-      <span>Implementation</span>
-      <select
-        data-testid="adapter-select"
-        [value]="controller.tableAdapter()"
-        (change)="setTableAdapter($event)"
-      >
-        <option value="local">Local optimized (v9)</option>
-        <option value="beta">Published 9.0.0-beta.80</option>
-        <option value="v8">Published 8.21.4</option>
-      </select>
-      <small>Switching destroys the active table and mounts the selected adapter.</small>
-    </label>
-  </section>
-
   <section class="config-section" aria-labelledby="feed-settings">
     <h2 id="feed-settings">FEED</h2>
-    <button
-      class="primary-action"
-      type="button"
-      data-testid="feed-toggle"
-      (click)="controller.toggleFeed()"
-    >
-      {{ controller.running() ? 'PAUSE FEED' : 'START FEED' }}
+    <button class="primary-action" type="button" data-testid="feed-toggle" (click)="feed.toggle()">
+      {{ feed.running() ? 'PAUSE FEED' : 'START FEED' }}
     </button>
 
     <label class="field">
       <span>Instruments</span>
       <select
         data-testid="instrument-count-select"
-        [value]="controller.instrumentCount()"
+        [value]="feed.instrumentCount()"
         (change)="setRowCount($event)"
       >
         <option value="50">50</option>
@@ -47,6 +25,11 @@ <h2 id="feed-settings">FEED</h2>
         <option value="500">500</option>
         <option value="750">750</option>
         <option value="1000">1,000</option>
+        <option value="1500">1,500</option>
+        <option value="2500">2,500</option>
+        <option value="5000">5,000</option>
+        <option value="1000000">1,000,000</option>
+        <option value="10000000">10,000,000</option>
       </select>
     </label>
 
@@ -54,7 +37,7 @@ <h2 id="feed-settings">FEED</h2>
       <span>Load profile</span>
       <select
         data-testid="load-profile-select"
-        [value]="controller.feedLoadProfile()"
+        [value]="feed.feedLoadProfile()"
         (change)="setFeedLoadProfile($event)"
       >
         <option value="low">Low · 1K/s</option>
@@ -69,8 +52,8 @@ <h2 id="feed-settings">FEED</h2>
 
     <label class="field rate-field">
       <span>
-        Target event rate
-        <strong>{{ formatRate(controller.targetEventsPerSecond()) }}/s</strong>
+        Worker sample generation
+        <strong>{{ formatRate(feed.targetTicksPerSecond()) }}/s</strong>
       </span>
       <input
         data-testid="target-rate-slider"
@@ -78,38 +61,42 @@ <h2 id="feed-settings">FEED</h2>
         min="100"
         max="100000"
         step="100"
-        [value]="controller.targetEventsPerSecond()"
+        [value]="feed.targetTicksPerSecond()"
         (input)="setTargetRate($event)"
       />
-      <small>100 — 100,000 events/s</small>
+      <small>
+        Synthetic quote samples generated inside the worker, not browser events. Repeated
+        instruments are coalesced before each message.
+      </small>
     </label>
-  </section>
 
-  <section class="config-section" aria-labelledby="render-settings">
-    <h2 id="render-settings">RENDER PATH</h2>
     <label class="field">
-      <span>Row workload</span>
+      <span>Publish interval</span>
       <select
-        data-testid="row-workload-select"
-        [value]="controller.rowWorkloadMode()"
-        (change)="setRowWorkloadMode($event)"
+        data-testid="publish-interval-select"
+        [value]="feed.publishIntervalMs()"
+        (change)="setPublishInterval($event)"
       >
-        <option value="stable">Stable universe</option>
-        <option value="price-sort">Continuously sort by Last</option>
-        <option value="rotating-filter">Rotate 20% filtered rows</option>
-        <option value="identity-churn">Replace 10% of ticker IDs</option>
+        <option value="8">8 ms · 125 msg/s</option>
+        <option value="16">16 ms · 62.5 msg/s</option>
+        <option value="20">20 ms · 50 msg/s</option>
+        <option value="33">33 ms · 30 msg/s</option>
+        <option value="50">50 ms · 20 msg/s</option>
+        <option value="100">100 ms · 10 msg/s</option>
+        <option value="250">250 ms · 4 msg/s</option>
+        <option value="500">500 ms · 2 msg/s</option>
+        <option value="1000">1000 ms · 1 msg/s</option>
       </select>
-      <small>
-        Reorder preserves IDs; filter removes/reinserts rows; replacement forces
-        new row identities.
-      </small>
+      <small> The worker posts one coalesced update message at this target cadence. </small>
     </label>
+  </section>
 
+  <section class="config-section" aria-labelledby="render-settings">
+    <h2 id="render-settings">RENDER PATH</h2>
     <label class="toggle-field">
       <input
         data-testid="table-worker-toggle"
         type="checkbox"
-        [disabled]="controller.tableAdapter() !== 'local'"
         [checked]="controller.tableWorkerEnabled()"
         (change)="setTableWorkerEnabled($event)"
       />
@@ -119,47 +106,74 @@ <h2 id="render-settings">RENDER PATH</h2>
       </span>
     </label>
 
-    <label class="toggle-field">
+    <label class="toggle-field" data-testid="virtual-scroll-mode">
       <input
+        data-testid="virtual-scroll-toggle"
         type="checkbox"
-        [checked]="controller.rendererMode() === 'swap'"
-        (change)="setRendererMode($event)"
+        [checked]="controller.virtualScrollMode() === 'tanstack'"
+        [disabled]="controller.virtualScrollForced()"
+        (change)="setVirtualScrollEnabled($event)"
       />
       <span>
-        Swap Tick component A ↔ B
-        <small>destroy and recreate when direction changes</small>
+        Row rendering ·
+        <strong>
+          {{ controller.virtualScrollMode() === 'tanstack' ? 'TanStack Virtual' : 'Full DOM' }}
+        </strong>
+        <small>
+          @if (controller.virtualScrollForced()) {
+            Required and locked at 1,500+ instruments.
+          } @else {
+            Optional below 1,500 instruments.
+          }
+        </small>
       </span>
     </label>
 
     <label class="toggle-field">
       <input
         type="checkbox"
-        [checked]="controller.updateSparklines()"
-        (change)="setSparklineUpdates($event)"
+        [checked]="controller.rendererMode() === 'swap'"
+        (change)="setRendererMode($event)"
       />
       <span>
-        Update sparklines
-        <small>new history input every four quote events</small>
+        Swap Tick component A ↔ B
+        <small>destroy and recreate when direction changes</small>
       </span>
     </label>
 
     <label class="toggle-field">
       <input
         type="checkbox"
-        [checked]="controller.updateQuoteAges()"
-        (change)="setQuoteAgeUpdates($event)"
+        [checked]="feed.updateSparklines()"
+        (change)="setSparklineUpdates($event)"
       />
       <span>
-        Update quote age clock
-        <small>invalidates every Age cell on a shared 100 ms clock</small>
+        Update intraday charts
+        <small>sample rolling prices independently for every instrument</small>
       </span>
     </label>
+
+    <label class="field">
+      <span>Intraday sample interval</span>
+      <select
+        data-testid="sparkline-sample-interval-select"
+        [value]="feed.sparklineSampleIntervalMs()"
+        (change)="setSparklineSampleInterval($event)"
+      >
+        <option value="100">100 ms</option>
+        <option value="250">250 ms</option>
+        <option value="500">500 ms</option>
+        <option value="1000">1,000 ms</option>
+        <option value="2000">2,000 ms</option>
+      </select>
+      <small>Minimum time between rolling samples for the same instrument.</small>
+    </label>
   </section>
 
   <section class="config-section" aria-labelledby="stress-actions">
     <h2 id="stress-actions">STRESS ACTIONS</h2>
     <div class="action-grid">
-      <button type="button" (click)="controller.runBurst()">RUN 25K BURST</button>
+      <button type="button" (click)="feed.runBurst()">RUN 25K BURST</button>
       <button type="button" (click)="controller.resetMarket()">RESET SESSION</button>
     </div>
   </section>
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.ts b/examples/angular/realtime-trading/src/app/shell/configurator.ts
index 560774567f..533a156c92 100644
--- a/examples/angular/realtime-trading/src/app/shell/configurator.ts
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
+import { MarketFeedService } from '../feed/market-feed.service'
 import { Diagnostics } from './diagnostics'
 import { SelectedInstrument } from './selected-instrument'
 import {
@@ -8,8 +9,7 @@ import {
   inputValue,
   selectValue,
 } from './shell-formatters'
-import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
-import type { TableAdapter } from '../core/trading-benchmark.controller'
+import type { FeedLoadProfile } from '../feed/feed-load-profiles'
 
 @Component({
   selector: 'app-configurator',
@@ -19,28 +19,27 @@ import type { TableAdapter } from '../core/trading-benchmark.controller'
 })
 export class Configurator {
   readonly controller = inject(TradingBenchmarkController)
+  readonly feed = inject(MarketFeedService)
   readonly formatRate = formatRate
 
-  readonly setRowCount = (event: Event) =>
-    this.controller.setRowCount(Number(selectValue(event)))
+  readonly setRowCount = (event: Event) => {
+    this.controller.resetViewState()
+    this.feed.setInstrumentCount(Number(selectValue(event)))
+  }
   readonly setTargetRate = (event: Event) =>
-    this.controller.setTargetRate(Number(inputValue(event)))
+    this.feed.setTargetRate(Number(inputValue(event)))
   readonly setFeedLoadProfile = (event: Event) =>
-    this.controller.setFeedLoadProfile(
-      selectValue(event) as FeedLoadProfile,
-    )
-  readonly setRowWorkloadMode = (event: Event) =>
-    this.controller.setRowWorkloadMode(
-      selectValue(event) as RowWorkloadMode,
-    )
-  readonly setTableAdapter = (event: Event) =>
-    this.controller.setTableAdapter(selectValue(event) as TableAdapter)
+    this.feed.setLoadProfile(selectValue(event) as FeedLoadProfile)
+  readonly setPublishInterval = (event: Event) =>
+    this.feed.setPublishInterval(Number(selectValue(event)))
   readonly setRendererMode = (event: Event) =>
     this.controller.setRendererMode(inputChecked(event))
   readonly setTableWorkerEnabled = (event: Event) =>
     this.controller.setTableWorkerEnabled(inputChecked(event))
+  readonly setVirtualScrollEnabled = (event: Event) =>
+    this.controller.setVirtualScrollEnabled(inputChecked(event))
   readonly setSparklineUpdates = (event: Event) =>
-    this.controller.setSparklineUpdates(inputChecked(event))
-  readonly setQuoteAgeUpdates = (event: Event) =>
-    this.controller.setQuoteAgeUpdates(inputChecked(event))
+    this.feed.setSparklineUpdates(inputChecked(event))
+  readonly setSparklineSampleInterval = (event: Event) =>
+    this.feed.setSparklineSampleInterval(Number(selectValue(event)))
 }
diff --git a/examples/angular/realtime-trading/src/app/shell/diagnostics.ts b/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
index d295b51ff9..ef9ef54e6a 100644
--- a/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
+++ b/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
-import { formatInteger } from './shell-formatters'
+import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
+import { formatInteger, formatRate } from './shell-formatters'
 
 @Component({
   selector: 'app-diagnostics',
@@ -9,7 +9,14 @@ import { formatInteger } from './shell-formatters'
       <h2 id="diagnostics">DIAGNOSTICS</h2>
       <dl>
         <div>
-          <dt>Mounted cells</dt>
+          <dt>Rendered rows / source</dt>
+          <dd data-testid="rendered-row-count">
+            {{ formatInteger(controller.renderedRowCount()) }} /
+            {{ formatInteger(controller.displayQuotes().length) }}
+          </dd>
+        </div>
+        <div>
+          <dt>Mounted cell hosts</dt>
           <dd>{{ formatInteger(controller.mountedCells()) }}</dd>
         </div>
         <div>
@@ -30,7 +37,13 @@ import { formatInteger } from './shell-formatters'
           </dd>
         </div>
         <div>
-          <dt>Last batch events / rows</dt>
+          <dt>Worker-coalesced updates / s</dt>
+          <dd data-testid="superseded-update-rate">
+            {{ formatRate(controller.metrics().supersededUpdatesPerSecond) }}
+          </dd>
+        </div>
+        <div>
+          <dt>Last batch ticks / rows</dt>
           <dd>
             {{ formatInteger(controller.metrics().lastBatchSize) }} /
             {{ formatInteger(controller.metrics().lastUpdateCount) }}
@@ -68,4 +81,5 @@ import { formatInteger } from './shell-formatters'
 export class Diagnostics {
   readonly controller = inject(TradingBenchmarkController)
   readonly formatInteger = formatInteger
+  readonly formatRate = formatRate
 }
diff --git a/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts b/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
index 3006101ab0..1498a1e9a7 100644
--- a/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
+++ b/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
 import { formatInteger } from './shell-formatters'
 
 @Component({
@@ -7,7 +7,7 @@ import { formatInteger } from './shell-formatters'
   template: `
     <footer class="market-statusbar">
       <span>
-        BATCH EVENTS
+        BATCH TICKS
         <strong>
           {{ formatInteger(controller.metrics().lastBatchSize) }}
         </strong>
@@ -19,7 +19,7 @@ import { formatInteger } from './shell-formatters'
         </strong>
       </span>
       <span>
-        HOSTS
+        CELL HOSTS
         <strong>{{ formatInteger(controller.mountedCells()) }}</strong>
       </span>
       <span>
@@ -27,7 +27,7 @@ import { formatInteger } from './shell-formatters'
         <strong>{{ formatInteger(controller.liveComponents()) }}</strong>
       </span>
       <span class="statusbar-spacer"></span>
-      <span>WORKER / ACKNOWLEDGED / IMMUTABLE</span>
+      <span>WORKER / FIXED CADENCE / IMMUTABLE</span>
     </footer>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/examples/angular/realtime-trading/src/app/shell/market-toolbar.ts b/examples/angular/realtime-trading/src/app/shell/market-toolbar.ts
deleted file mode 100644
index a42c0e55c7..0000000000
--- a/examples/angular/realtime-trading/src/app/shell/market-toolbar.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
-import { formatInteger } from './shell-formatters'
-
-@Component({
-  selector: 'app-market-toolbar',
-  template: `
-    <header class="market-toolbar">
-      <div class="watchlist-name">
-        <span>WATCHLIST</span>
-        <strong>ALL INSTRUMENTS</strong>
-      </div>
-      <div class="market-context">
-        <span>
-          {{ formatInteger(controller.displayQuotes().length) }} /
-          {{ formatInteger(controller.quotes().length) }} SYMBOLS
-        </span>
-        <span>
-          {{
-            controller.tableAdapter() === 'local'
-              ? 'LOCAL OPTIMIZED'
-              : controller.tableAdapter() === 'beta'
-                ? 'BETA.80'
-                : 'V8.21.4'
-          }}
-        </span>
-        <span>WORKER STREAM</span>
-        <span>
-          {{
-            controller.tableAdapter() === 'local' &&
-            controller.tableWorkerEnabled()
-              ? 'ROW MODEL WORKER ON'
-              : 'ROW MODEL MAIN THREAD'
-          }}
-        </span>
-        <span>IMMUTABLE ROWS</span>
-        <span>{{ controller.rowWorkloadLabel() }}</span>
-        <span>
-          {{
-            controller.rendererMode() === 'stable'
-              ? 'STABLE CELLS'
-              : 'A/B CELL SWAP'
-          }}
-        </span>
-        <span>
-          {{ controller.updateSparklines() ? 'CHARTS ON' : 'CHARTS OFF' }}
-        </span>
-        <span>
-          {{ controller.updateQuoteAges() ? 'AGE CLOCK ON' : 'AGE CLOCK OFF' }}
-        </span>
-      </div>
-    </header>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MarketToolbar {
-  readonly controller = inject(TradingBenchmarkController)
-  readonly formatInteger = formatInteger
-}
diff --git a/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts b/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
index 145d7121f7..8c98b60d46 100644
--- a/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
+++ b/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
@@ -1,31 +1,45 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
-import { formatInteger, formatMs, formatRate } from './shell-formatters'
+import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
+import { formatMs, formatRate } from './shell-formatters'
 
 @Component({
   selector: 'app-metrics-strip',
   template: `
     <section class="metrics-strip" aria-label="Live performance metrics">
       <article>
-        <span>THROUGHPUT</span>
+        <span>WORKER SAMPLES</span>
         <strong data-testid="actual-rate">
-          {{ formatRate(controller.metrics().actualEventsPerSecond) }}
+          {{ formatRate(controller.metrics().actualTicksPerSecond) }}
         </strong>
-        <small>events/s</small>
+        <small>generated samples/s</small>
       </article>
       <article>
-        <span>RAF RATE</span>
-        <strong data-testid="raf-rate">
-          {{ controller.metrics().rafCallbacksPerSecond.toFixed(1) }}
+        <span>ROW UPDATES</span>
+        <strong data-testid="row-update-rate">
+          {{ formatRate(controller.metrics().rowUpdatesPerSecond) }}
         </strong>
-        <small>callbacks/s</small>
+        <small>unique rows applied/s</small>
       </article>
       <article>
-        <span>TABLE RENDERS</span>
+        <span>MESSAGES</span>
+        <strong data-testid="message-rate">
+          {{ controller.metrics().workerMessagesPerSecond.toFixed(1) }}
+        </strong>
+        <small>worker messages/s</small>
+      </article>
+      <article>
+        <span>STATE APPLIES</span>
+        <strong data-testid="state-apply-rate">
+          {{ controller.metrics().stateApplicationsPerSecond.toFixed(1) }}
+        </strong>
+        <small>quote snapshots/s</small>
+      </article>
+      <article>
+        <span>TABLE COMMITS</span>
         <strong data-testid="table-render-rate">
           {{ controller.metrics().tableRendersPerSecond.toFixed(1) }}
         </strong>
-        <small>worker batches/s</small>
+        <small>completed renders/s</small>
       </article>
       <article>
         <span>AVG RENDER</span>
@@ -55,20 +69,12 @@ import { formatInteger, formatMs, formatRate } from './shell-formatters'
           <small>unsupported</small>
         }
       </article>
-      <article>
-        <span>TOTAL EVENTS</span>
-        <strong data-testid="total-events">
-          {{ formatInteger(controller.metrics().totalEvents) }}
-        </strong>
-        <small>since reset</small>
-      </article>
     </section>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MetricsStrip {
   readonly controller = inject(TradingBenchmarkController)
-  readonly formatInteger = formatInteger
   readonly formatMs = formatMs
   readonly formatRate = formatRate
 }
diff --git a/examples/angular/realtime-trading/src/app/shell/selected-instrument.ts b/examples/angular/realtime-trading/src/app/shell/selected-instrument.ts
index 541d30fe2b..bd537d13ba 100644
--- a/examples/angular/realtime-trading/src/app/shell/selected-instrument.ts
+++ b/examples/angular/realtime-trading/src/app/shell/selected-instrument.ts
@@ -1,10 +1,13 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
 
 @Component({
   selector: 'app-selected-instrument',
   template: `
-    <section class="config-section selected-instrument">
+    <section
+      class="config-section selected-instrument"
+      data-testid="selected-instrument"
+    >
       <h2>SELECTED INSTRUMENT</h2>
       @if (controller.selectedQuote(); as quote) {
         <div class="selection">
@@ -25,7 +28,9 @@ import { TradingBenchmarkController } from '../core/trading-benchmark.controller
           </div>
         </dl>
       } @else {
-        <p>Click a value in the Last column to inspect its output.</p>
+        <p>
+          Click or begin a cell selection in any row to inspect its instrument.
+        </p>
       }
     </section>
   `,
diff --git a/examples/angular/realtime-trading/src/app/shell/shell-header.ts b/examples/angular/realtime-trading/src/app/shell/shell-header.ts
index 04e763f0f3..3b5a47f21c 100644
--- a/examples/angular/realtime-trading/src/app/shell/shell-header.ts
+++ b/examples/angular/realtime-trading/src/app/shell/shell-header.ts
@@ -1,5 +1,11 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+  output,
+} from '@angular/core'
+import { MarketFeedService } from '../feed/market-feed.service'
 
 @Component({
   selector: 'app-shell-header',
@@ -10,27 +16,49 @@ import { TradingBenchmarkController } from '../core/trading-benchmark.controller
         <strong>MARKET MONITOR</strong>
         <span class="environment">SIMULATED</span>
       </div>
-      <div class="session-info">
-        <span>ANGULAR / FLEX RENDER</span>
-        <span
-          class="feed-status"
-          data-testid="feed-status"
-          [class.is-running]="controller.workerReady() && controller.running()"
+      <div class="header-actions">
+        <div class="session-info">
+          <span>ANGULAR / FLEX RENDER</span>
+          <span
+            class="feed-status"
+            data-testid="feed-status"
+            [class.is-running]="feed.workerReady() && feed.running()"
+          >
+            <span class="status-dot" aria-hidden="true"></span>
+            {{
+              !feed.workerReady()
+                ? 'FEED CONNECTING'
+                : feed.running()
+                  ? 'FEED LIVE'
+                  : 'FEED PAUSED'
+            }}
+          </span>
+        </div>
+        <button
+          class="sidebar-toggle"
+          type="button"
+          [attr.aria-expanded]="sidebarOpen()"
+          aria-controls="benchmark-configurator"
+          [attr.aria-label]="
+            sidebarOpen() ? 'Close configurator' : 'Open configurator'
+          "
+          [attr.title]="
+            sidebarOpen() ? 'Close configurator' : 'Open configurator'
+          "
+          (click)="sidebarToggle.emit()"
         >
-          <span class="status-dot" aria-hidden="true"></span>
-          {{
-            !controller.workerReady()
-              ? 'FEED CONNECTING'
-              : controller.running()
-                ? 'FEED LIVE'
-                : 'FEED PAUSED'
-          }}
-        </span>
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect>
+            <path d="M12.5 3v14"></path>
+          </svg>
+        </button>
       </div>
     </header>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShellHeader {
-  readonly controller = inject(TradingBenchmarkController)
+  readonly feed = inject(MarketFeedService)
+  readonly sidebarOpen = input.required<boolean>()
+  readonly sidebarToggle = output<void>()
 }
diff --git a/examples/angular/realtime-trading/src/app/shell/trading-shell.html b/examples/angular/realtime-trading/src/app/shell/trading-shell.html
index 02abfd1289..dd5d605b2c 100644
--- a/examples/angular/realtime-trading/src/app/shell/trading-shell.html
+++ b/examples/angular/realtime-trading/src/app/shell/trading-shell.html
@@ -1,20 +1,27 @@
-<main class="trading-terminal">
-  <app-shell-header />
+<main
+  class="trading-terminal"
+  [class.is-sidebar-collapsed]="!sidebarOpen()"
+>
+  <div class="shell-header">
+    <app-shell-header
+      [sidebarOpen]="sidebarOpen()"
+      (sidebarToggle)="toggleSidebar()"
+    />
 
-  @if (devMode) {
-    <aside class="development-warning">
-      DEV BUILD — use the production configuration before recording results.
-    </aside>
-  }
+    @if (devMode) {
+      <aside class="development-warning">
+        DEV BUILD — use the production configuration before recording results.
+      </aside>
+    }
+  </div>
 
-  <div class="workspace">
-    <section class="market-panel" aria-label="Live synthetic quotes">
-      <app-market-toolbar />
-      <app-metrics-strip />
-      <ng-content />
-      <app-market-statusbar />
-    </section>
+  <section class="market-panel" aria-label="Live synthetic quotes">
+    <app-metrics-strip />
+    <ng-content />
+  </section>
 
+  <app-market-statusbar />
+  <div class="sidebar-slot">
     <app-configurator />
   </div>
 </main>
diff --git a/examples/angular/realtime-trading/src/app/shell/trading-shell.ts b/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
index bff3c49918..d13505d27a 100644
--- a/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
+++ b/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
@@ -1,8 +1,12 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TradingBenchmarkController } from '../core/trading-benchmark.controller'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+} from '@angular/core'
+import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
 import { Configurator } from './configurator'
 import { MarketStatusbar } from './market-statusbar'
-import { MarketToolbar } from './market-toolbar'
 import { MetricsStrip } from './metrics-strip'
 import { ShellHeader } from './shell-header'
 
@@ -11,7 +15,6 @@ import { ShellHeader } from './shell-header'
   imports: [
     Configurator,
     MarketStatusbar,
-    MarketToolbar,
     MetricsStrip,
     ShellHeader,
   ],
@@ -20,4 +23,6 @@ import { ShellHeader } from './shell-header'
 })
 export class TradingShell {
   readonly devMode = inject(TradingBenchmarkController).devMode
+  readonly sidebarOpen = signal(true)
+  readonly toggleSidebar = () => this.sidebarOpen.update((open) => !open)
 }
diff --git a/examples/angular/realtime-trading/src/app/table-row-model.worker.ts b/examples/angular/realtime-trading/src/app/table-row-model.worker.ts
deleted file mode 100644
index ad7a0357ad..0000000000
--- a/examples/angular/realtime-trading/src/app/table-row-model.worker.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
-  createFilteredRowModel,
-  stockFeatures,
-  tableFeatures,
-} from '@tanstack/angular-table'
-import {
-  initTableWorker,
-  workerRowModelsFeature,
-} from '@tanstack/angular-table/experimental-worker-plugin'
-import type { ColumnDef } from '@tanstack/angular-table'
-import type { MarketQuote } from './market-data'
-
-const workerFeatures = tableFeatures({
-  ...stockFeatures,
-  workerRowModelsFeature,
-  filteredRowModel: createFilteredRowModel(),
-})
-
-// The worker only computes row models, so it needs portable accessors but none
-// of the Angular render components used by the visible table.
-const workerColumns: Array<
-  ColumnDef<typeof workerFeatures, MarketQuote, unknown>
-> = [
-  { accessorKey: 'symbol' },
-  { accessorKey: 'venue' },
-  { accessorKey: 'bid' },
-  { accessorKey: 'ask' },
-  { accessorKey: 'price' },
-  { accessorKey: 'lastMove' },
-  { accessorKey: 'bidSize' },
-  { accessorKey: 'askSize' },
-  { accessorKey: 'lastSize' },
-  { accessorKey: 'lastUpdatedAt' },
-  { accessorKey: 'open' },
-  { accessorKey: 'volume' },
-  { accessorKey: 'turnover' },
-  { accessorKey: 'history' },
-]
-
-initTableWorker({
-  features: workerFeatures,
-  columns: workerColumns,
-  getRowId: (row) => row.id,
-})
diff --git a/examples/angular/realtime-trading/src/app/table-v8.html b/examples/angular/realtime-trading/src/app/table-v8.html
deleted file mode 100644
index 6d8153d3c8..0000000000
--- a/examples/angular/realtime-trading/src/app/table-v8.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<div class="table-scroll">
-  <table [style.width.px]="table.getTotalSize()">
-    <thead>
-      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
-        <tr>
-          @for (header of headerGroup.headers; track header.id) {
-            <th [style.width.px]="header.getSize()">
-              @if (!header.isPlaceholder) {
-                <ng-container
-                  *flexRender="
-                    header.column.columnDef.header;
-                    props: header.getContext();
-                    let headerCell
-                  "
-                >
-                  {{ headerCell }}
-                </ng-container>
-              }
-            </th>
-          }
-        </tr>
-      }
-    </thead>
-    <tbody>
-      @for (row of table.getRowModel().rows; track row.id) {
-        <tr
-          [class.is-selected]="selectedSymbol() === row.original.symbol"
-          [attr.data-symbol]="row.original.symbol"
-          [attr.data-row-id]="row.original.id"
-          [attr.title]="row.original.company"
-        >
-          @for (cell of row.getVisibleCells(); track cell.id) {
-            <td
-              [style.width.px]="cell.column.getSize()"
-              [class.numeric-cell]="cell.column.id !== 'symbol' && cell.column.id !== 'venue'"
-            >
-              <ng-container
-                *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let renderCell"
-              >
-                {{ renderCell }}
-              </ng-container>
-            </td>
-          }
-        </tr>
-      }
-    </tbody>
-  </table>
-</div>
diff --git a/examples/angular/realtime-trading/src/app/table-v9.html b/examples/angular/realtime-trading/src/app/table-v9.html
deleted file mode 100644
index 9563edc157..0000000000
--- a/examples/angular/realtime-trading/src/app/table-v9.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="table-scroll">
-  <table [style.width.px]="table.getTotalSize()">
-    <thead>
-      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
-        <tr>
-          @for (header of headerGroup.headers; track header.id) {
-            <th [style.width.px]="header.getSize()">
-              @if (!header.isPlaceholder) {
-                <ng-container *flexRenderHeader="header; let headerCell">
-                  {{ headerCell }}
-                </ng-container>
-              }
-            </th>
-          }
-        </tr>
-      }
-    </thead>
-    <tbody>
-      @for (row of table.getRowModel().rows; track row.id) {
-        <tr
-          [class.is-selected]="selectedSymbol() === row.original.symbol"
-          [attr.data-symbol]="row.original.symbol"
-          [attr.data-row-id]="row.original.id"
-          [attr.title]="row.original.company"
-        >
-          @for (cell of row.getVisibleCells(); track cell.id) {
-            <td
-              [style.width.px]="cell.column.getSize()"
-              [class.numeric-cell]="cell.column.id !== 'symbol' && cell.column.id !== 'venue'"
-            >
-              <ng-container *flexRenderCell="cell; let renderCell">
-                {{ renderCell }}
-              </ng-container>
-            </td>
-          }
-        </tr>
-      }
-    </tbody>
-  </table>
-</div>
diff --git a/examples/angular/realtime-trading/src/app/table/current-trading-table.ts b/examples/angular/realtime-trading/src/app/table/current-trading-table.ts
new file mode 100644
index 0000000000..568a1e249b
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/current-trading-table.ts
@@ -0,0 +1,110 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  output,
+  untracked,
+  viewChild,
+} from '@angular/core'
+import {
+  FlexRender,
+  createSortedRowModel,
+  injectTable,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/angular-table'
+import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
+import { createTradingColumns } from './table-config/trading-columns'
+import { TradingTableInteractionController } from './table-interactions'
+import { injectTradingTableInitialFit } from './trading-table-initial-fit'
+import { TradingGridCellDirective } from './view/trading-grid-cell.directive'
+import { TradingGridSelectionDirective } from './view/trading-grid-selection.directive'
+import { TradingHeaderCell } from './view/trading-header-cell'
+import {
+  TRADING_ROW_HEIGHT,
+  injectTradingRowVirtualizer,
+} from './trading-row-virtualizer'
+import type { ElementRef } from '@angular/core'
+import type { MarketQuote } from '../feed/market-data'
+import type { RendererMode } from './table-config/trading-column-types'
+import type { VirtualScrollMode } from './trading-row-virtualizer'
+
+const features = tableFeatures({
+  ...stockFeatures,
+  sortedRowModel: createSortedRowModel(),
+})
+
+@Component({
+  selector: 'app-current-trading-table',
+  imports: [
+    FlexRender,
+    TradingGridCellDirective,
+    TradingGridSelectionDirective,
+    TradingHeaderCell,
+  ],
+  templateUrl: './table-v9.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CurrentTradingTable {
+  readonly #controller = inject(TradingBenchmarkController)
+  readonly quotes = input<Array<MarketQuote>>([])
+  readonly rendererMode = input.required<RendererMode>()
+  readonly selectedSymbol = input<string | null>(null)
+  readonly virtualScrollMode = input.required<VirtualScrollMode>()
+  readonly symbolSelected = output<string>()
+  readonly tanStackScrollContainer = viewChild<ElementRef<HTMLDivElement>>(
+    'tanStackScrollContainer',
+  )
+  readonly rowHeight = TRADING_ROW_HEIGHT
+  readonly interactions = new TradingTableInteractionController()
+
+  readonly columns = createTradingColumns({
+    rendererMode: () => this.rendererMode(),
+    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
+  })
+
+  readonly table = injectTable(() => ({
+    data: this.quotes(),
+    columns: this.columns,
+    features,
+    columnResizeMode: 'onChange' as const,
+    defaultColumn: { minSize: 56, maxSize: 800 },
+    autoResetCellSelection: false,
+    getRowId: (row) => row.id,
+  }))
+  readonly tableStyle = computed(() => {
+    void this.table.atoms.columnSizing.get()
+    void this.table.atoms.columnOrder.get()
+    return untracked(() => {
+      const styles: Record<string, string> = {
+        width: `${this.table.getTotalSize()}px`,
+      }
+      for (const header of this.table.getFlatHeaders()) {
+        styles[`--header-${header.id}-size`] = `${header.getSize()}`
+        styles[`--col-${header.column.id}-size`] = `${header.column.getSize()}`
+      }
+      return styles
+    })
+  })
+  readonly rows = computed(() => this.table.getRowModel().rows)
+  readonly virtualization = injectTradingRowVirtualizer(
+    this.rows,
+    this.virtualScrollMode,
+    this.tanStackScrollContainer,
+    (count) => this.#controller.setRenderedRowCount(count),
+  )
+
+  readonly tableHeight = computed(() => this.rows().length * this.rowHeight)
+  readonly workerPending = computed<string | null>(() => null)
+  readonly workerComputeMs = computed<string | null>(() => null)
+
+  constructor() {
+    injectTradingTableInitialFit(this.table, this.tanStackScrollContainer)
+  }
+
+  selectInstrument(symbol: string, event: MouseEvent): void {
+    if (event.button === 0) this.symbolSelected.emit(symbol)
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/quote-cells.ts b/examples/angular/realtime-trading/src/app/table/table-config/quote-cells.ts
similarity index 78%
rename from examples/angular/realtime-trading/src/app/quote-cells.ts
rename to examples/angular/realtime-trading/src/app/table/table-config/quote-cells.ts
index 7f2e3cf9e1..d7bd35a9a2 100644
--- a/examples/angular/realtime-trading/src/app/quote-cells.ts
+++ b/examples/angular/realtime-trading/src/app/table/table-config/quote-cells.ts
@@ -1,11 +1,12 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   computed,
+  inject,
   input,
   output,
 } from '@angular/core'
-import type { OnDestroy } from '@angular/core'
 
 const compactNumber = new Intl.NumberFormat('en-US', {
   notation: 'compact',
@@ -17,12 +18,9 @@ export const quoteCellLifecycle = {
   destroyed: 0,
 }
 
-function trackCreation(): void {
+function trackLifecycle(): void {
   quoteCellLifecycle.created++
-}
-
-function trackDestruction(): void {
-  quoteCellLifecycle.destroyed++
+  inject(DestroyRef).onDestroy(() => quoteCellLifecycle.destroyed++)
 }
 
 @Component({
@@ -39,18 +37,14 @@ function trackDestruction(): void {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PriceCell implements OnDestroy {
+export class PriceCell {
   readonly price = input.required<number>()
   readonly move = input.required<number>()
   readonly select = output<void>()
   readonly formattedPrice = computed(() => this.price().toFixed(2))
 
   constructor() {
-    trackCreation()
-  }
-
-  ngOnDestroy(): void {
-    trackDestruction()
+    trackLifecycle()
   }
 }
 
@@ -67,16 +61,36 @@ export class PriceCell implements OnDestroy {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StableMoveCell implements OnDestroy {
+export class StableMoveCell {
   readonly move = input.required<number>()
   readonly formattedMove = computed(() => formatSigned(this.move()))
 
   constructor() {
-    trackCreation()
+    trackLifecycle()
   }
+}
+
+@Component({
+  selector: 'app-percent-change-cell',
+  template: `
+    <span
+      class="percent-change-cell"
+      [class.quote-up]="value() >= 0"
+      [class.quote-down]="value() < 0"
+    >
+      {{ formattedValue() }}
+    </span>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PercentChangeCell {
+  readonly value = input.required<number>()
+  readonly formattedValue = computed(
+    () => `${this.value() >= 0 ? '+' : ''}${this.value().toFixed(2)}%`,
+  )
 
-  ngOnDestroy(): void {
-    trackDestruction()
+  constructor() {
+    trackLifecycle()
   }
 }
 
@@ -90,7 +104,7 @@ export class StableMoveCell implements OnDestroy {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SpreadCell implements OnDestroy {
+export class SpreadCell {
   readonly bid = input.required<number>()
   readonly ask = input.required<number>()
   readonly spread = computed(() => Math.max(0, this.ask() - this.bid()))
@@ -101,11 +115,7 @@ export class SpreadCell implements OnDestroy {
   readonly formattedSpread = computed(() => this.spread().toFixed(2))
 
   constructor() {
-    trackCreation()
-  }
-
-  ngOnDestroy(): void {
-    trackDestruction()
+    trackLifecycle()
   }
 }
 
@@ -126,7 +136,7 @@ export class SpreadCell implements OnDestroy {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DepthCell implements OnDestroy {
+export class DepthCell {
   readonly bidSize = input.required<number>()
   readonly askSize = input.required<number>()
   readonly bidShare = computed(() => {
@@ -141,11 +151,7 @@ export class DepthCell implements OnDestroy {
   )
 
   constructor() {
-    trackCreation()
-  }
-
-  ngOnDestroy(): void {
-    trackDestruction()
+    trackLifecycle()
   }
 }
 
@@ -162,7 +168,7 @@ export class DepthCell implements OnDestroy {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class QuoteAgeCell implements OnDestroy {
+export class QuoteAgeCell {
   readonly ageMs = input.required<number>()
   readonly formattedAge = computed(() => {
     const age = this.ageMs()
@@ -172,11 +178,7 @@ export class QuoteAgeCell implements OnDestroy {
   })
 
   constructor() {
-    trackCreation()
-  }
-
-  ngOnDestroy(): void {
-    trackDestruction()
+    trackLifecycle()
   }
 }
 
@@ -185,16 +187,12 @@ export class QuoteAgeCell implements OnDestroy {
   template: `<span class="move-cell quote-up">▲ {{ formattedMove() }}</span>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UpMoveCell implements OnDestroy {
+export class UpMoveCell {
   readonly move = input.required<number>()
   readonly formattedMove = computed(() => formatSigned(this.move()))
 
   constructor() {
-    trackCreation()
-  }
-
-  ngOnDestroy(): void {
-    trackDestruction()
+    trackLifecycle()
   }
 }
 
@@ -203,30 +201,36 @@ export class UpMoveCell implements OnDestroy {
   template: `<span class="move-cell quote-down">▼ {{ formattedMove() }}</span>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DownMoveCell implements OnDestroy {
+export class DownMoveCell {
   readonly move = input.required<number>()
   readonly formattedMove = computed(() => formatSigned(this.move()))
 
   constructor() {
-    trackCreation()
-  }
-
-  ngOnDestroy(): void {
-    trackDestruction()
+    trackLifecycle()
   }
 }
 
 @Component({
   selector: 'app-sparkline-cell',
   template: `
-    <svg class="sparkline" viewBox="0 0 100 24" preserveAspectRatio="none">
+    <svg
+      class="sparkline"
+      [class.quote-up]="rising()"
+      [class.quote-down]="!rising()"
+      viewBox="0 0 100 24"
+      preserveAspectRatio="none"
+    >
       <polyline [attr.points]="points()" />
     </svg>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SparklineCell implements OnDestroy {
+export class SparklineCell {
   readonly values = input.required<ReadonlyArray<number>>()
+  readonly rising = computed(() => {
+    const values = this.values()
+    return (values.at(-1) ?? 0) >= (values[0] ?? 0)
+  })
   readonly points = computed(() => {
     const values = this.values()
     const min = Math.min(...values)
@@ -244,11 +248,7 @@ export class SparklineCell implements OnDestroy {
   })
 
   constructor() {
-    trackCreation()
-  }
-
-  ngOnDestroy(): void {
-    trackDestruction()
+    trackLifecycle()
   }
 }
 
diff --git a/examples/angular/realtime-trading/src/app/trading-column-types.ts b/examples/angular/realtime-trading/src/app/table/table-config/trading-column-types.ts
similarity index 77%
rename from examples/angular/realtime-trading/src/app/trading-column-types.ts
rename to examples/angular/realtime-trading/src/app/table/table-config/trading-column-types.ts
index bfac6f3870..dc6e83a0b2 100644
--- a/examples/angular/realtime-trading/src/app/trading-column-types.ts
+++ b/examples/angular/realtime-trading/src/app/table/table-config/trading-column-types.ts
@@ -1,10 +1,8 @@
 export type RendererMode = 'stable' | 'swap'
 
 export interface TradingColumnState {
-  quoteClock: () => number
   rendererMode: () => RendererMode
   selectSymbol: (symbol: string) => void
-  updateQuoteAges: () => boolean
 }
 
 export const TRADING_COLUMN_COUNT = 14
diff --git a/examples/angular/realtime-trading/src/app/table/table-config/trading-columns.ts b/examples/angular/realtime-trading/src/app/table/table-config/trading-columns.ts
new file mode 100644
index 0000000000..cf3278ca26
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/table-config/trading-columns.ts
@@ -0,0 +1,199 @@
+import { flexRenderComponent } from '@tanstack/angular-table'
+import {
+  DownMoveCell,
+  PercentChangeCell,
+  PriceCell,
+  SparklineCell,
+  StableMoveCell,
+  UpMoveCell,
+} from './quote-cells'
+import type { ColumnDef, TableFeatures } from '@tanstack/angular-table'
+import type { MarketQuote } from '../../feed/market-data'
+import type { TradingColumnState } from './trading-column-types'
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export function createTradingColumns(
+  state: TradingColumnState,
+): Array<ColumnDef<TableFeatures, MarketQuote, unknown>> {
+  return [
+    {
+      id: 'instrument',
+      header: 'Instrument',
+      columns: [
+        {
+          id: 'identity',
+          header: 'Identity',
+          columns: [
+            {
+              id: 'market',
+              header: 'Market',
+              size: 72,
+              accessorFn: (row) => row.venue,
+              cell: ({ row }) => row.original.venue,
+            },
+            {
+              id: 'name',
+              header: 'Name',
+              size: 180,
+              accessorFn: (row) => row.company,
+              cell: ({ row }) => row.original.company,
+            },
+            {
+              id: 'symbol',
+              header: 'Symbol',
+              size: 92,
+              accessorFn: (row) => row.symbol,
+              cell: ({ row }) => row.original.symbol,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'marketData',
+      header: 'Market Data',
+      columns: [
+        {
+          id: 'priceAndChange',
+          header: 'Price & Change',
+          columns: [
+            {
+              id: 'price',
+              header: 'Price',
+              size: 96,
+              accessorFn: (row) => row.price,
+              cell: ({ row }) => {
+                const change = getDayChange(row.original)
+                return flexRenderComponent(PriceCell, {
+                  inputs: { price: row.original.price, move: change },
+                  outputs: {
+                    select: () => state.selectSymbol(row.original.symbol),
+                  },
+                })
+              },
+            },
+            {
+              id: 'change',
+              header: 'Chg',
+              size: 94,
+              accessorFn: (row) => getDayChange(row),
+              cell: ({ row }) => {
+                const move = getDayChange(row.original)
+                if (state.rendererMode() === 'stable') {
+                  return flexRenderComponent(StableMoveCell, {
+                    inputs: { move },
+                  })
+                }
+                return flexRenderComponent(
+                  move >= 0 ? UpMoveCell : DownMoveCell,
+                  { inputs: { move } },
+                )
+              },
+            },
+            {
+              id: 'changePercent',
+              header: 'Chg%',
+              size: 90,
+              accessorFn: (row) => getDayChangePercent(row),
+              cell: ({ row }) =>
+                flexRenderComponent(PercentChangeCell, {
+                  inputs: { value: getDayChangePercent(row.original) },
+                }),
+            },
+          ],
+        },
+        {
+          id: 'orderBook',
+          header: 'Order Book',
+          columns: [
+            {
+              id: 'bid',
+              header: 'Bid',
+              size: 90,
+              accessorFn: (row) => row.bid,
+              cell: ({ row }) => row.original.bid.toFixed(2),
+            },
+            {
+              id: 'bidSize',
+              header: 'Bid Vol',
+              size: 100,
+              accessorFn: (row) => row.bidSize,
+              cell: ({ row }) => compactFormatter.format(row.original.bidSize),
+            },
+            {
+              id: 'ask',
+              header: 'Ask',
+              size: 90,
+              accessorFn: (row) => row.ask,
+              cell: ({ row }) => row.original.ask.toFixed(2),
+            },
+            {
+              id: 'askSize',
+              header: 'Ask Vol',
+              size: 100,
+              accessorFn: (row) => row.askSize,
+              cell: ({ row }) => compactFormatter.format(row.original.askSize),
+            },
+          ],
+        },
+        {
+          id: 'session',
+          header: 'Session',
+          columns: [
+            {
+              id: 'open',
+              header: 'Open',
+              size: 90,
+              accessorFn: (row) => row.open,
+              cell: ({ row }) => row.original.open.toFixed(2),
+            },
+            {
+              id: 'high',
+              header: 'High',
+              size: 90,
+              accessorFn: (row) => row.high,
+              cell: ({ row }) => row.original.high.toFixed(2),
+            },
+            {
+              id: 'low',
+              header: 'Low',
+              size: 90,
+              accessorFn: (row) => row.low,
+              cell: ({ row }) => row.original.low.toFixed(2),
+            },
+          ],
+        },
+        {
+          id: 'chart',
+          header: 'Chart',
+          columns: [
+            {
+              id: 'history',
+              header: 'Intraday',
+              size: 150,
+              enableSorting: false,
+              cell: ({ row }) =>
+                flexRenderComponent(SparklineCell, {
+                  inputs: { values: row.original.history },
+                }),
+            },
+          ],
+        },
+      ],
+    },
+  ]
+}
+
+function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+
+function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/angular/realtime-trading/src/app/table/table-interactions.ts b/examples/angular/realtime-trading/src/app/table/table-interactions.ts
new file mode 100644
index 0000000000..24d43b8138
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/table-interactions.ts
@@ -0,0 +1,181 @@
+import { signal } from '@angular/core'
+
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+export interface ColumnOrderTable {
+  getVisibleLeafColumns: () => Array<{ id: string }>
+  setColumnOrder: (columnIds: Array<string>) => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+  })
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: KeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
+
+export class TradingTableInteractionController {
+  readonly draggedColumnId = signal<string | null>(null)
+  readonly dropTargetColumnId = signal<string | null>(null)
+
+  startColumnDrag(event: DragEvent, columnId: string): void {
+    this.draggedColumnId.set(columnId)
+    event.dataTransfer?.setData('text/plain', columnId)
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+  }
+
+  dragOverColumn(event: DragEvent, targetId: string): void {
+    event.preventDefault()
+    if (targetId === this.draggedColumnId()) {
+      this.dropTargetColumnId.set(null)
+      return
+    }
+    this.dropTargetColumnId.set(targetId)
+  }
+
+  dropColumn(
+    table: ColumnOrderTable,
+    event: DragEvent,
+    targetId: string,
+  ): void {
+    event.preventDefault()
+    const sourceId =
+      event.dataTransfer?.getData('text/plain') || this.draggedColumnId()
+    if (!sourceId) {
+      this.clearColumnDrag()
+      return
+    }
+
+    table.setColumnOrder(
+      reorderColumnIds(
+        table.getVisibleLeafColumns().map((column) => column.id),
+        sourceId,
+        targetId,
+      ),
+    )
+    this.clearColumnDrag()
+  }
+
+  endColumnDrag(): void {
+    this.clearColumnDrag()
+  }
+
+  private clearColumnDrag(): void {
+    this.draggedColumnId.set(null)
+    this.dropTargetColumnId.set(null)
+  }
+
+  selectRow(
+    table: RowSelectionTable,
+    row: SelectableRow,
+    event: MouseEvent,
+  ): void {
+    selectRowFromPointer(table, row, event)
+  }
+
+  navigateCells(table: CellNavigationTable, event: KeyboardEvent): void {
+    handleCellNavigation(table, event)
+  }
+
+  sortIndicator(direction: false | 'asc' | 'desc'): string {
+    return sortIndicator(direction)
+  }
+
+  sortAriaValue(
+    direction: false | 'asc' | 'desc',
+  ): 'ascending' | 'descending' | 'none' {
+    return sortAriaValue(direction)
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/table/table-v9.html b/examples/angular/realtime-trading/src/app/table/table-v9.html
new file mode 100644
index 0000000000..caabda2128
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/table-v9.html
@@ -0,0 +1,132 @@
+@switch (virtualScrollMode()) {
+  @case ('tanstack') {
+    <div
+      #tanStackScrollContainer
+      class="table-scroll is-virtualized"
+      tabindex="0"
+      (keydown)="interactions.navigateCells(table, $event)"
+      [attr.data-table-worker-pending]="workerPending()"
+      [attr.data-table-worker-compute-ms]="workerComputeMs()"
+    >
+      <table
+        [appTradingGridSelection]="table"
+        class="trading-data-grid virtual-table"
+        data-testid="trading-table"
+        role="grid"
+        aria-multiselectable="true"
+        [style]="tableStyle()"
+      >
+        <thead>
+          @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
+            <tr>
+              @for (header of headerGroup.headers; track header.id) {
+                <th
+                  [appTradingHeaderCell]="header"
+                  [table]="table"
+                  [interactions]="interactions"
+                ></th>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody class="virtual-table-body" [style.height.px]="tableHeight()">
+          @for (virtualRow of virtualization.tanStackVirtualRows(); track virtualRow.key) {
+            @if (rows()[virtualRow.index]; as row) {
+              <tr
+                class="virtual-table-row"
+                [class.is-symbol-selected]="selectedSymbol() === row.original.symbol"
+                [class.is-row-selected]="row.getIsSelected()"
+                [style.transform]="'translateY(' + virtualRow.start + 'px)'"
+                [attr.data-virtual-index]="virtualRow.index"
+                [attr.data-symbol]="row.original.symbol"
+                [attr.data-row-id]="row.original.id"
+                [attr.aria-selected]="row.getIsSelected()"
+                (mousedown)="selectInstrument(row.original.symbol, $event)"
+                (click)="interactions.selectRow(table, row, $event)"
+              >
+                @for (cell of row.getVisibleCells(); track cell.id) {
+                  <td [appTradingGridCell]="cell">
+                    <ng-container *flexRenderCell="cell; let renderCell">
+                      {{ renderCell }}
+                    </ng-container>
+                  </td>
+                }
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+  }
+  @default {
+    <div
+      #tanStackScrollContainer
+      class="table-scroll"
+      tabindex="0"
+      (keydown)="interactions.navigateCells(table, $event)"
+      [attr.data-table-worker-pending]="workerPending()"
+      [attr.data-table-worker-compute-ms]="workerComputeMs()"
+    >
+      <table
+        [appTradingGridSelection]="table"
+        class="trading-data-grid"
+        data-testid="trading-table"
+        role="grid"
+        aria-multiselectable="true"
+        [style]="tableStyle()"
+      >
+        <thead>
+          @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
+            <tr>
+              @for (header of headerGroup.headers; track header.id) {
+                <th
+                  [appTradingHeaderCell]="header"
+                  [table]="table"
+                  [interactions]="interactions"
+                ></th>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody>
+          @for (row of rows(); track row.id) {
+            <tr
+              [class.is-symbol-selected]="selectedSymbol() === row.original.symbol"
+              [class.is-row-selected]="row.getIsSelected()"
+              [attr.data-symbol]="row.original.symbol"
+              [attr.data-row-id]="row.original.id"
+              [attr.title]="row.original.company"
+              [attr.aria-selected]="row.getIsSelected()"
+              (mousedown)="selectInstrument(row.original.symbol, $event)"
+              (click)="interactions.selectRow(table, row, $event)"
+            >
+              @for (cell of row.getVisibleCells(); track cell.id) {
+                <td [appTradingGridCell]="cell">
+                  <ng-container *flexRenderCell="cell; let renderCell">
+                    {{ renderCell }}
+                  </ng-container>
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
+}
+
+@if (virtualScrollMode() !== 'none') {
+  <footer class="virtual-scroll-footer" data-testid="virtual-scroll-footer">
+    <span>
+      TanStack · Total · {{ rows().length }} rows ·
+      {{ table.getVisibleLeafColumns().length }} columns
+    </span>
+    @if (virtualization.visibleRange(); as visibleRange) {
+      <span data-testid="visible-row-range">
+        Current · rows {{ visibleRange.start }}..{{ visibleRange.end }}
+      </span>
+    } @else {
+      <span data-testid="visible-row-range">Current · rows —</span>
+    }
+  </footer>
+}
diff --git a/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts b/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..bb314e26a7
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
@@ -0,0 +1,101 @@
+import {
+  ChangeDetectorRef,
+  DestroyRef,
+  computed,
+  effect,
+  inject,
+} from '@angular/core'
+import { injectVirtualizer } from '@tanstack/angular-virtual'
+import type { ElementRef, Signal } from '@angular/core'
+
+export const TRADING_ROW_HEIGHT = 32
+
+const TANSTACK_OVERSCAN = 10
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+interface TradingRowIdentity {
+  id: string
+}
+
+function injectLocalDomFlush() {
+  const changeDetectorRef = inject(ChangeDetectorRef)
+  const destroyRef = inject(DestroyRef)
+  const state = {
+    destroyed: false,
+    queued: false,
+  }
+
+  destroyRef.onDestroy(() => {
+    state.destroyed = true
+  })
+
+  return () => {
+    if (state.queued || state.destroyed) return
+
+    state.queued = true
+    queueMicrotask(() => {
+      state.queued = false
+      if (!state.destroyed) {
+        changeDetectorRef.detectChanges()
+      }
+    })
+  }
+}
+
+export function injectTradingRowVirtualizer<TRow extends TradingRowIdentity>(
+  rows: Signal<ReadonlyArray<TRow>>,
+  mode: Signal<VirtualScrollMode>,
+  tanStackScrollContainer: Signal<ElementRef<HTMLDivElement> | undefined>,
+  reportRenderedRowCount: (count: number) => void,
+) {
+  const scheduleLocalDomFlush = injectLocalDomFlush()
+  const rowVirtualizer = injectVirtualizer<HTMLDivElement, HTMLTableRowElement>(
+    () => ({
+      count: rows().length,
+      scrollElement: tanStackScrollContainer()?.nativeElement,
+      estimateSize: () => TRADING_ROW_HEIGHT,
+      getItemKey: (index) => rows()[index]?.id ?? index,
+      overscan: TANSTACK_OVERSCAN,
+      enabled: mode() === 'tanstack',
+      useCachedMeasurements: true,
+      useApplicationRefTick: false,
+      onChange: scheduleLocalDomFlush,
+    }),
+  )
+
+  const tanStackVirtualRows = rowVirtualizer.getVirtualItems
+  const tanStackTotalSize = rowVirtualizer.getTotalSize
+  const visibleRange = computed(() => {
+    const rowCount = rows().length
+    const range = rowVirtualizer.range()
+
+    if (mode() !== 'tanstack' || rowCount === 0 || range === null) {
+      return null
+    }
+
+    const lastRowIndex = rowCount - 1
+    const start = Math.min(range.startIndex, lastRowIndex)
+
+    return {
+      start,
+      end: Math.min(Math.max(start, range.endIndex), lastRowIndex),
+    }
+  })
+  const renderedRowCount = computed(() => {
+    if (mode() === 'tanstack') {
+      return tanStackVirtualRows().length
+    }
+    return rows().length
+  })
+
+  effect(() => reportRenderedRowCount(renderedRowCount()))
+
+  return {
+    rowVirtualizer,
+    tanStackVirtualRows,
+    tanStackTotalSize,
+    visibleRange,
+    renderedRowCount,
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/table/trading-table-initial-fit.ts b/examples/angular/realtime-trading/src/app/table/trading-table-initial-fit.ts
new file mode 100644
index 0000000000..0786f26529
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/trading-table-initial-fit.ts
@@ -0,0 +1,63 @@
+import { DestroyRef, afterNextRender, inject } from '@angular/core'
+import type { ElementRef, Signal } from '@angular/core'
+
+interface FitColumn {
+  getSize: () => number
+  id: string
+}
+
+interface FitTable {
+  atoms: {
+    columnResizing: {
+      subscribe: (
+        listener: (state: { isResizingColumn: false | string }) => void,
+      ) => { unsubscribe: () => void }
+    }
+  }
+  getTotalSize: () => number
+  getVisibleLeafColumns: () => Array<FitColumn>
+  setColumnSizing: (sizes: Record<string, number>) => void
+}
+
+export function injectTradingTableInitialFit(
+  table: FitTable,
+  scrollContainer: Signal<ElementRef<HTMLDivElement> | undefined>,
+): void {
+  const destroyRef = inject(DestroyRef)
+  const runtime = { manuallyResized: false }
+
+  afterNextRender(() => {
+    const element = scrollContainer()?.nativeElement
+    if (!element) return
+
+    const fitAvailableWidth = () => {
+      if (runtime.manuallyResized) return
+      const currentWidth = table.getTotalSize()
+      const availableWidth = element.clientWidth
+      if (availableWidth <= currentWidth + 1 || currentWidth <= 0) return
+
+      const ratio = availableWidth / currentWidth
+      table.setColumnSizing(
+        Object.fromEntries(
+          table
+            .getVisibleLeafColumns()
+            .map((column) => [column.id, column.getSize() * ratio]),
+        ),
+      )
+    }
+
+    const resizeObserver = new ResizeObserver(fitAvailableWidth)
+    const resizingSubscription = table.atoms.columnResizing.subscribe(
+      (state) => {
+        if (state.isResizingColumn !== false) runtime.manuallyResized = true
+      },
+    )
+    resizeObserver.observe(element)
+    fitAvailableWidth()
+
+    destroyRef.onDestroy(() => {
+      resizeObserver.disconnect()
+      resizingSubscription.unsubscribe()
+    })
+  })
+}
diff --git a/examples/angular/realtime-trading/src/app/table/view/trading-grid-cell.directive.ts b/examples/angular/realtime-trading/src/app/table/view/trading-grid-cell.directive.ts
new file mode 100644
index 0000000000..c97159cb7e
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/view/trading-grid-cell.directive.ts
@@ -0,0 +1,95 @@
+import { DestroyRef, Directive, ElementRef, Input, inject } from '@angular/core'
+import { TradingGridSelectionDirective } from './trading-grid-selection.directive'
+import type { Cell, TableFeatures } from '@tanstack/angular-table'
+import type { MarketQuote } from '../../feed/market-data'
+
+type TradingCell = Cell<TableFeatures, MarketQuote, unknown>
+
+const selectionClasses = [
+  'is-cell-selected',
+  'is-cell-focused',
+  'selection-top',
+  'selection-right',
+  'selection-bottom',
+  'selection-left',
+] as const
+
+@Directive({
+  selector: 'td[appTradingGridCell]',
+  host: {
+    '(mousedown)': 'startSelection($event)',
+    '(mouseenter)': 'extendSelection($event)',
+  },
+})
+export class TradingGridCellDirective {
+  readonly #element = inject<ElementRef<HTMLTableCellElement>>(ElementRef)
+  readonly #destroyRef = inject(DestroyRef)
+  readonly #selection = inject(TradingGridSelectionDirective)
+  #cell: TradingCell | null = null
+  #renderedCellId: string | null = null
+
+  constructor() {
+    const unregister = this.#selection.register(this)
+    this.#destroyRef.onDestroy(unregister)
+  }
+
+  @Input({ required: true, alias: 'appTradingGridCell' })
+  set appTradingGridCell(cell: TradingCell) {
+    this.#cell = cell
+    if (this.#renderedCellId === cell.id) return
+
+    this.#renderedCellId = cell.id
+    this.#writeStaticState(cell)
+    this.#writeSelectionState(cell)
+  }
+
+  startSelection(event: MouseEvent): void {
+    if (event.button !== 0 || !this.#cell) return
+    event.preventDefault()
+    this.#cell.getSelectionStartHandler(
+      this.#element.nativeElement.ownerDocument,
+    )(event)
+    this.#selection.refreshSelectionState()
+  }
+
+  extendSelection(event: MouseEvent): void {
+    if (!this.#cell) return
+    this.#cell.getSelectionExtendHandler()(event)
+    this.#selection.refreshSelectionState()
+  }
+
+  refreshSelectionState(): void {
+    if (this.#cell) this.#writeSelectionState(this.#cell)
+  }
+
+  #writeStaticState(cell: TradingCell): void {
+    const columnId = cell.column.id
+    const element = this.#element.nativeElement
+    element.style.width = `calc(var(--col-${columnId}-size) * 1px)`
+    element.classList.toggle('market-cell', columnId === 'market')
+    element.classList.toggle('name-cell', columnId === 'name')
+    element.classList.toggle('symbol-cell', columnId === 'symbol')
+    element.classList.toggle(
+      'numeric-cell',
+      columnId !== 'market' && columnId !== 'name' && columnId !== 'symbol',
+    )
+  }
+
+  #writeSelectionState(cell: TradingCell): void {
+    const element = this.#element.nativeElement
+    const edges = cell.getSelectionEdges()
+    const states: Record<(typeof selectionClasses)[number], boolean> = {
+      'is-cell-selected': cell.getIsSelected(),
+      'is-cell-focused': cell.getIsFocused(),
+      'selection-top': edges.top,
+      'selection-right': edges.right,
+      'selection-bottom': edges.bottom,
+      'selection-left': edges.left,
+    }
+    for (const className of selectionClasses) {
+      element.classList.toggle(className, states[className])
+    }
+    element.tabIndex = cell.getTabIndex()
+    element.setAttribute('aria-selected', String(states['is-cell-selected']))
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/table/view/trading-grid-selection.directive.ts b/examples/angular/realtime-trading/src/app/table/view/trading-grid-selection.directive.ts
new file mode 100644
index 0000000000..26e6dabf40
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/view/trading-grid-selection.directive.ts
@@ -0,0 +1,52 @@
+import { DestroyRef, Directive, Input, inject } from '@angular/core'
+import type { Table, TableFeatures } from '@tanstack/angular-table'
+import type { MarketQuote } from '../../feed/market-data'
+
+interface SelectionCellView {
+  refreshSelectionState: () => void
+}
+
+type TradingTable = Table<TableFeatures, MarketQuote>
+
+@Directive({
+  selector: 'table[appTradingGridSelection]',
+})
+export class TradingGridSelectionDirective {
+  readonly #destroyRef = inject(DestroyRef)
+  readonly #cellViews = new Set<SelectionCellView>()
+  #table: TradingTable | null = null
+  #lastRenderedSelection: unknown = null
+  #stopSelectionSubscription: (() => void) | null = null
+
+  constructor() {
+    this.#destroyRef.onDestroy(() => {
+      this.#stopSelectionSubscription?.()
+      this.#cellViews.clear()
+    })
+  }
+
+  @Input({ required: true, alias: 'appTradingGridSelection' })
+  set appTradingGridSelection(table: TradingTable) {
+    if (this.#stopSelectionSubscription) return
+
+    this.#table = table
+    const subscription = table.atoms.cellSelection.subscribe((selection) => {
+      if (selection === this.#lastRenderedSelection) return
+      this.#lastRenderedSelection = selection
+      this.refreshSelectionState()
+    })
+    this.#stopSelectionSubscription = () => subscription.unsubscribe()
+  }
+
+  register(cellView: SelectionCellView): () => void {
+    this.#cellViews.add(cellView)
+    return () => this.#cellViews.delete(cellView)
+  }
+
+  refreshSelectionState(): void {
+    this.#lastRenderedSelection = this.#table?.atoms.cellSelection.get()
+    for (const cellView of this.#cellViews) {
+      cellView.refreshSelectionState()
+    }
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.html b/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.html
new file mode 100644
index 0000000000..4a79e34760
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.html
@@ -0,0 +1,53 @@
+@if (!header().isPlaceholder) {
+  @if (isGroup()) {
+    <ng-container *flexRenderHeader="header(); let headerCell">
+      {{ headerCell }}
+    </ng-container>
+  } @else {
+    <div
+      class="leaf-header-content"
+      (dragover)="interactions().dragOverColumn($event, header().column.id)"
+      (drop)="dropColumn($event)"
+    >
+      <button
+        type="button"
+        class="column-drag-handle"
+        draggable="true"
+        [attr.aria-label]="'Move ' + header().column.id + ' column'"
+        (dragstart)="startColumnDrag($event)"
+        (dragend)="interactions().endColumnDrag()"
+      >
+        ⋮⋮
+      </button>
+      <button
+        type="button"
+        class="sort-header-button"
+        [class.is-sortable]="header().column.getCanSort()"
+        [disabled]="!header().column.getCanSort()"
+        (click)="header().column.getToggleSortingHandler()?.($event)"
+      >
+        <span class="header-label">
+          <ng-container *flexRenderHeader="header(); let headerCell">
+            {{ headerCell }}
+          </ng-container>
+        </span>
+        @if (header().column.getCanSort()) {
+          <span class="sort-indicator" [class.is-active]="sorted()" aria-hidden="true">
+            {{ interactions().sortIndicator(sorted()) }}
+          </span>
+        }
+      </button>
+    </div>
+    @if (header().column.getCanResize()) {
+      <div
+        class="column-resize-handle"
+        [class.is-resizing]="header().column.getIsResizing()"
+        role="separator"
+        aria-orientation="vertical"
+        (dblclick)="header().column.resetSize()"
+        (mousedown)="header().getResizeHandler()($event)"
+        (touchstart)="header().getResizeHandler()($event)"
+      ></div>
+    }
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.ts b/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.ts
new file mode 100644
index 0000000000..d3d964559a
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.ts
@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core'
+import { FlexRender } from '@tanstack/angular-table'
+import type { Header, TableFeatures } from '@tanstack/angular-table'
+import type { MarketQuote } from '../../feed/market-data'
+import type {
+  ColumnOrderTable,
+  TradingTableInteractionController,
+} from '../table-interactions'
+
+type TradingHeader = Header<TableFeatures, MarketQuote, unknown>
+
+@Component({
+  selector: 'th[appTradingHeaderCell]',
+  imports: [FlexRender],
+  templateUrl: './trading-header-cell.html',
+  host: {
+    '[attr.colspan]': 'header().colSpan',
+    '[attr.aria-sort]': 'ariaSort()',
+    '[class.column-group-header]': 'isGroup()',
+    '[class.numeric-header]': 'isNumeric()',
+    '[class.is-column-dragging]':
+      'interactions().draggedColumnId() === header().column.id',
+    '[class.is-column-drop-target]':
+      'interactions().dropTargetColumnId() === header().column.id',
+    '[style.width]': 'width()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TradingHeaderCell {
+  readonly header = input.required<TradingHeader>({
+    alias: 'appTradingHeaderCell',
+  })
+  readonly table = input.required<ColumnOrderTable>()
+  readonly interactions = input.required<TradingTableInteractionController>()
+
+  readonly isGroup = computed(() => this.header().subHeaders.length > 0)
+  readonly isNumeric = computed(
+    () => !this.isGroup() && !isIdentityColumn(this.header().column.id),
+  )
+  readonly width = computed(
+    () => `calc(var(--header-${this.header().id}-size) * 1px)`,
+  )
+  readonly sorted = computed(() => this.header().column.getIsSorted())
+  readonly ariaSort = computed(() =>
+    this.isGroup() ? null : this.interactions().sortAriaValue(this.sorted()),
+  )
+
+  startColumnDrag(event: DragEvent): void {
+    this.interactions().startColumnDrag(event, this.header().column.id)
+  }
+
+  dropColumn(event: DragEvent): void {
+    this.interactions().dropColumn(this.table(), event, this.header().column.id)
+  }
+}
+
+function isIdentityColumn(columnId: string): boolean {
+  return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
+}
diff --git a/examples/angular/realtime-trading/src/app/table/worker/table-row-model.worker.ts b/examples/angular/realtime-trading/src/app/table/worker/table-row-model.worker.ts
new file mode 100644
index 0000000000..4f04f7d84f
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/worker/table-row-model.worker.ts
@@ -0,0 +1,59 @@
+import {
+  createFilteredRowModel,
+  createSortedRowModel,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/angular-table'
+import {
+  initTableWorker,
+  workerRowModelsFeature,
+} from '@tanstack/angular-table/experimental-worker-plugin'
+import type { ColumnDef } from '@tanstack/angular-table'
+import type { MarketQuote } from '../../feed/market-data'
+
+const workerFeatures = tableFeatures({
+  ...stockFeatures,
+  workerRowModelsFeature,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+})
+
+// The worker only computes row models, so it needs portable accessors but none
+// of the Angular render components used by the visible table.
+const workerColumns: Array<
+  ColumnDef<typeof workerFeatures, MarketQuote, unknown>
+> = [
+  { id: 'market', accessorFn: (row) => row.venue },
+  { id: 'name', accessorFn: (row) => row.company },
+  { id: 'symbol', accessorFn: (row) => row.symbol },
+  { id: 'price', accessorFn: (row) => row.price },
+  {
+    id: 'change',
+    accessorFn: (row) => row.price - row.previousClose,
+  },
+  {
+    id: 'changePercent',
+    accessorFn: (row) =>
+      row.previousClose === 0
+        ? 0
+        : ((row.price - row.previousClose) / row.previousClose) * 100,
+  },
+  { id: 'bid', accessorFn: (row) => row.bid },
+  { id: 'bidSize', accessorFn: (row) => row.bidSize },
+  { id: 'ask', accessorFn: (row) => row.ask },
+  { id: 'askSize', accessorFn: (row) => row.askSize },
+  { id: 'open', accessorFn: (row) => row.open },
+  { id: 'high', accessorFn: (row) => row.high },
+  { id: 'low', accessorFn: (row) => row.low },
+  {
+    id: 'history',
+    accessorFn: (row) => row.history,
+    enableSorting: false,
+  },
+]
+
+initTableWorker({
+  features: workerFeatures,
+  columns: workerColumns,
+  getRowId: (row) => row.id,
+})
diff --git a/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts b/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
new file mode 100644
index 0000000000..0dade7bb51
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
@@ -0,0 +1,137 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  computed,
+  inject,
+  input,
+  output,
+  untracked,
+  viewChild,
+} from '@angular/core'
+import {
+  FlexRender,
+  injectTable,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/angular-table'
+import {
+  createTableWorker,
+  createWorkerRowModel,
+  workerRowModelsFeature,
+} from '@tanstack/angular-table/experimental-worker-plugin'
+import { TradingBenchmarkController } from '../../benchmark/trading-benchmark.controller'
+import { createTradingColumns } from '../table-config/trading-columns'
+import { TradingTableInteractionController } from '../table-interactions'
+import { injectTradingTableInitialFit } from '../trading-table-initial-fit'
+import { TradingGridCellDirective } from '../view/trading-grid-cell.directive'
+import { TradingGridSelectionDirective } from '../view/trading-grid-selection.directive'
+import { TradingHeaderCell } from '../view/trading-header-cell'
+import {
+  TRADING_ROW_HEIGHT,
+  injectTradingRowVirtualizer,
+} from '../trading-row-virtualizer'
+import type { ElementRef } from '@angular/core'
+import type { MarketQuote } from '../../feed/market-data'
+import type { RendererMode } from '../table-config/trading-column-types'
+import type { VirtualScrollMode } from '../trading-row-virtualizer'
+
+function createWorkerTableRuntime() {
+  const worker = createTableWorker({
+    createWorker: () =>
+      new Worker(new URL('./table-row-model.worker', import.meta.url), {
+        type: 'module',
+      }),
+  })
+  const features = tableFeatures({
+    ...stockFeatures,
+    workerRowModelsFeature,
+    filteredRowModel: createWorkerRowModel(worker, 'filtered'),
+    sortedRowModel: createWorkerRowModel(worker, 'sorted'),
+  })
+
+  return { worker, features }
+}
+
+@Component({
+  selector: 'app-worker-trading-table',
+  imports: [
+    FlexRender,
+    TradingGridCellDirective,
+    TradingGridSelectionDirective,
+    TradingHeaderCell,
+  ],
+  templateUrl: '../table-v9.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkerTradingTable {
+  readonly #controller = inject(TradingBenchmarkController)
+  readonly #destroyRef = inject(DestroyRef)
+  readonly #workerRuntime = createWorkerTableRuntime()
+  readonly quotes = input<Array<MarketQuote>>([])
+  readonly rendererMode = input.required<RendererMode>()
+  readonly selectedSymbol = input<string | null>(null)
+  readonly virtualScrollMode = input.required<VirtualScrollMode>()
+  readonly symbolSelected = output<string>()
+  readonly tanStackScrollContainer = viewChild<ElementRef<HTMLDivElement>>(
+    'tanStackScrollContainer',
+  )
+  readonly rowHeight = TRADING_ROW_HEIGHT
+  readonly interactions = new TradingTableInteractionController()
+
+  readonly columns = createTradingColumns({
+    rendererMode: () => this.rendererMode(),
+    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
+  })
+
+  readonly table = injectTable(() => ({
+    data: this.quotes(),
+    columns: this.columns,
+    features: this.#workerRuntime.features,
+    columnResizeMode: 'onChange' as const,
+    defaultColumn: { minSize: 56, maxSize: 800 },
+    autoResetCellSelection: false,
+    getRowId: (row) => row.id,
+  }))
+  readonly tableStyle = computed(() => {
+    void this.table.atoms.columnSizing.get()
+    void this.table.atoms.columnOrder.get()
+    return untracked(() => {
+      const styles: Record<string, string> = {
+        width: `${this.table.getTotalSize()}px`,
+      }
+      for (const header of this.table.getFlatHeaders()) {
+        styles[`--header-${header.id}-size`] = `${header.getSize()}`
+        styles[`--col-${header.column.id}-size`] = `${header.column.getSize()}`
+      }
+      return styles
+    })
+  })
+  readonly rows = computed(() => this.table.getRowModel().rows)
+  readonly virtualization = injectTradingRowVirtualizer(
+    this.rows,
+    this.virtualScrollMode,
+    this.tanStackScrollContainer,
+    (count) => this.#controller.setRenderedRowCount(count),
+  )
+
+  readonly workerPending = computed<string>(() => {
+    return String(this.table.atoms.workerRowModels.get().isPending)
+  })
+
+  readonly workerComputeMs = computed<string | null>(() => {
+    const computeMs = this.table.atoms.workerRowModels.get().lastComputeMs
+    return computeMs === undefined ? null : computeMs.toFixed(3)
+  })
+
+  readonly tableHeight = computed(() => this.rows().length * this.rowHeight)
+
+  constructor() {
+    injectTradingTableInitialFit(this.table, this.tanStackScrollContainer)
+    this.#destroyRef.onDestroy(() => this.#workerRuntime.worker.terminate())
+  }
+
+  selectInstrument(symbol: string, event: MouseEvent): void {
+    if (event.button === 0) this.symbolSelected.emit(symbol)
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/trading-columns-beta.ts b/examples/angular/realtime-trading/src/app/trading-columns-beta.ts
deleted file mode 100644
index 03c6175e35..0000000000
--- a/examples/angular/realtime-trading/src/app/trading-columns-beta.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import { flexRenderComponent } from '@tanstack/angular-table-beta'
-import {
-  DepthCell,
-  DownMoveCell,
-  PriceCell,
-  QuoteAgeCell,
-  SparklineCell,
-  SpreadCell,
-  StableMoveCell,
-  UpMoveCell,
-} from './quote-cells'
-import type {
-  ColumnDef,
-  TableFeatures,
-} from '@tanstack/angular-table-beta'
-import type { MarketQuote } from './market-data'
-import type { TradingColumnState } from './trading-column-types'
-
-const compactFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-})
-
-const currencyFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-  style: 'currency',
-  currency: 'USD',
-})
-
-export function createBetaTradingColumns(
-  state: TradingColumnState,
-): Array<ColumnDef<TableFeatures, MarketQuote, unknown>> {
-  return [
-    {
-      id: 'symbol',
-      header: 'Ticker',
-      size: 90,
-      cell: ({ row }) => row.original.symbol,
-    },
-    {
-      id: 'venue',
-      header: 'Venue',
-      size: 70,
-      cell: ({ row }) => row.original.venue,
-    },
-    {
-      id: 'bid',
-      header: 'Bid',
-      size: 90,
-      cell: ({ row }) => row.original.bid.toFixed(2),
-    },
-    {
-      id: 'ask',
-      header: 'Ask',
-      size: 90,
-      cell: ({ row }) => row.original.ask.toFixed(2),
-    },
-    {
-      id: 'spread',
-      header: 'Spread',
-      size: 95,
-      cell: ({ row }) =>
-        flexRenderComponent(SpreadCell, {
-          inputs: {
-            bid: row.original.bid,
-            ask: row.original.ask,
-          },
-        }),
-    },
-    {
-      id: 'price',
-      header: 'Last',
-      size: 100,
-      cell: ({ row }) =>
-        flexRenderComponent(PriceCell, {
-          inputs: {
-            price: row.original.price,
-            move: row.original.lastMove,
-          },
-          outputs: {
-            select: () => state.selectSymbol(row.original.symbol),
-          },
-        }),
-    },
-    {
-      id: 'lastMove',
-      header: 'Last Move',
-      size: 105,
-      cell: ({ row }) => {
-        const move = row.original.lastMove
-        if (state.rendererMode() === 'stable') {
-          return flexRenderComponent(StableMoveCell, {
-            inputs: { move },
-          })
-        }
-        return flexRenderComponent(move >= 0 ? UpMoveCell : DownMoveCell, {
-          inputs: { move },
-        })
-      },
-    },
-    {
-      id: 'lastSize',
-      header: 'Last Qty',
-      size: 90,
-      cell: ({ row }) => compactFormatter.format(row.original.lastSize),
-    },
-    {
-      id: 'depth',
-      header: 'Bid / Ask Qty',
-      size: 145,
-      cell: ({ row }) =>
-        flexRenderComponent(DepthCell, {
-          inputs: {
-            bidSize: row.original.bidSize,
-            askSize: row.original.askSize,
-          },
-        }),
-    },
-    {
-      id: 'age',
-      header: 'Quote Age',
-      size: 85,
-      cell: ({ row }) =>
-        flexRenderComponent(QuoteAgeCell, {
-          inputs: {
-            ageMs: state.updateQuoteAges()
-              ? Math.max(
-                  0,
-                  state.quoteClock() - row.original.lastUpdatedAt,
-                )
-              : 0,
-          },
-        }),
-    },
-    {
-      id: 'change',
-      header: 'Day %',
-      size: 90,
-      cell: ({ row }) => {
-        const change = (row.original.price / row.original.open - 1) * 100
-        const sign = change >= 0 ? '+' : ''
-        return `${sign}${change.toFixed(2)}%`
-      },
-    },
-    {
-      id: 'volume',
-      header: 'Total Qty',
-      size: 100,
-      cell: ({ row }) => compactFormatter.format(row.original.volume),
-    },
-    {
-      id: 'turnover',
-      header: 'Traded Value',
-      size: 115,
-      cell: ({ row }) => currencyFormatter.format(row.original.turnover),
-    },
-    {
-      id: 'history',
-      header: 'Intraday',
-      size: 150,
-      cell: ({ row }) =>
-        flexRenderComponent(SparklineCell, {
-          inputs: { values: row.original.history },
-        }),
-    },
-  ]
-}
diff --git a/examples/angular/realtime-trading/src/app/trading-columns-v8.ts b/examples/angular/realtime-trading/src/app/trading-columns-v8.ts
deleted file mode 100644
index 1f13889d18..0000000000
--- a/examples/angular/realtime-trading/src/app/trading-columns-v8.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { flexRenderComponent } from '@tanstack/angular-table-v8'
-import {
-  DepthCell,
-  DownMoveCell,
-  PriceCell,
-  QuoteAgeCell,
-  SparklineCell,
-  SpreadCell,
-  StableMoveCell,
-  UpMoveCell,
-} from './quote-cells'
-import type { ColumnDef } from '@tanstack/angular-table-v8'
-import type { MarketQuote } from './market-data'
-import type { TradingColumnState } from './trading-column-types'
-
-const compactFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-})
-
-const currencyFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-  style: 'currency',
-  currency: 'USD',
-})
-
-export function createV8TradingColumns(
-  state: TradingColumnState,
-): Array<ColumnDef<MarketQuote>> {
-  return [
-    {
-      id: 'symbol',
-      header: 'Ticker',
-      size: 90,
-      cell: ({ row }) => row.original.symbol,
-    },
-    {
-      id: 'venue',
-      header: 'Venue',
-      size: 70,
-      cell: ({ row }) => row.original.venue,
-    },
-    {
-      id: 'bid',
-      header: 'Bid',
-      size: 90,
-      cell: ({ row }) => row.original.bid.toFixed(2),
-    },
-    {
-      id: 'ask',
-      header: 'Ask',
-      size: 90,
-      cell: ({ row }) => row.original.ask.toFixed(2),
-    },
-    {
-      id: 'spread',
-      header: 'Spread',
-      size: 95,
-      cell: ({ row }) =>
-        flexRenderComponent(SpreadCell, {
-          inputs: {
-            bid: row.original.bid,
-            ask: row.original.ask,
-          },
-        }),
-    },
-    {
-      id: 'price',
-      header: 'Last',
-      size: 100,
-      cell: ({ row }) =>
-        flexRenderComponent(PriceCell, {
-          inputs: {
-            price: row.original.price,
-            move: row.original.lastMove,
-          },
-          outputs: {
-            select: () => state.selectSymbol(row.original.symbol),
-          },
-        }),
-    },
-    {
-      id: 'lastMove',
-      header: 'Last Move',
-      size: 105,
-      cell: ({ row }) => {
-        const move = row.original.lastMove
-        if (state.rendererMode() === 'stable') {
-          return flexRenderComponent(StableMoveCell, {
-            inputs: { move },
-          })
-        }
-        return flexRenderComponent(move >= 0 ? UpMoveCell : DownMoveCell, {
-          inputs: { move },
-        })
-      },
-    },
-    {
-      id: 'lastSize',
-      header: 'Last Qty',
-      size: 90,
-      cell: ({ row }) => compactFormatter.format(row.original.lastSize),
-    },
-    {
-      id: 'depth',
-      header: 'Bid / Ask Qty',
-      size: 145,
-      cell: ({ row }) =>
-        flexRenderComponent(DepthCell, {
-          inputs: {
-            bidSize: row.original.bidSize,
-            askSize: row.original.askSize,
-          },
-        }),
-    },
-    {
-      id: 'age',
-      header: 'Quote Age',
-      size: 85,
-      cell: ({ row }) =>
-        flexRenderComponent(QuoteAgeCell, {
-          inputs: {
-            ageMs: state.updateQuoteAges()
-              ? Math.max(
-                  0,
-                  state.quoteClock() - row.original.lastUpdatedAt,
-                )
-              : 0,
-          },
-        }),
-    },
-    {
-      id: 'change',
-      header: 'Day %',
-      size: 90,
-      cell: ({ row }) => {
-        const change = (row.original.price / row.original.open - 1) * 100
-        const sign = change >= 0 ? '+' : ''
-        return `${sign}${change.toFixed(2)}%`
-      },
-    },
-    {
-      id: 'volume',
-      header: 'Total Qty',
-      size: 100,
-      cell: ({ row }) => compactFormatter.format(row.original.volume),
-    },
-    {
-      id: 'turnover',
-      header: 'Traded Value',
-      size: 115,
-      cell: ({ row }) => currencyFormatter.format(row.original.turnover),
-    },
-    {
-      id: 'history',
-      header: 'Intraday',
-      size: 150,
-      cell: ({ row }) =>
-        flexRenderComponent(SparklineCell, {
-          inputs: { values: row.original.history },
-        }),
-    },
-  ]
-}
diff --git a/examples/angular/realtime-trading/src/app/trading-columns.ts b/examples/angular/realtime-trading/src/app/trading-columns.ts
deleted file mode 100644
index 5fdc40efcb..0000000000
--- a/examples/angular/realtime-trading/src/app/trading-columns.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { flexRenderComponent } from '@tanstack/angular-table'
-import {
-  DepthCell,
-  DownMoveCell,
-  PriceCell,
-  QuoteAgeCell,
-  SparklineCell,
-  SpreadCell,
-  StableMoveCell,
-  UpMoveCell,
-} from './quote-cells'
-import type { ColumnDef, TableFeatures } from '@tanstack/angular-table'
-import type { MarketQuote } from './market-data'
-import type { TradingColumnState } from './trading-column-types'
-
-const compactFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-})
-
-const currencyFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-  style: 'currency',
-  currency: 'USD',
-})
-
-export function createTradingColumns(
-  state: TradingColumnState,
-): Array<ColumnDef<TableFeatures, MarketQuote, unknown>> {
-  return [
-    {
-      id: 'symbol',
-      header: 'Ticker',
-      size: 90,
-      cell: ({ row }) => row.original.symbol,
-    },
-    {
-      id: 'venue',
-      header: 'Venue',
-      size: 70,
-      cell: ({ row }) => row.original.venue,
-    },
-    {
-      id: 'bid',
-      header: 'Bid',
-      size: 90,
-      cell: ({ row }) => row.original.bid.toFixed(2),
-    },
-    {
-      id: 'ask',
-      header: 'Ask',
-      size: 90,
-      cell: ({ row }) => row.original.ask.toFixed(2),
-    },
-    {
-      id: 'spread',
-      header: 'Spread',
-      size: 95,
-      cell: ({ row }) =>
-        flexRenderComponent(SpreadCell, {
-          inputs: {
-            bid: row.original.bid,
-            ask: row.original.ask,
-          },
-        }),
-    },
-    {
-      id: 'price',
-      header: 'Last',
-      size: 100,
-      cell: ({ row }) =>
-        flexRenderComponent(PriceCell, {
-          inputs: {
-            price: row.original.price,
-            move: row.original.lastMove,
-          },
-          outputs: {
-            select: () => state.selectSymbol(row.original.symbol),
-          },
-        }),
-    },
-    {
-      id: 'lastMove',
-      header: 'Last Move',
-      size: 105,
-      cell: ({ row }) => {
-        const move = row.original.lastMove
-        if (state.rendererMode() === 'stable') {
-          return flexRenderComponent(StableMoveCell, {
-            inputs: { move },
-          })
-        }
-        return flexRenderComponent(move >= 0 ? UpMoveCell : DownMoveCell, {
-          inputs: { move },
-        })
-      },
-    },
-    {
-      id: 'lastSize',
-      header: 'Last Qty',
-      size: 90,
-      cell: ({ row }) => compactFormatter.format(row.original.lastSize),
-    },
-    {
-      id: 'depth',
-      header: 'Bid / Ask Qty',
-      size: 145,
-      cell: ({ row }) =>
-        flexRenderComponent(DepthCell, {
-          inputs: {
-            bidSize: row.original.bidSize,
-            askSize: row.original.askSize,
-          },
-        }),
-    },
-    {
-      id: 'age',
-      header: 'Quote Age',
-      size: 85,
-      cell: ({ row }) =>
-        flexRenderComponent(QuoteAgeCell, {
-          inputs: {
-            ageMs: state.updateQuoteAges()
-              ? Math.max(
-                  0,
-                  state.quoteClock() - row.original.lastUpdatedAt,
-                )
-              : 0,
-          },
-        }),
-    },
-    {
-      id: 'change',
-      header: 'Day %',
-      size: 90,
-      cell: ({ row }) => {
-        const change = (row.original.price / row.original.open - 1) * 100
-        const sign = change >= 0 ? '+' : ''
-        return `${sign}${change.toFixed(2)}%`
-      },
-    },
-    {
-      id: 'volume',
-      header: 'Total Qty',
-      size: 100,
-      cell: ({ row }) => compactFormatter.format(row.original.volume),
-    },
-    {
-      id: 'turnover',
-      header: 'Traded Value',
-      size: 115,
-      cell: ({ row }) => currencyFormatter.format(row.original.turnover),
-    },
-    {
-      id: 'history',
-      header: 'Intraday',
-      size: 150,
-      cell: ({ row }) =>
-        flexRenderComponent(SparklineCell, {
-          inputs: { values: row.original.history },
-        }),
-    },
-  ]
-}
diff --git a/examples/angular/realtime-trading/src/app/v8-trading-table.ts b/examples/angular/realtime-trading/src/app/v8-trading-table.ts
deleted file mode 100644
index 87e254af66..0000000000
--- a/examples/angular/realtime-trading/src/app/v8-trading-table.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  output,
-} from '@angular/core'
-import {
-  FlexRenderDirective,
-  createAngularTable,
-  getCoreRowModel,
-} from '@tanstack/angular-table-v8'
-import { createV8TradingColumns } from './trading-columns-v8'
-import type { MarketQuote } from './market-data'
-import type { RendererMode } from './trading-column-types'
-
-@Component({
-  selector: 'app-v8-trading-table',
-  imports: [FlexRenderDirective],
-  templateUrl: './table-v8.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class V8TradingTable {
-  readonly quotes = input.required<Array<MarketQuote>>()
-  readonly rendererMode = input.required<RendererMode>()
-  readonly updateQuoteAges = input.required<boolean>()
-  readonly quoteClock = input.required<number>()
-  readonly selectedSymbol = input<string | null>(null)
-  readonly symbolSelected = output<string>()
-
-  readonly columns = createV8TradingColumns({
-    rendererMode: () => this.rendererMode(),
-    updateQuoteAges: () => this.updateQuoteAges(),
-    quoteClock: () => this.quoteClock(),
-    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
-  })
-
-  readonly table = createAngularTable(() => ({
-    data: this.quotes(),
-    columns: this.columns,
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
-  }))
-}
diff --git a/examples/angular/realtime-trading/src/app/worker-trading-table.ts b/examples/angular/realtime-trading/src/app/worker-trading-table.ts
deleted file mode 100644
index 9fad8b38da..0000000000
--- a/examples/angular/realtime-trading/src/app/worker-trading-table.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  input,
-  output,
-} from '@angular/core'
-import {
-  FlexRender,
-  injectTable,
-  stockFeatures,
-  tableFeatures,
-} from '@tanstack/angular-table'
-import {
-  createTableWorker,
-  createWorkerRowModel,
-  workerRowModelsFeature,
-} from '@tanstack/angular-table/experimental-worker-plugin'
-import { createTradingColumns } from './trading-columns'
-import type { OnDestroy } from '@angular/core'
-import type { MarketQuote } from './market-data'
-import type { RendererMode } from './trading-column-types'
-
-const tableWorker = createTableWorker({
-  createWorker: () =>
-    new Worker(new URL('./table-row-model.worker', import.meta.url), {
-      type: 'module',
-    }),
-})
-
-const workerFeatures = tableFeatures({
-  ...stockFeatures,
-  workerRowModelsFeature,
-  filteredRowModel: createWorkerRowModel(tableWorker, 'filtered'),
-})
-
-@Component({
-  selector: 'app-worker-trading-table',
-  imports: [FlexRender],
-  templateUrl: './table-v9.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class WorkerTradingTable implements OnDestroy {
-  readonly quotes = input.required<Array<MarketQuote>>()
-  readonly rendererMode = input.required<RendererMode>()
-  readonly updateQuoteAges = input.required<boolean>()
-  readonly quoteClock = input.required<number>()
-  readonly selectedSymbol = input<string | null>(null)
-  readonly symbolSelected = output<string>()
-
-  readonly columns = createTradingColumns({
-    rendererMode: () => this.rendererMode(),
-    updateQuoteAges: () => this.updateQuoteAges(),
-    quoteClock: () => this.quoteClock(),
-    selectSymbol: (symbol) => this.symbolSelected.emit(symbol),
-  })
-
-  readonly table = injectTable(() => ({
-    data: this.quotes(),
-    columns: this.columns,
-    features: workerFeatures,
-    getRowId: (row) => row.id,
-  }))
-
-  @HostBinding('attr.data-table-worker-pending')
-  get workerPending(): string {
-    return String(this.table.store.get().workerRowModels.isPending)
-  }
-
-  @HostBinding('attr.data-table-worker-compute-ms')
-  get workerComputeMs(): string | null {
-    const computeMs = this.table.store.get().workerRowModels.lastComputeMs
-    return computeMs === undefined ? null : computeMs.toFixed(3)
-  }
-
-  ngOnDestroy(): void {
-    tableWorker.terminate()
-  }
-}
diff --git a/examples/angular/realtime-trading/src/index.html b/examples/angular/realtime-trading/src/index.html
index f1b1a69962..3122a836db 100644
--- a/examples/angular/realtime-trading/src/index.html
+++ b/examples/angular/realtime-trading/src/index.html
@@ -9,6 +9,7 @@
       name="description"
       content="A synthetic real-time market benchmark for TanStack Angular Table flexRender."
     />
+    <link rel="icon" href="data:," />
   </head>
   <body>
     <app-root></app-root>
diff --git a/examples/angular/realtime-trading/src/styles.css b/examples/angular/realtime-trading/src/styles.css
index d728afdc74..6014dd0e21 100644
--- a/examples/angular/realtime-trading/src/styles.css
+++ b/examples/angular/realtime-trading/src/styles.css
@@ -1,28 +1,48 @@
 :root {
   color-scheme: dark;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    sans-serif;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
   font-synthesis: none;
-  --background: #090c11;
-  --panel: #10151c;
-  --panel-raised: #151b24;
-  --panel-hover: #19212b;
-  --border: #28313d;
-  --border-soft: #1d2530;
-  --text: #d7dde5;
-  --text-strong: #f1f4f8;
-  --muted: #7f8a98;
-  --blue: #4f8cff;
-  --blue-soft: #8cb5ff;
-  --green: #42c98a;
-  --red: #ef6a78;
-  --amber: #e8b95f;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
 }
 
 * {
@@ -51,8 +71,8 @@ button,
 select {
   color: var(--text);
   background: var(--panel-raised);
-  border: 1px solid #394452;
-  border-radius: 2px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
 }
 
 button {
@@ -64,8 +84,8 @@ button {
 }
 
 button:hover {
-  background: #1c2530;
-  border-color: #536171;
+  background: var(--control-hover);
+  border-color: var(--border-strong);
 }
 
 button:focus-visible,
@@ -82,29 +102,48 @@ select {
 }
 
 .trading-terminal {
-  display: flex;
-  flex-direction: column;
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
   width: 100%;
-  height: 100vh;
-  min-height: 640px;
+  height: 100dvh;
+  min-height: 0;
   overflow: hidden;
   background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
 }
 
 .app-bar {
   display: flex;
-  flex: 0 0 42px;
+  min-height: var(--shell-bar-height);
   align-items: center;
   justify-content: space-between;
-  padding: 0 0.75rem;
-  background: #0d1117;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
   border-bottom: 1px solid var(--border);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.68rem;
   letter-spacing: 0.045em;
 }
 
 .brand,
+.header-actions,
 .session-info,
 .feed-status {
   display: flex;
@@ -121,8 +160,9 @@ select {
   width: 24px;
   height: 24px;
   place-items: center;
-  color: #fff;
-  background: var(--blue);
+  color: var(--text-inverse);
+  background: var(--surface-control);
+  border: 1px solid var(--border-strong);
   font-size: 0.62rem;
   font-weight: 800;
 }
@@ -130,8 +170,8 @@ select {
 .environment {
   padding: 0.16rem 0.3rem;
   color: var(--amber);
-  background: rgb(232 185 95 / 8%);
-  border: 1px solid rgb(232 185 95 / 40%);
+  background: color-mix(in srgb, var(--amber) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
   font-size: 0.58rem;
 }
 
@@ -140,9 +180,39 @@ select {
   color: var(--muted);
 }
 
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
 .feed-status {
   gap: 0.4rem;
-  color: #9aa4b1;
+  color: var(--muted);
 }
 
 .feed-status.is-running {
@@ -152,7 +222,7 @@ select {
 .status-dot {
   width: 6px;
   height: 6px;
-  background: #66717d;
+  background: var(--muted);
   border-radius: 50%;
 }
 
@@ -163,69 +233,28 @@ select {
 .development-warning {
   flex: 0 0 auto;
   padding: 0.3rem 0.75rem;
-  color: #e9c67e;
-  background: #211b11;
-  border-bottom: 1px solid #4a3d25;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
   font-size: 0.62rem;
   letter-spacing: 0.04em;
 }
 
-.workspace {
-  display: grid;
-  flex: 1;
-  grid-template-columns: minmax(0, 1fr) 288px;
-  min-height: 0;
-}
-
 .market-panel {
   display: flex;
   min-width: 0;
   min-height: 0;
   flex-direction: column;
   background: var(--panel);
-  border-right: 1px solid var(--border);
-}
-
-.market-toolbar {
-  display: flex;
-  flex: 0 0 42px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 0.75rem;
-  background: #11171f;
-  border-bottom: 1px solid var(--border);
-}
-
-.watchlist-name {
-  display: flex;
-  gap: 0.6rem;
-  align-items: baseline;
-  font-size: 0.67rem;
-}
-
-.watchlist-name span {
-  color: var(--muted);
-}
-
-.watchlist-name strong {
-  color: var(--text-strong);
-  font-size: 0.72rem;
-  letter-spacing: 0.035em;
-}
-
-.market-context {
-  display: flex;
-  gap: 1rem;
-  color: var(--muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.6rem;
+  grid-area: content;
 }
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 64px;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
@@ -233,8 +262,8 @@ select {
 
 .metrics-strip article {
   min-width: 0;
-  padding: 0.55rem 0.65rem;
-  background: #0e131a;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
 }
 
 .metrics-strip span,
@@ -250,10 +279,10 @@ select {
 
 .metrics-strip strong {
   display: block;
-  margin: 0.22rem 0 0.12rem;
+  margin: 0.12rem 0 0.08rem;
   overflow: hidden;
   color: var(--text-strong);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
   text-overflow: ellipsis;
@@ -268,28 +297,103 @@ select {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  background: #0d1218;
+  background: var(--surface-table);
 }
 
 app-current-trading-table,
-app-worker-trading-table,
-app-beta-trading-table,
-app-v8-trading-table {
+app-worker-trading-table {
   display: flex;
+  flex-direction: column;
   flex: 1;
   min-width: 0;
   min-height: 0;
 }
 
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
 table {
   min-width: 100%;
   border-spacing: 0;
   table-layout: fixed;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.72rem;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
   font-variant-numeric: tabular-nums;
 }
 
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
 thead {
   position: sticky;
   z-index: 2;
@@ -297,26 +401,42 @@ thead {
 }
 
 th {
-  height: 28px;
-  padding: 0 0.6rem;
-  color: #8e99a6;
-  background: #171e27;
-  border-right: 1px solid #222b36;
-  border-bottom: 1px solid #394452;
-  font-size: 0.58rem;
-  font-weight: 700;
-  letter-spacing: 0.055em;
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
   text-align: left;
-  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
 }
 
 td {
-  height: 27px;
-  padding: 0 0.6rem;
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
   overflow: hidden;
-  color: #cbd2db;
-  border-right: 1px solid #1a222c;
-  border-bottom: 1px solid #1b232d;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -330,19 +450,228 @@ td:last-child {
   text-align: right;
 }
 
+.market-cell {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+.name-cell {
+  color: var(--text-strong);
+}
+
+.symbol-cell {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
 tbody tr:nth-child(even) {
-  background: rgb(255 255 255 / 1.3%);
+  background: var(--row-alt);
+}
+
+tbody tr.virtual-table-row.is-even-row {
+  background: var(--row-alt);
 }
 
 tbody tr:hover {
-  background: #17202a;
+  background: var(--panel-hover);
 }
 
-tbody tr.is-selected {
-  background: rgb(79 140 255 / 13%);
+tbody tr.is-symbol-selected {
+  background: var(--row-selected);
   box-shadow: inset 2px 0 0 var(--blue);
 }
 
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr.is-row-selected {
+  background: rgb(76 145 228 / 13%);
+}
+
+tbody tr.is-symbol-selected {
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+td.is-cell-selected {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td.is-cell-focused {
+  background: rgb(70 139 222 / 21%);
+}
+
+td.is-cell-selected::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td.selection-top::after {
+  border-top-color: var(--blue);
+}
+
+td.selection-right::after {
+  border-right-color: var(--blue);
+}
+
+td.selection-bottom::after {
+  border-bottom-color: var(--blue);
+}
+
+td.selection-left::after {
+  border-left-color: var(--blue);
+}
+
 .price-button {
   min-width: 4.5rem;
   padding: 0;
@@ -363,8 +692,31 @@ tbody tr.is-selected {
 }
 
 .move-cell {
-  display: inline-block;
-  min-width: 4.8rem;
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
 }
 
 .spread-cell {
@@ -372,7 +724,7 @@ tbody tr.is-selected {
   align-items: baseline;
   justify-content: flex-end;
   gap: 0.35rem;
-  color: #cbd2db;
+  color: var(--text);
 }
 
 .spread-cell small {
@@ -386,7 +738,12 @@ tbody tr.is-selected {
   color: var(--amber);
 }
 
-app-depth-cell {
+app-depth-cell,
+app-stable-move-cell,
+app-up-move-cell,
+app-down-move-cell,
+app-percent-change-cell,
+app-sparkline-cell {
   display: block;
   width: 100%;
 }
@@ -396,22 +753,22 @@ app-depth-cell {
   display: flex;
   height: 17px;
   overflow: hidden;
-  background: #151b23;
+  background: var(--surface-control);
 }
 
 .depth-bid,
 .depth-ask {
   height: 100%;
-  opacity: 0.28;
+  opacity: 0.78;
 }
 
 .depth-bid {
-  background: var(--blue);
-  border-right: 1px solid #10151c;
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
 }
 
 .depth-ask {
-  background: var(--red);
+  background: var(--depth-ask);
 }
 
 .depth-values {
@@ -421,13 +778,13 @@ app-depth-cell {
   align-items: center;
   justify-content: space-between;
   padding: 0 0.28rem;
-  color: #dce2e9;
+  color: var(--text-strong);
   font-size: 0.57rem;
-  text-shadow: 0 1px #080b0f;
+  text-shadow: 0 1px var(--background);
 }
 
 .quote-age {
-  color: #aab3bf;
+  color: var(--muted);
 }
 
 .quote-age-warm {
@@ -448,15 +805,24 @@ app-depth-cell {
 
 .sparkline {
   display: block;
-  width: 8rem;
-  height: 1.2rem;
+  width: 100%;
+  height: 1.35rem;
   margin-left: auto;
+  color: var(--blue-soft);
   overflow: visible;
 }
 
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
 .sparkline polyline {
   fill: none;
-  stroke: var(--blue-soft);
+  stroke: currentColor;
   stroke-linecap: square;
   stroke-linejoin: miter;
   stroke-width: 1.25;
@@ -465,21 +831,23 @@ app-depth-cell {
 
 .market-statusbar {
   display: flex;
-  flex: 0 0 25px;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
   gap: 1.1rem;
   align-items: center;
   padding: 0 0.65rem;
   color: var(--muted);
-  background: #0d1117;
+  background: var(--surface-bar);
   border-top: 1px solid var(--border);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.56rem;
+  grid-area: footer;
   letter-spacing: 0.035em;
 }
 
 .market-statusbar strong {
   margin-left: 0.25rem;
-  color: #c4ccd6;
+  color: var(--text);
   font-weight: 500;
 }
 
@@ -487,20 +855,43 @@ app-depth-cell {
   flex: 1;
 }
 
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
 .configurator {
+  width: 100%;
+  height: 100%;
   min-height: 0;
   overflow: auto;
-  background: #0d1218;
+  background: var(--surface-table);
 }
 
 .configurator > header {
   display: flex;
-  height: 42px;
+  height: var(--shell-bar-height);
   align-items: center;
   justify-content: space-between;
-  padding: 0 0.75rem;
+  padding: 0 var(--shell-inline-padding);
   color: var(--text-strong);
-  background: #11171f;
+  background: var(--surface-toolbar);
   border-bottom: 1px solid var(--border);
   font-size: 0.65rem;
   font-weight: 700;
@@ -516,33 +907,33 @@ app-depth-cell {
 .config-section {
   display: grid;
   gap: 0.7rem;
-  padding: 0.8rem 0.75rem;
+  padding: 0.8rem var(--shell-inline-padding);
   border-bottom: 1px solid var(--border);
 }
 
 .config-section h2 {
   margin: 0;
-  color: #8e99a6;
+  color: var(--muted);
   font-size: 0.58rem;
   letter-spacing: 0.075em;
 }
 
 .primary-action {
   width: 100%;
-  color: #fff;
-  background: #316fdd;
-  border-color: #4f8cff;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
 }
 
 .primary-action:hover {
-  background: #397bed;
-  border-color: #73a2ff;
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
 }
 
 .field {
   display: grid;
   gap: 0.35rem;
-  color: #9ba5b1;
+  color: var(--text);
   font-size: 0.66rem;
 }
 
@@ -553,13 +944,13 @@ app-depth-cell {
 
 .rate-field strong {
   color: var(--text);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-weight: 500;
 }
 
 .field small {
-  color: #66717e;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--muted);
+  font-family: var(--font-mono);
   font-size: 0.55rem;
 }
 
@@ -573,7 +964,7 @@ input[type='range'] {
   display: flex;
   gap: 0.5rem;
   align-items: flex-start;
-  color: #b8c0ca;
+  color: var(--text);
   font-size: 0.66rem;
   line-height: 1.3;
 }
@@ -586,7 +977,7 @@ input[type='range'] {
 .toggle-field small {
   display: block;
   margin-top: 0.14rem;
-  color: #687482;
+  color: var(--muted);
   font-size: 0.57rem;
 }
 
@@ -624,8 +1015,8 @@ dt {
 
 dd {
   margin: 0;
-  color: #d4dae2;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
   font-size: 0.62rem;
 }
 
@@ -642,7 +1033,7 @@ dd {
 
 .selection strong {
   color: var(--text-strong);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.85rem;
 }
 
@@ -659,66 +1050,42 @@ dd {
 }
 
 @media (max-width: 980px) {
-  .workspace {
-    grid-template-columns: minmax(0, 1fr) 250px;
-  }
-
-  .market-context span:not(:first-child) {
-    display: none;
-  }
-
-  .metrics-strip {
-    grid-template-columns: repeat(3, 1fr);
-    flex-basis: 166px;
+  :root {
+    --sidebar-width: 15.625rem;
   }
 }
 
 @media (max-width: 720px) {
-  html,
-  body {
-    min-height: 100%;
-  }
-
-  body {
-    overflow: auto;
-  }
-
   .trading-terminal {
-    height: auto;
-    min-height: 100vh;
-    overflow: visible;
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
   }
 
   .session-info > span:first-child {
     display: none;
   }
 
-  .workspace {
-    display: flex;
-    flex-direction: column;
-  }
-
   .market-panel {
-    min-height: 68vh;
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .metrics-strip {
-    grid-template-columns: repeat(2, 1fr);
-    flex-basis: 220px;
+    min-height: 0;
   }
 
   .table-scroll {
-    height: 58vh;
-    flex: none;
+    min-height: 0;
   }
 
-  .market-context {
-    display: none;
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
   }
 
-  .configurator {
-    overflow: visible;
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
   }
 }
diff --git a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
index 86283a6826..16722d9295 100644
--- a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
@@ -16,30 +16,111 @@ function collectPageErrors(page: Page) {
   return errors
 }
 
-test('runs the same workload across all three table adapters', async ({
-  page,
-}) => {
+test('runs the Angular realtime trading workload', async ({ page }) => {
   const server = await startExampleServer(exampleDir)
   const errors = collectPageErrors(page)
 
   try {
     await page.goto(server.url)
 
-    const table = page.getByRole('table')
+    const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollMode = page.getByTestId('virtual-scroll-mode')
+    const virtualScrollToggle = page.getByTestId('virtual-scroll-toggle')
     await expect(table).toBeVisible()
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollMode).toContainText('Full DOM')
+    await expect(virtualScrollToggle).toBeEnabled()
+    await expect(virtualScrollToggle).not.toBeChecked()
+    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollToggle.check()
+    await expect(virtualScrollMode).toContainText('TanStack Virtual')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollToggle.uncheck()
+    await expect(virtualScrollMode).toContainText('Full DOM')
+    await instrumentCount.selectOption('1000')
+    await expect(virtualScrollMode).toContainText('Full DOM')
+    await expect(table.locator('tbody tr')).toHaveCount(1_000)
+    await instrumentCount.selectOption('1500')
+    await expect(virtualScrollMode).toContainText('TanStack Virtual')
+    await expect(virtualScrollToggle).toBeChecked()
+    await expect(virtualScrollToggle).toBeDisabled()
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1_500)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 1500 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('250')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await expect(table.locator('tbody tr')).toHaveCount(250)
-    await expect(table.locator('thead th')).toHaveCount(14)
-    await expect(table.locator('thead')).toContainText('Ticker')
-    await expect(table.locator('thead')).toContainText('Last Qty')
-    await expect(table.locator('thead')).toContainText('Traded Value')
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+
+    const selectionStart = table.locator('tbody tr').nth(0).locator('td').nth(1)
+    const selectionEnd = table.locator('tbody tr').nth(2).locator('td').nth(3)
+    const selectedSymbol = await table
+      .locator('tbody tr')
+      .nth(0)
+      .getAttribute('data-symbol')
+    const selectionStartBox = await selectionStart.boundingBox()
+    const selectionEndBox = await selectionEnd.boundingBox()
+    if (!selectionStartBox || !selectionEndBox) {
+      throw new Error('Expected visible cells for the drag-selection check')
+    }
+    await page.mouse.move(
+      selectionStartBox.x + selectionStartBox.width / 2,
+      selectionStartBox.y + selectionStartBox.height / 2,
+    )
+    await page.mouse.down()
+    await page.mouse.move(
+      selectionEndBox.x + selectionEndBox.width / 2,
+      selectionEndBox.y + selectionEndBox.height / 2,
+      { steps: 4 },
+    )
+    await page.mouse.up()
+    await expect(table.locator('td[aria-selected="true"]')).toHaveCount(9)
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
 
-    const adapter = page.getByTestId('adapter-select')
-    await expect(adapter).toHaveValue('local')
     await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
-    const instrumentCount = page.getByTestId('instrument-count-select')
     await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
     await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
     await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="1500"]')).toHaveCount(1)
 
     const loadProfile = page.getByTestId('load-profile-select')
     await expect(loadProfile).toHaveValue('high')
@@ -47,21 +128,21 @@ test('runs the same workload across all three table adapters', async ({
     await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
     await loadProfile.selectOption('high')
 
-    const rowWorkload = page.getByTestId('row-workload-select')
-    await rowWorkload.selectOption('rotating-filter')
-    await expect(table.locator('tbody tr')).toHaveCount(200)
-    await rowWorkload.selectOption('identity-churn')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
-    await expect(
-      table.locator('tbody tr[data-row-id*="-replacement-"]'),
-    ).toHaveCount(25)
-    await rowWorkload.selectOption('price-sort')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
-    await rowWorkload.selectOption('stable')
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('250')
+    await sparklineInterval.selectOption('500')
+    await expect(sparklineInterval).toHaveValue('500')
+    await sparklineInterval.selectOption('250')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
 
     await expect
       .poll(async () => {
-        const text = await page.getByTestId('total-events').textContent()
+        const text = await page.getByTestId('row-update-rate').textContent()
         return Number(text?.replace(/\D/g, '') ?? 0)
       })
       .toBeGreaterThan(0)
@@ -73,7 +154,7 @@ test('runs the same workload across all three table adapters', async ({
       .toBeGreaterThan(0)
     await expect
       .poll(async () =>
-        Number(await page.getByTestId('raf-rate').textContent()),
+        Number(await page.getByTestId('message-rate').textContent()),
       )
       .toBeGreaterThan(0)
     await expect
@@ -82,7 +163,7 @@ test('runs the same workload across all three table adapters', async ({
       )
       .toBeGreaterThan(0)
     await expect(page.getByTestId('long-frame-count')).toHaveText(
-      /^(?:N\/A|\d+)$/,
+      /^\s*(?:N\/A|\d+)\s*$/,
     )
 
     const tableWorker = page.getByTestId('table-worker-toggle')
@@ -90,38 +171,39 @@ test('runs the same workload across all three table adapters', async ({
     await tableWorker.check()
     await expect(page.getByText('ROW MODEL WORKER ON')).toBeVisible()
     await expect(table.locator('tbody tr')).toHaveCount(250)
+    await instrumentCount.selectOption('1500')
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1_500)
+    await instrumentCount.selectOption('250')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
     await page.getByTestId('feed-toggle').click()
     await expect
       .poll(() =>
         page
-          .locator('app-worker-trading-table')
+          .locator('app-worker-trading-table [data-table-worker-pending]')
           .getAttribute('data-table-worker-compute-ms'),
       )
       .not.toBeNull()
-    await expect(page.locator('app-worker-trading-table')).toHaveAttribute(
-      'data-table-worker-pending',
-      'false',
-    )
+    await expect(
+      page.locator('app-worker-trading-table [data-table-worker-pending]'),
+    ).toHaveAttribute('data-table-worker-pending', 'false')
     await page.getByTestId('feed-toggle').click()
     await tableWorker.uncheck()
 
-    for (const implementation of ['beta', 'v8', 'local']) {
-      await adapter.selectOption(implementation)
-      await expect(adapter).toHaveValue(implementation)
-      if (implementation === 'local') {
-        await expect(tableWorker).toBeEnabled()
-      } else {
-        await expect(tableWorker).toBeDisabled()
-      }
-      await expect(page.getByRole('table')).toBeVisible()
-      await expect(page.locator('tbody tr')).toHaveCount(250)
-
-      const firstPrice = page.locator('tbody tr').first().getByRole('button')
-      const priceBeforeUpdate = await firstPrice.textContent()
-      await expect
-        .poll(() => firstPrice.textContent())
-        .not.toBe(priceBeforeUpdate)
-    }
+    await expect(tableWorker).toBeEnabled()
+    await instrumentCount.selectOption('1500')
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1_500)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    const firstPrice = table.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
+    await instrumentCount.selectOption('250')
+    await expect(table.locator('tbody tr')).toHaveCount(250)
 
     await page
       .getByLabel(
diff --git a/examples/react/realtime-trading/README.md b/examples/react/realtime-trading/README.md
index 4570f701a4..ad69a57e01 100644
--- a/examples/react/realtime-trading/README.md
+++ b/examples/react/realtime-trading/README.md
@@ -1,324 +1,72 @@
-# React real-time trading FlexRender lab
+# React realtime trading benchmark
 
-This standalone example generates deterministic synthetic quote events in the
-browser and stresses two React Table render paths. It is not a real
-exchange feed and does not display financial advice or real market data.
+This example stresses the current React Table adapter with a synthetic market
+feed, immutable quote snapshots, core sorting/filtering, dynamic cells, React
+Profiler measurements, and automated scroll pressure.
 
-The workload is inspired by the public
-[AG Grid finance demo](https://www.ag-grid.com/example-finance/) and its
-[source](https://github.com/ag-grid/ag-grid-demos/tree/main/finance), but is
-focused on renderer lifecycle, immutable high-frequency updates, backpressure,
-and browser performance APIs.
+## Run
 
-## Run it
-
-From the repository root:
-
-```sh
-pnpm --filter tanstack-react-table-example-realtime-trading dev
-```
-
-Open `http://localhost:7778`. For measurements, build and serve the production
-bundle so development checks do not distort the result. Use the dedicated
-profiling build when the in-page React Profiler metrics are part of the run:
-
-```sh
-pnpm --filter tanstack-react-table-example-realtime-trading build:profile
-pnpm --filter tanstack-react-table-example-realtime-trading serve
+```bash
+pnpm --dir examples/react/realtime-trading dev
 ```
 
-The regular `build` command deliberately keeps React's smaller standard
-production bundle. React disables `<Profiler>` callbacks in that build, so the
-widget labels its commit timings as unavailable. `build:profile` aliases the
-root renderer to React's production profiling bundle.
-
-Like the other React examples in this repository, `index.html` also loads the
-React Scan widget from `https://unpkg.com/react-scan/dist/auto.global.js`.
-React Scan provides the visual rerender overlay and interactive diagnostics;
-the in-page Profiler metrics provide repeatable numeric samples. Keep React
-Scan enabled while locating unnecessary rerenders, then disable or stub it when
-recording final adapter comparisons because its instrumentation adds work.
-
-## What is copied into this example
-
-This directory is self-contained. It does not import the feed implementation,
-styles, components, or benchmark shell from the Angular or Solid examples:
-
-- `market-feed-engine.ts` owns the deterministic quote algorithm.
-- `market-feed.worker.ts` schedules, batches, coalesces, and applies
-  backpressure.
-- `market-feed-protocol.ts` defines commands and events across the worker
-  boundary.
-- `market-data.ts` creates a new data array and new objects for changed rows.
-- `quote-cells.tsx` implements all dynamic React cells and lifecycle counters.
-- `trading-table-local.tsx` and `trading-table-v8.tsx` isolate the two adapter
-  implementations.
-- `trading-table-shared.tsx` owns the stable column definition, leaf-level
-  Store subscriptions, shared types, and row-model measurement.
-- `core/trading-benchmark-controller.ts` owns the TanStack Store, worker
-  transport, derived table inputs, and user commands.
-- `core/use-trading-benchmark-controller.ts` only binds that stable controller
-  to the React mount lifecycle.
-- `core/use-trading-table-runtime.ts` gives each adapter only its own data and
-  benchmark subscriptions.
-- `benchmark/benchmark-monitor.ts` owns Profiler samples, browser observers,
-  render acknowledgements, scroll pressure, and published metrics.
-- `benchmark/use-table-benchmark.ts` binds table commits, DOM mutation
-  observation, and automated scroll pressure to the mounted adapter.
-- `shell/TradingShell.tsx` composes independent header, toolbar, metrics,
-  status-bar, diagnostics, and configurator components.
-- `shell/trading-shell-context.tsx` lets every shell component consume the
-  controller without prop drilling.
-- `App.tsx` creates the controller and owns only the projected adapter switch.
-- `index.css` is a complete local copy of the trading-terminal styles.
-
-The duplication is intentional: each framework example can be copied, changed,
-or profiled on its own. Keep the workload files synchronized manually when
-making cross-framework comparisons.
-
-## Adapter matrix
+Open `http://localhost:7778`.
 
-The configurator mounts exactly one implementation at a time:
+Use the profiling production build when recording React commit timings:
 
-- **Local v9** imports the React adapter from this workspace.
-- **8.21.3** imports the final published React v8 adapter and matching core.
-
-Changing the select unmounts the current table before mounting the next one.
-Feed state remains in the controller, so both receive the same immutable
-snapshots.
-The exact v8 tarball alias prevents this workspace from silently replacing the
-published baseline with local packages.
-
-## React Compiler
-
-The Vite build enables React Compiler through `reactCompilerPreset`. The local
-v9 table component uses the compiler and its emitted function contains React
-memo-cache code.
-
-The v8 adapter lives in its own module with a module-level `'use no memo'`
-directive and retains its explicit `memo` wrapper. This prevents compiler
-optimization from interacting with v8's mutable table instance while keeping
-the rest of the example compiled.
-
-The benchmark-only `recordCellRender` and lifecycle-counter functions also use
-function-level `'use no memo'`. They intentionally mutate write-only diagnostic
-counters on every invocation; compiling or memoizing that instrumentation
-would change the measurement. This is safe only because those counters do not
-participate in rendered output. `recordCellRender` receives an already-evaluated
-value and a typed column name rather than an anonymous callback.
+```bash
+pnpm --dir examples/react/realtime-trading build:profile
+```
 
 ## Architecture
 
-`App` deliberately has no knowledge of workers, timers, data, or table render
-options. It provides the stable controller, subscribes only to the adapter
-choice, and projects that table into the shell layout.
-`TradingBenchmarkController` subscribes to the feed worker, converts protocol
-events into immutable row snapshots, derives the selected workload, and
-exposes a TanStack Store plus stable actions.
-
-The React context transports only the controller identity. Components call
-`useTradingShellState(selector)` to subscribe to the exact state slice they
-render. Quote snapshots therefore update the table outlet without rerendering
-the header or configurator, while the 500 ms performance snapshot updates only
-the metrics strip, status bar, and diagnostics. Multi-field selectors use
-TanStack Store's `shallow` comparator, so returning a small object does not
-turn it back into a whole-store subscription. Controller operations that
-publish several related fields use TanStack Store `batch`, exposing one
-coherent snapshot to subscribers.
-
-Each adapter calls its own runtime hook. The local v9 `useTable` owner selects
-`null`, so table state does not rerender the entire owner. Sorting and filtering
-are external table atoms, and a `table.Subscribe` boundary rerenders only the
-row-model body. The body receives the immutable quote snapshot as an explicit
-input as well: external table-state subscriptions do not represent changes to
-the `data` option, and this dependency prevents React Compiler from retaining
-the initial empty body. Renderer mode, quote age, and selection are read by the
-leaf cell/row components that use them; they no longer travel through the table
-outlet or a broad render-options context. Quote data still rerenders the table
-owner and body because `data` is a table option and the row model must process
-a new immutable snapshot.
-
-Benchmark instrumentation is a separate collaborator. `BenchmarkMonitor`
-contains the mutable sampling runtime and publishes immutable metric snapshots
-to the same store. `useTableBenchmark` owns the React/DOM lifecycle bridge.
-This keeps measurement policy out of both the table adapters and the
-presentational shell.
-
-All deliberate mutable runtime is grouped behind `const` object or ref
-identities. Source files do not use `let`; counters and handles change as
-properties of those stable runtime owners instead of being scattered mutable
-bindings.
+- `TradingBenchmarkController` uses TanStack Store for application state and
+  exposes dedicated atoms for table and cell subscriptions.
+- `market-feed.worker.ts` produces synthetic quote samples outside the main
+  thread and coalesces repeated instruments into one row update per message.
+- `trading-table.tsx` owns the current React Table instance and its subscription
+  boundaries.
+- `trading-table-shared.tsx` owns columns, row rendering, and row-model timing.
+- `benchmark/` owns React Profiler, User Timing, DOM mutation, long-frame, and
+  scroll-pressure diagnostics.
+- `shell/` owns the trading-terminal layout and benchmark controls.
 
-## Render workload
+There is one table implementation. The shell and application root do not
+subscribe to or switch between historical adapters.
 
-The table contains 14 columns and up to 1,000 instruments. Its market-watch
-labels are Ticker, Venue, Bid, Ask, Spread, Last, Last Move, Last Qty,
-Bid / Ask Qty, Quote Age, Day %, Total Qty, Traded Value, and Intraday. It
-combines:
-
-- primitive bid, ask, daily change, quantity, and traded-value cells;
-- a clickable price component;
-- a stable Tick component or two alternating Up/Down component types;
-- spread, market-depth, quote-age, and sparkline components;
-- immutable row replacement with stable instrument IDs;
-- optional 100 ms quote-age invalidation for every visible Age cell; and
-- optional history-array replacement for sparklines.
-
-The feed control provides repeatable load profiles: Low 1k/s, Medium 5k/s,
-High 10k/s, Very high 25k/s, and Max 100k/s. High is the default; Max is a
-deliberate saturation test. Moving the rate slider switches the profile to
-Custom. Available universe sizes are 50, 100, 150, 250, 350, 500, 750, and
-1,000.
-
-The row workload selector separates four different behaviors:
-
-- **Stable universe** preserves source order and IDs.
-- **Continuously sort by Last** reorders keyed rows as prices move without
-  recreating their identity.
-- **Rotate 20% filtered rows** changes one excluded index bucket each second,
-  forcing row removal and reinsertion.
-- **Replace 10% of ticker IDs** changes one bucket's IDs and ticker labels each
-  second. Ten percent are replacements at any instant; transitions dispose the
-  previous bucket and create the next, crossing lifecycle boundaries for about
-  twenty percent of rows.
-
-These transformations run before the selected adapter so both versions
-receive the same arrays. They test sorting/filtering consequences and keyed
-reconciliation.
-
-The separate **TanStack core row model** selector exercises the adapters'
-sorting and filtering APIs:
-
-- **Sort Last descending** installs and executes the sorted row model.
-- **Filter Ticker** installs and executes the filtered row model with a
-  case-insensitive Ticker accessor.
-- **Filter + sort Last** composes both row models.
-
-The local v9 and v8 adapters each configure their own version's factories.
-This is intentionally independent of **Row workload**, so a run can
-measure core row-model work alone or combine it with upstream identity and
-ordering pressure.
-
-React `StrictMode` is deliberately omitted because its development-only mount
-replay would contaminate the component create/destroy counters. The table
-component is memoized so the 500 ms diagnostics publication does not by itself
-rerender every table cell. Data, quote-clock, selection, and renderer changes
-still drive the table normally.
-
-`useLifecycleCounter` increments the component-function counter during render,
-then uses passive `useEffect` for committed create/destroy lifetimes. A layout
-effect would not make these counters more accurate: it would synchronously add
-work to every mounted dynamic cell before paint and contaminate the timing this
-example is trying to observe. Function-call counters can include concurrent
-retries or abandoned render attempts, while effect create/destroy counters
-represent committed lifetimes with a short post-paint reporting delay. The
-table-scoped React Profiler is the committed-render timing reference.
-
-## Worker transport
-
-The Worker acts like an external WebSocket/SSE transport. It permits one batch
-in flight. React acknowledges a batch from `useLayoutEffect`, after the
-corresponding commit. While a commit is pending, the Worker coalesces newer
-events by instrument in a bounded map instead of growing an unbounded message
-queue.
-
-`batch events` therefore counts source events, while `row updates` counts the
-final row snapshots copied into a particular UI batch. A batch can contain
-thousands of events but at most one final update per instrument.
-
-The Worker removes quote generation and batching from the main thread. React
-rendering, TanStack row-model work, DOM reconciliation, layout, and paint still
-run on the main thread.
-
-## Metrics
-
-- **Throughput** is the source-event rate represented by acknowledged batches.
-- **RAF rate** is actual `requestAnimationFrame` callbacks divided by elapsed
-  wall time. It is not an FPS estimate derived from table renders.
-- **Table renders** is the rate of feed batches that reach a completed React
-  commit and are acknowledged.
-- **Average / P95 render** spans worker-message receipt through the layout
-  effect after commit. It excludes worker calculation and browser paint.
-- **Long frames** uses the browser Long Animation Frames API when available.
-- **Heap** uses Chromium's non-standard `performance.memory` when available.
-- **Created / destroyed** distinguishes expected type-swap churn from live
-  component retention.
-- **Cell renderer calls/s** counts executions of column `cell` functions. The
-  per-column breakdown identifies which callback was invoked.
-- **Component renders/s** counts executions of the dynamic React cell
-  component functions. The per-type breakdown identifies the exact component;
-  development Strict Mode and abandoned renders can legitimately produce
-  function calls without matching DOM mutations.
-- **DOM mutation records/s** comes from a `MutationObserver` attached to the
-  active `tbody`. It counts observer records, not changed elements or painted
-  pixels.
-- **React Profiler commits/s** and actual/base durations come directly from a
-  `<Profiler>` wrapped around only the active table adapter. Actual duration is
-  the work performed for that commit; base duration is React's estimate of the
-  subtree cost without memoization.
-- **Core row model calls/s** times `table.getRowModel()` around the actual rows
-  consumed by the render. It includes memo lookup overhead and, when inputs
-  change, sorting/filtering computation.
-- **Automated scroll pressure** drives the real table scroll container
-  vertically, horizontally, or both. It reports callback rate, distance, and
-  frames delayed beyond 34 ms.
-
-The app also writes browser User Timing entries that appear in a Chrome
-Performance recording:
-
-- `react-profiler-commit`
-- `market-update-to-layout-commit`
-- `tanstack-row-model`
-- `benchmark:*` marks for adapter, core-mode, and scroll changes
-
-Entries are periodically cleared from the live performance buffer to keep the
-benchmark instrumentation itself bounded. A DevTools recording still captures
-the marks and measures that occurred while recording.
-
-The heap line is diagnostic. Immutable updates continuously allocate short-lived
-arrays, row objects, and render objects, so raw heap can rise before garbage
-collection. Compare post-GC plateaus in the browser Memory profiler.
+## React Compiler
 
-The three counters are deliberately simple but do add instrumentation overhead.
-Use them to catch accidental full-table work and compare ratios. For final
-timings, corroborate them with a Chrome Performance recording and React
-DevTools Profiler. A realistic healthy run keeps source throughput near target,
-avoids a cell-render rate equal to every cell on every worker batch, and reaches
-a stable post-GC heap plateau.
+The Vite build enables React Compiler. The current adapter is compiled normally;
+the historical compatibility module and its `use no memo` boundary have been
+removed.
 
-## Is this a real financial grid?
+## Workloads
 
-The presentation and workload shape are realistic for a market-watch blotter,
-but the prices, venues, sizes, volume, and traded value are deterministic
-synthetic data. There is no order book, exchange calendar, corporate actions,
-network jitter, reconnect logic, entitlement processing, or real WebSocket
-decoder. That makes the lab reproducible, not production-representative.
+- Stable market snapshots with sorting and filtering handled by the table.
+- Core Table sorting and filtering controlled through table atoms.
+- Stable or alternating cell component types.
+- Vertical, horizontal, or combined automated scrolling.
+- Per-column renderer and per-component render invocation rates.
+- Per-instrument Intraday history sampling with a configurable 100–2,000 ms
+  worker interval.
 
-For higher confidence, replay a timestamped, sanitized capture through the same
-worker protocol. Preserve burstiness and symbol skew, then compare adapters
-using the same capture, production build, browser, viewport, and fixed
-measurement window.
+The sample rate controls synthetic quote generation inside the worker; it is not
+a browser event or `postMessage` rate. The publish interval separately controls
+the target message cadence. The worker coalesces repeated instruments in each
+message and posts independently of React render completion, like an external
+stream.
 
-## Repeatable comparison
+## Dependency resolution
 
-1. Use production builds in the same browser and on the same machine.
-2. Start at 250 instruments and 10k events/s.
-3. Keep stable Tick cells, quote ages, and sparklines enabled.
-4. Reset and warm up for 20–30 seconds.
-5. Record throughput, RAF rate, table renders/s, cell/component calls, DOM
-   mutations, P95, long frames, and post-GC heap over a fixed window.
-6. Repeat with the Angular and Solid standalone examples using identical
-   controls.
-7. Toggle Tick A/B swapping, quote ages, and sparklines separately to isolate
-   component churn, shared-clock invalidation, and array-input cost.
+The example pins `@tanstack/react-table` to the current repository version. The
+root workspace override resolves it to `packages/react-table` while preserving a
+release-like manifest.
 
-The 25k burst is useful for profiling coalescing and a large render, but a
-sustained target rate is the better test of steady-state behavior.
+## Verification
 
-For a scroll run, select 750 or 1,000 instruments and start with vertical
-pressure. This table is deliberately not virtualized: every row remains mounted,
-so the scroll test primarily exposes browser style/layout/paint responsiveness
-and main-thread contention. It is not a virtualization benchmark and should not
-be interpreted as one. Add a separately named virtualized adapter if that
-architecture needs comparison, since virtualization changes the amount of DOM
-and React work rather than merely optimizing the same path.
+```bash
+pnpm --dir examples/react/realtime-trading test:types
+pnpm --dir examples/react/realtime-trading lint
+pnpm --dir examples/react/realtime-trading build
+pnpm --dir examples/react/realtime-trading test:e2e
+```
diff --git a/examples/react/realtime-trading/package.json b/examples/react/realtime-trading/package.json
index 55a68bde1f..f91cafb828 100644
--- a/examples/react/realtime-trading/package.json
+++ b/examples/react/realtime-trading/package.json
@@ -14,8 +14,7 @@
   },
   "dependencies": {
     "@tanstack/react-store": "^0.11.0",
-    "@tanstack/react-table": "^9.0.0",
-    "@tanstack/react-table-v8": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+    "@tanstack/react-table": "9.1.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },
diff --git a/examples/react/realtime-trading/src/App.tsx b/examples/react/realtime-trading/src/App.tsx
index b1adde339d..2df39ff073 100644
--- a/examples/react/realtime-trading/src/App.tsx
+++ b/examples/react/realtime-trading/src/App.tsx
@@ -1,18 +1,16 @@
 import { Profiler } from 'react'
-import { useTradingBenchmarkController } from './core/use-trading-benchmark-controller'
+import { useMarketFeedController } from './feed/use-market-feed-controller'
+import { useTradingBenchmarkController } from './benchmark/use-trading-benchmark-controller'
 import { TradingShell } from './shell/TradingShell'
 import {
   TradingShellProvider,
   useTradingShellController,
-  useTradingShellState,
 } from './shell/trading-shell-context'
-import {
-  LocalTradingTable,
-  V8TradingTable,
-} from './trading-table'
+import { TradingTable } from './table/trading-table'
 
 export function App() {
-  const controller = useTradingBenchmarkController()
+  const feed = useMarketFeedController()
+  const controller = useTradingBenchmarkController(feed)
   return (
     <TradingShellProvider controller={controller}>
       <TradingShell>
@@ -24,18 +22,13 @@ export function App() {
 
 function TradingTableOutlet() {
   const controller = useTradingShellController()
-  const tableAdapter = useTradingShellState((state) => state.tableAdapter)
-  const ActiveTradingTable =
-    tableAdapter === 'local'
-      ? LocalTradingTable
-      : V8TradingTable
 
   return (
     <Profiler
-      id={`trading-table-${tableAdapter}`}
+      id="trading-table"
       onRender={controller.monitor.recordProfilerRender}
     >
-      <ActiveTradingTable key={tableAdapter} />
+      <TradingTable />
     </Profiler>
   )
 }
diff --git a/examples/react/realtime-trading/src/benchmark-profiles.ts b/examples/react/realtime-trading/src/benchmark-profiles.ts
deleted file mode 100644
index 848fc28880..0000000000
--- a/examples/react/realtime-trading/src/benchmark-profiles.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { MarketQuote } from './market-data'
-
-export type FeedLoadProfile =
-  'low' | 'medium' | 'high' | 'very-high' | 'max' | 'custom'
-
-export type RowWorkloadMode =
-  'stable' | 'price-sort' | 'rotating-filter' | 'identity-churn'
-
-export const feedLoadRates: Record<
-  Exclude<FeedLoadProfile, 'custom'>,
-  number
-> = {
-  low: 1_000,
-  medium: 5_000,
-  high: 10_000,
-  'very-high': 25_000,
-  max: 100_000,
-}
-
-export function deriveBenchmarkQuotes(
-  quotes: Array<MarketQuote>,
-  mode: RowWorkloadMode,
-  epoch: number,
-): Array<MarketQuote> {
-  if (mode === 'stable') {
-    return quotes
-  }
-
-  if (mode === 'price-sort') {
-    return [...quotes].sort(
-      (left, right) =>
-        right.price - left.price || left.symbol.localeCompare(right.symbol),
-    )
-  }
-
-  if (mode === 'rotating-filter') {
-    const excludedBucket = epoch % 5
-    return quotes.filter((_, index) => index % 5 !== excludedBucket)
-  }
-
-  const replacementBucket = epoch % 10
-  return quotes.map((quote, index) =>
-    index % 10 === replacementBucket
-      ? {
-          ...quote,
-          id: `${quote.id}-replacement-${epoch}`,
-          symbol: `${quote.symbol}R${epoch % 100}`,
-          company: `${quote.company} replacement`,
-        }
-      : quote,
-  )
-}
-
-export function rowWorkloadLabel(mode: RowWorkloadMode): string {
-  switch (mode) {
-    case 'price-sort':
-      return 'PRICE REORDER'
-    case 'rotating-filter':
-      return 'FILTER ROTATION'
-    case 'identity-churn':
-      return 'TICKER REPLACEMENT'
-    default:
-      return 'STABLE UNIVERSE'
-  }
-}
diff --git a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
index 329649bc27..225c946444 100644
--- a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -1,8 +1,9 @@
-import { quoteCellLifecycle, quoteRenderDiagnostics } from '../quote-cells'
-import { rowModelDiagnostics } from '../trading-table'
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells'
+import { rowModelDiagnostics } from '../table/trading-table'
 import type { ProfilerOnRenderCallback } from 'react'
-import type { MarketFeedCommand } from '../market-feed-protocol'
-import type { TableAdapter } from '../trading-table'
 
 export interface NamedInvocationRate {
   name: string
@@ -10,8 +11,12 @@ export interface NamedInvocationRate {
 }
 
 export interface FeedMetrics {
-  actualEventsPerSecond: number
-  totalEvents: number
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
   rafCallbacksPerSecond: number
   tableRendersPerSecond: number
   lastBatchSize: number
@@ -47,8 +52,12 @@ export interface FeedMetrics {
 export type ScrollStressMode = 'off' | 'vertical' | 'horizontal' | 'both'
 
 export const initialMetrics: FeedMetrics = {
-  actualEventsPerSecond: 0,
-  totalEvents: 0,
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
   rafCallbacksPerSecond: 0,
   tableRendersPerSecond: 0,
   lastBatchSize: 0,
@@ -116,11 +125,6 @@ export function markBenchmarkAction(
   }
 }
 
-interface PendingAck {
-  generation: number
-  sequence: number
-}
-
 interface ProfilerSample {
   actualDuration: number
   baseDuration: number
@@ -130,11 +134,14 @@ export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
     pendingRenderStartedAt: null as number | null,
-    pendingAck: null as PendingAck | null,
     renderSamples: [] as Array<number>,
     profilerSamples: [] as Array<ProfilerSample>,
-    totalEvents: 0,
-    eventsInSample: 0,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
@@ -179,43 +186,40 @@ export class BenchmarkMonitor {
     this.#runtime.pendingRenderStartedAt ??= performance.now()
   }
 
-  setPendingAck(ack: PendingAck | null): void {
-    this.#runtime.pendingAck = ack
-  }
-
-  recordCompletedRender(
-    adapter: TableAdapter,
-    postCommand: (command: MarketFeedCommand) => void,
-  ): void {
+  recordCompletedRender(): void {
     const runtime = this.#runtime
     if (runtime.pendingRenderStartedAt !== null) {
       const renderEndedAt = performance.now()
-      runtime.renderSamples.push(
-        renderEndedAt - runtime.pendingRenderStartedAt,
-      )
+      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
       recordMeasure(
         'market-update-to-layout-commit',
         runtime.pendingRenderStartedAt,
         renderEndedAt,
-        { adapter },
+        {},
       )
       runtime.pendingRenderStartedAt = null
-    }
-
-    if (runtime.pendingAck) {
       runtime.tableRendersInSample++
-      postCommand({ type: 'ack', ...runtime.pendingAck })
-      runtime.pendingAck = null
     }
   }
 
-  recordBatch(eventCount: number, updateCount: number): void {
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
     const runtime = this.#runtime
-    runtime.lastBatchSize = eventCount
+    runtime.lastBatchSize = tickCount
     runtime.lastUpdateCount = updateCount
-    runtime.eventsInSample += eventCount
-    runtime.totalEvents += eventCount
-    runtime.workerMessages++
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
   recordAnimationFrame(): void {
@@ -266,8 +270,7 @@ export class BenchmarkMonitor {
     const rowModelCalls =
       rowModelDiagnostics.calls - runtime.previousRowModelCalls
     const rowModelDuration =
-      rowModelDiagnostics.totalDurationMs -
-      runtime.previousRowModelDuration
+      rowModelDiagnostics.totalDurationMs - runtime.previousRowModelDuration
     const cellRendererCalls =
       quoteRenderDiagnostics.cellRendererCalls -
       runtime.previousCellRendererCalls
@@ -298,11 +301,19 @@ export class BenchmarkMonitor {
       Math.ceil(sortedProfilerSamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
-      actualEventsPerSecond:
+      actualTicksPerSecond:
         sampleDuration === 0
           ? 0
-          : (runtime.eventsInSample / sampleDuration) * 1_000,
-      totalEvents: runtime.totalEvents,
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
         (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
       tableRendersPerSecond:
@@ -319,8 +330,7 @@ export class BenchmarkMonitor {
       componentsDestroyed: quoteCellLifecycle.destroyed,
       workerMessages: runtime.workerMessages,
       lastUpdateCount: runtime.lastUpdateCount,
-      cellRendererCallsPerSecond:
-        (cellRendererCalls / sampleDuration) * 1_000,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
       componentRenderCallsPerSecond:
         (componentRenderCalls / sampleDuration) * 1_000,
       cellRendererRates,
@@ -336,8 +346,7 @@ export class BenchmarkMonitor {
               (sum, sample) => sum + sample.actualDuration,
               0,
             ) / profilerSamples.length,
-      profilerP95ActualMs:
-        sortedProfilerSamples[profilerP95Index] ?? 0,
+      profilerP95ActualMs: sortedProfilerSamples[profilerP95Index] ?? 0,
       profilerAverageBaseMs:
         profilerSamples.length === 0
           ? 0
@@ -358,8 +367,7 @@ export class BenchmarkMonitor {
     }
 
     runtime.sampleStartedAt = now
-    runtime.previousCellRendererCalls =
-      quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
     runtime.previousComponentRenderCalls =
       quoteRenderDiagnostics.componentRenderCalls
     runtime.previousCellRendererCallsByName = {
@@ -375,7 +383,11 @@ export class BenchmarkMonitor {
     runtime.scrollCallbacksInSample = 0
     runtime.scrollDistanceInSample = 0
     runtime.scrollJankFramesInSample = 0
-    runtime.eventsInSample = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
     runtime.renderSamples = []
     runtime.rafCallbacksInSample = 0
     runtime.tableRendersInSample = 0
@@ -386,11 +398,14 @@ export class BenchmarkMonitor {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
     runtime.pendingRenderStartedAt = null
-    runtime.pendingAck = null
     runtime.renderSamples = []
     runtime.profilerSamples = []
-    runtime.totalEvents = 0
-    runtime.eventsInSample = 0
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
@@ -398,8 +413,7 @@ export class BenchmarkMonitor {
     runtime.tableRendersInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
-    runtime.previousCellRendererCalls =
-      quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
     runtime.previousComponentRenderCalls =
       quoteRenderDiagnostics.componentRenderCalls
     runtime.previousCellRendererCallsByName = {
diff --git a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..bb74b113e2
--- /dev/null
+++ b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,255 @@
+import { batch, createAtom, createStore } from '@tanstack/react-store'
+import {
+  TRADING_COLUMN_COUNT,
+  rowModelDiagnostics,
+} from '../table/trading-table'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+  markBenchmarkAction,
+} from './benchmark-monitor'
+import type { FeedMetrics, ScrollStressMode } from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { MarketQuote } from '../feed/market-data'
+import type {
+  CoreRowModelMode,
+  CoreTableState,
+  RendererMode,
+} from '../table/trading-table'
+
+export interface TradingBenchmarkState {
+  coreRowModelMode: CoreRowModelMode
+  coreFilterValue: string
+  scrollStressMode: ScrollStressMode
+  rendererMode: RendererMode
+  selectedSymbol: string | null
+  metrics: FeedMetrics
+  displayQuotes: Array<MarketQuote>
+  selectedQuote: MarketQuote | null
+  mountedCells: number
+  liveComponents: number
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  resetViewState: () => void
+  setCoreRowModelMode: (mode: CoreRowModelMode) => void
+  setCoreFilterValue: (value: string) => void
+  setScrollStressMode: (mode: ScrollStressMode) => void
+  setRendererMode: (mode: RendererMode) => void
+  selectSymbol: (symbol: string | null) => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  coreRowModelMode: 'none',
+  coreFilterValue: 'ALP',
+  scrollStressMode: 'off',
+  rendererMode: 'stable',
+  selectedSymbol: null,
+  metrics: initialMetrics,
+  displayQuotes: [],
+  selectedQuote: null,
+  mountedCells: 0,
+  liveComponents: 0,
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly tableAtoms = {
+    sorting: createAtom<CoreTableState['sorting']>([]),
+    columnFilters: createAtom<CoreTableState['columnFilters']>([]),
+  }
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly feed: MarketFeedController
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    feedSubscription: null as { unsubscribe: () => void } | null,
+    stopObservingFeed: null as (() => void) | null,
+    lastFeedQuotes: null as Array<MarketQuote> | null,
+  }
+
+  constructor(feed: MarketFeedController) {
+    this.feed = feed
+    this.actions = {
+      resetViewState: () => {
+        batch(() => {
+          this.#setSelectionState({ selectedSymbol: null })
+          this.renderAtoms.selectedSymbol.set(null)
+        })
+      },
+      setCoreRowModelMode: (mode) => {
+        markBenchmarkAction('core-row-model-change', { mode })
+        batch(() => {
+          this.#setSelectionState({
+            coreRowModelMode: mode,
+            selectedSymbol: null,
+          })
+          this.#syncCoreTableAtoms(mode, this.store.get().coreFilterValue)
+          this.renderAtoms.selectedSymbol.set(null)
+        })
+      },
+      setCoreFilterValue: (value) => {
+        batch(() => {
+          this.#patch({ coreFilterValue: value })
+          this.#syncCoreTableAtoms(this.store.get().coreRowModelMode, value)
+        })
+      },
+      setScrollStressMode: (mode) => {
+        this.#patch({ scrollStressMode: mode })
+      },
+      setRendererMode: (mode) => {
+        batch(() => {
+          this.#patch({ rendererMode: mode })
+          this.renderAtoms.rendererMode.set(mode)
+        })
+      },
+      selectSymbol: (symbol) => {
+        batch(() => {
+          this.#setSelectionState({ selectedSymbol: symbol })
+          this.renderAtoms.selectedSymbol.set(symbol)
+        })
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.store.setState((state) => ({
+            ...state,
+            selectedSymbol: null,
+            selectedQuote: null,
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.feed.actions.reset()
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    this.#runtime.stopObservingFeed = this.feed.observe({
+      messageReceived: () => this.monitor.recordWorkerMessage(),
+      mutationStarted: () => this.monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+      renderCommitted: () => this.monitor.recordCompletedRender(),
+    })
+    this.#runtime.feedSubscription = this.feed.store.subscribe((state) => {
+      if (state.quotes === this.#runtime.lastFeedQuotes) return
+
+      this.#runtime.lastFeedQuotes = state.quotes
+      this.#setQuotes(state.quotes)
+    })
+    const initialQuotes = this.feed.store.get().quotes
+    this.#runtime.lastFeedQuotes = initialQuotes
+    this.#setQuotes(initialQuotes)
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.feedSubscription?.unsubscribe()
+    this.#runtime.stopObservingFeed?.()
+    this.#runtime.longAnimationFrameObserver = null
+    this.#runtime.feedSubscription = null
+    this.#runtime.stopObservingFeed = null
+    this.#runtime.lastFeedQuotes = null
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    if (this.monitor.shouldPublish(now)) {
+      this.#publishMetrics(this.monitor.publish(now))
+    }
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #setQuotes(quotes: Array<MarketQuote>): void {
+    this.store.setState((state) => {
+      return {
+        ...state,
+        displayQuotes: quotes,
+        selectedQuote: findSelectedQuote(quotes, state.selectedSymbol),
+      }
+    })
+  }
+
+  #setSelectionState(
+    patch: Partial<
+      Pick<TradingBenchmarkState, 'coreRowModelMode' | 'selectedSymbol'>
+    >,
+  ): void {
+    this.store.setState((state) => {
+      const nextState = { ...state, ...patch }
+      return {
+        ...nextState,
+        selectedQuote: findSelectedQuote(
+          nextState.displayQuotes,
+          nextState.selectedSymbol,
+        ),
+      }
+    })
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    const visibleRows = rowModelDiagnostics.hasMeasurement
+      ? rowModelDiagnostics.lastRowCount
+      : this.store.get().displayQuotes.length
+    this.#patch({
+      metrics,
+      mountedCells: visibleRows * TRADING_COLUMN_COUNT,
+      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+
+  #syncCoreTableAtoms(mode: CoreRowModelMode, filterValue: string): void {
+    const sorts = mode === 'sort' || mode === 'sort-filter'
+    const trimmedFilter = filterValue.trim()
+    const filters =
+      (mode === 'filter' || mode === 'sort-filter') && trimmedFilter.length > 0
+    this.tableAtoms.sorting.set(() =>
+      sorts ? [{ id: 'price', desc: true }] : [],
+    )
+    this.tableAtoms.columnFilters.set(() =>
+      filters ? [{ id: 'symbol', value: trimmedFilter }] : [],
+    )
+  }
+}
+
+function findSelectedQuote(
+  quotes: Array<MarketQuote>,
+  selectedSymbol: string | null,
+): MarketQuote | null {
+  return quotes.find((quote) => quote.symbol === selectedSymbol) ?? null
+}
diff --git a/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
index b0410938ed..7af1d368cf 100644
--- a/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
+++ b/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -1,22 +1,16 @@
-import { useEffect, useLayoutEffect } from 'react'
+import { useEffect } from 'react'
 import { markBenchmarkAction } from './benchmark-monitor'
 import type { ScrollStressMode } from './benchmark-monitor'
-import type { TradingBenchmarkController } from '../core/trading-benchmark-controller'
-import type { TableAdapter } from '../trading-table'
+import type { TradingBenchmarkController } from './trading-benchmark-controller'
 
 export function useTableBenchmark(
   controller: TradingBenchmarkController,
-  tableAdapter: TableAdapter,
   scrollStressMode: ScrollStressMode,
 ): void {
   'use no memo'
-  useLayoutEffect(() => {
-    controller.recordCompletedRender()
-  })
-
   useEffect(() => {
     const tableBody = document.querySelector(
-      '.market-panel [data-table-adapter] tbody',
+      '.market-panel [data-trading-table] tbody',
     )
     if (!tableBody) {
       return
@@ -33,11 +27,11 @@ export function useTableBenchmark(
       subtree: true,
     })
     return () => observer.disconnect()
-  }, [controller, tableAdapter])
+  }, [controller])
 
   useEffect(() => {
     const scrollContainer = document.querySelector<HTMLElement>(
-      '.market-panel [data-table-adapter]',
+      '.market-panel [data-trading-table]',
     )
     if (!scrollContainer) {
       return
@@ -51,7 +45,6 @@ export function useTableBenchmark(
 
     markBenchmarkAction('scroll-start', {
       mode: scrollStressMode,
-      adapter: tableAdapter,
     })
     const runtime = {
       animationFrameId: 0,
@@ -66,10 +59,7 @@ export function useTableBenchmark(
       const previousTop = scrollContainer.scrollTop
       const previousLeft = scrollContainer.scrollLeft
 
-      if (
-        scrollStressMode === 'vertical' ||
-        scrollStressMode === 'both'
-      ) {
+      if (scrollStressMode === 'vertical' || scrollStressMode === 'both') {
         const maxTop =
           scrollContainer.scrollHeight - scrollContainer.clientHeight
         const candidateTop =
@@ -84,10 +74,7 @@ export function useTableBenchmark(
         }
       }
 
-      if (
-        scrollStressMode === 'horizontal' ||
-        scrollStressMode === 'both'
-      ) {
+      if (scrollStressMode === 'horizontal' || scrollStressMode === 'both') {
         const maxLeft =
           scrollContainer.scrollWidth - scrollContainer.clientWidth
         const candidateLeft =
@@ -111,5 +98,5 @@ export function useTableBenchmark(
 
     runtime.animationFrameId = requestAnimationFrame(scrollFrame)
     return () => cancelAnimationFrame(runtime.animationFrameId)
-  }, [controller, scrollStressMode, tableAdapter])
+  }, [controller, scrollStressMode])
 }
diff --git a/examples/react/realtime-trading/src/core/use-trading-benchmark-controller.ts b/examples/react/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
similarity index 65%
rename from examples/react/realtime-trading/src/core/use-trading-benchmark-controller.ts
rename to examples/react/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
index 08cb3179a6..a7ee92d79f 100644
--- a/examples/react/realtime-trading/src/core/use-trading-benchmark-controller.ts
+++ b/examples/react/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
@@ -1,10 +1,11 @@
 import { useEffect, useRef } from 'react'
 import { TradingBenchmarkController } from './trading-benchmark-controller'
+import type { MarketFeedController } from '../feed/market-feed-controller'
 
-export function useTradingBenchmarkController() {
+export function useTradingBenchmarkController(feed: MarketFeedController) {
   'use no memo'
   const controllerRef = useRef<TradingBenchmarkController | null>(null)
-  controllerRef.current ??= new TradingBenchmarkController()
+  controllerRef.current ??= new TradingBenchmarkController(feed)
   const controller = controllerRef.current
 
   useEffect(() => controller.start(), [controller])
diff --git a/examples/react/realtime-trading/src/core/trading-benchmark-controller.ts b/examples/react/realtime-trading/src/core/trading-benchmark-controller.ts
deleted file mode 100644
index b853af88c3..0000000000
--- a/examples/react/realtime-trading/src/core/trading-benchmark-controller.ts
+++ /dev/null
@@ -1,532 +0,0 @@
-import { batch, createAtom, createStore } from '@tanstack/react-store'
-import {
-  BenchmarkMonitor,
-  initialMetrics,
-  longAnimationFramesSupported,
-  markBenchmarkAction,
-} from '../benchmark/benchmark-monitor'
-import {
-  deriveBenchmarkQuotes,
-  feedLoadRates,
-  rowWorkloadLabel,
-} from '../benchmark-profiles'
-import { applyMarketUpdates, hydrateMarketQuotes } from '../market-data'
-import { TRADING_COLUMN_COUNT, rowModelDiagnostics } from '../trading-table'
-import type {
-  FeedMetrics,
-  ScrollStressMode,
-} from '../benchmark/benchmark-monitor'
-import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
-import type {
-  MarketFeedCommand,
-  MarketFeedEvent,
-} from '../market-feed-protocol'
-import type { MarketQuote } from '../market-data'
-import type {
-  CoreRowModelMode,
-  CoreTableState,
-  RendererMode,
-  TableAdapter,
-} from '../trading-table'
-
-export interface TradingBenchmarkState {
-  workerReady: boolean
-  running: boolean
-  tableAdapter: TableAdapter
-  instrumentCount: number
-  feedLoadProfile: FeedLoadProfile
-  targetEventsPerSecond: number
-  rowWorkloadMode: RowWorkloadMode
-  rowWorkloadEpoch: number
-  coreRowModelMode: CoreRowModelMode
-  coreFilterValue: string
-  scrollStressMode: ScrollStressMode
-  rendererMode: RendererMode
-  updateSparklines: boolean
-  updateQuoteAges: boolean
-  quoteClock: number
-  quotes: Array<MarketQuote>
-  selectedSymbol: string | null
-  metrics: FeedMetrics
-  displayQuotes: Array<MarketQuote>
-  selectedQuote: MarketQuote | null
-  mountedCells: number
-  liveComponents: number
-  adapterLabel: string
-  workloadLabel: string
-  longAnimationFramesSupported: boolean
-}
-
-export interface TradingBenchmarkActions {
-  toggleFeed: () => void
-  setInstrumentCount: (count: number) => void
-  setFeedLoadProfile: (profile: FeedLoadProfile) => void
-  setTargetEventsPerSecond: (rate: number) => void
-  setRowWorkloadMode: (mode: RowWorkloadMode) => void
-  setTableAdapter: (adapter: TableAdapter) => void
-  setCoreRowModelMode: (mode: CoreRowModelMode) => void
-  setCoreFilterValue: (value: string) => void
-  setScrollStressMode: (mode: ScrollStressMode) => void
-  setRendererMode: (mode: RendererMode) => void
-  setUpdateQuoteAges: (enabled: boolean) => void
-  setUpdateSparklines: (enabled: boolean) => void
-  selectSymbol: (symbol: string | null) => void
-  runBurst: () => void
-  resetMarket: () => void
-}
-
-const initialState: TradingBenchmarkState = {
-  workerReady: false,
-  running: true,
-  tableAdapter: 'local',
-  instrumentCount: 250,
-  feedLoadProfile: 'high',
-  targetEventsPerSecond: 10_000,
-  rowWorkloadMode: 'stable',
-  rowWorkloadEpoch: 0,
-  coreRowModelMode: 'none',
-  coreFilterValue: 'ALP',
-  scrollStressMode: 'off',
-  rendererMode: 'stable',
-  updateSparklines: true,
-  updateQuoteAges: true,
-  quoteClock: Date.now(),
-  quotes: [],
-  selectedSymbol: null,
-  metrics: initialMetrics,
-  displayQuotes: [],
-  selectedQuote: null,
-  mountedCells: 0,
-  liveComponents: 0,
-  adapterLabel: 'LOCAL V9',
-  workloadLabel: rowWorkloadLabel('stable'),
-  longAnimationFramesSupported,
-}
-
-export class TradingBenchmarkController {
-  readonly store = createStore<TradingBenchmarkState>(initialState)
-  readonly tableAtoms = {
-    sorting: createAtom<CoreTableState['sorting']>([]),
-    columnFilters: createAtom<CoreTableState['columnFilters']>([]),
-  }
-  readonly renderAtoms = {
-    selectedSymbol: createAtom<string | null>(null),
-    rendererMode: createAtom<RendererMode>('stable'),
-    quoteAge: createAtom({
-      enabled: true,
-      clock: initialState.quoteClock,
-    }),
-  }
-  readonly monitor = new BenchmarkMonitor()
-  readonly actions: TradingBenchmarkActions
-
-  readonly #runtime = {
-    worker: null as Worker | null,
-    animationFrameId: 0,
-    feedGeneration: 0,
-    lastAgeClockAt: performance.now(),
-    lastRowWorkloadAt: performance.now(),
-    longAnimationFrameObserver: null as PerformanceObserver | null,
-    resetWaitingForCommit: false,
-    resetSnapshotReady: false,
-  }
-
-  constructor() {
-    this.actions = {
-      toggleFeed: () => {
-        const nextRunning = !this.store.get().running
-        this.#patch({ running: nextRunning })
-        this.#postToWorker({ type: 'configure', running: nextRunning })
-      },
-      setInstrumentCount: (count) => {
-        batch(() => {
-          this.#patch({ instrumentCount: count })
-          this.#setWorkloadState({ rowWorkloadEpoch: 0 })
-          this.#resetWorkerMarket(count)
-        })
-      },
-      setFeedLoadProfile: (profile) => {
-        if (profile === 'custom') {
-          this.#patch({ feedLoadProfile: profile })
-          return
-        }
-        const rate = feedLoadRates[profile]
-        this.#patch({
-          feedLoadProfile: profile,
-          targetEventsPerSecond: rate,
-        })
-        this.#postToWorker({
-          type: 'configure',
-          targetEventsPerSecond: rate,
-        })
-      },
-      setTargetEventsPerSecond: (rate) => {
-        this.#patch({
-          feedLoadProfile: 'custom',
-          targetEventsPerSecond: rate,
-        })
-        this.#postToWorker({
-          type: 'configure',
-          targetEventsPerSecond: rate,
-        })
-      },
-      setRowWorkloadMode: (mode) => {
-        this.#runtime.lastRowWorkloadAt = performance.now()
-        batch(() => {
-          this.#setWorkloadState({
-            rowWorkloadMode: mode,
-            rowWorkloadEpoch: 0,
-            selectedSymbol: null,
-          })
-          this.renderAtoms.selectedSymbol.set(null)
-        })
-      },
-      setTableAdapter: (adapter) => {
-        markBenchmarkAction('adapter-change', { adapter })
-        this.#patch({
-          tableAdapter: adapter,
-          adapterLabel: adapterLabel(adapter),
-        })
-      },
-      setCoreRowModelMode: (mode) => {
-        markBenchmarkAction('core-row-model-change', { mode })
-        batch(() => {
-          this.#setSelectionState({
-            coreRowModelMode: mode,
-            selectedSymbol: null,
-          })
-          this.#syncCoreTableAtoms(mode, this.store.get().coreFilterValue)
-          this.renderAtoms.selectedSymbol.set(null)
-        })
-      },
-      setCoreFilterValue: (value) => {
-        batch(() => {
-          this.#patch({ coreFilterValue: value })
-          this.#syncCoreTableAtoms(
-            this.store.get().coreRowModelMode,
-            value,
-          )
-        })
-      },
-      setScrollStressMode: (mode) => {
-        this.#patch({ scrollStressMode: mode })
-      },
-      setRendererMode: (mode) => {
-        batch(() => {
-          this.#patch({ rendererMode: mode })
-          this.renderAtoms.rendererMode.set(mode)
-        })
-      },
-      setUpdateQuoteAges: (enabled) => {
-        batch(() => {
-          this.#patch({ updateQuoteAges: enabled })
-          this.renderAtoms.quoteAge.set((current) => ({
-            ...current,
-            enabled,
-          }))
-        })
-      },
-      setUpdateSparklines: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
-        this.#postToWorker({
-          type: 'configure',
-          updateSparklines: enabled,
-        })
-      },
-      selectSymbol: (symbol) => {
-        batch(() => {
-          this.#setSelectionState({ selectedSymbol: symbol })
-          this.renderAtoms.selectedSymbol.set(symbol)
-        })
-      },
-      runBurst: () => {
-        this.#postToWorker({ type: 'burst', eventCount: 25_000 })
-      },
-      resetMarket: () => {
-        batch(() => {
-          this.monitor.reset()
-          this.#runtime.lastRowWorkloadAt = performance.now()
-          this.store.setState((state) => ({
-            ...state,
-            selectedSymbol: null,
-            selectedQuote: null,
-            rowWorkloadEpoch: 0,
-            quoteClock: Date.now(),
-            metrics: { ...initialMetrics },
-            mountedCells: 0,
-            liveComponents: 0,
-          }))
-          this.renderAtoms.selectedSymbol.set(null)
-          this.#resetWorkerMarket(this.store.get().instrumentCount)
-        })
-      },
-    }
-  }
-
-  start(): () => void {
-    const worker = new Worker(
-      new URL('../market-feed.worker.ts', import.meta.url),
-      { type: 'module' },
-    )
-    const longAnimationFrameObserver = longAnimationFramesSupported
-      ? new PerformanceObserver((entries) => {
-          for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
-          }
-        })
-      : null
-
-    this.#runtime.worker = worker
-    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
-    worker.addEventListener('message', this.#handleWorkerMessage)
-    worker.addEventListener('error', this.#handleWorkerError)
-    longAnimationFrameObserver?.observe({
-      type: 'long-animation-frame',
-      buffered: true,
-    })
-    worker.postMessage({
-      type: 'initialize',
-      rowCount: initialState.instrumentCount,
-      seed: 292,
-      running: initialState.running,
-      targetEventsPerSecond: initialState.targetEventsPerSecond,
-      updateSparklines: initialState.updateSparklines,
-    } satisfies MarketFeedCommand)
-    this.#runtime.animationFrameId = requestAnimationFrame(this.#feedFrame)
-
-    return () => this.stop()
-  }
-
-  stop(): void {
-    cancelAnimationFrame(this.#runtime.animationFrameId)
-    this.#runtime.longAnimationFrameObserver?.disconnect()
-    this.#runtime.worker?.removeEventListener(
-      'message',
-      this.#handleWorkerMessage,
-    )
-    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
-    this.#runtime.worker?.terminate()
-    this.#runtime.worker = null
-    this.#runtime.longAnimationFrameObserver = null
-  }
-
-  recordCompletedRender(): void {
-    this.monitor.recordCompletedRender(
-      this.store.get().tableAdapter,
-      this.#postToWorker,
-    )
-    if (
-      this.#runtime.resetWaitingForCommit &&
-      this.#runtime.resetSnapshotReady
-    ) {
-      this.#runtime.resetWaitingForCommit = false
-      this.#runtime.resetSnapshotReady = false
-      this.#postToWorker({
-        type: 'configure',
-        running: this.store.get().running,
-      })
-    }
-  }
-
-  readonly #postToWorker = (command: MarketFeedCommand): void => {
-    this.#runtime.worker?.postMessage(command)
-  }
-
-  readonly #handleWorkerMessage = ({
-    data,
-  }: MessageEvent<MarketFeedEvent>): void => {
-    if (data.type === 'ready') {
-      this.#runtime.feedGeneration = data.generation
-      if (this.#runtime.resetWaitingForCommit) {
-        this.#runtime.resetSnapshotReady = true
-      }
-      this.monitor.setPendingAck(null)
-      this.monitor.markRenderPending()
-      batch(() => {
-        this.#setQuotes(hydrateMarketQuotes(data.quotes))
-        this.#patch({ workerReady: true })
-      })
-      return
-    }
-
-    if (data.generation !== this.#runtime.feedGeneration) {
-      this.#postToWorker({
-        type: 'ack',
-        generation: data.generation,
-        sequence: data.sequence,
-      })
-      return
-    }
-
-    this.monitor.markRenderPending()
-    this.#setQuotes(applyMarketUpdates(this.store.get().quotes, data.updates))
-    this.monitor.recordBatch(data.eventCount, data.updates.length)
-    this.monitor.setPendingAck({
-      generation: data.generation,
-      sequence: data.sequence,
-    })
-  }
-
-  readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
-    console.error('Market feed worker failed', error)
-  }
-
-  readonly #feedFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
-    const state = this.store.get()
-    batch(() => {
-      if (
-        state.updateQuoteAges &&
-        now - this.#runtime.lastAgeClockAt >= 100
-      ) {
-        this.#runtime.lastAgeClockAt = now
-        const clock = Date.now()
-        this.#patch({ quoteClock: clock })
-        this.renderAtoms.quoteAge.set((current) => ({
-          ...current,
-          clock,
-        }))
-      }
-
-      if (
-        state.running &&
-        (state.rowWorkloadMode === 'rotating-filter' ||
-          state.rowWorkloadMode === 'identity-churn') &&
-        now - this.#runtime.lastRowWorkloadAt >= 1_000
-      ) {
-        this.monitor.markRenderPending()
-        this.#runtime.lastRowWorkloadAt = now
-        this.#setWorkloadState({
-          rowWorkloadEpoch: state.rowWorkloadEpoch + 1,
-        })
-      }
-
-      if (this.monitor.shouldPublish(now)) {
-        this.#publishMetrics(this.monitor.publish(now))
-      }
-    })
-    this.#runtime.animationFrameId = requestAnimationFrame(this.#feedFrame)
-  }
-
-  #patch(patch: Partial<TradingBenchmarkState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
-  #setQuotes(quotes: Array<MarketQuote>): void {
-    this.store.setState((state) => {
-      const displayQuotes = deriveBenchmarkQuotes(
-        quotes,
-        state.rowWorkloadMode,
-        state.rowWorkloadEpoch,
-      )
-      return {
-        ...state,
-        quotes,
-        displayQuotes,
-        selectedQuote: findSelectedQuote(
-          displayQuotes,
-          state.selectedSymbol,
-        ),
-      }
-    })
-  }
-
-  #setWorkloadState(
-    patch: Partial<
-      Pick<
-        TradingBenchmarkState,
-        'rowWorkloadMode' | 'rowWorkloadEpoch' | 'selectedSymbol'
-      >
-    >,
-  ): void {
-    this.store.setState((state) => {
-      const nextState = { ...state, ...patch }
-      const displayQuotes = deriveBenchmarkQuotes(
-        state.quotes,
-        nextState.rowWorkloadMode,
-        nextState.rowWorkloadEpoch,
-      )
-      return {
-        ...nextState,
-        displayQuotes,
-        selectedQuote: findSelectedQuote(
-          displayQuotes,
-          nextState.selectedSymbol,
-        ),
-        workloadLabel: rowWorkloadLabel(nextState.rowWorkloadMode),
-      }
-    })
-  }
-
-  #setSelectionState(
-    patch: Partial<
-      Pick<
-        TradingBenchmarkState,
-        'coreRowModelMode' | 'selectedSymbol'
-      >
-    >,
-  ): void {
-    this.store.setState((state) => {
-      const nextState = { ...state, ...patch }
-      return {
-        ...nextState,
-        selectedQuote: findSelectedQuote(
-          nextState.displayQuotes,
-          nextState.selectedSymbol,
-        ),
-      }
-    })
-  }
-
-  #publishMetrics(metrics: FeedMetrics): void {
-    const visibleRows = rowModelDiagnostics.hasMeasurement
-      ? rowModelDiagnostics.lastRowCount
-      : this.store.get().displayQuotes.length
-    this.#patch({
-      metrics,
-      mountedCells: visibleRows * TRADING_COLUMN_COUNT,
-      liveComponents:
-        metrics.componentsCreated - metrics.componentsDestroyed,
-    })
-  }
-
-  #syncCoreTableAtoms(
-    mode: CoreRowModelMode,
-    filterValue: string,
-  ): void {
-    const sorts = mode === 'sort' || mode === 'sort-filter'
-    const trimmedFilter = filterValue.trim()
-    const filters =
-      (mode === 'filter' || mode === 'sort-filter') &&
-      trimmedFilter.length > 0
-    this.tableAtoms.sorting.set(() =>
-      sorts ? [{ id: 'price', desc: true }] : [],
-    )
-    this.tableAtoms.columnFilters.set(() =>
-      filters ? [{ id: 'symbol', value: trimmedFilter }] : [],
-    )
-  }
-
-  #resetWorkerMarket(rowCount: number): void {
-    this.#patch({ workerReady: false })
-    this.monitor.setPendingAck(null)
-    this.#runtime.resetWaitingForCommit = true
-    this.#runtime.resetSnapshotReady = false
-    this.#postToWorker({ type: 'configure', running: false })
-    this.#postToWorker({ type: 'reset', rowCount, seed: 42 + rowCount })
-  }
-}
-
-function findSelectedQuote(
-  quotes: Array<MarketQuote>,
-  selectedSymbol: string | null,
-): MarketQuote | null {
-  return (
-    quotes.find((quote) => quote.symbol === selectedSymbol) ?? null
-  )
-}
-
-function adapterLabel(adapter: TableAdapter): string {
-  return adapter === 'local' ? 'LOCAL V9' : 'V8.21.3'
-}
diff --git a/examples/react/realtime-trading/src/core/use-trading-table-runtime.ts b/examples/react/realtime-trading/src/core/use-trading-table-runtime.ts
deleted file mode 100644
index ece6b2bf55..0000000000
--- a/examples/react/realtime-trading/src/core/use-trading-table-runtime.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { shallow } from '@tanstack/react-store'
-import { useTableBenchmark } from '../benchmark/use-table-benchmark'
-import {
-  useTradingShellController,
-  useTradingShellState,
-} from '../shell/trading-shell-context'
-
-export function useV9TradingTableRuntime(adapter: 'local') {
-  const controller = useTradingShellController()
-  const quotes = useTradingShellState((state) => state.displayQuotes)
-  const scrollStressMode = useTradingShellState(
-    (state) => state.scrollStressMode,
-  )
-
-  useTableBenchmark(controller, adapter, scrollStressMode)
-
-  return {
-    quotes,
-    tableAtoms: controller.tableAtoms,
-  }
-}
-
-export function useV8TradingTableRuntime() {
-  const controller = useTradingShellController()
-  const state = useTradingShellState(
-    (storeState) => ({
-      quotes: storeState.displayQuotes,
-      coreRowModelMode: storeState.coreRowModelMode,
-      coreFilterValue: storeState.coreFilterValue,
-    }),
-    { compare: shallow },
-  )
-  const scrollStressMode = useTradingShellState(
-    (storeState) => storeState.scrollStressMode,
-  )
-
-  useTableBenchmark(controller, 'v8', scrollStressMode)
-
-  return state
-}
diff --git a/examples/react/realtime-trading/src/feed/feed-load-profiles.ts b/examples/react/realtime-trading/src/feed/feed-load-profiles.ts
new file mode 100644
index 0000000000..417177ff0f
--- /dev/null
+++ b/examples/react/realtime-trading/src/feed/feed-load-profiles.ts
@@ -0,0 +1,18 @@
+export type FeedLoadProfile =
+  | 'low'
+  | 'medium'
+  | 'high'
+  | 'very-high'
+  | 'max'
+  | 'custom'
+
+export const feedLoadRates: Record<
+  Exclude<FeedLoadProfile, 'custom'>,
+  number
+> = {
+  low: 1_000,
+  medium: 5_000,
+  high: 10_000,
+  'very-high': 25_000,
+  max: 100_000,
+}
diff --git a/examples/react/realtime-trading/src/market-data.ts b/examples/react/realtime-trading/src/feed/market-data.ts
similarity index 95%
rename from examples/react/realtime-trading/src/market-data.ts
rename to examples/react/realtime-trading/src/feed/market-data.ts
index 02eefa28c3..6231865d3f 100644
--- a/examples/react/realtime-trading/src/market-data.ts
+++ b/examples/react/realtime-trading/src/feed/market-data.ts
@@ -1,7 +1,7 @@
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
-} from './market-feed-protocol'
+} from './worker/market-feed-protocol'
 
 export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
   history: ReadonlyArray<number>
diff --git a/examples/react/realtime-trading/src/feed/market-feed-controller.ts b/examples/react/realtime-trading/src/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..fdb8ea5923
--- /dev/null
+++ b/examples/react/realtime-trading/src/feed/market-feed-controller.ts
@@ -0,0 +1,240 @@
+import { batch, createStore } from '@tanstack/react-store'
+import { feedLoadRates } from './feed-load-profiles'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type { FeedLoadProfile } from './feed-load-profiles'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedState {
+  workerReady: boolean
+  running: boolean
+  instrumentCount: number
+  feedLoadProfile: FeedLoadProfile
+  targetTicksPerSecond: number
+  publishIntervalMs: number
+  updateSparklines: boolean
+  sparklineSampleIntervalMs: number
+  quotes: Array<MarketQuote>
+}
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export interface MarketFeedActions {
+  toggle: () => void
+  setInstrumentCount: (count: number) => void
+  setLoadProfile: (profile: FeedLoadProfile) => void
+  setTargetRate: (rate: number) => void
+  setPublishInterval: (intervalMs: number) => void
+  setSparklineUpdates: (enabled: boolean) => void
+  setSparklineSampleInterval: (intervalMs: number) => void
+  runBurst: () => void
+  reset: () => void
+}
+
+const initialState: MarketFeedState = {
+  workerReady: false,
+  running: true,
+  instrumentCount: 250,
+  feedLoadProfile: 'high',
+  targetTicksPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 250,
+  quotes: [],
+}
+
+export class MarketFeedController {
+  readonly store = createStore<MarketFeedState>(initialState)
+  readonly actions: MarketFeedActions
+  readonly #observers = new Set<MarketFeedObserver>()
+  readonly #runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+  }
+
+  constructor() {
+    this.actions = {
+      toggle: () => {
+        const running = !this.store.get().running
+        this.#patch({ running })
+        this.#post({ type: 'set-running', running })
+      },
+      setInstrumentCount: (count) => {
+        this.#patch({ instrumentCount: count })
+        this.#resetWorker(count)
+      },
+      setLoadProfile: (profile) => {
+        if (profile === 'custom') {
+          this.#patch({ feedLoadProfile: profile })
+          return
+        }
+        const rate = feedLoadRates[profile]
+        this.#patch({
+          feedLoadProfile: profile,
+          targetTicksPerSecond: rate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: rate })
+      },
+      setTargetRate: (rate) => {
+        this.#patch({
+          feedLoadProfile: 'custom',
+          targetTicksPerSecond: rate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: rate })
+      },
+      setPublishInterval: (publishIntervalMs) => {
+        this.#patch({ publishIntervalMs })
+        this.#post({
+          type: 'set-publish-interval',
+          intervalMs: publishIntervalMs,
+        })
+      },
+      setSparklineUpdates: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#post({ type: 'set-sparklines', enabled })
+      },
+      setSparklineSampleInterval: (intervalMs) => {
+        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.#post({ type: 'set-sparkline-interval', intervalMs })
+      },
+      runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
+      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.#runtime.worker = worker
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    const state = this.store.get()
+    this.#post({
+      type: 'start',
+      rowCount: state.instrumentCount,
+      running: state.running,
+      ticksPerSecond: state.targetTicksPerSecond,
+      publishIntervalMs: state.publishIntervalMs,
+      updateSparklines: state.updateSparklines,
+      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+    })
+    return () => this.stop()
+  }
+
+  stop(): void {
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#observers.clear()
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  completeRender(): void {
+    if (!this.#runtime.renderPending) return
+
+    this.#runtime.renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#post({ type: 'set-running', running: this.store.get().running })
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#runtime.feedSessionId = data.sessionId
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.#startMutation()
+      batch(() => {
+        this.#patch({
+          quotes: hydrateMarketQuotes(data.quotes),
+          workerReady: true,
+        })
+      })
+      return
+    }
+
+    if (data.sessionId !== this.#runtime.feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.#patch({
+      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
+    })
+    const feedBatch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(feedBatch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorker(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#post({ type: 'set-running', running: false })
+    this.#post({ type: 'reset', rowCount })
+  }
+
+  #startMutation(): void {
+    this.#runtime.renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #patch(patch: Partial<MarketFeedState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#runtime.worker?.postMessage(command)
+  }
+}
diff --git a/examples/react/realtime-trading/src/feed/use-market-feed-controller.ts b/examples/react/realtime-trading/src/feed/use-market-feed-controller.ts
new file mode 100644
index 0000000000..7f01777cc5
--- /dev/null
+++ b/examples/react/realtime-trading/src/feed/use-market-feed-controller.ts
@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react'
+import { MarketFeedController } from './market-feed-controller'
+
+export function useMarketFeedController(): MarketFeedController {
+  'use no memo'
+  const controllerRef = useRef<MarketFeedController | null>(null)
+  controllerRef.current ??= new MarketFeedController()
+  const controller = controllerRef.current
+
+  useEffect(() => controller.start(), [controller])
+
+  return controller
+}
+
diff --git a/examples/solid/realtime-trading/src/market-feed-engine.ts b/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
similarity index 70%
rename from examples/solid/realtime-trading/src/market-feed-engine.ts
rename to examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
index da91131351..c7ea457227 100644
--- a/examples/solid/realtime-trading/src/market-feed-engine.ts
+++ b/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,39 +1,30 @@
+import { globalInstruments } from '../../../../../realtime-trading-shared/sp500-instruments'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
 } from './market-feed-protocol'
 
-const baseInstruments = [
-  ['ALP', 'Alpine Systems', 'XNAS'],
-  ['ARC', 'Arcadia Cloud', 'XNYS'],
-  ['BLU', 'Blue River Energy', 'BATS'],
-  ['CRN', 'Crown Robotics', 'XNAS'],
-  ['DYN', 'Dynasty Networks', 'XNYS'],
-  ['ECO', 'Ecoframe Materials', 'IEX'],
-  ['FLX', 'Flux Semiconductors', 'XNAS'],
-  ['GEO', 'Geode Analytics', 'BATS'],
-  ['HLX', 'Helix Biotech', 'XNYS'],
-  ['ION', 'Ion Mobility', 'IEX'],
-  ['JDE', 'Jade Financial', 'XNYS'],
-  ['KNT', 'Kinetic Aerospace', 'XNAS'],
-] as const
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
 
 export class MarketFeedEngine {
   #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
   #random = createRandom(2_026)
   #rowCursor = 0
-  #historyTick = 0
-  #eventIndex = 0
+  #tickIndex = 0
 
-  reset(count: number, seed: number): Array<MarketQuoteSnapshot> {
-    const random = createRandom(seed)
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
 
     this.#quotes = Array.from({ length: count }, (_, index) => {
-      const [baseSymbol, company, venue] =
-        baseInstruments[index % baseInstruments.length]
-      const series = Math.floor(index / baseInstruments.length)
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
       const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
-      const open = roundPrice(20 + random() * 480)
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
       const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
       const history = Array.from({ length: 24 }, (_, historyIndex) =>
         roundPrice(
@@ -48,8 +39,11 @@ export class MarketFeedEngine {
         id: `instrument-${index}`,
         symbol,
         company,
-        venue,
+        venue: market,
+        previousClose,
         open,
+        high: open,
+        low: open,
         price: open,
         bid: roundPrice(open - spread / 2),
         ask: roundPrice(open + spread / 2),
@@ -57,16 +51,17 @@ export class MarketFeedEngine {
         askSize: Math.floor(100 + random() * 25_000),
         lastSize,
         lastMove: 0,
-        lastUpdatedAt: Date.now(),
+        lastUpdatedAt: createdAt,
         volume,
         turnover: roundMoney(open * volume),
         history,
       }
     })
 
-    this.#random = createRandom(2_026 + seed)
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
     this.#rowCursor = 0
-    this.#historyTick = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
 
     return this.#quotes.map((quote) => ({
       ...quote,
@@ -74,22 +69,31 @@ export class MarketFeedEngine {
     }))
   }
 
-  applyEvents(
-    eventCount: number,
+  applyTicks(
+    tickCount: number,
     updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
   ): Array<MarketQuoteUpdate> {
-    if (this.#quotes.length === 0 || eventCount <= 0) return []
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
 
     const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
     const updatedQuotes = new Map<number, MarketQuoteUpdate>()
     const stride = 97
 
-    this.#eventIndex = 0
-    while (this.#eventIndex < eventCount) {
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
       this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
       const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
       const shouldUpdateHistory =
-        updateSparklines && this.#historyTick++ % 4 === 0
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
 
       this.#applyTick(quote, shouldUpdateHistory, updatedAt)
 
@@ -104,13 +108,15 @@ export class MarketFeedEngine {
         lastSize: quote.lastSize,
         lastMove: quote.lastMove,
         lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
         volume: quote.volume,
         turnover: quote.turnover,
         ...(shouldUpdateHistory || previousUpdate?.history
           ? { history: [...quote.history] }
           : {}),
       })
-      this.#eventIndex++
+      this.#tickIndex++
     }
 
     return [...updatedQuotes.values()]
@@ -132,6 +138,8 @@ export class MarketFeedEngine {
 
     quote.lastMove = nextPrice - previousPrice
     quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
     quote.bid = roundPrice(nextPrice - spread / 2)
     quote.ask = roundPrice(nextPrice + spread / 2)
     quote.bidSize = Math.floor(100 + this.#random() * 25_000)
diff --git a/examples/angular/realtime-trading/src/app/market-feed-protocol.ts b/examples/react/realtime-trading/src/feed/worker/market-feed-protocol.ts
similarity index 54%
rename from examples/angular/realtime-trading/src/app/market-feed-protocol.ts
rename to examples/react/realtime-trading/src/feed/worker/market-feed-protocol.ts
index 0a8b9925f5..21997ec89c 100644
--- a/examples/angular/realtime-trading/src/app/market-feed-protocol.ts
+++ b/examples/react/realtime-trading/src/feed/worker/market-feed-protocol.ts
@@ -3,7 +3,10 @@ export interface MarketQuoteSnapshot {
   symbol: string
   company: string
   venue: string
+  previousClose: number
   open: number
+  high: number
+  low: number
   price: number
   bid: number
   ask: number
@@ -27,6 +30,8 @@ export interface MarketQuoteUpdate {
   lastSize: number
   lastMove: number
   lastUpdatedAt: number
+  high: number
+  low: number
   volume: number
   turnover: number
   history?: Array<number>
@@ -34,33 +39,32 @@ export interface MarketQuoteUpdate {
 
 export type MarketFeedCommand =
   | {
-      type: 'initialize'
+      type: 'start'
       rowCount: number
-      seed: number
       running: boolean
-      targetEventsPerSecond: number
+      ticksPerSecond: number
+      publishIntervalMs: number
       updateSparklines: boolean
+      sparklineSampleIntervalMs: number
     }
-  | {
-      type: 'configure'
-      running?: boolean
-      targetEventsPerSecond?: number
-      updateSparklines?: boolean
-    }
-  | { type: 'reset'; rowCount: number; seed: number }
-  | { type: 'burst'; eventCount: number }
-  | { type: 'ack'; generation: number; sequence: number }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
 
 export type MarketFeedEvent =
   | {
-      type: 'ready'
-      generation: number
+      type: 'snapshot'
+      sessionId: number
       quotes: Array<MarketQuoteSnapshot>
     }
   | {
-      type: 'batch'
-      generation: number
-      sequence: number
-      eventCount: number
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
       updates: Array<MarketQuoteUpdate>
     }
diff --git a/examples/react/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/react/realtime-trading/src/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..7b22656f2e
--- /dev/null
+++ b/examples/react/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -0,0 +1,142 @@
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: 10_000,
+  publishIntervalMs: 20,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 250,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/react/realtime-trading/src/index.css b/examples/react/realtime-trading/src/index.css
index b3f25e0699..a70af09185 100644
--- a/examples/react/realtime-trading/src/index.css
+++ b/examples/react/realtime-trading/src/index.css
@@ -1,28 +1,48 @@
 :root {
   color-scheme: dark;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    sans-serif;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
   font-synthesis: none;
-  --background: #090c11;
-  --panel: #10151c;
-  --panel-raised: #151b24;
-  --panel-hover: #19212b;
-  --border: #28313d;
-  --border-soft: #1d2530;
-  --text: #d7dde5;
-  --text-strong: #f1f4f8;
-  --muted: #7f8a98;
-  --blue: #4f8cff;
-  --blue-soft: #8cb5ff;
-  --green: #42c98a;
-  --red: #ef6a78;
-  --amber: #e8b95f;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
 }
 
 * {
@@ -51,8 +71,8 @@ button,
 select {
   color: var(--text);
   background: var(--panel-raised);
-  border: 1px solid #394452;
-  border-radius: 2px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
 }
 
 button {
@@ -64,8 +84,8 @@ button {
 }
 
 button:hover {
-  background: #1c2530;
-  border-color: #536171;
+  background: var(--control-hover);
+  border-color: var(--border-strong);
 }
 
 button:focus-visible,
@@ -86,35 +106,54 @@ input[type='text'] {
   padding: 0.45rem 0.55rem;
   color: var(--text);
   background: var(--panel-raised);
-  border: 1px solid #394452;
-  border-radius: 2px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
   font-size: 0.75rem;
 }
 
 .trading-terminal {
-  display: flex;
-  flex-direction: column;
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
   width: 100%;
-  height: 100vh;
-  min-height: 640px;
+  height: 100dvh;
+  min-height: 0;
   overflow: hidden;
   background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
 }
 
 .app-bar {
   display: flex;
-  flex: 0 0 42px;
+  min-height: var(--shell-bar-height);
   align-items: center;
   justify-content: space-between;
-  padding: 0 0.75rem;
-  background: #0d1117;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
   border-bottom: 1px solid var(--border);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.68rem;
   letter-spacing: 0.045em;
 }
 
 .brand,
+.header-actions,
 .session-info,
 .feed-status {
   display: flex;
@@ -131,8 +170,9 @@ input[type='text'] {
   width: 24px;
   height: 24px;
   place-items: center;
-  color: #fff;
-  background: var(--blue);
+  color: var(--text-inverse);
+  background: var(--surface-control);
+  border: 1px solid var(--border-strong);
   font-size: 0.62rem;
   font-weight: 800;
 }
@@ -140,8 +180,8 @@ input[type='text'] {
 .environment {
   padding: 0.16rem 0.3rem;
   color: var(--amber);
-  background: rgb(232 185 95 / 8%);
-  border: 1px solid rgb(232 185 95 / 40%);
+  background: color-mix(in srgb, var(--amber) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
   font-size: 0.58rem;
 }
 
@@ -150,9 +190,39 @@ input[type='text'] {
   color: var(--muted);
 }
 
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
 .feed-status {
   gap: 0.4rem;
-  color: #9aa4b1;
+  color: var(--muted);
 }
 
 .feed-status.is-running {
@@ -162,7 +232,7 @@ input[type='text'] {
 .status-dot {
   width: 6px;
   height: 6px;
-  background: #66717d;
+  background: var(--muted);
   border-radius: 50%;
 }
 
@@ -173,69 +243,28 @@ input[type='text'] {
 .development-warning {
   flex: 0 0 auto;
   padding: 0.3rem 0.75rem;
-  color: #e9c67e;
-  background: #211b11;
-  border-bottom: 1px solid #4a3d25;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
   font-size: 0.62rem;
   letter-spacing: 0.04em;
 }
 
-.workspace {
-  display: grid;
-  flex: 1;
-  grid-template-columns: minmax(0, 1fr) 288px;
-  min-height: 0;
-}
-
 .market-panel {
   display: flex;
   min-width: 0;
   min-height: 0;
   flex-direction: column;
   background: var(--panel);
-  border-right: 1px solid var(--border);
-}
-
-.market-toolbar {
-  display: flex;
-  flex: 0 0 42px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 0.75rem;
-  background: #11171f;
-  border-bottom: 1px solid var(--border);
-}
-
-.watchlist-name {
-  display: flex;
-  gap: 0.6rem;
-  align-items: baseline;
-  font-size: 0.67rem;
-}
-
-.watchlist-name span {
-  color: var(--muted);
-}
-
-.watchlist-name strong {
-  color: var(--text-strong);
-  font-size: 0.72rem;
-  letter-spacing: 0.035em;
-}
-
-.market-context {
-  display: flex;
-  gap: 1rem;
-  color: var(--muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.6rem;
+  grid-area: content;
 }
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 64px;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
@@ -243,8 +272,8 @@ input[type='text'] {
 
 .metrics-strip article {
   min-width: 0;
-  padding: 0.55rem 0.65rem;
-  background: #0e131a;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
 }
 
 .metrics-strip span,
@@ -260,10 +289,10 @@ input[type='text'] {
 
 .metrics-strip strong {
   display: block;
-  margin: 0.22rem 0 0.12rem;
+  margin: 0.12rem 0 0.08rem;
   overflow: hidden;
   color: var(--text-strong);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
   text-overflow: ellipsis;
@@ -278,26 +307,44 @@ input[type='text'] {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  background: #0d1218;
-}
-
-app-current-trading-table,
-app-v8-trading-table {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
+  background: var(--surface-table);
 }
 
 table {
   min-width: 100%;
   border-spacing: 0;
   table-layout: fixed;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.72rem;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
   font-variant-numeric: tabular-nums;
 }
 
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
 thead {
   position: sticky;
   z-index: 2;
@@ -305,26 +352,42 @@ thead {
 }
 
 th {
-  height: 28px;
-  padding: 0 0.6rem;
-  color: #8e99a6;
-  background: #171e27;
-  border-right: 1px solid #222b36;
-  border-bottom: 1px solid #394452;
-  font-size: 0.58rem;
-  font-weight: 700;
-  letter-spacing: 0.055em;
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
   text-align: left;
-  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
 }
 
 td {
-  height: 27px;
-  padding: 0 0.6rem;
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
   overflow: hidden;
-  color: #cbd2db;
-  border-right: 1px solid #1a222c;
-  border-bottom: 1px solid #1b232d;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -338,19 +401,224 @@ td:last-child {
   text-align: right;
 }
 
+.market-cell {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+.name-cell {
+  color: var(--text-strong);
+}
+
+.symbol-cell {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
 tbody tr:nth-child(even) {
-  background: rgb(255 255 255 / 1.3%);
+  background: var(--row-alt);
 }
 
 tbody tr:hover {
-  background: #17202a;
+  background: var(--panel-hover);
+}
+
+tbody tr.is-symbol-selected {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
 }
 
-tbody tr.is-selected {
-  background: rgb(79 140 255 / 13%);
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr.is-row-selected {
+  background: rgb(76 145 228 / 13%);
+}
+
+tbody tr.is-symbol-selected {
   box-shadow: inset 2px 0 0 var(--blue);
 }
 
+td.is-cell-selected {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td.is-cell-focused {
+  background: rgb(70 139 222 / 21%);
+}
+
+td.is-cell-selected::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td.selection-top::after {
+  border-top-color: var(--blue);
+}
+
+td.selection-right::after {
+  border-right-color: var(--blue);
+}
+
+td.selection-bottom::after {
+  border-bottom-color: var(--blue);
+}
+
+td.selection-left::after {
+  border-left-color: var(--blue);
+}
+
 .price-button {
   min-width: 4.5rem;
   padding: 0;
@@ -371,8 +639,31 @@ tbody tr.is-selected {
 }
 
 .move-cell {
-  display: inline-block;
-  min-width: 4.8rem;
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
 }
 
 .spread-cell {
@@ -380,7 +671,7 @@ tbody tr.is-selected {
   align-items: baseline;
   justify-content: flex-end;
   gap: 0.35rem;
-  color: #cbd2db;
+  color: var(--text);
 }
 
 .spread-cell small {
@@ -404,22 +695,22 @@ app-depth-cell {
   display: flex;
   height: 17px;
   overflow: hidden;
-  background: #151b23;
+  background: var(--surface-control);
 }
 
 .depth-bid,
 .depth-ask {
   height: 100%;
-  opacity: 0.28;
+  opacity: 0.78;
 }
 
 .depth-bid {
-  background: var(--blue);
-  border-right: 1px solid #10151c;
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
 }
 
 .depth-ask {
-  background: var(--red);
+  background: var(--depth-ask);
 }
 
 .depth-values {
@@ -429,13 +720,13 @@ app-depth-cell {
   align-items: center;
   justify-content: space-between;
   padding: 0 0.28rem;
-  color: #dce2e9;
+  color: var(--text-strong);
   font-size: 0.57rem;
-  text-shadow: 0 1px #080b0f;
+  text-shadow: 0 1px var(--background);
 }
 
 .quote-age {
-  color: #aab3bf;
+  color: var(--muted);
 }
 
 .quote-age-warm {
@@ -456,15 +747,24 @@ app-depth-cell {
 
 .sparkline {
   display: block;
-  width: 8rem;
-  height: 1.2rem;
+  width: 100%;
+  height: 1.35rem;
   margin-left: auto;
+  color: var(--blue-soft);
   overflow: visible;
 }
 
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
 .sparkline polyline {
   fill: none;
-  stroke: var(--blue-soft);
+  stroke: currentColor;
   stroke-linecap: square;
   stroke-linejoin: miter;
   stroke-width: 1.25;
@@ -473,21 +773,23 @@ app-depth-cell {
 
 .market-statusbar {
   display: flex;
-  flex: 0 0 25px;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
   gap: 1.1rem;
   align-items: center;
   padding: 0 0.65rem;
   color: var(--muted);
-  background: #0d1117;
+  background: var(--surface-bar);
   border-top: 1px solid var(--border);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.56rem;
+  grid-area: footer;
   letter-spacing: 0.035em;
 }
 
 .market-statusbar strong {
   margin-left: 0.25rem;
-  color: #c4ccd6;
+  color: var(--text);
   font-weight: 500;
 }
 
@@ -495,20 +797,43 @@ app-depth-cell {
   flex: 1;
 }
 
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
 .configurator {
+  width: 100%;
+  height: 100%;
   min-height: 0;
   overflow: auto;
-  background: #0d1218;
+  background: var(--surface-table);
 }
 
 .configurator > header {
   display: flex;
-  height: 42px;
+  height: var(--shell-bar-height);
   align-items: center;
   justify-content: space-between;
-  padding: 0 0.75rem;
+  padding: 0 var(--shell-inline-padding);
   color: var(--text-strong);
-  background: #11171f;
+  background: var(--surface-toolbar);
   border-bottom: 1px solid var(--border);
   font-size: 0.65rem;
   font-weight: 700;
@@ -524,33 +849,33 @@ app-depth-cell {
 .config-section {
   display: grid;
   gap: 0.7rem;
-  padding: 0.8rem 0.75rem;
+  padding: 0.8rem var(--shell-inline-padding);
   border-bottom: 1px solid var(--border);
 }
 
 .config-section h2 {
   margin: 0;
-  color: #8e99a6;
+  color: var(--muted);
   font-size: 0.58rem;
   letter-spacing: 0.075em;
 }
 
 .primary-action {
   width: 100%;
-  color: #fff;
-  background: #316fdd;
-  border-color: #4f8cff;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
 }
 
 .primary-action:hover {
-  background: #397bed;
-  border-color: #73a2ff;
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
 }
 
 .field {
   display: grid;
   gap: 0.35rem;
-  color: #9ba5b1;
+  color: var(--text);
   font-size: 0.66rem;
 }
 
@@ -561,13 +886,13 @@ app-depth-cell {
 
 .rate-field strong {
   color: var(--text);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-weight: 500;
 }
 
 .field small {
-  color: #66717e;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--muted);
+  font-family: var(--font-mono);
   font-size: 0.55rem;
 }
 
@@ -581,7 +906,7 @@ input[type='range'] {
   display: flex;
   gap: 0.5rem;
   align-items: flex-start;
-  color: #b8c0ca;
+  color: var(--text);
   font-size: 0.66rem;
   line-height: 1.3;
 }
@@ -594,7 +919,7 @@ input[type='range'] {
 .toggle-field small {
   display: block;
   margin-top: 0.14rem;
-  color: #687482;
+  color: var(--muted);
   font-size: 0.57rem;
 }
 
@@ -632,8 +957,8 @@ dt {
 
 dd {
   margin: 0;
-  color: #d4dae2;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
   font-size: 0.62rem;
 }
 
@@ -650,7 +975,7 @@ dd {
 
 .selection strong {
   color: var(--text-strong);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.85rem;
 }
 
@@ -667,66 +992,42 @@ dd {
 }
 
 @media (max-width: 980px) {
-  .workspace {
-    grid-template-columns: minmax(0, 1fr) 250px;
-  }
-
-  .market-context span:not(:first-child) {
-    display: none;
-  }
-
-  .metrics-strip {
-    grid-template-columns: repeat(3, 1fr);
-    flex-basis: 166px;
+  :root {
+    --sidebar-width: 15.625rem;
   }
 }
 
 @media (max-width: 720px) {
-  html,
-  body {
-    min-height: 100%;
-  }
-
-  body {
-    overflow: auto;
-  }
-
   .trading-terminal {
-    height: auto;
-    min-height: 100vh;
-    overflow: visible;
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
   }
 
   .session-info > span:first-child {
     display: none;
   }
 
-  .workspace {
-    display: flex;
-    flex-direction: column;
-  }
-
   .market-panel {
-    min-height: 68vh;
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .metrics-strip {
-    grid-template-columns: repeat(2, 1fr);
-    flex-basis: 220px;
+    min-height: 0;
   }
 
   .table-scroll {
-    height: 58vh;
-    flex: none;
+    min-height: 0;
   }
 
-  .market-context {
-    display: none;
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
   }
 
-  .configurator {
-    overflow: visible;
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
   }
 }
diff --git a/examples/react/realtime-trading/src/market-feed.worker.ts b/examples/react/realtime-trading/src/market-feed.worker.ts
deleted file mode 100644
index 7ce6313798..0000000000
--- a/examples/react/realtime-trading/src/market-feed.worker.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { MarketFeedEngine } from './market-feed-engine'
-import type {
-  MarketFeedCommand,
-  MarketFeedEvent,
-  MarketQuoteUpdate,
-} from './market-feed-protocol'
-
-const engine = new MarketFeedEngine()
-const pendingUpdates = new Map<number, MarketQuoteUpdate>()
-
-const runtime = {
-  generation: 0,
-  sequence: 0,
-  inFlightSequence: null as number | null,
-  pendingEventCount: 0,
-  initialized: false,
-  running: true,
-  targetEventsPerSecond: 10_000,
-  updateSparklines: true,
-  eventBudget: 0,
-  lastTickAt: performance.now(),
-}
-
-addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
-  switch (data.type) {
-    case 'initialize':
-      runtime.running = data.running
-      runtime.targetEventsPerSecond = data.targetEventsPerSecond
-      runtime.updateSparklines = data.updateSparklines
-      reset(data.rowCount, data.seed)
-      break
-    case 'configure':
-      runtime.running = data.running ?? runtime.running
-      runtime.targetEventsPerSecond =
-        data.targetEventsPerSecond ?? runtime.targetEventsPerSecond
-      runtime.updateSparklines =
-        data.updateSparklines ?? runtime.updateSparklines
-      break
-    case 'reset':
-      reset(data.rowCount, data.seed)
-      break
-    case 'burst':
-      produceEvents(data.eventCount)
-      flush()
-      break
-    case 'ack':
-      if (
-        data.generation === runtime.generation &&
-        data.sequence === runtime.inFlightSequence
-      ) {
-        runtime.inFlightSequence = null
-        flush()
-      }
-      break
-  }
-})
-
-setInterval(() => {
-  const now = performance.now()
-  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
-  runtime.lastTickAt = now
-
-  if (runtime.initialized && runtime.running) {
-    runtime.eventBudget +=
-      (runtime.targetEventsPerSecond * elapsed) / 1_000
-    const eventCount = Math.floor(runtime.eventBudget)
-    runtime.eventBudget -= eventCount
-    produceEvents(eventCount)
-  }
-
-  flush()
-}, 16)
-
-function reset(rowCount: number, seed: number): void {
-  runtime.initialized = true
-  runtime.generation++
-  runtime.sequence = 0
-  runtime.inFlightSequence = null
-  runtime.pendingEventCount = 0
-  pendingUpdates.clear()
-  runtime.eventBudget = 0
-  runtime.lastTickAt = performance.now()
-
-  post({
-    type: 'ready',
-    generation: runtime.generation,
-    quotes: engine.reset(rowCount, seed),
-  })
-}
-
-function produceEvents(eventCount: number): void {
-  if (!runtime.initialized || eventCount <= 0) return
-
-  runtime.pendingEventCount += eventCount
-  for (const update of engine.applyEvents(
-    eventCount,
-    runtime.updateSparklines,
-  )) {
-    const previousUpdate = pendingUpdates.get(update.index)
-    pendingUpdates.set(update.index, {
-      ...update,
-      ...(update.history || !previousUpdate?.history
-        ? {}
-        : { history: previousUpdate.history }),
-    })
-  }
-}
-
-function flush(): void {
-  if (
-    runtime.inFlightSequence !== null ||
-    runtime.pendingEventCount === 0
-  )
-    return
-
-  const nextSequence = ++runtime.sequence
-  const message: MarketFeedEvent = {
-    type: 'batch',
-    generation: runtime.generation,
-    sequence: nextSequence,
-    eventCount: runtime.pendingEventCount,
-    updates: [...pendingUpdates.values()],
-  }
-
-  runtime.pendingEventCount = 0
-  pendingUpdates.clear()
-  runtime.inFlightSequence = nextSequence
-  post(message)
-}
-
-function post(event: MarketFeedEvent): void {
-  postMessage(event)
-}
diff --git a/examples/react/realtime-trading/src/shell/TradingShell.tsx b/examples/react/realtime-trading/src/shell/TradingShell.tsx
index 3e2aa38fe4..a11d72b14b 100644
--- a/examples/react/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/react/realtime-trading/src/shell/TradingShell.tsx
@@ -1,5 +1,8 @@
 import { shallow } from '@tanstack/react-store'
+import { useState } from 'react'
 import {
+  useMarketFeedController,
+  useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from './trading-shell-context'
@@ -8,11 +11,8 @@ import type {
   FeedMetrics,
   ScrollStressMode,
 } from '../benchmark/benchmark-monitor'
-import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
-import type {
-  CoreRowModelMode,
-  TableAdapter,
-} from '../trading-table'
+import type { FeedLoadProfile } from '../feed/feed-load-profiles'
+import type { CoreRowModelMode } from '../table/trading-table'
 
 const integerFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 0,
@@ -22,39 +22,48 @@ const rateFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 1,
 })
 export function TradingShell(props: { children: ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const toggleSidebar = () => setSidebarOpen((open) => !open)
+
   return (
-    <main className="trading-terminal">
-      <AppHeader />
+    <main
+      className={`trading-terminal ${sidebarOpen ? '' : 'is-sidebar-collapsed'}`}
+    >
+      <div className="shell-header">
+        <AppHeader sidebarOpen={sidebarOpen} onSidebarToggle={toggleSidebar} />
 
-      {import.meta.env.DEV && (
-        <aside className="development-warning">
-          DEV BUILD — use the profiling production configuration before
-          recording React timings.
-        </aside>
-      )}
+        {import.meta.env.DEV && (
+          <aside className="development-warning">
+            DEV BUILD — use the profiling production configuration before
+            recording React timings.
+          </aside>
+        )}
 
-      {import.meta.env.MODE === 'production' && (
-        <aside className="development-warning">
-          STANDARD PRODUCTION BUILD — React Profiler callbacks are disabled;
-          run the profile build for commit timings.
-        </aside>
-      )}
+        {import.meta.env.MODE === 'production' && (
+          <aside className="development-warning">
+            STANDARD PRODUCTION BUILD — React Profiler callbacks are disabled;
+            run the profile build for commit timings.
+          </aside>
+        )}
+      </div>
 
-      <div className="workspace">
-        <section className="market-panel" aria-label="Live synthetic quotes">
-          <MarketToolbar />
-          <MetricsStrip />
-          {props.children}
-          <MarketStatusbar />
-        </section>
+      <section className="market-panel" aria-label="Live synthetic quotes">
+        <MetricsStrip />
+        {props.children}
+      </section>
+      <MarketStatusbar />
+      <div className="sidebar-slot">
         <Configurator />
       </div>
     </main>
   )
 }
 
-function AppHeader() {
-  const { workerReady, running } = useTradingShellState(
+function AppHeader(props: {
+  sidebarOpen: boolean
+  onSidebarToggle: () => void
+}) {
+  const { workerReady, running } = useMarketFeedState(
     (state) => ({
       workerReady: state.workerReady,
       running: state.running,
@@ -68,72 +77,37 @@ function AppHeader() {
         <strong>MARKET MONITOR</strong>
         <span className="environment">SIMULATED</span>
       </div>
-      <div className="session-info">
-        <span>REACT / FLEX RENDER</span>
-        <span
-          className={`feed-status ${workerReady && running ? 'is-running' : ''}`}
-          data-testid="feed-status"
+      <div className="header-actions">
+        <div className="session-info">
+          <span>REACT / FLEX RENDER</span>
+          <span
+            className={`feed-status ${workerReady && running ? 'is-running' : ''}`}
+            data-testid="feed-status"
+          >
+            <span className="status-dot" aria-hidden="true" />
+            {!workerReady
+              ? 'FEED CONNECTING'
+              : running
+                ? 'FEED LIVE'
+                : 'FEED PAUSED'}
+          </span>
+        </div>
+        <button
+          className="sidebar-toggle"
+          type="button"
+          aria-expanded={props.sidebarOpen}
+          aria-controls="benchmark-configurator"
+          aria-label={
+            props.sidebarOpen ? 'Close configurator' : 'Open configurator'
+          }
+          title={props.sidebarOpen ? 'Close configurator' : 'Open configurator'}
+          onClick={props.onSidebarToggle}
         >
-          <span className="status-dot" aria-hidden="true" />
-          {!workerReady
-            ? 'FEED CONNECTING'
-            : running
-              ? 'FEED LIVE'
-              : 'FEED PAUSED'}
-        </span>
-      </div>
-    </header>
-  )
-}
-
-function MarketToolbar() {
-  const {
-    coreRowModelMode,
-    rendererMode,
-    updateSparklines,
-    updateQuoteAges,
-    quoteCount,
-    displayQuoteCount,
-    adapterLabel,
-    workloadLabel,
-  } = useTradingShellState(
-    (state) => ({
-      coreRowModelMode: state.coreRowModelMode,
-      rendererMode: state.rendererMode,
-      updateSparklines: state.updateSparklines,
-      updateQuoteAges: state.updateQuoteAges,
-      quoteCount: state.quotes.length,
-      displayQuoteCount: state.displayQuotes.length,
-      adapterLabel: state.adapterLabel,
-      workloadLabel: state.workloadLabel,
-    }),
-    { compare: shallow },
-  )
-  return (
-    <header className="market-toolbar">
-      <div className="watchlist-name">
-        <span>WATCHLIST</span>
-        <strong>ALL INSTRUMENTS</strong>
-      </div>
-      <div className="market-context">
-        <span>
-          {formatInteger(displayQuoteCount)} / {formatInteger(quoteCount)}{' '}
-          SYMBOLS
-        </span>
-        <span>REACT {adapterLabel}</span>
-        <span>WORKER STREAM</span>
-        <span>IMMUTABLE ROWS</span>
-        <span>{workloadLabel}</span>
-        <span>
-          {coreRowModelMode === 'none'
-            ? 'CORE ROW MODEL OFF'
-            : `CORE ${coreRowModelMode.toUpperCase()}`}
-        </span>
-        <span>
-          {rendererMode === 'stable' ? 'STABLE CELLS' : 'A/B CELL SWAP'}
-        </span>
-        <span>{updateSparklines ? 'CHARTS ON' : 'CHARTS OFF'}</span>
-        <span>{updateQuoteAges ? 'AGE CLOCK ON' : 'AGE CLOCK OFF'}</span>
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <rect x="2.5" y="3" width="15" height="14" rx="1.5" />
+            <path d="M12.5 3v14" />
+          </svg>
+        </button>
       </div>
     </header>
   )
@@ -153,7 +127,7 @@ function MarketStatusbar() {
   return (
     <footer className="market-statusbar">
       <span>
-        BATCH EVENTS <strong>{formatInteger(lastBatchSize)}</strong>
+        BATCH TICKS <strong>{formatInteger(lastBatchSize)}</strong>
       </span>
       <span>
         ROW UPDATES <strong>{formatInteger(lastUpdateCount)}</strong>
@@ -165,345 +139,351 @@ function MarketStatusbar() {
         COMPONENTS <strong>{formatInteger(liveComponents)}</strong>
       </span>
       <span className="statusbar-spacer" />
-      <span>WORKER / ACKNOWLEDGED / IMMUTABLE</span>
+      <span>WORKER / FIXED CADENCE / IMMUTABLE</span>
     </footer>
   )
 }
 
 function Configurator() {
-  const state = useTradingShellState(
+  const feedState = useMarketFeedState(
     (storeState) => ({
       running: storeState.running,
-      tableAdapter: storeState.tableAdapter,
       instrumentCount: storeState.instrumentCount,
       feedLoadProfile: storeState.feedLoadProfile,
-      targetEventsPerSecond: storeState.targetEventsPerSecond,
-      rowWorkloadMode: storeState.rowWorkloadMode,
+      targetTicksPerSecond: storeState.targetTicksPerSecond,
+      publishIntervalMs: storeState.publishIntervalMs,
+      updateSparklines: storeState.updateSparklines,
+      sparklineSampleIntervalMs: storeState.sparklineSampleIntervalMs,
+    }),
+    { compare: shallow },
+  )
+  const benchmarkState = useTradingShellState(
+    (storeState) => ({
       coreRowModelMode: storeState.coreRowModelMode,
       coreFilterValue: storeState.coreFilterValue,
       scrollStressMode: storeState.scrollStressMode,
       rendererMode: storeState.rendererMode,
-      updateSparklines: storeState.updateSparklines,
-      updateQuoteAges: storeState.updateQuoteAges,
     }),
     { compare: shallow },
   )
-  const { actions } = useTradingShellController()
+  const controller = useTradingShellController()
+  const feed = useMarketFeedController()
+  const { actions } = controller
+  const feedActions = feed.actions
   const {
     running,
-    tableAdapter,
     instrumentCount,
     feedLoadProfile,
-    targetEventsPerSecond,
-    rowWorkloadMode,
-    coreRowModelMode,
-    coreFilterValue,
-    scrollStressMode,
-    rendererMode,
+    targetTicksPerSecond,
+    publishIntervalMs,
     updateSparklines,
-    updateQuoteAges,
-  } = state
+    sparklineSampleIntervalMs,
+  } = feedState
+  const { coreRowModelMode, coreFilterValue, scrollStressMode, rendererMode } =
+    benchmarkState
   const {
-    toggleFeed,
-    setInstrumentCount,
-    setFeedLoadProfile,
-    setTargetEventsPerSecond,
-    setRowWorkloadMode,
-    setTableAdapter,
     setCoreRowModelMode,
     setCoreFilterValue,
     setScrollStressMode,
     setRendererMode,
-    setUpdateSparklines,
-    setUpdateQuoteAges,
-    runBurst,
     resetMarket,
   } = actions
+  const {
+    toggle,
+    setInstrumentCount,
+    setLoadProfile,
+    setTargetRate,
+    setPublishInterval,
+    setSparklineUpdates,
+    setSparklineSampleInterval,
+    runBurst,
+  } = feedActions
 
   return (
-    <aside className="configurator" aria-label="Benchmark configurator">
-          <header>
-            <span>CONFIGURATOR</span>
-            <small>RUN PARAMETERS</small>
-          </header>
-
-          <section className="config-section" aria-labelledby="react-adapter">
-            <h2 id="react-adapter">TABLE ADAPTER</h2>
-            <label className="field">
-              <span>Implementation</span>
-              <select
-                data-testid="adapter-select"
-                value={tableAdapter}
-                onChange={(event) =>
-                  setTableAdapter(event.currentTarget.value as TableAdapter)
-                }
-              >
-                <option value="local">React Table local v9</option>
-                <option value="v8">React Table 8.21.3</option>
-              </select>
-              <small>Switching unmounts one adapter and mounts the next.</small>
-            </label>
-          </section>
+    <aside
+      id="benchmark-configurator"
+      className="configurator"
+      aria-label="Benchmark configurator"
+    >
+      <header>
+        <span>CONFIGURATOR</span>
+        <small>RUN PARAMETERS</small>
+      </header>
 
-          <section className="config-section" aria-labelledby="feed-settings">
-            <h2 id="feed-settings">FEED</h2>
-            <button
-              className="primary-action"
-              type="button"
-              data-testid="feed-toggle"
-              onClick={toggleFeed}
-            >
-              {running ? 'PAUSE FEED' : 'START FEED'}
-            </button>
+      <section className="config-section" aria-labelledby="feed-settings">
+        <h2 id="feed-settings">FEED</h2>
+        <button
+          className="primary-action"
+          type="button"
+          data-testid="feed-toggle"
+          onClick={toggle}
+        >
+          {running ? 'PAUSE FEED' : 'START FEED'}
+        </button>
 
-            <label className="field">
-              <span>Instruments</span>
-              <select
-                data-testid="instrument-count-select"
-                value={instrumentCount}
-                onChange={(event) =>
-                  setInstrumentCount(Number(event.currentTarget.value))
-                }
-              >
-                <option value="50">50</option>
-                <option value="100">100</option>
-                <option value="150">150</option>
-                <option value="250">250</option>
-                <option value="350">350</option>
-                <option value="500">500</option>
-                <option value="750">750</option>
-                <option value="1000">1,000</option>
-              </select>
-            </label>
+        <label className="field">
+          <span>Instruments</span>
+          <select
+            data-testid="instrument-count-select"
+            value={instrumentCount}
+            onChange={(event) => {
+              actions.resetViewState()
+              setInstrumentCount(Number(event.currentTarget.value))
+            }}
+          >
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="150">150</option>
+            <option value="250">250</option>
+            <option value="350">350</option>
+            <option value="500">500</option>
+            <option value="750">750</option>
+            <option value="1000">1,000</option>
+            <option value="1500">1,500</option>
+            <option value="2500">2,500</option>
+            <option value="5000">5,000</option>
+          </select>
+        </label>
 
-            <label className="field">
-              <span>Load profile</span>
-              <select
-                data-testid="load-profile-select"
-                value={feedLoadProfile}
-                onChange={(event) =>
-                  setFeedLoadProfile(
-                    event.currentTarget.value as FeedLoadProfile,
-                  )
-                }
-              >
-                <option value="low">Low · 1K/s</option>
-                <option value="medium">Medium · 5K/s</option>
-                <option value="high">High · 10K/s</option>
-                <option value="very-high">Very high · 25K/s</option>
-                <option value="max">Max · 100K/s</option>
-                <option value="custom">Custom</option>
-              </select>
-              <small>
-                High is the repeatable default; Max is intentionally saturating.
-              </small>
-            </label>
+        <label className="field">
+          <span>Load profile</span>
+          <select
+            data-testid="load-profile-select"
+            value={feedLoadProfile}
+            onChange={(event) =>
+              setLoadProfile(event.currentTarget.value as FeedLoadProfile)
+            }
+          >
+            <option value="low">Low · 1K/s</option>
+            <option value="medium">Medium · 5K/s</option>
+            <option value="high">High · 10K/s</option>
+            <option value="very-high">Very high · 25K/s</option>
+            <option value="max">Max · 100K/s</option>
+            <option value="custom">Custom</option>
+          </select>
+          <small>
+            High is the repeatable default; Max is intentionally saturating.
+          </small>
+        </label>
 
-            <label className="field rate-field">
-              <span>
-                Target event rate
-                <strong>{formatRate(targetEventsPerSecond)}/s</strong>
-              </span>
-              <input
-                data-testid="target-rate-slider"
-                type="range"
-                min="100"
-                max="100000"
-                step="100"
-                value={targetEventsPerSecond}
-                onChange={(event) =>
-                  setTargetEventsPerSecond(
-                    Number(event.currentTarget.value),
-                  )
-                }
-              />
-              <small>100 — 100,000 events/s</small>
-            </label>
-          </section>
+        <label className="field rate-field">
+          <span>
+            Worker sample generation
+            <strong>{formatRate(targetTicksPerSecond)}/s</strong>
+          </span>
+          <input
+            data-testid="target-rate-slider"
+            type="range"
+            min="100"
+            max="100000"
+            step="100"
+            value={targetTicksPerSecond}
+            onChange={(event) =>
+              setTargetRate(Number(event.currentTarget.value))
+            }
+          />
+          <small>
+            Synthetic quote samples generated inside the worker, not browser
+            events. Repeated instruments are coalesced before each message.
+          </small>
+        </label>
 
-          <section className="config-section" aria-labelledby="render-settings">
-            <h2 id="render-settings">RENDER PATH</h2>
-            <label className="field">
-              <span>Row workload</span>
-              <select
-                data-testid="row-workload-select"
-                value={rowWorkloadMode}
-                onChange={(event) =>
-                  setRowWorkloadMode(
-                    event.currentTarget.value as RowWorkloadMode,
-                  )
-                }
-              >
-                <option value="stable">Stable universe</option>
-                <option value="price-sort">Continuously sort by Last</option>
-                <option value="rotating-filter">
-                  Rotate 20% filtered rows
-                </option>
-                <option value="identity-churn">
-                  Replace 10% of ticker IDs
-                </option>
-              </select>
-              <small>
-                Reorder preserves IDs; filter removes/reinserts rows;
-                replacement forces new row identities.
-              </small>
-            </label>
+        <label className="field">
+          <span>Publish interval</span>
+          <select
+            data-testid="publish-interval-select"
+            value={publishIntervalMs}
+            onChange={(event) =>
+              setPublishInterval(Number(event.currentTarget.value))
+            }
+          >
+            <option value="8">8 ms · 125 msg/s</option>
+            <option value="16">16 ms · 62.5 msg/s</option>
+            <option value="20">20 ms · 50 msg/s</option>
+            <option value="33">33 ms · 30 msg/s</option>
+            <option value="50">50 ms · 20 msg/s</option>
+            <option value="100">100 ms · 10 msg/s</option>
+            <option value="250">250 ms · 4 msg/s</option>
+            <option value="500">500 ms · 2 msg/s</option>
+            <option value="1000">1000 ms · 1 msg/s</option>
+          </select>
+          <small>
+            The worker posts one coalesced update message at this target
+            cadence.
+          </small>
+        </label>
+      </section>
 
-            <label className="field">
-              <span>TanStack core row model</span>
-              <select
-                data-testid="core-row-model-select"
-                value={coreRowModelMode}
-                onChange={(event) =>
-                  setCoreRowModelMode(
-                    event.currentTarget.value as CoreRowModelMode,
-                  )
-                }
-              >
-                <option value="none">Off · source order</option>
-                <option value="sort">Sort Last descending</option>
-                <option value="filter">Filter Ticker</option>
-                <option value="sort-filter">Filter + sort Last</option>
-              </select>
-              <small>
-                Runs inside the selected adapter; unlike Row workload, this is
-                not a pre-transformed array.
-              </small>
-            </label>
+      <section className="config-section" aria-labelledby="render-settings">
+        <h2 id="render-settings">RENDER PATH</h2>
+        <label className="field">
+          <span>TanStack core row model</span>
+          <select
+            data-testid="core-row-model-select"
+            value={coreRowModelMode}
+            onChange={(event) =>
+              setCoreRowModelMode(event.currentTarget.value as CoreRowModelMode)
+            }
+          >
+            <option value="none">Off · source order</option>
+            <option value="sort">Sort Last descending</option>
+            <option value="filter">Filter Symbol</option>
+            <option value="sort-filter">Filter + sort Last</option>
+          </select>
+          <small>
+            Runs inside the selected adapter against the stable market-data
+            array.
+          </small>
+        </label>
 
-            {(coreRowModelMode === 'filter' ||
-              coreRowModelMode === 'sort-filter') && (
-              <label className="field">
-                <span>Ticker contains</span>
-                <input
-                  data-testid="core-filter-input"
-                  type="text"
-                  value={coreFilterValue}
-                  onChange={(event) =>
-                    setCoreFilterValue(event.currentTarget.value)
-                  }
-                />
-                <small>Case-insensitive column filter; try ALP, 1, or R.</small>
-              </label>
-            )}
+        {(coreRowModelMode === 'filter' ||
+          coreRowModelMode === 'sort-filter') && (
+          <label className="field">
+            <span>Symbol contains</span>
+            <input
+              data-testid="core-filter-input"
+              type="text"
+              value={coreFilterValue}
+              onChange={(event) =>
+                setCoreFilterValue(event.currentTarget.value)
+              }
+            />
+            <small>Case-insensitive column filter; try ALP, 1, or R.</small>
+          </label>
+        )}
 
-            <label className="toggle-field">
-              <input
-                type="checkbox"
-                checked={rendererMode === 'swap'}
-                onChange={(event) =>
-                  setRendererMode(
-                    event.currentTarget.checked ? 'swap' : 'stable',
-                  )
-                }
-              />
-              <span>
-                Swap Tick component A ↔ B
-                <small>destroy and recreate when direction changes</small>
-              </span>
-            </label>
+        <label className="toggle-field">
+          <input
+            type="checkbox"
+            checked={rendererMode === 'swap'}
+            onChange={(event) =>
+              setRendererMode(event.currentTarget.checked ? 'swap' : 'stable')
+            }
+          />
+          <span>
+            Swap Tick component A ↔ B
+            <small>destroy and recreate when direction changes</small>
+          </span>
+        </label>
 
-            <label className="toggle-field">
-              <input
-                type="checkbox"
-                checked={updateSparklines}
-                onChange={(event) =>
-                  setUpdateSparklines(event.currentTarget.checked)
-                }
-              />
-              <span>
-                Update sparklines
-                <small>new history input every four quote events</small>
-              </span>
-            </label>
+        <label className="toggle-field">
+          <input
+            type="checkbox"
+            checked={updateSparklines}
+            onChange={(event) =>
+              setSparklineUpdates(event.currentTarget.checked)
+            }
+          />
+          <span>
+            Update intraday charts
+            <small>
+              sample rolling prices independently for every instrument
+            </small>
+          </span>
+        </label>
 
-            <label className="toggle-field">
-              <input
-                type="checkbox"
-                checked={updateQuoteAges}
-                onChange={(event) =>
-                  setUpdateQuoteAges(event.currentTarget.checked)
-                }
-              />
-              <span>
-                Update quote age clock
-                <small>
-                  invalidates every Age cell on a shared 100 ms clock
-                </small>
-              </span>
-            </label>
-          </section>
+        <label className="field">
+          <span>Intraday sample interval</span>
+          <select
+            data-testid="sparkline-sample-interval-select"
+            value={sparklineSampleIntervalMs}
+            onChange={(event) =>
+              setSparklineSampleInterval(Number(event.currentTarget.value))
+            }
+          >
+            <option value="100">100 ms</option>
+            <option value="250">250 ms</option>
+            <option value="500">500 ms</option>
+            <option value="1000">1,000 ms</option>
+            <option value="2000">2,000 ms</option>
+          </select>
+          <small>
+            Minimum time between rolling samples for the same instrument.
+          </small>
+        </label>
+      </section>
 
-          <section className="config-section" aria-labelledby="stress-actions">
-            <h2 id="stress-actions">STRESS ACTIONS</h2>
-            <label className="field">
-              <span>Automated scroll pressure</span>
-              <select
-                data-testid="scroll-stress-select"
-                value={scrollStressMode}
-                onChange={(event) =>
-                  setScrollStressMode(
-                    event.currentTarget.value as ScrollStressMode,
-                  )
-                }
-              >
-                <option value="off">Off</option>
-                <option value="vertical">Vertical · 700 px/s</option>
-                <option value="horizontal">Horizontal · 420 px/s</option>
-                <option value="both">Vertical + horizontal</option>
-              </select>
-              <small>
-                Bounces the real table viewport and records callback rate,
-                distance, and delayed scroll frames.
-              </small>
-            </label>
-            <div className="action-grid">
-              <button type="button" onClick={runBurst}>
-                RUN 25K BURST
-              </button>
-              <button type="button" onClick={resetMarket}>
-                RESET SESSION
-              </button>
-            </div>
-          </section>
+      <section className="config-section" aria-labelledby="stress-actions">
+        <h2 id="stress-actions">STRESS ACTIONS</h2>
+        <label className="field">
+          <span>Automated scroll pressure</span>
+          <select
+            data-testid="scroll-stress-select"
+            value={scrollStressMode}
+            onChange={(event) =>
+              setScrollStressMode(event.currentTarget.value as ScrollStressMode)
+            }
+          >
+            <option value="off">Off</option>
+            <option value="vertical">Vertical · 700 px/s</option>
+            <option value="horizontal">Horizontal · 420 px/s</option>
+            <option value="both">Vertical + horizontal</option>
+          </select>
+          <small>
+            Bounces the real table viewport and records callback rate, distance,
+            and delayed scroll frames.
+          </small>
+        </label>
+        <div className="action-grid">
+          <button type="button" onClick={runBurst}>
+            RUN 25K BURST
+          </button>
+          <button type="button" onClick={resetMarket}>
+            RESET SESSION
+          </button>
+        </div>
+      </section>
 
-          <Diagnostics />
-          <SelectedInstrument />
+      <Diagnostics />
+      <SelectedInstrument />
     </aside>
   )
 }
 
 function MetricsStrip() {
-  const { metrics, longAnimationFramesSupported } =
-    useTradingShellState(
-      (state) => ({
-        metrics: state.metrics,
-        longAnimationFramesSupported: state.longAnimationFramesSupported,
-      }),
-      { compare: shallow },
-    )
+  const { metrics, longAnimationFramesSupported } = useTradingShellState(
+    (state) => ({
+      metrics: state.metrics,
+      longAnimationFramesSupported: state.longAnimationFramesSupported,
+    }),
+    { compare: shallow },
+  )
   return (
     <section className="metrics-strip" aria-label="Live performance metrics">
       <article>
-        <span>THROUGHPUT</span>
+        <span>WORKER SAMPLES</span>
         <strong data-testid="actual-rate">
-          {formatRate(metrics.actualEventsPerSecond)}
+          {formatRate(metrics.actualTicksPerSecond)}
         </strong>
-        <small>events/s</small>
+        <small>generated samples/s</small>
       </article>
       <article>
-        <span>RAF RATE</span>
-        <strong data-testid="raf-rate">
-          {metrics.rafCallbacksPerSecond.toFixed(1)}
+        <span>ROW UPDATES</span>
+        <strong data-testid="row-update-rate">
+          {formatRate(metrics.rowUpdatesPerSecond)}
         </strong>
-        <small>callbacks/s</small>
+        <small>unique rows applied/s</small>
       </article>
       <article>
-        <span>TABLE RENDERS</span>
+        <span>MESSAGES</span>
+        <strong data-testid="message-rate">
+          {metrics.workerMessagesPerSecond.toFixed(1)}
+        </strong>
+        <small>worker messages/s</small>
+      </article>
+      <article>
+        <span>STATE APPLIES</span>
+        <strong data-testid="state-apply-rate">
+          {metrics.stateApplicationsPerSecond.toFixed(1)}
+        </strong>
+        <small>quote snapshots/s</small>
+      </article>
+      <article>
+        <span>TABLE COMMITS</span>
         <strong data-testid="table-render-rate">
           {metrics.tableRendersPerSecond.toFixed(1)}
         </strong>
-        <small>worker batches/s</small>
+        <small>completed renders/s</small>
       </article>
       <article>
         <span>AVG RENDER</span>
@@ -534,13 +514,6 @@ function MetricsStrip() {
           </>
         )}
       </article>
-      <article>
-        <span>TOTAL EVENTS</span>
-        <strong data-testid="total-events">
-          {formatInteger(metrics.totalEvents)}
-        </strong>
-        <small>since reset</small>
-      </article>
     </section>
   )
 }
@@ -635,9 +608,7 @@ function Diagnostics() {
         <div>
           <dt>Profiler base avg</dt>
           <dd>
-            {profilerEnabled
-              ? formatMs(metrics.profilerAverageBaseMs)
-              : 'N/A'}
+            {profilerEnabled ? formatMs(metrics.profilerAverageBaseMs) : 'N/A'}
           </dd>
         </div>
         <div>
@@ -679,7 +650,13 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>Last batch events / rows</dt>
+          <dt>Worker-coalesced updates / s</dt>
+          <dd data-testid="superseded-update-rate">
+            {formatRate(metrics.supersededUpdatesPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Last batch ticks / rows</dt>
           <dd>
             {formatInteger(metrics.lastBatchSize)} /{' '}
             {formatInteger(metrics.lastUpdateCount)}
@@ -711,11 +688,12 @@ function Diagnostics() {
 }
 
 function SelectedInstrument() {
-  const selectedQuote = useTradingShellState(
-    (state) => state.selectedQuote,
-  )
+  const selectedQuote = useTradingShellState((state) => state.selectedQuote)
   return (
-    <section className="config-section selected-instrument">
+    <section
+      className="config-section selected-instrument"
+      data-testid="selected-instrument"
+    >
       <h2>SELECTED INSTRUMENT</h2>
       {selectedQuote ? (
         <>
@@ -734,14 +712,15 @@ function SelectedInstrument() {
             <div>
               <dt>Bid / ask</dt>
               <dd>
-                {selectedQuote.bid.toFixed(2)} /{' '}
-                {selectedQuote.ask.toFixed(2)}
+                {selectedQuote.bid.toFixed(2)} / {selectedQuote.ask.toFixed(2)}
               </dd>
             </div>
           </dl>
         </>
       ) : (
-        <p>Click a value in the Last column to inspect its output.</p>
+        <p>
+          Click or begin a cell selection in any row to inspect its instrument.
+        </p>
       )}
     </section>
   )
@@ -768,8 +747,6 @@ function formatInvocationRates(
   return activeRates.length === 0
     ? 'No calls in sample'
     : activeRates
-        .map(
-          (rate) => `${rate.name} ${formatRate(rate.callsPerSecond)}`,
-        )
+        .map((rate) => `${rate.name} ${formatRate(rate.callsPerSecond)}`)
         .join(' · ')
 }
diff --git a/examples/react/realtime-trading/src/shell/trading-shell-context.tsx b/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
index 90af58c01c..7e287fbfde 100644
--- a/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
+++ b/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
@@ -1,9 +1,13 @@
 import { createStoreContext, useSelector } from '@tanstack/react-store'
 import type { ReactNode } from 'react'
-import type { TradingBenchmarkController } from '../core/use-trading-benchmark-controller'
+import type {
+  MarketFeedController,
+  MarketFeedState,
+} from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/use-trading-benchmark-controller'
 import type {
   TradingBenchmarkState,
-} from '../core/trading-benchmark-controller'
+} from '../benchmark/trading-benchmark-controller'
 import type { UseSelectorOptions } from '@tanstack/react-store'
 
 const {
@@ -11,18 +15,36 @@ const {
   useStoreContext: useTradingShellController,
 } = createStoreContext<TradingBenchmarkController>()
 
+const {
+  StoreProvider: MarketFeedStoreProvider,
+  useStoreContext: useMarketFeedController,
+} = createStoreContext<MarketFeedController>()
+
+export function MarketFeedProvider(props: {
+  controller: MarketFeedController
+  children: ReactNode
+}) {
+  return (
+    <MarketFeedStoreProvider value={props.controller}>
+      {props.children}
+    </MarketFeedStoreProvider>
+  )
+}
+
 export function TradingShellProvider(props: {
   controller: TradingBenchmarkController
   children: ReactNode
 }) {
   return (
-    <TradingStoreProvider value={props.controller}>
-      {props.children}
-    </TradingStoreProvider>
+    <MarketFeedProvider controller={props.controller.feed}>
+      <TradingStoreProvider value={props.controller}>
+        {props.children}
+      </TradingStoreProvider>
+    </MarketFeedProvider>
   )
 }
 
-export { useTradingShellController }
+export { useMarketFeedController, useTradingShellController }
 
 export function useTradingShellState<TSelected>(
   selector: (state: TradingBenchmarkState) => TSelected,
@@ -31,3 +53,11 @@ export function useTradingShellState<TSelected>(
   const controller = useTradingShellController()
   return useSelector(controller.store, selector, options)
 }
+
+export function useMarketFeedState<TSelected>(
+  selector: (state: MarketFeedState) => TSelected,
+  options?: UseSelectorOptions<TSelected>,
+): TSelected {
+  const controller = useMarketFeedController()
+  return useSelector(controller.store, selector, options)
+}
diff --git a/examples/react/realtime-trading/src/quote-cells.tsx b/examples/react/realtime-trading/src/table/table-config/quote-cells.tsx
similarity index 86%
rename from examples/react/realtime-trading/src/quote-cells.tsx
rename to examples/react/realtime-trading/src/table/table-config/quote-cells.tsx
index ab38df1ad8..9401da9cc8 100644
--- a/examples/react/realtime-trading/src/quote-cells.tsx
+++ b/examples/react/realtime-trading/src/table/table-config/quote-cells.tsx
@@ -11,19 +11,19 @@ export const quoteCellLifecycle = {
 }
 
 export const quoteCellRendererNames = [
-  'Ticker',
-  'Venue',
+  'Market',
+  'Name',
+  'Symbol',
+  'Last',
+  'Change',
+  'ChangePercent',
   'Bid',
+  'BidVolume',
   'Ask',
-  'Spread',
-  'Last',
-  'LastMove',
-  'LastQty',
-  'Depth',
-  'QuoteAge',
-  'DayChange',
-  'TotalQty',
-  'TradedValue',
+  'AskVolume',
+  'Open',
+  'High',
+  'Low',
   'Intraday',
 ] as const
 
@@ -32,6 +32,7 @@ export const quoteComponentNames = [
   'StableMoveCell',
   'UpMoveCell',
   'DownMoveCell',
+  'PercentChangeCell',
   'SpreadCell',
   'DepthCell',
   'QuoteAgeCell',
@@ -53,10 +54,7 @@ export const quoteRenderDiagnostics = {
   componentRenderCallsByName: createCounterMap(quoteComponentNames),
 }
 
-export function recordCellRender<T>(
-  name: QuoteCellRendererName,
-  value: T,
-): T {
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
   'use no memo'
   // Benchmark instrumentation is intentionally impure and must run per call.
   quoteRenderDiagnostics.cellRendererCalls++
@@ -112,6 +110,18 @@ export function DownMoveCell({ move }: { move: number }) {
   return <span className="move-cell quote-down">▼ {formatSigned(move)}</span>
 }
 
+export function PercentChangeCell({ value }: { value: number }) {
+  useLifecycleCounter('PercentChangeCell')
+  return (
+    <span
+      className={`percent-change-cell ${value >= 0 ? 'quote-up' : 'quote-down'}`}
+    >
+      {value >= 0 ? '+' : ''}
+      {value.toFixed(2)}%
+    </span>
+  )
+}
+
 export function SpreadCell({ bid, ask }: { bid: number; ask: number }) {
   useLifecycleCounter('SpreadCell')
   const spread = Math.max(0, ask - bid)
@@ -166,6 +176,7 @@ export function QuoteAgeCell({ ageMs }: { ageMs: number }) {
 
 export function SparklineCell({ values }: { values: ReadonlyArray<number> }) {
   useLifecycleCounter('SparklineCell')
+  const rising = (values.at(-1) ?? 0) >= (values[0] ?? 0)
   const min = Math.min(...values)
   const max = Math.max(...values)
   const range = max - min || 1
@@ -179,7 +190,11 @@ export function SparklineCell({ values }: { values: ReadonlyArray<number> }) {
     .join(' ')
 
   return (
-    <svg className="sparkline" viewBox="0 0 100 24" preserveAspectRatio="none">
+    <svg
+      className={`sparkline ${rising ? 'quote-up' : 'quote-down'}`}
+      viewBox="0 0 100 24"
+      preserveAspectRatio="none"
+    >
       <polyline points={points} />
     </svg>
   )
diff --git a/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx b/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
new file mode 100644
index 0000000000..81805efb98
--- /dev/null
+++ b/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
@@ -0,0 +1,351 @@
+import { useMemo } from 'react'
+import { useSelector } from '@tanstack/react-store'
+import { useTradingShellController } from '../../shell/trading-shell-context'
+import {
+  DownMoveCell,
+  PercentChangeCell,
+  PriceCell,
+  SparklineCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells'
+import type { MouseEventHandler, ReactNode } from 'react'
+import type { MarketQuote } from '../../feed/market-data'
+
+export type RendererMode = 'stable' | 'swap'
+export type CoreRowModelMode = 'none' | 'sort' | 'filter' | 'sort-filter'
+
+export interface TradingTableProps {
+  quotes: Array<MarketQuote>
+  coreRowModelMode: CoreRowModelMode
+  coreFilterValue: string
+}
+
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+
+interface TradingCellContext {
+  row: { original: MarketQuote }
+}
+
+export interface TradingColumnDefinition {
+  id: string
+  header: string
+  size?: number
+  columns?: Array<TradingColumnDefinition>
+  accessorFn?: (row: MarketQuote) => unknown
+  enableSorting?: boolean
+  filterFn?: 'includesString'
+  sortFn?: 'basic'
+  cell?: (context: TradingCellContext) => ReactNode
+}
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+export const tradingColumns: Array<TradingColumnDefinition> = [
+  {
+    id: 'instrument',
+    header: 'Instrument',
+    columns: [
+      {
+        id: 'identity',
+        header: 'Identity',
+        columns: [
+          {
+            id: 'market',
+            header: 'Market',
+            size: 72,
+            accessorFn: (row) => row.venue,
+            cell: ({ row }) => recordCellRender('Market', row.original.venue),
+          },
+          {
+            id: 'name',
+            header: 'Name',
+            size: 180,
+            accessorFn: (row) => row.company,
+            cell: ({ row }) => recordCellRender('Name', row.original.company),
+          },
+          {
+            id: 'symbol',
+            header: 'Symbol',
+            size: 92,
+            accessorFn: (row) => row.symbol,
+            filterFn: 'includesString',
+            cell: ({ row }) => recordCellRender('Symbol', row.original.symbol),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'marketData',
+    header: 'Market Data',
+    columns: [
+      {
+        id: 'priceAndChange',
+        header: 'Price & Change',
+        columns: [
+          {
+            id: 'price',
+            header: 'Price',
+            size: 96,
+            accessorFn: (row) => row.price,
+            sortFn: 'basic',
+            cell: ({ row }) =>
+              recordCellRender('Last', <LastPriceCell quote={row.original} />),
+          },
+          {
+            id: 'change',
+            header: 'Chg',
+            size: 94,
+            accessorFn: (row) => getDayChange(row),
+            cell: ({ row }) =>
+              recordCellRender(
+                'Change',
+                <DayChangeCell quote={row.original} />,
+              ),
+          },
+          {
+            id: 'changePercent',
+            header: 'Chg%',
+            size: 90,
+            accessorFn: (row) => getDayChangePercent(row),
+            cell: ({ row }) =>
+              recordCellRender(
+                'ChangePercent',
+                <PercentChangeCell value={getDayChangePercent(row.original)} />,
+              ),
+          },
+        ],
+      },
+      {
+        id: 'orderBook',
+        header: 'Order Book',
+        columns: [
+          {
+            id: 'bid',
+            header: 'Bid',
+            size: 90,
+            accessorFn: (row) => row.bid,
+            cell: ({ row }) =>
+              recordCellRender('Bid', row.original.bid.toFixed(2)),
+          },
+          {
+            id: 'bidSize',
+            header: 'Bid Vol',
+            size: 100,
+            accessorFn: (row) => row.bidSize,
+            cell: ({ row }) =>
+              recordCellRender(
+                'BidVolume',
+                compactFormatter.format(row.original.bidSize),
+              ),
+          },
+          {
+            id: 'ask',
+            header: 'Ask',
+            size: 90,
+            accessorFn: (row) => row.ask,
+            cell: ({ row }) =>
+              recordCellRender('Ask', row.original.ask.toFixed(2)),
+          },
+          {
+            id: 'askSize',
+            header: 'Ask Vol',
+            size: 100,
+            accessorFn: (row) => row.askSize,
+            cell: ({ row }) =>
+              recordCellRender(
+                'AskVolume',
+                compactFormatter.format(row.original.askSize),
+              ),
+          },
+        ],
+      },
+      {
+        id: 'session',
+        header: 'Session',
+        columns: [
+          {
+            id: 'open',
+            header: 'Open',
+            size: 90,
+            accessorFn: (row) => row.open,
+            cell: ({ row }) =>
+              recordCellRender('Open', row.original.open.toFixed(2)),
+          },
+          {
+            id: 'high',
+            header: 'High',
+            size: 90,
+            accessorFn: (row) => row.high,
+            cell: ({ row }) =>
+              recordCellRender('High', row.original.high.toFixed(2)),
+          },
+          {
+            id: 'low',
+            header: 'Low',
+            size: 90,
+            accessorFn: (row) => row.low,
+            cell: ({ row }) =>
+              recordCellRender('Low', row.original.low.toFixed(2)),
+          },
+        ],
+      },
+      {
+        id: 'chart',
+        header: 'Chart',
+        columns: [
+          {
+            id: 'history',
+            header: 'Intraday',
+            size: 150,
+            enableSorting: false,
+            cell: ({ row }) =>
+              recordCellRender(
+                'Intraday',
+                <SparklineCell values={row.original.history} />,
+              ),
+          },
+        ],
+      },
+    ],
+  },
+]
+
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
+
+export const TRADING_COLUMN_COUNT = 14
+
+export function getCoreTableState(props: TradingTableProps) {
+  const sorts =
+    props.coreRowModelMode === 'sort' ||
+    props.coreRowModelMode === 'sort-filter'
+  const filters =
+    (props.coreRowModelMode === 'filter' ||
+      props.coreRowModelMode === 'sort-filter') &&
+    props.coreFilterValue.trim().length > 0
+
+  return {
+    sorting: sorts ? [{ id: 'price', desc: true }] : [],
+    columnFilters: filters
+      ? [{ id: 'symbol', value: props.coreFilterValue.trim() }]
+      : [],
+  } satisfies CoreTableState
+}
+
+export function useCoreTableState(props: TradingTableProps) {
+  return useMemo(
+    () => getCoreTableState(props),
+    [props.coreFilterValue, props.coreRowModelMode],
+  )
+}
+
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(
+    rowModelDiagnostics.maxDurationMs,
+    duration,
+  )
+  rowModelDiagnostics.lastRowCount = rows.length
+
+  try {
+    performance.measure('tanstack-row-model', {
+      start,
+      end,
+      detail: { rowCount: rows.length },
+    })
+    if (rowModelDiagnostics.calls % 1_000 === 0) {
+      performance.clearMeasures('tanstack-row-model')
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+
+  return rows
+}
+
+function LastPriceCell(props: { quote: MarketQuote }) {
+  const { selectSymbol } = useTradingShellController().actions
+  return (
+    <PriceCell
+      price={props.quote.price}
+      move={getDayChange(props.quote)}
+      onSelect={() => selectSymbol(props.quote.symbol)}
+    />
+  )
+}
+
+function DayChangeCell(props: { quote: MarketQuote }) {
+  const { rendererMode } = useTradingShellController().renderAtoms
+  const mode = useSelector(rendererMode)
+  const change = getDayChange(props.quote)
+  if (mode === 'stable') {
+    return <StableMoveCell move={change} />
+  }
+  return change >= 0 ? (
+    <UpMoveCell move={change} />
+  ) : (
+    <DownMoveCell move={change} />
+  )
+}
+
+export function TradingRow(props: {
+  quote: MarketQuote
+  children: ReactNode
+  rowSelected: boolean
+  onMouseDown: MouseEventHandler<HTMLTableRowElement>
+  onClick: MouseEventHandler<HTMLTableRowElement>
+}) {
+  const { selectedSymbol } = useTradingShellController().renderAtoms
+  const selected = useSelector(
+    selectedSymbol,
+    (symbol) => symbol === props.quote.symbol,
+  )
+  return (
+    <tr
+      className={[
+        selected ? 'is-symbol-selected' : '',
+        props.rowSelected ? 'is-row-selected' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      data-symbol={props.quote.symbol}
+      data-row-id={props.quote.id}
+      title={props.quote.company}
+      aria-selected={props.rowSelected}
+      onMouseDown={props.onMouseDown}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </tr>
+  )
+}
+
+function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+
+function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/react/realtime-trading/src/table/table-interactions.ts b/examples/react/realtime-trading/src/table/table-interactions.ts
new file mode 100644
index 0000000000..b976fa4ac7
--- /dev/null
+++ b/examples/react/realtime-trading/src/table/table-interactions.ts
@@ -0,0 +1,107 @@
+import type {
+  AriaAttributes,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+} from 'react'
+
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: ReactMouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    nativeEvent: event.nativeEvent,
+  })
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: ReactKeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): AriaAttributes['aria-sort'] {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/react/realtime-trading/src/table/trading-table.tsx b/examples/react/realtime-trading/src/table/trading-table.tsx
new file mode 100644
index 0000000000..fba3e310e1
--- /dev/null
+++ b/examples/react/realtime-trading/src/table/trading-table.tsx
@@ -0,0 +1,505 @@
+import {
+  FlexRender,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  sortFn_basic,
+  stockFeatures,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
+import { useLayoutEffect, useRef } from 'react'
+import { useTableBenchmark } from '../benchmark/use-table-benchmark'
+import {
+  useMarketFeedController,
+  useTradingShellController,
+  useTradingShellState,
+} from '../shell/trading-shell-context'
+import {
+  TradingRow,
+  readMeasuredRows,
+  tradingColumns,
+} from './table-config/trading-table-config'
+import {
+  handleCellNavigation,
+  reorderColumnIds,
+  selectRowFromPointer,
+  sortAriaValue,
+  sortIndicator,
+} from './table-interactions'
+import type {
+  CellSelectionBounds,
+  CellSelectionState,
+} from '@tanstack/react-table'
+import type { MarketQuote } from '../feed/market-data'
+import type { CoreTableState } from './table-config/trading-table-config'
+
+export {
+  TRADING_COLUMN_COUNT,
+  getCoreTableState,
+  rowModelDiagnostics,
+} from './table-config/trading-table-config'
+export type {
+  CoreRowModelMode,
+  CoreTableState,
+  RendererMode,
+  TradingTableProps,
+} from './table-config/trading-table-config'
+
+const features = tableFeatures({
+  ...stockFeatures,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { basic: sortFn_basic },
+})
+
+export function TradingTable() {
+  const controller = useTradingShellController()
+  const feed = useMarketFeedController()
+  const quotes = useTradingShellState((state) => state.displayQuotes)
+  const scrollStressMode = useTradingShellState(
+    (state) => state.scrollStressMode,
+  )
+
+  useLayoutEffect(() => feed.completeRender())
+  useTableBenchmark(controller, scrollStressMode)
+  const table = useTradingTable({
+    quotes,
+    tableAtoms: controller.tableAtoms,
+  })
+  const layoutRefs = useTradingTableLayout(table)
+
+  return (
+    <div
+      ref={layoutRefs.scrollRef}
+      className="table-scroll"
+      data-trading-table
+      tabIndex={0}
+      onKeyDown={(event) => handleCellNavigation(table, event)}
+    >
+      <table
+        ref={layoutRefs.tableRef}
+        className="trading-data-grid"
+        role="grid"
+        aria-multiselectable="true"
+      >
+        <TradingTableHeader table={table} />
+        <TradingTableBody table={table} quotes={quotes} />
+      </table>
+    </div>
+  )
+}
+
+type TradingTableInstance = ReturnType<typeof useTradingTable>
+
+interface ColumnDragRuntime {
+  columnId: string | null
+  sourceElement: HTMLTableCellElement | null
+  targetElement: HTMLTableCellElement | null
+}
+
+function clearColumnDrag(runtime: ColumnDragRuntime): void {
+  runtime.sourceElement?.classList.remove('is-column-dragging')
+  runtime.targetElement?.classList.remove('is-column-drop-target')
+  runtime.columnId = null
+  runtime.sourceElement = null
+  runtime.targetElement = null
+}
+
+function showColumnDropTarget(
+  runtime: ColumnDragRuntime,
+  targetColumnId: string,
+  targetElement: HTMLTableCellElement | null,
+): void {
+  runtime.targetElement?.classList.remove('is-column-drop-target')
+  runtime.targetElement = null
+  if (runtime.columnId === targetColumnId || !targetElement) return
+  targetElement.classList.add('is-column-drop-target')
+  runtime.targetElement = targetElement
+}
+
+function useTradingTableLayout(table: TradingTableInstance) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const tableRef = useRef<HTMLTableElement>(null)
+  const fitRuntime = useRef({ manuallyResized: false })
+
+  useLayoutEffect(() => {
+    const writeColumnSizes = () => {
+      const tableElement = tableRef.current
+      if (!tableElement) return
+      for (const header of table.getFlatHeaders()) {
+        tableElement.style.setProperty(
+          `--header-${header.id}-size`,
+          String(header.getSize()),
+        )
+        tableElement.style.setProperty(
+          `--col-${header.column.id}-size`,
+          String(header.column.getSize()),
+        )
+      }
+      tableElement.style.width = `${table.getTotalSize()}px`
+    }
+
+    writeColumnSizes()
+    const sizingSubscription =
+      table.atoms.columnSizing.subscribe(writeColumnSizes)
+    const orderSubscription =
+      table.atoms.columnOrder.subscribe(writeColumnSizes)
+    const fitAvailableWidth = () => {
+      const scrollElement = scrollRef.current
+      if (!scrollElement || fitRuntime.current.manuallyResized) return
+      const currentWidth = table.getTotalSize()
+      const availableWidth = scrollElement.clientWidth
+      if (availableWidth <= currentWidth + 1 || currentWidth <= 0) return
+
+      const ratio = availableWidth / currentWidth
+      table.setColumnSizing(
+        Object.fromEntries(
+          table
+            .getVisibleLeafColumns()
+            .map((column) => [column.id, column.getSize() * ratio]),
+        ),
+      )
+    }
+    const resizeObserver = new ResizeObserver(fitAvailableWidth)
+    const resizingSubscription = table.atoms.columnResizing.subscribe(
+      (state) => {
+        if (state.isResizingColumn !== false) {
+          fitRuntime.current.manuallyResized = true
+        }
+      },
+    )
+    if (scrollRef.current) resizeObserver.observe(scrollRef.current)
+    fitAvailableWidth()
+
+    return () => {
+      sizingSubscription.unsubscribe()
+      orderSubscription.unsubscribe()
+      resizingSubscription.unsubscribe()
+      resizeObserver.disconnect()
+    }
+  }, [table])
+
+  return { scrollRef, tableRef }
+}
+
+function TradingTableHeader(props: { table: TradingTableInstance }) {
+  const dragRuntime = useRef<ColumnDragRuntime>({
+    columnId: null,
+    sourceElement: null,
+    targetElement: null,
+  })
+
+  return (
+    <props.table.Subscribe
+      selector={(state) => ({
+        columnOrder: state.columnOrder,
+        sorting: state.sorting,
+      })}
+    >
+      {() => (
+        <thead>
+          {props.table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                const isLeaf = header.subHeaders.length === 0
+                const sorted = header.column.getIsSorted()
+                return (
+                  <th
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    style={{
+                      width: `calc(var(--header-${header.id}-size) * 1px)`,
+                    }}
+                    className={getHeaderClassName(header)}
+                    aria-sort={isLeaf ? sortAriaValue(sorted) : undefined}
+                  >
+                    {!header.isPlaceholder &&
+                      (isLeaf ? (
+                        <>
+                          <div
+                            className="leaf-header-content"
+                            onDragOver={(event) => {
+                              event.preventDefault()
+                              showColumnDropTarget(
+                                dragRuntime.current,
+                                header.column.id,
+                                event.currentTarget.closest('th'),
+                              )
+                            }}
+                            onDrop={(event) => {
+                              event.preventDefault()
+                              const sourceId =
+                                event.dataTransfer.getData('text/plain') ||
+                                dragRuntime.current.columnId
+                              if (sourceId) {
+                                props.table.setColumnOrder(
+                                  reorderColumnIds(
+                                    props.table
+                                      .getVisibleLeafColumns()
+                                      .map((column) => column.id),
+                                    sourceId,
+                                    header.column.id,
+                                  ),
+                                )
+                              }
+                              clearColumnDrag(dragRuntime.current)
+                            }}
+                          >
+                            <button
+                              type="button"
+                              className="column-drag-handle"
+                              draggable
+                              aria-label={`Move ${header.column.id} column`}
+                              onDragStart={(event) => {
+                                const runtime = dragRuntime.current
+                                runtime.columnId = header.column.id
+                                runtime.sourceElement =
+                                  event.currentTarget.closest('th')
+                                runtime.sourceElement?.classList.add(
+                                  'is-column-dragging',
+                                )
+                                event.dataTransfer.effectAllowed = 'move'
+                                event.dataTransfer.setData(
+                                  'text/plain',
+                                  header.column.id,
+                                )
+                              }}
+                              onDragEnd={() => {
+                                clearColumnDrag(dragRuntime.current)
+                              }}
+                            >
+                              ⋮⋮
+                            </button>
+                            <button
+                              type="button"
+                              className={`sort-header-button${
+                                header.column.getCanSort() ? ' is-sortable' : ''
+                              }`}
+                              disabled={!header.column.getCanSort()}
+                              onClick={header.column.getToggleSortingHandler()}
+                            >
+                              <span className="header-label">
+                                <FlexRender header={header} />
+                              </span>
+                              {header.column.getCanSort() && (
+                                <span
+                                  className={`sort-indicator${
+                                    sorted ? ' is-active' : ''
+                                  }`}
+                                  aria-hidden="true"
+                                >
+                                  {sortIndicator(sorted)}
+                                </span>
+                              )}
+                            </button>
+                          </div>
+                          {header.column.getCanResize() && (
+                            <props.table.Subscribe
+                              selector={(state) =>
+                                state.columnResizing.isResizingColumn ===
+                                header.column.id
+                              }
+                            >
+                              {(isResizing) => (
+                                <div
+                                  className={`column-resize-handle${
+                                    isResizing ? ' is-resizing' : ''
+                                  }`}
+                                  role="separator"
+                                  aria-orientation="vertical"
+                                  onDoubleClick={() =>
+                                    header.column.resetSize()
+                                  }
+                                  onMouseDown={header.getResizeHandler()}
+                                  onTouchStart={header.getResizeHandler()}
+                                />
+                              )}
+                            </props.table.Subscribe>
+                          )}
+                        </>
+                      ) : (
+                        <FlexRender header={header} />
+                      ))}
+                  </th>
+                )
+              })}
+            </tr>
+          ))}
+        </thead>
+      )}
+    </props.table.Subscribe>
+  )
+}
+
+function useTradingTable(props: {
+  quotes: Array<MarketQuote>
+  tableAtoms: ReturnType<typeof useTradingShellController>['tableAtoms']
+}) {
+  return useTable(
+    {
+      key: 'react-realtime-trading',
+      features,
+      columns: tradingColumns,
+      data: props.quotes,
+      getRowId: (row) => row.id,
+      atoms: props.tableAtoms,
+      columnResizeMode: 'onChange',
+      defaultColumn: { minSize: 56, maxSize: 800 },
+      autoResetCellSelection: false,
+    },
+    () => null,
+  )
+}
+
+function TradingTableBody(props: {
+  table: ReturnType<typeof useTradingTable>
+  quotes: Array<MarketQuote>
+}) {
+  return (
+    <props.table.Subscribe
+      selector={(state) => ({
+        sorting: state.sorting,
+        columnFilters: state.columnFilters,
+        columnOrder: state.columnOrder,
+      })}
+    >
+      {(coreState) => (
+        <TradingRows
+          table={props.table}
+          quoteSnapshot={props.quotes}
+          coreState={coreState}
+        />
+      )}
+    </props.table.Subscribe>
+  )
+}
+
+function TradingRows(props: {
+  table: ReturnType<typeof useTradingTable>
+  quoteSnapshot: Array<MarketQuote>
+  coreState: CoreTableState
+}) {
+  const { selectSymbol } = useTradingShellController().actions
+  const rows = readRows(props.table, props.quoteSnapshot, props.coreState)
+
+  return (
+    <tbody data-source-row-count={props.quoteSnapshot.length}>
+      {rows.map((row) => (
+        <props.table.Subscribe
+          key={row.id}
+          selector={(state) =>
+            `${row.id in state.rowSelection ? 1 : 0}:${cellSelectionRowKey(
+              state.cellSelection,
+              props.table.getCellSelectionBounds(),
+              row.getDisplayIndex(),
+              row.id,
+            )}`
+          }
+        >
+          {() => (
+            <TradingRow
+              quote={row.original}
+              rowSelected={row.getIsSelected()}
+              onMouseDown={(event) => {
+                if (event.button === 0) selectSymbol(row.original.symbol)
+              }}
+              onClick={(event) => selectRowFromPointer(props.table, row, event)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <td
+                  key={cell.id}
+                  style={{
+                    width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                  }}
+                  className={getCellClassName(cell)}
+                  aria-selected={cell.getIsSelected()}
+                  tabIndex={cell.getTabIndex()}
+                  onMouseDown={cell.getSelectionStartHandler()}
+                  onMouseEnter={cell.getSelectionExtendHandler()}
+                >
+                  <FlexRender cell={cell} />
+                </td>
+              ))}
+            </TradingRow>
+          )}
+        </props.table.Subscribe>
+      ))}
+    </tbody>
+  )
+}
+
+function getHeaderClassName(header: {
+  subHeaders: ReadonlyArray<unknown>
+  column: { id: string }
+}): string | undefined {
+  if (header.subHeaders.length > 0) return 'column-group-header'
+  return isIdentityColumn(header.column.id) ? undefined : 'numeric-header'
+}
+
+function getCellClassName(cell: {
+  column: { id: string }
+  getIsFocused: () => boolean
+  getIsSelected: () => boolean
+  getSelectionEdges: () => {
+    top: boolean
+    right: boolean
+    bottom: boolean
+    left: boolean
+  }
+}): string {
+  const columnId = cell.column.id
+  const edges = cell.getSelectionEdges()
+  const classes = [
+    columnId === 'market'
+      ? 'market-cell'
+      : columnId === 'name'
+        ? 'name-cell'
+        : columnId === 'symbol'
+          ? 'symbol-cell'
+          : 'numeric-cell',
+  ]
+  if (cell.getIsSelected()) classes.push('is-cell-selected')
+  if (cell.getIsFocused()) classes.push('is-cell-focused')
+  if (edges.top) classes.push('selection-top')
+  if (edges.right) classes.push('selection-right')
+  if (edges.bottom) classes.push('selection-bottom')
+  if (edges.left) classes.push('selection-left')
+  return classes.join(' ')
+}
+
+function isIdentityColumn(columnId: string): boolean {
+  return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
+}
+
+function readRows(
+  table: ReturnType<typeof useTradingTable>,
+  quoteSnapshot: Array<MarketQuote>,
+  coreState: CoreTableState,
+) {
+  void quoteSnapshot
+  void coreState
+  return readMeasuredRows(() => table.getRowModel().rows)
+}
+
+function cellSelectionRowKey(
+  ranges: CellSelectionState,
+  bounds: Array<CellSelectionBounds>,
+  rowIndex: number,
+  rowId: string,
+): string {
+  const active = ranges.at(-1)
+  const initial =
+    active?.anchorRowId === rowId ? `f${active.anchorColumnId}` : ''
+
+  return bounds.reduce((key, bound) => {
+    const self = rowIndex >= bound.minRowIndex && rowIndex <= bound.maxRowIndex
+    const above =
+      rowIndex - 1 >= bound.minRowIndex && rowIndex - 1 <= bound.maxRowIndex
+    const below =
+      rowIndex + 1 >= bound.minRowIndex && rowIndex + 1 <= bound.maxRowIndex
+    if (!self && !above && !below) return key
+    return `${key}|${self ? 1 : 0}${above ? 1 : 0}${below ? 1 : 0}:${bound.minColumnIndex}-${bound.maxColumnIndex}`
+  }, initial)
+}
diff --git a/examples/react/realtime-trading/src/trading-table-local.tsx b/examples/react/realtime-trading/src/trading-table-local.tsx
deleted file mode 100644
index a732ead873..0000000000
--- a/examples/react/realtime-trading/src/trading-table-local.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  FlexRender,
-  createFilteredRowModel,
-  createSortedRowModel,
-  filterFn_includesString,
-  sortFn_basic,
-  stockFeatures,
-  tableFeatures,
-  useTable,
-} from '@tanstack/react-table'
-import {
-  TradingRow,
-  readMeasuredRows,
-  tradingColumns,
-} from './trading-table-shared'
-import { useTableBenchmark } from './benchmark/use-table-benchmark'
-import {
-  useTradingShellController,
-  useTradingShellState,
-} from './shell/trading-shell-context'
-import type { MarketQuote } from './market-data'
-import type { CoreTableState } from './trading-table-shared'
-
-const localFeatures = tableFeatures({
-  ...stockFeatures,
-  filteredRowModel: createFilteredRowModel(),
-  sortedRowModel: createSortedRowModel(),
-  filterFns: { includesString: filterFn_includesString },
-  sortFns: { basic: sortFn_basic },
-})
-
-export function LocalTradingTable() {
-  const controller = useTradingShellController()
-  const quotes = useTradingShellState((state) => state.displayQuotes)
-  const scrollStressMode = useTradingShellState(
-    (state) => state.scrollStressMode,
-  )
-
-  useTableBenchmark(controller, 'local', scrollStressMode)
-  const table = useLocalTradingTable({
-    quotes,
-    tableAtoms: controller.tableAtoms,
-  })
-
-  return (
-    <div className="table-scroll" data-table-adapter="local">
-      <table style={{ width: table.getTotalSize() }}>
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th key={header.id} style={{ width: header.getSize() }}>
-                  {!header.isPlaceholder && <FlexRender header={header} />}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <LocalTradingTableBody table={table} quotes={quotes} />
-      </table>
-    </div>
-  )
-}
-
-function useLocalTradingTable(props: {
-  quotes: Array<MarketQuote>
-  tableAtoms: ReturnType<typeof useTradingShellController>['tableAtoms']
-}) {
-  return useTable(
-    {
-      key: 'react-realtime-trading-local',
-      features: localFeatures,
-      columns: tradingColumns,
-      data: props.quotes,
-      getRowId: (row) => row.id,
-      atoms: props.tableAtoms,
-    },
-    () => null,
-  )
-}
-
-function LocalTradingTableBody(props: {
-  table: ReturnType<typeof useLocalTradingTable>
-  quotes: Array<MarketQuote>
-}) {
-  return (
-    <props.table.Subscribe
-      selector={(state) => ({
-        sorting: state.sorting,
-        columnFilters: state.columnFilters,
-      })}
-    >
-      {(coreState) => (
-        <LocalTradingRows
-          table={props.table}
-          quoteSnapshot={props.quotes}
-          coreState={coreState}
-        />
-      )}
-    </props.table.Subscribe>
-  )
-}
-
-function LocalTradingRows(props: {
-  table: ReturnType<typeof useLocalTradingTable>
-  quoteSnapshot: Array<MarketQuote>
-  coreState: CoreTableState
-}) {
-  const rows = readLocalRows(props.table, props.quoteSnapshot, props.coreState)
-
-  return (
-    <tbody data-source-row-count={props.quoteSnapshot.length}>
-      {rows.map((row) => (
-        <TradingRow key={row.id} quote={row.original}>
-          {row.getVisibleCells().map((cell) => (
-            <td
-              key={cell.id}
-              style={{ width: cell.column.getSize() }}
-              className={
-                cell.column.id !== 'symbol' && cell.column.id !== 'venue'
-                  ? 'numeric-cell'
-                  : undefined
-              }
-            >
-              <FlexRender cell={cell} />
-            </td>
-          ))}
-        </TradingRow>
-      ))}
-    </tbody>
-  )
-}
-
-function readLocalRows(
-  table: ReturnType<typeof useLocalTradingTable>,
-  quoteSnapshot: Array<MarketQuote>,
-  coreState: CoreTableState,
-) {
-  // These explicit inputs describe the external dependencies behind the
-  // table's mutable row-model API to React Compiler.
-  void quoteSnapshot
-  void coreState
-  return readMeasuredRows('local', () => table.getRowModel().rows)
-}
diff --git a/examples/react/realtime-trading/src/trading-table-shared.tsx b/examples/react/realtime-trading/src/trading-table-shared.tsx
deleted file mode 100644
index 8071159ce0..0000000000
--- a/examples/react/realtime-trading/src/trading-table-shared.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-import { useMemo } from 'react'
-import { useSelector } from '@tanstack/react-store'
-import {
-  DepthCell,
-  DownMoveCell,
-  PriceCell,
-  QuoteAgeCell,
-  SparklineCell,
-  SpreadCell,
-  StableMoveCell,
-  UpMoveCell,
-  recordCellRender,
-} from './quote-cells'
-import {
-  useTradingShellController,
-} from './shell/trading-shell-context'
-import type { ReactNode } from 'react'
-import type { MarketQuote } from './market-data'
-
-export type RendererMode = 'stable' | 'swap'
-export type TableAdapter = 'local' | 'v8'
-export type CoreRowModelMode = 'none' | 'sort' | 'filter' | 'sort-filter'
-
-export interface TradingTableProps {
-  quotes: Array<MarketQuote>
-  coreRowModelMode: CoreRowModelMode
-  coreFilterValue: string
-}
-
-export interface CoreTableState {
-  sorting: Array<{ id: string; desc: boolean }>
-  columnFilters: Array<{ id: string; value: unknown }>
-}
-
-interface TradingCellContext {
-  row: { original: MarketQuote }
-}
-
-export interface TradingColumnDefinition {
-  id: string
-  header: string
-  size: number
-  accessorFn?: (row: MarketQuote) => unknown
-  filterFn?: 'includesString'
-  sortFn?: 'basic'
-  cell: (context: TradingCellContext) => ReactNode
-}
-
-const compactFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-})
-const currencyFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-  style: 'currency',
-  currency: 'USD',
-})
-
-export const tradingColumns: Array<TradingColumnDefinition> = [
-  {
-    id: 'symbol',
-    header: 'Ticker',
-    size: 90,
-    accessorFn: (row) => row.symbol,
-    filterFn: 'includesString',
-    cell: ({ row }) => recordCellRender('Ticker', row.original.symbol),
-  },
-  {
-    id: 'venue',
-    header: 'Venue',
-    size: 70,
-    cell: ({ row }) => recordCellRender('Venue', row.original.venue),
-  },
-  {
-    id: 'bid',
-    header: 'Bid',
-    size: 90,
-    cell: ({ row }) =>
-      recordCellRender('Bid', row.original.bid.toFixed(2)),
-  },
-  {
-    id: 'ask',
-    header: 'Ask',
-    size: 90,
-    cell: ({ row }) =>
-      recordCellRender('Ask', row.original.ask.toFixed(2)),
-  },
-  {
-    id: 'spread',
-    header: 'Spread',
-    size: 95,
-    cell: ({ row }) =>
-      recordCellRender(
-        'Spread',
-        <SpreadCell bid={row.original.bid} ask={row.original.ask} />,
-      ),
-  },
-  {
-    id: 'price',
-    header: 'Last',
-    size: 100,
-    accessorFn: (row) => row.price,
-    sortFn: 'basic',
-    cell: ({ row }) =>
-      recordCellRender('Last', <LastPriceCell quote={row.original} />),
-  },
-  {
-    id: 'lastMove',
-    header: 'Last Move',
-    size: 105,
-    cell: ({ row }) =>
-      recordCellRender('LastMove', <LastMoveCell quote={row.original} />),
-  },
-  {
-    id: 'lastSize',
-    header: 'Last Qty',
-    size: 90,
-    cell: ({ row }) =>
-      recordCellRender(
-        'LastQty',
-        compactFormatter.format(row.original.lastSize),
-      ),
-  },
-  {
-    id: 'depth',
-    header: 'Bid / Ask Qty',
-    size: 145,
-    cell: ({ row }) =>
-      recordCellRender(
-        'Depth',
-        <DepthCell
-          bidSize={row.original.bidSize}
-          askSize={row.original.askSize}
-        />,
-      ),
-  },
-  {
-    id: 'age',
-    header: 'Quote Age',
-    size: 85,
-    cell: ({ row }) =>
-      recordCellRender('QuoteAge', <AgeCell quote={row.original} />),
-  },
-  {
-    id: 'change',
-    header: 'Day %',
-    size: 90,
-    cell: ({ row }) =>
-      recordCellRender(
-        'DayChange',
-        formatDayChange(row.original.price, row.original.open),
-      ),
-  },
-  {
-    id: 'volume',
-    header: 'Total Qty',
-    size: 100,
-    cell: ({ row }) =>
-      recordCellRender(
-        'TotalQty',
-        compactFormatter.format(row.original.volume),
-      ),
-  },
-  {
-    id: 'turnover',
-    header: 'Traded Value',
-    size: 115,
-    cell: ({ row }) =>
-      recordCellRender(
-        'TradedValue',
-        currencyFormatter.format(row.original.turnover),
-      ),
-  },
-  {
-    id: 'history',
-    header: 'Intraday',
-    size: 150,
-    cell: ({ row }) =>
-      recordCellRender(
-        'Intraday',
-        <SparklineCell values={row.original.history} />,
-      ),
-  },
-]
-
-export const rowModelDiagnostics = {
-  hasMeasurement: false,
-  calls: 0,
-  totalDurationMs: 0,
-  maxDurationMs: 0,
-  lastRowCount: 0,
-}
-
-export const TRADING_COLUMN_COUNT = tradingColumns.length
-
-export function getCoreTableState(props: TradingTableProps) {
-  const sorts =
-    props.coreRowModelMode === 'sort' ||
-    props.coreRowModelMode === 'sort-filter'
-  const filters =
-    (props.coreRowModelMode === 'filter' ||
-      props.coreRowModelMode === 'sort-filter') &&
-    props.coreFilterValue.trim().length > 0
-
-  return {
-    sorting: sorts ? [{ id: 'price', desc: true }] : [],
-    columnFilters: filters
-      ? [{ id: 'symbol', value: props.coreFilterValue.trim() }]
-      : [],
-  } satisfies CoreTableState
-}
-
-export function useCoreTableState(props: TradingTableProps) {
-  return useMemo(
-    () => getCoreTableState(props),
-    [props.coreFilterValue, props.coreRowModelMode],
-  )
-}
-
-export function readMeasuredRows<Row>(
-  adapter: TableAdapter,
-  readRows: () => Array<Row>,
-): Array<Row> {
-  const start = performance.now()
-  const rows = readRows()
-  const end = performance.now()
-  const duration = end - start
-
-  rowModelDiagnostics.calls++
-  rowModelDiagnostics.hasMeasurement = true
-  rowModelDiagnostics.totalDurationMs += duration
-  rowModelDiagnostics.maxDurationMs = Math.max(
-    rowModelDiagnostics.maxDurationMs,
-    duration,
-  )
-  rowModelDiagnostics.lastRowCount = rows.length
-
-  try {
-    performance.measure('tanstack-row-model', {
-      start,
-      end,
-      detail: { adapter, rowCount: rows.length },
-    })
-    if (rowModelDiagnostics.calls % 1_000 === 0) {
-      performance.clearMeasures('tanstack-row-model')
-    }
-  } catch {
-    // User Timing Level 3 detail is not implemented in every browser.
-  }
-
-  return rows
-}
-
-function LastPriceCell(props: { quote: MarketQuote }) {
-  const { selectSymbol } = useTradingShellController().actions
-  return (
-    <PriceCell
-      price={props.quote.price}
-      move={props.quote.lastMove}
-      onSelect={() => selectSymbol(props.quote.symbol)}
-    />
-  )
-}
-
-function LastMoveCell(props: { quote: MarketQuote }) {
-  const { rendererMode } = useTradingShellController().renderAtoms
-  const mode = useSelector(rendererMode)
-  if (mode === 'stable') {
-    return <StableMoveCell move={props.quote.lastMove} />
-  }
-  return props.quote.lastMove >= 0 ? (
-    <UpMoveCell move={props.quote.lastMove} />
-  ) : (
-    <DownMoveCell move={props.quote.lastMove} />
-  )
-}
-
-function AgeCell(props: { quote: MarketQuote }) {
-  const { quoteAge } = useTradingShellController().renderAtoms
-  const { enabled, clock } = useSelector(quoteAge)
-  return (
-    <QuoteAgeCell
-      ageMs={
-        enabled
-          ? Math.max(0, clock - props.quote.lastUpdatedAt)
-          : 0
-      }
-    />
-  )
-}
-
-export function TradingRow(props: {
-  quote: MarketQuote
-  children: ReactNode
-}) {
-  const { selectedSymbol } = useTradingShellController().renderAtoms
-  const selected = useSelector(
-    selectedSymbol,
-    (symbol) => symbol === props.quote.symbol,
-  )
-  return (
-    <tr
-      className={selected ? 'is-selected' : undefined}
-      data-symbol={props.quote.symbol}
-      data-row-id={props.quote.id}
-      title={props.quote.company}
-    >
-      {props.children}
-    </tr>
-  )
-}
-
-function formatDayChange(price: number, open: number): string {
-  const change = (price / open - 1) * 100
-  return `${change >= 0 ? '+' : ''}${change.toFixed(2)}%`
-}
diff --git a/examples/react/realtime-trading/src/trading-table-v8.tsx b/examples/react/realtime-trading/src/trading-table-v8.tsx
deleted file mode 100644
index f281b7b344..0000000000
--- a/examples/react/realtime-trading/src/trading-table-v8.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use no memo'
-
-import {
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table-v8'
-import { memo } from 'react'
-import {
-  TradingRow,
-  readMeasuredRows,
-  tradingColumns,
-  useCoreTableState,
-} from './trading-table-shared'
-import { useV8TradingTableRuntime } from './core/use-trading-table-runtime'
-
-export const V8TradingTable = memo(function V8TradingTable() {
-  const props = useV8TradingTableRuntime()
-  const coreTableState = useCoreTableState(props)
-  const table = useReactTable({
-    columns: tradingColumns,
-    data: props.quotes,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getRowId: (row) => row.id,
-    state: coreTableState,
-  })
-  const rows = readMeasuredRows('v8', () => table.getRowModel().rows)
-
-  return (
-    <div className="table-scroll" data-table-adapter="v8">
-      <table style={{ width: table.getTotalSize() }}>
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th key={header.id} style={{ width: header.getSize() }}>
-                  {!header.isPlaceholder &&
-                    flexRender(
-                      header.column.columnDef.header,
-                      header.getContext(),
-                    )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {rows.map((row) => (
-            <TradingRow key={row.id} quote={row.original}>
-              {row.getVisibleCells().map((cell) => (
-                <td
-                  key={cell.id}
-                  style={{ width: cell.column.getSize() }}
-                  className={
-                    cell.column.id !== 'symbol' &&
-                    cell.column.id !== 'venue'
-                      ? 'numeric-cell'
-                      : undefined
-                  }
-                >
-                  {flexRender(
-                    cell.column.columnDef.cell,
-                    cell.getContext(),
-                  )}
-                </td>
-              ))}
-            </TradingRow>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-})
diff --git a/examples/react/realtime-trading/src/trading-table.tsx b/examples/react/realtime-trading/src/trading-table.tsx
deleted file mode 100644
index 4fb2e19648..0000000000
--- a/examples/react/realtime-trading/src/trading-table.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export { LocalTradingTable } from './trading-table-local'
-export { V8TradingTable } from './trading-table-v8'
-export {
-  TRADING_COLUMN_COUNT,
-  TradingRow,
-  getCoreTableState,
-  rowModelDiagnostics,
-} from './trading-table-shared'
-export type {
-  CoreRowModelMode,
-  CoreTableState,
-  RendererMode,
-  TableAdapter,
-  TradingTableProps,
-} from './trading-table-shared'
diff --git a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
index 9fd51c0680..d9cfda32da 100644
--- a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
@@ -14,9 +14,7 @@ function collectPageErrors(page: Page) {
   return errors
 }
 
-test('runs the same React workload across both table adapters', async ({
-  page,
-}) => {
+test('runs the React realtime trading workload', async ({ page }) => {
   const server = await startExampleServer(exampleDir)
   const errors = collectPageErrors(page)
 
@@ -35,12 +33,16 @@ test('runs the same React workload across both table adapters', async ({
     const table = page.getByRole('table')
     await expect(table).toBeVisible()
     await expect(table.locator('tbody tr')).toHaveCount(250)
-    await expect(table.locator('thead th')).toHaveCount(14)
-    await expect(table.locator('thead')).toContainText('Ticker')
-    await expect(table.locator('thead')).toContainText('Last Qty')
-    await expect(table.locator('thead')).toContainText('Traded Value')
-    const adapter = page.getByTestId('adapter-select')
-    await expect(adapter).toHaveValue('local')
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
     await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
     const instrumentCount = page.getByTestId('instrument-count-select')
     await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
@@ -53,17 +55,17 @@ test('runs the same React workload across both table adapters', async ({
     await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
     await loadProfile.selectOption('high')
 
-    const rowWorkload = page.getByTestId('row-workload-select')
-    await rowWorkload.selectOption('rotating-filter')
-    await expect(table.locator('tbody tr')).toHaveCount(200)
-    await rowWorkload.selectOption('identity-churn')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
-    await expect(
-      table.locator('tbody tr[data-row-id*="-replacement-"]'),
-    ).toHaveCount(25)
-    await rowWorkload.selectOption('price-sort')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
-    await rowWorkload.selectOption('stable')
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('250')
+    await sparklineInterval.selectOption('500')
+    await expect(sparklineInterval).toHaveValue('500')
+    await sparklineInterval.selectOption('250')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
 
     const coreRowModel = page.getByTestId('core-row-model-select')
     await coreRowModel.selectOption('filter')
@@ -76,7 +78,7 @@ test('runs the same React workload across both table adapters', async ({
 
     await expect
       .poll(async () => {
-        const text = await page.getByTestId('total-events').textContent()
+        const text = await page.getByTestId('row-update-rate').textContent()
         return Number(text?.replace(/\D/g, '') ?? 0)
       })
       .toBeGreaterThan(0)
@@ -88,7 +90,7 @@ test('runs the same React workload across both table adapters', async ({
       .toBeGreaterThan(0)
     await expect
       .poll(async () =>
-        Number(await page.getByTestId('raf-rate').textContent()),
+        Number(await page.getByTestId('message-rate').textContent()),
       )
       .toBeGreaterThan(0)
     await expect
@@ -97,24 +99,11 @@ test('runs the same React workload across both table adapters', async ({
       )
       .toBeGreaterThan(0)
 
-    for (const implementation of ['v8', 'local']) {
-      await adapter.selectOption(implementation)
-      await expect(adapter).toHaveValue(implementation)
-      await expect(page.getByRole('table')).toBeVisible()
-      await expect(page.locator('tbody tr')).toHaveCount(250)
-
-      await coreRowModel.selectOption('filter')
-      await page.getByTestId('core-filter-input').fill('ALP')
-      await expect(page.locator('tbody tr')).toHaveCount(21)
-      await coreRowModel.selectOption('none')
-      await expect(page.locator('tbody tr')).toHaveCount(250)
-
-      const firstPrice = page.locator('tbody tr').first().getByRole('button')
-      const priceBeforeUpdate = await firstPrice.textContent()
-      await expect
-        .poll(() => firstPrice.textContent())
-        .not.toBe(priceBeforeUpdate)
-    }
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
 
     await page.locator('.config-section input[type="checkbox"]').first().check()
     await page.getByTestId('feed-toggle').click()
@@ -122,11 +111,15 @@ test('runs the same React workload across both table adapters', async ({
     await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
 
     await coreRowModel.selectOption('sort')
-    const sortedPrices = await table.locator('tbody tr').evaluateAll((rows) =>
-      rows.map((row) =>
-        Number(row.querySelector<HTMLButtonElement>('.price-button')?.textContent),
-      ),
-    )
+    const sortedPrices = await table
+      .locator('tbody tr')
+      .evaluateAll((rows) =>
+        rows.map((row) =>
+          Number(
+            row.querySelector<HTMLButtonElement>('.price-button')?.textContent,
+          ),
+        ),
+      )
     expect(sortedPrices).toEqual([...sortedPrices].sort((a, b) => b - a))
 
     await instrumentCount.selectOption('750')
@@ -134,9 +127,7 @@ test('runs the same React workload across both table adapters', async ({
     await page.getByTestId('scroll-stress-select').selectOption('vertical')
     await expect
       .poll(() =>
-        page
-          .locator('.table-scroll')
-          .evaluate((element) => element.scrollTop),
+        page.locator('.table-scroll').evaluate((element) => element.scrollTop),
       )
       .toBeGreaterThan(0)
     await expect
diff --git a/examples/realtime-trading-shared/sp500-instruments.d.ts b/examples/realtime-trading-shared/sp500-instruments.d.ts
new file mode 100644
index 0000000000..c3bb7740b9
--- /dev/null
+++ b/examples/realtime-trading-shared/sp500-instruments.d.ts
@@ -0,0 +1,27 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+export declare const sp500Instruments: ReadonlyArray<BaseInstrument>
+export declare const internationalInstruments: ReadonlyArray<BaseInstrument>
+export declare const globalInstruments: ReadonlyArray<BaseInstrument>
diff --git a/examples/realtime-trading-shared/sp500-instruments.js b/examples/realtime-trading-shared/sp500-instruments.js
new file mode 100644
index 0000000000..2c4d6a91f0
--- /dev/null
+++ b/examples/realtime-trading-shared/sp500-instruments.js
@@ -0,0 +1,718 @@
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', 'Casey\'s', 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', 'Domino\'s', 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', 'Lowe\'s', 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', 'McDonald\'s', 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', 'Moody\'s Corporation', 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', 'O\'Reilly Automotive', 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+)
diff --git a/examples/solid/realtime-trading/README.md b/examples/solid/realtime-trading/README.md
index fdad66799b..d85998c297 100644
--- a/examples/solid/realtime-trading/README.md
+++ b/examples/solid/realtime-trading/README.md
@@ -1,208 +1,62 @@
-# Solid real-time trading FlexRender lab
+# Solid realtime trading benchmark
 
-This standalone example generates deterministic synthetic quote events in the
-browser and stresses two Solid Table render paths. It is not a real
-exchange feed and does not display financial advice or real market data.
+This example stresses the current Solid Table adapter with a synthetic market
+feed, immutable quote snapshots, fine-grained cell updates, dynamic components,
+and browser performance diagnostics.
 
-The workload is inspired by the public
-[AG Grid finance demo](https://www.ag-grid.com/example-finance/) and its
-[source](https://github.com/ag-grid/ag-grid-demos/tree/main/finance), but is
-focused on renderer lifecycle, immutable high-frequency updates, backpressure,
-and browser performance APIs.
+## Run
 
-## Run it
-
-From the repository root:
-
-```sh
-pnpm --filter tanstack-solid-table-example-realtime-trading dev
+```bash
+pnpm --dir examples/solid/realtime-trading dev
 ```
 
-Open `http://localhost:7779`. For measurements, build and serve the production
-bundle so development checks do not distort the result:
+Open `http://localhost:7779`.
 
-```sh
-pnpm --filter tanstack-solid-table-example-realtime-trading build
-pnpm --filter tanstack-solid-table-example-realtime-trading serve
-```
+Use a production build for performance recordings:
 
-## What is copied into this example
-
-This directory is self-contained. It does not import the feed implementation,
-styles, components, or benchmark shell from the Angular or React examples:
-
-- `market-feed-engine.ts` owns the deterministic quote algorithm.
-- `market-feed.worker.ts` schedules, batches, coalesces, and applies
-  backpressure.
-- `market-feed-protocol.ts` defines commands and events across the worker
-  boundary.
-- `market-data.ts` creates a new data array and new objects for changed rows.
-- `quote-cells.tsx` implements all dynamic Solid cells and lifecycle counters.
-- `trading-table.tsx` keeps the local v9 and v8 table construction separate
-  while sharing one column definition.
-- `core/trading-benchmark-controller.ts` owns application state, worker
-  transport, derived table inputs, and user commands.
-- `benchmark/benchmark-monitor.ts` owns browser observers, render
-  acknowledgements, and published metrics.
-- `shell/TradingShell.tsx` composes independent header, toolbar, metrics,
-  status-bar, diagnostics, and configurator components.
-- `shell/trading-shell-context.tsx` lets every shell component consume the
-  controller without prop drilling.
-- `App.tsx` creates the controller and owns only the projected adapter switch.
-- `index.css` is a complete local copy of the trading-terminal styles.
-
-The duplication is intentional: each framework example can be copied, changed,
-or profiled on its own. Keep the workload files synchronized manually when
-making cross-framework comparisons.
+```bash
+pnpm --dir examples/solid/realtime-trading build
+```
 
 ## Architecture
 
-`App` deliberately has no knowledge of workers, timers, observers, or adapter
-commands. It provides the controller, selects the active adapter, and projects
-that table into the shell layout. `createTradingBenchmarkController` is the
-single stateful boundary: it subscribes to the feed worker, converts protocol
-events into immutable row snapshots, derives the selected workload, and
-exposes a small `state` / `actions` contract to the shell context.
-
-Benchmark instrumentation is a separate collaborator. `BenchmarkMonitor`
-contains the mutable sampling runtime and publishes immutable metric snapshots
-back through the controller. This keeps measurement policy out of both the
-table adapters and the presentational shell.
-
-All deliberate mutable runtime is grouped behind `const` object identities.
-Source files do not use `let`; counters and handles change as properties of
-those stable runtime owners instead of being scattered mutable bindings.
-
-## Adapter matrix
-
-The configurator mounts exactly one implementation at a time:
-
-- **Local v9** imports the Solid adapter from this workspace.
-- **8.21.3** imports the final published Solid v8 adapter and matching core.
-
-Changing the select disposes the current table before mounting the next one.
-Feed state remains in the controller, so both receive the same immutable
-snapshots.
-The exact v8 tarball alias prevents this workspace from silently replacing the
-published baseline with local packages.
-
-## Render workload
-
-The table contains 14 columns and up to 1,000 instruments. Its market-watch
-labels are Ticker, Venue, Bid, Ask, Spread, Last, Last Move, Last Qty,
-Bid / Ask Qty, Quote Age, Day %, Total Qty, Traded Value, and Intraday. It
-combines:
-
-- primitive bid, ask, daily change, quantity, and traded-value cells;
-- a clickable price component;
-- a stable Tick component or two alternating Up/Down component types;
-- spread, market-depth, quote-age, and sparkline components;
-- immutable row replacement with stable instrument IDs;
-- optional 100 ms quote-age invalidation for every visible Age cell; and
-- optional history-array replacement for sparklines.
-
-The feed control provides repeatable load profiles: Low 1k/s, Medium 5k/s,
-High 10k/s, Very high 25k/s, and Max 100k/s. High is the default; Max is a
-deliberate saturation test. Moving the rate slider switches the profile to
-Custom. Available universe sizes are 50, 100, 150, 250, 350, 500, 750, and
-1,000.
-
-The row workload selector separates four different behaviors:
-
-- **Stable universe** preserves source order and IDs.
-- **Continuously sort by Last** reorders keyed rows as prices move without
-  recreating their identity.
-- **Rotate 20% filtered rows** changes one excluded index bucket each second,
-  forcing row removal and reinsertion.
-- **Replace 10% of ticker IDs** changes one bucket's IDs and ticker labels each
-  second. Ten percent are replacements at any instant; transitions dispose the
-  previous bucket and create the next, crossing lifecycle boundaries for about
-  twenty percent of rows.
-
-These transformations run before the selected adapter so both versions
-receive the same arrays. They test sorting/filtering consequences and keyed
-reconciliation, not the adapters' public sorting/filtering APIs.
-
-Solid's lifecycle counters use `onMount` and `onCleanup`. Switching from the
-stable Tick renderer to the alternating Up/Down renderers intentionally makes
-direction changes destroy one component type and mount the other. Stable mode
-updates the same component instead.
-
-## Worker transport
-
-The Worker acts like an external WebSocket/SSE transport. It permits one batch
-in flight. A Solid effect tracking only table-driving signals acknowledges the
-batch after the corresponding reactive DOM update. While an update is pending,
-the Worker coalesces newer events by instrument in a bounded map instead of
-growing an unbounded message queue.
-
-`batch events` therefore counts source events, while `row updates` counts the
-final row snapshots copied into a particular UI batch. A batch can contain
-thousands of events but at most one final update per instrument.
-
-The Worker removes quote generation and batching from the main thread. Solid
-rendering, TanStack row-model work, DOM updates, layout, and paint still run on
-the main thread.
-
-## Metrics
-
-- **Throughput** is the source-event rate represented by acknowledged batches.
-- **RAF rate** is actual `requestAnimationFrame` callbacks divided by elapsed
-  wall time. It is not an FPS estimate derived from table renders.
-- **Table renders** is the rate of feed batches that reach the completed Solid
-  reactive update and are acknowledged.
-- **Average / P95 render** spans worker-message receipt through that completed
-  effect. It excludes worker calculation and browser paint.
-- **Long frames** uses the browser Long Animation Frames API when available.
-- **Heap** uses Chromium's non-standard `performance.memory` when available.
-- **Created / destroyed** distinguishes expected type-swap churn from live
-  component retention.
-- **Cell renderer calls/s** counts executions of column `cell` functions. The
-  per-column breakdown identifies which callback was invoked.
-- **Component renders/s** counts executions of dynamic Solid cell component
-  functions, with an exact per-type breakdown. Fine-grained reactive DOM
-  updates normally do not re-execute a whole component, so these calls mostly
-  indicate component creation rather than React-style rerendering.
-- **DOM mutation records/s** comes from a `MutationObserver` attached to the
-  active `tbody`. It counts observer records, not changed elements or painted
-  pixels.
-
-The heap line is diagnostic. Immutable updates continuously allocate short-lived
-arrays, row objects, and render objects, so raw heap can rise before garbage
-collection. Compare post-GC plateaus in the browser Memory profiler.
-
-The three counters are deliberately simple but do add instrumentation overhead.
-Use them to catch accidental full-table work and compare ratios. For final
-timings, corroborate them with a Chrome Performance recording and Solid
-DevTools. A realistic healthy run keeps source throughput near target, avoids
-reconstructing every cell on every worker batch, and reaches a stable post-GC
-heap plateau.
-
-## Is this a real financial grid?
-
-The presentation and workload shape are realistic for a market-watch blotter,
-but the prices, venues, sizes, volume, and traded value are deterministic
-synthetic data. There is no order book, exchange calendar, corporate actions,
-network jitter, reconnect logic, entitlement processing, or real WebSocket
-decoder. That makes the lab reproducible, not production-representative.
-
-For higher confidence, replay a timestamped, sanitized capture through the same
-worker protocol. Preserve burstiness and symbol skew, then compare adapters
-using the same capture, production build, browser, viewport, and fixed
-measurement window.
-
-## Repeatable comparison
-
-1. Use production builds in the same browser and on the same machine.
-2. Start at 250 instruments and 10k events/s.
-3. Keep stable Tick cells, quote ages, and sparklines enabled.
-4. Reset and warm up for 20–30 seconds.
-5. Record throughput, RAF rate, table renders/s, cell/component calls, DOM
-   mutations, P95, long frames, and post-GC heap over a fixed window.
-6. Repeat with the Angular and React standalone examples using identical
-   controls.
-7. Toggle Tick A/B swapping, quote ages, and sparklines separately to isolate
-   component churn, shared-clock invalidation, and array-input cost.
-
-The 25k burst is useful for profiling coalescing and a large render, but a
-sustained target rate is the better test of steady-state behavior.
+- `createTradingBenchmarkController` owns benchmark metrics and shell actions.
+- `market-feed.worker.ts` produces synthetic quote samples outside the main
+  thread and coalesces repeated instruments into one row update per message.
+- `trading-table.tsx` owns the current Solid Table instance, columns, and cell
+  renderers.
+- `benchmark/` tracks update latency, render calls, DOM mutations, long frames,
+  and heap usage when supported.
+- `shell/` owns the terminal layout and benchmark configurator.
+
+The application renders one table implementation directly. Historical adapter
+switching and compatibility code are not part of the benchmark.
+
+## Workloads
+
+- Stable market snapshots with interactive table sorting.
+- Stable or alternating cell component types.
+- Optional sparkline and quote-age invalidation.
+- Per-instrument Intraday history sampling with a configurable 100–2,000 ms
+  worker interval.
+- Configurable worker-sample profiles and explicit sample bursts.
+
+The sample rate controls synthetic quote generation inside the worker; it is not
+a browser event or `postMessage` rate. The publish interval separately controls
+the target message cadence. The worker coalesces repeated instruments in each
+message and posts independently of Solid updates, like an external stream.
+
+## Dependency resolution
+
+The example pins `@tanstack/solid-table` to the current repository version. The
+root workspace override resolves it to `packages/solid-table` while preserving a
+release-like manifest.
+
+## Verification
+
+```bash
+pnpm --dir examples/solid/realtime-trading test:types
+pnpm --dir examples/solid/realtime-trading lint
+pnpm --dir examples/solid/realtime-trading build
+pnpm --dir examples/solid/realtime-trading test:e2e
+```
diff --git a/examples/solid/realtime-trading/index.html b/examples/solid/realtime-trading/index.html
index 37fed0181d..9da17d489c 100644
--- a/examples/solid/realtime-trading/index.html
+++ b/examples/solid/realtime-trading/index.html
@@ -7,6 +7,7 @@
       name="description"
       content="Solid Table real-time trading render benchmark"
     />
+    <link rel="icon" href="data:," />
     <title>Solid Table — Real-time Trading Benchmark</title>
   </head>
   <body>
diff --git a/examples/solid/realtime-trading/package.json b/examples/solid/realtime-trading/package.json
index 4d61e11d84..1c4cf589a5 100644
--- a/examples/solid/realtime-trading/package.json
+++ b/examples/solid/realtime-trading/package.json
@@ -12,8 +12,7 @@
     "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
   },
   "dependencies": {
-    "@tanstack/solid-table": "^9.0.0",
-    "@tanstack/solid-table-v8": "https://registry.npmjs.org/@tanstack/solid-table/-/solid-table-8.21.3.tgz",
+    "@tanstack/solid-table": "9.1.2",
     "solid-js": "^1.9.14"
   },
   "devDependencies": {
diff --git a/examples/solid/realtime-trading/src/App.tsx b/examples/solid/realtime-trading/src/App.tsx
index 3e1f40500e..5e4ebced5f 100644
--- a/examples/solid/realtime-trading/src/App.tsx
+++ b/examples/solid/realtime-trading/src/App.tsx
@@ -1,17 +1,15 @@
-import { Match, Switch } from 'solid-js'
-import { createTradingBenchmarkController } from './core/trading-benchmark-controller'
+import { createTradingBenchmarkController } from './benchmark/trading-benchmark-controller'
+import { createMarketFeedController } from './feed/market-feed-controller'
 import { TradingShell } from './shell/TradingShell'
 import {
   TradingShellProvider,
   useTradingShellController,
 } from './shell/trading-shell-context'
-import {
-  LocalTradingTable,
-  V8TradingTable,
-} from './trading-table'
+import { TradingTable } from './table/trading-table'
 
 export default function App() {
-  const controller = createTradingBenchmarkController()
+  const feed = createMarketFeedController()
+  const controller = createTradingBenchmarkController(feed)
   return (
     <TradingShellProvider controller={controller}>
       <TradingShell>
@@ -24,27 +22,11 @@ export default function App() {
 function TradingTableOutlet() {
   const { state, actions } = useTradingShellController()
   return (
-    <Switch>
-      <Match when={state.tableAdapter() === 'local'}>
-        <LocalTradingTable
-          quotes={state.displayQuotes()}
-          rendererMode={state.rendererMode()}
-          updateQuoteAges={state.updateQuoteAges()}
-          quoteClock={state.quoteClock()}
-          selectedSymbol={state.selectedSymbol()}
-          onSelectSymbol={actions.selectSymbol}
-        />
-      </Match>
-      <Match when={state.tableAdapter() === 'v8'}>
-        <V8TradingTable
-          quotes={state.displayQuotes()}
-          rendererMode={state.rendererMode()}
-          updateQuoteAges={state.updateQuoteAges()}
-          quoteClock={state.quoteClock()}
-          selectedSymbol={state.selectedSymbol()}
-          onSelectSymbol={actions.selectSymbol}
-        />
-      </Match>
-    </Switch>
+    <TradingTable
+      quotes={state.displayQuotes()}
+      rendererMode={state.rendererMode()}
+      selectedSymbol={state.selectedSymbol()}
+      onSelectSymbol={actions.selectSymbol}
+    />
   )
 }
diff --git a/examples/solid/realtime-trading/src/benchmark-profiles.ts b/examples/solid/realtime-trading/src/benchmark-profiles.ts
deleted file mode 100644
index 848fc28880..0000000000
--- a/examples/solid/realtime-trading/src/benchmark-profiles.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { MarketQuote } from './market-data'
-
-export type FeedLoadProfile =
-  'low' | 'medium' | 'high' | 'very-high' | 'max' | 'custom'
-
-export type RowWorkloadMode =
-  'stable' | 'price-sort' | 'rotating-filter' | 'identity-churn'
-
-export const feedLoadRates: Record<
-  Exclude<FeedLoadProfile, 'custom'>,
-  number
-> = {
-  low: 1_000,
-  medium: 5_000,
-  high: 10_000,
-  'very-high': 25_000,
-  max: 100_000,
-}
-
-export function deriveBenchmarkQuotes(
-  quotes: Array<MarketQuote>,
-  mode: RowWorkloadMode,
-  epoch: number,
-): Array<MarketQuote> {
-  if (mode === 'stable') {
-    return quotes
-  }
-
-  if (mode === 'price-sort') {
-    return [...quotes].sort(
-      (left, right) =>
-        right.price - left.price || left.symbol.localeCompare(right.symbol),
-    )
-  }
-
-  if (mode === 'rotating-filter') {
-    const excludedBucket = epoch % 5
-    return quotes.filter((_, index) => index % 5 !== excludedBucket)
-  }
-
-  const replacementBucket = epoch % 10
-  return quotes.map((quote, index) =>
-    index % 10 === replacementBucket
-      ? {
-          ...quote,
-          id: `${quote.id}-replacement-${epoch}`,
-          symbol: `${quote.symbol}R${epoch % 100}`,
-          company: `${quote.company} replacement`,
-        }
-      : quote,
-  )
-}
-
-export function rowWorkloadLabel(mode: RowWorkloadMode): string {
-  switch (mode) {
-    case 'price-sort':
-      return 'PRICE REORDER'
-    case 'rotating-filter':
-      return 'FILTER ROTATION'
-    case 'identity-churn':
-      return 'TICKER REPLACEMENT'
-    default:
-      return 'STABLE UNIVERSE'
-  }
-}
diff --git a/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
index c0031a812f..6bcb301e6b 100644
--- a/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -1,5 +1,7 @@
-import { quoteCellLifecycle, quoteRenderDiagnostics } from '../quote-cells'
-import type { MarketFeedCommand } from '../market-feed-protocol'
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells'
 
 export interface NamedInvocationRate {
   name: string
@@ -7,8 +9,12 @@ export interface NamedInvocationRate {
 }
 
 export interface FeedMetrics {
-  actualEventsPerSecond: number
-  totalEvents: number
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
   rafCallbacksPerSecond: number
   tableRendersPerSecond: number
   lastBatchSize: number
@@ -31,8 +37,12 @@ export interface FeedMetrics {
 }
 
 export const initialMetrics: FeedMetrics = {
-  actualEventsPerSecond: 0,
-  totalEvents: 0,
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
   rafCallbacksPerSecond: 0,
   tableRendersPerSecond: 0,
   lastBatchSize: 0,
@@ -54,19 +64,17 @@ export const initialMetrics: FeedMetrics = {
   domMutationsPerSecond: 0,
 }
 
-interface PendingAck {
-  generation: number
-  sequence: number
-}
-
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
     pendingRenderStartedAt: null as number | null,
-    pendingAck: null as PendingAck | null,
     renderSamples: [] as Array<number>,
-    totalEvents: 0,
-    eventsInSample: 0,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
@@ -89,33 +97,35 @@ export class BenchmarkMonitor {
     this.#runtime.pendingRenderStartedAt ??= performance.now()
   }
 
-  setPendingAck(ack: PendingAck | null): void {
-    this.#runtime.pendingAck = ack
-  }
-
-  recordCompletedRender(postCommand: (command: MarketFeedCommand) => void) {
+  recordCompletedRender(): void {
     const runtime = this.#runtime
     if (runtime.pendingRenderStartedAt !== null) {
       runtime.renderSamples.push(
         performance.now() - runtime.pendingRenderStartedAt,
       )
       runtime.pendingRenderStartedAt = null
-    }
-
-    if (runtime.pendingAck) {
       runtime.tableRendersInSample++
-      postCommand({ type: 'ack', ...runtime.pendingAck })
-      runtime.pendingAck = null
     }
   }
 
-  recordBatch(eventCount: number, updateCount: number): void {
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
     const runtime = this.#runtime
-    runtime.lastBatchSize = eventCount
+    runtime.lastBatchSize = tickCount
     runtime.lastUpdateCount = updateCount
-    runtime.eventsInSample += eventCount
-    runtime.totalEvents += eventCount
-    runtime.workerMessages++
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
   recordAnimationFrame(): void {
@@ -175,11 +185,19 @@ export class BenchmarkMonitor {
       Math.ceil(sortedRenderSamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
-      actualEventsPerSecond:
+      actualTicksPerSecond:
         sampleDuration === 0
           ? 0
-          : (runtime.eventsInSample / sampleDuration) * 1_000,
-      totalEvents: runtime.totalEvents,
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
         sampleDuration === 0
           ? 0
@@ -192,8 +210,7 @@ export class BenchmarkMonitor {
       averageRenderMs,
       p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
       maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: runtime.renderSamples.filter((value) => value > 16.7)
-        .length,
+      slowRenders: runtime.renderSamples.filter((value) => value > 16.7).length,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -201,8 +218,7 @@ export class BenchmarkMonitor {
       componentsDestroyed: quoteCellLifecycle.destroyed,
       workerMessages: runtime.workerMessages,
       lastUpdateCount: runtime.lastUpdateCount,
-      cellRendererCallsPerSecond:
-        (cellRendererCalls / sampleDuration) * 1_000,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
       componentRenderCallsPerSecond:
         (componentRenderCalls / sampleDuration) * 1_000,
       cellRendererRates,
@@ -212,8 +228,7 @@ export class BenchmarkMonitor {
     }
 
     runtime.sampleStartedAt = now
-    runtime.previousCellRendererCalls =
-      quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
     runtime.previousComponentRenderCalls =
       quoteRenderDiagnostics.componentRenderCalls
     runtime.previousCellRendererCallsByName = {
@@ -223,7 +238,11 @@ export class BenchmarkMonitor {
       ...quoteRenderDiagnostics.componentRenderCallsByName,
     }
     runtime.domMutationsInSample = 0
-    runtime.eventsInSample = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
     runtime.renderSamples = []
     runtime.rafCallbacksInSample = 0
     runtime.tableRendersInSample = 0
@@ -234,10 +253,13 @@ export class BenchmarkMonitor {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
     runtime.pendingRenderStartedAt = null
-    runtime.pendingAck = null
     runtime.renderSamples = []
-    runtime.totalEvents = 0
-    runtime.eventsInSample = 0
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
@@ -245,8 +267,7 @@ export class BenchmarkMonitor {
     runtime.tableRendersInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
-    runtime.previousCellRendererCalls =
-      quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
     runtime.previousComponentRenderCalls =
       quoteRenderDiagnostics.componentRenderCalls
     runtime.previousCellRendererCallsByName = {
diff --git a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..68130a4146
--- /dev/null
+++ b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,132 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+} from 'solid-js'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { RendererMode } from '../table/trading-table'
+
+export function createTradingBenchmarkController(feed: MarketFeedController) {
+  const [rendererMode, setRendererMode] = createSignal<RendererMode>('stable')
+  const [selectedSymbol, setSelectedSymbol] = createSignal<string | null>(null)
+  const [metrics, setMetrics] = createSignal(initialMetrics)
+  const monitor = new BenchmarkMonitor()
+  const runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+  }
+
+  const stopObservingFeed = feed.observe({
+    messageReceived: () => monitor.recordWorkerMessage(),
+    mutationStarted: () => monitor.markRenderPending(),
+    batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+      monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+    renderCommitted: () => monitor.recordCompletedRender(),
+  })
+
+  createEffect(() => {
+    const tableBody = document.querySelector(
+      '.market-panel [data-trading-table] tbody',
+    )
+    if (!tableBody) return
+
+    monitor.resetDomMutations()
+    const observer = new MutationObserver((records) => {
+      monitor.recordDomMutations(records.length)
+    })
+    observer.observe(tableBody, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+    onCleanup(() => observer.disconnect())
+  })
+
+  const benchmarkFrame = (now: number): void => {
+    monitor.recordAnimationFrame()
+    if (monitor.shouldPublish(now)) {
+      setMetrics(monitor.publish(now))
+    }
+    runtime.animationFrameId = requestAnimationFrame(benchmarkFrame)
+  }
+
+  onMount(() => {
+    if (longAnimationFramesSupported) {
+      runtime.longAnimationFrameObserver = new PerformanceObserver(
+        (entries) => {
+          for (const entry of entries.getEntries()) {
+            monitor.recordLongAnimationFrame(entry.duration)
+          }
+        },
+      )
+      runtime.longAnimationFrameObserver.observe({
+        type: 'long-animation-frame',
+        buffered: true,
+      })
+    }
+    runtime.animationFrameId = requestAnimationFrame(benchmarkFrame)
+  })
+
+  onCleanup(() => {
+    stopObservingFeed()
+    cancelAnimationFrame(runtime.animationFrameId)
+    runtime.longAnimationFrameObserver?.disconnect()
+  })
+
+  const resetViewState = (): void => {
+    setSelectedSymbol(null)
+  }
+
+  const actions = {
+    resetViewState,
+    setRendererMode,
+    selectSymbol: setSelectedSymbol,
+    resetMarket(): void {
+      monitor.reset()
+      resetViewState()
+      setMetrics({ ...initialMetrics })
+      feed.actions.reset()
+    },
+  }
+
+  const displayQuotes = feed.state.quotes
+  const selectedQuote = createMemo(
+    () =>
+      displayQuotes().find((quote) => quote.symbol === selectedSymbol()) ??
+      null,
+  )
+  const mountedCells = createMemo(
+    () => displayQuotes().length * TRADING_COLUMN_COUNT,
+  )
+  const liveComponents = createMemo(
+    () => metrics().componentsCreated - metrics().componentsDestroyed,
+  )
+
+  return {
+    feed,
+    state: {
+      rendererMode,
+      selectedSymbol,
+      metrics,
+      displayQuotes,
+      selectedQuote,
+      mountedCells,
+      liveComponents,
+    },
+    actions,
+    monitor,
+  }
+}
+
+export type TradingBenchmarkController = ReturnType<
+  typeof createTradingBenchmarkController
+>
diff --git a/examples/solid/realtime-trading/src/core/trading-benchmark-controller.ts b/examples/solid/realtime-trading/src/core/trading-benchmark-controller.ts
deleted file mode 100644
index 674ae71497..0000000000
--- a/examples/solid/realtime-trading/src/core/trading-benchmark-controller.ts
+++ /dev/null
@@ -1,300 +0,0 @@
-import {
-  createEffect,
-  createMemo,
-  createSignal,
-  onCleanup,
-  onMount,
-} from 'solid-js'
-import {
-  BenchmarkMonitor,
-  initialMetrics,
-  longAnimationFramesSupported,
-} from '../benchmark/benchmark-monitor'
-import {
-  deriveBenchmarkQuotes,
-  feedLoadRates,
-  rowWorkloadLabel,
-} from '../benchmark-profiles'
-import { applyMarketUpdates, hydrateMarketQuotes } from '../market-data'
-import { TRADING_COLUMN_COUNT } from '../trading-table'
-import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
-import type { MarketFeedCommand, MarketFeedEvent } from '../market-feed-protocol'
-import type { MarketQuote } from '../market-data'
-import type { RendererMode, TableAdapter } from '../trading-table'
-
-export function createTradingBenchmarkController() {
-  const [workerReady, setWorkerReady] = createSignal(false)
-  const [running, setRunning] = createSignal(true)
-  const [tableAdapter, setTableAdapter] = createSignal<TableAdapter>('local')
-  const [instrumentCount, setInstrumentCount] = createSignal(250)
-  const [feedLoadProfile, setFeedLoadProfile] =
-    createSignal<FeedLoadProfile>('high')
-  const [targetEventsPerSecond, setTargetEventsPerSecond] = createSignal(10_000)
-  const [rowWorkloadMode, setRowWorkloadMode] =
-    createSignal<RowWorkloadMode>('stable')
-  const [rowWorkloadEpoch, setRowWorkloadEpoch] = createSignal(0)
-  const [rendererMode, setRendererMode] = createSignal<RendererMode>('stable')
-  const [updateSparklines, setUpdateSparklines] = createSignal(true)
-  const [updateQuoteAges, setUpdateQuoteAges] = createSignal(true)
-  const [quoteClock, setQuoteClock] = createSignal(Date.now())
-  const [quotes, setQuotes] = createSignal<Array<MarketQuote>>([])
-  const [selectedSymbol, setSelectedSymbol] = createSignal<string | null>(null)
-  const [metrics, setMetrics] = createSignal(initialMetrics)
-  const monitor = new BenchmarkMonitor()
-  const runtime = {
-    worker: null as Worker | null,
-    animationFrameId: 0,
-    longAnimationFrameObserver: null as PerformanceObserver | null,
-    feedGeneration: 0,
-    lastAgeClockAt: performance.now(),
-    lastRowWorkloadAt: performance.now(),
-  }
-
-  const postToWorker = (command: MarketFeedCommand) =>
-    runtime.worker?.postMessage(command)
-
-  createEffect(() => {
-    quotes()
-    quoteClock()
-    monitor.recordCompletedRender(postToWorker)
-  })
-
-  createEffect(() => {
-    tableAdapter()
-    const tableBody = document.querySelector(
-      '.market-panel [data-table-adapter] tbody',
-    )
-    if (!tableBody) {
-      return
-    }
-
-    monitor.resetDomMutations()
-    const observer = new MutationObserver((records) => {
-      monitor.recordDomMutations(records.length)
-    })
-    observer.observe(tableBody, {
-      attributes: true,
-      characterData: true,
-      childList: true,
-      subtree: true,
-    })
-    onCleanup(() => observer.disconnect())
-  })
-
-  const handleWorkerMessage = ({
-    data,
-  }: MessageEvent<MarketFeedEvent>): void => {
-    if (data.type === 'ready') {
-      runtime.feedGeneration = data.generation
-      monitor.setPendingAck(null)
-      monitor.markRenderPending()
-      setQuotes(hydrateMarketQuotes(data.quotes))
-      setWorkerReady(true)
-      return
-    }
-
-    if (data.generation !== runtime.feedGeneration) {
-      postToWorker({
-        type: 'ack',
-        generation: data.generation,
-        sequence: data.sequence,
-      })
-      return
-    }
-
-    monitor.markRenderPending()
-    setQuotes((currentQuotes) =>
-      applyMarketUpdates(currentQuotes, data.updates),
-    )
-    monitor.recordBatch(data.eventCount, data.updates.length)
-    monitor.setPendingAck({
-      generation: data.generation,
-      sequence: data.sequence,
-    })
-  }
-
-  const handleWorkerError = (error: ErrorEvent): void => {
-    setWorkerReady(false)
-    setRunning(false)
-    console.error('Market feed worker failed', error)
-  }
-
-  const feedFrame = (now: number): void => {
-    monitor.recordAnimationFrame()
-
-    if (updateQuoteAges() && now - runtime.lastAgeClockAt >= 100) {
-      monitor.markRenderPending()
-      runtime.lastAgeClockAt = now
-      setQuoteClock(Date.now())
-    }
-
-    if (
-      running() &&
-      (rowWorkloadMode() === 'rotating-filter' ||
-        rowWorkloadMode() === 'identity-churn') &&
-      now - runtime.lastRowWorkloadAt >= 1_000
-    ) {
-      monitor.markRenderPending()
-      runtime.lastRowWorkloadAt = now
-      setRowWorkloadEpoch((epoch) => epoch + 1)
-    }
-
-    if (monitor.shouldPublish(now)) {
-      setMetrics(monitor.publish(now))
-    }
-
-    runtime.animationFrameId = requestAnimationFrame(feedFrame)
-  }
-
-  onMount(() => {
-    runtime.worker = new Worker(
-      new URL('../market-feed.worker.ts', import.meta.url),
-      { type: 'module' },
-    )
-    runtime.worker.addEventListener('message', handleWorkerMessage)
-    runtime.worker.addEventListener('error', handleWorkerError)
-
-    if (longAnimationFramesSupported) {
-      runtime.longAnimationFrameObserver = new PerformanceObserver((entries) => {
-        for (const entry of entries.getEntries()) {
-          monitor.recordLongAnimationFrame(entry.duration)
-        }
-      })
-      runtime.longAnimationFrameObserver.observe({
-        type: 'long-animation-frame',
-        buffered: true,
-      })
-    }
-
-    postToWorker({
-      type: 'initialize',
-      rowCount: instrumentCount(),
-      seed: 42 + instrumentCount(),
-      running: running(),
-      targetEventsPerSecond: targetEventsPerSecond(),
-      updateSparklines: updateSparklines(),
-    })
-    runtime.animationFrameId = requestAnimationFrame(feedFrame)
-  })
-
-  onCleanup(() => {
-    cancelAnimationFrame(runtime.animationFrameId)
-    runtime.longAnimationFrameObserver?.disconnect()
-    runtime.worker?.terminate()
-    runtime.worker = null
-  })
-
-  const resetWorkerMarket = (rowCount: number): void => {
-    setWorkerReady(false)
-    monitor.setPendingAck(null)
-    postToWorker({
-      type: 'reset',
-      rowCount,
-      seed: 42 + rowCount,
-    })
-  }
-
-  const actions = {
-    toggleFeed(): void {
-      const nextRunning = !running()
-      setRunning(nextRunning)
-      postToWorker({ type: 'configure', running: nextRunning })
-    },
-    setInstrumentCount(count: number): void {
-      setInstrumentCount(count)
-      setRowWorkloadEpoch(0)
-      resetWorkerMarket(count)
-    },
-    setFeedLoadProfile(profile: FeedLoadProfile): void {
-      setFeedLoadProfile(profile)
-      if (profile === 'custom') {
-        return
-      }
-      const rate = feedLoadRates[profile]
-      setTargetEventsPerSecond(rate)
-      postToWorker({ type: 'configure', targetEventsPerSecond: rate })
-    },
-    setTargetEventsPerSecond(rate: number): void {
-      setFeedLoadProfile('custom')
-      setTargetEventsPerSecond(rate)
-      postToWorker({ type: 'configure', targetEventsPerSecond: rate })
-    },
-    setRowWorkloadMode(mode: RowWorkloadMode): void {
-      setRowWorkloadMode(mode)
-      setRowWorkloadEpoch(0)
-      runtime.lastRowWorkloadAt = performance.now()
-      setSelectedSymbol(null)
-    },
-    setTableAdapter,
-    setRendererMode,
-    setUpdateQuoteAges,
-    setUpdateSparklines(enabled: boolean): void {
-      setUpdateSparklines(enabled)
-      postToWorker({ type: 'configure', updateSparklines: enabled })
-    },
-    selectSymbol: setSelectedSymbol,
-    runBurst(): void {
-      postToWorker({ type: 'burst', eventCount: 25_000 })
-    },
-    resetMarket(): void {
-      setSelectedSymbol(null)
-      monitor.reset()
-      runtime.lastRowWorkloadAt = performance.now()
-      setRowWorkloadEpoch(0)
-      setQuoteClock(Date.now())
-      setMetrics({ ...initialMetrics })
-      resetWorkerMarket(instrumentCount())
-    },
-  }
-
-  const displayQuotes = createMemo(() =>
-    deriveBenchmarkQuotes(quotes(), rowWorkloadMode(), rowWorkloadEpoch()),
-  )
-  const selectedQuote = createMemo(
-    () =>
-      displayQuotes().find((quote) => quote.symbol === selectedSymbol()) ??
-      null,
-  )
-  const mountedCells = createMemo(
-    () => displayQuotes().length * TRADING_COLUMN_COUNT,
-  )
-  const liveComponents = createMemo(
-    () => metrics().componentsCreated - metrics().componentsDestroyed,
-  )
-  const adapterLabel = createMemo(() =>
-    tableAdapter() === 'local' ? 'LOCAL V9' : 'V8.21.3',
-  )
-  const workloadLabel = createMemo(() =>
-    rowWorkloadLabel(rowWorkloadMode()),
-  )
-
-  return {
-    state: {
-      workerReady,
-      running,
-      tableAdapter,
-      instrumentCount,
-      feedLoadProfile,
-      targetEventsPerSecond,
-      rowWorkloadMode,
-      rendererMode,
-      updateSparklines,
-      updateQuoteAges,
-      quoteClock,
-      quotes,
-      selectedSymbol,
-      metrics,
-      displayQuotes,
-      selectedQuote,
-      mountedCells,
-      liveComponents,
-      adapterLabel,
-      workloadLabel,
-    },
-    actions,
-  }
-}
-
-export type TradingBenchmarkController = ReturnType<
-  typeof createTradingBenchmarkController
->
diff --git a/examples/solid/realtime-trading/src/feed/feed-load-profiles.ts b/examples/solid/realtime-trading/src/feed/feed-load-profiles.ts
new file mode 100644
index 0000000000..417177ff0f
--- /dev/null
+++ b/examples/solid/realtime-trading/src/feed/feed-load-profiles.ts
@@ -0,0 +1,18 @@
+export type FeedLoadProfile =
+  | 'low'
+  | 'medium'
+  | 'high'
+  | 'very-high'
+  | 'max'
+  | 'custom'
+
+export const feedLoadRates: Record<
+  Exclude<FeedLoadProfile, 'custom'>,
+  number
+> = {
+  low: 1_000,
+  medium: 5_000,
+  high: 10_000,
+  'very-high': 25_000,
+  max: 100_000,
+}
diff --git a/examples/angular/realtime-trading/src/app/market-data.ts b/examples/solid/realtime-trading/src/feed/market-data.ts
similarity index 95%
rename from examples/angular/realtime-trading/src/app/market-data.ts
rename to examples/solid/realtime-trading/src/feed/market-data.ts
index 02eefa28c3..6231865d3f 100644
--- a/examples/angular/realtime-trading/src/app/market-data.ts
+++ b/examples/solid/realtime-trading/src/feed/market-data.ts
@@ -1,7 +1,7 @@
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
-} from './market-feed-protocol'
+} from './worker/market-feed-protocol'
 
 export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
   history: ReadonlyArray<number>
diff --git a/examples/solid/realtime-trading/src/feed/market-feed-controller.ts b/examples/solid/realtime-trading/src/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..7d6b4f893a
--- /dev/null
+++ b/examples/solid/realtime-trading/src/feed/market-feed-controller.ts
@@ -0,0 +1,196 @@
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import { feedLoadRates } from './feed-load-profiles'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type { FeedLoadProfile } from './feed-load-profiles'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export function createMarketFeedController() {
+  const [workerReady, setWorkerReady] = createSignal(false)
+  const [running, setRunning] = createSignal(true)
+  const [instrumentCount, setInstrumentCount] = createSignal(250)
+  const [feedLoadProfile, setFeedLoadProfile] =
+    createSignal<FeedLoadProfile>('high')
+  const [targetTicksPerSecond, setTargetTicksPerSecond] = createSignal(10_000)
+  const [publishIntervalMs, setPublishIntervalMsState] = createSignal(20)
+  const [updateSparklines, setUpdateSparklines] = createSignal(true)
+  const [sparklineSampleIntervalMs, setSparklineSampleIntervalMs] =
+    createSignal(250)
+  const [quotes, setQuotes] = createSignal<Array<MarketQuote>>([])
+  const observers = new Set<MarketFeedObserver>()
+  const runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+  }
+
+  const post = (command: MarketFeedCommand): void =>
+    runtime.worker?.postMessage(command)
+
+  const startMutation = (): void => {
+    runtime.renderPending = true
+    for (const observer of observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  const completeRender = (): void => {
+    if (!runtime.renderPending) return
+
+    runtime.renderPending = false
+    for (const observer of observers) {
+      observer.renderCommitted?.()
+    }
+  }
+
+  createEffect(() => {
+    quotes()
+    completeRender()
+  })
+
+  const handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      runtime.feedSessionId = data.sessionId
+      startMutation()
+      setQuotes(hydrateMarketQuotes(data.quotes))
+      setWorkerReady(true)
+      return
+    }
+
+    if (data.sessionId !== runtime.feedSessionId) return
+
+    for (const observer of observers) {
+      observer.messageReceived?.()
+    }
+    startMutation()
+    setQuotes((currentQuotes) =>
+      applyMarketUpdates(currentQuotes, data.updates),
+    )
+    const batch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of observers) {
+      observer.batchApplied?.(batch)
+    }
+  }
+
+  const handleWorkerError = (error: ErrorEvent): void => {
+    setWorkerReady(false)
+    setRunning(false)
+    console.error('Market feed worker failed', error)
+  }
+
+  const reset = (): void => {
+    setWorkerReady(false)
+    post({ type: 'reset', rowCount: instrumentCount() })
+  }
+
+  onMount(() => {
+    runtime.worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    runtime.worker.addEventListener('message', handleWorkerMessage)
+    runtime.worker.addEventListener('error', handleWorkerError)
+    post({
+      type: 'start',
+      rowCount: instrumentCount(),
+      running: running(),
+      ticksPerSecond: targetTicksPerSecond(),
+      publishIntervalMs: publishIntervalMs(),
+      updateSparklines: updateSparklines(),
+      sparklineSampleIntervalMs: sparklineSampleIntervalMs(),
+    })
+  })
+
+  onCleanup(() => {
+    runtime.worker?.removeEventListener('message', handleWorkerMessage)
+    runtime.worker?.removeEventListener('error', handleWorkerError)
+    runtime.worker?.terminate()
+    runtime.worker = null
+    observers.clear()
+  })
+
+  const actions = {
+    toggle(): void {
+      const nextRunning = !running()
+      setRunning(nextRunning)
+      post({ type: 'set-running', running: nextRunning })
+    },
+    setInstrumentCount(count: number): void {
+      setInstrumentCount(count)
+      reset()
+    },
+    setLoadProfile(profile: FeedLoadProfile): void {
+      setFeedLoadProfile(profile)
+      if (profile === 'custom') return
+
+      const rate = feedLoadRates[profile]
+      setTargetTicksPerSecond(rate)
+      post({ type: 'set-rate', ticksPerSecond: rate })
+    },
+    setTargetRate(rate: number): void {
+      setFeedLoadProfile('custom')
+      setTargetTicksPerSecond(rate)
+      post({ type: 'set-rate', ticksPerSecond: rate })
+    },
+    setPublishInterval(intervalMs: number): void {
+      setPublishIntervalMsState(intervalMs)
+      post({ type: 'set-publish-interval', intervalMs })
+    },
+    setSparklineUpdates(enabled: boolean): void {
+      setUpdateSparklines(enabled)
+      post({ type: 'set-sparklines', enabled })
+    },
+    setSparklineSampleInterval(intervalMs: number): void {
+      setSparklineSampleIntervalMs(intervalMs)
+      post({ type: 'set-sparkline-interval', intervalMs })
+    },
+    runBurst(): void {
+      post({ type: 'burst', tickCount: 25_000 })
+    },
+    reset,
+  }
+
+  return {
+    state: {
+      workerReady,
+      running,
+      instrumentCount,
+      feedLoadProfile,
+      targetTicksPerSecond,
+      publishIntervalMs,
+      updateSparklines,
+      sparklineSampleIntervalMs,
+      quotes,
+    },
+    actions,
+    observe(observer: MarketFeedObserver): () => void {
+      observers.add(observer)
+      return () => observers.delete(observer)
+    },
+    completeRender,
+  }
+}
+
+export type MarketFeedController = ReturnType<typeof createMarketFeedController>
diff --git a/examples/angular/realtime-trading/src/app/market-feed-engine.ts b/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
similarity index 67%
rename from examples/angular/realtime-trading/src/app/market-feed-engine.ts
rename to examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
index e77d76656c..c7ea457227 100644
--- a/examples/angular/realtime-trading/src/app/market-feed-engine.ts
+++ b/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,39 +1,30 @@
+import { globalInstruments } from '../../../../../realtime-trading-shared/sp500-instruments'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
 } from './market-feed-protocol'
 
-const baseInstruments = [
-  ['ALP', 'Alpine Systems', 'XNAS'],
-  ['ARC', 'Arcadia Cloud', 'XNYS'],
-  ['BLU', 'Blue River Energy', 'BATS'],
-  ['CRN', 'Crown Robotics', 'XNAS'],
-  ['DYN', 'Dynasty Networks', 'XNYS'],
-  ['ECO', 'Ecoframe Materials', 'IEX'],
-  ['FLX', 'Flux Semiconductors', 'XNAS'],
-  ['GEO', 'Geode Analytics', 'BATS'],
-  ['HLX', 'Helix Biotech', 'XNYS'],
-  ['ION', 'Ion Mobility', 'IEX'],
-  ['JDE', 'Jade Financial', 'XNYS'],
-  ['KNT', 'Kinetic Aerospace', 'XNAS'],
-] as const
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
 
 export class MarketFeedEngine {
   #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
   #random = createRandom(2_026)
   #rowCursor = 0
-  #historyTick = 0
-  #eventIndex = 0
+  #tickIndex = 0
 
-  reset(count: number, seed: number): Array<MarketQuoteSnapshot> {
-    const random = createRandom(seed)
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
 
     this.#quotes = Array.from({ length: count }, (_, index) => {
-      const [baseSymbol, company, venue] =
-        baseInstruments[index % baseInstruments.length]
-      const series = Math.floor(index / baseInstruments.length)
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
       const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
-      const open = roundPrice(20 + random() * 480)
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
       const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
       const history = Array.from({ length: 24 }, (_, historyIndex) =>
         roundPrice(
@@ -48,8 +39,11 @@ export class MarketFeedEngine {
         id: `instrument-${index}`,
         symbol,
         company,
-        venue,
+        venue: market,
+        previousClose,
         open,
+        high: open,
+        low: open,
         price: open,
         bid: roundPrice(open - spread / 2),
         ask: roundPrice(open + spread / 2),
@@ -57,16 +51,17 @@ export class MarketFeedEngine {
         askSize: Math.floor(100 + random() * 25_000),
         lastSize,
         lastMove: 0,
-        lastUpdatedAt: Date.now(),
+        lastUpdatedAt: createdAt,
         volume,
         turnover: roundMoney(open * volume),
         history,
       }
     })
 
-    this.#random = createRandom(2_026 + seed)
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
     this.#rowCursor = 0
-    this.#historyTick = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
 
     return this.#quotes.map((quote) => ({
       ...quote,
@@ -74,22 +69,31 @@ export class MarketFeedEngine {
     }))
   }
 
-  applyEvents(
-    eventCount: number,
+  applyTicks(
+    tickCount: number,
     updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
   ): Array<MarketQuoteUpdate> {
-    if (this.#quotes.length === 0 || eventCount <= 0) return []
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
 
     const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
     const updatedQuotes = new Map<number, MarketQuoteUpdate>()
     const stride = 97
 
-    this.#eventIndex = 0
-    while (this.#eventIndex < eventCount) {
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
       this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
       const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
       const shouldUpdateHistory =
-        updateSparklines && this.#historyTick++ % 4 === 0
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
 
       this.#applyTick(quote, shouldUpdateHistory, updatedAt)
 
@@ -104,13 +108,15 @@ export class MarketFeedEngine {
         lastSize: quote.lastSize,
         lastMove: quote.lastMove,
         lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
         volume: quote.volume,
         turnover: quote.turnover,
         ...(shouldUpdateHistory || previousUpdate?.history
           ? { history: [...quote.history] }
           : {}),
       })
-      this.#eventIndex++
+      this.#tickIndex++
     }
 
     return [...updatedQuotes.values()]
@@ -132,6 +138,8 @@ export class MarketFeedEngine {
 
     quote.lastMove = nextPrice - previousPrice
     quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
     quote.bid = roundPrice(nextPrice - spread / 2)
     quote.ask = roundPrice(nextPrice + spread / 2)
     quote.bidSize = Math.floor(100 + this.#random() * 25_000)
@@ -152,13 +160,9 @@ function createRandom(seed: number): () => number {
   return () => {
     runtime.state += 0x6d2b79f5
     const stateValue = runtime.state
-    const firstMix = Math.imul(
-      stateValue ^ (stateValue >>> 15),
-      stateValue | 1,
-    )
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
     const secondMix =
-      firstMix +
-      Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
     const value = firstMix ^ secondMix
     return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
   }
diff --git a/examples/solid/realtime-trading/src/market-feed-protocol.ts b/examples/solid/realtime-trading/src/feed/worker/market-feed-protocol.ts
similarity index 54%
rename from examples/solid/realtime-trading/src/market-feed-protocol.ts
rename to examples/solid/realtime-trading/src/feed/worker/market-feed-protocol.ts
index 0a8b9925f5..21997ec89c 100644
--- a/examples/solid/realtime-trading/src/market-feed-protocol.ts
+++ b/examples/solid/realtime-trading/src/feed/worker/market-feed-protocol.ts
@@ -3,7 +3,10 @@ export interface MarketQuoteSnapshot {
   symbol: string
   company: string
   venue: string
+  previousClose: number
   open: number
+  high: number
+  low: number
   price: number
   bid: number
   ask: number
@@ -27,6 +30,8 @@ export interface MarketQuoteUpdate {
   lastSize: number
   lastMove: number
   lastUpdatedAt: number
+  high: number
+  low: number
   volume: number
   turnover: number
   history?: Array<number>
@@ -34,33 +39,32 @@ export interface MarketQuoteUpdate {
 
 export type MarketFeedCommand =
   | {
-      type: 'initialize'
+      type: 'start'
       rowCount: number
-      seed: number
       running: boolean
-      targetEventsPerSecond: number
+      ticksPerSecond: number
+      publishIntervalMs: number
       updateSparklines: boolean
+      sparklineSampleIntervalMs: number
     }
-  | {
-      type: 'configure'
-      running?: boolean
-      targetEventsPerSecond?: number
-      updateSparklines?: boolean
-    }
-  | { type: 'reset'; rowCount: number; seed: number }
-  | { type: 'burst'; eventCount: number }
-  | { type: 'ack'; generation: number; sequence: number }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
 
 export type MarketFeedEvent =
   | {
-      type: 'ready'
-      generation: number
+      type: 'snapshot'
+      sessionId: number
       quotes: Array<MarketQuoteSnapshot>
     }
   | {
-      type: 'batch'
-      generation: number
-      sequence: number
-      eventCount: number
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
       updates: Array<MarketQuoteUpdate>
     }
diff --git a/examples/solid/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/solid/realtime-trading/src/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..7b22656f2e
--- /dev/null
+++ b/examples/solid/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -0,0 +1,142 @@
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: 10_000,
+  publishIntervalMs: 20,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 250,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/solid/realtime-trading/src/index.css b/examples/solid/realtime-trading/src/index.css
index 31c314c951..6d6b5e5369 100644
--- a/examples/solid/realtime-trading/src/index.css
+++ b/examples/solid/realtime-trading/src/index.css
@@ -1,28 +1,48 @@
 :root {
   color-scheme: dark;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    sans-serif;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
   font-synthesis: none;
-  --background: #090c11;
-  --panel: #10151c;
-  --panel-raised: #151b24;
-  --panel-hover: #19212b;
-  --border: #28313d;
-  --border-soft: #1d2530;
-  --text: #d7dde5;
-  --text-strong: #f1f4f8;
-  --muted: #7f8a98;
-  --blue: #4f8cff;
-  --blue-soft: #8cb5ff;
-  --green: #42c98a;
-  --red: #ef6a78;
-  --amber: #e8b95f;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
 }
 
 * {
@@ -51,8 +71,8 @@ button,
 select {
   color: var(--text);
   background: var(--panel-raised);
-  border: 1px solid #394452;
-  border-radius: 2px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
 }
 
 button {
@@ -64,8 +84,8 @@ button {
 }
 
 button:hover {
-  background: #1c2530;
-  border-color: #536171;
+  background: var(--control-hover);
+  border-color: var(--border-strong);
 }
 
 button:focus-visible,
@@ -82,29 +102,48 @@ select {
 }
 
 .trading-terminal {
-  display: flex;
-  flex-direction: column;
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
   width: 100%;
-  height: 100vh;
-  min-height: 640px;
+  height: 100dvh;
+  min-height: 0;
   overflow: hidden;
   background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
 }
 
 .app-bar {
   display: flex;
-  flex: 0 0 42px;
+  min-height: var(--shell-bar-height);
   align-items: center;
   justify-content: space-between;
-  padding: 0 0.75rem;
-  background: #0d1117;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
   border-bottom: 1px solid var(--border);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.68rem;
   letter-spacing: 0.045em;
 }
 
 .brand,
+.header-actions,
 .session-info,
 .feed-status {
   display: flex;
@@ -121,8 +160,9 @@ select {
   width: 24px;
   height: 24px;
   place-items: center;
-  color: #fff;
-  background: var(--blue);
+  color: var(--text-inverse);
+  background: var(--surface-control);
+  border: 1px solid var(--border-strong);
   font-size: 0.62rem;
   font-weight: 800;
 }
@@ -130,8 +170,8 @@ select {
 .environment {
   padding: 0.16rem 0.3rem;
   color: var(--amber);
-  background: rgb(232 185 95 / 8%);
-  border: 1px solid rgb(232 185 95 / 40%);
+  background: color-mix(in srgb, var(--amber) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
   font-size: 0.58rem;
 }
 
@@ -140,9 +180,39 @@ select {
   color: var(--muted);
 }
 
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
 .feed-status {
   gap: 0.4rem;
-  color: #9aa4b1;
+  color: var(--muted);
 }
 
 .feed-status.is-running {
@@ -152,7 +222,7 @@ select {
 .status-dot {
   width: 6px;
   height: 6px;
-  background: #66717d;
+  background: var(--muted);
   border-radius: 50%;
 }
 
@@ -163,69 +233,28 @@ select {
 .development-warning {
   flex: 0 0 auto;
   padding: 0.3rem 0.75rem;
-  color: #e9c67e;
-  background: #211b11;
-  border-bottom: 1px solid #4a3d25;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
   font-size: 0.62rem;
   letter-spacing: 0.04em;
 }
 
-.workspace {
-  display: grid;
-  flex: 1;
-  grid-template-columns: minmax(0, 1fr) 288px;
-  min-height: 0;
-}
-
 .market-panel {
   display: flex;
   min-width: 0;
   min-height: 0;
   flex-direction: column;
   background: var(--panel);
-  border-right: 1px solid var(--border);
-}
-
-.market-toolbar {
-  display: flex;
-  flex: 0 0 42px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 0.75rem;
-  background: #11171f;
-  border-bottom: 1px solid var(--border);
-}
-
-.watchlist-name {
-  display: flex;
-  gap: 0.6rem;
-  align-items: baseline;
-  font-size: 0.67rem;
-}
-
-.watchlist-name span {
-  color: var(--muted);
-}
-
-.watchlist-name strong {
-  color: var(--text-strong);
-  font-size: 0.72rem;
-  letter-spacing: 0.035em;
-}
-
-.market-context {
-  display: flex;
-  gap: 1rem;
-  color: var(--muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.6rem;
+  grid-area: content;
 }
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 64px;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
@@ -233,8 +262,8 @@ select {
 
 .metrics-strip article {
   min-width: 0;
-  padding: 0.55rem 0.65rem;
-  background: #0e131a;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
 }
 
 .metrics-strip span,
@@ -250,10 +279,10 @@ select {
 
 .metrics-strip strong {
   display: block;
-  margin: 0.22rem 0 0.12rem;
+  margin: 0.12rem 0 0.08rem;
   overflow: hidden;
   color: var(--text-strong);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
   text-overflow: ellipsis;
@@ -268,26 +297,44 @@ select {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  background: #0d1218;
-}
-
-app-current-trading-table,
-app-v8-trading-table {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
+  background: var(--surface-table);
 }
 
 table {
   min-width: 100%;
   border-spacing: 0;
   table-layout: fixed;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.72rem;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
   font-variant-numeric: tabular-nums;
 }
 
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
 thead {
   position: sticky;
   z-index: 2;
@@ -295,26 +342,42 @@ thead {
 }
 
 th {
-  height: 28px;
-  padding: 0 0.6rem;
-  color: #8e99a6;
-  background: #171e27;
-  border-right: 1px solid #222b36;
-  border-bottom: 1px solid #394452;
-  font-size: 0.58rem;
-  font-weight: 700;
-  letter-spacing: 0.055em;
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
   text-align: left;
-  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
 }
 
 td {
-  height: 27px;
-  padding: 0 0.6rem;
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
   overflow: hidden;
-  color: #cbd2db;
-  border-right: 1px solid #1a222c;
-  border-bottom: 1px solid #1b232d;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -328,19 +391,224 @@ td:last-child {
   text-align: right;
 }
 
+.market-cell {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+.name-cell {
+  color: var(--text-strong);
+}
+
+.symbol-cell {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
 tbody tr:nth-child(even) {
-  background: rgb(255 255 255 / 1.3%);
+  background: var(--row-alt);
 }
 
 tbody tr:hover {
-  background: #17202a;
+  background: var(--panel-hover);
+}
+
+tbody tr.is-symbol-selected {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
 }
 
-tbody tr.is-selected {
-  background: rgb(79 140 255 / 13%);
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr.is-row-selected {
+  background: rgb(76 145 228 / 13%);
+}
+
+tbody tr.is-symbol-selected {
   box-shadow: inset 2px 0 0 var(--blue);
 }
 
+td.is-cell-selected {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td.is-cell-focused {
+  background: rgb(70 139 222 / 21%);
+}
+
+td.is-cell-selected::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td.selection-top::after {
+  border-top-color: var(--blue);
+}
+
+td.selection-right::after {
+  border-right-color: var(--blue);
+}
+
+td.selection-bottom::after {
+  border-bottom-color: var(--blue);
+}
+
+td.selection-left::after {
+  border-left-color: var(--blue);
+}
+
 .price-button {
   min-width: 4.5rem;
   padding: 0;
@@ -361,8 +629,31 @@ tbody tr.is-selected {
 }
 
 .move-cell {
-  display: inline-block;
-  min-width: 4.8rem;
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
 }
 
 .spread-cell {
@@ -370,7 +661,7 @@ tbody tr.is-selected {
   align-items: baseline;
   justify-content: flex-end;
   gap: 0.35rem;
-  color: #cbd2db;
+  color: var(--text);
 }
 
 .spread-cell small {
@@ -394,22 +685,22 @@ app-depth-cell {
   display: flex;
   height: 17px;
   overflow: hidden;
-  background: #151b23;
+  background: var(--surface-control);
 }
 
 .depth-bid,
 .depth-ask {
   height: 100%;
-  opacity: 0.28;
+  opacity: 0.78;
 }
 
 .depth-bid {
-  background: var(--blue);
-  border-right: 1px solid #10151c;
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
 }
 
 .depth-ask {
-  background: var(--red);
+  background: var(--depth-ask);
 }
 
 .depth-values {
@@ -419,13 +710,13 @@ app-depth-cell {
   align-items: center;
   justify-content: space-between;
   padding: 0 0.28rem;
-  color: #dce2e9;
+  color: var(--text-strong);
   font-size: 0.57rem;
-  text-shadow: 0 1px #080b0f;
+  text-shadow: 0 1px var(--background);
 }
 
 .quote-age {
-  color: #aab3bf;
+  color: var(--muted);
 }
 
 .quote-age-warm {
@@ -446,15 +737,24 @@ app-depth-cell {
 
 .sparkline {
   display: block;
-  width: 8rem;
-  height: 1.2rem;
+  width: 100%;
+  height: 1.35rem;
   margin-left: auto;
+  color: var(--blue-soft);
   overflow: visible;
 }
 
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
 .sparkline polyline {
   fill: none;
-  stroke: var(--blue-soft);
+  stroke: currentColor;
   stroke-linecap: square;
   stroke-linejoin: miter;
   stroke-width: 1.25;
@@ -463,21 +763,23 @@ app-depth-cell {
 
 .market-statusbar {
   display: flex;
-  flex: 0 0 25px;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
   gap: 1.1rem;
   align-items: center;
   padding: 0 0.65rem;
   color: var(--muted);
-  background: #0d1117;
+  background: var(--surface-bar);
   border-top: 1px solid var(--border);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.56rem;
+  grid-area: footer;
   letter-spacing: 0.035em;
 }
 
 .market-statusbar strong {
   margin-left: 0.25rem;
-  color: #c4ccd6;
+  color: var(--text);
   font-weight: 500;
 }
 
@@ -485,20 +787,43 @@ app-depth-cell {
   flex: 1;
 }
 
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
 .configurator {
+  width: 100%;
+  height: 100%;
   min-height: 0;
   overflow: auto;
-  background: #0d1218;
+  background: var(--surface-table);
 }
 
 .configurator > header {
   display: flex;
-  height: 42px;
+  height: var(--shell-bar-height);
   align-items: center;
   justify-content: space-between;
-  padding: 0 0.75rem;
+  padding: 0 var(--shell-inline-padding);
   color: var(--text-strong);
-  background: #11171f;
+  background: var(--surface-toolbar);
   border-bottom: 1px solid var(--border);
   font-size: 0.65rem;
   font-weight: 700;
@@ -514,33 +839,33 @@ app-depth-cell {
 .config-section {
   display: grid;
   gap: 0.7rem;
-  padding: 0.8rem 0.75rem;
+  padding: 0.8rem var(--shell-inline-padding);
   border-bottom: 1px solid var(--border);
 }
 
 .config-section h2 {
   margin: 0;
-  color: #8e99a6;
+  color: var(--muted);
   font-size: 0.58rem;
   letter-spacing: 0.075em;
 }
 
 .primary-action {
   width: 100%;
-  color: #fff;
-  background: #316fdd;
-  border-color: #4f8cff;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
 }
 
 .primary-action:hover {
-  background: #397bed;
-  border-color: #73a2ff;
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
 }
 
 .field {
   display: grid;
   gap: 0.35rem;
-  color: #9ba5b1;
+  color: var(--text);
   font-size: 0.66rem;
 }
 
@@ -551,13 +876,13 @@ app-depth-cell {
 
 .rate-field strong {
   color: var(--text);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-weight: 500;
 }
 
 .field small {
-  color: #66717e;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--muted);
+  font-family: var(--font-mono);
   font-size: 0.55rem;
 }
 
@@ -571,7 +896,7 @@ input[type='range'] {
   display: flex;
   gap: 0.5rem;
   align-items: flex-start;
-  color: #b8c0ca;
+  color: var(--text);
   font-size: 0.66rem;
   line-height: 1.3;
 }
@@ -584,7 +909,7 @@ input[type='range'] {
 .toggle-field small {
   display: block;
   margin-top: 0.14rem;
-  color: #687482;
+  color: var(--muted);
   font-size: 0.57rem;
 }
 
@@ -622,8 +947,8 @@ dt {
 
 dd {
   margin: 0;
-  color: #d4dae2;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
   font-size: 0.62rem;
 }
 
@@ -640,7 +965,7 @@ dd {
 
 .selection strong {
   color: var(--text-strong);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.85rem;
 }
 
@@ -657,66 +982,42 @@ dd {
 }
 
 @media (max-width: 980px) {
-  .workspace {
-    grid-template-columns: minmax(0, 1fr) 250px;
-  }
-
-  .market-context span:not(:first-child) {
-    display: none;
-  }
-
-  .metrics-strip {
-    grid-template-columns: repeat(3, 1fr);
-    flex-basis: 166px;
+  :root {
+    --sidebar-width: 15.625rem;
   }
 }
 
 @media (max-width: 720px) {
-  html,
-  body {
-    min-height: 100%;
-  }
-
-  body {
-    overflow: auto;
-  }
-
   .trading-terminal {
-    height: auto;
-    min-height: 100vh;
-    overflow: visible;
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
   }
 
   .session-info > span:first-child {
     display: none;
   }
 
-  .workspace {
-    display: flex;
-    flex-direction: column;
-  }
-
   .market-panel {
-    min-height: 68vh;
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .metrics-strip {
-    grid-template-columns: repeat(2, 1fr);
-    flex-basis: 220px;
+    min-height: 0;
   }
 
   .table-scroll {
-    height: 58vh;
-    flex: none;
+    min-height: 0;
   }
 
-  .market-context {
-    display: none;
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
   }
 
-  .configurator {
-    overflow: visible;
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
   }
 }
diff --git a/examples/solid/realtime-trading/src/market-feed.worker.ts b/examples/solid/realtime-trading/src/market-feed.worker.ts
deleted file mode 100644
index 7ce6313798..0000000000
--- a/examples/solid/realtime-trading/src/market-feed.worker.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { MarketFeedEngine } from './market-feed-engine'
-import type {
-  MarketFeedCommand,
-  MarketFeedEvent,
-  MarketQuoteUpdate,
-} from './market-feed-protocol'
-
-const engine = new MarketFeedEngine()
-const pendingUpdates = new Map<number, MarketQuoteUpdate>()
-
-const runtime = {
-  generation: 0,
-  sequence: 0,
-  inFlightSequence: null as number | null,
-  pendingEventCount: 0,
-  initialized: false,
-  running: true,
-  targetEventsPerSecond: 10_000,
-  updateSparklines: true,
-  eventBudget: 0,
-  lastTickAt: performance.now(),
-}
-
-addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
-  switch (data.type) {
-    case 'initialize':
-      runtime.running = data.running
-      runtime.targetEventsPerSecond = data.targetEventsPerSecond
-      runtime.updateSparklines = data.updateSparklines
-      reset(data.rowCount, data.seed)
-      break
-    case 'configure':
-      runtime.running = data.running ?? runtime.running
-      runtime.targetEventsPerSecond =
-        data.targetEventsPerSecond ?? runtime.targetEventsPerSecond
-      runtime.updateSparklines =
-        data.updateSparklines ?? runtime.updateSparklines
-      break
-    case 'reset':
-      reset(data.rowCount, data.seed)
-      break
-    case 'burst':
-      produceEvents(data.eventCount)
-      flush()
-      break
-    case 'ack':
-      if (
-        data.generation === runtime.generation &&
-        data.sequence === runtime.inFlightSequence
-      ) {
-        runtime.inFlightSequence = null
-        flush()
-      }
-      break
-  }
-})
-
-setInterval(() => {
-  const now = performance.now()
-  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
-  runtime.lastTickAt = now
-
-  if (runtime.initialized && runtime.running) {
-    runtime.eventBudget +=
-      (runtime.targetEventsPerSecond * elapsed) / 1_000
-    const eventCount = Math.floor(runtime.eventBudget)
-    runtime.eventBudget -= eventCount
-    produceEvents(eventCount)
-  }
-
-  flush()
-}, 16)
-
-function reset(rowCount: number, seed: number): void {
-  runtime.initialized = true
-  runtime.generation++
-  runtime.sequence = 0
-  runtime.inFlightSequence = null
-  runtime.pendingEventCount = 0
-  pendingUpdates.clear()
-  runtime.eventBudget = 0
-  runtime.lastTickAt = performance.now()
-
-  post({
-    type: 'ready',
-    generation: runtime.generation,
-    quotes: engine.reset(rowCount, seed),
-  })
-}
-
-function produceEvents(eventCount: number): void {
-  if (!runtime.initialized || eventCount <= 0) return
-
-  runtime.pendingEventCount += eventCount
-  for (const update of engine.applyEvents(
-    eventCount,
-    runtime.updateSparklines,
-  )) {
-    const previousUpdate = pendingUpdates.get(update.index)
-    pendingUpdates.set(update.index, {
-      ...update,
-      ...(update.history || !previousUpdate?.history
-        ? {}
-        : { history: previousUpdate.history }),
-    })
-  }
-}
-
-function flush(): void {
-  if (
-    runtime.inFlightSequence !== null ||
-    runtime.pendingEventCount === 0
-  )
-    return
-
-  const nextSequence = ++runtime.sequence
-  const message: MarketFeedEvent = {
-    type: 'batch',
-    generation: runtime.generation,
-    sequence: nextSequence,
-    eventCount: runtime.pendingEventCount,
-    updates: [...pendingUpdates.values()],
-  }
-
-  runtime.pendingEventCount = 0
-  pendingUpdates.clear()
-  runtime.inFlightSequence = nextSequence
-  post(message)
-}
-
-function post(event: MarketFeedEvent): void {
-  postMessage(event)
-}
diff --git a/examples/solid/realtime-trading/src/shell/TradingShell.tsx b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
index c312b11b4b..02ae134ca2 100644
--- a/examples/solid/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
@@ -1,10 +1,12 @@
-import { Show } from 'solid-js'
+import { Show, createSignal } from 'solid-js'
 import { longAnimationFramesSupported } from '../benchmark/benchmark-monitor'
-import { useTradingShellController } from './trading-shell-context'
+import {
+  useMarketFeedController,
+  useTradingShellController,
+} from './trading-shell-context'
 import type { JSX } from 'solid-js'
 import type { FeedMetrics } from '../benchmark/benchmark-monitor'
-import type { FeedLoadProfile, RowWorkloadMode } from '../benchmark-profiles'
-import type { TableAdapter } from '../trading-table'
+import type { FeedLoadProfile } from '../feed/feed-load-profiles'
 
 const integerFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 0,
@@ -14,31 +16,45 @@ const rateFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 1,
 })
 export function TradingShell(props: { children: JSX.Element }) {
+  const [sidebarOpen, setSidebarOpen] = createSignal(true)
+  const toggleSidebar = () => setSidebarOpen((open) => !open)
+
   return (
-    <main class="trading-terminal">
-      <AppHeader />
+    <main
+      class="trading-terminal"
+      classList={{ 'is-sidebar-collapsed': !sidebarOpen() }}
+    >
+      <div class="shell-header">
+        <AppHeader
+          sidebarOpen={sidebarOpen()}
+          onSidebarToggle={toggleSidebar}
+        />
 
-      <Show when={import.meta.env.DEV}>
-        <aside class="development-warning">
-          DEV BUILD — use the production configuration before recording results.
-        </aside>
-      </Show>
+        <Show when={import.meta.env.DEV}>
+          <aside class="development-warning">
+            DEV BUILD — use the production configuration before recording
+            results.
+          </aside>
+        </Show>
+      </div>
 
-      <div class="workspace">
-        <section class="market-panel" aria-label="Live synthetic quotes">
-          <MarketToolbar />
-          <MetricsStrip />
-          {props.children}
-          <MarketStatusbar />
-        </section>
+      <section class="market-panel" aria-label="Live synthetic quotes">
+        <MetricsStrip />
+        {props.children}
+      </section>
+      <MarketStatusbar />
+      <div class="sidebar-slot">
         <Configurator />
       </div>
     </main>
   )
 }
 
-function AppHeader() {
-  const { workerReady, running } = useTradingShellController().state
+function AppHeader(props: {
+  sidebarOpen: boolean
+  onSidebarToggle: () => void
+}) {
+  const { workerReady, running } = useMarketFeedController().state
   return (
     <header class="app-bar">
       <div class="brand">
@@ -46,55 +62,38 @@ function AppHeader() {
         <strong>MARKET MONITOR</strong>
         <span class="environment">SIMULATED</span>
       </div>
-      <div class="session-info">
-        <span>SOLID / FLEX RENDER</span>
-        <span
-          class="feed-status"
-          classList={{ 'is-running': workerReady() && running() }}
-          data-testid="feed-status"
+      <div class="header-actions">
+        <div class="session-info">
+          <span>SOLID / FLEX RENDER</span>
+          <span
+            class="feed-status"
+            classList={{ 'is-running': workerReady() && running() }}
+            data-testid="feed-status"
+          >
+            <span class="status-dot" aria-hidden="true" />
+            {!workerReady()
+              ? 'FEED CONNECTING'
+              : running()
+                ? 'FEED LIVE'
+                : 'FEED PAUSED'}
+          </span>
+        </div>
+        <button
+          class="sidebar-toggle"
+          type="button"
+          aria-expanded={props.sidebarOpen}
+          aria-controls="benchmark-configurator"
+          aria-label={
+            props.sidebarOpen ? 'Close configurator' : 'Open configurator'
+          }
+          title={props.sidebarOpen ? 'Close configurator' : 'Open configurator'}
+          onClick={props.onSidebarToggle}
         >
-          <span class="status-dot" aria-hidden="true" />
-          {!workerReady()
-            ? 'FEED CONNECTING'
-            : running()
-              ? 'FEED LIVE'
-              : 'FEED PAUSED'}
-        </span>
-      </div>
-    </header>
-  )
-}
-
-function MarketToolbar() {
-  const {
-    rendererMode,
-    updateSparklines,
-    updateQuoteAges,
-    quotes,
-    displayQuotes,
-    adapterLabel,
-    workloadLabel,
-  } = useTradingShellController().state
-  return (
-    <header class="market-toolbar">
-      <div class="watchlist-name">
-        <span>WATCHLIST</span>
-        <strong>ALL INSTRUMENTS</strong>
-      </div>
-      <div class="market-context">
-        <span>
-          {formatInteger(displayQuotes().length)} /{' '}
-          {formatInteger(quotes().length)} SYMBOLS
-        </span>
-        <span>SOLID {adapterLabel()}</span>
-        <span>WORKER STREAM</span>
-        <span>IMMUTABLE ROWS</span>
-        <span>{workloadLabel()}</span>
-        <span>
-          {rendererMode() === 'stable' ? 'STABLE CELLS' : 'A/B CELL SWAP'}
-        </span>
-        <span>{updateSparklines() ? 'CHARTS ON' : 'CHARTS OFF'}</span>
-        <span>{updateQuoteAges() ? 'AGE CLOCK ON' : 'AGE CLOCK OFF'}</span>
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <rect x="2.5" y="3" width="15" height="14" rx="1.5" />
+            <path d="M12.5 3v14" />
+          </svg>
+        </button>
       </div>
     </header>
   )
@@ -106,7 +105,7 @@ function MarketStatusbar() {
   return (
     <footer class="market-statusbar">
       <span>
-        BATCH EVENTS <strong>{formatInteger(metrics().lastBatchSize)}</strong>
+        BATCH TICKS <strong>{formatInteger(metrics().lastBatchSize)}</strong>
       </span>
       <span>
         ROW UPDATES <strong>{formatInteger(metrics().lastUpdateCount)}</strong>
@@ -118,268 +117,261 @@ function MarketStatusbar() {
         COMPONENTS <strong>{formatInteger(liveComponents())}</strong>
       </span>
       <span class="statusbar-spacer" />
-      <span>WORKER / ACKNOWLEDGED / IMMUTABLE</span>
+      <span>WORKER / FIXED CADENCE / IMMUTABLE</span>
     </footer>
   )
 }
 
 function Configurator() {
   const { state, actions } = useTradingShellController()
+  const feed = useMarketFeedController()
+  const { rendererMode, metrics, selectedQuote, mountedCells, liveComponents } =
+    state
   const {
     running,
-    tableAdapter,
     instrumentCount,
     feedLoadProfile,
-    targetEventsPerSecond,
-    rowWorkloadMode,
-    rendererMode,
+    targetTicksPerSecond,
+    publishIntervalMs,
     updateSparklines,
-    updateQuoteAges,
-    metrics,
-    selectedQuote,
-    mountedCells,
-    liveComponents,
-  } = state
+    sparklineSampleIntervalMs,
+  } = feed.state
+  const { resetViewState, setRendererMode, resetMarket } = actions
   const {
-    toggleFeed,
+    toggle,
     setInstrumentCount,
-    setFeedLoadProfile,
-    setTargetEventsPerSecond,
-    setRowWorkloadMode,
-    setTableAdapter,
-    setRendererMode,
-    setUpdateSparklines,
-    setUpdateQuoteAges,
+    setLoadProfile,
+    setTargetRate,
+    setPublishInterval,
+    setSparklineUpdates,
+    setSparklineSampleInterval,
     runBurst,
-    resetMarket,
-  } = actions
+  } = feed.actions
   return (
-    <aside class="configurator" aria-label="Benchmark configurator">
-          <header>
-            <span>CONFIGURATOR</span>
-            <small>RUN PARAMETERS</small>
-          </header>
-
-          <section class="config-section" aria-labelledby="solid-adapter">
-            <h2 id="solid-adapter">TABLE ADAPTER</h2>
-            <label class="field">
-              <span>Implementation</span>
-              <select
-                data-testid="adapter-select"
-                value={tableAdapter()}
-                onChange={(event) =>
-                  setTableAdapter(event.currentTarget.value as TableAdapter)
-                }
-              >
-                <option value="local">Solid Table local v9</option>
-                <option value="v8">Solid Table 8.21.3</option>
-              </select>
-              <small>Switching disposes one adapter and mounts the next.</small>
-            </label>
-          </section>
+    <aside
+      id="benchmark-configurator"
+      class="configurator"
+      aria-label="Benchmark configurator"
+    >
+      <header>
+        <span>CONFIGURATOR</span>
+        <small>RUN PARAMETERS</small>
+      </header>
 
-          <section class="config-section" aria-labelledby="feed-settings">
-            <h2 id="feed-settings">FEED</h2>
-            <button
-              class="primary-action"
-              type="button"
-              data-testid="feed-toggle"
-              onClick={toggleFeed}
-            >
-              {running() ? 'PAUSE FEED' : 'START FEED'}
-            </button>
+      <section class="config-section" aria-labelledby="feed-settings">
+        <h2 id="feed-settings">FEED</h2>
+        <button
+          class="primary-action"
+          type="button"
+          data-testid="feed-toggle"
+          onClick={toggle}
+        >
+          {running() ? 'PAUSE FEED' : 'START FEED'}
+        </button>
 
-            <label class="field">
-              <span>Instruments</span>
-              <select
-                data-testid="instrument-count-select"
-                value={instrumentCount()}
-                onChange={(event) =>
-                  setInstrumentCount(Number(event.currentTarget.value))
-                }
-              >
-                <option value="50">50</option>
-                <option value="100">100</option>
-                <option value="150">150</option>
-                <option value="250">250</option>
-                <option value="350">350</option>
-                <option value="500">500</option>
-                <option value="750">750</option>
-                <option value="1000">1,000</option>
-              </select>
-            </label>
+        <label class="field">
+          <span>Instruments</span>
+          <select
+            data-testid="instrument-count-select"
+            value={instrumentCount()}
+            onChange={(event) => {
+              resetViewState()
+              setInstrumentCount(Number(event.currentTarget.value))
+            }}
+          >
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="150">150</option>
+            <option value="250">250</option>
+            <option value="350">350</option>
+            <option value="500">500</option>
+            <option value="750">750</option>
+            <option value="1000">1,000</option>
+            <option value="1500">1,500</option>
+            <option value="2500">2,500</option>
+            <option value="5000">5,000</option>
+          </select>
+        </label>
 
-            <label class="field">
-              <span>Load profile</span>
-              <select
-                data-testid="load-profile-select"
-                value={feedLoadProfile()}
-                onChange={(event) =>
-                  setFeedLoadProfile(
-                    event.currentTarget.value as FeedLoadProfile,
-                  )
-                }
-              >
-                <option value="low">Low · 1K/s</option>
-                <option value="medium">Medium · 5K/s</option>
-                <option value="high">High · 10K/s</option>
-                <option value="very-high">Very high · 25K/s</option>
-                <option value="max">Max · 100K/s</option>
-                <option value="custom">Custom</option>
-              </select>
-              <small>
-                High is the repeatable default; Max is intentionally saturating.
-              </small>
-            </label>
+        <label class="field">
+          <span>Load profile</span>
+          <select
+            data-testid="load-profile-select"
+            value={feedLoadProfile()}
+            onChange={(event) =>
+              setLoadProfile(event.currentTarget.value as FeedLoadProfile)
+            }
+          >
+            <option value="low">Low · 1K/s</option>
+            <option value="medium">Medium · 5K/s</option>
+            <option value="high">High · 10K/s</option>
+            <option value="very-high">Very high · 25K/s</option>
+            <option value="max">Max · 100K/s</option>
+            <option value="custom">Custom</option>
+          </select>
+          <small>
+            High is the repeatable default; Max is intentionally saturating.
+          </small>
+        </label>
 
-            <label class="field rate-field">
-              <span>
-                Target event rate
-                <strong>{formatRate(targetEventsPerSecond())}/s</strong>
-              </span>
-              <input
-                data-testid="target-rate-slider"
-                type="range"
-                min="100"
-                max="100000"
-                step="100"
-                value={targetEventsPerSecond()}
-                onInput={(event) =>
-                  setTargetEventsPerSecond(
-                    Number(event.currentTarget.value),
-                  )
-                }
-              />
-              <small>100 — 100,000 events/s</small>
-            </label>
-          </section>
+        <label class="field rate-field">
+          <span>
+            Worker sample generation
+            <strong>{formatRate(targetTicksPerSecond())}/s</strong>
+          </span>
+          <input
+            data-testid="target-rate-slider"
+            type="range"
+            min="100"
+            max="100000"
+            step="100"
+            value={targetTicksPerSecond()}
+            onInput={(event) =>
+              setTargetRate(Number(event.currentTarget.value))
+            }
+          />
+          <small>
+            Synthetic quote samples generated inside the worker, not browser
+            events. Repeated instruments are coalesced before each message.
+          </small>
+        </label>
 
-          <section class="config-section" aria-labelledby="render-settings">
-            <h2 id="render-settings">RENDER PATH</h2>
-            <label class="field">
-              <span>Row workload</span>
-              <select
-                data-testid="row-workload-select"
-                value={rowWorkloadMode()}
-                onChange={(event) =>
-                  setRowWorkloadMode(
-                    event.currentTarget.value as RowWorkloadMode,
-                  )
-                }
-              >
-                <option value="stable">Stable universe</option>
-                <option value="price-sort">Continuously sort by Last</option>
-                <option value="rotating-filter">
-                  Rotate 20% filtered rows
-                </option>
-                <option value="identity-churn">
-                  Replace 10% of ticker IDs
-                </option>
-              </select>
-              <small>
-                Reorder preserves IDs; filter removes/reinserts rows;
-                replacement forces new row identities.
-              </small>
-            </label>
+        <label class="field">
+          <span>Publish interval</span>
+          <select
+            data-testid="publish-interval-select"
+            value={publishIntervalMs()}
+            onChange={(event) =>
+              setPublishInterval(Number(event.currentTarget.value))
+            }
+          >
+            <option value="8">8 ms · 125 msg/s</option>
+            <option value="16">16 ms · 62.5 msg/s</option>
+            <option value="20">20 ms · 50 msg/s</option>
+            <option value="33">33 ms · 30 msg/s</option>
+            <option value="50">50 ms · 20 msg/s</option>
+            <option value="100">100 ms · 10 msg/s</option>
+            <option value="250">250 ms · 4 msg/s</option>
+            <option value="500">500 ms · 2 msg/s</option>
+            <option value="1000">1000 ms · 1 msg/s</option>
+          </select>
+          <small>
+            The worker posts one coalesced update message at this target
+            cadence.
+          </small>
+        </label>
+      </section>
 
-            <label class="toggle-field">
-              <input
-                type="checkbox"
-                checked={rendererMode() === 'swap'}
-                onChange={(event) =>
-                  setRendererMode(
-                    event.currentTarget.checked ? 'swap' : 'stable',
-                  )
-                }
-              />
-              <span>
-                Swap Tick component A ↔ B
-                <small>destroy and recreate when direction changes</small>
-              </span>
-            </label>
+      <section class="config-section" aria-labelledby="render-settings">
+        <h2 id="render-settings">RENDER PATH</h2>
+        <label class="toggle-field">
+          <input
+            type="checkbox"
+            checked={rendererMode() === 'swap'}
+            onChange={(event) =>
+              setRendererMode(event.currentTarget.checked ? 'swap' : 'stable')
+            }
+          />
+          <span>
+            Swap Tick component A ↔ B
+            <small>destroy and recreate when direction changes</small>
+          </span>
+        </label>
 
-            <label class="toggle-field">
-              <input
-                type="checkbox"
-                checked={updateSparklines()}
-                onChange={(event) =>
-                  setUpdateSparklines(event.currentTarget.checked)
-                }
-              />
-              <span>
-                Update sparklines
-                <small>new history input every four quote events</small>
-              </span>
-            </label>
+        <label class="toggle-field">
+          <input
+            type="checkbox"
+            checked={updateSparklines()}
+            onChange={(event) =>
+              setSparklineUpdates(event.currentTarget.checked)
+            }
+          />
+          <span>
+            Update intraday charts
+            <small>
+              sample rolling prices independently for every instrument
+            </small>
+          </span>
+        </label>
 
-            <label class="toggle-field">
-              <input
-                type="checkbox"
-                checked={updateQuoteAges()}
-                onChange={(event) =>
-                  setUpdateQuoteAges(event.currentTarget.checked)
-                }
-              />
-              <span>
-                Update quote age clock
-                <small>
-                  invalidates every Age cell on a shared 100 ms clock
-                </small>
-              </span>
-            </label>
-          </section>
+        <label class="field">
+          <span>Intraday sample interval</span>
+          <select
+            data-testid="sparkline-sample-interval-select"
+            value={sparklineSampleIntervalMs()}
+            onChange={(event) =>
+              setSparklineSampleInterval(Number(event.currentTarget.value))
+            }
+          >
+            <option value="100">100 ms</option>
+            <option value="250">250 ms</option>
+            <option value="500">500 ms</option>
+            <option value="1000">1,000 ms</option>
+            <option value="2000">2,000 ms</option>
+          </select>
+          <small>
+            Minimum time between rolling samples for the same instrument.
+          </small>
+        </label>
+      </section>
 
-          <section class="config-section" aria-labelledby="stress-actions">
-            <h2 id="stress-actions">STRESS ACTIONS</h2>
-            <div class="action-grid">
-              <button type="button" onClick={runBurst}>
-                RUN 25K BURST
-              </button>
-              <button type="button" onClick={resetMarket}>
-                RESET SESSION
-              </button>
-            </div>
-          </section>
+      <section class="config-section" aria-labelledby="stress-actions">
+        <h2 id="stress-actions">STRESS ACTIONS</h2>
+        <div class="action-grid">
+          <button type="button" onClick={runBurst}>
+            RUN 25K BURST
+          </button>
+          <button type="button" onClick={resetMarket}>
+            RESET SESSION
+          </button>
+        </div>
+      </section>
 
-          <Diagnostics
-            metrics={metrics()}
-            mountedCells={mountedCells()}
-            liveComponents={liveComponents()}
-          />
+      <Diagnostics
+        metrics={metrics()}
+        mountedCells={mountedCells()}
+        liveComponents={liveComponents()}
+      />
 
-          <section class="config-section selected-instrument">
-            <h2>SELECTED INSTRUMENT</h2>
-            <Show
-              when={selectedQuote()}
-              fallback={
-                <p>Click a value in the Last column to inspect its output.</p>
-              }
-            >
-              {(quote) => (
-                <>
-                  <div class="selection">
-                    <div>
-                      <strong>{quote().symbol}</strong>
-                      <span>{quote().company}</span>
-                    </div>
-                    <small>{quote().venue}</small>
-                  </div>
-                  <dl>
-                    <div>
-                      <dt>Last</dt>
-                      <dd>{quote().price.toFixed(2)}</dd>
-                    </div>
-                    <div>
-                      <dt>Bid / ask</dt>
-                      <dd>
-                        {quote().bid.toFixed(2)} / {quote().ask.toFixed(2)}
-                      </dd>
-                    </div>
-                  </dl>
-                </>
-              )}
-            </Show>
-          </section>
+      <section
+        class="config-section selected-instrument"
+        data-testid="selected-instrument"
+      >
+        <h2>SELECTED INSTRUMENT</h2>
+        <Show
+          when={selectedQuote()}
+          fallback={
+            <p>
+              Click or begin a cell selection in any row to inspect its
+              instrument.
+            </p>
+          }
+        >
+          {(quote) => (
+            <>
+              <div class="selection">
+                <div>
+                  <strong>{quote().symbol}</strong>
+                  <span>{quote().company}</span>
+                </div>
+                <small>{quote().venue}</small>
+              </div>
+              <dl>
+                <div>
+                  <dt>Last</dt>
+                  <dd>{quote().price.toFixed(2)}</dd>
+                </div>
+                <div>
+                  <dt>Bid / ask</dt>
+                  <dd>
+                    {quote().bid.toFixed(2)} / {quote().ask.toFixed(2)}
+                  </dd>
+                </div>
+              </dl>
+            </>
+          )}
+        </Show>
+      </section>
     </aside>
   )
 }
@@ -389,25 +381,39 @@ function MetricsStrip() {
   return (
     <section class="metrics-strip" aria-label="Live performance metrics">
       <article>
-        <span>THROUGHPUT</span>
+        <span>WORKER SAMPLES</span>
         <strong data-testid="actual-rate">
-          {formatRate(metrics().actualEventsPerSecond)}
+          {formatRate(metrics().actualTicksPerSecond)}
         </strong>
-        <small>events/s</small>
+        <small>generated samples/s</small>
       </article>
       <article>
-        <span>RAF RATE</span>
-        <strong data-testid="raf-rate">
-          {metrics().rafCallbacksPerSecond.toFixed(1)}
+        <span>ROW UPDATES</span>
+        <strong data-testid="row-update-rate">
+          {formatRate(metrics().rowUpdatesPerSecond)}
         </strong>
-        <small>callbacks/s</small>
+        <small>unique rows applied/s</small>
       </article>
       <article>
-        <span>TABLE RENDERS</span>
+        <span>MESSAGES</span>
+        <strong data-testid="message-rate">
+          {metrics().workerMessagesPerSecond.toFixed(1)}
+        </strong>
+        <small>worker messages/s</small>
+      </article>
+      <article>
+        <span>STATE APPLIES</span>
+        <strong data-testid="state-apply-rate">
+          {metrics().stateApplicationsPerSecond.toFixed(1)}
+        </strong>
+        <small>quote snapshots/s</small>
+      </article>
+      <article>
+        <span>TABLE COMMITS</span>
         <strong data-testid="table-render-rate">
           {metrics().tableRendersPerSecond.toFixed(1)}
         </strong>
-        <small>worker batches/s</small>
+        <small>completed renders/s</small>
       </article>
       <article>
         <span>AVG RENDER</span>
@@ -438,18 +444,9 @@ function MetricsStrip() {
           >
             {metrics().longAnimationFrames}
           </strong>
-          <small>
-            worst {formatMs(metrics().worstLongAnimationFrameMs)}
-          </small>
+          <small>worst {formatMs(metrics().worstLongAnimationFrameMs)}</small>
         </Show>
       </article>
-      <article>
-        <span>TOTAL EVENTS</span>
-        <strong data-testid="total-events">
-          {formatInteger(metrics().totalEvents)}
-        </strong>
-        <small>since reset</small>
-      </article>
     </section>
   )
 }
@@ -515,7 +512,13 @@ function Diagnostics(props: {
           </dd>
         </div>
         <div>
-          <dt>Last batch events / rows</dt>
+          <dt>Worker-coalesced updates / s</dt>
+          <dd data-testid="superseded-update-rate">
+            {formatRate(props.metrics.supersededUpdatesPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Last batch ticks / rows</dt>
           <dd>
             {formatInteger(props.metrics.lastBatchSize)} /{' '}
             {formatInteger(props.metrics.lastUpdateCount)}
@@ -567,8 +570,6 @@ function formatInvocationRates(
   return activeRates.length === 0
     ? 'No calls in sample'
     : activeRates
-        .map(
-          (rate) => `${rate.name} ${formatRate(rate.callsPerSecond)}`,
-        )
+        .map((rate) => `${rate.name} ${formatRate(rate.callsPerSecond)}`)
         .join(' · ')
 }
diff --git a/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx b/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
index 99b4794fdd..06103d7733 100644
--- a/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
+++ b/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
@@ -1,20 +1,43 @@
 import { createContext, useContext } from 'solid-js'
 import type { JSX } from 'solid-js'
-import type { TradingBenchmarkController } from '../core/trading-benchmark-controller'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
 
 const TradingShellContext = createContext<TradingBenchmarkController>()
+const MarketFeedContext = createContext<MarketFeedController>()
+
+export function MarketFeedProvider(props: {
+  controller: MarketFeedController
+  children: JSX.Element
+}) {
+  return (
+    <MarketFeedContext.Provider value={props.controller}>
+      {props.children}
+    </MarketFeedContext.Provider>
+  )
+}
 
 export function TradingShellProvider(props: {
   controller: TradingBenchmarkController
   children: JSX.Element
 }) {
   return (
-    <TradingShellContext.Provider value={props.controller}>
-      {props.children}
-    </TradingShellContext.Provider>
+    <MarketFeedProvider controller={props.controller.feed}>
+      <TradingShellContext.Provider value={props.controller}>
+        {props.children}
+      </TradingShellContext.Provider>
+    </MarketFeedProvider>
   )
 }
 
+export function useMarketFeedController(): MarketFeedController {
+  const controller = useContext(MarketFeedContext)
+  if (!controller) {
+    throw new Error('Market data consumers must be rendered inside MarketFeedProvider')
+  }
+  return controller
+}
+
 export function useTradingShellController(): TradingBenchmarkController {
   const controller = useContext(TradingShellContext)
   if (!controller) {
diff --git a/examples/solid/realtime-trading/src/quote-cells.tsx b/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
similarity index 86%
rename from examples/solid/realtime-trading/src/quote-cells.tsx
rename to examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
index f797042441..4a2c368d9c 100644
--- a/examples/solid/realtime-trading/src/quote-cells.tsx
+++ b/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
@@ -11,19 +11,19 @@ export const quoteCellLifecycle = {
 }
 
 export const quoteCellRendererNames = [
-  'Ticker',
-  'Venue',
+  'Market',
+  'Name',
+  'Symbol',
+  'Last',
+  'Change',
+  'ChangePercent',
   'Bid',
+  'BidVolume',
   'Ask',
-  'Spread',
-  'Last',
-  'LastMove',
-  'LastQty',
-  'Depth',
-  'QuoteAge',
-  'DayChange',
-  'TotalQty',
-  'TradedValue',
+  'AskVolume',
+  'Open',
+  'High',
+  'Low',
   'Intraday',
 ] as const
 
@@ -32,6 +32,7 @@ export const quoteComponentNames = [
   'StableMoveCell',
   'UpMoveCell',
   'DownMoveCell',
+  'PercentChangeCell',
   'SpreadCell',
   'DepthCell',
   'QuoteAgeCell',
@@ -118,6 +119,22 @@ export function DownMoveCell(props: { move: number }) {
   return <span class="move-cell quote-down">▼ {formatSigned(props.move)}</span>
 }
 
+export function PercentChangeCell(props: { value: number }) {
+  trackLifecycle('PercentChangeCell')
+  return (
+    <span
+      class="percent-change-cell"
+      classList={{
+        'quote-up': props.value >= 0,
+        'quote-down': props.value < 0,
+      }}
+    >
+      {props.value >= 0 ? '+' : ''}
+      {props.value.toFixed(2)}%
+    </span>
+  )
+}
+
 export function SpreadCell(props: { bid: number; ask: number }) {
   trackLifecycle('SpreadCell')
   const spread = () => Math.max(0, props.ask - props.bid)
@@ -175,6 +192,7 @@ export function QuoteAgeCell(props: { ageMs: number }) {
 
 export function SparklineCell(props: { values: ReadonlyArray<number> }) {
   trackLifecycle('SparklineCell')
+  const rising = () => (props.values.at(-1) ?? 0) >= (props.values[0] ?? 0)
   const points = () => {
     const min = Math.min(...props.values)
     const max = Math.max(...props.values)
@@ -190,7 +208,12 @@ export function SparklineCell(props: { values: ReadonlyArray<number> }) {
   }
 
   return (
-    <svg class="sparkline" viewBox="0 0 100 24" preserveAspectRatio="none">
+    <svg
+      class="sparkline"
+      classList={{ 'quote-up': rising(), 'quote-down': !rising() }}
+      viewBox="0 0 100 24"
+      preserveAspectRatio="none"
+    >
       <polyline points={points()} />
     </svg>
   )
diff --git a/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx b/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
new file mode 100644
index 0000000000..f7c81dbfb5
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
@@ -0,0 +1,240 @@
+import {
+  DownMoveCell,
+  PercentChangeCell,
+  PriceCell,
+  SparklineCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells'
+import type { JSX } from 'solid-js'
+import type { MarketQuote } from '../../feed/market-data'
+
+export type RendererMode = 'stable' | 'swap'
+
+export interface TradingTableProps {
+  quotes: Array<MarketQuote>
+  rendererMode: RendererMode
+  selectedSymbol: string | null
+  onSelectSymbol: (symbol: string) => void
+}
+
+interface TradingCellContext {
+  row: { original: MarketQuote }
+}
+
+interface TradingColumnDefinition {
+  id: string
+  header: string
+  size?: number
+  columns?: Array<TradingColumnDefinition>
+  accessorFn?: (row: MarketQuote) => unknown
+  enableSorting?: boolean
+  cell?: (context: TradingCellContext) => JSX.Element
+}
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+export function createTradingColumns(
+  props: TradingTableProps,
+): Array<TradingColumnDefinition> {
+  return [
+    {
+      id: 'instrument',
+      header: 'Instrument',
+      columns: [
+        {
+          id: 'identity',
+          header: 'Identity',
+          columns: [
+            {
+              id: 'market',
+              header: 'Market',
+              size: 72,
+              accessorFn: (row) => row.venue,
+              cell: ({ row }) =>
+                recordCellRender('Market', () => row.original.venue),
+            },
+            {
+              id: 'name',
+              header: 'Name',
+              size: 180,
+              accessorFn: (row) => row.company,
+              cell: ({ row }) =>
+                recordCellRender('Name', () => row.original.company),
+            },
+            {
+              id: 'symbol',
+              header: 'Symbol',
+              size: 92,
+              accessorFn: (row) => row.symbol,
+              cell: ({ row }) =>
+                recordCellRender('Symbol', () => row.original.symbol),
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'marketData',
+      header: 'Market Data',
+      columns: [
+        {
+          id: 'priceAndChange',
+          header: 'Price & Change',
+          columns: [
+            {
+              id: 'price',
+              header: 'Price',
+              size: 96,
+              accessorFn: (row) => row.price,
+              cell: ({ row }) =>
+                recordCellRender('Last', () => {
+                  const change = getDayChange(row.original)
+                  return (
+                    <PriceCell
+                      price={row.original.price}
+                      move={change}
+                      onSelect={() => props.onSelectSymbol(row.original.symbol)}
+                    />
+                  )
+                }),
+            },
+            {
+              id: 'change',
+              header: 'Chg',
+              size: 94,
+              accessorFn: (row) => getDayChange(row),
+              cell: ({ row }) =>
+                recordCellRender('Change', () => {
+                  const move = getDayChange(row.original)
+                  if (props.rendererMode === 'stable') {
+                    return <StableMoveCell move={move} />
+                  }
+                  return move >= 0 ? (
+                    <UpMoveCell move={move} />
+                  ) : (
+                    <DownMoveCell move={move} />
+                  )
+                }),
+            },
+            {
+              id: 'changePercent',
+              header: 'Chg%',
+              size: 90,
+              accessorFn: (row) => getDayChangePercent(row),
+              cell: ({ row }) =>
+                recordCellRender('ChangePercent', () => (
+                  <PercentChangeCell
+                    value={getDayChangePercent(row.original)}
+                  />
+                )),
+            },
+          ],
+        },
+        {
+          id: 'orderBook',
+          header: 'Order Book',
+          columns: [
+            {
+              id: 'bid',
+              header: 'Bid',
+              size: 90,
+              accessorFn: (row) => row.bid,
+              cell: ({ row }) =>
+                recordCellRender('Bid', () => row.original.bid.toFixed(2)),
+            },
+            {
+              id: 'bidSize',
+              header: 'Bid Vol',
+              size: 100,
+              accessorFn: (row) => row.bidSize,
+              cell: ({ row }) =>
+                recordCellRender('BidVolume', () =>
+                  compactFormatter.format(row.original.bidSize),
+                ),
+            },
+            {
+              id: 'ask',
+              header: 'Ask',
+              size: 90,
+              accessorFn: (row) => row.ask,
+              cell: ({ row }) =>
+                recordCellRender('Ask', () => row.original.ask.toFixed(2)),
+            },
+            {
+              id: 'askSize',
+              header: 'Ask Vol',
+              size: 100,
+              accessorFn: (row) => row.askSize,
+              cell: ({ row }) =>
+                recordCellRender('AskVolume', () =>
+                  compactFormatter.format(row.original.askSize),
+                ),
+            },
+          ],
+        },
+        {
+          id: 'session',
+          header: 'Session',
+          columns: [
+            {
+              id: 'open',
+              header: 'Open',
+              size: 90,
+              accessorFn: (row) => row.open,
+              cell: ({ row }) =>
+                recordCellRender('Open', () => row.original.open.toFixed(2)),
+            },
+            {
+              id: 'high',
+              header: 'High',
+              size: 90,
+              accessorFn: (row) => row.high,
+              cell: ({ row }) =>
+                recordCellRender('High', () => row.original.high.toFixed(2)),
+            },
+            {
+              id: 'low',
+              header: 'Low',
+              size: 90,
+              accessorFn: (row) => row.low,
+              cell: ({ row }) =>
+                recordCellRender('Low', () => row.original.low.toFixed(2)),
+            },
+          ],
+        },
+        {
+          id: 'chart',
+          header: 'Chart',
+          columns: [
+            {
+              id: 'history',
+              header: 'Intraday',
+              size: 150,
+              enableSorting: false,
+              cell: ({ row }) =>
+                recordCellRender('Intraday', () => (
+                  <SparklineCell values={row.original.history} />
+                )),
+            },
+          ],
+        },
+      ],
+    },
+  ]
+}
+
+function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+
+function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
+
+export const TRADING_COLUMN_COUNT = 14
diff --git a/examples/solid/realtime-trading/src/table/table-interactions.ts b/examples/solid/realtime-trading/src/table/table-interactions.ts
new file mode 100644
index 0000000000..af4797da46
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/table-interactions.ts
@@ -0,0 +1,100 @@
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+  })
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: KeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-table.tsx b/examples/solid/realtime-trading/src/table/trading-table.tsx
new file mode 100644
index 0000000000..958a2b7b2a
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-table.tsx
@@ -0,0 +1,335 @@
+import {
+  FlexRender,
+  createSortedRowModel,
+  createTable,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/solid-table'
+import { For, Show, createMemo, onCleanup, onMount } from 'solid-js'
+import { createTradingColumns } from './table-config/trading-columns'
+import {
+  handleCellNavigation,
+  reorderColumnIds,
+  selectRowFromPointer,
+  sortAriaValue,
+  sortIndicator,
+} from './table-interactions'
+import type { TradingTableProps } from './table-config/trading-columns'
+
+const features = tableFeatures({
+  ...stockFeatures,
+  sortedRowModel: createSortedRowModel(),
+})
+
+export { TRADING_COLUMN_COUNT } from './table-config/trading-columns'
+export type {
+  RendererMode,
+  TradingTableProps,
+} from './table-config/trading-columns'
+
+export function TradingTable(props: TradingTableProps) {
+  const columns = createTradingColumns(props)
+  const dragRuntime: ColumnDragRuntime = {
+    columnId: null,
+    sourceElement: null,
+    targetElement: null,
+  }
+  const layoutRuntime: TableLayoutRuntime = {
+    manuallyResized: false,
+    scrollElement: null,
+  }
+  const table = createTable({
+    key: 'solid-realtime-trading',
+    features,
+    columnResizeMode: 'onChange',
+    defaultColumn: { minSize: 56, maxSize: 800 },
+    autoResetCellSelection: false,
+    columns,
+    get data() {
+      return props.quotes
+    },
+    getRowId: (row) => row.id,
+  })
+  const tableStyle = createMemo(() => {
+    void table.atoms.columnSizing.get()
+    void table.atoms.columnOrder.get()
+    const styles: Record<string, string> = {
+      width: `${table.getTotalSize()}px`,
+    }
+    for (const header of table.getFlatHeaders()) {
+      styles[`--header-${header.id}-size`] = `${header.getSize()}`
+      styles[`--col-${header.column.id}-size`] = `${header.column.getSize()}`
+    }
+    return styles
+  })
+  onMount(() => {
+    const fitAvailableWidth = () => {
+      const scrollElement = layoutRuntime.scrollElement
+      if (!scrollElement || layoutRuntime.manuallyResized) return
+      const currentWidth = table.getTotalSize()
+      const availableWidth = scrollElement.clientWidth
+      if (availableWidth <= currentWidth + 1 || currentWidth <= 0) return
+
+      const ratio = availableWidth / currentWidth
+      table.setColumnSizing(
+        Object.fromEntries(
+          table
+            .getVisibleLeafColumns()
+            .map((column) => [column.id, column.getSize() * ratio]),
+        ),
+      )
+    }
+    const resizeObserver = new ResizeObserver(fitAvailableWidth)
+    const resizingSubscription = table.atoms.columnResizing.subscribe(
+      (state) => {
+        if (state.isResizingColumn !== false) {
+          layoutRuntime.manuallyResized = true
+        }
+      },
+    )
+    if (layoutRuntime.scrollElement) {
+      resizeObserver.observe(layoutRuntime.scrollElement)
+    }
+    fitAvailableWidth()
+
+    onCleanup(() => {
+      resizeObserver.disconnect()
+      resizingSubscription.unsubscribe()
+    })
+  })
+
+  return (
+    <div
+      ref={(element) => {
+        layoutRuntime.scrollElement = element
+      }}
+      class="table-scroll"
+      data-trading-table
+      tabindex={0}
+      onKeyDown={(event) => handleCellNavigation(table, event)}
+    >
+      <table
+        class="trading-data-grid"
+        role="grid"
+        aria-multiselectable="true"
+        style={tableStyle()}
+      >
+        <thead>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (
+              <tr>
+                <For each={headerGroup.headers}>
+                  {(header) => {
+                    const isLeaf = () => header.subHeaders.length === 0
+                    const sorted = () => header.column.getIsSorted()
+                    return (
+                      <th
+                        colSpan={header.colSpan}
+                        style={{
+                          width: `calc(var(--header-${header.id}-size) * 1px)`,
+                        }}
+                        aria-sort={
+                          isLeaf() ? sortAriaValue(sorted()) : undefined
+                        }
+                        classList={{
+                          'column-group-header': !isLeaf(),
+                          'numeric-header':
+                            isLeaf() && !isIdentityColumn(header.column.id),
+                        }}
+                      >
+                        <Show when={!header.isPlaceholder}>
+                          <Show
+                            when={isLeaf()}
+                            fallback={<FlexRender header={header} />}
+                          >
+                            <div
+                              class="leaf-header-content"
+                              onDragOver={(event) => {
+                                event.preventDefault()
+                                showColumnDropTarget(
+                                  dragRuntime,
+                                  header.column.id,
+                                  event.currentTarget.closest('th'),
+                                )
+                              }}
+                              onDrop={(event) => {
+                                event.preventDefault()
+                                const sourceId =
+                                  event.dataTransfer?.getData('text/plain') ||
+                                  dragRuntime.columnId
+                                if (sourceId) {
+                                  table.setColumnOrder(
+                                    reorderColumnIds(
+                                      table
+                                        .getVisibleLeafColumns()
+                                        .map((column) => column.id),
+                                      sourceId,
+                                      header.column.id,
+                                    ),
+                                  )
+                                }
+                                clearColumnDrag(dragRuntime)
+                              }}
+                            >
+                              <button
+                                type="button"
+                                class="column-drag-handle"
+                                draggable={true}
+                                aria-label={`Move ${header.column.id} column`}
+                                onDragStart={(event) => {
+                                  dragRuntime.columnId = header.column.id
+                                  dragRuntime.sourceElement =
+                                    event.currentTarget.closest('th')
+                                  dragRuntime.sourceElement?.classList.add(
+                                    'is-column-dragging',
+                                  )
+                                  const dataTransfer = event.dataTransfer
+                                  if (!dataTransfer) return
+                                  dataTransfer.effectAllowed = 'move'
+                                  dataTransfer.setData(
+                                    'text/plain',
+                                    header.column.id,
+                                  )
+                                }}
+                                onDragEnd={() => {
+                                  clearColumnDrag(dragRuntime)
+                                }}
+                              >
+                                ⋮⋮
+                              </button>
+                              <button
+                                type="button"
+                                class="sort-header-button"
+                                classList={{
+                                  'is-sortable': header.column.getCanSort(),
+                                }}
+                                disabled={!header.column.getCanSort()}
+                                onClick={header.column.getToggleSortingHandler()}
+                              >
+                                <span class="header-label">
+                                  <FlexRender header={header} />
+                                </span>
+                                <Show when={header.column.getCanSort()}>
+                                  <span
+                                    class="sort-indicator"
+                                    classList={{ 'is-active': !!sorted() }}
+                                    aria-hidden="true"
+                                  >
+                                    {sortIndicator(sorted())}
+                                  </span>
+                                </Show>
+                              </button>
+                            </div>
+                            <Show when={header.column.getCanResize()}>
+                              <div
+                                class="column-resize-handle"
+                                classList={{
+                                  'is-resizing': header.column.getIsResizing(),
+                                }}
+                                role="separator"
+                                aria-orientation="vertical"
+                                onDblClick={() => header.column.resetSize()}
+                                onMouseDown={header.getResizeHandler()}
+                                onTouchStart={header.getResizeHandler()}
+                              />
+                            </Show>
+                          </Show>
+                        </Show>
+                      </th>
+                    )
+                  }}
+                </For>
+              </tr>
+            )}
+          </For>
+        </thead>
+        <tbody>
+          <For each={table.getRowModel().rows}>
+            {(row) => (
+              <tr
+                classList={{
+                  'is-symbol-selected':
+                    props.selectedSymbol === row.original.symbol,
+                  'is-row-selected': row.getIsSelected(),
+                }}
+                data-symbol={row.original.symbol}
+                data-row-id={row.original.id}
+                title={row.original.company}
+                aria-selected={row.getIsSelected()}
+                onMouseDown={(event) => {
+                  if (event.button === 0) {
+                    props.onSelectSymbol(row.original.symbol)
+                  }
+                }}
+                onClick={(event) => selectRowFromPointer(table, row, event)}
+              >
+                <For each={row.getVisibleCells()}>
+                  {(cell) => (
+                    <td
+                      style={{
+                        width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                      }}
+                      classList={{
+                        'numeric-cell': !isIdentityColumn(cell.column.id),
+                        'market-cell': cell.column.id === 'market',
+                        'name-cell': cell.column.id === 'name',
+                        'symbol-cell': cell.column.id === 'symbol',
+                        'is-cell-selected': cell.getIsSelected(),
+                        'is-cell-focused': cell.getIsFocused(),
+                        'selection-top': cell.getSelectionEdges().top,
+                        'selection-right': cell.getSelectionEdges().right,
+                        'selection-bottom': cell.getSelectionEdges().bottom,
+                        'selection-left': cell.getSelectionEdges().left,
+                      }}
+                      aria-selected={cell.getIsSelected()}
+                      tabindex={cell.getTabIndex()}
+                      onMouseDown={cell.getSelectionStartHandler()}
+                      onMouseEnter={cell.getSelectionExtendHandler()}
+                    >
+                      <FlexRender cell={cell} />
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+interface ColumnDragRuntime {
+  columnId: string | null
+  sourceElement: HTMLTableCellElement | null
+  targetElement: HTMLTableCellElement | null
+}
+
+interface TableLayoutRuntime {
+  manuallyResized: boolean
+  scrollElement: HTMLDivElement | null
+}
+
+function clearColumnDrag(runtime: ColumnDragRuntime): void {
+  runtime.sourceElement?.classList.remove('is-column-dragging')
+  runtime.targetElement?.classList.remove('is-column-drop-target')
+  runtime.columnId = null
+  runtime.sourceElement = null
+  runtime.targetElement = null
+}
+
+function showColumnDropTarget(
+  runtime: ColumnDragRuntime,
+  targetColumnId: string,
+  targetElement: HTMLTableCellElement | null,
+): void {
+  runtime.targetElement?.classList.remove('is-column-drop-target')
+  runtime.targetElement = null
+  if (runtime.columnId === targetColumnId || !targetElement) return
+  targetElement.classList.add('is-column-drop-target')
+  runtime.targetElement = targetElement
+}
+
+function isIdentityColumn(columnId: string): boolean {
+  return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
+}
diff --git a/examples/solid/realtime-trading/src/trading-table.tsx b/examples/solid/realtime-trading/src/trading-table.tsx
deleted file mode 100644
index dda337e88e..0000000000
--- a/examples/solid/realtime-trading/src/trading-table.tsx
+++ /dev/null
@@ -1,339 +0,0 @@
-import {
-  createSolidTable,
-  flexRender as flexRenderV8,
-  getCoreRowModel,
-} from '@tanstack/solid-table-v8'
-import { FlexRender, createTable, stockFeatures } from '@tanstack/solid-table'
-import { For, Show } from 'solid-js'
-import {
-  DepthCell,
-  DownMoveCell,
-  PriceCell,
-  QuoteAgeCell,
-  SparklineCell,
-  SpreadCell,
-  StableMoveCell,
-  UpMoveCell,
-  recordCellRender,
-} from './quote-cells'
-import type { JSX } from 'solid-js'
-import type { MarketQuote } from './market-data'
-
-export type RendererMode = 'stable' | 'swap'
-export type TableAdapter = 'local' | 'v8'
-
-export interface TradingTableProps {
-  quotes: Array<MarketQuote>
-  rendererMode: RendererMode
-  updateQuoteAges: boolean
-  quoteClock: number
-  selectedSymbol: string | null
-  onSelectSymbol: (symbol: string) => void
-}
-
-interface TradingCellContext {
-  row: { original: MarketQuote }
-}
-
-interface TradingColumnDefinition {
-  id: string
-  header: string
-  size: number
-  cell: (context: TradingCellContext) => JSX.Element
-}
-
-const compactFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-})
-const currencyFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-  style: 'currency',
-  currency: 'USD',
-})
-
-function createTradingColumns(
-  props: TradingTableProps,
-): Array<TradingColumnDefinition> {
-  return [
-    {
-      id: 'symbol',
-      header: 'Ticker',
-      size: 90,
-      cell: ({ row }) =>
-        recordCellRender('Ticker', () => row.original.symbol),
-    },
-    {
-      id: 'venue',
-      header: 'Venue',
-      size: 70,
-      cell: ({ row }) => recordCellRender('Venue', () => row.original.venue),
-    },
-    {
-      id: 'bid',
-      header: 'Bid',
-      size: 90,
-      cell: ({ row }) =>
-        recordCellRender('Bid', () => row.original.bid.toFixed(2)),
-    },
-    {
-      id: 'ask',
-      header: 'Ask',
-      size: 90,
-      cell: ({ row }) =>
-        recordCellRender('Ask', () => row.original.ask.toFixed(2)),
-    },
-    {
-      id: 'spread',
-      header: 'Spread',
-      size: 95,
-      cell: ({ row }) =>
-        recordCellRender('Spread', () => (
-          <SpreadCell bid={row.original.bid} ask={row.original.ask} />
-        )),
-    },
-    {
-      id: 'price',
-      header: 'Last',
-      size: 100,
-      cell: ({ row }) =>
-        recordCellRender('Last', () => (
-          <PriceCell
-            price={row.original.price}
-            move={row.original.lastMove}
-            onSelect={() => props.onSelectSymbol(row.original.symbol)}
-          />
-        )),
-    },
-    {
-      id: 'lastMove',
-      header: 'Last Move',
-      size: 105,
-      cell: ({ row }) =>
-        recordCellRender('LastMove', () => {
-          const move = row.original.lastMove
-          if (props.rendererMode === 'stable') {
-            return <StableMoveCell move={move} />
-          }
-          return move >= 0 ? (
-            <UpMoveCell move={move} />
-          ) : (
-            <DownMoveCell move={move} />
-          )
-        }),
-    },
-    {
-      id: 'lastSize',
-      header: 'Last Qty',
-      size: 90,
-      cell: ({ row }) =>
-        recordCellRender('LastQty', () =>
-          compactFormatter.format(row.original.lastSize),
-        ),
-    },
-    {
-      id: 'depth',
-      header: 'Bid / Ask Qty',
-      size: 145,
-      cell: ({ row }) =>
-        recordCellRender('Depth', () => (
-          <DepthCell
-            bidSize={row.original.bidSize}
-            askSize={row.original.askSize}
-          />
-        )),
-    },
-    {
-      id: 'age',
-      header: 'Quote Age',
-      size: 85,
-      cell: ({ row }) =>
-        recordCellRender('QuoteAge', () => (
-          <QuoteAgeCell
-            ageMs={
-              props.updateQuoteAges
-                ? Math.max(0, props.quoteClock - row.original.lastUpdatedAt)
-                : 0
-            }
-          />
-        )),
-    },
-    {
-      id: 'change',
-      header: 'Day %',
-      size: 90,
-      cell: ({ row }) =>
-        recordCellRender('DayChange', () => {
-          const change = (row.original.price / row.original.open - 1) * 100
-          return `${change >= 0 ? '+' : ''}${change.toFixed(2)}%`
-        }),
-    },
-    {
-      id: 'volume',
-      header: 'Total Qty',
-      size: 100,
-      cell: ({ row }) =>
-        recordCellRender('TotalQty', () =>
-          compactFormatter.format(row.original.volume),
-        ),
-    },
-    {
-      id: 'turnover',
-      header: 'Traded Value',
-      size: 115,
-      cell: ({ row }) =>
-        recordCellRender('TradedValue', () =>
-          currencyFormatter.format(row.original.turnover),
-        ),
-    },
-    {
-      id: 'history',
-      header: 'Intraday',
-      size: 150,
-      cell: ({ row }) =>
-        recordCellRender('Intraday', () => (
-          <SparklineCell values={row.original.history} />
-        )),
-    },
-  ]
-}
-
-export function LocalTradingTable(props: TradingTableProps) {
-  const columns = createTradingColumns(props)
-  const table = createTable({
-    key: 'solid-realtime-trading-local',
-    features: stockFeatures,
-    columns,
-    get data() {
-      return props.quotes
-    },
-    getRowId: (row) => row.id,
-  })
-
-  return (
-    <div class="table-scroll" data-table-adapter="local">
-      <table style={{ width: `${table.getTotalSize()}px` }}>
-        <thead>
-          <For each={table.getHeaderGroups()}>
-            {(headerGroup) => (
-              <tr>
-                <For each={headerGroup.headers}>
-                  {(header) => (
-                    <th style={{ width: `${header.getSize()}px` }}>
-                      <Show when={!header.isPlaceholder}>
-                        <FlexRender header={header} />
-                      </Show>
-                    </th>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </thead>
-        <tbody>
-          <For each={table.getRowModel().rows}>
-            {(row) => (
-              <tr
-                classList={{
-                  'is-selected': props.selectedSymbol === row.original.symbol,
-                }}
-                data-symbol={row.original.symbol}
-                data-row-id={row.original.id}
-                title={row.original.company}
-              >
-                <For each={row.getVisibleCells()}>
-                  {(cell) => (
-                    <td
-                      style={{ width: `${cell.column.getSize()}px` }}
-                      classList={{
-                        'numeric-cell':
-                          cell.column.id !== 'symbol' &&
-                          cell.column.id !== 'venue',
-                      }}
-                    >
-                      <FlexRender cell={cell} />
-                    </td>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-export function V8TradingTable(props: TradingTableProps) {
-  const columns = createTradingColumns(props)
-  const table = createSolidTable({
-    columns,
-    get data() {
-      return props.quotes
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
-  })
-
-  return (
-    <div class="table-scroll" data-table-adapter="v8">
-      <table style={{ width: `${table.getTotalSize()}px` }}>
-        <thead>
-          <For each={table.getHeaderGroups()}>
-            {(headerGroup) => (
-              <tr>
-                <For each={headerGroup.headers}>
-                  {(header) => (
-                    <th style={{ width: `${header.getSize()}px` }}>
-                      <Show when={!header.isPlaceholder}>
-                        {flexRenderV8(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                      </Show>
-                    </th>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </thead>
-        <tbody>
-          <For each={table.getRowModel().rows}>
-            {(row) => (
-              <tr
-                classList={{
-                  'is-selected': props.selectedSymbol === row.original.symbol,
-                }}
-                data-symbol={row.original.symbol}
-                data-row-id={row.original.id}
-                title={row.original.company}
-              >
-                <For each={row.getVisibleCells()}>
-                  {(cell) => (
-                    <td
-                      style={{ width: `${cell.column.getSize()}px` }}
-                      classList={{
-                        'numeric-cell':
-                          cell.column.id !== 'symbol' &&
-                          cell.column.id !== 'venue',
-                      }}
-                    >
-                      {flexRenderV8(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </td>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-export const TRADING_COLUMN_COUNT = 14
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
index 07452e8a0e..728cc07436 100644
--- a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -14,9 +14,7 @@ function collectPageErrors(page: Page) {
   return errors
 }
 
-test('runs the same Solid workload across both table adapters', async ({
-  page,
-}) => {
+test('runs the Solid realtime trading workload', async ({ page }) => {
   const server = await startExampleServer(exampleDir)
   const errors = collectPageErrors(page)
 
@@ -26,12 +24,16 @@ test('runs the same Solid workload across both table adapters', async ({
     const table = page.getByRole('table')
     await expect(table).toBeVisible()
     await expect(table.locator('tbody tr')).toHaveCount(250)
-    await expect(table.locator('thead th')).toHaveCount(14)
-    await expect(table.locator('thead')).toContainText('Ticker')
-    await expect(table.locator('thead')).toContainText('Last Qty')
-    await expect(table.locator('thead')).toContainText('Traded Value')
-    const adapter = page.getByTestId('adapter-select')
-    await expect(adapter).toHaveValue('local')
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
     await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
     const instrumentCount = page.getByTestId('instrument-count-select')
     await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
@@ -44,21 +46,21 @@ test('runs the same Solid workload across both table adapters', async ({
     await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
     await loadProfile.selectOption('high')
 
-    const rowWorkload = page.getByTestId('row-workload-select')
-    await rowWorkload.selectOption('rotating-filter')
-    await expect(table.locator('tbody tr')).toHaveCount(200)
-    await rowWorkload.selectOption('identity-churn')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
-    await expect(
-      table.locator('tbody tr[data-row-id*="-replacement-"]'),
-    ).toHaveCount(25)
-    await rowWorkload.selectOption('price-sort')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
-    await rowWorkload.selectOption('stable')
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('250')
+    await sparklineInterval.selectOption('500')
+    await expect(sparklineInterval).toHaveValue('500')
+    await sparklineInterval.selectOption('250')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
 
     await expect
       .poll(async () => {
-        const text = await page.getByTestId('total-events').textContent()
+        const text = await page.getByTestId('row-update-rate').textContent()
         return Number(text?.replace(/\D/g, '') ?? 0)
       })
       .toBeGreaterThan(0)
@@ -70,7 +72,7 @@ test('runs the same Solid workload across both table adapters', async ({
       .toBeGreaterThan(0)
     await expect
       .poll(async () =>
-        Number(await page.getByTestId('raf-rate').textContent()),
+        Number(await page.getByTestId('message-rate').textContent()),
       )
       .toBeGreaterThan(0)
     await expect
@@ -79,18 +81,11 @@ test('runs the same Solid workload across both table adapters', async ({
       )
       .toBeGreaterThan(0)
 
-    for (const implementation of ['v8', 'local']) {
-      await adapter.selectOption(implementation)
-      await expect(adapter).toHaveValue(implementation)
-      await expect(page.getByRole('table')).toBeVisible()
-      await expect(page.locator('tbody tr')).toHaveCount(250)
-
-      const firstPrice = page.locator('tbody tr').first().getByRole('button')
-      const priceBeforeUpdate = await firstPrice.textContent()
-      await expect
-        .poll(() => firstPrice.textContent())
-        .not.toBe(priceBeforeUpdate)
-    }
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
 
     await page.locator('.config-section input[type="checkbox"]').first().check()
     await page.getByTestId('feed-toggle').click()
diff --git a/packages/angular-table/src/injectTable.ts b/packages/angular-table/src/injectTable.ts
index f7fdb68de7..cad299f51f 100644
--- a/packages/angular-table/src/injectTable.ts
+++ b/packages/angular-table/src/injectTable.ts
@@ -103,16 +103,17 @@ export function injectTable<
 
   const lazyTable = ngZone.runOutsideAngular(() =>
     lazyInit(() => {
-      // Explicit type arguments skip generic inference from the spread object
-      // (a type-check hot spot); the spread only adds the angular reactivity
-      // binding to `features`.
-      const table = constructTable<TFeatures, TData>({
-        ...options(),
-        features: {
-          coreReactivityFeature: angularReactivity(injector),
-          ...options().features,
-        },
+      const currentOptions = options()
+      const features = {
+        coreReactivityFeature,
+        ...currentOptions.features,
+      } satisfies TableFeatures
+      return constructTable<TFeatures, TData>({
+        ...currentOptions,
+        features,
       })
+    }),
+  )
 
   destroyRef.onDestroy(() => {
     if (lazyTable.initialized) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e36aa8925..cfff0ed0bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,12 +8,6 @@ overrides:
   '@tanstack/alpine-table': workspace:*
   '@tanstack/angular-table-devtools': workspace:*
   '@tanstack/angular-table': workspace:*
-  '@tanstack/angular-table@8.21.4>@tanstack/table-core': 8.21.3
-  '@tanstack/angular-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
-  '@tanstack/react-table@8.21.3>@tanstack/table-core': 8.21.3
-  '@tanstack/react-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
-  '@tanstack/solid-table@8.21.3>@tanstack/table-core': 8.21.3
-  '@tanstack/solid-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
   '@tanstack/ember-table': workspace:*
   '@tanstack/lit-table': workspace:*
   '@tanstack/match-sorter-utils': workspace:*
@@ -2288,12 +2282,9 @@ importers:
       '@tanstack/angular-table':
         specifier: workspace:*
         version: link:../../../packages/angular-table
-      '@tanstack/angular-table-beta':
-        specifier: https://registry.npmjs.org/@tanstack/angular-table/-/angular-table-9.0.0-beta.80.tgz
-        version: '@tanstack/angular-table@9.0.0-beta.80(@angular/common@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))'
-      '@tanstack/angular-table-v8':
-        specifier: https://registry.npmjs.org/@tanstack/angular-table/-/angular-table-8.21.4.tgz
-        version: '@tanstack/angular-table@8.21.4(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))'
+      '@tanstack/angular-virtual':
+        specifier: ^6.0.2
+        version: 6.0.2(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))
       rxjs:
         specifier: ~7.8.2
         version: 7.8.2
@@ -10285,9 +10276,6 @@ importers:
       '@tanstack/react-table':
         specifier: workspace:*
         version: link:../../../packages/react-table
-      '@tanstack/react-table-v8':
-        specifier: https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz
-        version: '@tanstack/react-table@8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)'
       react:
         specifier: ^19.2.8
         version: 19.2.8
@@ -10302,11 +10290,11 @@ importers:
         specifier: ^6.0.3
         version: 6.0.3(rollup@4.62.3)
       '@types/react':
-        specifier: 19.2.16
-        version: 19.2.16
+        specifier: ^19.2.18
+        version: 19.2.18
       '@types/react-dom':
         specifier: ^19.2.4
-        version: 19.2.4(@types/react@19.2.16)
+        version: 19.2.4(@types/react@19.2.18)
       '@vitejs/plugin-react':
         specifier: ^6.0.5
         version: 6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@8.0.1)(@babel/plugin-transform-runtime@8.0.1(@babel/core@8.0.1))(@babel/runtime@8.0.0)(rolldown@1.2.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
@@ -11708,9 +11696,6 @@ importers:
       '@tanstack/solid-table':
         specifier: workspace:*
         version: link:../../../packages/solid-table
-      '@tanstack/solid-table-v8':
-        specifier: https://registry.npmjs.org/@tanstack/solid-table/-/solid-table-8.21.3.tgz
-        version: '@tanstack/solid-table@8.21.3(solid-js@1.9.14)'
       solid-js:
         specifier: ^1.9.14
         version: 1.9.14
@@ -20890,18 +20875,6 @@ packages:
       '@angular/common': '>=19.0.0'
       '@angular/core': '>=19.0.0'
 
-  '@tanstack/angular-table@8.21.4':
-    resolution: {integrity: sha512-djyuJFvIB/pBuBIqny8b7+5ozeXJSElaxYRZyyKLpYrXn4xQSysBT//X51eDT/mi3kS0spcjIHhoObjk3iCjcQ==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      '@angular/core': '>=17'
-
-  '@tanstack/angular-table@9.0.0-beta.80':
-    resolution: {integrity: sha512-ILLMlF4tiXU7bvdX+pkmVZFIl1nbZmGrm3KgUxIrNAH71W/QnwMo4hYHzh3ZDDBH/ZmOH5pfUEPPKkb5GWtTNw==}
-    engines: {node: '>=20'}
-    peerDependencies:
-      '@angular/core': '>=19'
-
   '@tanstack/angular-virtual@6.0.2':
     resolution: {integrity: sha512-y/u2ZKAN5ob+ljwUoSK+r2j2piXw/ol63ykFbzZ8Hahj0dRU9xCJ0cJIDxTQ9zRoGbk0ZIiy3BK5w8Mso1daKA==}
     peerDependencies:
@@ -21303,13 +21276,6 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@tanstack/react-table@8.21.3':
-    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      react: '>=16.8'
-      react-dom: '>=16.8'
-
   '@tanstack/react-virtual@3.14.9':
     resolution: {integrity: sha512-qZyr0FZDP8rDC4WBhsryIZmAd9bveJvFGUJJtskWaew6/0dTRS6wZxnR6VQ5bY2KwL3LjerrHqQLk3a0GKcPXQ==}
     peerDependencies:
@@ -21464,12 +21430,6 @@ packages:
     peerDependencies:
       solid-js: ^1.6.0
 
-  '@tanstack/solid-table@8.21.3':
-    resolution: {integrity: sha512-PmhfSLBxVKiFs01LtYOYrCRhCyTUjxmb4KlxRQiqcALtip8+DOJeeezQM4RSX/GUS0SMVHyH/dNboCpcO++k2A==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      solid-js: '>=1.3'
-
   '@tanstack/solid-virtual@3.13.36':
     resolution: {integrity: sha512-9x4Eg3M+t7cY0/lswB6JnK1C/3YcsdBttUYQgSre+5zcwVJMZnp0Gy3mT++jeSN1bi7M5pxUPnAVoD1YE9DuLQ==}
     peerDependencies:
@@ -21546,14 +21506,6 @@ packages:
     peerDependencies:
       svelte: ^3.48.0 || ^4.0.0 || ^5.0.0
 
-  '@tanstack/table-core@8.21.3':
-    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
-    engines: {node: '>=12'}
-
-  '@tanstack/table-core@9.0.0-beta.80':
-    resolution: {integrity: sha512-tD98Q6/qzjvbEomMtDqxrAQUAf9nsBD7RihY1073E0eaeYwP3GyW5Gdlb+PztSk9F0CsYArXeOqcrt1hV29O8w==}
-    engines: {node: '>=20'}
-
   '@tanstack/typedoc-config@0.3.3':
     resolution: {integrity: sha512-wVT2YfKDSpd+4f7fk6UaPIP3a2J7LSovlyVuFF1PH2yQb7gjqehod5zdFiwFyEXgvI9XGuFvvs1OehkKNYcr6A==}
     engines: {node: '>=18'}
@@ -35028,21 +34980,6 @@ snapshots:
       '@tanstack/store': 0.9.3
       tslib: 2.8.1
 
-  '@tanstack/angular-table@8.21.4(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))':
-    dependencies:
-      '@angular/core': 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
-      '@tanstack/table-core': 8.21.3
-      tslib: 2.8.1
-
-  '@tanstack/angular-table@9.0.0-beta.80(@angular/common@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))':
-    dependencies:
-      '@angular/core': 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
-      '@tanstack/angular-store': 0.11.0(@angular/common@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))
-      '@tanstack/table-core': 9.0.0-beta.80
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - '@angular/common'
-
   '@tanstack/angular-virtual@6.0.2(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))':
     dependencies:
       '@angular/core': 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
@@ -35509,12 +35446,6 @@ snapshots:
       react-dom: 19.2.8(react@19.2.8)
       use-sync-external-store: 1.6.0(react@19.2.8)
 
-  '@tanstack/react-table@8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@tanstack/table-core': 8.21.3
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-
   '@tanstack/react-virtual@3.14.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@tanstack/virtual-core': 3.17.7
@@ -35725,11 +35656,6 @@ snapshots:
       '@tanstack/store': 0.11.0
       solid-js: 1.9.14
 
-  '@tanstack/solid-table@8.21.3(solid-js@1.9.14)':
-    dependencies:
-      '@tanstack/table-core': 8.21.3
-      solid-js: 1.9.14
-
   '@tanstack/solid-virtual@3.13.36(solid-js@1.9.14)':
     dependencies:
       '@tanstack/virtual-core': 3.17.7
@@ -35838,12 +35764,6 @@ snapshots:
       '@tanstack/virtual-core': 3.17.7
       svelte: 5.56.8(@typescript-eslint/types@8.65.0)
 
-  '@tanstack/table-core@8.21.3': {}
-
-  '@tanstack/table-core@9.0.0-beta.80':
-    dependencies:
-      '@tanstack/store': 0.11.0
-
   '@tanstack/typedoc-config@0.3.3(typescript@6.0.3)':
     dependencies:
       typedoc: 0.28.14(typescript@6.0.3)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e0d843f63e..e3b0a1bc61 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -6,12 +6,6 @@ overrides:
   '@tanstack/alpine-table': 'workspace:*'
   '@tanstack/angular-table-devtools': 'workspace:*'
   '@tanstack/angular-table': 'workspace:*'
-  '@tanstack/angular-table@8.21.4>@tanstack/table-core': 8.21.3
-  '@tanstack/angular-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
-  '@tanstack/react-table@8.21.3>@tanstack/table-core': 8.21.3
-  '@tanstack/react-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
-  '@tanstack/solid-table@8.21.3>@tanstack/table-core': 8.21.3
-  '@tanstack/solid-table@9.0.0-beta.80>@tanstack/table-core': 9.0.0-beta.80
   '@tanstack/ember-table': 'workspace:*'
   '@tanstack/lit-table': 'workspace:*'
   '@tanstack/match-sorter-utils': 'workspace:*'

From 6129099507ffc691e4ac5d490fb7d41c369a292a Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sat, 15 Aug 2026 19:12:42 +0200
Subject: [PATCH 06/23] still some improvements

---
 .../src/app/table/current-trading-table.ts    |   4 -
 .../src/app/table/table-v9.html               |  16 +--
 .../table/view/trading-grid-cell.directive.ts | 101 ++++-----------
 .../view/trading-grid-selection.directive.ts  | 116 ++++++++++++------
 .../app/table/worker/worker-trading-table.ts  |   4 -
 .../angular/realtime-trading/src/styles.css   |  35 +++---
 examples/react/realtime-trading/src/index.css |  35 +++---
 .../table-config/trading-table-config.tsx     |   7 +-
 .../src/table/trading-table.tsx               |  70 ++++-------
 examples/solid/realtime-trading/src/index.css |  35 +++---
 .../src/table/trading-table.tsx               |  38 +++---
 11 files changed, 210 insertions(+), 251 deletions(-)

diff --git a/examples/angular/realtime-trading/src/app/table/current-trading-table.ts b/examples/angular/realtime-trading/src/app/table/current-trading-table.ts
index 568a1e249b..7b8e6b7597 100644
--- a/examples/angular/realtime-trading/src/app/table/current-trading-table.ts
+++ b/examples/angular/realtime-trading/src/app/table/current-trading-table.ts
@@ -103,8 +103,4 @@ export class CurrentTradingTable {
   constructor() {
     injectTradingTableInitialFit(this.table, this.tanStackScrollContainer)
   }
-
-  selectInstrument(symbol: string, event: MouseEvent): void {
-    if (event.button === 0) this.symbolSelected.emit(symbol)
-  }
 }
diff --git a/examples/angular/realtime-trading/src/app/table/table-v9.html b/examples/angular/realtime-trading/src/app/table/table-v9.html
index caabda2128..ebd35691ee 100644
--- a/examples/angular/realtime-trading/src/app/table/table-v9.html
+++ b/examples/angular/realtime-trading/src/app/table/table-v9.html
@@ -10,6 +10,8 @@
     >
       <table
         [appTradingGridSelection]="table"
+        [interactions]="interactions"
+        (symbolSelected)="symbolSelected.emit($event)"
         class="trading-data-grid virtual-table"
         data-testid="trading-table"
         role="grid"
@@ -34,15 +36,14 @@
             @if (rows()[virtualRow.index]; as row) {
               <tr
                 class="virtual-table-row"
-                [class.is-symbol-selected]="selectedSymbol() === row.original.symbol"
-                [class.is-row-selected]="row.getIsSelected()"
                 [style.transform]="'translateY(' + virtualRow.start + 'px)'"
                 [attr.data-virtual-index]="virtualRow.index"
                 [attr.data-symbol]="row.original.symbol"
                 [attr.data-row-id]="row.original.id"
+                [attr.data-symbol-selected]="
+                  selectedSymbol() === row.original.symbol ? 'true' : null
+                "
                 [attr.aria-selected]="row.getIsSelected()"
-                (mousedown)="selectInstrument(row.original.symbol, $event)"
-                (click)="interactions.selectRow(table, row, $event)"
               >
                 @for (cell of row.getVisibleCells(); track cell.id) {
                   <td [appTradingGridCell]="cell">
@@ -69,6 +70,8 @@
     >
       <table
         [appTradingGridSelection]="table"
+        [interactions]="interactions"
+        (symbolSelected)="symbolSelected.emit($event)"
         class="trading-data-grid"
         data-testid="trading-table"
         role="grid"
@@ -91,14 +94,11 @@
         <tbody>
           @for (row of rows(); track row.id) {
             <tr
-              [class.is-symbol-selected]="selectedSymbol() === row.original.symbol"
-              [class.is-row-selected]="row.getIsSelected()"
               [attr.data-symbol]="row.original.symbol"
               [attr.data-row-id]="row.original.id"
+              [attr.data-symbol-selected]="selectedSymbol() === row.original.symbol ? 'true' : null"
               [attr.title]="row.original.company"
               [attr.aria-selected]="row.getIsSelected()"
-              (mousedown)="selectInstrument(row.original.symbol, $event)"
-              (click)="interactions.selectRow(table, row, $event)"
             >
               @for (cell of row.getVisibleCells(); track cell.id) {
                 <td [appTradingGridCell]="cell">
diff --git a/examples/angular/realtime-trading/src/app/table/view/trading-grid-cell.directive.ts b/examples/angular/realtime-trading/src/app/table/view/trading-grid-cell.directive.ts
index c97159cb7e..150b65c5d2 100644
--- a/examples/angular/realtime-trading/src/app/table/view/trading-grid-cell.directive.ts
+++ b/examples/angular/realtime-trading/src/app/table/view/trading-grid-cell.directive.ts
@@ -1,95 +1,42 @@
-import { DestroyRef, Directive, ElementRef, Input, inject } from '@angular/core'
+import { Directive, computed, inject, input } from '@angular/core'
 import { TradingGridSelectionDirective } from './trading-grid-selection.directive'
 import type { Cell, TableFeatures } from '@tanstack/angular-table'
 import type { MarketQuote } from '../../feed/market-data'
 
 type TradingCell = Cell<TableFeatures, MarketQuote, unknown>
 
-const selectionClasses = [
-  'is-cell-selected',
-  'is-cell-focused',
-  'selection-top',
-  'selection-right',
-  'selection-bottom',
-  'selection-left',
-] as const
-
 @Directive({
   selector: 'td[appTradingGridCell]',
   host: {
-    '(mousedown)': 'startSelection($event)',
-    '(mouseenter)': 'extendSelection($event)',
+    '[style.width]': 'staticHostState().width',
+    '[attr.data-column-id]': 'staticHostState().columnId',
+    '[attr.data-cell-focused]': "selectionHostState().focused ? 'true' : null",
+    '[attr.data-selection-top]': "selectionHostState().top ? 'true' : null",
+    '[attr.data-selection-right]': "selectionHostState().right ? 'true' : null",
+    '[attr.data-selection-bottom]':
+      "selectionHostState().bottom ? 'true' : null",
+    '[attr.data-selection-left]': "selectionHostState().left ? 'true' : null",
+    '[attr.tabindex]': 'selectionHostState().tabIndex',
+    '[attr.aria-selected]': 'selectionHostState().selected',
   },
 })
 export class TradingGridCellDirective {
-  readonly #element = inject<ElementRef<HTMLTableCellElement>>(ElementRef)
-  readonly #destroyRef = inject(DestroyRef)
   readonly #selection = inject(TradingGridSelectionDirective)
-  #cell: TradingCell | null = null
-  #renderedCellId: string | null = null
-
-  constructor() {
-    const unregister = this.#selection.register(this)
-    this.#destroyRef.onDestroy(unregister)
-  }
-
-  @Input({ required: true, alias: 'appTradingGridCell' })
-  set appTradingGridCell(cell: TradingCell) {
-    this.#cell = cell
-    if (this.#renderedCellId === cell.id) return
-
-    this.#renderedCellId = cell.id
-    this.#writeStaticState(cell)
-    this.#writeSelectionState(cell)
-  }
 
-  startSelection(event: MouseEvent): void {
-    if (event.button !== 0 || !this.#cell) return
-    event.preventDefault()
-    this.#cell.getSelectionStartHandler(
-      this.#element.nativeElement.ownerDocument,
-    )(event)
-    this.#selection.refreshSelectionState()
-  }
+  readonly cell = input.required<TradingCell>({
+    alias: 'appTradingGridCell',
+  })
 
-  extendSelection(event: MouseEvent): void {
-    if (!this.#cell) return
-    this.#cell.getSelectionExtendHandler()(event)
-    this.#selection.refreshSelectionState()
-  }
+  readonly staticHostState = computed(() => {
+    const columnId = this.cell().column.id
 
-  refreshSelectionState(): void {
-    if (this.#cell) this.#writeSelectionState(this.#cell)
-  }
-
-  #writeStaticState(cell: TradingCell): void {
-    const columnId = cell.column.id
-    const element = this.#element.nativeElement
-    element.style.width = `calc(var(--col-${columnId}-size) * 1px)`
-    element.classList.toggle('market-cell', columnId === 'market')
-    element.classList.toggle('name-cell', columnId === 'name')
-    element.classList.toggle('symbol-cell', columnId === 'symbol')
-    element.classList.toggle(
-      'numeric-cell',
-      columnId !== 'market' && columnId !== 'name' && columnId !== 'symbol',
-    )
-  }
-
-  #writeSelectionState(cell: TradingCell): void {
-    const element = this.#element.nativeElement
-    const edges = cell.getSelectionEdges()
-    const states: Record<(typeof selectionClasses)[number], boolean> = {
-      'is-cell-selected': cell.getIsSelected(),
-      'is-cell-focused': cell.getIsFocused(),
-      'selection-top': edges.top,
-      'selection-right': edges.right,
-      'selection-bottom': edges.bottom,
-      'selection-left': edges.left,
+    return {
+      width: `calc(var(--col-${columnId}-size) * 1px)`,
+      columnId,
     }
-    for (const className of selectionClasses) {
-      element.classList.toggle(className, states[className])
-    }
-    element.tabIndex = cell.getTabIndex()
-    element.setAttribute('aria-selected', String(states['is-cell-selected']))
-  }
+  })
+
+  readonly selectionHostState = computed(() => {
+    return this.#selection.readCellSelectionState(this.cell())
+  })
 }
diff --git a/examples/angular/realtime-trading/src/app/table/view/trading-grid-selection.directive.ts b/examples/angular/realtime-trading/src/app/table/view/trading-grid-selection.directive.ts
index 26e6dabf40..f58c6f6b4c 100644
--- a/examples/angular/realtime-trading/src/app/table/view/trading-grid-selection.directive.ts
+++ b/examples/angular/realtime-trading/src/app/table/view/trading-grid-selection.directive.ts
@@ -1,52 +1,98 @@
-import { DestroyRef, Directive, Input, inject } from '@angular/core'
-import type { Table, TableFeatures } from '@tanstack/angular-table'
+import { Directive, input, output } from '@angular/core'
+import type { Cell, Table, TableFeatures } from '@tanstack/angular-table'
 import type { MarketQuote } from '../../feed/market-data'
+import type { TradingTableInteractionController } from '../table-interactions'
 
-interface SelectionCellView {
-  refreshSelectionState: () => void
-}
-
+type TradingCell = Cell<TableFeatures, MarketQuote, unknown>
 type TradingTable = Table<TableFeatures, MarketQuote>
 
+interface SelectionCellTarget {
+  readonly element: HTMLTableCellElement
+  readonly cell: TradingCell
+}
+
 @Directive({
   selector: 'table[appTradingGridSelection]',
+  host: {
+    '(mousedown)': 'handleMouseDown($event)',
+    '(mousemove)': 'handleMouseMove($event)',
+    '(mouseleave)': 'resetPointerCell()',
+    '(click)': 'handleClick($event)',
+  },
 })
 export class TradingGridSelectionDirective {
-  readonly #destroyRef = inject(DestroyRef)
-  readonly #cellViews = new Set<SelectionCellView>()
-  #table: TradingTable | null = null
-  #lastRenderedSelection: unknown = null
-  #stopSelectionSubscription: (() => void) | null = null
-
-  constructor() {
-    this.#destroyRef.onDestroy(() => {
-      this.#stopSelectionSubscription?.()
-      this.#cellViews.clear()
-    })
+  readonly table = input.required<TradingTable>({
+    alias: 'appTradingGridSelection',
+  })
+  readonly interactions = input.required<TradingTableInteractionController>()
+  readonly symbolSelected = output<string>()
+
+  #lastPointerCell: HTMLTableCellElement | null = null
+
+  readCellSelectionState(cell: TradingCell) {
+    this.table().atoms.cellSelection.get()
+    const edges = cell.getSelectionEdges()
+
+    return {
+      selected: cell.getIsSelected(),
+      focused: cell.getIsFocused(),
+      top: edges.top,
+      right: edges.right,
+      bottom: edges.bottom,
+      left: edges.left,
+      tabIndex: cell.getTabIndex(),
+    }
+  }
+
+  handleMouseDown(event: MouseEvent): void {
+    if (event.button !== 0) return
+
+    const target = this.#findCellTarget(event.composedPath())
+    if (!target) return
+
+    event.preventDefault()
+    this.#lastPointerCell = target.element
+    this.symbolSelected.emit(target.cell.row.original.symbol)
+    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+  }
+
+  handleMouseMove(event: MouseEvent): void {
+    if ((event.buttons & 1) === 0) {
+      this.#lastPointerCell = null
+      return
+    }
+
+    const target = this.#findCellTarget(event.composedPath())
+    if (!target || target.element === this.#lastPointerCell) return
+
+    this.#lastPointerCell = target.element
+    target.cell.getSelectionExtendHandler()(event)
   }
 
-  @Input({ required: true, alias: 'appTradingGridSelection' })
-  set appTradingGridSelection(table: TradingTable) {
-    if (this.#stopSelectionSubscription) return
-
-    this.#table = table
-    const subscription = table.atoms.cellSelection.subscribe((selection) => {
-      if (selection === this.#lastRenderedSelection) return
-      this.#lastRenderedSelection = selection
-      this.refreshSelectionState()
-    })
-    this.#stopSelectionSubscription = () => subscription.unsubscribe()
+  resetPointerCell(): void {
+    this.#lastPointerCell = null
   }
 
-  register(cellView: SelectionCellView): () => void {
-    this.#cellViews.add(cellView)
-    return () => this.#cellViews.delete(cellView)
+  handleClick(event: MouseEvent): void {
+    const target = this.#findCellTarget(event.composedPath())
+    if (!target) return
+    this.interactions().selectRow(this.table(), target.cell.row, event)
   }
 
-  refreshSelectionState(): void {
-    this.#lastRenderedSelection = this.#table?.atoms.cellSelection.get()
-    for (const cellView of this.#cellViews) {
-      cellView.refreshSelectionState()
+  #findCellTarget(path: Array<EventTarget>): SelectionCellTarget | null {
+    for (const target of path) {
+      if (!(target instanceof HTMLTableCellElement)) continue
+
+      const columnId = target.dataset['columnId']
+      const rowId =
+        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+      if (!columnId || !rowId) return null
+
+      const row = this.table().getRowModel().rowsById[rowId]
+      const cell = row.getAllCellsByColumnId()[columnId]
+      return { element: target, cell }
     }
+
+    return null
   }
 }
diff --git a/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts b/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
index 0dade7bb51..abcdc6cfa6 100644
--- a/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
+++ b/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
@@ -130,8 +130,4 @@ export class WorkerTradingTable {
     injectTradingTableInitialFit(this.table, this.tanStackScrollContainer)
     this.#destroyRef.onDestroy(() => this.#workerRuntime.worker.terminate())
   }
-
-  selectInstrument(symbol: string, event: MouseEvent): void {
-    if (event.button === 0) this.symbolSelected.emit(symbol)
-  }
 }
diff --git a/examples/angular/realtime-trading/src/styles.css b/examples/angular/realtime-trading/src/styles.css
index 6014dd0e21..f2abf66c45 100644
--- a/examples/angular/realtime-trading/src/styles.css
+++ b/examples/angular/realtime-trading/src/styles.css
@@ -437,6 +437,7 @@ td {
   color: #eef1f5;
   border-right: 1px solid var(--border-soft);
   border-bottom: 1px solid var(--border-soft);
+  text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -446,20 +447,22 @@ td:last-child {
   border-right: 0;
 }
 
-.numeric-cell {
-  text-align: right;
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
 }
 
-.market-cell {
+td[data-column-id='market'] {
   color: var(--blue);
   font-weight: 550;
 }
 
-.name-cell {
+td[data-column-id='name'] {
   color: var(--text-strong);
 }
 
-.symbol-cell {
+td[data-column-id='symbol'] {
   color: #d8dde4;
   font-weight: 600;
 }
@@ -476,7 +479,7 @@ tbody tr:hover {
   background: var(--panel-hover);
 }
 
-tbody tr.is-symbol-selected {
+tbody tr[data-symbol-selected='true'] {
   background: var(--row-selected);
   box-shadow: inset 2px 0 0 var(--blue);
 }
@@ -630,24 +633,20 @@ th:hover > .column-resize-handle::after,
   opacity: 1;
 }
 
-tbody tr.is-row-selected {
+tbody tr[aria-selected='true'] {
   background: rgb(76 145 228 / 13%);
 }
 
-tbody tr.is-symbol-selected {
-  box-shadow: inset 2px 0 0 var(--blue);
-}
-
-td.is-cell-selected {
+td[aria-selected='true'] {
   position: relative;
   background: rgb(70 139 222 / 12%);
 }
 
-td.is-cell-focused {
+td[data-cell-focused='true'] {
   background: rgb(70 139 222 / 21%);
 }
 
-td.is-cell-selected::after {
+td[aria-selected='true']::after {
   position: absolute;
   z-index: 1;
   inset: 0;
@@ -656,19 +655,19 @@ td.is-cell-selected::after {
   pointer-events: none;
 }
 
-td.selection-top::after {
+td[data-selection-top='true']::after {
   border-top-color: var(--blue);
 }
 
-td.selection-right::after {
+td[data-selection-right='true']::after {
   border-right-color: var(--blue);
 }
 
-td.selection-bottom::after {
+td[data-selection-bottom='true']::after {
   border-bottom-color: var(--blue);
 }
 
-td.selection-left::after {
+td[data-selection-left='true']::after {
   border-left-color: var(--blue);
 }
 
diff --git a/examples/react/realtime-trading/src/index.css b/examples/react/realtime-trading/src/index.css
index a70af09185..a225d8b893 100644
--- a/examples/react/realtime-trading/src/index.css
+++ b/examples/react/realtime-trading/src/index.css
@@ -388,6 +388,7 @@ td {
   color: #eef1f5;
   border-right: 1px solid var(--border-soft);
   border-bottom: 1px solid var(--border-soft);
+  text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -397,20 +398,22 @@ td:last-child {
   border-right: 0;
 }
 
-.numeric-cell {
-  text-align: right;
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
 }
 
-.market-cell {
+td[data-column-id='market'] {
   color: var(--blue);
   font-weight: 550;
 }
 
-.name-cell {
+td[data-column-id='name'] {
   color: var(--text-strong);
 }
 
-.symbol-cell {
+td[data-column-id='symbol'] {
   color: #d8dde4;
   font-weight: 600;
 }
@@ -423,7 +426,7 @@ tbody tr:hover {
   background: var(--panel-hover);
 }
 
-tbody tr.is-symbol-selected {
+tbody tr[data-symbol-selected='true'] {
   background: var(--row-selected);
   box-shadow: inset 2px 0 0 var(--blue);
 }
@@ -577,24 +580,20 @@ th:hover > .column-resize-handle::after,
   opacity: 1;
 }
 
-tbody tr.is-row-selected {
+tbody tr[aria-selected='true'] {
   background: rgb(76 145 228 / 13%);
 }
 
-tbody tr.is-symbol-selected {
-  box-shadow: inset 2px 0 0 var(--blue);
-}
-
-td.is-cell-selected {
+td[aria-selected='true'] {
   position: relative;
   background: rgb(70 139 222 / 12%);
 }
 
-td.is-cell-focused {
+td[data-cell-focused='true'] {
   background: rgb(70 139 222 / 21%);
 }
 
-td.is-cell-selected::after {
+td[aria-selected='true']::after {
   position: absolute;
   z-index: 1;
   inset: 0;
@@ -603,19 +602,19 @@ td.is-cell-selected::after {
   pointer-events: none;
 }
 
-td.selection-top::after {
+td[data-selection-top='true']::after {
   border-top-color: var(--blue);
 }
 
-td.selection-right::after {
+td[data-selection-right='true']::after {
   border-right-color: var(--blue);
 }
 
-td.selection-bottom::after {
+td[data-selection-bottom='true']::after {
   border-bottom-color: var(--blue);
 }
 
-td.selection-left::after {
+td[data-selection-left='true']::after {
   border-left-color: var(--blue);
 }
 
diff --git a/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx b/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
index 81805efb98..05b0273bcc 100644
--- a/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
+++ b/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
@@ -322,14 +322,9 @@ export function TradingRow(props: {
   )
   return (
     <tr
-      className={[
-        selected ? 'is-symbol-selected' : '',
-        props.rowSelected ? 'is-row-selected' : '',
-      ]
-        .filter(Boolean)
-        .join(' ')}
       data-symbol={props.quote.symbol}
       data-row-id={props.quote.id}
+      data-symbol-selected={selected ? 'true' : undefined}
       title={props.quote.company}
       aria-selected={props.rowSelected}
       onMouseDown={props.onMouseDown}
diff --git a/examples/react/realtime-trading/src/table/trading-table.tsx b/examples/react/realtime-trading/src/table/trading-table.tsx
index fba3e310e1..06c93f7ff2 100644
--- a/examples/react/realtime-trading/src/table/trading-table.tsx
+++ b/examples/react/realtime-trading/src/table/trading-table.tsx
@@ -407,21 +407,30 @@ function TradingRows(props: {
               }}
               onClick={(event) => selectRowFromPointer(props.table, row, event)}
             >
-              {row.getVisibleCells().map((cell) => (
-                <td
-                  key={cell.id}
-                  style={{
-                    width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
-                  }}
-                  className={getCellClassName(cell)}
-                  aria-selected={cell.getIsSelected()}
-                  tabIndex={cell.getTabIndex()}
-                  onMouseDown={cell.getSelectionStartHandler()}
-                  onMouseEnter={cell.getSelectionExtendHandler()}
-                >
-                  <FlexRender cell={cell} />
-                </td>
-              ))}
+              {row.getVisibleCells().map((cell) => {
+                const edges = cell.getSelectionEdges()
+
+                return (
+                  <td
+                    key={cell.id}
+                    style={{
+                      width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                    }}
+                    data-column-id={cell.column.id}
+                    data-cell-focused={cell.getIsFocused() ? 'true' : undefined}
+                    data-selection-top={edges.top ? 'true' : undefined}
+                    data-selection-right={edges.right ? 'true' : undefined}
+                    data-selection-bottom={edges.bottom ? 'true' : undefined}
+                    data-selection-left={edges.left ? 'true' : undefined}
+                    aria-selected={cell.getIsSelected()}
+                    tabIndex={cell.getTabIndex()}
+                    onMouseDown={cell.getSelectionStartHandler()}
+                    onMouseEnter={cell.getSelectionExtendHandler()}
+                  >
+                    <FlexRender cell={cell} />
+                  </td>
+                )
+              })}
             </TradingRow>
           )}
         </props.table.Subscribe>
@@ -438,37 +447,6 @@ function getHeaderClassName(header: {
   return isIdentityColumn(header.column.id) ? undefined : 'numeric-header'
 }
 
-function getCellClassName(cell: {
-  column: { id: string }
-  getIsFocused: () => boolean
-  getIsSelected: () => boolean
-  getSelectionEdges: () => {
-    top: boolean
-    right: boolean
-    bottom: boolean
-    left: boolean
-  }
-}): string {
-  const columnId = cell.column.id
-  const edges = cell.getSelectionEdges()
-  const classes = [
-    columnId === 'market'
-      ? 'market-cell'
-      : columnId === 'name'
-        ? 'name-cell'
-        : columnId === 'symbol'
-          ? 'symbol-cell'
-          : 'numeric-cell',
-  ]
-  if (cell.getIsSelected()) classes.push('is-cell-selected')
-  if (cell.getIsFocused()) classes.push('is-cell-focused')
-  if (edges.top) classes.push('selection-top')
-  if (edges.right) classes.push('selection-right')
-  if (edges.bottom) classes.push('selection-bottom')
-  if (edges.left) classes.push('selection-left')
-  return classes.join(' ')
-}
-
 function isIdentityColumn(columnId: string): boolean {
   return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
 }
diff --git a/examples/solid/realtime-trading/src/index.css b/examples/solid/realtime-trading/src/index.css
index 6d6b5e5369..3eb484e9f4 100644
--- a/examples/solid/realtime-trading/src/index.css
+++ b/examples/solid/realtime-trading/src/index.css
@@ -378,6 +378,7 @@ td {
   color: #eef1f5;
   border-right: 1px solid var(--border-soft);
   border-bottom: 1px solid var(--border-soft);
+  text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -387,20 +388,22 @@ td:last-child {
   border-right: 0;
 }
 
-.numeric-cell {
-  text-align: right;
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
 }
 
-.market-cell {
+td[data-column-id='market'] {
   color: var(--blue);
   font-weight: 550;
 }
 
-.name-cell {
+td[data-column-id='name'] {
   color: var(--text-strong);
 }
 
-.symbol-cell {
+td[data-column-id='symbol'] {
   color: #d8dde4;
   font-weight: 600;
 }
@@ -413,7 +416,7 @@ tbody tr:hover {
   background: var(--panel-hover);
 }
 
-tbody tr.is-symbol-selected {
+tbody tr[data-symbol-selected='true'] {
   background: var(--row-selected);
   box-shadow: inset 2px 0 0 var(--blue);
 }
@@ -567,24 +570,20 @@ th:hover > .column-resize-handle::after,
   opacity: 1;
 }
 
-tbody tr.is-row-selected {
+tbody tr[aria-selected='true'] {
   background: rgb(76 145 228 / 13%);
 }
 
-tbody tr.is-symbol-selected {
-  box-shadow: inset 2px 0 0 var(--blue);
-}
-
-td.is-cell-selected {
+td[aria-selected='true'] {
   position: relative;
   background: rgb(70 139 222 / 12%);
 }
 
-td.is-cell-focused {
+td[data-cell-focused='true'] {
   background: rgb(70 139 222 / 21%);
 }
 
-td.is-cell-selected::after {
+td[aria-selected='true']::after {
   position: absolute;
   z-index: 1;
   inset: 0;
@@ -593,19 +592,19 @@ td.is-cell-selected::after {
   pointer-events: none;
 }
 
-td.selection-top::after {
+td[data-selection-top='true']::after {
   border-top-color: var(--blue);
 }
 
-td.selection-right::after {
+td[data-selection-right='true']::after {
   border-right-color: var(--blue);
 }
 
-td.selection-bottom::after {
+td[data-selection-bottom='true']::after {
   border-bottom-color: var(--blue);
 }
 
-td.selection-left::after {
+td[data-selection-left='true']::after {
   border-left-color: var(--blue);
 }
 
diff --git a/examples/solid/realtime-trading/src/table/trading-table.tsx b/examples/solid/realtime-trading/src/table/trading-table.tsx
index 958a2b7b2a..65ff30f8fe 100644
--- a/examples/solid/realtime-trading/src/table/trading-table.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table.tsx
@@ -247,13 +247,13 @@ export function TradingTable(props: TradingTableProps) {
           <For each={table.getRowModel().rows}>
             {(row) => (
               <tr
-                classList={{
-                  'is-symbol-selected':
-                    props.selectedSymbol === row.original.symbol,
-                  'is-row-selected': row.getIsSelected(),
-                }}
                 data-symbol={row.original.symbol}
                 data-row-id={row.original.id}
+                data-symbol-selected={
+                  props.selectedSymbol === row.original.symbol
+                    ? 'true'
+                    : undefined
+                }
                 title={row.original.company}
                 aria-selected={row.getIsSelected()}
                 onMouseDown={(event) => {
@@ -269,18 +269,22 @@ export function TradingTable(props: TradingTableProps) {
                       style={{
                         width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
                       }}
-                      classList={{
-                        'numeric-cell': !isIdentityColumn(cell.column.id),
-                        'market-cell': cell.column.id === 'market',
-                        'name-cell': cell.column.id === 'name',
-                        'symbol-cell': cell.column.id === 'symbol',
-                        'is-cell-selected': cell.getIsSelected(),
-                        'is-cell-focused': cell.getIsFocused(),
-                        'selection-top': cell.getSelectionEdges().top,
-                        'selection-right': cell.getSelectionEdges().right,
-                        'selection-bottom': cell.getSelectionEdges().bottom,
-                        'selection-left': cell.getSelectionEdges().left,
-                      }}
+                      data-column-id={cell.column.id}
+                      data-cell-focused={
+                        cell.getIsFocused() ? 'true' : undefined
+                      }
+                      data-selection-top={
+                        cell.getSelectionEdges().top ? 'true' : undefined
+                      }
+                      data-selection-right={
+                        cell.getSelectionEdges().right ? 'true' : undefined
+                      }
+                      data-selection-bottom={
+                        cell.getSelectionEdges().bottom ? 'true' : undefined
+                      }
+                      data-selection-left={
+                        cell.getSelectionEdges().left ? 'true' : undefined
+                      }
                       aria-selected={cell.getIsSelected()}
                       tabindex={cell.getTabIndex()}
                       onMouseDown={cell.getSelectionStartHandler()}

From 13d4498f43fa2d897b2cdbd3c1545e72acf0b7fa Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sat, 15 Aug 2026 19:34:37 +0200
Subject: [PATCH 07/23] align examples

---
 .../src/app/feed/sp500-instruments.ts         | 742 ++++++++++++++++++
 .../src/app/feed/worker/market-feed-engine.ts |   2 +-
 examples/react/realtime-trading/index.html    |   5 +-
 .../src/feed/sp500-instruments.ts             | 742 ++++++++++++++++++
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 examples/react/realtime-trading/src/index.css |   5 -
 .../src/table/trading-table.tsx               |   1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   2 +-
 examples/solid/realtime-trading/index.html    |   4 +-
 .../src/feed/sp500-instruments.ts             | 742 ++++++++++++++++++
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 examples/solid/realtime-trading/src/index.css |   5 -
 .../src/table/trading-table.tsx               |   1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   2 +-
 14 files changed, 2238 insertions(+), 19 deletions(-)
 create mode 100644 examples/angular/realtime-trading/src/app/feed/sp500-instruments.ts
 create mode 100644 examples/react/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/solid/realtime-trading/src/feed/sp500-instruments.ts

diff --git a/examples/angular/realtime-trading/src/app/feed/sp500-instruments.ts b/examples/angular/realtime-trading/src/app/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts b/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
index c562427bba..557f7c30a8 100644
--- a/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
+++ b/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../../../../../../realtime-trading-shared/sp500-instruments'
+import { globalInstruments } from '../sp500-instruments'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/react/realtime-trading/index.html b/examples/react/realtime-trading/index.html
index 812fb572fc..ee58bbd285 100644
--- a/examples/react/realtime-trading/index.html
+++ b/examples/react/realtime-trading/index.html
@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="React Table real-time trading render benchmark"
+      content="A synthetic real-time market benchmark for TanStack React Table flexRender."
     />
-    <title>React Table — Real-time Trading Benchmark</title>
+    <link rel="icon" href="data:," />
+    <title>React Real-time Trading flexRender Lab</title>
     <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
   </head>
   <body>
diff --git a/examples/react/realtime-trading/src/feed/sp500-instruments.ts b/examples/react/realtime-trading/src/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/react/realtime-trading/src/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
index c7ea457227..557f7c30a8 100644
--- a/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../../../../../realtime-trading-shared/sp500-instruments'
+import { globalInstruments } from '../sp500-instruments'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/react/realtime-trading/src/index.css b/examples/react/realtime-trading/src/index.css
index a225d8b893..d92540e03c 100644
--- a/examples/react/realtime-trading/src/index.css
+++ b/examples/react/realtime-trading/src/index.css
@@ -684,11 +684,6 @@ td[data-selection-left='true']::after {
   color: var(--amber);
 }
 
-app-depth-cell {
-  display: block;
-  width: 100%;
-}
-
 .depth-cell {
   position: relative;
   display: flex;
diff --git a/examples/react/realtime-trading/src/table/trading-table.tsx b/examples/react/realtime-trading/src/table/trading-table.tsx
index 06c93f7ff2..cd9ff6bc0c 100644
--- a/examples/react/realtime-trading/src/table/trading-table.tsx
+++ b/examples/react/realtime-trading/src/table/trading-table.tsx
@@ -81,6 +81,7 @@ export function TradingTable() {
       <table
         ref={layoutRefs.tableRef}
         className="trading-data-grid"
+        data-testid="trading-table"
         role="grid"
         aria-multiselectable="true"
       >
diff --git a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
index d9cfda32da..eb71bf2dc8 100644
--- a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,7 +30,7 @@ test('runs the React realtime trading workload', async ({ page }) => {
 
     await page.goto(server.url)
 
-    const table = page.getByRole('table')
+    const table = page.getByTestId('trading-table')
     await expect(table).toBeVisible()
     await expect(table.locator('tbody tr')).toHaveCount(250)
     await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
diff --git a/examples/solid/realtime-trading/index.html b/examples/solid/realtime-trading/index.html
index 9da17d489c..bddd49c0fd 100644
--- a/examples/solid/realtime-trading/index.html
+++ b/examples/solid/realtime-trading/index.html
@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="Solid Table real-time trading render benchmark"
+      content="A synthetic real-time market benchmark for TanStack Solid Table flexRender."
     />
     <link rel="icon" href="data:," />
-    <title>Solid Table — Real-time Trading Benchmark</title>
+    <title>Solid Real-time Trading flexRender Lab</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/examples/solid/realtime-trading/src/feed/sp500-instruments.ts b/examples/solid/realtime-trading/src/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/solid/realtime-trading/src/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
index c7ea457227..557f7c30a8 100644
--- a/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../../../../../realtime-trading-shared/sp500-instruments'
+import { globalInstruments } from '../sp500-instruments'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/solid/realtime-trading/src/index.css b/examples/solid/realtime-trading/src/index.css
index 3eb484e9f4..9ae9207e30 100644
--- a/examples/solid/realtime-trading/src/index.css
+++ b/examples/solid/realtime-trading/src/index.css
@@ -674,11 +674,6 @@ td[data-selection-left='true']::after {
   color: var(--amber);
 }
 
-app-depth-cell {
-  display: block;
-  width: 100%;
-}
-
 .depth-cell {
   position: relative;
   display: flex;
diff --git a/examples/solid/realtime-trading/src/table/trading-table.tsx b/examples/solid/realtime-trading/src/table/trading-table.tsx
index 65ff30f8fe..c706692668 100644
--- a/examples/solid/realtime-trading/src/table/trading-table.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table.tsx
@@ -110,6 +110,7 @@ export function TradingTable(props: TradingTableProps) {
     >
       <table
         class="trading-data-grid"
+        data-testid="trading-table"
         role="grid"
         aria-multiselectable="true"
         style={tableStyle()}
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
index 728cc07436..098e8b95ea 100644
--- a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -21,7 +21,7 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
   try {
     await page.goto(server.url)
 
-    const table = page.getByRole('table')
+    const table = page.getByTestId('trading-table')
     await expect(table).toBeVisible()
     await expect(table.locator('tbody tr')).toHaveCount(250)
     await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)

From 8c1d0b06be831ca8c0fc3fcea3d96a6dfd6d43d7 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sun, 16 Aug 2026 15:36:17 +0200
Subject: [PATCH 08/23] Add realtime-trading example for vue, svelte, octane,
 alpine, ember

Angular,React,Solid improvements
---
 examples/alpine/realtime-trading/.gitignore   |    3 +
 examples/alpine/realtime-trading/README.md    |   13 +
 examples/alpine/realtime-trading/index.html   |   37 +
 examples/alpine/realtime-trading/package.json |    6 +
 .../src/benchmark/benchmark-monitor.ts        |  368 ++++++
 .../benchmark/trading-benchmark-controller.ts |  152 +++
 .../src/feed/feed-sample-rates.ts             |   33 +
 .../realtime-trading/src/feed/market-data.ts  |   38 +
 .../src/feed/market-feed-config.ts            |   15 +
 .../src/feed/market-feed-controller.ts        |  240 ++++
 .../src/feed/sp500-instruments.ts             |  742 ++++++++++++
 .../src/feed/worker/market-feed-engine.ts     |  177 +++
 .../src/feed/worker/market-feed-protocol.ts   |   70 ++
 .../src/feed/worker/market-feed.worker.ts     |  143 +++
 .../alpine/realtime-trading/src/index.css     | 1048 +++++++++++++++++
 examples/alpine/realtime-trading/src/main.ts  |  122 ++
 .../src/shell/configurator-options.ts         |   55 +
 .../src/table/table-config/quote-cells.ts     |   57 +
 .../src/table/table-config/trading-columns.ts |   44 +
 .../src/table/table-interactions.ts           |  186 +++
 .../src/table/trading-row-virtualizer.ts      |   14 +
 .../src/table/trading-table.ts                |    3 +
 .../alpine/realtime-trading/src/vite-env.d.ts |    9 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  170 +++
 .../alpine/realtime-trading/tsconfig.json     |    4 +
 .../alpine/realtime-trading/vite.config.ts    |    2 +
 examples/angular/realtime-trading/README.md   |   10 +-
 .../benchmark/trading-benchmark.controller.ts |    2 +-
 .../src/app/feed/feed-load-profiles.ts        |   18 -
 .../src/app/feed/feed-sample-rates.ts         |   33 +
 .../src/app/feed/market-feed-config.ts        |   15 +
 .../src/app/feed/market-feed.service.ts       |   34 +-
 .../src/app/feed/worker/market-feed.worker.ts |    9 +-
 .../src/app/shell/configurator-options.ts     |   55 +
 .../src/app/shell/configurator.html           |  143 ++-
 .../src/app/shell/configurator.ts             |   18 +-
 .../src/app/shell/diagnostics.ts              |    2 +-
 .../src/app/shell/market-statusbar.ts         |    4 +-
 .../src/app/shell/shell-formatters.ts         |    3 +-
 .../src/app/shell/shell-header.ts             |   33 +-
 .../src/app/shell/trading-shell.html          |   10 +-
 .../src/app/shell/trading-shell.ts            |    7 +-
 .../app/table/table-config/trading-columns.ts |  275 +++--
 .../src/app/table/trading-row-virtualizer.ts  |    4 +-
 .../src/app/table/view/trading-header-cell.ts |    4 +-
 .../angular/realtime-trading/src/styles.css   |   49 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   94 +-
 examples/ember/realtime-trading/README.md     |   11 +
 examples/ember/realtime-trading/app/app.css   | 1048 +++++++++++++++++
 examples/ember/realtime-trading/app/app.ts    |   22 +
 .../app/benchmark/benchmark-monitor.ts        |  368 ++++++
 .../benchmark/trading-benchmark-controller.ts |  152 +++
 .../app/components/shell/app-header.gts       |   41 +
 .../components/shell/configurator-options.ts  |   55 +
 .../app/components/shell/configurator.gts     |  102 ++
 .../app/components/shell/diagnostics.gts      |   52 +
 .../app/components/shell/market-statusbar.gts |   26 +
 .../app/components/shell/metrics-strip.gts    |   40 +
 .../components/shell/selected-instrument.gts  |   34 +
 .../app/components/shell/trading-shell.gts    |   34 +
 .../app/components/table/trading-table.gts    |  294 +++++
 examples/ember/realtime-trading/app/config.ts |   17 +
 .../app/feed/feed-sample-rates.ts             |   33 +
 .../realtime-trading/app/feed/market-data.ts  |   38 +
 .../app/feed/market-feed-config.ts            |   15 +
 .../app/feed/market-feed-controller.ts        |  240 ++++
 .../app/feed/sp500-instruments.ts             |  742 ++++++++++++
 .../app/feed/worker/market-feed-engine.ts     |  177 +++
 .../app/feed/worker/market-feed-protocol.ts   |   70 ++
 .../app/feed/worker/market-feed.worker.ts     |  143 +++
 examples/ember/realtime-trading/app/router.ts |   51 +
 .../app/table/table-config/quote-cells.gts    |  142 +++
 .../table/table-config/trading-columns.gts    |   88 ++
 .../app/table/table-interactions.ts           |  188 +++
 .../app/table/trading-features.ts             |   16 +
 .../app/table/trading-row-virtualizer.ts      |   14 +
 .../app/table/trading-table.ts                |    9 +
 .../app/templates/application.gts             |   23 +
 .../app/utils/subscriptions.ts                |   20 +
 .../ember/realtime-trading/babel.config.js    |   49 +
 examples/ember/realtime-trading/index.html    |   17 +
 examples/ember/realtime-trading/package.json  |   59 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  170 +++
 examples/ember/realtime-trading/tsconfig.json |   13 +
 .../ember/realtime-trading/vite.config.mjs    |   10 +
 examples/lit/realtime-trading/.gitignore      |    3 +
 examples/lit/realtime-trading/README.md       |   15 +
 examples/lit/realtime-trading/index.html      |    1 +
 examples/lit/realtime-trading/package.json    |   15 +
 .../src/benchmark/benchmark-monitor.ts        |  368 ++++++
 .../src/benchmark/table-benchmark.ts          |   22 +
 .../benchmark/trading-benchmark-controller.ts |  152 +++
 .../src/feed/feed-sample-rates.ts             |   33 +
 .../realtime-trading/src/feed/market-data.ts  |   38 +
 .../src/feed/market-feed-config.ts            |   15 +
 .../src/feed/market-feed-controller.ts        |  240 ++++
 .../src/feed/sp500-instruments.ts             |  742 ++++++++++++
 .../src/feed/worker/market-feed-engine.ts     |  177 +++
 .../src/feed/worker/market-feed-protocol.ts   |   70 ++
 .../src/feed/worker/market-feed.worker.ts     |  143 +++
 examples/lit/realtime-trading/src/index.css   | 1048 +++++++++++++++++
 examples/lit/realtime-trading/src/main.ts     |   24 +
 .../realtime-trading/src/shell/AppHeader.ts   |   16 +
 .../src/shell/Configurator.ts                 |   46 +
 .../realtime-trading/src/shell/Diagnostics.ts |   36 +
 .../src/shell/MarketStatusbar.ts              |   12 +
 .../src/shell/MetricsStrip.ts                 |   27 +
 .../src/shell/SelectedInstrument.ts           |   16 +
 .../src/shell/TradingShell.ts                 |   25 +
 .../src/shell/configurator-options.ts         |   55 +
 .../src/shell/controller-element.ts           |   15 +
 .../src/table/TradingTable.ts                 |  109 ++
 .../src/table/table-config/quote-cells.ts     |   66 ++
 .../src/table/table-config/trading-columns.ts |   67 ++
 .../src/table/table-interactions.ts           |  186 +++
 .../src/table/trading-row-virtualizer.ts      |   14 +
 .../src/table/trading-table.ts                |    3 +
 .../lit/realtime-trading/src/vite-env.d.ts    |    1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  170 +++
 examples/lit/realtime-trading/tsconfig.json   |   12 +
 examples/lit/realtime-trading/vite.config.ts  |    2 +
 examples/octane/realtime-trading/README.md    |   13 +
 examples/octane/realtime-trading/index.html   |   12 +
 examples/octane/realtime-trading/package.json |   25 +
 .../src/benchmark/benchmark-monitor.ts        |  368 ++++++
 .../src/benchmark/table-benchmark.ts          |   19 +
 .../benchmark/trading-benchmark-controller.ts |  152 +++
 .../src/feed/feed-sample-rates.ts             |   33 +
 .../realtime-trading/src/feed/market-data.ts  |   38 +
 .../src/feed/market-feed-config.ts            |   15 +
 .../src/feed/market-feed-controller.ts        |  240 ++++
 .../src/feed/sp500-instruments.ts             |  742 ++++++++++++
 .../src/feed/worker/market-feed-engine.ts     |  177 +++
 .../src/feed/worker/market-feed-protocol.ts   |   70 ++
 .../src/feed/worker/market-feed.worker.ts     |  143 +++
 .../octane/realtime-trading/src/index.css     | 1048 +++++++++++++++++
 .../octane/realtime-trading/src/main.tsrx     |   12 +
 .../realtime-trading/src/shell/AppHeader.tsrx |   38 +
 .../src/shell/Configurator.tsrx               |  134 +++
 .../src/shell/Diagnostics.tsrx                |   42 +
 .../src/shell/MarketStatusbar.tsrx            |   24 +
 .../src/shell/MetricsStrip.tsrx               |   25 +
 .../src/shell/SelectedInstrument.tsrx         |   19 +
 .../src/shell/TradingShell.tsrx               |   38 +
 .../src/shell/configurator-options.ts         |   55 +
 .../src/table/TradingTable.tsrx               |  308 +++++
 .../src/table/table-config/quote-cells.tsrx   |   94 ++
 .../table/table-config/trading-columns.tsrx   |  106 ++
 .../src/table/table-interactions.ts           |  144 +++
 .../src/table/trading-row-virtualizer.ts      |   52 +
 .../src/table/trading-table.ts                |    9 +
 .../src/table/use-trading-grid-pointer.ts     |   57 +
 .../realtime-trading/src/use-store-value.ts   |   60 +
 .../octane/realtime-trading/src/vite-env.d.ts |    1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  170 +++
 .../octane/realtime-trading/tsconfig.json     |   22 +
 .../octane/realtime-trading/vite.config.ts    |   10 +
 examples/preact/realtime-trading/README.md    |   44 +
 examples/preact/realtime-trading/index.html   |   17 +
 examples/preact/realtime-trading/package.json |   25 +
 examples/preact/realtime-trading/src/App.tsx  |   23 +
 .../src/benchmark/benchmark-monitor.ts        |  368 ++++++
 .../benchmark/trading-benchmark-controller.ts |  152 +++
 .../src/benchmark/use-table-benchmark.ts      |   27 +
 .../use-trading-benchmark-controller.ts       |   13 +
 .../src/feed/feed-sample-rates.ts             |   33 +
 .../realtime-trading/src/feed/market-data.ts  |   38 +
 .../src/feed/market-feed-config.ts            |   15 +
 .../src/feed/market-feed-controller.ts        |  240 ++++
 .../src/feed/sp500-instruments.ts             |  742 ++++++++++++
 .../src/feed/use-market-feed-controller.ts    |   10 +
 .../src/feed/worker/market-feed-engine.ts     |  177 +++
 .../src/feed/worker/market-feed-protocol.ts   |   70 ++
 .../src/feed/worker/market-feed.worker.ts     |  143 +++
 .../preact/realtime-trading/src/index.css     | 1048 +++++++++++++++++
 examples/preact/realtime-trading/src/main.tsx |   10 +
 .../src/shell/TradingShell.tsx                |  656 +++++++++++
 .../src/shell/configurator-options.ts         |   55 +
 .../src/shell/trading-shell-context.tsx       |   61 +
 .../src/table/table-config/quote-cells.tsx    |  219 ++++
 .../table-config/trading-table-config.tsx     |  299 +++++
 .../src/table/table-interactions.ts           |  189 +++
 .../src/table/trading-row-virtualizer.ts      |   54 +
 .../src/table/trading-table.tsx               |  625 ++++++++++
 .../preact/realtime-trading/src/vite-env.d.ts |    1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  170 +++
 .../preact/realtime-trading/tsconfig.json     |   21 +
 .../preact/realtime-trading/vite.config.ts    |   10 +
 examples/react/realtime-trading/README.md     |   20 +-
 examples/react/realtime-trading/index.html    |    1 -
 examples/react/realtime-trading/package.json  |    1 +
 .../src/benchmark/benchmark-monitor.ts        |   31 -
 .../benchmark/trading-benchmark-controller.ts |  157 +--
 .../src/benchmark/use-table-benchmark.ts      |   75 --
 .../use-trading-benchmark-controller.ts       |    7 +-
 .../src/feed/feed-load-profiles.ts            |   18 -
 .../src/feed/feed-sample-rates.ts             |   33 +
 .../src/feed/market-feed-config.ts            |   15 +
 .../src/feed/market-feed-controller.ts        |   52 +-
 .../src/feed/use-market-feed-controller.ts    |    8 +-
 .../src/feed/worker/market-feed.worker.ts     |    9 +-
 examples/react/realtime-trading/src/index.css |  109 +-
 examples/react/realtime-trading/src/main.tsx  |    7 +
 .../src/shell/TradingShell.tsx                |  262 ++---
 .../src/shell/configurator-options.ts         |   55 +
 .../src/shell/trading-shell-context.tsx       |    4 +-
 .../src/table/table-config/quote-cells.tsx    |   18 +-
 .../table-config/trading-table-config.tsx     |  325 +++--
 .../src/table/table-interactions.ts           |   49 +-
 .../src/table/trading-row-virtualizer.ts      |   14 +
 .../src/table/trading-table.tsx               |  325 +++--
 .../src/table/use-trading-grid-pointer.ts     |   74 ++
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  125 +-
 examples/solid/realtime-trading/README.md     |   13 +-
 examples/solid/realtime-trading/package.json  |    1 +
 examples/solid/realtime-trading/src/App.tsx   |    6 +-
 .../benchmark/trading-benchmark-controller.ts |   48 +-
 .../src/feed/feed-load-profiles.ts            |   18 -
 .../src/feed/feed-sample-rates.ts             |   33 +
 .../src/feed/market-feed-config.ts            |   15 +
 .../src/feed/market-feed-controller.ts        |   59 +-
 .../src/feed/worker/market-feed.worker.ts     |    9 +-
 examples/solid/realtime-trading/src/index.css |   99 +-
 .../src/shell/TradingShell.tsx                |  328 +++---
 .../src/shell/configurator-options.ts         |   55 +
 .../src/shell/trading-shell-context.tsx       |    4 +-
 .../src/table/table-config/quote-cells.tsx    |   38 +-
 .../table/table-config/trading-columns.tsx    |  315 +++--
 .../src/table/table-interactions.ts           |   86 ++
 .../src/table/trading-row-virtualizer.ts      |   14 +
 .../src/table/trading-table.tsx               |  510 +++++---
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   85 +-
 examples/svelte/realtime-trading/.gitignore   |    4 +
 examples/svelte/realtime-trading/README.md    |   16 +
 examples/svelte/realtime-trading/index.html   |    3 +
 examples/svelte/realtime-trading/package.json |   28 +
 .../svelte/realtime-trading/src/App.svelte    |   20 +
 .../src/benchmark/benchmark-monitor.ts        |  368 ++++++
 .../src/benchmark/table-benchmark.ts          |   22 +
 .../benchmark/trading-benchmark-controller.ts |  152 +++
 .../src/feed/feed-sample-rates.ts             |   33 +
 .../realtime-trading/src/feed/market-data.ts  |   38 +
 .../src/feed/market-feed-config.ts            |   15 +
 .../src/feed/market-feed-controller.ts        |  240 ++++
 .../src/feed/sp500-instruments.ts             |  742 ++++++++++++
 .../src/feed/worker/market-feed-engine.ts     |  177 +++
 .../src/feed/worker/market-feed-protocol.ts   |   70 ++
 .../src/feed/worker/market-feed.worker.ts     |  143 +++
 .../svelte/realtime-trading/src/index.css     | 1048 +++++++++++++++++
 examples/svelte/realtime-trading/src/main.ts  |    5 +
 .../src/shell/AppHeader.svelte                |   16 +
 .../src/shell/Configurator.svelte             |   41 +
 .../src/shell/Diagnostics.svelte              |   37 +
 .../src/shell/MarketStatusbar.svelte          |   13 +
 .../src/shell/MetricsStrip.svelte             |   22 +
 .../src/shell/SelectedInstrument.svelte       |   16 +
 .../src/shell/TradingShell.svelte             |   16 +
 .../src/shell/configurator-options.ts         |   55 +
 .../src/shell/trading-shell-context.ts        |   29 +
 .../src/table/TradingTable.svelte             |  165 +++
 .../table/table-config/DayChangeCell.svelte   |   19 +
 .../table/table-config/LastPriceCell.svelte   |   11 +
 .../src/table/table-config/MoveCell.svelte    |   17 +
 .../table-config/PercentChangeCell.svelte     |   10 +
 .../src/table/table-config/PriceCell.svelte   |   10 +
 .../table/table-config/SparklineCell.svelte   |   12 +
 .../src/table/table-config/quote-cells.ts     |   59 +
 .../src/table/table-config/trading-columns.ts |   78 ++
 .../src/table/table-interactions.ts           |  186 +++
 .../src/table/trading-row-virtualizer.ts      |   14 +
 .../src/table/trading-table.ts                |    3 +
 .../svelte/realtime-trading/src/vite-env.d.ts |    2 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  170 +++
 .../svelte/realtime-trading/tsconfig.json     |   19 +
 .../svelte/realtime-trading/vite.config.ts    |    7 +
 examples/vue/realtime-trading/README.md       |   37 +
 examples/vue/realtime-trading/index.html      |   17 +
 examples/vue/realtime-trading/package.json    |   29 +
 examples/vue/realtime-trading/src/App.tsx     |   28 +
 .../src/benchmark/benchmark-monitor.ts        |  368 ++++++
 .../benchmark/trading-benchmark-controller.ts |  152 +++
 .../src/benchmark/use-table-benchmark.ts      |   26 +
 .../src/feed/feed-sample-rates.ts             |   33 +
 .../realtime-trading/src/feed/market-data.ts  |   38 +
 .../src/feed/market-feed-config.ts            |   15 +
 .../src/feed/market-feed-controller.ts        |  240 ++++
 .../src/feed/sp500-instruments.ts             |  742 ++++++++++++
 .../src/feed/worker/market-feed-engine.ts     |  177 +++
 .../src/feed/worker/market-feed-protocol.ts   |   70 ++
 .../src/feed/worker/market-feed.worker.ts     |  143 +++
 examples/vue/realtime-trading/src/index.css   | 1048 +++++++++++++++++
 examples/vue/realtime-trading/src/main.ts     |    5 +
 .../src/shell/TradingShell.tsx                |  468 ++++++++
 .../src/shell/configurator-options.ts         |   55 +
 .../src/shell/trading-shell-context.ts        |   50 +
 .../src/table/table-config/quote-cells.tsx    |  202 ++++
 .../table/table-config/trading-columns.tsx    |  277 +++++
 .../src/table/table-interactions.ts           |  186 +++
 .../src/table/trading-row-virtualizer.ts      |   14 +
 .../src/table/trading-table.tsx               |  517 ++++++++
 .../vue/realtime-trading/src/vite-env.d.ts    |    1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  170 +++
 examples/vue/realtime-trading/tsconfig.json   |   22 +
 examples/vue/realtime-trading/vite.config.ts  |   11 +
 pnpm-lock.yaml                                |  803 ++++++++++---
 305 files changed, 34790 insertions(+), 2085 deletions(-)
 create mode 100644 examples/alpine/realtime-trading/.gitignore
 create mode 100644 examples/alpine/realtime-trading/README.md
 create mode 100644 examples/alpine/realtime-trading/index.html
 create mode 100644 examples/alpine/realtime-trading/package.json
 create mode 100644 examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
 create mode 100644 examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
 create mode 100644 examples/alpine/realtime-trading/src/feed/feed-sample-rates.ts
 create mode 100644 examples/alpine/realtime-trading/src/feed/market-data.ts
 create mode 100644 examples/alpine/realtime-trading/src/feed/market-feed-config.ts
 create mode 100644 examples/alpine/realtime-trading/src/feed/market-feed-controller.ts
 create mode 100644 examples/alpine/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/alpine/realtime-trading/src/feed/worker/market-feed-engine.ts
 create mode 100644 examples/alpine/realtime-trading/src/feed/worker/market-feed-protocol.ts
 create mode 100644 examples/alpine/realtime-trading/src/feed/worker/market-feed.worker.ts
 create mode 100644 examples/alpine/realtime-trading/src/index.css
 create mode 100644 examples/alpine/realtime-trading/src/main.ts
 create mode 100644 examples/alpine/realtime-trading/src/shell/configurator-options.ts
 create mode 100644 examples/alpine/realtime-trading/src/table/table-config/quote-cells.ts
 create mode 100644 examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
 create mode 100644 examples/alpine/realtime-trading/src/table/table-interactions.ts
 create mode 100644 examples/alpine/realtime-trading/src/table/trading-row-virtualizer.ts
 create mode 100644 examples/alpine/realtime-trading/src/table/trading-table.ts
 create mode 100644 examples/alpine/realtime-trading/src/vite-env.d.ts
 create mode 100644 examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/alpine/realtime-trading/tsconfig.json
 create mode 100644 examples/alpine/realtime-trading/vite.config.ts
 delete mode 100644 examples/angular/realtime-trading/src/app/feed/feed-load-profiles.ts
 create mode 100644 examples/angular/realtime-trading/src/app/feed/feed-sample-rates.ts
 create mode 100644 examples/angular/realtime-trading/src/app/feed/market-feed-config.ts
 create mode 100644 examples/angular/realtime-trading/src/app/shell/configurator-options.ts
 create mode 100644 examples/ember/realtime-trading/README.md
 create mode 100644 examples/ember/realtime-trading/app/app.css
 create mode 100644 examples/ember/realtime-trading/app/app.ts
 create mode 100644 examples/ember/realtime-trading/app/benchmark/benchmark-monitor.ts
 create mode 100644 examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
 create mode 100644 examples/ember/realtime-trading/app/components/shell/app-header.gts
 create mode 100644 examples/ember/realtime-trading/app/components/shell/configurator-options.ts
 create mode 100644 examples/ember/realtime-trading/app/components/shell/configurator.gts
 create mode 100644 examples/ember/realtime-trading/app/components/shell/diagnostics.gts
 create mode 100644 examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
 create mode 100644 examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
 create mode 100644 examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
 create mode 100644 examples/ember/realtime-trading/app/components/shell/trading-shell.gts
 create mode 100644 examples/ember/realtime-trading/app/components/table/trading-table.gts
 create mode 100644 examples/ember/realtime-trading/app/config.ts
 create mode 100644 examples/ember/realtime-trading/app/feed/feed-sample-rates.ts
 create mode 100644 examples/ember/realtime-trading/app/feed/market-data.ts
 create mode 100644 examples/ember/realtime-trading/app/feed/market-feed-config.ts
 create mode 100644 examples/ember/realtime-trading/app/feed/market-feed-controller.ts
 create mode 100644 examples/ember/realtime-trading/app/feed/sp500-instruments.ts
 create mode 100644 examples/ember/realtime-trading/app/feed/worker/market-feed-engine.ts
 create mode 100644 examples/ember/realtime-trading/app/feed/worker/market-feed-protocol.ts
 create mode 100644 examples/ember/realtime-trading/app/feed/worker/market-feed.worker.ts
 create mode 100644 examples/ember/realtime-trading/app/router.ts
 create mode 100644 examples/ember/realtime-trading/app/table/table-config/quote-cells.gts
 create mode 100644 examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
 create mode 100644 examples/ember/realtime-trading/app/table/table-interactions.ts
 create mode 100644 examples/ember/realtime-trading/app/table/trading-features.ts
 create mode 100644 examples/ember/realtime-trading/app/table/trading-row-virtualizer.ts
 create mode 100644 examples/ember/realtime-trading/app/table/trading-table.ts
 create mode 100644 examples/ember/realtime-trading/app/templates/application.gts
 create mode 100644 examples/ember/realtime-trading/app/utils/subscriptions.ts
 create mode 100644 examples/ember/realtime-trading/babel.config.js
 create mode 100644 examples/ember/realtime-trading/index.html
 create mode 100644 examples/ember/realtime-trading/package.json
 create mode 100644 examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/ember/realtime-trading/tsconfig.json
 create mode 100644 examples/ember/realtime-trading/vite.config.mjs
 create mode 100644 examples/lit/realtime-trading/.gitignore
 create mode 100644 examples/lit/realtime-trading/README.md
 create mode 100644 examples/lit/realtime-trading/index.html
 create mode 100644 examples/lit/realtime-trading/package.json
 create mode 100644 examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
 create mode 100644 examples/lit/realtime-trading/src/benchmark/table-benchmark.ts
 create mode 100644 examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
 create mode 100644 examples/lit/realtime-trading/src/feed/feed-sample-rates.ts
 create mode 100644 examples/lit/realtime-trading/src/feed/market-data.ts
 create mode 100644 examples/lit/realtime-trading/src/feed/market-feed-config.ts
 create mode 100644 examples/lit/realtime-trading/src/feed/market-feed-controller.ts
 create mode 100644 examples/lit/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/lit/realtime-trading/src/feed/worker/market-feed-engine.ts
 create mode 100644 examples/lit/realtime-trading/src/feed/worker/market-feed-protocol.ts
 create mode 100644 examples/lit/realtime-trading/src/feed/worker/market-feed.worker.ts
 create mode 100644 examples/lit/realtime-trading/src/index.css
 create mode 100644 examples/lit/realtime-trading/src/main.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/AppHeader.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/Configurator.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/Diagnostics.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/MetricsStrip.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/TradingShell.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/configurator-options.ts
 create mode 100644 examples/lit/realtime-trading/src/shell/controller-element.ts
 create mode 100644 examples/lit/realtime-trading/src/table/TradingTable.ts
 create mode 100644 examples/lit/realtime-trading/src/table/table-config/quote-cells.ts
 create mode 100644 examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
 create mode 100644 examples/lit/realtime-trading/src/table/table-interactions.ts
 create mode 100644 examples/lit/realtime-trading/src/table/trading-row-virtualizer.ts
 create mode 100644 examples/lit/realtime-trading/src/table/trading-table.ts
 create mode 100644 examples/lit/realtime-trading/src/vite-env.d.ts
 create mode 100644 examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/lit/realtime-trading/tsconfig.json
 create mode 100644 examples/lit/realtime-trading/vite.config.ts
 create mode 100644 examples/octane/realtime-trading/README.md
 create mode 100644 examples/octane/realtime-trading/index.html
 create mode 100644 examples/octane/realtime-trading/package.json
 create mode 100644 examples/octane/realtime-trading/src/benchmark/benchmark-monitor.ts
 create mode 100644 examples/octane/realtime-trading/src/benchmark/table-benchmark.ts
 create mode 100644 examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
 create mode 100644 examples/octane/realtime-trading/src/feed/feed-sample-rates.ts
 create mode 100644 examples/octane/realtime-trading/src/feed/market-data.ts
 create mode 100644 examples/octane/realtime-trading/src/feed/market-feed-config.ts
 create mode 100644 examples/octane/realtime-trading/src/feed/market-feed-controller.ts
 create mode 100644 examples/octane/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/octane/realtime-trading/src/feed/worker/market-feed-engine.ts
 create mode 100644 examples/octane/realtime-trading/src/feed/worker/market-feed-protocol.ts
 create mode 100644 examples/octane/realtime-trading/src/feed/worker/market-feed.worker.ts
 create mode 100644 examples/octane/realtime-trading/src/index.css
 create mode 100644 examples/octane/realtime-trading/src/main.tsrx
 create mode 100644 examples/octane/realtime-trading/src/shell/AppHeader.tsrx
 create mode 100644 examples/octane/realtime-trading/src/shell/Configurator.tsrx
 create mode 100644 examples/octane/realtime-trading/src/shell/Diagnostics.tsrx
 create mode 100644 examples/octane/realtime-trading/src/shell/MarketStatusbar.tsrx
 create mode 100644 examples/octane/realtime-trading/src/shell/MetricsStrip.tsrx
 create mode 100644 examples/octane/realtime-trading/src/shell/SelectedInstrument.tsrx
 create mode 100644 examples/octane/realtime-trading/src/shell/TradingShell.tsrx
 create mode 100644 examples/octane/realtime-trading/src/shell/configurator-options.ts
 create mode 100644 examples/octane/realtime-trading/src/table/TradingTable.tsrx
 create mode 100644 examples/octane/realtime-trading/src/table/table-config/quote-cells.tsrx
 create mode 100644 examples/octane/realtime-trading/src/table/table-config/trading-columns.tsrx
 create mode 100644 examples/octane/realtime-trading/src/table/table-interactions.ts
 create mode 100644 examples/octane/realtime-trading/src/table/trading-row-virtualizer.ts
 create mode 100644 examples/octane/realtime-trading/src/table/trading-table.ts
 create mode 100644 examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
 create mode 100644 examples/octane/realtime-trading/src/use-store-value.ts
 create mode 100644 examples/octane/realtime-trading/src/vite-env.d.ts
 create mode 100644 examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/octane/realtime-trading/tsconfig.json
 create mode 100644 examples/octane/realtime-trading/vite.config.ts
 create mode 100644 examples/preact/realtime-trading/README.md
 create mode 100644 examples/preact/realtime-trading/index.html
 create mode 100644 examples/preact/realtime-trading/package.json
 create mode 100644 examples/preact/realtime-trading/src/App.tsx
 create mode 100644 examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
 create mode 100644 examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
 create mode 100644 examples/preact/realtime-trading/src/benchmark/use-table-benchmark.ts
 create mode 100644 examples/preact/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/feed-sample-rates.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/market-data.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/market-feed-config.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/market-feed-controller.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/use-market-feed-controller.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/worker/market-feed-engine.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/worker/market-feed-protocol.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/worker/market-feed.worker.ts
 create mode 100644 examples/preact/realtime-trading/src/index.css
 create mode 100644 examples/preact/realtime-trading/src/main.tsx
 create mode 100644 examples/preact/realtime-trading/src/shell/TradingShell.tsx
 create mode 100644 examples/preact/realtime-trading/src/shell/configurator-options.ts
 create mode 100644 examples/preact/realtime-trading/src/shell/trading-shell-context.tsx
 create mode 100644 examples/preact/realtime-trading/src/table/table-config/quote-cells.tsx
 create mode 100644 examples/preact/realtime-trading/src/table/table-config/trading-table-config.tsx
 create mode 100644 examples/preact/realtime-trading/src/table/table-interactions.ts
 create mode 100644 examples/preact/realtime-trading/src/table/trading-row-virtualizer.ts
 create mode 100644 examples/preact/realtime-trading/src/table/trading-table.tsx
 create mode 100644 examples/preact/realtime-trading/src/vite-env.d.ts
 create mode 100644 examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/preact/realtime-trading/tsconfig.json
 create mode 100644 examples/preact/realtime-trading/vite.config.ts
 delete mode 100644 examples/react/realtime-trading/src/feed/feed-load-profiles.ts
 create mode 100644 examples/react/realtime-trading/src/feed/feed-sample-rates.ts
 create mode 100644 examples/react/realtime-trading/src/feed/market-feed-config.ts
 create mode 100644 examples/react/realtime-trading/src/shell/configurator-options.ts
 create mode 100644 examples/react/realtime-trading/src/table/trading-row-virtualizer.ts
 create mode 100644 examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
 delete mode 100644 examples/solid/realtime-trading/src/feed/feed-load-profiles.ts
 create mode 100644 examples/solid/realtime-trading/src/feed/feed-sample-rates.ts
 create mode 100644 examples/solid/realtime-trading/src/feed/market-feed-config.ts
 create mode 100644 examples/solid/realtime-trading/src/shell/configurator-options.ts
 create mode 100644 examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
 create mode 100644 examples/svelte/realtime-trading/.gitignore
 create mode 100644 examples/svelte/realtime-trading/README.md
 create mode 100644 examples/svelte/realtime-trading/index.html
 create mode 100644 examples/svelte/realtime-trading/package.json
 create mode 100644 examples/svelte/realtime-trading/src/App.svelte
 create mode 100644 examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
 create mode 100644 examples/svelte/realtime-trading/src/benchmark/table-benchmark.ts
 create mode 100644 examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/feed-sample-rates.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/market-data.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/market-feed-config.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/market-feed-controller.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/worker/market-feed-engine.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/worker/market-feed-protocol.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/worker/market-feed.worker.ts
 create mode 100644 examples/svelte/realtime-trading/src/index.css
 create mode 100644 examples/svelte/realtime-trading/src/main.ts
 create mode 100644 examples/svelte/realtime-trading/src/shell/AppHeader.svelte
 create mode 100644 examples/svelte/realtime-trading/src/shell/Configurator.svelte
 create mode 100644 examples/svelte/realtime-trading/src/shell/Diagnostics.svelte
 create mode 100644 examples/svelte/realtime-trading/src/shell/MarketStatusbar.svelte
 create mode 100644 examples/svelte/realtime-trading/src/shell/MetricsStrip.svelte
 create mode 100644 examples/svelte/realtime-trading/src/shell/SelectedInstrument.svelte
 create mode 100644 examples/svelte/realtime-trading/src/shell/TradingShell.svelte
 create mode 100644 examples/svelte/realtime-trading/src/shell/configurator-options.ts
 create mode 100644 examples/svelte/realtime-trading/src/shell/trading-shell-context.ts
 create mode 100644 examples/svelte/realtime-trading/src/table/TradingTable.svelte
 create mode 100644 examples/svelte/realtime-trading/src/table/table-config/DayChangeCell.svelte
 create mode 100644 examples/svelte/realtime-trading/src/table/table-config/LastPriceCell.svelte
 create mode 100644 examples/svelte/realtime-trading/src/table/table-config/MoveCell.svelte
 create mode 100644 examples/svelte/realtime-trading/src/table/table-config/PercentChangeCell.svelte
 create mode 100644 examples/svelte/realtime-trading/src/table/table-config/PriceCell.svelte
 create mode 100644 examples/svelte/realtime-trading/src/table/table-config/SparklineCell.svelte
 create mode 100644 examples/svelte/realtime-trading/src/table/table-config/quote-cells.ts
 create mode 100644 examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
 create mode 100644 examples/svelte/realtime-trading/src/table/table-interactions.ts
 create mode 100644 examples/svelte/realtime-trading/src/table/trading-row-virtualizer.ts
 create mode 100644 examples/svelte/realtime-trading/src/table/trading-table.ts
 create mode 100644 examples/svelte/realtime-trading/src/vite-env.d.ts
 create mode 100644 examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/svelte/realtime-trading/tsconfig.json
 create mode 100644 examples/svelte/realtime-trading/vite.config.ts
 create mode 100644 examples/vue/realtime-trading/README.md
 create mode 100644 examples/vue/realtime-trading/index.html
 create mode 100644 examples/vue/realtime-trading/package.json
 create mode 100644 examples/vue/realtime-trading/src/App.tsx
 create mode 100644 examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
 create mode 100644 examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
 create mode 100644 examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/feed-sample-rates.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/market-data.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/market-feed-config.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/market-feed-controller.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/worker/market-feed-engine.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/worker/market-feed-protocol.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/worker/market-feed.worker.ts
 create mode 100644 examples/vue/realtime-trading/src/index.css
 create mode 100644 examples/vue/realtime-trading/src/main.ts
 create mode 100644 examples/vue/realtime-trading/src/shell/TradingShell.tsx
 create mode 100644 examples/vue/realtime-trading/src/shell/configurator-options.ts
 create mode 100644 examples/vue/realtime-trading/src/shell/trading-shell-context.ts
 create mode 100644 examples/vue/realtime-trading/src/table/table-config/quote-cells.tsx
 create mode 100644 examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
 create mode 100644 examples/vue/realtime-trading/src/table/table-interactions.ts
 create mode 100644 examples/vue/realtime-trading/src/table/trading-row-virtualizer.ts
 create mode 100644 examples/vue/realtime-trading/src/table/trading-table.tsx
 create mode 100644 examples/vue/realtime-trading/src/vite-env.d.ts
 create mode 100644 examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
 create mode 100644 examples/vue/realtime-trading/tsconfig.json
 create mode 100644 examples/vue/realtime-trading/vite.config.ts

diff --git a/examples/alpine/realtime-trading/.gitignore b/examples/alpine/realtime-trading/.gitignore
new file mode 100644
index 0000000000..1502ec233f
--- /dev/null
+++ b/examples/alpine/realtime-trading/.gitignore
@@ -0,0 +1,3 @@
+dist
+node_modules
+
diff --git a/examples/alpine/realtime-trading/README.md b/examples/alpine/realtime-trading/README.md
new file mode 100644
index 0000000000..07aeab1acd
--- /dev/null
+++ b/examples/alpine/realtime-trading/README.md
@@ -0,0 +1,13 @@
+# Alpine realtime trading benchmark
+
+Standalone Alpine implementation of the common realtime-trading workload. The
+feed, worker, instruments, benchmark monitor, shell state, table configuration,
+custom quote elements, delegated grid interactions, and Virtual Core instance
+all live in this example folder.
+
+```bash
+pnpm --dir examples/alpine/realtime-trading dev
+pnpm --dir examples/alpine/realtime-trading test:types
+pnpm --dir examples/alpine/realtime-trading lint
+pnpm --dir examples/alpine/realtime-trading build
+```
diff --git a/examples/alpine/realtime-trading/index.html b/examples/alpine/realtime-trading/index.html
new file mode 100644
index 0000000000..f96e4c37fb
--- /dev/null
+++ b/examples/alpine/realtime-trading/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>TanStack Alpine Table · Realtime Trading</title></head>
+<body><main x-data="tradingApp" x-init="init" @alpine:destroy="destroy" class="trading-terminal" :class="{ 'is-sidebar-collapsed': !local.sidebarOpen }">
+  <div class="shell-header"><header class="app-bar"><div class="brand"><strong>MARKET MONITOR</strong></div><div class="header-actions"><span class="feed-status" :class="{ 'is-running': local.feed.workerReady && local.feed.running }" data-testid="feed-status"><span class="status-dot" aria-hidden="true"></span><span x-text="feedStatus()"></span></span><button class="sidebar-toggle" type="button" :aria-expanded="local.sidebarOpen" aria-controls="benchmark-configurator" :aria-label="local.sidebarOpen ? 'Close configurator' : 'Open configurator'" @click="toggleSidebar()"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect><path d="M12.5 3v14"></path></svg></button></div></header><aside class="development-warning">DEV BUILD — use the production build before recording results.</aside></div>
+  <section class="market-panel" aria-label="Live synthetic quotes">
+    <section class="metrics-strip" aria-label="Live performance metrics"><template x-for="item in metricItems()" :key="item[0]"><article><span x-text="item[0]"></span><strong :data-testid="item[3] || null" x-text="item[1]"></strong><small x-text="item[2]"></small></article></template></section>
+    <div x-ref="scroll" class="table-scroll" :class="{ 'is-virtualized': virtualMode() === 'tanstack' }" data-trading-table>
+      <table x-ref="table" class="trading-data-grid" :class="{ 'virtual-table': virtualMode() === 'tanstack' }" data-testid="trading-table" role="grid" aria-multiselectable="true" tabindex="0" @keydown="onGridKeyDown($event)">
+        <thead><template x-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id"><tr><template x-for="header in headerGroup.headers" :key="header.id"><th :colspan="header.colSpan" :style="`width:calc(var(--header-${header.id}-size) * 1px)`" :aria-sort="header.subHeaders.length === 0 ? sortAriaValue(header.column.getIsSorted()) : null" :class="{ 'column-group-header': header.subHeaders.length > 0, 'numeric-header': header.subHeaders.length === 0 && !isTextColumn(header.column.id) }">
+          <template x-if="!header.isPlaceholder && header.subHeaders.length === 0"><div><div class="leaf-header-content" @dragover="dragOver(header, $event)" @drop="drop(header, $event)"><button type="button" class="column-drag-handle" draggable="true" :aria-label="`Move ${header.column.id} column`" @dragstart="dragStart(header, $event)" @dragend="clearDrag()">⋮⋮</button><button type="button" class="sort-header-button" :class="{ 'is-sortable': header.column.getCanSort() }" :disabled="!header.column.getCanSort()" @click="header.column.getToggleSortingHandler()($event)"><span class="header-label" x-html="FlexRender({ header })"></span><span x-show="header.column.getCanSort()" class="sort-indicator" :class="{ 'is-active': header.column.getIsSorted() }" aria-hidden="true" x-text="sortIndicator(header.column.getIsSorted())"></span></button></div><div x-show="header.column.getCanResize()" class="column-resize-handle" :class="{ 'is-resizing': header.column.getIsResizing() }" role="separator" aria-orientation="vertical" @dblclick="header.column.resetSize()" @mousedown="header.getResizeHandler()($event)" @touchstart="header.getResizeHandler()($event)"></div></div></template>
+          <template x-if="!header.isPlaceholder && header.subHeaders.length > 0"><span x-html="FlexRender({ header })"></span></template>
+        </th></template></tr></template></thead>
+        <tbody :class="{ 'virtual-table-body': virtualMode() === 'tanstack' }" :style="virtualMode() === 'tanstack' ? `height:${tableHeight()}px` : ''" :data-source-row-count="local.feed.quotes.length" @mousedown="onBodyMouseDown($event)" @pointerover="onBodyPointerOver($event)" @mouseleave="resetPointer()" @click="onBodyClick($event)">
+          <template x-for="item in renderRows()" :key="item.row.id"><tr :class="{ 'virtual-table-row': item.virtual }" :style="item.virtual ? `transform:translateY(${item.virtual.start}px)` : ''" :data-virtual-index="item.virtual?.index ?? null" :data-symbol="item.row.original.symbol" :data-row-id="item.row.original.id" :data-symbol-selected="local.selectedSymbol === item.row.original.symbol ? 'true' : null" :title="item.row.original.company" :aria-selected="item.row.getIsSelected()"><template x-for="cell in item.row.getVisibleCells()" :key="cell.id"><td :style="`width:calc(var(--col-${cell.column.id}-size) * 1px)`" :data-column-id="cell.column.id" :data-cell-focused="cell.getIsFocused() ? 'true' : null" :data-selection-top="cell.getSelectionEdges().top ? 'true' : null" :data-selection-right="cell.getSelectionEdges().right ? 'true' : null" :data-selection-bottom="cell.getSelectionEdges().bottom ? 'true' : null" :data-selection-left="cell.getSelectionEdges().left ? 'true' : null" :aria-selected="cell.getIsSelected()" :tabindex="cell.getTabIndex()" x-html="FlexRender({ cell })"></td></template></tr></template>
+        </tbody>
+      </table>
+    </div>
+    <footer x-show="virtualMode() === 'tanstack'" class="virtual-scroll-footer" data-testid="virtual-scroll-footer"><span x-text="`TanStack · Total · ${rows().length} rows · ${table.getVisibleLeafColumns().length} columns`"></span><span data-testid="visible-row-range" x-text="visibleRangeText()"></span></footer>
+  </section>
+  <footer class="market-statusbar"><span>MESSAGE SAMPLES <strong x-text="formatInteger(local.benchmark.metrics.lastBatchSize)"></strong></span><span>ROW UPDATES <strong x-text="formatInteger(local.benchmark.metrics.lastUpdateCount)"></strong></span><span>HOSTS <strong x-text="formatInteger(local.benchmark.mountedCells)"></strong></span><span>COMPONENTS <strong x-text="formatInteger(local.benchmark.liveComponents)"></strong></span></footer>
+  <div class="sidebar-slot"><aside x-show="local.sidebarOpen" id="benchmark-configurator" class="configurator" aria-label="Benchmark configurator"><header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+    <section class="config-section" aria-labelledby="feed-settings"><h2 id="feed-settings">FEED</h2><button class="primary-action" type="button" data-testid="feed-toggle" @click="feed.actions.toggle()" x-text="local.feed.running ? 'PAUSE FEED' : 'START FEED'"></button>
+      <label class="field"><span>Instruments (rows)</span><select data-testid="instrument-count-select" :value="local.feed.instrumentCount" @change="setInstrumentCount($event)"><template x-for="option in configuratorOptions.instrumentCounts" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select></label>
+      <label class="field rate-field"><span>Synthetic quote workload <strong data-testid="target-sample-rate" x-text="`${formatRate(local.feed.targetTicksPerSecond)} samples/s`"></strong></span><input data-testid="target-rate-slider" type="range" min="0" :max="feedSampleRateOptions.length - 1" step="1" :value="sampleRateIndex()" @change="setSampleRate($event)" /><small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small></label>
+      <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" :value="local.feed.publishIntervalMs" @change="setPublishInterval($event)"><template x-for="option in configuratorOptions.workerDeliveryIntervals" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select><small>One coalesced worker message at this target cadence.</small></label>
+    </section>
+    <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
+      <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" :value="virtualMode()" :disabled="local.feed.instrumentCount >= 250" @change="setVirtualMode($event)"><template x-for="option in configuratorOptions.rowRenderingModes" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select><small x-text="local.feed.instrumentCount >= 250 ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'"></small></label>
+      <label class="toggle-field"><input type="checkbox" :checked="local.rendererMode === 'swap'" @change="setRendererMode($event)" /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
+      <label class="toggle-field"><input type="checkbox" :checked="local.feed.updateSparklines" @change="setSparklineUpdates($event)" /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
+      <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" :value="local.feed.sparklineSampleIntervalMs" @change="setSparklineInterval($event)"><template x-for="option in configuratorOptions.intradaySamplingIntervals" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select></label>
+    </section>
+    <section class="config-section" aria-labelledby="stress-actions"><h2 id="stress-actions">STRESS ACTIONS</h2><div class="action-grid"><button type="button" @click="feed.actions.runBurst()">RUN 25K BURST</button><button type="button" @click="controller.actions.resetMarket()">RESET SESSION</button></div></section>
+    <section class="config-section diagnostics" aria-labelledby="diagnostics"><h2 id="diagnostics">DIAGNOSTICS</h2><dl><template x-for="item in diagnostics()" :key="item[0]"><div><dt x-text="item[0]"></dt><dd :data-testid="item[2] || null" x-text="item[1]"></dd></div></template></dl></section>
+    <section class="config-section selected-instrument" data-testid="selected-instrument"><h2>SELECTED INSTRUMENT</h2><template x-if="selectedQuote()"><div x-data="{ get quote() { return selectedQuote() } }"><div class="selection"><div><strong x-text="quote.symbol"></strong><span x-text="quote.company"></span></div><small x-text="quote.venue"></small></div><dl><div><dt>Last</dt><dd x-text="quote.price.toFixed(2)"></dd></div><div><dt>Bid / ask</dt><dd x-text="`${quote.bid.toFixed(2)} / ${quote.ask.toFixed(2)}`"></dd></div></dl></div></template><p x-show="!selectedQuote()">Click or begin a cell selection in any row to inspect its instrument.</p></section>
+  </aside></div>
+</main><script type="module" src="/src/main.ts"></script></body></html>
diff --git a/examples/alpine/realtime-trading/package.json b/examples/alpine/realtime-trading/package.json
new file mode 100644
index 0000000000..4dfd43d3ce
--- /dev/null
+++ b/examples/alpine/realtime-trading/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "tanstack-alpine-table-example-realtime-trading", "private": true, "type": "module",
+  "scripts": { "start": "vite", "dev": "vite", "build": "vite build", "serve": "vite preview", "lint": "eslint ./src", "test:types": "tsc --noEmit", "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts" },
+  "dependencies": { "@tanstack/alpine-table": "9.1.2", "@tanstack/store": "^0.11.0", "@tanstack/virtual-core": "^3.13.35", "alpinejs": "^3.15.12" },
+  "devDependencies": { "@types/alpinejs": "^3.13.11", "typescript": "6.0.3", "vite": "^8.2.0" }
+}
diff --git a/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..9eea493fec
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -0,0 +1,368 @@
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells'
+import { rowModelDiagnostics } from '../table/trading-table'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+  rowModelCallsPerSecond: number
+  rowModelAverageMs: number
+  rowModelMaxMs: number
+  visibleRows: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+  rowModelCallsPerSecond: 0,
+  rowModelAverageMs: 0,
+  rowModelMaxMs: 0,
+  visibleRows: 0,
+}
+
+const userTiming = { entryCount: 0 }
+
+export function recordMeasure(
+  name: string,
+  start: number,
+  end: number,
+  detail: Record<string, unknown>,
+): void {
+  try {
+    performance.measure(name, { start, end, detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('market-update-to-layout-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
+export function markBenchmarkAction(
+  name: string,
+  detail: Record<string, unknown> = {},
+): void {
+  try {
+    performance.mark(`benchmark:${name}`, { detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMarks()
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    renderSamples: [] as Array<number>,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+    previousRowModelCalls: 0,
+    previousRowModelDuration: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  recordCompletedRender(): void {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      const renderEndedAt = performance.now()
+      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      recordMeasure(
+        'market-update-to-layout-commit',
+        runtime.pendingRenderStartedAt,
+        renderEndedAt,
+        {},
+      )
+      runtime.pendingRenderStartedAt = null
+      runtime.tableRendersInSample++
+    }
+  }
+
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = tickCount
+    runtime.lastUpdateCount = updateCount
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const renderSamples = runtime.renderSamples
+    const sortedRenderSamples = [...renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const rowModelCalls =
+      rowModelDiagnostics.calls - runtime.previousRowModelCalls
+    const rowModelDuration =
+      rowModelDiagnostics.totalDurationMs - runtime.previousRowModelDuration
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const averageRenderMs =
+      renderSamples.length === 0
+        ? 0
+        : renderSamples.reduce((sum, value) => sum + value, 0) /
+          renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualTicksPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+      rowModelCallsPerSecond: (rowModelCalls / sampleDuration) * 1_000,
+      rowModelAverageMs:
+        rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
+      rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
+      visibleRows: rowModelDiagnostics.lastRowCount,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.renderSamples = []
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    rowModelDiagnostics.maxDurationMs = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..316bb530e6
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,152 @@
+import { batch, createAtom, createStore } from '@tanstack/store'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from './benchmark-monitor'
+import type { FeedMetrics } from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+
+export interface TradingBenchmarkState {
+  requestedVirtualScrollMode: VirtualScrollMode
+  metrics: FeedMetrics
+  mountedCells: number
+  liveComponents: number
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  resetViewState: () => void
+  setRendererMode: (mode: RendererMode) => void
+  setVirtualScrollEnabled: (enabled: boolean) => void
+  setRenderedRowCount: (count: number) => void
+  selectSymbol: (symbol: string | null) => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  requestedVirtualScrollMode: 'none',
+  metrics: initialMetrics,
+  mountedCells: 0,
+  liveComponents: 0,
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly feed: MarketFeedController
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    stopObservingFeed: null as (() => void) | null,
+  }
+
+  constructor(feed: MarketFeedController) {
+    this.feed = feed
+    this.actions = {
+      resetViewState: () => {
+        this.renderAtoms.selectedSymbol.set(null)
+      },
+      setRendererMode: (mode) => {
+        this.renderAtoms.rendererMode.set(mode)
+      },
+      setVirtualScrollEnabled: (enabled) => {
+        if (
+          this.feed.store.get().instrumentCount >=
+          FORCED_VIRTUALIZATION_ROW_COUNT
+        ) {
+          return
+        }
+        this.#patch({
+          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
+        })
+      },
+      setRenderedRowCount: (count) => {
+        const mountedCells = count * TRADING_COLUMN_COUNT
+        if (mountedCells !== this.store.get().mountedCells) {
+          this.#patch({ mountedCells })
+        }
+      },
+      selectSymbol: (symbol) => {
+        this.renderAtoms.selectedSymbol.set(symbol)
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.store.setState((state) => ({
+            ...state,
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.feed.actions.reset()
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    this.#runtime.stopObservingFeed = this.feed.observe({
+      messageReceived: () => this.monitor.recordWorkerMessage(),
+      mutationStarted: () => this.monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+      renderCommitted: () => this.monitor.recordCompletedRender(),
+    })
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.stopObservingFeed?.()
+    this.#runtime.longAnimationFrameObserver = null
+    this.#runtime.stopObservingFeed = null
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    if (this.monitor.shouldPublish(now)) {
+      this.#publishMetrics(this.monitor.publish(now))
+    }
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    this.#patch({
+      metrics,
+      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+}
diff --git a/examples/alpine/realtime-trading/src/feed/feed-sample-rates.ts b/examples/alpine/realtime-trading/src/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/alpine/realtime-trading/src/feed/market-data.ts b/examples/alpine/realtime-trading/src/feed/market-data.ts
new file mode 100644
index 0000000000..6231865d3f
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/feed/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './worker/market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/alpine/realtime-trading/src/feed/market-feed-config.ts b/examples/alpine/realtime-trading/src/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/alpine/realtime-trading/src/feed/market-feed-controller.ts b/examples/alpine/realtime-trading/src/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..73716811be
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/feed/market-feed-controller.ts
@@ -0,0 +1,240 @@
+import { batch, createStore } from '@tanstack/store'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedState {
+  workerReady: boolean
+  running: boolean
+  instrumentCount: number
+  targetTicksPerSecond: number
+  publishIntervalMs: number
+  updateSparklines: boolean
+  sparklineSampleIntervalMs: number
+  quotes: Array<MarketQuote>
+}
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export interface MarketFeedActions {
+  toggle: () => void
+  setInstrumentCount: (count: number) => void
+  setTargetRate: (rate: number) => void
+  setPublishInterval: (intervalMs: number) => void
+  setSparklineUpdates: (enabled: boolean) => void
+  setSparklineSampleInterval: (intervalMs: number) => void
+  runBurst: () => void
+  reset: () => void
+}
+
+const initialState: MarketFeedState = {
+  workerReady: false,
+  running: true,
+  instrumentCount: initialMarketFeedConfig.instrumentCount,
+  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  quotes: [],
+}
+
+export class MarketFeedController {
+  readonly store = createStore<MarketFeedState>(initialState)
+  readonly actions: MarketFeedActions
+  readonly #observers = new Set<MarketFeedObserver>()
+  readonly #runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+    quoteIndexBySymbol: new Map<string, number>(),
+  }
+
+  constructor() {
+    this.actions = {
+      toggle: () => {
+        const running = !this.store.get().running
+        this.#patch({ running })
+        this.#post({ type: 'set-running', running })
+      },
+      setInstrumentCount: (count) => {
+        this.#patch({ instrumentCount: count })
+        this.#resetWorker(count)
+      },
+      setTargetRate: (rate) => {
+        const sampleRate = normalizeFeedSampleRate(rate)
+        this.#patch({
+          targetTicksPerSecond: sampleRate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
+      },
+      setPublishInterval: (publishIntervalMs) => {
+        this.#patch({ publishIntervalMs })
+        this.#post({
+          type: 'set-publish-interval',
+          intervalMs: publishIntervalMs,
+        })
+      },
+      setSparklineUpdates: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#post({ type: 'set-sparklines', enabled })
+      },
+      setSparklineSampleInterval: (intervalMs) => {
+        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.#post({ type: 'set-sparkline-interval', intervalMs })
+      },
+      runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
+      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.#runtime.worker = worker
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    const state = this.store.get()
+    this.#post({
+      type: 'start',
+      rowCount: state.instrumentCount,
+      running: state.running,
+      ticksPerSecond: state.targetTicksPerSecond,
+      publishIntervalMs: state.publishIntervalMs,
+      updateSparklines: state.updateSparklines,
+      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+    })
+    return () => this.stop()
+  }
+
+  stop(): void {
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#observers.clear()
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  getQuoteBySymbol(
+    quotes: Array<MarketQuote>,
+    symbol: string | null,
+  ): MarketQuote | null {
+    if (symbol === null) return null
+
+    const index = this.#runtime.quoteIndexBySymbol.get(symbol)
+    return index === undefined ? null : (quotes[index] ?? null)
+  }
+
+  completeRender(): void {
+    if (!this.#runtime.renderPending) return
+
+    this.#runtime.renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#post({ type: 'set-running', running: this.store.get().running })
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#runtime.feedSessionId = data.sessionId
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.#startMutation()
+      const quotes = hydrateMarketQuotes(data.quotes)
+      this.#runtime.quoteIndexBySymbol = new Map(
+        quotes.map((quote, index) => [quote.symbol, index]),
+      )
+      batch(() => {
+        this.#patch({
+          quotes,
+          workerReady: true,
+        })
+      })
+      return
+    }
+
+    if (data.sessionId !== this.#runtime.feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.#patch({
+      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
+    })
+    const feedBatch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(feedBatch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorker(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#post({ type: 'set-running', running: false })
+    this.#post({ type: 'reset', rowCount })
+  }
+
+  #startMutation(): void {
+    this.#runtime.renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #patch(patch: Partial<MarketFeedState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#runtime.worker?.postMessage(command)
+  }
+}
diff --git a/examples/alpine/realtime-trading/src/feed/sp500-instruments.ts b/examples/alpine/realtime-trading/src/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/alpine/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/alpine/realtime-trading/src/feed/worker/market-feed-engine.ts
new file mode 100644
index 0000000000..557f7c30a8
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -0,0 +1,177 @@
+import { globalInstruments } from '../sp500-instruments'
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #tickIndex = 0
+
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue: market,
+        previousClose,
+        open,
+        high: open,
+        low: open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: createdAt,
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
+    this.#rowCursor = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyTicks(
+    tickCount: number,
+    updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#tickIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
+    const secondMix =
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/alpine/realtime-trading/src/feed/worker/market-feed-protocol.ts b/examples/alpine/realtime-trading/src/feed/worker/market-feed-protocol.ts
new file mode 100644
index 0000000000..21997ec89c
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/feed/worker/market-feed-protocol.ts
@@ -0,0 +1,70 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  previousClose: number
+  open: number
+  high: number
+  low: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  high: number
+  low: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'start'
+      rowCount: number
+      running: boolean
+      ticksPerSecond: number
+      publishIntervalMs: number
+      updateSparklines: boolean
+      sparklineSampleIntervalMs: number
+    }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'snapshot'
+      sessionId: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/alpine/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/alpine/realtime-trading/src/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..2b7a642fd9
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -0,0 +1,143 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/alpine/realtime-trading/src/index.css b/examples/alpine/realtime-trading/src/index.css
new file mode 100644
index 0000000000..20264402de
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/index.css
@@ -0,0 +1,1048 @@
+:root {
+  color-scheme: dark;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
+  font-synthesis: none;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: var(--control-hover);
+  border-color: var(--border-strong);
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
+}
+
+.app-bar {
+  display: flex;
+  min-height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.header-actions,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: var(--muted);
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--muted);
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  grid-area: content;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.12rem 0 0.08rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
+}
+
+td {
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
+  overflow: hidden;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
+}
+
+td[data-column-id='market'] {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+td[data-column-id='name'] {
+  color: var(--text-strong);
+}
+
+td[data-column-id='symbol'] {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(even) {
+  background: var(--row-alt);
+}
+
+tbody tr:hover {
+  background: var(--panel-hover);
+}
+
+tbody tr[data-symbol-selected='true'] {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr[aria-selected='true'] {
+  background: rgb(76 145 228 / 13%);
+}
+
+td[aria-selected='true'] {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td[data-cell-focused='true'] {
+  background: rgb(70 139 222 / 21%);
+}
+
+td[aria-selected='true']::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td[data-selection-top='true']::after {
+  border-top-color: var(--blue);
+}
+
+td[data-selection-right='true']::after {
+  border-right-color: var(--blue);
+}
+
+td[data-selection-bottom='true']::after {
+  border-bottom-color: var(--blue);
+}
+
+td[data-selection-left='true']::after {
+  border-left-color: var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: var(--text);
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: var(--surface-control);
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.78;
+}
+
+.depth-bid {
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
+}
+
+.depth-ask {
+  background: var(--depth-ask);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: var(--text-strong);
+  font-size: 0.57rem;
+  text-shadow: 0 1px var(--background);
+}
+
+.quote-age {
+  color: var(--muted);
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 100%;
+  height: 1.35rem;
+  margin-left: auto;
+  color: var(--blue-soft);
+  overflow: visible;
+}
+
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: var(--surface-bar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  grid-area: footer;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
+.configurator {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.configurator > header {
+  display: flex;
+  height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  color: var(--text-strong);
+  background: var(--surface-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem var(--shell-inline-padding);
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
+}
+
+.primary-action:hover {
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text);
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.field small {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: var(--text);
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: var(--muted);
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  :root {
+    --sidebar-width: 15.625rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .trading-terminal {
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .market-panel {
+    min-height: 0;
+  }
+
+  .table-scroll {
+    min-height: 0;
+  }
+
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
+  }
+
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
+  }
+}
diff --git a/examples/alpine/realtime-trading/src/main.ts b/examples/alpine/realtime-trading/src/main.ts
new file mode 100644
index 0000000000..f0857b248d
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/main.ts
@@ -0,0 +1,122 @@
+import Alpine from 'alpinejs'
+import { FlexRender, createFilteredRowModel, createSortedRowModel, createTable, filterFn_includesString, sortFn_basic, stockFeatures, tableFeatures } from '@tanstack/alpine-table'
+import { Virtualizer, elementScroll, observeElementOffset, observeElementRect } from '@tanstack/virtual-core'
+import { TradingBenchmarkController } from './benchmark/trading-benchmark-controller'
+import { MarketFeedController } from './feed/market-feed-controller'
+import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from './feed/feed-sample-rates'
+import { configuratorOptions } from './shell/configurator-options'
+import { createTradingColumns, readMeasuredRows } from './table/table-config/trading-columns'
+import { TradingGridPointerController, handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from './table/table-interactions'
+import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode } from './table/trading-row-virtualizer'
+import './table/table-config/quote-cells'
+import './index.css'
+import type { AlpineTable } from '@tanstack/alpine-table'
+import type { VirtualItem } from '@tanstack/virtual-core'
+import type { MarketQuote } from './feed/market-data'
+
+const features = tableFeatures({ ...stockFeatures, filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(), filterFns: { includesString: filterFn_includesString }, sortFns: { basic: sortFn_basic } })
+type Table = AlpineTable<typeof features, MarketQuote>
+const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const ms = (number: number) => `${number.toFixed(2)} ms`
+
+Alpine.data('tradingApp', () => {
+  const feed = new MarketFeedController()
+  const controller = new TradingBenchmarkController(feed)
+  const local = Alpine.reactive({
+    feed: feed.store.get(), benchmark: controller.store.get(),
+    selectedSymbol: controller.renderAtoms.selectedSymbol.get(), rendererMode: controller.renderAtoms.rendererMode.get(),
+    sidebarOpen: true, virtualVersion: 0, tableVersion: 0,
+  })
+  const columns = createTradingColumns<typeof features>(() => local.rendererMode)
+  const table = createTable({
+    key: 'alpine-realtime-trading', features, columns, get data() { return local.feed.quotes },
+    getRowId: (row: MarketQuote) => row.id,
+    columnResizeMode: 'onChange', defaultColumn: { minSize: 56, maxSize: 800 }, autoResetCellSelection: false,
+  }, (state) => ({ sorting: state.sorting, columnFilters: state.columnFilters, columnOrder: state.columnOrder, rowSelection: state.rowSelection, cellSelection: state.cellSelection }))
+  const pointer = new TradingGridPointerController()
+  const runtime = {
+    virtualizer: null as Virtualizer<HTMLDivElement, HTMLTableRowElement> | null,
+    cleanups: [] as Array<() => void>, manuallyResized: false,
+    dragColumnId: null as string | null, dragSource: null as HTMLTableCellElement | null, dragTarget: null as HTMLTableCellElement | null,
+    cachedRows: [] as ReturnType<Table['getRowModel']>['rows'], cachedFeed: null as Array<MarketQuote> | null, cachedTableVersion: -1,
+  }
+  const rows = () => {
+    if (runtime.cachedFeed !== local.feed.quotes || runtime.cachedTableVersion !== local.tableVersion) {
+      runtime.cachedFeed = local.feed.quotes; runtime.cachedTableVersion = local.tableVersion; runtime.cachedRows = readMeasuredRows(() => table.getRowModel().rows)
+    }
+    return runtime.cachedRows
+  }
+  const virtualMode = () => resolveVirtualScrollMode(local.benchmark.requestedVirtualScrollMode, local.feed.instrumentCount)
+  const syncVirtualizer = () => {
+    const virtualizer = runtime.virtualizer; const currentRows = rows()
+    if (!virtualizer) return
+    virtualizer.setOptions({ ...virtualizer.options, count: currentRows.length, enabled: virtualMode() === 'tanstack', getItemKey: (index) => currentRows[index]?.id ?? index })
+    virtualizer._willUpdate()
+  }
+  const renderRows = (): Array<{ row: (typeof runtime.cachedRows)[number]; virtual: VirtualItem | null }> => {
+    void local.virtualVersion; syncVirtualizer(); const currentRows = rows()
+    const result = virtualMode() === 'tanstack' && runtime.virtualizer ? runtime.virtualizer.getVirtualItems().map((item) => ({ row: currentRows[item.index], virtual: item })) : currentRows.map((row) => ({ row, virtual: null }))
+    queueMicrotask(() => controller.actions.setRenderedRowCount(result.length))
+    return result
+  }
+  const writeSizes = (tableElement: HTMLTableElement) => { for (const header of table.getFlatHeaders()) { tableElement.style.setProperty(`--header-${header.id}-size`, String(header.getSize())); tableElement.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize())) } tableElement.style.width = `${table.getTotalSize()}px` }
+
+  return {
+    table, FlexRender, local, feed, controller, feedSampleRateOptions, configuratorOptions,
+    init(this: { $refs: Record<string, HTMLElement> }) {
+      const scroll = this.$refs.scroll as HTMLDivElement; const tableElement = this.$refs.table as HTMLTableElement
+      runtime.virtualizer = new Virtualizer({ count: 0, getScrollElement: () => scroll, estimateSize: () => TRADING_ROW_HEIGHT, overscan: TRADING_ROW_OVERSCAN, observeElementRect, observeElementOffset, scrollToFn: elementScroll, onChange: () => { local.virtualVersion++ } })
+      const stopVirtualizer = runtime.virtualizer._didMount()
+      const resizeObserver = new ResizeObserver(() => { if (runtime.manuallyResized) return; const width = table.getTotalSize(); if (scroll.clientWidth <= width + 1 || width <= 0) return; const ratio = scroll.clientWidth / width; table.setColumnSizing(Object.fromEntries(table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio]))) })
+      resizeObserver.observe(scroll)
+      const mutationObserver = new MutationObserver((records) => controller.monitor.recordDomMutations(records.length)); mutationObserver.observe(tableElement.tBodies[0], { attributes: true, characterData: true, childList: true, subtree: true })
+      const subscriptions = [
+        feed.store.subscribe((state) => { local.feed = state; Alpine.nextTick(() => feed.completeRender()) }),
+        controller.store.subscribe((state) => { local.benchmark = state }),
+        controller.renderAtoms.selectedSymbol.subscribe((symbol) => { local.selectedSymbol = symbol }),
+        controller.renderAtoms.rendererMode.subscribe((mode) => { local.rendererMode = mode; local.tableVersion++ }),
+        table.store.subscribe(() => { local.tableVersion++ }),
+        table.atoms.columnSizing.subscribe(() => writeSizes(tableElement)),
+        table.atoms.columnOrder.subscribe(() => writeSizes(tableElement)),
+        table.atoms.columnResizing.subscribe((state) => { if (state.isResizingColumn !== false) runtime.manuallyResized = true }),
+      ]
+      const stopFeed = feed.start(); const stopBenchmark = controller.start()
+      runtime.cleanups.push(stopVirtualizer, stopFeed, stopBenchmark, () => resizeObserver.disconnect(), () => mutationObserver.disconnect(), ...subscriptions.map((subscription) => () => subscription.unsubscribe()))
+      Alpine.nextTick(() => { writeSizes(tableElement); feed.completeRender() })
+    },
+    destroy() { for (const cleanup of runtime.cleanups) cleanup(); runtime.cleanups.length = 0 },
+    rows, renderRows, virtualMode,
+    tableHeight() { void local.virtualVersion; return runtime.virtualizer?.getTotalSize() ?? rows().length * TRADING_ROW_HEIGHT },
+    visibleRangeText() { void local.virtualVersion; const range = runtime.virtualizer?.range; const currentRows = rows(); if (!range || virtualMode() !== 'tanstack' || !currentRows.length) return 'Current · rows —'; return `Current · rows ${Math.min(range.startIndex, currentRows.length - 1)}..${Math.min(range.endIndex, currentRows.length - 1)}` },
+    toggleSidebar() { local.sidebarOpen = !local.sidebarOpen },
+    feedStatus() { return !local.feed.workerReady ? 'FEED CONNECTING' : local.feed.running ? 'FEED LIVE' : 'FEED PAUSED' },
+    setInstrumentCount(event: Event) { controller.actions.resetViewState(); feed.actions.setInstrumentCount(Number((event.target as HTMLSelectElement).value)) },
+    sampleRateIndex() { return feedSampleRateIndex(local.feed.targetTicksPerSecond) },
+    setSampleRate(event: Event) { feed.actions.setTargetRate(feedSampleRateAt(Number((event.target as HTMLInputElement).value))) },
+    setPublishInterval(event: Event) { feed.actions.setPublishInterval(Number((event.target as HTMLSelectElement).value)) },
+    setVirtualMode(event: Event) { controller.actions.setVirtualScrollEnabled((event.target as HTMLSelectElement).value === 'tanstack') },
+    setRendererMode(event: Event) { controller.actions.setRendererMode((event.target as HTMLInputElement).checked ? 'swap' : 'stable') },
+    setSparklineUpdates(event: Event) { feed.actions.setSparklineUpdates((event.target as HTMLInputElement).checked) },
+    setSparklineInterval(event: Event) { feed.actions.setSparklineSampleInterval(Number((event.target as HTMLSelectElement).value)) },
+    metricItems() { const metrics = local.benchmark.metrics; return [
+      ['WORKER SAMPLES', rate.format(metrics.actualTicksPerSecond), 'generated samples/s', 'actual-rate'], ['ROW UPDATES', rate.format(metrics.rowUpdatesPerSecond), 'unique rows applied/s', 'row-update-rate'], ['MESSAGES', metrics.workerMessagesPerSecond.toFixed(1), 'worker messages/s', 'message-rate'], ['STATE APPLIES', metrics.stateApplicationsPerSecond.toFixed(1), 'quote snapshots/s', 'state-apply-rate'], ['TABLE COMMITS', metrics.tableRendersPerSecond.toFixed(1), 'completed renders/s', 'table-render-rate'], ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''], ['P95 RENDER', ms(metrics.p95RenderMs), `max ${ms(metrics.maxRenderMs)}`, ''], ['LONG FRAMES', local.benchmark.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', local.benchmark.longAnimationFramesSupported ? `worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
+    ] },
+    diagnostics() { const metrics = local.benchmark.metrics; const invocation = (items: typeof metrics.cellRendererRates) => { const active = items.filter((item) => item.callsPerSecond > 0); return active.length ? active.map((item) => `${item.name} ${rate.format(item.callsPerSecond)}`).join(' · ') : '—' }; return [
+      ['Mounted cells', integer.format(local.benchmark.mountedCells), ''], ['Live components', integer.format(local.benchmark.liveComponents), ''], ['Created / destroyed', `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`, ''], ['Renderer callbacks / s', rate.format(metrics.cellRendererCallsPerSecond), 'cell-render-rate'], ['Component executions / s', rate.format(metrics.componentRenderCallsPerSecond), 'component-render-rate'], ['Executions by component / s', invocation(metrics.componentRenderRates), 'component-render-breakdown'], ['Callbacks by column / s', invocation(metrics.cellRendererRates), 'cell-render-breakdown'], ['DOM mutation records / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'], ['Core row model calls / s', metrics.rowModelCallsPerSecond.toFixed(1), 'row-model-call-rate'], ['Core row model avg / max', `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, 'row-model-duration'], ['Visible rows', integer.format(metrics.visibleRows), 'visible-row-count'], ['Worker messages', integer.format(metrics.workerMessages), 'worker-messages'], ['Worker-coalesced updates / s', rate.format(metrics.supersededUpdatesPerSecond), 'superseded-update-rate'], ['Last samples / updated rows', `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`, ''], ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''], ['JS heap', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, ''],
+    ] },
+    selectedQuote() { return feed.getQuoteBySymbol(local.feed.quotes, local.selectedSymbol) },
+    formatInteger: (number: number) => integer.format(number), formatRate: (number: number) => rate.format(number),
+    sortIndicator, sortAriaValue,
+    isTextColumn(id: string) { return ['market', 'name', 'symbol'].includes(id) },
+    onGridKeyDown(event: KeyboardEvent) { handleCellNavigation(table, event) },
+    onBodyMouseDown(event: MouseEvent) { pointer.handleMouseDown(table, event, controller.actions.selectSymbol) }, onBodyPointerOver(event: MouseEvent) { pointer.handlePointerOver(table, event) }, onBodyClick(event: MouseEvent) { pointer.handleClick(table, event) }, resetPointer() { pointer.resetPointerCell() },
+    clearDrag() { runtime.dragSource?.classList.remove('is-column-dragging'); runtime.dragTarget?.classList.remove('is-column-drop-target'); runtime.dragColumnId = null; runtime.dragSource = null; runtime.dragTarget = null },
+    dragStart(header: ReturnType<Table['getFlatHeaders']>[number], event: DragEvent) { runtime.dragColumnId = header.column.id; runtime.dragSource = (event.currentTarget as HTMLElement).closest('th'); runtime.dragSource?.classList.add('is-column-dragging'); if (event.dataTransfer) { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', header.column.id) } },
+    dragOver(header: ReturnType<Table['getFlatHeaders']>[number], event: DragEvent) { event.preventDefault(); runtime.dragTarget?.classList.remove('is-column-drop-target'); runtime.dragTarget = null; const element = (event.currentTarget as HTMLElement).closest('th'); if (runtime.dragColumnId !== header.column.id && element) { element.classList.add('is-column-drop-target'); runtime.dragTarget = element } },
+    drop(header: ReturnType<Table['getFlatHeaders']>[number], event: DragEvent) { event.preventDefault(); const source = event.dataTransfer?.getData('text/plain') || runtime.dragColumnId; if (source) table.setColumnOrder(reorderColumnIds(table.getVisibleLeafColumns().map((column) => column.id), source, header.column.id)); this.clearDrag() },
+  }
+})
+
+window.Alpine = Alpine
+Alpine.start()
diff --git a/examples/alpine/realtime-trading/src/shell/configurator-options.ts b/examples/alpine/realtime-trading/src/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/alpine/realtime-trading/src/table/table-config/quote-cells.ts b/examples/alpine/realtime-trading/src/table/table-config/quote-cells.ts
new file mode 100644
index 0000000000..5c0db04c70
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/table/table-config/quote-cells.ts
@@ -0,0 +1,57 @@
+export const quoteCellLifecycle = { created: 0, destroyed: 0 }
+export const quoteCellRendererNames = ['Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid', 'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday'] as const
+export const quoteComponentNames = ['PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell', 'PercentChangeCell', 'SparklineCell'] as const
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+const counters = <Name extends string>(names: ReadonlyArray<Name>) => Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+export const quoteRenderDiagnostics = { cellRendererCalls: 0, componentRenderCalls: 0, cellRendererCallsByName: counters(quoteCellRendererNames), componentRenderCallsByName: counters(quoteComponentNames) }
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T { quoteRenderDiagnostics.cellRendererCalls++; quoteRenderDiagnostics.cellRendererCallsByName[name]++; return value }
+const signed = (value: number) => `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+
+abstract class QuoteElement extends HTMLElement {
+  protected abstract readonly componentName: QuoteComponentName
+  connectedCallback() { quoteCellLifecycle.created++; this.renderCell() }
+  disconnectedCallback() { quoteCellLifecycle.destroyed++ }
+  attributeChangedCallback() { if (this.isConnected) this.renderCell() }
+  protected renderCell() { quoteRenderDiagnostics.componentRenderCalls++; quoteRenderDiagnostics.componentRenderCallsByName[this.componentName]++ }
+  protected number(name: string) { return Number(this.getAttribute(name) ?? 0) }
+}
+
+class PriceCell extends QuoteElement {
+  protected readonly componentName = 'PriceCell'
+  static observedAttributes = ['price', 'move']
+  protected renderCell() { super.renderCell(); const price = this.number('price'); const move = this.number('move'); this.innerHTML = `<button class="price-button ${move >= 0 ? 'quote-up' : 'quote-down'}">${price.toFixed(2)}</button>` }
+}
+abstract class MoveCell extends QuoteElement {
+  static observedAttributes = ['move']
+  protected direction: 'up' | 'down' | null = null
+  protected indicator = ''
+  protected renderCell() { super.renderCell(); const move = this.number('move'); const direction = this.direction ?? (move >= 0 ? 'up' : 'down'); this.innerHTML = `<span class="move-cell quote-${direction}">${this.indicator}${signed(move)}</span>` }
+}
+class StableMoveCell extends MoveCell { protected readonly componentName = 'StableMoveCell' }
+class UpMoveCell extends MoveCell { protected readonly componentName = 'UpMoveCell'; protected direction = 'up' as const; protected indicator = '▲ ' }
+class DownMoveCell extends MoveCell { protected readonly componentName = 'DownMoveCell'; protected direction = 'down' as const; protected indicator = '▼ ' }
+class PercentChangeCell extends QuoteElement {
+  protected readonly componentName = 'PercentChangeCell'
+  static observedAttributes = ['value']
+  protected renderCell() { super.renderCell(); const value = this.number('value'); this.innerHTML = `<span class="percent-change-cell ${value >= 0 ? 'quote-up' : 'quote-down'}">${signed(value)}%</span>` }
+}
+class SparklineCell extends QuoteElement {
+  protected readonly componentName = 'SparklineCell'
+  static observedAttributes = ['points', 'rising']
+  protected renderCell() { super.renderCell(); this.innerHTML = `<svg class="sparkline ${this.getAttribute('rising') === 'true' ? 'quote-up' : 'quote-down'}" viewBox="0 0 100 24" preserveAspectRatio="none"><polyline points="${this.getAttribute('points') ?? ''}"></polyline></svg>` }
+}
+
+const definitions = [
+  ['quote-price-cell', PriceCell], ['quote-stable-move', StableMoveCell], ['quote-up-move', UpMoveCell],
+  ['quote-down-move', DownMoveCell], ['quote-percent-change', PercentChangeCell], ['quote-sparkline', SparklineCell],
+] as const
+for (const [name, definition] of definitions) if (!customElements.get(name)) customElements.define(name, definition)
+
+export function sparklineMarkup(values: ReadonlyArray<number>): string {
+  const first = values[0] ?? 0
+  const range = values.reduce((current, value) => ({ min: Math.min(current.min, value), max: Math.max(current.max, value) }), { min: first, max: first })
+  const height = range.max - range.min || 1; const denominator = Math.max(1, values.length - 1)
+  const points = values.map((value, index) => `${((index / denominator) * 100).toFixed(1)},${(22 - ((value - range.min) / height) * 20).toFixed(1)}`).join(' ')
+  return `<quote-sparkline points="${points}" rising="${(values.at(-1) ?? 0) >= first}"></quote-sparkline>`
+}
diff --git a/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts b/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
new file mode 100644
index 0000000000..412ba2faad
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
@@ -0,0 +1,44 @@
+import { recordCellRender, sparklineMarkup } from './quote-cells'
+import type { ColumnDef, TableFeatures } from '@tanstack/alpine-table'
+import type { MarketQuote } from '../../feed/market-data'
+
+export type RendererMode = 'stable' | 'swap'
+export interface CoreTableState { sorting: Array<{ id: string; desc: boolean }>; columnFilters: Array<{ id: string; value: unknown }> }
+interface CellContext { row: { original: MarketQuote } }
+interface Definition { id: string; header: string; size?: number; columns?: Array<Definition>; accessorFn?: (row: MarketQuote) => unknown; enableSorting?: boolean; filterFn?: 'includesString'; sortFn?: 'basic'; cell?: (context: CellContext) => unknown }
+const compact = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const safe = (value: string) => value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;')
+
+export function createTradingColumns<TFeatures extends TableFeatures>(getRendererMode: () => RendererMode): Array<ColumnDef<TFeatures, MarketQuote>> {
+  const columns: Array<Definition> = [
+    { id: 'instrument', header: 'Instrument', columns: [
+      { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', safe(row.original.venue)) },
+      { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', safe(row.original.company)) },
+      { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', safe(row.original.symbol)) },
+    ] },
+    { id: 'priceAndChange', header: 'Price & Change', columns: [
+      { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: ({ row }) => recordCellRender('Last', `<quote-price-cell price="${row.original.price}" move="${getDayChange(row.original)}"></quote-price-cell>`) },
+      { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', moveMarkup(getRendererMode(), getDayChange(row.original))) },
+      { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: ({ row }) => recordCellRender('ChangePercent', `<quote-percent-change value="${getDayChangePercent(row.original)}"></quote-percent-change>`) },
+    ] },
+    { id: 'orderBook', header: 'Order Book', columns: [
+      { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
+      { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compact.format(row.original.bidSize)) },
+      { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
+      { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compact.format(row.original.askSize)) },
+    ] },
+    { id: 'session', header: 'Session', columns: [
+      { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
+      { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
+      { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
+    ] },
+    { id: 'chart', header: 'Chart', columns: [{ id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: ({ row }) => recordCellRender('Intraday', sparklineMarkup(row.original.history)) }] },
+  ]
+  return columns as unknown as Array<ColumnDef<TFeatures, MarketQuote>>
+}
+function moveMarkup(mode: RendererMode, move: number) { if (mode === 'stable') return `<quote-stable-move move="${move}"></quote-stable-move>`; return move >= 0 ? `<quote-up-move move="${move}"></quote-up-move>` : `<quote-down-move move="${move}"></quote-down-move>` }
+export const rowModelDiagnostics = { hasMeasurement: false, calls: 0, totalDurationMs: 0, maxDurationMs: 0, lastRowCount: 0 }
+export const TRADING_COLUMN_COUNT = 14
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> { const start = performance.now(); const rows = readRows(); const end = performance.now(); const duration = end - start; rowModelDiagnostics.calls++; rowModelDiagnostics.hasMeasurement = true; rowModelDiagnostics.totalDurationMs += duration; rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration); rowModelDiagnostics.lastRowCount = rows.length; try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* optional */ } return rows }
+export function getDayChange(quote: MarketQuote): number { return quote.price - quote.previousClose }
+export function getDayChangePercent(quote: MarketQuote): number { return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100 }
diff --git a/examples/alpine/realtime-trading/src/table/table-interactions.ts b/examples/alpine/realtime-trading/src/table/table-interactions.ts
new file mode 100644
index 0000000000..1df83b2484
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/table/table-interactions.ts
@@ -0,0 +1,186 @@
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Record<string, SelectableGridCell>
+}
+
+interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Record<string, SelectableGridRow>
+  }
+}
+
+interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+  })
+}
+
+export class TradingGridPointerController {
+  #lastPointerCell: HTMLTableCellElement | null = null
+
+  handleMouseDown(
+    table: TradingGridTable,
+    event: MouseEvent,
+    selectSymbol: (symbol: string) => void,
+  ): void {
+    if (event.button !== 0) return
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+
+    this.#lastPointerCell = target.element
+    selectSymbol(target.cell.row.original.symbol)
+    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+  }
+
+  handlePointerOver(table: TradingGridTable, event: MouseEvent): void {
+    if ((event.buttons & 1) === 0) {
+      this.resetPointerCell()
+      return
+    }
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target || target.element === this.#lastPointerCell) return
+
+    this.#lastPointerCell = target.element
+    target.cell.getSelectionExtendHandler()(event)
+  }
+
+  handleClick(table: TradingGridTable, event: MouseEvent): void {
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+    selectRowFromPointer(table, target.cell.row, event)
+  }
+
+  resetPointerCell(): void {
+    this.#lastPointerCell = null
+  }
+
+  #findCellTarget(
+    table: TradingGridTable,
+    path: Array<EventTarget>,
+  ): SelectionCellTarget | null {
+    for (const target of path) {
+      if (!(target instanceof HTMLTableCellElement)) continue
+
+      const columnId = target.dataset['columnId']
+      const rowId =
+        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+      if (!columnId || !rowId) return null
+
+      const row = table.getRowModel().rowsById[rowId]
+      const cell = row.getAllCellsByColumnId()[columnId]
+      return { element: target, cell }
+    }
+
+    return null
+  }
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: KeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/alpine/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/alpine/realtime-trading/src/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..d733342a00
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -0,0 +1,14 @@
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
diff --git a/examples/alpine/realtime-trading/src/table/trading-table.ts b/examples/alpine/realtime-trading/src/table/trading-table.ts
new file mode 100644
index 0000000000..3b6ca3f800
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/table/trading-table.ts
@@ -0,0 +1,3 @@
+export { TRADING_COLUMN_COUNT, rowModelDiagnostics } from './table-config/trading-columns'
+export type { CoreTableState, RendererMode } from './table-config/trading-columns'
+export type { VirtualScrollMode } from './trading-row-virtualizer'
diff --git a/examples/alpine/realtime-trading/src/vite-env.d.ts b/examples/alpine/realtime-trading/src/vite-env.d.ts
new file mode 100644
index 0000000000..99f6333028
--- /dev/null
+++ b/examples/alpine/realtime-trading/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+import type Alpine from 'alpinejs'
+
+declare global {
+  interface Window {
+    Alpine: typeof Alpine
+  }
+}
diff --git a/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts b/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..ebe0094f6d
--- /dev/null
+++ b/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,170 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the Alpine realtime trading workload', async ({ page }) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
+    await expect(table).toBeVisible()
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
+
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('row-update-rate').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('message-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    await instrumentCount.selectOption('750')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(750)
+    expect(
+      await page.evaluate(
+        () => performance.getEntriesByName('tanstack-row-model').length > 0,
+      ),
+    ).toBe(true)
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/alpine/realtime-trading/tsconfig.json b/examples/alpine/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..a91b658954
--- /dev/null
+++ b/examples/alpine/realtime-trading/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "compilerOptions": { "target": "ES2022", "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "types": ["vite/client"] },
+  "include": ["src", "tests/e2e", "vite.config.ts"]
+}
diff --git a/examples/alpine/realtime-trading/vite.config.ts b/examples/alpine/realtime-trading/vite.config.ts
new file mode 100644
index 0000000000..f8924ba6ce
--- /dev/null
+++ b/examples/alpine/realtime-trading/vite.config.ts
@@ -0,0 +1,2 @@
+import { defineConfig } from 'vite'
+export default defineConfig({ server: { port: 7784, allowedHosts: true } })
diff --git a/examples/angular/realtime-trading/README.md b/examples/angular/realtime-trading/README.md
index 31e5101bcf..3ca3e94954 100644
--- a/examples/angular/realtime-trading/README.md
+++ b/examples/angular/realtime-trading/README.md
@@ -43,11 +43,12 @@ inputs, outputs, queries and derived state; resource cleanup is registered with
 
 ## Row rendering
 
-The row count and the row-rendering control select the rendering path:
+The example starts with 100 instruments. The row count and the row-rendering
+control select the rendering path:
 
-- Below 1,500 instruments, **TanStack Virtual** can be enabled or disabled to
+- Below 250 instruments, **TanStack Virtual** can be enabled or disabled to
   compare it with **Full DOM**.
-- At 1,500 instruments or more, **TanStack Virtual** is enabled and locked. It
+- At 250 instruments or more, **TanStack Virtual** is enabled and locked. It
   mounts a keyed overscan window and positions rows with a transform.
 - Both paths apply `content-visibility: auto` and a fixed intrinsic row height;
   the Full DOM path can therefore skip offscreen browser rendering without
@@ -70,7 +71,8 @@ an external stream. Random seeds stay private to the feed engine.
 - Sparkline and quote-age toggles control high-frequency component input
   invalidation.
 - Intraday history is sampled independently per instrument in the worker. Its
-  minimum sampling interval is configurable from 100 ms to 2,000 ms.
+  sampling interval is configurable from 16 ms to 2,000 ms and defaults to
+  16 ms for the initial 100-row workload.
 
 ## Dependency resolution
 
diff --git a/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts b/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
index 8f066ef474..44fd056ea7 100644
--- a/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
+++ b/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
@@ -13,7 +13,7 @@ import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
 import type { FeedMetrics } from './benchmark-monitor'
 import type { RendererMode } from '../table/table-config/trading-column-types'
 
-const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
+const FORCED_VIRTUALIZATION_ROW_COUNT = 250
 
 @Injectable({ providedIn: 'root' })
 export class TradingBenchmarkController {
diff --git a/examples/angular/realtime-trading/src/app/feed/feed-load-profiles.ts b/examples/angular/realtime-trading/src/app/feed/feed-load-profiles.ts
deleted file mode 100644
index 417177ff0f..0000000000
--- a/examples/angular/realtime-trading/src/app/feed/feed-load-profiles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type FeedLoadProfile =
-  | 'low'
-  | 'medium'
-  | 'high'
-  | 'very-high'
-  | 'max'
-  | 'custom'
-
-export const feedLoadRates: Record<
-  Exclude<FeedLoadProfile, 'custom'>,
-  number
-> = {
-  low: 1_000,
-  medium: 5_000,
-  high: 10_000,
-  'very-high': 25_000,
-  max: 100_000,
-}
diff --git a/examples/angular/realtime-trading/src/app/feed/feed-sample-rates.ts b/examples/angular/realtime-trading/src/app/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/angular/realtime-trading/src/app/feed/market-feed-config.ts b/examples/angular/realtime-trading/src/app/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/angular/realtime-trading/src/app/feed/market-feed.service.ts b/examples/angular/realtime-trading/src/app/feed/market-feed.service.ts
index 56bc97f5af..284ba12ac9 100644
--- a/examples/angular/realtime-trading/src/app/feed/market-feed.service.ts
+++ b/examples/angular/realtime-trading/src/app/feed/market-feed.service.ts
@@ -5,9 +5,9 @@ import {
   inject,
   signal,
 } from '@angular/core'
-import { feedLoadRates } from './feed-load-profiles'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
-import type { FeedLoadProfile } from './feed-load-profiles'
 import type {
   MarketFeedCommand,
   MarketFeedEvent,
@@ -38,12 +38,15 @@ export class MarketFeedService {
 
   readonly workerReady = signal(false)
   readonly running = signal(true)
-  readonly instrumentCount = signal(250)
-  readonly feedLoadProfile = signal<FeedLoadProfile>('high')
-  readonly targetTicksPerSecond = signal(10_000)
-  readonly publishIntervalMs = signal(20)
-  readonly updateSparklines = signal(true)
-  readonly sparklineSampleIntervalMs = signal(250)
+  readonly instrumentCount = signal(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = signal(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = signal(initialMarketFeedConfig.publishIntervalMs)
+  readonly updateSparklines = signal(initialMarketFeedConfig.updateSparklines)
+  readonly sparklineSampleIntervalMs = signal(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
   readonly quotes = signal<Array<MarketQuote>>([])
 
   #feedSessionId = 0
@@ -96,18 +99,9 @@ export class MarketFeedService {
   }
 
   setTargetRate(rate: number): void {
-    this.feedLoadProfile.set('custom')
-    this.targetTicksPerSecond.set(rate)
-    this.#post({ type: 'set-rate', ticksPerSecond: rate })
-  }
-
-  setLoadProfile(profile: FeedLoadProfile): void {
-    this.feedLoadProfile.set(profile)
-    if (profile === 'custom') return
-
-    const rate = feedLoadRates[profile]
-    this.targetTicksPerSecond.set(rate)
-    this.#post({ type: 'set-rate', ticksPerSecond: rate })
+    const sampleRate = normalizeFeedSampleRate(rate)
+    this.targetTicksPerSecond.set(sampleRate)
+    this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
   }
 
   setPublishInterval(publishIntervalMs: number): void {
diff --git a/examples/angular/realtime-trading/src/app/feed/worker/market-feed.worker.ts b/examples/angular/realtime-trading/src/app/feed/worker/market-feed.worker.ts
index 7b22656f2e..2b7a642fd9 100644
--- a/examples/angular/realtime-trading/src/app/feed/worker/market-feed.worker.ts
+++ b/examples/angular/realtime-trading/src/app/feed/worker/market-feed.worker.ts
@@ -1,3 +1,4 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
 import { MarketFeedEngine } from './market-feed-engine'
 import type {
   MarketFeedCommand,
@@ -13,11 +14,11 @@ const runtime = {
   pendingCoalescedUpdateCount: 0,
   initialized: false,
   running: true,
-  ticksPerSecond: 10_000,
-  publishIntervalMs: 20,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
   publishTimerId: null as ReturnType<typeof setInterval> | null,
-  updateSparklines: true,
-  sparklineSampleIntervalMs: 250,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
   tickBudget: 0,
   lastTickAt: performance.now(),
 }
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator-options.ts b/examples/angular/realtime-trading/src/app/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.html b/examples/angular/realtime-trading/src/app/shell/configurator.html
index 465bca411c..761ecbd8ff 100644
--- a/examples/angular/realtime-trading/src/app/shell/configurator.html
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.html
@@ -11,81 +11,63 @@ <h2 id="feed-settings">FEED</h2>
     </button>
 
     <label class="field">
-      <span>Instruments</span>
+      <span>Instruments (rows)</span>
       <select
         data-testid="instrument-count-select"
         [value]="feed.instrumentCount()"
         (change)="setRowCount($event)"
       >
-        <option value="50">50</option>
-        <option value="100">100</option>
-        <option value="150">150</option>
-        <option value="250">250</option>
-        <option value="350">350</option>
-        <option value="500">500</option>
-        <option value="750">750</option>
-        <option value="1000">1,000</option>
-        <option value="1500">1,500</option>
-        <option value="2500">2,500</option>
-        <option value="5000">5,000</option>
-        <option value="1000000">1,000,000</option>
-        <option value="10000000">10,000,000</option>
+        @for (option of options.instrumentCounts; track option.value) {
+          <option [value]="option.value" [selected]="option.value === feed.instrumentCount()">
+            {{ option.label }}
+          </option>
+        }
       </select>
     </label>
 
-    <label class="field">
-      <span>Load profile</span>
-      <select
-        data-testid="load-profile-select"
-        [value]="feed.feedLoadProfile()"
-        (change)="setFeedLoadProfile($event)"
-      >
-        <option value="low">Low · 1K/s</option>
-        <option value="medium">Medium · 5K/s</option>
-        <option value="high">High · 10K/s</option>
-        <option value="very-high">Very high · 25K/s</option>
-        <option value="max">Max · 100K/s</option>
-        <option value="custom">Custom</option>
-      </select>
-      <small>High is the repeatable default; Max is intentionally saturating.</small>
-    </label>
-
     <label class="field rate-field">
       <span>
-        Worker sample generation
-        <strong>{{ formatRate(feed.targetTicksPerSecond()) }}/s</strong>
+        Synthetic quote workload
+        <strong data-testid="target-sample-rate">
+          {{ formatRate(feed.targetTicksPerSecond()) }} samples/s
+        </strong>
       </span>
       <input
         data-testid="target-rate-slider"
         type="range"
-        min="100"
-        max="100000"
-        step="100"
-        [value]="feed.targetTicksPerSecond()"
+        min="0"
+        [max]="sampleRateOptions.length - 1"
+        step="1"
+        list="worker-sample-rate-steps"
+        [value]="sampleRateIndex(feed.targetTicksPerSecond())"
+        [attr.aria-valuetext]="
+          formatRate(feed.targetTicksPerSecond()) + ' synthetic quote samples per second'
+        "
         (input)="setTargetRate($event)"
       />
+      <datalist id="worker-sample-rate-steps">
+        @for (option of sampleRateOptions; track option.value) {
+          <option [value]="$index" [label]="option.label"></option>
+        }
+      </datalist>
       <small>
-        Synthetic quote samples generated inside the worker, not browser events. Repeated
-        instruments are coalesced before each message.
+        Fixed worker-side workload levels, from 100 to 100K samples/s. Samples are coalesced; this
+        is not the message delivery rate.
       </small>
     </label>
 
     <label class="field">
-      <span>Publish interval</span>
+      <span>Worker delivery interval</span>
       <select
         data-testid="publish-interval-select"
         [value]="feed.publishIntervalMs()"
         (change)="setPublishInterval($event)"
       >
-        <option value="8">8 ms · 125 msg/s</option>
-        <option value="16">16 ms · 62.5 msg/s</option>
-        <option value="20">20 ms · 50 msg/s</option>
-        <option value="33">33 ms · 30 msg/s</option>
-        <option value="50">50 ms · 20 msg/s</option>
-        <option value="100">100 ms · 10 msg/s</option>
-        <option value="250">250 ms · 4 msg/s</option>
-        <option value="500">500 ms · 2 msg/s</option>
-        <option value="1000">1000 ms · 1 msg/s</option>
+        @for (option of options.workerDeliveryIntervals; track option.value) {
+          <option [value]="option.value" [selected]="option.value === feed.publishIntervalMs()">
+            {{ option.label }}
+          </option>
+        }
       </select>
       <small> The worker posts one coalesced update message at this target cadence. </small>
     </label>
@@ -106,27 +88,30 @@ <h2 id="render-settings">RENDER PATH</h2>
       </span>
     </label>
 
-    <label class="toggle-field" data-testid="virtual-scroll-mode">
-      <input
-        data-testid="virtual-scroll-toggle"
-        type="checkbox"
-        [checked]="controller.virtualScrollMode() === 'tanstack'"
+    <label class="field" data-testid="virtual-scroll-mode">
+      <span>Row rendering</span>
+      <select
+        data-testid="virtual-scroll-select"
+        [value]="controller.virtualScrollMode()"
         [disabled]="controller.virtualScrollForced()"
-        (change)="setVirtualScrollEnabled($event)"
-      />
-      <span>
-        Row rendering ·
-        <strong>
-          {{ controller.virtualScrollMode() === 'tanstack' ? 'TanStack Virtual' : 'Full DOM' }}
-        </strong>
-        <small>
-          @if (controller.virtualScrollForced()) {
-            Required and locked at 1,500+ instruments.
-          } @else {
-            Optional below 1,500 instruments.
-          }
-        </small>
-      </span>
+        (change)="setVirtualScrollMode($event)"
+      >
+        @for (option of options.rowRenderingModes; track option.value) {
+          <option
+            [value]="option.value"
+            [selected]="option.value === controller.virtualScrollMode()"
+          >
+            {{ option.label }}
+          </option>
+        }
+      </select>
+      <small>
+        @if (controller.virtualScrollForced()) {
+          TanStack Virtual is required and locked at 250 or more rows.
+        } @else {
+          Full DOM mounts every row; TanStack Virtual mounts only the visible window.
+        }
+      </small>
     </label>
 
     <label class="toggle-field">
@@ -154,19 +139,25 @@ <h2 id="render-settings">RENDER PATH</h2>
     </label>
 
     <label class="field">
-      <span>Intraday sample interval</span>
+      <span>Intraday chart sampling</span>
       <select
         data-testid="sparkline-sample-interval-select"
         [value]="feed.sparklineSampleIntervalMs()"
         (change)="setSparklineSampleInterval($event)"
       >
-        <option value="100">100 ms</option>
-        <option value="250">250 ms</option>
-        <option value="500">500 ms</option>
-        <option value="1000">1,000 ms</option>
-        <option value="2000">2,000 ms</option>
+        @for (option of options.intradaySamplingIntervals; track option.value) {
+          <option
+            [value]="option.value"
+            [selected]="option.value === feed.sparklineSampleIntervalMs()"
+          >
+            {{ option.label }}
+          </option>
+        }
       </select>
-      <small>Minimum time between rolling samples for the same instrument.</small>
+      <small>
+        How often each row adds a point to its sparkline. Quote generation and worker delivery are
+        unaffected.
+      </small>
     </label>
   </section>
 
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.ts b/examples/angular/realtime-trading/src/app/shell/configurator.ts
index 533a156c92..e0e58f249e 100644
--- a/examples/angular/realtime-trading/src/app/shell/configurator.ts
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.ts
@@ -1,6 +1,12 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
+import {
+  feedSampleRateAt,
+  feedSampleRateIndex,
+  feedSampleRateOptions,
+} from '../feed/feed-sample-rates'
 import { MarketFeedService } from '../feed/market-feed.service'
+import { configuratorOptions } from './configurator-options'
 import { Diagnostics } from './diagnostics'
 import { SelectedInstrument } from './selected-instrument'
 import {
@@ -9,7 +15,6 @@ import {
   inputValue,
   selectValue,
 } from './shell-formatters'
-import type { FeedLoadProfile } from '../feed/feed-load-profiles'
 
 @Component({
   selector: 'app-configurator',
@@ -21,23 +26,24 @@ export class Configurator {
   readonly controller = inject(TradingBenchmarkController)
   readonly feed = inject(MarketFeedService)
   readonly formatRate = formatRate
+  readonly options = configuratorOptions
+  readonly sampleRateOptions = feedSampleRateOptions
+  readonly sampleRateIndex = feedSampleRateIndex
 
   readonly setRowCount = (event: Event) => {
     this.controller.resetViewState()
     this.feed.setInstrumentCount(Number(selectValue(event)))
   }
   readonly setTargetRate = (event: Event) =>
-    this.feed.setTargetRate(Number(inputValue(event)))
-  readonly setFeedLoadProfile = (event: Event) =>
-    this.feed.setLoadProfile(selectValue(event) as FeedLoadProfile)
+    this.feed.setTargetRate(feedSampleRateAt(Number(inputValue(event))))
   readonly setPublishInterval = (event: Event) =>
     this.feed.setPublishInterval(Number(selectValue(event)))
   readonly setRendererMode = (event: Event) =>
     this.controller.setRendererMode(inputChecked(event))
   readonly setTableWorkerEnabled = (event: Event) =>
     this.controller.setTableWorkerEnabled(inputChecked(event))
-  readonly setVirtualScrollEnabled = (event: Event) =>
-    this.controller.setVirtualScrollEnabled(inputChecked(event))
+  readonly setVirtualScrollMode = (event: Event) =>
+    this.controller.setVirtualScrollEnabled(selectValue(event) === 'tanstack')
   readonly setSparklineUpdates = (event: Event) =>
     this.feed.setSparklineUpdates(inputChecked(event))
   readonly setSparklineSampleInterval = (event: Event) =>
diff --git a/examples/angular/realtime-trading/src/app/shell/diagnostics.ts b/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
index ef9ef54e6a..a92cda757a 100644
--- a/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
+++ b/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
@@ -43,7 +43,7 @@ import { formatInteger, formatRate } from './shell-formatters'
           </dd>
         </div>
         <div>
-          <dt>Last batch ticks / rows</dt>
+          <dt>Last message samples / updated rows</dt>
           <dd>
             {{ formatInteger(controller.metrics().lastBatchSize) }} /
             {{ formatInteger(controller.metrics().lastUpdateCount) }}
diff --git a/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts b/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
index 1498a1e9a7..52480cc385 100644
--- a/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
+++ b/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
@@ -7,7 +7,7 @@ import { formatInteger } from './shell-formatters'
   template: `
     <footer class="market-statusbar">
       <span>
-        BATCH TICKS
+        MESSAGE SAMPLES
         <strong>
           {{ formatInteger(controller.metrics().lastBatchSize) }}
         </strong>
@@ -26,8 +26,6 @@ import { formatInteger } from './shell-formatters'
         COMPONENTS
         <strong>{{ formatInteger(controller.liveComponents()) }}</strong>
       </span>
-      <span class="statusbar-spacer"></span>
-      <span>WORKER / FIXED CADENCE / IMMUTABLE</span>
     </footer>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/examples/angular/realtime-trading/src/app/shell/shell-formatters.ts b/examples/angular/realtime-trading/src/app/shell/shell-formatters.ts
index 7686f5fbaa..5526e66d53 100644
--- a/examples/angular/realtime-trading/src/app/shell/shell-formatters.ts
+++ b/examples/angular/realtime-trading/src/app/shell/shell-formatters.ts
@@ -8,8 +8,7 @@ const rateFormatter = new Intl.NumberFormat('en-US', {
 
 export const formatInteger = (value: number): string =>
   integerFormatter.format(value)
-export const formatRate = (value: number): string =>
-  rateFormatter.format(value)
+export const formatRate = (value: number): string => rateFormatter.format(value)
 export const formatMs = (value: number): string => `${value.toFixed(2)} ms`
 
 export const selectValue = (event: Event): string =>
diff --git a/examples/angular/realtime-trading/src/app/shell/shell-header.ts b/examples/angular/realtime-trading/src/app/shell/shell-header.ts
index 3b5a47f21c..0398004644 100644
--- a/examples/angular/realtime-trading/src/app/shell/shell-header.ts
+++ b/examples/angular/realtime-trading/src/app/shell/shell-header.ts
@@ -12,28 +12,23 @@ import { MarketFeedService } from '../feed/market-feed.service'
   template: `
     <header class="app-bar">
       <div class="brand">
-        <span class="brand-mark">TT</span>
         <strong>MARKET MONITOR</strong>
-        <span class="environment">SIMULATED</span>
       </div>
       <div class="header-actions">
-        <div class="session-info">
-          <span>ANGULAR / FLEX RENDER</span>
-          <span
-            class="feed-status"
-            data-testid="feed-status"
-            [class.is-running]="feed.workerReady() && feed.running()"
-          >
-            <span class="status-dot" aria-hidden="true"></span>
-            {{
-              !feed.workerReady()
-                ? 'FEED CONNECTING'
-                : feed.running()
-                  ? 'FEED LIVE'
-                  : 'FEED PAUSED'
-            }}
-          </span>
-        </div>
+        <span
+          class="feed-status"
+          data-testid="feed-status"
+          [class.is-running]="feed.workerReady() && feed.running()"
+        >
+          <span class="status-dot" aria-hidden="true"></span>
+          {{
+            !feed.workerReady()
+              ? 'FEED CONNECTING'
+              : feed.running()
+                ? 'FEED LIVE'
+                : 'FEED PAUSED'
+          }}
+        </span>
         <button
           class="sidebar-toggle"
           type="button"
diff --git a/examples/angular/realtime-trading/src/app/shell/trading-shell.html b/examples/angular/realtime-trading/src/app/shell/trading-shell.html
index dd5d605b2c..b5c8d1345a 100644
--- a/examples/angular/realtime-trading/src/app/shell/trading-shell.html
+++ b/examples/angular/realtime-trading/src/app/shell/trading-shell.html
@@ -1,12 +1,6 @@
-<main
-  class="trading-terminal"
-  [class.is-sidebar-collapsed]="!sidebarOpen()"
->
+<main class="trading-terminal" [class.is-sidebar-collapsed]="!sidebarOpen()">
   <div class="shell-header">
-    <app-shell-header
-      [sidebarOpen]="sidebarOpen()"
-      (sidebarToggle)="toggleSidebar()"
-    />
+    <app-shell-header [sidebarOpen]="sidebarOpen()" (sidebarToggle)="toggleSidebar()" />
 
     @if (devMode) {
       <aside class="development-warning">
diff --git a/examples/angular/realtime-trading/src/app/shell/trading-shell.ts b/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
index d13505d27a..45c7ea3e3f 100644
--- a/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
+++ b/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
@@ -12,12 +12,7 @@ import { ShellHeader } from './shell-header'
 
 @Component({
   selector: 'app-trading-shell',
-  imports: [
-    Configurator,
-    MarketStatusbar,
-    MetricsStrip,
-    ShellHeader,
-  ],
+  imports: [Configurator, MarketStatusbar, MetricsStrip, ShellHeader],
   templateUrl: './trading-shell.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/examples/angular/realtime-trading/src/app/table/table-config/trading-columns.ts b/examples/angular/realtime-trading/src/app/table/table-config/trading-columns.ts
index cf3278ca26..cdad8d3657 100644
--- a/examples/angular/realtime-trading/src/app/table/table-config/trading-columns.ts
+++ b/examples/angular/realtime-trading/src/app/table/table-config/trading-columns.ts
@@ -25,163 +25,150 @@ export function createTradingColumns(
       header: 'Instrument',
       columns: [
         {
-          id: 'identity',
-          header: 'Identity',
-          columns: [
-            {
-              id: 'market',
-              header: 'Market',
-              size: 72,
-              accessorFn: (row) => row.venue,
-              cell: ({ row }) => row.original.venue,
-            },
-            {
-              id: 'name',
-              header: 'Name',
-              size: 180,
-              accessorFn: (row) => row.company,
-              cell: ({ row }) => row.original.company,
-            },
-            {
-              id: 'symbol',
-              header: 'Symbol',
-              size: 92,
-              accessorFn: (row) => row.symbol,
-              cell: ({ row }) => row.original.symbol,
-            },
-          ],
+          id: 'market',
+          header: 'Market',
+          size: 72,
+          accessorFn: (row) => row.venue,
+          cell: ({ row }) => row.original.venue,
+        },
+        {
+          id: 'name',
+          header: 'Name',
+          size: 180,
+          accessorFn: (row) => row.company,
+          cell: ({ row }) => row.original.company,
+        },
+        {
+          id: 'symbol',
+          header: 'Symbol',
+          size: 92,
+          accessorFn: (row) => row.symbol,
+          cell: ({ row }) => row.original.symbol,
         },
       ],
     },
     {
-      id: 'marketData',
-      header: 'Market Data',
+      id: 'priceAndChange',
+      header: 'Price & Change',
       columns: [
         {
-          id: 'priceAndChange',
-          header: 'Price & Change',
-          columns: [
-            {
-              id: 'price',
-              header: 'Price',
-              size: 96,
-              accessorFn: (row) => row.price,
-              cell: ({ row }) => {
-                const change = getDayChange(row.original)
-                return flexRenderComponent(PriceCell, {
-                  inputs: { price: row.original.price, move: change },
-                  outputs: {
-                    select: () => state.selectSymbol(row.original.symbol),
-                  },
-                })
+          id: 'price',
+          header: 'Price',
+          size: 96,
+          accessorFn: (row) => row.price,
+          cell: ({ row }) => {
+            const change = getDayChange(row.original)
+            return flexRenderComponent(PriceCell, {
+              inputs: { price: row.original.price, move: change },
+              outputs: {
+                select: () => state.selectSymbol(row.original.symbol),
               },
-            },
-            {
-              id: 'change',
-              header: 'Chg',
-              size: 94,
-              accessorFn: (row) => getDayChange(row),
-              cell: ({ row }) => {
-                const move = getDayChange(row.original)
-                if (state.rendererMode() === 'stable') {
-                  return flexRenderComponent(StableMoveCell, {
-                    inputs: { move },
-                  })
-                }
-                return flexRenderComponent(
-                  move >= 0 ? UpMoveCell : DownMoveCell,
-                  { inputs: { move } },
-                )
-              },
-            },
-            {
-              id: 'changePercent',
-              header: 'Chg%',
-              size: 90,
-              accessorFn: (row) => getDayChangePercent(row),
-              cell: ({ row }) =>
-                flexRenderComponent(PercentChangeCell, {
-                  inputs: { value: getDayChangePercent(row.original) },
-                }),
-            },
-          ],
+            })
+          },
+        },
+        {
+          id: 'change',
+          header: 'Chg',
+          size: 94,
+          accessorFn: (row) => getDayChange(row),
+          cell: ({ row }) => {
+            const move = getDayChange(row.original)
+            if (state.rendererMode() === 'stable') {
+              return flexRenderComponent(StableMoveCell, {
+                inputs: { move },
+              })
+            }
+            return flexRenderComponent(move >= 0 ? UpMoveCell : DownMoveCell, {
+              inputs: { move },
+            })
+          },
+        },
+        {
+          id: 'changePercent',
+          header: 'Chg%',
+          size: 90,
+          accessorFn: (row) => getDayChangePercent(row),
+          cell: ({ row }) =>
+            flexRenderComponent(PercentChangeCell, {
+              inputs: { value: getDayChangePercent(row.original) },
+            }),
+        },
+      ],
+    },
+    {
+      id: 'orderBook',
+      header: 'Order Book',
+      columns: [
+        {
+          id: 'bid',
+          header: 'Bid',
+          size: 90,
+          accessorFn: (row) => row.bid,
+          cell: ({ row }) => row.original.bid.toFixed(2),
         },
         {
-          id: 'orderBook',
-          header: 'Order Book',
-          columns: [
-            {
-              id: 'bid',
-              header: 'Bid',
-              size: 90,
-              accessorFn: (row) => row.bid,
-              cell: ({ row }) => row.original.bid.toFixed(2),
-            },
-            {
-              id: 'bidSize',
-              header: 'Bid Vol',
-              size: 100,
-              accessorFn: (row) => row.bidSize,
-              cell: ({ row }) => compactFormatter.format(row.original.bidSize),
-            },
-            {
-              id: 'ask',
-              header: 'Ask',
-              size: 90,
-              accessorFn: (row) => row.ask,
-              cell: ({ row }) => row.original.ask.toFixed(2),
-            },
-            {
-              id: 'askSize',
-              header: 'Ask Vol',
-              size: 100,
-              accessorFn: (row) => row.askSize,
-              cell: ({ row }) => compactFormatter.format(row.original.askSize),
-            },
-          ],
+          id: 'bidSize',
+          header: 'Bid Vol',
+          size: 100,
+          accessorFn: (row) => row.bidSize,
+          cell: ({ row }) => compactFormatter.format(row.original.bidSize),
         },
         {
-          id: 'session',
-          header: 'Session',
-          columns: [
-            {
-              id: 'open',
-              header: 'Open',
-              size: 90,
-              accessorFn: (row) => row.open,
-              cell: ({ row }) => row.original.open.toFixed(2),
-            },
-            {
-              id: 'high',
-              header: 'High',
-              size: 90,
-              accessorFn: (row) => row.high,
-              cell: ({ row }) => row.original.high.toFixed(2),
-            },
-            {
-              id: 'low',
-              header: 'Low',
-              size: 90,
-              accessorFn: (row) => row.low,
-              cell: ({ row }) => row.original.low.toFixed(2),
-            },
-          ],
+          id: 'ask',
+          header: 'Ask',
+          size: 90,
+          accessorFn: (row) => row.ask,
+          cell: ({ row }) => row.original.ask.toFixed(2),
         },
         {
-          id: 'chart',
-          header: 'Chart',
-          columns: [
-            {
-              id: 'history',
-              header: 'Intraday',
-              size: 150,
-              enableSorting: false,
-              cell: ({ row }) =>
-                flexRenderComponent(SparklineCell, {
-                  inputs: { values: row.original.history },
-                }),
-            },
-          ],
+          id: 'askSize',
+          header: 'Ask Vol',
+          size: 100,
+          accessorFn: (row) => row.askSize,
+          cell: ({ row }) => compactFormatter.format(row.original.askSize),
+        },
+      ],
+    },
+    {
+      id: 'session',
+      header: 'Session',
+      columns: [
+        {
+          id: 'open',
+          header: 'Open',
+          size: 90,
+          accessorFn: (row) => row.open,
+          cell: ({ row }) => row.original.open.toFixed(2),
+        },
+        {
+          id: 'high',
+          header: 'High',
+          size: 90,
+          accessorFn: (row) => row.high,
+          cell: ({ row }) => row.original.high.toFixed(2),
+        },
+        {
+          id: 'low',
+          header: 'Low',
+          size: 90,
+          accessorFn: (row) => row.low,
+          cell: ({ row }) => row.original.low.toFixed(2),
+        },
+      ],
+    },
+    {
+      id: 'chart',
+      header: 'Chart',
+      columns: [
+        {
+          id: 'history',
+          header: 'Intraday',
+          size: 150,
+          enableSorting: false,
+          cell: ({ row }) =>
+            flexRenderComponent(SparklineCell, {
+              inputs: { values: row.original.history },
+            }),
         },
       ],
     },
diff --git a/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts b/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
index bb314e26a7..2329bef2c1 100644
--- a/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
+++ b/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
@@ -14,7 +14,7 @@ const TANSTACK_OVERSCAN = 10
 
 export type VirtualScrollMode = 'tanstack' | 'none'
 
-interface TradingRowIdentity {
+interface TradingVirtualRow {
   id: string
 }
 
@@ -43,7 +43,7 @@ function injectLocalDomFlush() {
   }
 }
 
-export function injectTradingRowVirtualizer<TRow extends TradingRowIdentity>(
+export function injectTradingRowVirtualizer<TRow extends TradingVirtualRow>(
   rows: Signal<ReadonlyArray<TRow>>,
   mode: Signal<VirtualScrollMode>,
   tanStackScrollContainer: Signal<ElementRef<HTMLDivElement> | undefined>,
diff --git a/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.ts b/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.ts
index d3d964559a..d0fc7df5d8 100644
--- a/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.ts
+++ b/examples/angular/realtime-trading/src/app/table/view/trading-header-cell.ts
@@ -40,7 +40,7 @@ export class TradingHeaderCell {
 
   readonly isGroup = computed(() => this.header().subHeaders.length > 0)
   readonly isNumeric = computed(
-    () => !this.isGroup() && !isIdentityColumn(this.header().column.id),
+    () => !this.isGroup() && !isTextColumn(this.header().column.id),
   )
   readonly width = computed(
     () => `calc(var(--header-${this.header().id}-size) * 1px)`,
@@ -59,6 +59,6 @@ export class TradingHeaderCell {
   }
 }
 
-function isIdentityColumn(columnId: string): boolean {
+function isTextColumn(columnId: string): boolean {
   return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
 }
diff --git a/examples/angular/realtime-trading/src/styles.css b/examples/angular/realtime-trading/src/styles.css
index f2abf66c45..6157e9527d 100644
--- a/examples/angular/realtime-trading/src/styles.css
+++ b/examples/angular/realtime-trading/src/styles.css
@@ -144,7 +144,6 @@ select {
 
 .brand,
 .header-actions,
-.session-info,
 .feed-status {
   display: flex;
   align-items: center;
@@ -155,31 +154,6 @@ select {
   color: var(--text-strong);
 }
 
-.brand-mark {
-  display: grid;
-  width: 24px;
-  height: 24px;
-  place-items: center;
-  color: var(--text-inverse);
-  background: var(--surface-control);
-  border: 1px solid var(--border-strong);
-  font-size: 0.62rem;
-  font-weight: 800;
-}
-
-.environment {
-  padding: 0.16rem 0.3rem;
-  color: var(--amber);
-  background: color-mix(in srgb, var(--amber) 8%, transparent);
-  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
-  font-size: 0.58rem;
-}
-
-.session-info {
-  gap: 1rem;
-  color: var(--muted);
-}
-
 .header-actions {
   gap: 0.75rem;
 }
@@ -850,10 +824,6 @@ app-sparkline-cell {
   font-weight: 500;
 }
 
-.statusbar-spacer {
-  flex: 1;
-}
-
 .sidebar-slot {
   width: var(--sidebar-width);
   min-width: 0;
@@ -1007,6 +977,21 @@ input[type='range'] {
   border-bottom: 0;
 }
 
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
 dt {
   color: var(--muted);
   font-size: 0.61rem;
@@ -1062,10 +1047,6 @@ dd {
     overflow: hidden;
   }
 
-  .session-info > span:first-child {
-    display: none;
-  }
-
   .market-panel {
     min-height: 0;
   }
diff --git a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
index 16722d9295..5baeb90c1c 100644
--- a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
@@ -25,41 +25,33 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
 
     const table = page.getByTestId('trading-table')
     const instrumentCount = page.getByTestId('instrument-count-select')
-    const virtualScrollMode = page.getByTestId('virtual-scroll-mode')
-    const virtualScrollToggle = page.getByTestId('virtual-scroll-toggle')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
     await expect(table).toBeVisible()
-    await instrumentCount.selectOption('250')
-    await expect(virtualScrollMode).toContainText('Full DOM')
-    await expect(virtualScrollToggle).toBeEnabled()
-    await expect(virtualScrollToggle).not.toBeChecked()
-    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
-    await virtualScrollToggle.check()
-    await expect(virtualScrollMode).toContainText('TanStack Virtual')
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
-    await virtualScrollToggle.uncheck()
-    await expect(virtualScrollMode).toContainText('Full DOM')
-    await instrumentCount.selectOption('1000')
-    await expect(virtualScrollMode).toContainText('Full DOM')
-    await expect(table.locator('tbody tr')).toHaveCount(1_000)
-    await instrumentCount.selectOption('1500')
-    await expect(virtualScrollMode).toContainText('TanStack Virtual')
-    await expect(virtualScrollToggle).toBeChecked()
-    await expect(virtualScrollToggle).toBeDisabled()
-    await expect
-      .poll(() => table.locator('tbody tr').count())
-      .toBeLessThan(1_500)
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 1500 rows · 14 columns',
+      'Total · 250 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
@@ -81,10 +73,15 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
     )
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('100')
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
-    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
     await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
     await expect(table.locator('thead')).toContainText('Market')
     await expect(table.locator('thead')).toContainText('Bid Vol')
     await expect(table.locator('thead')).toContainText('Intraday')
@@ -122,19 +119,28 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
     await expect(instrumentCount.locator('option[value="1500"]')).toHaveCount(1)
 
-    const loadProfile = page.getByTestId('load-profile-select')
-    await expect(loadProfile).toHaveValue('high')
-    await loadProfile.selectOption('very-high')
-    await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
-    await loadProfile.selectOption('high')
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
 
     const sparklineInterval = page.getByTestId(
       'sparkline-sample-interval-select',
     )
-    await expect(sparklineInterval).toHaveValue('250')
-    await sparklineInterval.selectOption('500')
-    await expect(sparklineInterval).toHaveValue('500')
-    await sparklineInterval.selectOption('250')
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
 
     const publishInterval = page.getByTestId('publish-interval-select')
     await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
@@ -170,13 +176,11 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await expect(tableWorker).toBeEnabled()
     await tableWorker.check()
     await expect(page.getByText('ROW MODEL WORKER ON')).toBeVisible()
-    await expect(table.locator('tbody tr')).toHaveCount(250)
-    await instrumentCount.selectOption('1500')
-    await expect
-      .poll(() => table.locator('tbody tr').count())
-      .toBeLessThan(1_500)
+    await expect(table.locator('tbody tr')).toHaveCount(100)
     await instrumentCount.selectOption('250')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await instrumentCount.selectOption('100')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
     await page.getByTestId('feed-toggle').click()
     await expect
       .poll(() =>
@@ -192,18 +196,16 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await tableWorker.uncheck()
 
     await expect(tableWorker).toBeEnabled()
-    await instrumentCount.selectOption('1500')
-    await expect
-      .poll(() => table.locator('tbody tr').count())
-      .toBeLessThan(1_500)
+    await instrumentCount.selectOption('250')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     const firstPrice = table.locator('tbody tr').first().getByRole('button')
     const priceBeforeUpdate = await firstPrice.textContent()
     await expect
       .poll(() => firstPrice.textContent())
       .not.toBe(priceBeforeUpdate)
-    await instrumentCount.selectOption('250')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await instrumentCount.selectOption('100')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
 
     await page
       .getByLabel(
diff --git a/examples/ember/realtime-trading/README.md b/examples/ember/realtime-trading/README.md
new file mode 100644
index 0000000000..5437511fd5
--- /dev/null
+++ b/examples/ember/realtime-trading/README.md
@@ -0,0 +1,11 @@
+# Ember realtime trading
+
+Standalone realtime market-grid benchmark for the TanStack Ember Table adapter.
+It mirrors the same feed, controls, table features, diagnostics, and row
+rendering modes used by the other framework examples.
+
+```bash
+pnpm dev
+pnpm test:types
+pnpm build
+```
diff --git a/examples/ember/realtime-trading/app/app.css b/examples/ember/realtime-trading/app/app.css
new file mode 100644
index 0000000000..20264402de
--- /dev/null
+++ b/examples/ember/realtime-trading/app/app.css
@@ -0,0 +1,1048 @@
+:root {
+  color-scheme: dark;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
+  font-synthesis: none;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: var(--control-hover);
+  border-color: var(--border-strong);
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
+}
+
+.app-bar {
+  display: flex;
+  min-height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.header-actions,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: var(--muted);
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--muted);
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  grid-area: content;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.12rem 0 0.08rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
+}
+
+td {
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
+  overflow: hidden;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
+}
+
+td[data-column-id='market'] {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+td[data-column-id='name'] {
+  color: var(--text-strong);
+}
+
+td[data-column-id='symbol'] {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(even) {
+  background: var(--row-alt);
+}
+
+tbody tr:hover {
+  background: var(--panel-hover);
+}
+
+tbody tr[data-symbol-selected='true'] {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr[aria-selected='true'] {
+  background: rgb(76 145 228 / 13%);
+}
+
+td[aria-selected='true'] {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td[data-cell-focused='true'] {
+  background: rgb(70 139 222 / 21%);
+}
+
+td[aria-selected='true']::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td[data-selection-top='true']::after {
+  border-top-color: var(--blue);
+}
+
+td[data-selection-right='true']::after {
+  border-right-color: var(--blue);
+}
+
+td[data-selection-bottom='true']::after {
+  border-bottom-color: var(--blue);
+}
+
+td[data-selection-left='true']::after {
+  border-left-color: var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: var(--text);
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: var(--surface-control);
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.78;
+}
+
+.depth-bid {
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
+}
+
+.depth-ask {
+  background: var(--depth-ask);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: var(--text-strong);
+  font-size: 0.57rem;
+  text-shadow: 0 1px var(--background);
+}
+
+.quote-age {
+  color: var(--muted);
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 100%;
+  height: 1.35rem;
+  margin-left: auto;
+  color: var(--blue-soft);
+  overflow: visible;
+}
+
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: var(--surface-bar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  grid-area: footer;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
+.configurator {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.configurator > header {
+  display: flex;
+  height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  color: var(--text-strong);
+  background: var(--surface-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem var(--shell-inline-padding);
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
+}
+
+.primary-action:hover {
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text);
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.field small {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: var(--text);
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: var(--muted);
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  :root {
+    --sidebar-width: 15.625rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .trading-terminal {
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .market-panel {
+    min-height: 0;
+  }
+
+  .table-scroll {
+    min-height: 0;
+  }
+
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
+  }
+
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
+  }
+}
diff --git a/examples/ember/realtime-trading/app/app.ts b/examples/ember/realtime-trading/app/app.ts
new file mode 100644
index 0000000000..253a0de562
--- /dev/null
+++ b/examples/ember/realtime-trading/app/app.ts
@@ -0,0 +1,22 @@
+/**
+ * Looking for services that come from addons?
+ *
+ * See: https://github.com/embroider-build/embroider/issues/2659
+ *
+ * We currently don't support app-tree merging from libraries.
+ *
+ * For services, I highly recommend looking into either of
+ * - https://github.com/chancancode/ember-polaris-service-
+ * - https://ember-primitives.pages.dev/6-utils/createService.md
+ *   - https://ember-primitives.pages.dev/6-utils/createAsyncService.md
+ */
+import Application from 'ember-strict-application-resolver'
+import './app.css'
+
+export default class App extends Application {
+  modules = {
+    ...import.meta.glob('./router.*', { eager: true }),
+    ...import.meta.glob('./templates/**/*', { eager: true }),
+    ...import.meta.glob('./services/**/*', { eager: true }),
+  }
+}
diff --git a/examples/ember/realtime-trading/app/benchmark/benchmark-monitor.ts b/examples/ember/realtime-trading/app/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..7f4ffe45fa
--- /dev/null
+++ b/examples/ember/realtime-trading/app/benchmark/benchmark-monitor.ts
@@ -0,0 +1,368 @@
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells.gts'
+import { rowModelDiagnostics } from '../table/trading-table'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+  rowModelCallsPerSecond: number
+  rowModelAverageMs: number
+  rowModelMaxMs: number
+  visibleRows: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+  rowModelCallsPerSecond: 0,
+  rowModelAverageMs: 0,
+  rowModelMaxMs: 0,
+  visibleRows: 0,
+}
+
+const userTiming = { entryCount: 0 }
+
+export function recordMeasure(
+  name: string,
+  start: number,
+  end: number,
+  detail: Record<string, unknown>,
+): void {
+  try {
+    performance.measure(name, { start, end, detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('market-update-to-layout-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
+export function markBenchmarkAction(
+  name: string,
+  detail: Record<string, unknown> = {},
+): void {
+  try {
+    performance.mark(`benchmark:${name}`, { detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMarks()
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    renderSamples: [] as Array<number>,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+    previousRowModelCalls: 0,
+    previousRowModelDuration: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  recordCompletedRender(): void {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      const renderEndedAt = performance.now()
+      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      recordMeasure(
+        'market-update-to-layout-commit',
+        runtime.pendingRenderStartedAt,
+        renderEndedAt,
+        {},
+      )
+      runtime.pendingRenderStartedAt = null
+      runtime.tableRendersInSample++
+    }
+  }
+
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = tickCount
+    runtime.lastUpdateCount = updateCount
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const renderSamples = runtime.renderSamples
+    const sortedRenderSamples = [...renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const rowModelCalls =
+      rowModelDiagnostics.calls - runtime.previousRowModelCalls
+    const rowModelDuration =
+      rowModelDiagnostics.totalDurationMs - runtime.previousRowModelDuration
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const averageRenderMs =
+      renderSamples.length === 0
+        ? 0
+        : renderSamples.reduce((sum, value) => sum + value, 0) /
+          renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualTicksPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+      rowModelCallsPerSecond: (rowModelCalls / sampleDuration) * 1_000,
+      rowModelAverageMs:
+        rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
+      rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
+      visibleRows: rowModelDiagnostics.lastRowCount,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.renderSamples = []
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    rowModelDiagnostics.maxDurationMs = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..316bb530e6
--- /dev/null
+++ b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,152 @@
+import { batch, createAtom, createStore } from '@tanstack/store'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from './benchmark-monitor'
+import type { FeedMetrics } from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+
+export interface TradingBenchmarkState {
+  requestedVirtualScrollMode: VirtualScrollMode
+  metrics: FeedMetrics
+  mountedCells: number
+  liveComponents: number
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  resetViewState: () => void
+  setRendererMode: (mode: RendererMode) => void
+  setVirtualScrollEnabled: (enabled: boolean) => void
+  setRenderedRowCount: (count: number) => void
+  selectSymbol: (symbol: string | null) => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  requestedVirtualScrollMode: 'none',
+  metrics: initialMetrics,
+  mountedCells: 0,
+  liveComponents: 0,
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly feed: MarketFeedController
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    stopObservingFeed: null as (() => void) | null,
+  }
+
+  constructor(feed: MarketFeedController) {
+    this.feed = feed
+    this.actions = {
+      resetViewState: () => {
+        this.renderAtoms.selectedSymbol.set(null)
+      },
+      setRendererMode: (mode) => {
+        this.renderAtoms.rendererMode.set(mode)
+      },
+      setVirtualScrollEnabled: (enabled) => {
+        if (
+          this.feed.store.get().instrumentCount >=
+          FORCED_VIRTUALIZATION_ROW_COUNT
+        ) {
+          return
+        }
+        this.#patch({
+          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
+        })
+      },
+      setRenderedRowCount: (count) => {
+        const mountedCells = count * TRADING_COLUMN_COUNT
+        if (mountedCells !== this.store.get().mountedCells) {
+          this.#patch({ mountedCells })
+        }
+      },
+      selectSymbol: (symbol) => {
+        this.renderAtoms.selectedSymbol.set(symbol)
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.store.setState((state) => ({
+            ...state,
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.feed.actions.reset()
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    this.#runtime.stopObservingFeed = this.feed.observe({
+      messageReceived: () => this.monitor.recordWorkerMessage(),
+      mutationStarted: () => this.monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+      renderCommitted: () => this.monitor.recordCompletedRender(),
+    })
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.stopObservingFeed?.()
+    this.#runtime.longAnimationFrameObserver = null
+    this.#runtime.stopObservingFeed = null
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    if (this.monitor.shouldPublish(now)) {
+      this.#publishMetrics(this.monitor.publish(now))
+    }
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    this.#patch({
+      metrics,
+      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+}
diff --git a/examples/ember/realtime-trading/app/components/shell/app-header.gts b/examples/ember/realtime-trading/app/components/shell/app-header.gts
new file mode 100644
index 0000000000..294c9140c0
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/shell/app-header.gts
@@ -0,0 +1,41 @@
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+import { on } from '@ember/modifier'
+import { observeValue } from '../../utils/subscriptions'
+import type Owner from '@ember/owner'
+import type { MarketFeedController, MarketFeedState } from '../../feed/market-feed-controller'
+
+interface Signature {
+  Args: {
+    feed: MarketFeedController
+    sidebarOpen: boolean
+    toggleSidebar: () => void
+  }
+}
+
+export default class AppHeader extends Component<Signature> {
+  @tracked feedState: MarketFeedState
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args)
+    this.feedState = args.feed.store.get()
+    observeValue(this, args.feed.store, (state) => { this.feedState = state })
+  }
+  get status() {
+    return !this.feedState.workerReady ? 'FEED CONNECTING' : this.feedState.running ? 'FEED LIVE' : 'FEED PAUSED'
+  }
+  <template>
+    <header class='app-bar'>
+      <div class='brand'><strong>MARKET MONITOR</strong></div>
+      <div class='header-actions'>
+        <span class='feed-status {{if (and this.feedState.workerReady this.feedState.running) "is-running"}}' data-testid='feed-status'>
+          <span class='status-dot' aria-hidden='true'></span>{{this.status}}
+        </span>
+        <button class='sidebar-toggle' type='button' aria-expanded={{@sidebarOpen}} aria-controls='benchmark-configurator' aria-label={{if @sidebarOpen 'Close configurator' 'Open configurator'}} {{on 'click' @toggleSidebar}}>
+          <svg viewBox='0 0 20 20' aria-hidden='true'><rect x='2.5' y='3' width='15' height='14' rx='1.5'></rect><path d='M12.5 3v14'></path></svg>
+        </button>
+      </div>
+    </header>
+  </template>
+}
+
+const and = (left: boolean, right: boolean): boolean => left && right
diff --git a/examples/ember/realtime-trading/app/components/shell/configurator-options.ts b/examples/ember/realtime-trading/app/components/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/ember/realtime-trading/app/components/shell/configurator.gts b/examples/ember/realtime-trading/app/components/shell/configurator.gts
new file mode 100644
index 0000000000..b3bcd23a01
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/shell/configurator.gts
@@ -0,0 +1,102 @@
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+import { on } from '@ember/modifier'
+import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from '../../feed/feed-sample-rates'
+import { FORCED_VIRTUALIZATION_ROW_COUNT, resolveVirtualScrollMode } from '../../table/trading-row-virtualizer'
+import { observeValue } from '../../utils/subscriptions'
+import { configuratorOptions } from './configurator-options'
+import Diagnostics from './diagnostics.gts'
+import SelectedInstrument from './selected-instrument.gts'
+import type Owner from '@ember/owner'
+import type { MarketFeedController, MarketFeedState } from '../../feed/market-feed-controller'
+import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+import type { RendererMode } from '../../table/trading-table'
+
+interface Signature { Args: { controller: TradingBenchmarkController; feed: MarketFeedController } }
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+
+export default class Configurator extends Component<Signature> {
+  readonly feedSampleRateOptions = feedSampleRateOptions
+  readonly options = configuratorOptions
+  @tracked feedState: MarketFeedState
+  @tracked benchmark: TradingBenchmarkState
+  @tracked rendererMode: RendererMode
+
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args)
+    this.feedState = args.feed.store.get()
+    this.benchmark = args.controller.store.get()
+    this.rendererMode = args.controller.renderAtoms.rendererMode.get()
+    observeValue(this, args.feed.store, (state) => { this.feedState = state })
+    observeValue(this, args.controller.store, (state) => { this.benchmark = state })
+    observeValue(this, args.controller.renderAtoms.rendererMode, (mode) => { this.rendererMode = mode })
+  }
+
+  get virtualForced() { return this.feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT }
+  get virtualMode() { return resolveVirtualScrollMode(this.benchmark.requestedVirtualScrollMode, this.feedState.instrumentCount) }
+  get sampleRateIndex() { return feedSampleRateIndex(this.feedState.targetTicksPerSecond) }
+  get sampleRateLabel() { return `${rate.format(this.feedState.targetTicksPerSecond)} samples/s` }
+  get virtualDescription() { return this.virtualForced ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.' }
+
+  setInstrumentCount = (event: Event) => {
+    this.args.controller.actions.resetViewState()
+    this.args.feed.actions.setInstrumentCount(numberValue(event))
+  }
+  setSampleRate = (event: Event) => { this.args.feed.actions.setTargetRate(feedSampleRateAt(numberValue(event))) }
+  setPublishInterval = (event: Event) => { this.args.feed.actions.setPublishInterval(numberValue(event)) }
+  setVirtualMode = (event: Event) => { this.args.controller.actions.setVirtualScrollEnabled(selectValue(event) === 'tanstack') }
+  setRendererMode = (event: Event) => { this.args.controller.actions.setRendererMode(checked(event) ? 'swap' : 'stable') }
+  setSparklineUpdates = (event: Event) => { this.args.feed.actions.setSparklineUpdates(checked(event)) }
+  setSparklineInterval = (event: Event) => { this.args.feed.actions.setSparklineSampleInterval(numberValue(event)) }
+
+  <template>
+    <aside id='benchmark-configurator' class='configurator' aria-label='Benchmark configurator'>
+      <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+      <section class='config-section' aria-labelledby='feed-settings'>
+        <h2 id='feed-settings'>FEED</h2>
+        <button class='primary-action' type='button' data-testid='feed-toggle' {{on 'click' @feed.actions.toggle}}>{{if this.feedState.running 'PAUSE FEED' 'START FEED'}}</button>
+        <label class='field'><span>Instruments (rows)</span>
+          <select data-testid='instrument-count-select' value={{this.feedState.instrumentCount}} {{on 'change' this.setInstrumentCount}}>
+            {{#each this.options.instrumentCounts as |item|}}<option value={{optionValue item}} selected={{eq (optionValue item) this.feedState.instrumentCount}}>{{optionLabel item}}</option>{{/each}}
+          </select>
+        </label>
+        <label class='field rate-field'><span>Synthetic quote workload <strong data-testid='target-sample-rate'>{{this.sampleRateLabel}}</strong></span>
+          <input data-testid='target-rate-slider' type='range' min='0' max={{subtract this.feedSampleRateOptions.length 1}} step='1' value={{this.sampleRateIndex}} {{on 'change' this.setSampleRate}} />
+          <small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small>
+        </label>
+        <label class='field'><span>Worker delivery interval</span>
+          <select data-testid='publish-interval-select' value={{this.feedState.publishIntervalMs}} {{on 'change' this.setPublishInterval}}>
+            {{#each this.options.workerDeliveryIntervals as |item|}}<option value={{optionValue item}} selected={{eq (optionValue item) this.feedState.publishIntervalMs}}>{{optionLabel item}}</option>{{/each}}
+          </select>
+          <small>One coalesced worker message at this target cadence.</small>
+        </label>
+      </section>
+      <section class='config-section' aria-labelledby='render-settings'>
+        <h2 id='render-settings'>RENDER PATH</h2>
+        <label class='field' data-testid='virtual-scroll-mode'><span>Row rendering</span>
+          <select data-testid='virtual-scroll-select' value={{this.virtualMode}} disabled={{this.virtualForced}} {{on 'change' this.setVirtualMode}}>
+            {{#each this.options.rowRenderingModes as |item|}}<option value={{optionValue item}} selected={{eq (optionValue item) this.virtualMode}}>{{optionLabel item}}</option>{{/each}}
+          </select><small>{{this.virtualDescription}}</small>
+        </label>
+        <label class='toggle-field'><input type='checkbox' checked={{eq this.rendererMode 'swap'}} {{on 'change' this.setRendererMode}} /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
+        <label class='toggle-field'><input type='checkbox' checked={{this.feedState.updateSparklines}} {{on 'change' this.setSparklineUpdates}} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
+        <label class='field'><span>Intraday chart sampling</span>
+          <select data-testid='sparkline-sample-interval-select' value={{this.feedState.sparklineSampleIntervalMs}} {{on 'change' this.setSparklineInterval}}>
+            {{#each this.options.intradaySamplingIntervals as |item|}}<option value={{optionValue item}} selected={{eq (optionValue item) this.feedState.sparklineSampleIntervalMs}}>{{optionLabel item}}</option>{{/each}}
+          </select>
+        </label>
+      </section>
+      <section class='config-section' aria-labelledby='stress-actions'><h2 id='stress-actions'>STRESS ACTIONS</h2><div class='action-grid'><button type='button' {{on 'click' @feed.actions.runBurst}}>RUN 25K BURST</button><button type='button' {{on 'click' @controller.actions.resetMarket}}>RESET SESSION</button></div></section>
+      <Diagnostics @controller={{@controller}} />
+      <SelectedInstrument @controller={{@controller}} @feed={{@feed}} />
+    </aside>
+  </template>
+}
+
+const selectValue = (event: Event): string => (event.target as HTMLInputElement | HTMLSelectElement).value
+const numberValue = (event: Event): number => Number(selectValue(event))
+const checked = (event: Event): boolean => (event.target as HTMLInputElement).checked
+const subtract = (left: number, right: number): number => left - right
+const eq = (left: unknown, right: unknown): boolean => left === right
+const optionValue = (option: { readonly value: number | string }): number | string => option.value
+const optionLabel = (option: { readonly label: string }): string => option.label
diff --git a/examples/ember/realtime-trading/app/components/shell/diagnostics.gts b/examples/ember/realtime-trading/app/components/shell/diagnostics.gts
new file mode 100644
index 0000000000..bf7000bef9
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/shell/diagnostics.gts
@@ -0,0 +1,52 @@
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+import { observeValue } from '../../utils/subscriptions'
+import type Owner from '@ember/owner'
+import type { NamedInvocationRate } from '../../benchmark/benchmark-monitor'
+import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+
+interface Signature { Args: { controller: TradingBenchmarkController } }
+const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const ms = (value: number): string => `${value.toFixed(2)} ms`
+const invocations = (values: ReadonlyArray<NamedInvocationRate>): string => {
+  const active = values.filter((entry) => entry.callsPerSecond > 0)
+  return active.length ? active.map((entry) => `${entry.name} ${rate.format(entry.callsPerSecond)}`).join(' · ') : '—'
+}
+
+export default class Diagnostics extends Component<Signature> {
+  @tracked state: TradingBenchmarkState
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args)
+    this.state = args.controller.store.get()
+    observeValue(this, args.controller.store, (state) => { this.state = state })
+  }
+  get items() {
+    const metrics = this.state.metrics
+    return [
+      { label: 'Mounted cells', value: integer.format(this.state.mountedCells), testId: '' },
+      { label: 'Live components', value: integer.format(this.state.liveComponents), testId: '' },
+      { label: 'Created / destroyed', value: `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`, testId: '' },
+      { label: 'Renderer callbacks / s', value: rate.format(metrics.cellRendererCallsPerSecond), testId: 'cell-render-rate' },
+      { label: 'Component executions / s', value: rate.format(metrics.componentRenderCallsPerSecond), testId: 'component-render-rate' },
+      { label: 'Executions by component / s', value: invocations(metrics.componentRenderRates), testId: 'component-render-breakdown' },
+      { label: 'Callbacks by column / s', value: invocations(metrics.cellRendererRates), testId: 'cell-render-breakdown' },
+      { label: 'DOM mutation records / s', value: rate.format(metrics.domMutationsPerSecond), testId: 'dom-mutation-rate' },
+      { label: 'Core row model calls / s', value: metrics.rowModelCallsPerSecond.toFixed(1), testId: 'row-model-call-rate' },
+      { label: 'Core row model avg / max', value: `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, testId: 'row-model-duration' },
+      { label: 'Visible rows', value: integer.format(metrics.visibleRows), testId: 'visible-row-count' },
+      { label: 'Worker messages', value: integer.format(metrics.workerMessages), testId: 'worker-messages' },
+      { label: 'Worker-coalesced updates / s', value: rate.format(metrics.supersededUpdatesPerSecond), testId: 'superseded-update-rate' },
+      { label: 'Last samples / updated rows', value: `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`, testId: '' },
+      { label: 'Renders > 16.7 ms', value: integer.format(metrics.slowRenders), testId: '' },
+      { label: 'JS heap', value: metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, testId: '' },
+    ]
+  }
+  <template>
+    <section class='config-section diagnostics' aria-labelledby='diagnostics'>
+      <h2 id='diagnostics'>DIAGNOSTICS</h2>
+      <dl>{{#each this.items as |item|}}<div><dt>{{item.label}}</dt><dd data-testid={{or item.testId undefined}}>{{item.value}}</dd></div>{{/each}}</dl>
+    </section>
+  </template>
+}
+const or = <T,>(left: T, right: T): T => left || right
diff --git a/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts b/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
new file mode 100644
index 0000000000..370e1dccfa
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
@@ -0,0 +1,26 @@
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+import { observeValue } from '../../utils/subscriptions'
+import type Owner from '@ember/owner'
+import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+
+interface Signature { Args: { controller: TradingBenchmarkController } }
+const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+
+export default class MarketStatusbar extends Component<Signature> {
+  @tracked state: TradingBenchmarkState
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args)
+    this.state = args.controller.store.get()
+    observeValue(this, args.controller.store, (state) => { this.state = state })
+  }
+  <template>
+    <footer class='market-statusbar'>
+      <span>MESSAGE SAMPLES <strong>{{format this.state.metrics.lastBatchSize}}</strong></span>
+      <span>ROW UPDATES <strong>{{format this.state.metrics.lastUpdateCount}}</strong></span>
+      <span>HOSTS <strong>{{format this.state.mountedCells}}</strong></span>
+      <span>COMPONENTS <strong>{{format this.state.liveComponents}}</strong></span>
+    </footer>
+  </template>
+}
+const format = (value: number): string => integer.format(value)
diff --git a/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts b/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
new file mode 100644
index 0000000000..70d43a396e
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
@@ -0,0 +1,40 @@
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+import { observeValue } from '../../utils/subscriptions'
+import type Owner from '@ember/owner'
+import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+
+interface Signature { Args: { controller: TradingBenchmarkController } }
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const ms = (value: number): string => `${value.toFixed(2)} ms`
+
+export default class MetricsStrip extends Component<Signature> {
+  @tracked state: TradingBenchmarkState
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args)
+    this.state = args.controller.store.get()
+    observeValue(this, args.controller.store, (state) => { this.state = state })
+  }
+  get items() {
+    const metrics = this.state.metrics
+    return [
+      ['WORKER SAMPLES', rate.format(metrics.actualTicksPerSecond), 'generated samples/s', 'actual-rate'],
+      ['ROW UPDATES', rate.format(metrics.rowUpdatesPerSecond), 'unique rows applied/s', 'row-update-rate'],
+      ['MESSAGES', metrics.workerMessagesPerSecond.toFixed(1), 'worker messages/s', 'message-rate'],
+      ['STATE APPLIES', metrics.stateApplicationsPerSecond.toFixed(1), 'quote snapshots/s', 'state-apply-rate'],
+      ['TABLE COMMITS', metrics.tableRendersPerSecond.toFixed(1), 'completed renders/s', 'table-render-rate'],
+      ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
+      ['P95 RENDER', ms(metrics.p95RenderMs), `max ${ms(metrics.maxRenderMs)}`, ''],
+      ['LONG FRAMES', this.state.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', this.state.longAnimationFramesSupported ? `worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
+    ] as const
+  }
+  <template>
+    <section class='metrics-strip' aria-label='Live performance metrics'>
+      {{#each this.items as |item|}}
+        <article><span>{{item.[0]}}</span><strong data-testid={{or item.[3] undefined}}>{{item.[1]}}</strong><small>{{item.[2]}}</small></article>
+      {{/each}}
+    </section>
+  </template>
+}
+
+const or = <T,>(left: T, right: T): T => left || right
diff --git a/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts b/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
new file mode 100644
index 0000000000..a38a2a9d43
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
@@ -0,0 +1,34 @@
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+import { observeValue } from '../../utils/subscriptions'
+import type Owner from '@ember/owner'
+import type { MarketQuote } from '../../feed/market-data'
+import type { MarketFeedController, MarketFeedState } from '../../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
+
+interface Signature { Args: { controller: TradingBenchmarkController; feed: MarketFeedController } }
+
+export default class SelectedInstrument extends Component<Signature> {
+  @tracked feedState: MarketFeedState
+  @tracked symbol: string | null
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args)
+    this.feedState = args.feed.store.get()
+    this.symbol = args.controller.renderAtoms.selectedSymbol.get()
+    observeValue(this, args.feed.store, (state) => { this.feedState = state })
+    observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => { this.symbol = symbol })
+  }
+  get quote(): MarketQuote | null { return this.args.feed.getQuoteBySymbol(this.feedState.quotes, this.symbol) }
+  <template>
+    <section class='config-section selected-instrument' data-testid='selected-instrument'>
+      <h2>SELECTED INSTRUMENT</h2>
+      {{#if this.quote}}
+        <div class='selection'><div><strong>{{this.quote.symbol}}</strong><span>{{this.quote.company}}</span></div><small>{{this.quote.venue}}</small></div>
+        <dl><div><dt>Last</dt><dd>{{fixed this.quote.price}}</dd></div><div><dt>Bid / ask</dt><dd>{{fixed this.quote.bid}} / {{fixed this.quote.ask}}</dd></div></dl>
+      {{else}}
+        <p>Click or begin a cell selection in any row to inspect its instrument.</p>
+      {{/if}}
+    </section>
+  </template>
+}
+const fixed = (value: number): string => value.toFixed(2)
diff --git a/examples/ember/realtime-trading/app/components/shell/trading-shell.gts b/examples/ember/realtime-trading/app/components/shell/trading-shell.gts
new file mode 100644
index 0000000000..c9d8817bcd
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/shell/trading-shell.gts
@@ -0,0 +1,34 @@
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+import { on } from '@ember/modifier'
+import AppHeader from './app-header.gts'
+import Configurator from './configurator.gts'
+import MarketStatusbar from './market-statusbar.gts'
+import MetricsStrip from './metrics-strip.gts'
+import TradingTable from '../table/trading-table.gts'
+import type { MarketFeedController } from '../../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
+
+interface Signature { Args: { controller: TradingBenchmarkController; feed: MarketFeedController } }
+
+export default class TradingShell extends Component<Signature> {
+  @tracked sidebarOpen = true
+  toggleSidebar = () => { this.sidebarOpen = !this.sidebarOpen }
+  get rootClass() { return `trading-terminal${this.sidebarOpen ? '' : ' is-sidebar-collapsed'}` }
+  <template>
+    <main class={{this.rootClass}}>
+      <div class='shell-header'>
+        <AppHeader @feed={{@feed}} @sidebarOpen={{this.sidebarOpen}} @toggleSidebar={{this.toggleSidebar}} />
+        {{#if isDevelopment}}<aside class='development-warning'>DEV BUILD — use the production build before recording results.</aside>{{/if}}
+      </div>
+      <section class='market-panel' aria-label='Live synthetic quotes'>
+        <MetricsStrip @controller={{@controller}} />
+        <TradingTable @controller={{@controller}} @feed={{@feed}} />
+      </section>
+      <MarketStatusbar @controller={{@controller}} />
+      <div class='sidebar-slot'>{{#if this.sidebarOpen}}<Configurator @controller={{@controller}} @feed={{@feed}} />{{/if}}</div>
+    </main>
+  </template>
+}
+
+const isDevelopment = import.meta.env.DEV
diff --git a/examples/ember/realtime-trading/app/components/table/trading-table.gts b/examples/ember/realtime-trading/app/components/table/trading-table.gts
new file mode 100644
index 0000000000..2330d468c1
--- /dev/null
+++ b/examples/ember/realtime-trading/app/components/table/trading-table.gts
@@ -0,0 +1,294 @@
+import Component from '@glimmer/component'
+import { tracked } from '@glimmer/tracking'
+import { on } from '@ember/modifier'
+import { htmlSafe } from '@ember/template'
+import { modifier } from 'ember-modifier'
+import {
+  FlexRenderCell,
+  FlexRenderHeader,
+  useTable,
+  type Header,
+  type Row,
+  type Table,
+} from '@tanstack/ember-table'
+import {
+  Virtualizer,
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+  type VirtualItem,
+} from '@tanstack/virtual-core'
+import { createTradingColumns, readMeasuredRows, type RendererMode } from '../../table/table-config/trading-columns.gts'
+import { tradingFeatures } from '../../table/trading-features'
+import { TradingGridPointerController, handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from '../../table/table-interactions'
+import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode } from '../../table/trading-row-virtualizer'
+import { observeValue, registerCleanup } from '../../utils/subscriptions'
+import type Owner from '@ember/owner'
+import type { MarketQuote } from '../../feed/market-data'
+import type { MarketFeedController, MarketFeedState } from '../../feed/market-feed-controller'
+import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+
+interface Signature { Args: { controller: TradingBenchmarkController; feed: MarketFeedController } }
+type TradingRow = Row<typeof tradingFeatures, MarketQuote>
+type TradingHeader = Header<typeof tradingFeatures, MarketQuote>
+interface RenderedRow {
+  row: TradingRow
+  cells: ReturnType<TradingRow['getVisibleCells']>
+  virtual: VirtualItem | null
+}
+
+const captureElement = modifier(
+  (element: HTMLElement, [capture]: [(element: HTMLElement | null) => void]) => {
+    capture(element)
+    return () => capture(null)
+  },
+)
+
+export default class TradingTable extends Component<Signature> {
+  @tracked feedState: MarketFeedState
+  @tracked benchmark: TradingBenchmarkState
+  @tracked rendererMode: RendererMode
+  @tracked selectedSymbol: string | null
+  @tracked virtualVersion = 0
+  readonly pointer = new TradingGridPointerController()
+  readonly layout = { manuallyResized: false }
+  readonly drag = {
+    columnId: null as string | null,
+    source: null as HTMLTableCellElement | null,
+    target: null as HTMLTableCellElement | null,
+  }
+  @tracked columns: ReturnType<typeof createTradingColumns>
+  scrollElement: HTMLDivElement | null = null
+  tableElement: HTMLTableElement | null = null
+  bodyElement: HTMLTableSectionElement | null = null
+  virtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement> | null = null
+  stopVirtualizer: (() => void) | null = null
+  resizeObserver: ResizeObserver | null = null
+  mutationObserver: MutationObserver | null = null
+
+  table: Table<typeof tradingFeatures, MarketQuote>
+
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args)
+    this.feedState = args.feed.store.get()
+    this.benchmark = args.controller.store.get()
+    this.rendererMode = args.controller.renderAtoms.rendererMode.get()
+    this.selectedSymbol = args.controller.renderAtoms.selectedSymbol.get()
+    this.columns = createTradingColumns(args.controller, this.rendererMode)
+    this.table = useTable(this, () => ({
+      features: tradingFeatures,
+      columns: this.columns,
+      data: this.feedState.quotes,
+      getRowId: (row: MarketQuote) => row.id,
+      columnResizeMode: 'onChange' as const,
+      defaultColumn: { minSize: 56, maxSize: 800 },
+      autoResetCellSelection: false,
+    }))
+    observeValue(this, args.feed.store, (state) => {
+      this.feedState = state
+      this.table.setOptions((options) => ({ ...options, data: state.quotes }))
+      queueMicrotask(() => args.feed.completeRender())
+    })
+    observeValue(this, args.controller.store, (state) => { this.benchmark = state })
+    observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => { this.selectedSymbol = symbol })
+    observeValue(this, args.controller.renderAtoms.rendererMode, (mode) => {
+      this.rendererMode = mode
+      this.columns = createTradingColumns(args.controller, mode)
+      this.table.setOptions((options) => ({ ...options, columns: this.columns }))
+    })
+    const sizing = this.table.atoms.columnSizing.subscribe(() => this.writeColumnSizes())
+    const order = this.table.atoms.columnOrder.subscribe(() => this.writeColumnSizes())
+    const resizing = this.table.atoms.columnResizing.subscribe((state) => {
+      if (state.isResizingColumn !== false) this.layout.manuallyResized = true
+    })
+    registerCleanup(this, () => {
+      sizing.unsubscribe()
+      order.unsubscribe()
+      resizing.unsubscribe()
+      this.stopVirtualizer?.()
+      this.resizeObserver?.disconnect()
+      this.mutationObserver?.disconnect()
+    })
+  }
+
+  get rows(): Array<TradingRow> {
+    return readMeasuredRows(() => this.table.getRowModel().rows)
+  }
+  get headerGroups() { return this.table.getHeaderGroups() }
+  get visibleLeafColumnCount() { return this.table.getVisibleLeafColumns().length }
+  get virtualMode() {
+    return resolveVirtualScrollMode(this.benchmark.requestedVirtualScrollMode, this.feedState.instrumentCount)
+  }
+  get renderedRows(): Array<RenderedRow> {
+    void this.virtualVersion
+    const rows = this.rows
+    this.syncVirtualizer(rows)
+    const result = this.virtualMode === 'tanstack' && this.virtualizer
+      ? this.virtualizer.getVirtualItems().map((item) => ({ row: rows[item.index]!, cells: rows[item.index]!.getVisibleCells(), virtual: item }))
+      : rows.map((row) => ({ row, cells: row.getVisibleCells(), virtual: null }))
+    queueMicrotask(() => this.args.controller.actions.setRenderedRowCount(result.length))
+    return result
+  }
+  get totalVirtualHeight() { void this.virtualVersion; return this.virtualizer?.getTotalSize() ?? this.rows.length * TRADING_ROW_HEIGHT }
+  get visibleRangeText() {
+    void this.virtualVersion
+    const range = this.virtualizer?.range
+    const rowCount = this.rows.length
+    return !range || this.virtualMode !== 'tanstack' || rowCount === 0
+      ? 'Current · rows —'
+      : `Current · rows ${Math.min(range.startIndex, rowCount - 1)}..${Math.min(range.endIndex, rowCount - 1)}`
+  }
+
+  captureScroll = (element: HTMLElement | null) => {
+    this.scrollElement = element as HTMLDivElement | null
+    if (!this.scrollElement) return
+    this.virtualizer = new Virtualizer({
+      count: 0,
+      getScrollElement: () => this.scrollElement,
+      estimateSize: () => TRADING_ROW_HEIGHT,
+      overscan: TRADING_ROW_OVERSCAN,
+      observeElementRect,
+      observeElementOffset,
+      scrollToFn: elementScroll,
+      onChange: () => { this.virtualVersion++ },
+    })
+    this.stopVirtualizer = this.virtualizer._didMount()
+    this.resizeObserver = new ResizeObserver(() => this.fitAvailableWidth())
+    this.resizeObserver.observe(this.scrollElement)
+    queueMicrotask(() => {
+      this.writeColumnSizes()
+      this.fitAvailableWidth()
+      this.virtualVersion++
+    })
+  }
+  captureTable = (element: HTMLElement | null) => {
+    this.tableElement = element as HTMLTableElement | null
+    if (this.tableElement) queueMicrotask(() => this.writeColumnSizes())
+  }
+  captureBody = (element: HTMLElement | null) => {
+    this.mutationObserver?.disconnect()
+    this.bodyElement = element as HTMLTableSectionElement | null
+    if (!this.bodyElement) return
+    this.args.controller.monitor.resetDomMutations()
+    this.mutationObserver = new MutationObserver((records) => this.args.controller.monitor.recordDomMutations(records.length))
+    this.mutationObserver.observe(this.bodyElement, { attributes: true, characterData: true, childList: true, subtree: true })
+  }
+
+  syncVirtualizer(rows: Array<TradingRow>) {
+    if (!this.virtualizer) return
+    this.virtualizer.setOptions({
+      ...this.virtualizer.options,
+      count: rows.length,
+      enabled: this.virtualMode === 'tanstack',
+      getItemKey: (index) => rows[index]?.id ?? index,
+    })
+    this.virtualizer._willUpdate()
+  }
+  writeColumnSizes() {
+    if (!this.tableElement) return
+    for (const header of this.table.getFlatHeaders()) {
+      this.tableElement.style.setProperty(`--header-${header.id}-size`, String(header.getSize()))
+      this.tableElement.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize()))
+    }
+    this.tableElement.style.width = `${this.table.getTotalSize()}px`
+  }
+  fitAvailableWidth() {
+    if (!this.scrollElement || this.layout.manuallyResized) return
+    const width = this.table.getTotalSize()
+    if (this.scrollElement.clientWidth <= width + 1 || width <= 0) return
+    const ratio = this.scrollElement.clientWidth / width
+    this.table.setColumnSizing(Object.fromEntries(this.table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio])))
+  }
+
+  onGridKeyDown = (event: KeyboardEvent) => handleCellNavigation(this.table, event)
+  onBodyMouseDown = (event: MouseEvent) => this.pointer.handleMouseDown(this.table, event, this.args.controller.actions.selectSymbol)
+  onBodyPointerOver = (event: MouseEvent) => this.pointer.handlePointerOver(this.table, event)
+  onBodyClick = (event: MouseEvent) => this.pointer.handleClick(this.table, event)
+  resetPointer = () => this.pointer.resetPointerCell()
+  clearDrag = () => {
+    this.drag.source?.classList.remove('is-column-dragging')
+    this.drag.target?.classList.remove('is-column-drop-target')
+    this.drag.columnId = null
+    this.drag.source = null
+    this.drag.target = null
+  }
+  dragStart = (header: TradingHeader) => (event: DragEvent) => {
+    this.drag.columnId = header.column.id
+    this.drag.source = (event.currentTarget as HTMLElement).closest('th')
+    this.drag.source?.classList.add('is-column-dragging')
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.setData('text/plain', header.column.id)
+    }
+  }
+  dragOver = (header: TradingHeader) => (event: DragEvent) => {
+    event.preventDefault()
+    this.drag.target?.classList.remove('is-column-drop-target')
+    this.drag.target = null
+    const element = (event.currentTarget as HTMLElement).closest('th')
+    if (this.drag.columnId !== header.column.id && element) {
+      element.classList.add('is-column-drop-target')
+      this.drag.target = element
+    }
+  }
+  drop = (header: TradingHeader) => (event: DragEvent) => {
+    event.preventDefault()
+    const source = event.dataTransfer?.getData('text/plain') || this.drag.columnId
+    if (source) this.table.setColumnOrder(reorderColumnIds(this.table.getVisibleLeafColumns().map((column) => column.id), source, header.column.id))
+    this.clearDrag()
+  }
+
+  <template>
+    <div class='table-scroll {{if (eq this.virtualMode "tanstack") "is-virtualized"}}' data-trading-table {{captureElement this.captureScroll}}>
+      <table class='trading-data-grid {{if (eq this.virtualMode "tanstack") "virtual-table"}}' data-testid='trading-table' role='grid' aria-multiselectable='true' tabindex='0' {{captureElement this.captureTable}} {{on 'keydown' this.onGridKeyDown}}>
+        <thead>
+          {{#each this.headerGroups as |group|}}
+            <tr>{{#each group.headers as |header|}}<th colspan={{header.colSpan}} style={{headerStyle header}} aria-sort={{sortAria header}} class='{{headerClass header}}'>
+              {{#unless header.isPlaceholder}}
+                {{#if (isLeaf header)}}
+                  <div class='leaf-header-content' {{on 'dragover' (this.dragOver header)}} {{on 'drop' (this.drop header)}}>
+                    <button type='button' class='column-drag-handle' draggable='true' aria-label='Move {{header.column.id}} column' {{on 'dragstart' (this.dragStart header)}} {{on 'dragend' this.clearDrag}}>⋮⋮</button>
+                    <button type='button' class='sort-header-button {{if (canSort header) "is-sortable"}}' disabled={{not (canSort header)}} {{on 'click' (toggleSort header)}}><span class='header-label'><FlexRenderHeader @header={{header}} /></span>{{#if (canSort header)}}<span class='sort-indicator {{if (isSorted header) "is-active"}}' aria-hidden='true'>{{indicator header}}</span>{{/if}}</button>
+                  </div>
+                  {{#if (canResize header)}}<div class='column-resize-handle {{if (isResizing header) "is-resizing"}}' role='separator' aria-orientation='vertical' {{on 'dblclick' (resetSize header)}} {{on 'mousedown' (resizeHandler header)}} {{on 'touchstart' (resizeHandler header)}}></div>{{/if}}
+                {{else}}<FlexRenderHeader @header={{header}} />{{/if}}
+              {{/unless}}
+            </th>{{/each}}</tr>
+          {{/each}}
+        </thead>
+        <tbody class={{if (eq this.virtualMode 'tanstack') 'virtual-table-body'}} style={{bodyStyle this.virtualMode this.totalVirtualHeight}} data-source-row-count={{this.feedState.quotes.length}} {{captureElement this.captureBody}} {{on 'mousedown' this.onBodyMouseDown}} {{on 'pointerover' this.onBodyPointerOver}} {{on 'mouseleave' this.resetPointer}} {{on 'click' this.onBodyClick}}>
+          {{#each this.renderedRows key='row.id' as |item|}}
+            <tr class={{if item.virtual 'virtual-table-row'}} style={{rowStyle item.virtual}} data-virtual-index={{virtualIndex item.virtual}} data-symbol={{item.row.original.symbol}} data-row-id={{item.row.original.id}} data-symbol-selected={{if (eq this.selectedSymbol item.row.original.symbol) 'true'}} title={{item.row.original.company}} aria-selected={{rowSelected item.row}}>
+              {{#each item.cells key='id' as |cell|}}<td style={{cellStyle cell.column.id}} data-column-id={{cell.column.id}} data-cell-focused={{cellFocused cell}} data-selection-top={{edgeAttr cell 'top'}} data-selection-right={{edgeAttr cell 'right'}} data-selection-bottom={{edgeAttr cell 'bottom'}} data-selection-left={{edgeAttr cell 'left'}} aria-selected={{cellSelected cell}} tabindex={{cellTabIndex cell}}><FlexRenderCell @cell={{cell}} /></td>{{/each}}
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </div>
+    {{#if (eq this.virtualMode 'tanstack')}}<footer class='virtual-scroll-footer' data-testid='virtual-scroll-footer'><span>TanStack · Total · {{this.rows.length}} rows · {{this.visibleLeafColumnCount}} columns</span><span data-testid='visible-row-range'>{{this.visibleRangeText}}</span></footer>{{/if}}
+  </template>
+}
+
+const isLeaf = (header: TradingHeader): boolean => header.subHeaders.length === 0
+const canSort = (header: TradingHeader): boolean => header.column.getCanSort()
+const isSorted = (header: TradingHeader): boolean => header.column.getIsSorted() !== false
+const canResize = (header: TradingHeader): boolean => header.column.getCanResize()
+const isResizing = (header: TradingHeader): boolean => header.column.getIsResizing()
+const toggleSort = (header: TradingHeader) => header.column.getToggleSortingHandler() ?? (() => undefined)
+const resetSize = (header: TradingHeader) => () => header.column.resetSize()
+const resizeHandler = (header: TradingHeader) => (event: Event) => header.getResizeHandler()?.(event)
+const indicator = (header: TradingHeader): string => sortIndicator(header.column.getIsSorted())
+const sortAria = (header: TradingHeader) => isLeaf(header) ? sortAriaValue(header.column.getIsSorted()) : undefined
+const headerStyle = (header: TradingHeader) => htmlSafe(`width:calc(var(--header-${header.id}-size) * 1px)`)
+const headerClass = (header: TradingHeader): string => `${isLeaf(header) ? '' : 'column-group-header'} ${isLeaf(header) && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}`
+const cellStyle = (columnId: string) => htmlSafe(`width:calc(var(--col-${columnId}-size) * 1px)`)
+const bodyStyle = (mode: string, height: number) => mode === 'tanstack' ? htmlSafe(`height:${height}px`) : undefined
+const rowStyle = (virtual: VirtualItem | null) => virtual ? htmlSafe(`transform:translateY(${virtual.start}px)`) : undefined
+const edgeAttr = (cell: { getSelectionEdges: () => { top: boolean; right: boolean; bottom: boolean; left: boolean } }, edge: 'top' | 'right' | 'bottom' | 'left'): string | undefined => cell.getSelectionEdges()[edge] ? 'true' : undefined
+const rowSelected = (row: TradingRow): boolean => row.getIsSelected()
+const cellSelected = (cell: ReturnType<TradingRow['getVisibleCells']>[number]): boolean => cell.getIsSelected()
+const cellFocused = (cell: ReturnType<TradingRow['getVisibleCells']>[number]): string | undefined => cell.getIsFocused() ? 'true' : undefined
+const cellTabIndex = (cell: ReturnType<TradingRow['getVisibleCells']>[number]): number => cell.getTabIndex()
+const virtualIndex = (virtual: VirtualItem | null): number | undefined => virtual?.index
+const eq = (left: unknown, right: unknown): boolean => left === right
+const not = (value: boolean): boolean => !value
diff --git a/examples/ember/realtime-trading/app/config.ts b/examples/ember/realtime-trading/app/config.ts
new file mode 100644
index 0000000000..8b0d33268d
--- /dev/null
+++ b/examples/ember/realtime-trading/app/config.ts
@@ -0,0 +1,17 @@
+interface Config {
+  environment: 'development' | 'production'
+  locationType: 'history' | 'hash' | 'none' | 'auto'
+  rootURL: string
+  EmberENV?: Record<string, unknown>
+  APP: Record<string, unknown> & { rootElement?: string; autoboot?: boolean }
+}
+
+const ENV: Config = {
+  environment: import.meta.env.DEV ? 'development' : 'production',
+  rootURL: '/',
+  locationType: 'history',
+  EmberENV: {},
+  APP: {},
+}
+
+export default ENV
diff --git a/examples/ember/realtime-trading/app/feed/feed-sample-rates.ts b/examples/ember/realtime-trading/app/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..dfacf21d02
--- /dev/null
+++ b/examples/ember/realtime-trading/app/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]!
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index]!.value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/ember/realtime-trading/app/feed/market-data.ts b/examples/ember/realtime-trading/app/feed/market-data.ts
new file mode 100644
index 0000000000..6231865d3f
--- /dev/null
+++ b/examples/ember/realtime-trading/app/feed/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './worker/market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/ember/realtime-trading/app/feed/market-feed-config.ts b/examples/ember/realtime-trading/app/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/ember/realtime-trading/app/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/ember/realtime-trading/app/feed/market-feed-controller.ts b/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..73716811be
--- /dev/null
+++ b/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
@@ -0,0 +1,240 @@
+import { batch, createStore } from '@tanstack/store'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedState {
+  workerReady: boolean
+  running: boolean
+  instrumentCount: number
+  targetTicksPerSecond: number
+  publishIntervalMs: number
+  updateSparklines: boolean
+  sparklineSampleIntervalMs: number
+  quotes: Array<MarketQuote>
+}
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export interface MarketFeedActions {
+  toggle: () => void
+  setInstrumentCount: (count: number) => void
+  setTargetRate: (rate: number) => void
+  setPublishInterval: (intervalMs: number) => void
+  setSparklineUpdates: (enabled: boolean) => void
+  setSparklineSampleInterval: (intervalMs: number) => void
+  runBurst: () => void
+  reset: () => void
+}
+
+const initialState: MarketFeedState = {
+  workerReady: false,
+  running: true,
+  instrumentCount: initialMarketFeedConfig.instrumentCount,
+  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  quotes: [],
+}
+
+export class MarketFeedController {
+  readonly store = createStore<MarketFeedState>(initialState)
+  readonly actions: MarketFeedActions
+  readonly #observers = new Set<MarketFeedObserver>()
+  readonly #runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+    quoteIndexBySymbol: new Map<string, number>(),
+  }
+
+  constructor() {
+    this.actions = {
+      toggle: () => {
+        const running = !this.store.get().running
+        this.#patch({ running })
+        this.#post({ type: 'set-running', running })
+      },
+      setInstrumentCount: (count) => {
+        this.#patch({ instrumentCount: count })
+        this.#resetWorker(count)
+      },
+      setTargetRate: (rate) => {
+        const sampleRate = normalizeFeedSampleRate(rate)
+        this.#patch({
+          targetTicksPerSecond: sampleRate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
+      },
+      setPublishInterval: (publishIntervalMs) => {
+        this.#patch({ publishIntervalMs })
+        this.#post({
+          type: 'set-publish-interval',
+          intervalMs: publishIntervalMs,
+        })
+      },
+      setSparklineUpdates: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#post({ type: 'set-sparklines', enabled })
+      },
+      setSparklineSampleInterval: (intervalMs) => {
+        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.#post({ type: 'set-sparkline-interval', intervalMs })
+      },
+      runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
+      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.#runtime.worker = worker
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    const state = this.store.get()
+    this.#post({
+      type: 'start',
+      rowCount: state.instrumentCount,
+      running: state.running,
+      ticksPerSecond: state.targetTicksPerSecond,
+      publishIntervalMs: state.publishIntervalMs,
+      updateSparklines: state.updateSparklines,
+      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+    })
+    return () => this.stop()
+  }
+
+  stop(): void {
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#observers.clear()
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  getQuoteBySymbol(
+    quotes: Array<MarketQuote>,
+    symbol: string | null,
+  ): MarketQuote | null {
+    if (symbol === null) return null
+
+    const index = this.#runtime.quoteIndexBySymbol.get(symbol)
+    return index === undefined ? null : (quotes[index] ?? null)
+  }
+
+  completeRender(): void {
+    if (!this.#runtime.renderPending) return
+
+    this.#runtime.renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#post({ type: 'set-running', running: this.store.get().running })
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#runtime.feedSessionId = data.sessionId
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.#startMutation()
+      const quotes = hydrateMarketQuotes(data.quotes)
+      this.#runtime.quoteIndexBySymbol = new Map(
+        quotes.map((quote, index) => [quote.symbol, index]),
+      )
+      batch(() => {
+        this.#patch({
+          quotes,
+          workerReady: true,
+        })
+      })
+      return
+    }
+
+    if (data.sessionId !== this.#runtime.feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.#patch({
+      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
+    })
+    const feedBatch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(feedBatch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorker(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#post({ type: 'set-running', running: false })
+    this.#post({ type: 'reset', rowCount })
+  }
+
+  #startMutation(): void {
+    this.#runtime.renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #patch(patch: Partial<MarketFeedState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#runtime.worker?.postMessage(command)
+  }
+}
diff --git a/examples/ember/realtime-trading/app/feed/sp500-instruments.ts b/examples/ember/realtime-trading/app/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/ember/realtime-trading/app/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/ember/realtime-trading/app/feed/worker/market-feed-engine.ts b/examples/ember/realtime-trading/app/feed/worker/market-feed-engine.ts
new file mode 100644
index 0000000000..9541606f84
--- /dev/null
+++ b/examples/ember/realtime-trading/app/feed/worker/market-feed-engine.ts
@@ -0,0 +1,177 @@
+import { globalInstruments } from '../sp500-instruments'
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #tickIndex = 0
+
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]!
+      const series = Math.floor(index / globalInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue: market,
+        previousClose,
+        open,
+        high: open,
+        low: open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: createdAt,
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
+    this.#rowCursor = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyTicks(
+    tickCount: number,
+    updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]!
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]!
+      const shouldUpdateHistory =
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#tickIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
+    const secondMix =
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/ember/realtime-trading/app/feed/worker/market-feed-protocol.ts b/examples/ember/realtime-trading/app/feed/worker/market-feed-protocol.ts
new file mode 100644
index 0000000000..21997ec89c
--- /dev/null
+++ b/examples/ember/realtime-trading/app/feed/worker/market-feed-protocol.ts
@@ -0,0 +1,70 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  previousClose: number
+  open: number
+  high: number
+  low: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  high: number
+  low: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'start'
+      rowCount: number
+      running: boolean
+      ticksPerSecond: number
+      publishIntervalMs: number
+      updateSparklines: boolean
+      sparklineSampleIntervalMs: number
+    }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'snapshot'
+      sessionId: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/ember/realtime-trading/app/feed/worker/market-feed.worker.ts b/examples/ember/realtime-trading/app/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..2b7a642fd9
--- /dev/null
+++ b/examples/ember/realtime-trading/app/feed/worker/market-feed.worker.ts
@@ -0,0 +1,143 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/ember/realtime-trading/app/router.ts b/examples/ember/realtime-trading/app/router.ts
new file mode 100644
index 0000000000..eadbe60450
--- /dev/null
+++ b/examples/ember/realtime-trading/app/router.ts
@@ -0,0 +1,51 @@
+import EmbroiderRouter from '@embroider/router'
+import config from '#config'
+
+export default class Router extends EmbroiderRouter {
+  location = config.locationType
+  rootURL = config.rootURL
+}
+
+Router.map(function () {})
+
+/**
+ * Caveat:
+ * - https://github.com/embroider-build/embroider/issues/2521
+ *   We don't yet have a way to do this in a nice way
+ *
+ */
+// function bundle(name: string, loader: () => Promise<{ default: unknown }>[]) {
+//   return {
+//     names: [name],
+//     load: async () => {
+//       const [template, route, controller] = await Promise.all(loader());
+//       let slashName = name.replaceAll(".", "/");
+//       let results: Record<string, unknown> = {};
+
+//       if (template) results[`./templates/${slashName}`] = template.default;
+//       if (route) results[`./routes/${slashName}`] = route.default;
+//       if (controller) results[`./controllers/${slashName}`] = controller.default;
+
+//       return {
+//         default: results,
+//       };
+//     },
+//   };
+// }
+
+/**
+ * Examples from:
+ * - https://github.com/NullVoxPopuli/limber/blob/67e2f54bbe224052e38f9a9e566d704411e65e86/apps/repl/app/router.ts#L35
+ */
+// (window as any)._embroiderRouteBundles_ = [
+// bundle("docs", () => [import("./templates/docs.gts")]),
+// bundle("docs.repl-sdk", () => [import("./templates/docs/repl-sdk.gts")]),
+// bundle("docs.ember-repl", () => [import("./templates/docs/ember-repl.gts")]),
+// bundle("docs.embedding", () => [import("./templates/docs/embedding.gts")]),
+// bundle("docs.editor", () => [import("./templates/docs/editor.gts")]),
+// bundle("docs.whatever", () => [
+//   import("./the/template.gts"),
+//   import("./the/route.ts"),
+//   import("./the/controller.ts"),
+// ]),
+// ];
diff --git a/examples/ember/realtime-trading/app/table/table-config/quote-cells.gts b/examples/ember/realtime-trading/app/table/table-config/quote-cells.gts
new file mode 100644
index 0000000000..478bba1807
--- /dev/null
+++ b/examples/ember/realtime-trading/app/table/table-config/quote-cells.gts
@@ -0,0 +1,142 @@
+import Component from '@glimmer/component'
+import { registerDestructor } from '@ember/destroyable'
+import { on } from '@ember/modifier'
+import type Owner from '@ember/owner'
+import type { CellRenderableSignature } from '@tanstack/ember-table'
+import type { MarketQuote } from '../../feed/market-data'
+import type { tradingFeatures } from '../trading-features'
+
+export const quoteCellLifecycle = { created: 0, destroyed: 0 }
+
+export const quoteCellRendererNames = [
+  'Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid',
+  'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday',
+] as const
+export const quoteComponentNames = [
+  'PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell',
+  'PercentChangeCell', 'SpreadCell', 'DepthCell', 'QuoteAgeCell',
+  'SparklineCell',
+] as const
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+
+const createCounterMap = <Name extends string>(names: ReadonlyArray<Name>) =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
+  cellRendererCallsByName: createCounterMap(quoteCellRendererNames),
+  componentRenderCallsByName: createCounterMap(quoteComponentNames),
+}
+
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value
+}
+
+interface PriceOptions { selectSymbol: (symbol: string) => void }
+abstract class QuoteCell<Signature> extends Component<Signature> {
+  constructor(owner: Owner, args: object, name: QuoteComponentName) {
+    super(owner, args)
+    quoteCellLifecycle.created++
+    registerDestructor(this, () => { quoteCellLifecycle.destroyed++ })
+  }
+}
+
+export class PriceCell extends QuoteCell<
+  CellRenderableSignature<typeof tradingFeatures, MarketQuote, number, PriceOptions>
+> {
+  constructor(owner: Owner, args: object) { super(owner, args, 'PriceCell') }
+  get quote() { return this.args.ctx.row.original }
+  select = () => { this.args.options?.selectSymbol(this.quote.symbol) }
+  <template>
+    {{recordComponent 'PriceCell'}}
+    <button class='price-button {{if (isPositive this.quote) "quote-up" "quote-down"}}' type='button' {{on 'click' this.select}}>
+      {{fixed this.quote.price}}
+    </button>
+  </template>
+}
+
+abstract class MoveCellBase extends QuoteCell<
+  CellRenderableSignature<typeof tradingFeatures, MarketQuote, number>
+> {
+  get move() { return this.args.ctx.row.original.price - this.args.ctx.row.original.previousClose }
+  get positive() { return this.move >= 0 }
+}
+
+export class StableMoveCell extends MoveCellBase {
+  constructor(owner: Owner, args: object) { super(owner, args, 'StableMoveCell') }
+  <template>
+    {{recordComponent 'StableMoveCell'}}
+    <span class='move-cell {{if this.positive "quote-up" "quote-down"}}'>{{signed this.move}}</span>
+  </template>
+}
+
+export class UpMoveCell extends MoveCellBase {
+  constructor(owner: Owner, args: object) { super(owner, args, 'UpMoveCell') }
+  <template>
+    {{recordComponent 'UpMoveCell'}}
+    <span class='move-cell quote-up'>▲ {{signed this.move}}</span>
+  </template>
+}
+
+export class DownMoveCell extends MoveCellBase {
+  constructor(owner: Owner, args: object) { super(owner, args, 'DownMoveCell') }
+  <template>
+    {{recordComponent 'DownMoveCell'}}
+    <span class='move-cell quote-down'>▼ {{signed this.move}}</span>
+  </template>
+}
+
+export class PercentChangeCell extends QuoteCell<
+  CellRenderableSignature<typeof tradingFeatures, MarketQuote, number>
+> {
+  constructor(owner: Owner, args: object) { super(owner, args, 'PercentChangeCell') }
+  get value() {
+    const quote = this.args.ctx.row.original
+    return quote.previousClose === 0 ? 0 : ((quote.price - quote.previousClose) / quote.previousClose) * 100
+  }
+  <template>
+    {{recordComponent 'PercentChangeCell'}}
+    <span class='percent-change-cell {{if (nonNegative this.value) "quote-up" "quote-down"}}'>{{percent this.value}}</span>
+  </template>
+}
+
+export class SparklineCell extends QuoteCell<
+  CellRenderableSignature<typeof tradingFeatures, MarketQuote>
+> {
+  constructor(owner: Owner, args: object) { super(owner, args, 'SparklineCell') }
+  get values() { return this.args.ctx.row.original.history }
+  get rising() { return (this.values.at(-1) ?? 0) >= (this.values[0] ?? 0) }
+  get points() {
+    const first = this.values[0] ?? 0
+    const range = this.values.reduce(
+      (result, value) => ({ min: Math.min(result.min, value), max: Math.max(result.max, value) }),
+      { min: first, max: first },
+    )
+    const scale = range.max - range.min || 1
+    const denominator = Math.max(1, this.values.length - 1)
+    return this.values.map((value, index) => {
+      const x = (index / denominator) * 100
+      const y = 22 - ((value - range.min) / scale) * 20
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    }).join(' ')
+  }
+  <template>
+    {{recordComponent 'SparklineCell'}}
+    <svg class='sparkline {{if this.rising "quote-up" "quote-down"}}' viewBox='0 0 100 24' preserveAspectRatio='none'><polyline points={{this.points}} /></svg>
+  </template>
+}
+
+const fixed = (value: number): string => value.toFixed(2)
+const signed = (value: number): string => `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+const percent = (value: number): string => `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`
+const nonNegative = (value: number): boolean => value >= 0
+const isPositive = (quote: MarketQuote): boolean => quote.price - quote.previousClose >= 0
+const recordComponent = (name: QuoteComponentName): string => {
+  quoteRenderDiagnostics.componentRenderCalls++
+  quoteRenderDiagnostics.componentRenderCallsByName[name]++
+  return ''
+}
diff --git a/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts b/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
new file mode 100644
index 0000000000..809eeb7771
--- /dev/null
+++ b/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
@@ -0,0 +1,88 @@
+import { flexRenderComponent } from '@tanstack/ember-table'
+import {
+  DownMoveCell,
+  PercentChangeCell,
+  PriceCell,
+  SparklineCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells.gts'
+import type { ColumnDef } from '@tanstack/ember-table'
+import type { MarketQuote } from '../../feed/market-data'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
+import type { tradingFeatures } from '../trading-features'
+
+export type RendererMode = 'stable' | 'swap'
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+
+const compact = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export function createTradingColumns(
+  controller: TradingBenchmarkController,
+  rendererMode: RendererMode,
+): Array<ColumnDef<typeof tradingFeatures, MarketQuote>> {
+  return [
+    { id: 'instrument', header: 'Instrument', columns: [
+      { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', row.original.venue) },
+      { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', row.original.company) },
+      { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', row.original.symbol) },
+    ] },
+    { id: 'priceAndChange', header: 'Price & Change', columns: [
+      { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: () => recordCellRender('Last', flexRenderComponent(PriceCell, { selectSymbol: controller.actions.selectSymbol })) },
+      { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', rendererMode === 'stable' ? flexRenderComponent(StableMoveCell) : getDayChange(row.original) >= 0 ? flexRenderComponent(UpMoveCell) : flexRenderComponent(DownMoveCell)) },
+      { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: () => recordCellRender('ChangePercent', flexRenderComponent(PercentChangeCell)) },
+    ] },
+    { id: 'orderBook', header: 'Order Book', columns: [
+      { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
+      { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compact.format(row.original.bidSize)) },
+      { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
+      { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compact.format(row.original.askSize)) },
+    ] },
+    { id: 'session', header: 'Session', columns: [
+      { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
+      { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
+      { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
+    ] },
+    { id: 'chart', header: 'Chart', columns: [
+      { id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: () => recordCellRender('Intraday', flexRenderComponent(SparklineCell)) },
+    ] },
+  ]
+}
+
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
+export const TRADING_COLUMN_COUNT = 14
+
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration)
+  rowModelDiagnostics.lastRowCount = rows.length
+  try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* optional User Timing detail */ }
+  return rows
+}
+
+export function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+
+export function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/ember/realtime-trading/app/table/table-interactions.ts b/examples/ember/realtime-trading/app/table/table-interactions.ts
new file mode 100644
index 0000000000..27c35b6e98
--- /dev/null
+++ b/examples/ember/realtime-trading/app/table/table-interactions.ts
@@ -0,0 +1,188 @@
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Record<string, SelectableGridCell>
+}
+
+interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Record<string, SelectableGridRow>
+  }
+}
+
+interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+  })
+}
+
+export class TradingGridPointerController {
+  #lastPointerCell: HTMLTableCellElement | null = null
+
+  handleMouseDown(
+    table: TradingGridTable,
+    event: MouseEvent,
+    selectSymbol: (symbol: string) => void,
+  ): void {
+    if (event.button !== 0) return
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+
+    this.#lastPointerCell = target.element
+    selectSymbol(target.cell.row.original.symbol)
+    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+  }
+
+  handlePointerOver(table: TradingGridTable, event: MouseEvent): void {
+    if ((event.buttons & 1) === 0) {
+      this.resetPointerCell()
+      return
+    }
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target || target.element === this.#lastPointerCell) return
+
+    this.#lastPointerCell = target.element
+    target.cell.getSelectionExtendHandler()(event)
+  }
+
+  handleClick(table: TradingGridTable, event: MouseEvent): void {
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+    selectRowFromPointer(table, target.cell.row, event)
+  }
+
+  resetPointerCell(): void {
+    this.#lastPointerCell = null
+  }
+
+  #findCellTarget(
+    table: TradingGridTable,
+    path: Array<EventTarget>,
+  ): SelectionCellTarget | null {
+    for (const target of path) {
+      if (!(target instanceof HTMLTableCellElement)) continue
+
+      const columnId = target.dataset['columnId']
+      const rowId =
+        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+      if (!columnId || !rowId) return null
+
+      const row = table.getRowModel().rowsById[rowId]
+      if (!row) return null
+      const cell = row.getAllCellsByColumnId()[columnId]
+      if (!cell) return null
+      return { element: target, cell }
+    }
+
+    return null
+  }
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: KeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/ember/realtime-trading/app/table/trading-features.ts b/examples/ember/realtime-trading/app/table/trading-features.ts
new file mode 100644
index 0000000000..7d0a780dda
--- /dev/null
+++ b/examples/ember/realtime-trading/app/table/trading-features.ts
@@ -0,0 +1,16 @@
+import {
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  sortFn_basic,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/ember-table'
+
+export const tradingFeatures = tableFeatures({
+  ...stockFeatures,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { basic: sortFn_basic },
+})
diff --git a/examples/ember/realtime-trading/app/table/trading-row-virtualizer.ts b/examples/ember/realtime-trading/app/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..d733342a00
--- /dev/null
+++ b/examples/ember/realtime-trading/app/table/trading-row-virtualizer.ts
@@ -0,0 +1,14 @@
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
diff --git a/examples/ember/realtime-trading/app/table/trading-table.ts b/examples/ember/realtime-trading/app/table/trading-table.ts
new file mode 100644
index 0000000000..033929e969
--- /dev/null
+++ b/examples/ember/realtime-trading/app/table/trading-table.ts
@@ -0,0 +1,9 @@
+export {
+  TRADING_COLUMN_COUNT,
+  rowModelDiagnostics,
+} from './table-config/trading-columns.gts'
+export type {
+  CoreTableState,
+  RendererMode,
+} from './table-config/trading-columns.gts'
+export type { VirtualScrollMode } from './trading-row-virtualizer'
diff --git a/examples/ember/realtime-trading/app/templates/application.gts b/examples/ember/realtime-trading/app/templates/application.gts
new file mode 100644
index 0000000000..fedc2658e9
--- /dev/null
+++ b/examples/ember/realtime-trading/app/templates/application.gts
@@ -0,0 +1,23 @@
+import Component from '@glimmer/component'
+import { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+import { MarketFeedController } from '../feed/market-feed-controller'
+import TradingShell from '../components/shell/trading-shell.gts'
+import { registerCleanup } from '../utils/subscriptions'
+import type Owner from '@ember/owner'
+
+export default class Application extends Component {
+  readonly feed = new MarketFeedController()
+  readonly controller = new TradingBenchmarkController(this.feed)
+
+  constructor(owner: Owner, args: object) {
+    super(owner, args)
+    const stopFeed = this.feed.start()
+    const stopBenchmark = this.controller.start()
+    registerCleanup(this, () => {
+      stopBenchmark()
+      stopFeed()
+    })
+  }
+
+  <template><TradingShell @controller={{this.controller}} @feed={{this.feed}} /></template>
+}
diff --git a/examples/ember/realtime-trading/app/utils/subscriptions.ts b/examples/ember/realtime-trading/app/utils/subscriptions.ts
new file mode 100644
index 0000000000..a2f3b86fa6
--- /dev/null
+++ b/examples/ember/realtime-trading/app/utils/subscriptions.ts
@@ -0,0 +1,20 @@
+import { registerDestructor } from '@ember/destroyable'
+
+interface Subscription { unsubscribe: () => void }
+interface Subscribable<T> {
+  get: () => T
+  subscribe: (listener: (value: T) => void) => Subscription
+}
+
+export function observeValue<T>(
+  owner: object,
+  source: Subscribable<T>,
+  update: (value: T) => void,
+): void {
+  const subscription = source.subscribe(update)
+  registerDestructor(owner, () => subscription.unsubscribe())
+}
+
+export function registerCleanup(owner: object, cleanup: () => void): void {
+  registerDestructor(owner, cleanup)
+}
diff --git a/examples/ember/realtime-trading/babel.config.js b/examples/ember/realtime-trading/babel.config.js
new file mode 100644
index 0000000000..10915e4299
--- /dev/null
+++ b/examples/ember/realtime-trading/babel.config.js
@@ -0,0 +1,49 @@
+import { buildMacros } from '@embroider/macros/babel'
+
+const macros = buildMacros({
+  configure(config) {
+    if (process.env.EMBER_ENV === 'test') {
+      config.enableRuntimeMode()
+    }
+  },
+})
+
+export default {
+  plugins: [
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ],
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        transforms: [...macros.templateMacros],
+      },
+    ],
+    [
+      'module:decorator-transforms',
+      {
+        runtime: {
+          import: import.meta.resolve('decorator-transforms/runtime-esm'),
+        },
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        absoluteRuntime: import.meta.dirname,
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ...macros.babelMacros,
+  ],
+
+  generatorOpts: {
+    compact: false,
+  },
+}
diff --git a/examples/ember/realtime-trading/index.html b/examples/ember/realtime-trading/index.html
new file mode 100644
index 0000000000..b9dbf7e836
--- /dev/null
+++ b/examples/ember/realtime-trading/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Minimal App</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <script type="module">
+      import Application from '#app/app'
+      import environment from '#config'
+
+      Application.create(environment.APP)
+    </script>
+  </body>
+</html>
diff --git a/examples/ember/realtime-trading/package.json b/examples/ember/realtime-trading/package.json
new file mode 100644
index 0000000000..68eadf1896
--- /dev/null
+++ b/examples/ember/realtime-trading/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "tanstack-ember-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "imports": {
+    "#app/*": "./app/*",
+    "#config": "./app/config.ts",
+    "#components/*": "./app/components/*",
+    "#services/*": "./app/services/*",
+    "#test-helpers/*": "./tests/helpers/*",
+    "#utils/*": "./app/utils/*"
+  },
+  "exports": {
+    "./tests/*": "./tests/*",
+    "./*": "./app/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts",
+    "test:types": "ember-tsc --noEmit"
+  },
+  "dependencies": {
+    "@embroider/macros": "1.20.5",
+    "@embroider/router": "3.0.6",
+    "@glimmer/component": "2.1.1",
+    "@tanstack/ember-table": "^9.1.2",
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/virtual-core": "^3.13.36",
+    "decorator-transforms": "2.4.0",
+    "ember-modifier": "^4.3.0",
+    "ember-source": "7.1.0",
+    "ember-strict-application-resolver": "0.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.29.7",
+    "@babel/plugin-transform-runtime": "7.29.7",
+    "@babel/plugin-transform-typescript": "7.29.7",
+    "@babel/runtime": "7.29.7",
+    "@ember/app-tsconfig": "2.0.0",
+    "@embroider/core": "4.6.2",
+    "@glint/ember-tsc": "1.8.14",
+    "@glint/template": "1.7.10",
+    "@glint/tsserver-plugin": "2.5.20",
+    "@nullvoxpopuli/ember-vite": "1.1.0",
+    "@rollup/plugin-babel": "7.1.0",
+    "babel-plugin-ember-template-compilation": "4.0.0",
+    "typescript": "6.0.3",
+    "vite": "^8.2.0"
+  },
+  "engines": {
+    "node": ">= 24"
+  },
+  "ember": {
+    "edition": "octane"
+  }
+}
diff --git a/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts b/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..bc4d1d6fd6
--- /dev/null
+++ b/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,170 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the Ember realtime trading workload', async ({ page }) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
+    await expect(table).toBeVisible()
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
+
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('row-update-rate').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('message-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    await instrumentCount.selectOption('750')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(750)
+    expect(
+      await page.evaluate(
+        () => performance.getEntriesByName('tanstack-row-model').length > 0,
+      ),
+    ).toBe(true)
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/ember/realtime-trading/tsconfig.json b/examples/ember/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..c4f982dc22
--- /dev/null
+++ b/examples/ember/realtime-trading/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "@ember/app-tsconfig",
+  "compilerOptions": {
+    "allowJs": true,
+    "lib": ["ES2025", "DOM", "DOM.Iterable"],
+    "types": [
+      "ember-source/types",
+      "@embroider/core/virtual",
+      "vite/client",
+      "@glint/ember-tsc/types"
+    ]
+  }
+}
diff --git a/examples/ember/realtime-trading/vite.config.mjs b/examples/ember/realtime-trading/vite.config.mjs
new file mode 100644
index 0000000000..d09660d2f1
--- /dev/null
+++ b/examples/ember/realtime-trading/vite.config.mjs
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import { ember } from '@nullvoxpopuli/ember-vite'
+
+export default defineConfig({
+  server: {
+    port: 7785,
+    allowedHosts: true,
+  },
+  plugins: [ember()],
+})
diff --git a/examples/lit/realtime-trading/.gitignore b/examples/lit/realtime-trading/.gitignore
new file mode 100644
index 0000000000..1502ec233f
--- /dev/null
+++ b/examples/lit/realtime-trading/.gitignore
@@ -0,0 +1,3 @@
+dist
+node_modules
+
diff --git a/examples/lit/realtime-trading/README.md b/examples/lit/realtime-trading/README.md
new file mode 100644
index 0000000000..cca4ed2307
--- /dev/null
+++ b/examples/lit/realtime-trading/README.md
@@ -0,0 +1,15 @@
+# Lit realtime trading benchmark
+
+Standalone Lit implementation of the shared realtime-trading workload. It owns
+its market feed, worker, instruments, benchmark monitor, shell, table config,
+custom quote elements, delegated grid interactions, and Lit Virtual setup.
+
+It starts with 100 instruments. Full DOM and TanStack Virtual are selectable
+below 250 instruments; virtualization is enabled and locked at 250 or more.
+
+```bash
+pnpm --dir examples/lit/realtime-trading dev
+pnpm --dir examples/lit/realtime-trading test:types
+pnpm --dir examples/lit/realtime-trading lint
+pnpm --dir examples/lit/realtime-trading build
+```
diff --git a/examples/lit/realtime-trading/index.html b/examples/lit/realtime-trading/index.html
new file mode 100644
index 0000000000..d4e04c8700
--- /dev/null
+++ b/examples/lit/realtime-trading/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>TanStack Lit Table · Realtime Trading</title></head><body><realtime-trading-app></realtime-trading-app><script type="module" src="/src/main.ts"></script></body></html>
diff --git a/examples/lit/realtime-trading/package.json b/examples/lit/realtime-trading/package.json
new file mode 100644
index 0000000000..9658644002
--- /dev/null
+++ b/examples/lit/realtime-trading/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "tanstack-lit-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite", "dev": "vite", "build": "vite build", "serve": "vite preview",
+    "lint": "eslint ./src", "test:types": "tsc --noEmit",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "dependencies": {
+    "@tanstack/lit-table": "9.1.2", "@tanstack/lit-virtual": "^3.13.36",
+    "@tanstack/store": "^0.11.0", "lit": "^3.3.3"
+  },
+  "devDependencies": { "typescript": "6.0.3", "vite": "^8.2.0" }
+}
diff --git a/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..9eea493fec
--- /dev/null
+++ b/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -0,0 +1,368 @@
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells'
+import { rowModelDiagnostics } from '../table/trading-table'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+  rowModelCallsPerSecond: number
+  rowModelAverageMs: number
+  rowModelMaxMs: number
+  visibleRows: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+  rowModelCallsPerSecond: 0,
+  rowModelAverageMs: 0,
+  rowModelMaxMs: 0,
+  visibleRows: 0,
+}
+
+const userTiming = { entryCount: 0 }
+
+export function recordMeasure(
+  name: string,
+  start: number,
+  end: number,
+  detail: Record<string, unknown>,
+): void {
+  try {
+    performance.measure(name, { start, end, detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('market-update-to-layout-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
+export function markBenchmarkAction(
+  name: string,
+  detail: Record<string, unknown> = {},
+): void {
+  try {
+    performance.mark(`benchmark:${name}`, { detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMarks()
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    renderSamples: [] as Array<number>,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+    previousRowModelCalls: 0,
+    previousRowModelDuration: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  recordCompletedRender(): void {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      const renderEndedAt = performance.now()
+      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      recordMeasure(
+        'market-update-to-layout-commit',
+        runtime.pendingRenderStartedAt,
+        renderEndedAt,
+        {},
+      )
+      runtime.pendingRenderStartedAt = null
+      runtime.tableRendersInSample++
+    }
+  }
+
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = tickCount
+    runtime.lastUpdateCount = updateCount
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const renderSamples = runtime.renderSamples
+    const sortedRenderSamples = [...renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const rowModelCalls =
+      rowModelDiagnostics.calls - runtime.previousRowModelCalls
+    const rowModelDuration =
+      rowModelDiagnostics.totalDurationMs - runtime.previousRowModelDuration
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const averageRenderMs =
+      renderSamples.length === 0
+        ? 0
+        : renderSamples.reduce((sum, value) => sum + value, 0) /
+          renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualTicksPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+      rowModelCallsPerSecond: (rowModelCalls / sampleDuration) * 1_000,
+      rowModelAverageMs:
+        rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
+      rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
+      visibleRows: rowModelDiagnostics.lastRowCount,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.renderSamples = []
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    rowModelDiagnostics.maxDurationMs = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/lit/realtime-trading/src/benchmark/table-benchmark.ts b/examples/lit/realtime-trading/src/benchmark/table-benchmark.ts
new file mode 100644
index 0000000000..7115e9e7bb
--- /dev/null
+++ b/examples/lit/realtime-trading/src/benchmark/table-benchmark.ts
@@ -0,0 +1,22 @@
+import type { TradingBenchmarkController } from './trading-benchmark-controller'
+
+export function startTableBenchmark(
+  controller: TradingBenchmarkController,
+): () => void {
+  const tableBody = document.querySelector(
+    '.market-panel [data-trading-table] tbody',
+  )
+  if (!tableBody) return () => undefined
+
+  controller.monitor.resetDomMutations()
+  const observer = new MutationObserver((records) => {
+    controller.monitor.recordDomMutations(records.length)
+  })
+  observer.observe(tableBody, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  })
+  return () => observer.disconnect()
+}
diff --git a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..316bb530e6
--- /dev/null
+++ b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,152 @@
+import { batch, createAtom, createStore } from '@tanstack/store'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from './benchmark-monitor'
+import type { FeedMetrics } from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+
+export interface TradingBenchmarkState {
+  requestedVirtualScrollMode: VirtualScrollMode
+  metrics: FeedMetrics
+  mountedCells: number
+  liveComponents: number
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  resetViewState: () => void
+  setRendererMode: (mode: RendererMode) => void
+  setVirtualScrollEnabled: (enabled: boolean) => void
+  setRenderedRowCount: (count: number) => void
+  selectSymbol: (symbol: string | null) => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  requestedVirtualScrollMode: 'none',
+  metrics: initialMetrics,
+  mountedCells: 0,
+  liveComponents: 0,
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly feed: MarketFeedController
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    stopObservingFeed: null as (() => void) | null,
+  }
+
+  constructor(feed: MarketFeedController) {
+    this.feed = feed
+    this.actions = {
+      resetViewState: () => {
+        this.renderAtoms.selectedSymbol.set(null)
+      },
+      setRendererMode: (mode) => {
+        this.renderAtoms.rendererMode.set(mode)
+      },
+      setVirtualScrollEnabled: (enabled) => {
+        if (
+          this.feed.store.get().instrumentCount >=
+          FORCED_VIRTUALIZATION_ROW_COUNT
+        ) {
+          return
+        }
+        this.#patch({
+          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
+        })
+      },
+      setRenderedRowCount: (count) => {
+        const mountedCells = count * TRADING_COLUMN_COUNT
+        if (mountedCells !== this.store.get().mountedCells) {
+          this.#patch({ mountedCells })
+        }
+      },
+      selectSymbol: (symbol) => {
+        this.renderAtoms.selectedSymbol.set(symbol)
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.store.setState((state) => ({
+            ...state,
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.feed.actions.reset()
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    this.#runtime.stopObservingFeed = this.feed.observe({
+      messageReceived: () => this.monitor.recordWorkerMessage(),
+      mutationStarted: () => this.monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+      renderCommitted: () => this.monitor.recordCompletedRender(),
+    })
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.stopObservingFeed?.()
+    this.#runtime.longAnimationFrameObserver = null
+    this.#runtime.stopObservingFeed = null
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    if (this.monitor.shouldPublish(now)) {
+      this.#publishMetrics(this.monitor.publish(now))
+    }
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    this.#patch({
+      metrics,
+      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+}
diff --git a/examples/lit/realtime-trading/src/feed/feed-sample-rates.ts b/examples/lit/realtime-trading/src/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/lit/realtime-trading/src/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/lit/realtime-trading/src/feed/market-data.ts b/examples/lit/realtime-trading/src/feed/market-data.ts
new file mode 100644
index 0000000000..6231865d3f
--- /dev/null
+++ b/examples/lit/realtime-trading/src/feed/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './worker/market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/lit/realtime-trading/src/feed/market-feed-config.ts b/examples/lit/realtime-trading/src/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/lit/realtime-trading/src/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/lit/realtime-trading/src/feed/market-feed-controller.ts b/examples/lit/realtime-trading/src/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..73716811be
--- /dev/null
+++ b/examples/lit/realtime-trading/src/feed/market-feed-controller.ts
@@ -0,0 +1,240 @@
+import { batch, createStore } from '@tanstack/store'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedState {
+  workerReady: boolean
+  running: boolean
+  instrumentCount: number
+  targetTicksPerSecond: number
+  publishIntervalMs: number
+  updateSparklines: boolean
+  sparklineSampleIntervalMs: number
+  quotes: Array<MarketQuote>
+}
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export interface MarketFeedActions {
+  toggle: () => void
+  setInstrumentCount: (count: number) => void
+  setTargetRate: (rate: number) => void
+  setPublishInterval: (intervalMs: number) => void
+  setSparklineUpdates: (enabled: boolean) => void
+  setSparklineSampleInterval: (intervalMs: number) => void
+  runBurst: () => void
+  reset: () => void
+}
+
+const initialState: MarketFeedState = {
+  workerReady: false,
+  running: true,
+  instrumentCount: initialMarketFeedConfig.instrumentCount,
+  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  quotes: [],
+}
+
+export class MarketFeedController {
+  readonly store = createStore<MarketFeedState>(initialState)
+  readonly actions: MarketFeedActions
+  readonly #observers = new Set<MarketFeedObserver>()
+  readonly #runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+    quoteIndexBySymbol: new Map<string, number>(),
+  }
+
+  constructor() {
+    this.actions = {
+      toggle: () => {
+        const running = !this.store.get().running
+        this.#patch({ running })
+        this.#post({ type: 'set-running', running })
+      },
+      setInstrumentCount: (count) => {
+        this.#patch({ instrumentCount: count })
+        this.#resetWorker(count)
+      },
+      setTargetRate: (rate) => {
+        const sampleRate = normalizeFeedSampleRate(rate)
+        this.#patch({
+          targetTicksPerSecond: sampleRate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
+      },
+      setPublishInterval: (publishIntervalMs) => {
+        this.#patch({ publishIntervalMs })
+        this.#post({
+          type: 'set-publish-interval',
+          intervalMs: publishIntervalMs,
+        })
+      },
+      setSparklineUpdates: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#post({ type: 'set-sparklines', enabled })
+      },
+      setSparklineSampleInterval: (intervalMs) => {
+        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.#post({ type: 'set-sparkline-interval', intervalMs })
+      },
+      runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
+      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.#runtime.worker = worker
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    const state = this.store.get()
+    this.#post({
+      type: 'start',
+      rowCount: state.instrumentCount,
+      running: state.running,
+      ticksPerSecond: state.targetTicksPerSecond,
+      publishIntervalMs: state.publishIntervalMs,
+      updateSparklines: state.updateSparklines,
+      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+    })
+    return () => this.stop()
+  }
+
+  stop(): void {
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#observers.clear()
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  getQuoteBySymbol(
+    quotes: Array<MarketQuote>,
+    symbol: string | null,
+  ): MarketQuote | null {
+    if (symbol === null) return null
+
+    const index = this.#runtime.quoteIndexBySymbol.get(symbol)
+    return index === undefined ? null : (quotes[index] ?? null)
+  }
+
+  completeRender(): void {
+    if (!this.#runtime.renderPending) return
+
+    this.#runtime.renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#post({ type: 'set-running', running: this.store.get().running })
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#runtime.feedSessionId = data.sessionId
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.#startMutation()
+      const quotes = hydrateMarketQuotes(data.quotes)
+      this.#runtime.quoteIndexBySymbol = new Map(
+        quotes.map((quote, index) => [quote.symbol, index]),
+      )
+      batch(() => {
+        this.#patch({
+          quotes,
+          workerReady: true,
+        })
+      })
+      return
+    }
+
+    if (data.sessionId !== this.#runtime.feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.#patch({
+      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
+    })
+    const feedBatch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(feedBatch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorker(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#post({ type: 'set-running', running: false })
+    this.#post({ type: 'reset', rowCount })
+  }
+
+  #startMutation(): void {
+    this.#runtime.renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #patch(patch: Partial<MarketFeedState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#runtime.worker?.postMessage(command)
+  }
+}
diff --git a/examples/lit/realtime-trading/src/feed/sp500-instruments.ts b/examples/lit/realtime-trading/src/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/lit/realtime-trading/src/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/lit/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/lit/realtime-trading/src/feed/worker/market-feed-engine.ts
new file mode 100644
index 0000000000..557f7c30a8
--- /dev/null
+++ b/examples/lit/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -0,0 +1,177 @@
+import { globalInstruments } from '../sp500-instruments'
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #tickIndex = 0
+
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue: market,
+        previousClose,
+        open,
+        high: open,
+        low: open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: createdAt,
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
+    this.#rowCursor = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyTicks(
+    tickCount: number,
+    updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#tickIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
+    const secondMix =
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/lit/realtime-trading/src/feed/worker/market-feed-protocol.ts b/examples/lit/realtime-trading/src/feed/worker/market-feed-protocol.ts
new file mode 100644
index 0000000000..21997ec89c
--- /dev/null
+++ b/examples/lit/realtime-trading/src/feed/worker/market-feed-protocol.ts
@@ -0,0 +1,70 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  previousClose: number
+  open: number
+  high: number
+  low: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  high: number
+  low: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'start'
+      rowCount: number
+      running: boolean
+      ticksPerSecond: number
+      publishIntervalMs: number
+      updateSparklines: boolean
+      sparklineSampleIntervalMs: number
+    }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'snapshot'
+      sessionId: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/lit/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/lit/realtime-trading/src/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..2b7a642fd9
--- /dev/null
+++ b/examples/lit/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -0,0 +1,143 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/lit/realtime-trading/src/index.css b/examples/lit/realtime-trading/src/index.css
new file mode 100644
index 0000000000..20264402de
--- /dev/null
+++ b/examples/lit/realtime-trading/src/index.css
@@ -0,0 +1,1048 @@
+:root {
+  color-scheme: dark;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
+  font-synthesis: none;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: var(--control-hover);
+  border-color: var(--border-strong);
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
+}
+
+.app-bar {
+  display: flex;
+  min-height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.header-actions,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: var(--muted);
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--muted);
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  grid-area: content;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.12rem 0 0.08rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
+}
+
+td {
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
+  overflow: hidden;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
+}
+
+td[data-column-id='market'] {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+td[data-column-id='name'] {
+  color: var(--text-strong);
+}
+
+td[data-column-id='symbol'] {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(even) {
+  background: var(--row-alt);
+}
+
+tbody tr:hover {
+  background: var(--panel-hover);
+}
+
+tbody tr[data-symbol-selected='true'] {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr[aria-selected='true'] {
+  background: rgb(76 145 228 / 13%);
+}
+
+td[aria-selected='true'] {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td[data-cell-focused='true'] {
+  background: rgb(70 139 222 / 21%);
+}
+
+td[aria-selected='true']::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td[data-selection-top='true']::after {
+  border-top-color: var(--blue);
+}
+
+td[data-selection-right='true']::after {
+  border-right-color: var(--blue);
+}
+
+td[data-selection-bottom='true']::after {
+  border-bottom-color: var(--blue);
+}
+
+td[data-selection-left='true']::after {
+  border-left-color: var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: var(--text);
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: var(--surface-control);
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.78;
+}
+
+.depth-bid {
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
+}
+
+.depth-ask {
+  background: var(--depth-ask);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: var(--text-strong);
+  font-size: 0.57rem;
+  text-shadow: 0 1px var(--background);
+}
+
+.quote-age {
+  color: var(--muted);
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 100%;
+  height: 1.35rem;
+  margin-left: auto;
+  color: var(--blue-soft);
+  overflow: visible;
+}
+
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: var(--surface-bar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  grid-area: footer;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
+.configurator {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.configurator > header {
+  display: flex;
+  height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  color: var(--text-strong);
+  background: var(--surface-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem var(--shell-inline-padding);
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
+}
+
+.primary-action:hover {
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text);
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.field small {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: var(--text);
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: var(--muted);
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  :root {
+    --sidebar-width: 15.625rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .trading-terminal {
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .market-panel {
+    min-height: 0;
+  }
+
+  .table-scroll {
+    min-height: 0;
+  }
+
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
+  }
+
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
+  }
+}
diff --git a/examples/lit/realtime-trading/src/main.ts b/examples/lit/realtime-trading/src/main.ts
new file mode 100644
index 0000000000..247f5f4e85
--- /dev/null
+++ b/examples/lit/realtime-trading/src/main.ts
@@ -0,0 +1,24 @@
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { TradingBenchmarkController } from './benchmark/trading-benchmark-controller'
+import { MarketFeedController } from './feed/market-feed-controller'
+import './shell/TradingShell'
+import './index.css'
+
+@customElement('realtime-trading-app')
+export class RealtimeTradingApp extends LitElement {
+  readonly #feed = new MarketFeedController()
+  readonly #benchmark = new TradingBenchmarkController(this.#feed)
+  readonly #stop = { feed: null as (() => void) | null, benchmark: null as (() => void) | null }
+  protected createRenderRoot() { return this }
+  connectedCallback() {
+    super.connectedCallback()
+    this.#stop.feed = this.#feed.start()
+    this.#stop.benchmark = this.#benchmark.start()
+  }
+  disconnectedCallback() {
+    this.#stop.benchmark?.(); this.#stop.feed?.()
+    super.disconnectedCallback()
+  }
+  protected render() { return html`<trading-shell .controller=${this.#benchmark} .feed=${this.#feed}></trading-shell>` }
+}
diff --git a/examples/lit/realtime-trading/src/shell/AppHeader.ts b/examples/lit/realtime-trading/src/shell/AppHeader.ts
new file mode 100644
index 0000000000..18e823d7eb
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/AppHeader.ts
@@ -0,0 +1,16 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ControllerElement } from './controller-element'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+
+@customElement('trading-app-header')
+export class AppHeader extends ControllerElement {
+  @property({ attribute: false }) feed!: MarketFeedController
+  @property({ type: Boolean }) sidebarOpen = true
+  @property({ attribute: false }) toggleSidebar: () => void = () => undefined
+  protected firstUpdated() { this.observe(this.feed.store) }
+  protected render() {
+    const state = this.feed.store.get()
+    return html`<header class="app-bar"><div class="brand"><strong>MARKET MONITOR</strong></div><div class="header-actions"><span class="feed-status ${state.workerReady && state.running ? 'is-running' : ''}" data-testid="feed-status"><span class="status-dot" aria-hidden="true"></span>${!state.workerReady ? 'FEED CONNECTING' : state.running ? 'FEED LIVE' : 'FEED PAUSED'}</span><button class="sidebar-toggle" type="button" aria-expanded=${this.sidebarOpen} aria-controls="benchmark-configurator" aria-label=${this.sidebarOpen ? 'Close configurator' : 'Open configurator'} @click=${this.toggleSidebar}><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect><path d="M12.5 3v14"></path></svg></button></div></header>`
+  }
+}
diff --git a/examples/lit/realtime-trading/src/shell/Configurator.ts b/examples/lit/realtime-trading/src/shell/Configurator.ts
new file mode 100644
index 0000000000..6acac808ca
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/Configurator.ts
@@ -0,0 +1,46 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from '../feed/feed-sample-rates'
+import { FORCED_VIRTUALIZATION_ROW_COUNT, resolveVirtualScrollMode } from '../table/trading-row-virtualizer'
+import { configuratorOptions } from './configurator-options'
+import { ControllerElement } from './controller-element'
+import './Diagnostics'
+import './SelectedInstrument'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const value = (event: Event) => (event.target as HTMLInputElement | HTMLSelectElement).value
+const number = (event: Event) => Number(value(event))
+const checked = (event: Event) => (event.target as HTMLInputElement).checked
+const options = (items: ReadonlyArray<{ readonly label: string; readonly value: number | string }>) => repeat(items, (item) => item.value, (item) => html`<option value=${item.value}>${item.label}</option>`)
+
+@customElement('trading-configurator')
+export class Configurator extends ControllerElement {
+  @property({ attribute: false }) controller!: TradingBenchmarkController
+  @property({ attribute: false }) feed!: MarketFeedController
+  protected firstUpdated() { this.observe(this.controller.store); this.observe(this.controller.renderAtoms.rendererMode); this.observe(this.feed.store) }
+  protected render() {
+    const feedState = this.feed.store.get(); const benchmark = this.controller.store.get()
+    const forced = feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    const virtualMode = resolveVirtualScrollMode(benchmark.requestedVirtualScrollMode, feedState.instrumentCount)
+    return html`<aside id="benchmark-configurator" class="configurator" aria-label="Benchmark configurator">
+      <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+      <section class="config-section" aria-labelledby="feed-settings"><h2 id="feed-settings">FEED</h2>
+        <button class="primary-action" type="button" data-testid="feed-toggle" @click=${this.feed.actions.toggle}>${feedState.running ? 'PAUSE FEED' : 'START FEED'}</button>
+        <label class="field"><span>Instruments (rows)</span><select data-testid="instrument-count-select" .value=${String(feedState.instrumentCount)} @change=${(event: Event) => { this.controller.actions.resetViewState(); this.feed.actions.setInstrumentCount(number(event)) }}>${options(configuratorOptions.instrumentCounts)}</select></label>
+        <label class="field rate-field"><span>Synthetic quote workload <strong data-testid="target-sample-rate">${rate.format(feedState.targetTicksPerSecond)} samples/s</strong></span><input data-testid="target-rate-slider" type="range" min="0" max=${feedSampleRateOptions.length - 1} step="1" .value=${String(feedSampleRateIndex(feedState.targetTicksPerSecond))} @change=${(event: Event) => this.feed.actions.setTargetRate(feedSampleRateAt(number(event)))} /><small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small></label>
+        <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" .value=${String(feedState.publishIntervalMs)} @change=${(event: Event) => this.feed.actions.setPublishInterval(number(event))}>${options(configuratorOptions.workerDeliveryIntervals)}</select><small>One coalesced worker message at this target cadence.</small></label>
+      </section>
+      <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
+        <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" .value=${virtualMode} ?disabled=${forced} @change=${(event: Event) => this.controller.actions.setVirtualScrollEnabled(value(event) === 'tanstack')}>${options(configuratorOptions.rowRenderingModes)}</select><small>${forced ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'}</small></label>
+        <label class="toggle-field"><input type="checkbox" .checked=${this.controller.renderAtoms.rendererMode.get() === 'swap'} @change=${(event: Event) => this.controller.actions.setRendererMode(checked(event) ? 'swap' : 'stable')} /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
+        <label class="toggle-field"><input type="checkbox" .checked=${feedState.updateSparklines} @change=${(event: Event) => this.feed.actions.setSparklineUpdates(checked(event))} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
+        <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" .value=${String(feedState.sparklineSampleIntervalMs)} @change=${(event: Event) => this.feed.actions.setSparklineSampleInterval(number(event))}>${options(configuratorOptions.intradaySamplingIntervals)}</select></label>
+      </section>
+      <section class="config-section" aria-labelledby="stress-actions"><h2 id="stress-actions">STRESS ACTIONS</h2><div class="action-grid"><button type="button" @click=${this.feed.actions.runBurst}>RUN 25K BURST</button><button type="button" @click=${this.controller.actions.resetMarket}>RESET SESSION</button></div></section>
+      <trading-diagnostics .controller=${this.controller}></trading-diagnostics><trading-selected-instrument .controller=${this.controller} .feed=${this.feed}></trading-selected-instrument>
+    </aside>`
+  }
+}
diff --git a/examples/lit/realtime-trading/src/shell/Diagnostics.ts b/examples/lit/realtime-trading/src/shell/Diagnostics.ts
new file mode 100644
index 0000000000..59312e9dda
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/Diagnostics.ts
@@ -0,0 +1,36 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { ControllerElement } from './controller-element'
+import type { NamedInvocationRate } from '../benchmark/benchmark-monitor'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const ms = (value: number) => `${value.toFixed(2)} ms`
+const invocations = (values: ReadonlyArray<NamedInvocationRate>) => { const active = values.filter((entry) => entry.callsPerSecond > 0); return active.length ? active.map((entry) => `${entry.name} ${rate.format(entry.callsPerSecond)}`).join(' · ') : '—' }
+@customElement('trading-diagnostics')
+export class Diagnostics extends ControllerElement {
+  @property({ attribute: false }) controller!: TradingBenchmarkController
+  protected firstUpdated() { this.observe(this.controller.store) }
+  protected render() {
+    const state = this.controller.store.get(); const metrics = state.metrics
+    const items = [
+      ['Mounted cells', integer.format(state.mountedCells), ''], ['Live components', integer.format(state.liveComponents), ''],
+      ['Created / destroyed', `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`, ''],
+      ['Renderer callbacks / s', rate.format(metrics.cellRendererCallsPerSecond), 'cell-render-rate'],
+      ['Component executions / s', rate.format(metrics.componentRenderCallsPerSecond), 'component-render-rate'],
+      ['Executions by component / s', invocations(metrics.componentRenderRates), 'component-render-breakdown'],
+      ['Callbacks by column / s', invocations(metrics.cellRendererRates), 'cell-render-breakdown'],
+      ['DOM mutation records / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'],
+      ['Core row model calls / s', metrics.rowModelCallsPerSecond.toFixed(1), 'row-model-call-rate'],
+      ['Core row model avg / max', `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, 'row-model-duration'],
+      ['Visible rows', integer.format(metrics.visibleRows), 'visible-row-count'],
+      ['Worker messages', integer.format(metrics.workerMessages), 'worker-messages'],
+      ['Worker-coalesced updates / s', rate.format(metrics.supersededUpdatesPerSecond), 'superseded-update-rate'],
+      ['Last samples / updated rows', `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`, ''],
+      ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''], ['JS heap', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, ''],
+    ] as const
+    return html`<section class="config-section diagnostics" aria-labelledby="diagnostics"><h2 id="diagnostics">DIAGNOSTICS</h2><dl>${repeat(items, (item) => item[0], (item) => html`<div><dt>${item[0]}</dt><dd data-testid=${item[2] || undefined}>${item[1]}</dd></div>`)}</dl></section>`
+  }
+}
diff --git a/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts b/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
new file mode 100644
index 0000000000..77924ab04a
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
@@ -0,0 +1,12 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ControllerElement } from './controller-element'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+@customElement('trading-market-statusbar')
+export class MarketStatusbar extends ControllerElement {
+  @property({ attribute: false }) controller!: TradingBenchmarkController
+  protected firstUpdated() { this.observe(this.controller.store) }
+  protected render() { const state = this.controller.store.get(); return html`<footer class="market-statusbar"><span>MESSAGE SAMPLES <strong>${integer.format(state.metrics.lastBatchSize)}</strong></span><span>ROW UPDATES <strong>${integer.format(state.metrics.lastUpdateCount)}</strong></span><span>HOSTS <strong>${integer.format(state.mountedCells)}</strong></span><span>COMPONENTS <strong>${integer.format(state.liveComponents)}</strong></span></footer>` }
+}
diff --git a/examples/lit/realtime-trading/src/shell/MetricsStrip.ts b/examples/lit/realtime-trading/src/shell/MetricsStrip.ts
new file mode 100644
index 0000000000..cb3597b996
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/MetricsStrip.ts
@@ -0,0 +1,27 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { ControllerElement } from './controller-element'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const ms = (value: number) => `${value.toFixed(2)} ms`
+@customElement('trading-metrics-strip')
+export class MetricsStrip extends ControllerElement {
+  @property({ attribute: false }) controller!: TradingBenchmarkController
+  protected firstUpdated() { this.observe(this.controller.store) }
+  protected render() {
+    const state = this.controller.store.get(); const metrics = state.metrics
+    const items = [
+      ['WORKER SAMPLES', rate.format(metrics.actualTicksPerSecond), 'generated samples/s', 'actual-rate'],
+      ['ROW UPDATES', rate.format(metrics.rowUpdatesPerSecond), 'unique rows applied/s', 'row-update-rate'],
+      ['MESSAGES', metrics.workerMessagesPerSecond.toFixed(1), 'worker messages/s', 'message-rate'],
+      ['STATE APPLIES', metrics.stateApplicationsPerSecond.toFixed(1), 'quote snapshots/s', 'state-apply-rate'],
+      ['TABLE COMMITS', metrics.tableRendersPerSecond.toFixed(1), 'completed renders/s', 'table-render-rate'],
+      ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
+      ['P95 RENDER', ms(metrics.p95RenderMs), `max ${ms(metrics.maxRenderMs)}`, ''],
+      ['LONG FRAMES', state.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', state.longAnimationFramesSupported ? `worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
+    ] as const
+    return html`<section class="metrics-strip" aria-label="Live performance metrics">${repeat(items, (item) => item[0], (item) => html`<article><span>${item[0]}</span><strong data-testid=${item[3] || undefined}>${item[1]}</strong><small>${item[2]}</small></article>`)}</section>`
+  }
+}
diff --git a/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts b/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
new file mode 100644
index 0000000000..fdae1d071a
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
@@ -0,0 +1,16 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ControllerElement } from './controller-element'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+@customElement('trading-selected-instrument')
+export class SelectedInstrument extends ControllerElement {
+  @property({ attribute: false }) controller!: TradingBenchmarkController
+  @property({ attribute: false }) feed!: MarketFeedController
+  protected firstUpdated() { this.observe(this.controller.renderAtoms.selectedSymbol); this.observe(this.feed.store) }
+  protected render() {
+    const quote = this.feed.getQuoteBySymbol(this.feed.store.get().quotes, this.controller.renderAtoms.selectedSymbol.get())
+    return html`<section class="config-section selected-instrument" data-testid="selected-instrument"><h2>SELECTED INSTRUMENT</h2>${quote ? html`<div class="selection"><div><strong>${quote.symbol}</strong><span>${quote.company}</span></div><small>${quote.venue}</small></div><dl><div><dt>Last</dt><dd>${quote.price.toFixed(2)}</dd></div><div><dt>Bid / ask</dt><dd>${quote.bid.toFixed(2)} / ${quote.ask.toFixed(2)}</dd></div></dl>` : html`<p>Click or begin a cell selection in any row to inspect its instrument.</p>`}</section>`
+  }
+}
diff --git a/examples/lit/realtime-trading/src/shell/TradingShell.ts b/examples/lit/realtime-trading/src/shell/TradingShell.ts
new file mode 100644
index 0000000000..39d3520ef0
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/TradingShell.ts
@@ -0,0 +1,25 @@
+import { html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { ControllerElement } from './controller-element'
+import './AppHeader'
+import './Configurator'
+import './MarketStatusbar'
+import './MetricsStrip'
+import '../table/TradingTable'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+@customElement('trading-shell')
+export class TradingShell extends ControllerElement {
+  @property({ attribute: false }) controller!: TradingBenchmarkController
+  @property({ attribute: false }) feed!: MarketFeedController
+  @state() private sidebarOpen = true
+  protected render() {
+    return html`<main class="trading-terminal ${this.sidebarOpen ? '' : 'is-sidebar-collapsed'}">
+      <div class="shell-header"><trading-app-header .feed=${this.feed} .sidebarOpen=${this.sidebarOpen} .toggleSidebar=${() => { this.sidebarOpen = !this.sidebarOpen }}></trading-app-header>${import.meta.env.DEV ? html`<aside class="development-warning">DEV BUILD — use the production build before recording results.</aside>` : null}</div>
+      <section class="market-panel" aria-label="Live synthetic quotes"><trading-metrics-strip .controller=${this.controller}></trading-metrics-strip><trading-data-table .controller=${this.controller} .feed=${this.feed}></trading-data-table></section>
+      <trading-market-statusbar .controller=${this.controller}></trading-market-statusbar>
+      <div class="sidebar-slot">${this.sidebarOpen ? html`<trading-configurator .controller=${this.controller} .feed=${this.feed}></trading-configurator>` : null}</div>
+    </main>`
+  }
+}
diff --git a/examples/lit/realtime-trading/src/shell/configurator-options.ts b/examples/lit/realtime-trading/src/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/lit/realtime-trading/src/shell/controller-element.ts b/examples/lit/realtime-trading/src/shell/controller-element.ts
new file mode 100644
index 0000000000..e028b87e19
--- /dev/null
+++ b/examples/lit/realtime-trading/src/shell/controller-element.ts
@@ -0,0 +1,15 @@
+import { LitElement } from 'lit'
+import type { Subscription } from '@tanstack/store'
+
+export abstract class ControllerElement extends LitElement {
+  readonly #subscriptions: Array<Subscription> = []
+  protected createRenderRoot() { return this }
+  protected observe(source: { subscribe: (listener: () => void) => Subscription }): void {
+    this.#subscriptions.push(source.subscribe(() => this.requestUpdate()))
+  }
+  disconnectedCallback() {
+    for (const subscription of this.#subscriptions) subscription.unsubscribe()
+    this.#subscriptions.length = 0
+    super.disconnectedCallback()
+  }
+}
diff --git a/examples/lit/realtime-trading/src/table/TradingTable.ts b/examples/lit/realtime-trading/src/table/TradingTable.ts
new file mode 100644
index 0000000000..f05a6f46a1
--- /dev/null
+++ b/examples/lit/realtime-trading/src/table/TradingTable.ts
@@ -0,0 +1,109 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { createRef, ref } from 'lit/directives/ref.js'
+import { VirtualizerController } from '@tanstack/lit-virtual'
+import { FlexRender, TableController, createFilteredRowModel, createSortedRowModel, filterFn_includesString, sortFn_basic, stockFeatures, tableFeatures } from '@tanstack/lit-table'
+import { startTableBenchmark } from '../benchmark/table-benchmark'
+import { ControllerElement } from '../shell/controller-element'
+import { createTradingColumns, readMeasuredRows } from './table-config/trading-columns'
+import { TradingGridPointerController, handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from './table-interactions'
+import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode } from './trading-row-virtualizer'
+import './table-config/quote-cells'
+import type { Ref } from 'lit/directives/ref.js'
+import type { LitTable } from '@tanstack/lit-table'
+import type { MarketQuote } from '../feed/market-data'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+const features = tableFeatures({
+  ...stockFeatures,
+  filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString }, sortFns: { basic: sortFn_basic },
+})
+interface SelectedTableState {
+  sorting: unknown
+  columnFilters: unknown
+  columnOrder: unknown
+  rowSelection: unknown
+  cellSelection: unknown
+}
+type TradingTableInstance = LitTable<typeof features, MarketQuote, SelectedTableState>
+
+@customElement('trading-data-table')
+export class TradingTable extends ControllerElement {
+  @property({ attribute: false }) controller!: TradingBenchmarkController
+  @property({ attribute: false }) feed!: MarketFeedController
+  readonly #tableController = new TableController<typeof features, MarketQuote>(this)
+  readonly #scrollRef: Ref<HTMLDivElement> = createRef()
+  readonly #tableRef: Ref<HTMLTableElement> = createRef()
+  readonly #virtualizer = new VirtualizerController<HTMLDivElement, HTMLTableRowElement>(this, {
+    count: 0, getScrollElement: () => this.#scrollRef.value ?? null,
+    estimateSize: () => TRADING_ROW_HEIGHT, overscan: TRADING_ROW_OVERSCAN,
+  })
+  readonly #pointer = new TradingGridPointerController()
+  readonly #drag = { columnId: null as string | null, source: null as HTMLTableCellElement | null, target: null as HTMLTableCellElement | null }
+  readonly #layout = { manuallyResized: false }
+  #table?: TradingTableInstance
+  #columns?: ReturnType<typeof createTradingColumns<typeof features>>
+  #cleanup: Array<() => void> = []
+
+  protected firstUpdated() {
+    this.observe(this.feed.store); this.observe(this.controller.store); this.observe(this.controller.renderAtoms.rendererMode); this.observe(this.controller.renderAtoms.selectedSymbol)
+    const table = this.#table
+    if (!table) return
+    const sizing = table.atoms.columnSizing.subscribe(() => this.#writeColumnSizes())
+    const order = table.atoms.columnOrder.subscribe(() => this.#writeColumnSizes())
+    const resizing = table.atoms.columnResizing.subscribe((state) => { if (state.isResizingColumn !== false) this.#layout.manuallyResized = true })
+    const resizeObserver = new ResizeObserver(() => this.#fitAvailableWidth())
+    if (this.#scrollRef.value) resizeObserver.observe(this.#scrollRef.value)
+    this.#cleanup.push(() => sizing.unsubscribe(), () => order.unsubscribe(), () => resizing.unsubscribe(), () => resizeObserver.disconnect(), startTableBenchmark(this.controller))
+    this.#writeColumnSizes(); this.#fitAvailableWidth(); this.feed.completeRender()
+  }
+  protected updated() { this.#writeColumnSizes(); this.feed.completeRender() }
+  disconnectedCallback() { for (const cleanup of this.#cleanup) cleanup(); this.#cleanup.length = 0; super.disconnectedCallback() }
+
+  #writeColumnSizes() {
+    const element = this.#tableRef.value; const table = this.#table
+    if (!element || !table) return
+    for (const header of table.getFlatHeaders()) { element.style.setProperty(`--header-${header.id}-size`, String(header.getSize())); element.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize())) }
+    element.style.width = `${table.getTotalSize()}px`
+  }
+  #fitAvailableWidth() {
+    const container = this.#scrollRef.value; const table = this.#table
+    if (!container || !table || this.#layout.manuallyResized) return
+    const width = table.getTotalSize(); if (container.clientWidth <= width + 1 || width <= 0) return
+    const ratio = container.clientWidth / width
+    table.setColumnSizing(Object.fromEntries(table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio])))
+  }
+  #clearDrag = () => { this.#drag.source?.classList.remove('is-column-dragging'); this.#drag.target?.classList.remove('is-column-drop-target'); this.#drag.columnId = null; this.#drag.source = null; this.#drag.target = null }
+  #showDrop(columnId: string, element: HTMLTableCellElement | null) { this.#drag.target?.classList.remove('is-column-drop-target'); this.#drag.target = null; if (this.#drag.columnId === columnId || !element) return; element.classList.add('is-column-drop-target'); this.#drag.target = element }
+
+  protected render() {
+    this.#columns ??= createTradingColumns<typeof features>(this.controller)
+    const table = this.#tableController.table({
+      key: 'lit-realtime-trading', features, columns: this.#columns,
+      data: this.feed.store.get().quotes, getRowId: (row) => row.id,
+      columnResizeMode: 'onChange',
+      defaultColumn: { minSize: 56, maxSize: 800 }, autoResetCellSelection: false,
+    }, (state) => ({ sorting: state.sorting, columnFilters: state.columnFilters, columnOrder: state.columnOrder, rowSelection: state.rowSelection, cellSelection: state.cellSelection }))
+    this.#table = table
+    const rows = readMeasuredRows(() => table.getRowModel().rows)
+    const benchmark = this.controller.store.get()
+    const virtualMode = resolveVirtualScrollMode(benchmark.requestedVirtualScrollMode, this.feed.store.get().instrumentCount)
+    const virtualizer = this.#virtualizer.getVirtualizer()
+    virtualizer.setOptions({ ...virtualizer.options, count: rows.length, enabled: virtualMode === 'tanstack', getItemKey: (index) => rows[index]?.id ?? index })
+    const virtualRows = virtualizer.getVirtualItems()
+    this.controller.actions.setRenderedRowCount(virtualMode === 'tanstack' ? virtualRows.length : rows.length)
+    const range = virtualizer.range
+    const visibleRange = virtualMode === 'tanstack' && range && rows.length ? { start: Math.min(range.startIndex, rows.length - 1), end: Math.min(range.endIndex, rows.length - 1) } : null
+    const renderRow = (row: (typeof rows)[number], virtualRow?: (typeof virtualRows)[number]) => html`<tr class=${virtualRow ? 'virtual-table-row' : ''} style=${virtualRow ? `transform:translateY(${virtualRow.start}px)` : ''} data-virtual-index=${virtualRow?.index ?? undefined} data-symbol=${row.original.symbol} data-row-id=${row.original.id} data-symbol-selected=${this.controller.renderAtoms.selectedSymbol.get() === row.original.symbol ? 'true' : undefined} title=${row.original.company} aria-selected=${row.getIsSelected()}>
+      ${repeat(row.getVisibleCells(), (cell) => cell.id, (cell) => { const edges = cell.getSelectionEdges(); return html`<td style="width:calc(var(--col-${cell.column.id}-size) * 1px)" data-column-id=${cell.column.id} data-cell-focused=${cell.getIsFocused() ? 'true' : undefined} data-selection-top=${edges.top ? 'true' : undefined} data-selection-right=${edges.right ? 'true' : undefined} data-selection-bottom=${edges.bottom ? 'true' : undefined} data-selection-left=${edges.left ? 'true' : undefined} aria-selected=${cell.getIsSelected()} tabindex=${cell.getTabIndex()}>${FlexRender({ cell })}</td>` })}</tr>`
+    return html`<div ${ref(this.#scrollRef)} class="table-scroll ${virtualMode === 'tanstack' ? 'is-virtualized' : ''}" data-trading-table>
+      <table ${ref(this.#tableRef)} class="trading-data-grid ${virtualMode === 'tanstack' ? 'virtual-table' : ''}" data-testid="trading-table" role="grid" aria-multiselectable="true" tabindex="0" @keydown=${(event: KeyboardEvent) => handleCellNavigation(table, event)}>
+        <thead>${repeat(table.getHeaderGroups(), (group) => group.id, (group) => html`<tr>${repeat(group.headers, (header) => header.id, (header) => { const leaf = header.subHeaders.length === 0; const sorted = header.column.getIsSorted(); return html`<th colspan=${header.colSpan} style="width:calc(var(--header-${header.id}-size) * 1px)" aria-sort=${leaf ? sortAriaValue(sorted) : undefined} class="${!leaf ? 'column-group-header' : ''} ${leaf && !['market','name','symbol'].includes(header.column.id) ? 'numeric-header' : ''}">${!header.isPlaceholder ? leaf ? html`<div class="leaf-header-content" @dragover=${(event: DragEvent) => { event.preventDefault(); this.#showDrop(header.column.id, (event.currentTarget as HTMLElement).closest('th')) }} @drop=${(event: DragEvent) => { event.preventDefault(); const source = event.dataTransfer?.getData('text/plain') || this.#drag.columnId; if (source) table.setColumnOrder(reorderColumnIds(table.getVisibleLeafColumns().map((column) => column.id), source, header.column.id)); this.#clearDrag() }}><button type="button" class="column-drag-handle" draggable="true" aria-label="Move ${header.column.id} column" @dragstart=${(event: DragEvent) => { this.#drag.columnId = header.column.id; this.#drag.source = (event.currentTarget as HTMLElement).closest('th'); this.#drag.source?.classList.add('is-column-dragging'); if (event.dataTransfer) { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', header.column.id) } }} @dragend=${this.#clearDrag}>⋮⋮</button><button type="button" class="sort-header-button ${header.column.getCanSort() ? 'is-sortable' : ''}" ?disabled=${!header.column.getCanSort()} @click=${header.column.getToggleSortingHandler()}><span class="header-label">${FlexRender({ header })}</span>${header.column.getCanSort() ? html`<span class="sort-indicator ${sorted ? 'is-active' : ''}" aria-hidden="true">${sortIndicator(sorted)}</span>` : null}</button></div>${header.column.getCanResize() ? html`<div class="column-resize-handle ${header.column.getIsResizing() ? 'is-resizing' : ''}" role="separator" aria-orientation="vertical" @dblclick=${() => header.column.resetSize()} @mousedown=${header.getResizeHandler()} @touchstart=${header.getResizeHandler()}></div>` : null}` : FlexRender({ header }) : null}</th>` })}</tr>`)}</thead>
+        <tbody class=${virtualMode === 'tanstack' ? 'virtual-table-body' : ''} style=${virtualMode === 'tanstack' ? `height:${virtualizer.getTotalSize()}px` : ''} data-source-row-count=${this.feed.store.get().quotes.length} @mousedown=${(event: MouseEvent) => this.#pointer.handleMouseDown(table, event, this.controller.actions.selectSymbol)} @pointerover=${(event: MouseEvent) => this.#pointer.handlePointerOver(table, event)} @mouseleave=${() => this.#pointer.resetPointerCell()} @click=${(event: MouseEvent) => this.#pointer.handleClick(table, event)}>${virtualMode === 'tanstack' ? repeat(virtualRows, (item) => item.key, (item) => renderRow(rows[item.index], item)) : repeat(rows, (row) => row.id, (row) => renderRow(row))}</tbody>
+      </table></div>
+      ${virtualMode === 'tanstack' ? html`<footer class="virtual-scroll-footer" data-testid="virtual-scroll-footer"><span>TanStack · Total · ${rows.length} rows · ${table.getVisibleLeafColumns().length} columns</span><span data-testid="visible-row-range">${visibleRange ? `Current · rows ${visibleRange.start}..${visibleRange.end}` : 'Current · rows —'}</span></footer>` : null}`
+  }
+}
diff --git a/examples/lit/realtime-trading/src/table/table-config/quote-cells.ts b/examples/lit/realtime-trading/src/table/table-config/quote-cells.ts
new file mode 100644
index 0000000000..0545766dd7
--- /dev/null
+++ b/examples/lit/realtime-trading/src/table/table-config/quote-cells.ts
@@ -0,0 +1,66 @@
+import { LitElement, html, svg } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+export const quoteCellLifecycle = { created: 0, destroyed: 0 }
+export const quoteCellRendererNames = ['Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid', 'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday'] as const
+export const quoteComponentNames = ['PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell', 'PercentChangeCell', 'SparklineCell'] as const
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+const counters = <Name extends string>(names: ReadonlyArray<Name>) => Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0, componentRenderCalls: 0,
+  cellRendererCallsByName: counters(quoteCellRendererNames),
+  componentRenderCallsByName: counters(quoteComponentNames),
+}
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T { quoteRenderDiagnostics.cellRendererCalls++; quoteRenderDiagnostics.cellRendererCallsByName[name]++; return value }
+const signed = (value: number) => `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+
+abstract class QuoteElement extends LitElement {
+  protected abstract readonly componentName: QuoteComponentName
+  protected createRenderRoot() { return this }
+  connectedCallback() { super.connectedCallback(); quoteCellLifecycle.created++ }
+  disconnectedCallback() { quoteCellLifecycle.destroyed++; super.disconnectedCallback() }
+  protected recordRender() { quoteRenderDiagnostics.componentRenderCalls++; quoteRenderDiagnostics.componentRenderCallsByName[this.componentName]++ }
+}
+
+@customElement('quote-price-cell')
+export class PriceCell extends QuoteElement {
+  protected readonly componentName = 'PriceCell'
+  @property({ type: Number }) price = 0
+  @property({ type: Number }) move = 0
+  @property({ attribute: false }) select: () => void = () => undefined
+  protected render() { this.recordRender(); return html`<button class="price-button ${this.move >= 0 ? 'quote-up' : 'quote-down'}" @click=${this.select}>${this.price.toFixed(2)}</button>` }
+}
+
+abstract class MoveCell extends QuoteElement {
+  @property({ type: Number }) move = 0
+  protected direction: 'up' | 'down' | null = null
+  protected indicator = ''
+  protected render() { this.recordRender(); const direction = this.direction ?? (this.move >= 0 ? 'up' : 'down'); return html`<span class="move-cell quote-${direction}">${this.indicator}${signed(this.move)}</span>` }
+}
+@customElement('quote-stable-move') export class StableMoveCell extends MoveCell { protected readonly componentName = 'StableMoveCell' }
+@customElement('quote-up-move') export class UpMoveCell extends MoveCell { protected readonly componentName = 'UpMoveCell'; protected direction = 'up' as const; protected indicator = '▲ ' }
+@customElement('quote-down-move') export class DownMoveCell extends MoveCell { protected readonly componentName = 'DownMoveCell'; protected direction = 'down' as const; protected indicator = '▼ ' }
+
+@customElement('quote-percent-change')
+export class PercentChangeCell extends QuoteElement {
+  protected readonly componentName = 'PercentChangeCell'
+  @property({ type: Number }) value = 0
+  protected render() { this.recordRender(); return html`<span class="percent-change-cell ${this.value >= 0 ? 'quote-up' : 'quote-down'}">${signed(this.value)}%</span>` }
+}
+
+@customElement('quote-sparkline')
+export class SparklineCell extends QuoteElement {
+  protected readonly componentName = 'SparklineCell'
+  @property({ attribute: false }) values: ReadonlyArray<number> = []
+  protected render() {
+    this.recordRender()
+    const first = this.values[0] ?? 0
+    const range = this.values.reduce((current, value) => ({ min: Math.min(current.min, value), max: Math.max(current.max, value) }), { min: first, max: first })
+    const height = range.max - range.min || 1
+    const denominator = Math.max(1, this.values.length - 1)
+    const points = this.values.map((value, index) => `${((index / denominator) * 100).toFixed(1)},${(22 - ((value - range.min) / height) * 20).toFixed(1)}`).join(' ')
+    const rising = (this.values.at(-1) ?? 0) >= first
+    return svg`<svg class="sparkline ${rising ? 'quote-up' : 'quote-down'}" viewBox="0 0 100 24" preserveAspectRatio="none"><polyline points=${points}></polyline></svg>`
+  }
+}
diff --git a/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts b/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
new file mode 100644
index 0000000000..b1d01eca62
--- /dev/null
+++ b/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
@@ -0,0 +1,67 @@
+import { html } from 'lit'
+import { recordCellRender } from './quote-cells'
+import type { ColumnDef, TableFeatures } from '@tanstack/lit-table'
+import type { MarketQuote } from '../../feed/market-data'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
+
+export type RendererMode = 'stable' | 'swap'
+export interface CoreTableState { sorting: Array<{ id: string; desc: boolean }>; columnFilters: Array<{ id: string; value: unknown }> }
+interface TradingCellContext { row: { original: MarketQuote } }
+interface TradingColumnDefinition {
+  id: string
+  header: string
+  size?: number
+  columns?: Array<TradingColumnDefinition>
+  accessorFn?: (row: MarketQuote) => unknown
+  enableSorting?: boolean
+  filterFn?: 'includesString'
+  sortFn?: 'basic'
+  cell?: (context: TradingCellContext) => unknown
+}
+const compact = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+
+export function createTradingColumns<TFeatures extends TableFeatures>(controller: TradingBenchmarkController): Array<ColumnDef<TFeatures, MarketQuote>> {
+  const columns: Array<TradingColumnDefinition> = [
+    { id: 'instrument', header: 'Instrument', columns: [
+      { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', row.original.venue) },
+      { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', row.original.company) },
+      { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', row.original.symbol) },
+    ] },
+    { id: 'priceAndChange', header: 'Price & Change', columns: [
+      { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: ({ row }) => recordCellRender('Last', html`<quote-price-cell .price=${row.original.price} .move=${getDayChange(row.original)} .select=${() => controller.actions.selectSymbol(row.original.symbol)}></quote-price-cell>`) },
+      { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', renderMove(controller.renderAtoms.rendererMode.get(), getDayChange(row.original))) },
+      { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: ({ row }) => recordCellRender('ChangePercent', html`<quote-percent-change .value=${getDayChangePercent(row.original)}></quote-percent-change>`) },
+    ] },
+    { id: 'orderBook', header: 'Order Book', columns: [
+      { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
+      { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compact.format(row.original.bidSize)) },
+      { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
+      { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compact.format(row.original.askSize)) },
+    ] },
+    { id: 'session', header: 'Session', columns: [
+      { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
+      { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
+      { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
+    ] },
+    { id: 'chart', header: 'Chart', columns: [
+      { id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: ({ row }) => recordCellRender('Intraday', html`<quote-sparkline .values=${row.original.history}></quote-sparkline>`) },
+    ] },
+  ]
+  return columns as unknown as Array<ColumnDef<TFeatures, MarketQuote>>
+}
+
+function renderMove(mode: RendererMode, move: number) {
+  if (mode === 'stable') return html`<quote-stable-move .move=${move}></quote-stable-move>`
+  return move >= 0 ? html`<quote-up-move .move=${move}></quote-up-move>` : html`<quote-down-move .move=${move}></quote-down-move>`
+}
+
+export const rowModelDiagnostics = { hasMeasurement: false, calls: 0, totalDurationMs: 0, maxDurationMs: 0, lastRowCount: 0 }
+export const TRADING_COLUMN_COUNT = 14
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
+  const start = performance.now(); const rows = readRows(); const end = performance.now(); const duration = end - start
+  rowModelDiagnostics.calls++; rowModelDiagnostics.hasMeasurement = true; rowModelDiagnostics.totalDurationMs += duration; rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration); rowModelDiagnostics.lastRowCount = rows.length
+  try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* optional User Timing detail */ }
+  return rows
+}
+export function getDayChange(quote: MarketQuote): number { return quote.price - quote.previousClose }
+export function getDayChangePercent(quote: MarketQuote): number { return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100 }
diff --git a/examples/lit/realtime-trading/src/table/table-interactions.ts b/examples/lit/realtime-trading/src/table/table-interactions.ts
new file mode 100644
index 0000000000..1df83b2484
--- /dev/null
+++ b/examples/lit/realtime-trading/src/table/table-interactions.ts
@@ -0,0 +1,186 @@
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Record<string, SelectableGridCell>
+}
+
+interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Record<string, SelectableGridRow>
+  }
+}
+
+interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+  })
+}
+
+export class TradingGridPointerController {
+  #lastPointerCell: HTMLTableCellElement | null = null
+
+  handleMouseDown(
+    table: TradingGridTable,
+    event: MouseEvent,
+    selectSymbol: (symbol: string) => void,
+  ): void {
+    if (event.button !== 0) return
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+
+    this.#lastPointerCell = target.element
+    selectSymbol(target.cell.row.original.symbol)
+    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+  }
+
+  handlePointerOver(table: TradingGridTable, event: MouseEvent): void {
+    if ((event.buttons & 1) === 0) {
+      this.resetPointerCell()
+      return
+    }
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target || target.element === this.#lastPointerCell) return
+
+    this.#lastPointerCell = target.element
+    target.cell.getSelectionExtendHandler()(event)
+  }
+
+  handleClick(table: TradingGridTable, event: MouseEvent): void {
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+    selectRowFromPointer(table, target.cell.row, event)
+  }
+
+  resetPointerCell(): void {
+    this.#lastPointerCell = null
+  }
+
+  #findCellTarget(
+    table: TradingGridTable,
+    path: Array<EventTarget>,
+  ): SelectionCellTarget | null {
+    for (const target of path) {
+      if (!(target instanceof HTMLTableCellElement)) continue
+
+      const columnId = target.dataset['columnId']
+      const rowId =
+        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+      if (!columnId || !rowId) return null
+
+      const row = table.getRowModel().rowsById[rowId]
+      const cell = row.getAllCellsByColumnId()[columnId]
+      return { element: target, cell }
+    }
+
+    return null
+  }
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: KeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/lit/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/lit/realtime-trading/src/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..d733342a00
--- /dev/null
+++ b/examples/lit/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -0,0 +1,14 @@
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
diff --git a/examples/lit/realtime-trading/src/table/trading-table.ts b/examples/lit/realtime-trading/src/table/trading-table.ts
new file mode 100644
index 0000000000..3b6ca3f800
--- /dev/null
+++ b/examples/lit/realtime-trading/src/table/trading-table.ts
@@ -0,0 +1,3 @@
+export { TRADING_COLUMN_COUNT, rowModelDiagnostics } from './table-config/trading-columns'
+export type { CoreTableState, RendererMode } from './table-config/trading-columns'
+export type { VirtualScrollMode } from './trading-row-virtualizer'
diff --git a/examples/lit/realtime-trading/src/vite-env.d.ts b/examples/lit/realtime-trading/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/lit/realtime-trading/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts b/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..103d7e152a
--- /dev/null
+++ b/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,170 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the Lit realtime trading workload', async ({ page }) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
+    await expect(table).toBeVisible()
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
+
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('row-update-rate').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('message-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    await instrumentCount.selectOption('750')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(750)
+    expect(
+      await page.evaluate(
+        () => performance.getEntriesByName('tanstack-row-model').length > 0,
+      ),
+    ).toBe(true)
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/lit/realtime-trading/tsconfig.json b/examples/lit/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..41e49a782c
--- /dev/null
+++ b/examples/lit/realtime-trading/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022", "useDefineForClassFields": false, "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"], "skipLibCheck": true,
+    "moduleResolution": "bundler", "allowImportingTsExtensions": true,
+    "resolveJsonModule": true, "isolatedModules": true, "noEmit": true,
+    "experimentalDecorators": true, "strict": true, "noUnusedLocals": true,
+    "noUnusedParameters": true, "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "tests/e2e", "vite.config.ts"]
+}
diff --git a/examples/lit/realtime-trading/vite.config.ts b/examples/lit/realtime-trading/vite.config.ts
new file mode 100644
index 0000000000..a72243cea7
--- /dev/null
+++ b/examples/lit/realtime-trading/vite.config.ts
@@ -0,0 +1,2 @@
+import { defineConfig } from 'vite'
+export default defineConfig({ server: { port: 7783, allowedHosts: true } })
diff --git a/examples/octane/realtime-trading/README.md b/examples/octane/realtime-trading/README.md
new file mode 100644
index 0000000000..5d5d4c7a6c
--- /dev/null
+++ b/examples/octane/realtime-trading/README.md
@@ -0,0 +1,13 @@
+# Octane realtime trading
+
+Standalone realtime market-grid benchmark for the TanStack Octane Table adapter.
+It intentionally mirrors the Angular, React, Solid, Vue, Svelte, Preact, Lit,
+and Alpine examples: the same synthetic worker feed, controls, columns,
+selection, sorting/filtering, resizing, column ordering, diagnostics, and
+Full DOM/TanStack Virtual row rendering modes.
+
+```bash
+pnpm dev
+pnpm test:types
+pnpm build
+```
diff --git a/examples/octane/realtime-trading/index.html b/examples/octane/realtime-trading/index.html
new file mode 100644
index 0000000000..ddd15fcca9
--- /dev/null
+++ b/examples/octane/realtime-trading/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Octane Table</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsrx"></script>
+  </body>
+</html>
diff --git a/examples/octane/realtime-trading/package.json b/examples/octane/realtime-trading/package.json
new file mode 100644
index 0000000000..3f046665f1
--- /dev/null
+++ b/examples/octane/realtime-trading/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "tanstack-octane-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src",
+    "test:types": "tsrx-tsc --noEmit",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "dependencies": {
+    "@tanstack/octane-table": "^9.1.2",
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/virtual-core": "^3.13.36",
+    "octane": "0.1.21"
+  },
+  "devDependencies": {
+    "@tsrx/typescript-plugin": "^0.3.118",
+    "typescript": "6.0.3",
+    "vite": "^8.2.0"
+  }
+}
diff --git a/examples/octane/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/octane/realtime-trading/src/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..81f91d758e
--- /dev/null
+++ b/examples/octane/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -0,0 +1,368 @@
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells.tsrx'
+import { rowModelDiagnostics } from '../table/trading-table'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+  rowModelCallsPerSecond: number
+  rowModelAverageMs: number
+  rowModelMaxMs: number
+  visibleRows: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+  rowModelCallsPerSecond: 0,
+  rowModelAverageMs: 0,
+  rowModelMaxMs: 0,
+  visibleRows: 0,
+}
+
+const userTiming = { entryCount: 0 }
+
+export function recordMeasure(
+  name: string,
+  start: number,
+  end: number,
+  detail: Record<string, unknown>,
+): void {
+  try {
+    performance.measure(name, { start, end, detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('market-update-to-layout-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
+export function markBenchmarkAction(
+  name: string,
+  detail: Record<string, unknown> = {},
+): void {
+  try {
+    performance.mark(`benchmark:${name}`, { detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMarks()
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    renderSamples: [] as Array<number>,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+    previousRowModelCalls: 0,
+    previousRowModelDuration: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  recordCompletedRender(): void {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      const renderEndedAt = performance.now()
+      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      recordMeasure(
+        'market-update-to-layout-commit',
+        runtime.pendingRenderStartedAt,
+        renderEndedAt,
+        {},
+      )
+      runtime.pendingRenderStartedAt = null
+      runtime.tableRendersInSample++
+    }
+  }
+
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = tickCount
+    runtime.lastUpdateCount = updateCount
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const renderSamples = runtime.renderSamples
+    const sortedRenderSamples = [...renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const rowModelCalls =
+      rowModelDiagnostics.calls - runtime.previousRowModelCalls
+    const rowModelDuration =
+      rowModelDiagnostics.totalDurationMs - runtime.previousRowModelDuration
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const averageRenderMs =
+      renderSamples.length === 0
+        ? 0
+        : renderSamples.reduce((sum, value) => sum + value, 0) /
+          renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualTicksPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+      rowModelCallsPerSecond: (rowModelCalls / sampleDuration) * 1_000,
+      rowModelAverageMs:
+        rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
+      rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
+      visibleRows: rowModelDiagnostics.lastRowCount,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.renderSamples = []
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    rowModelDiagnostics.maxDurationMs = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/octane/realtime-trading/src/benchmark/table-benchmark.ts b/examples/octane/realtime-trading/src/benchmark/table-benchmark.ts
new file mode 100644
index 0000000000..ebeb1f89b8
--- /dev/null
+++ b/examples/octane/realtime-trading/src/benchmark/table-benchmark.ts
@@ -0,0 +1,19 @@
+import type { TradingBenchmarkController } from './trading-benchmark-controller'
+
+export function startTableBenchmark(
+  controller: TradingBenchmarkController,
+  tableBody: HTMLTableSectionElement | null,
+): () => void {
+  if (!tableBody) return () => undefined
+  controller.monitor.resetDomMutations()
+  const observer = new MutationObserver((records) => {
+    controller.monitor.recordDomMutations(records.length)
+  })
+  observer.observe(tableBody, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  })
+  return () => observer.disconnect()
+}
diff --git a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..316bb530e6
--- /dev/null
+++ b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,152 @@
+import { batch, createAtom, createStore } from '@tanstack/store'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from './benchmark-monitor'
+import type { FeedMetrics } from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+
+export interface TradingBenchmarkState {
+  requestedVirtualScrollMode: VirtualScrollMode
+  metrics: FeedMetrics
+  mountedCells: number
+  liveComponents: number
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  resetViewState: () => void
+  setRendererMode: (mode: RendererMode) => void
+  setVirtualScrollEnabled: (enabled: boolean) => void
+  setRenderedRowCount: (count: number) => void
+  selectSymbol: (symbol: string | null) => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  requestedVirtualScrollMode: 'none',
+  metrics: initialMetrics,
+  mountedCells: 0,
+  liveComponents: 0,
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly feed: MarketFeedController
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    stopObservingFeed: null as (() => void) | null,
+  }
+
+  constructor(feed: MarketFeedController) {
+    this.feed = feed
+    this.actions = {
+      resetViewState: () => {
+        this.renderAtoms.selectedSymbol.set(null)
+      },
+      setRendererMode: (mode) => {
+        this.renderAtoms.rendererMode.set(mode)
+      },
+      setVirtualScrollEnabled: (enabled) => {
+        if (
+          this.feed.store.get().instrumentCount >=
+          FORCED_VIRTUALIZATION_ROW_COUNT
+        ) {
+          return
+        }
+        this.#patch({
+          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
+        })
+      },
+      setRenderedRowCount: (count) => {
+        const mountedCells = count * TRADING_COLUMN_COUNT
+        if (mountedCells !== this.store.get().mountedCells) {
+          this.#patch({ mountedCells })
+        }
+      },
+      selectSymbol: (symbol) => {
+        this.renderAtoms.selectedSymbol.set(symbol)
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.store.setState((state) => ({
+            ...state,
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.feed.actions.reset()
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    this.#runtime.stopObservingFeed = this.feed.observe({
+      messageReceived: () => this.monitor.recordWorkerMessage(),
+      mutationStarted: () => this.monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+      renderCommitted: () => this.monitor.recordCompletedRender(),
+    })
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.stopObservingFeed?.()
+    this.#runtime.longAnimationFrameObserver = null
+    this.#runtime.stopObservingFeed = null
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    if (this.monitor.shouldPublish(now)) {
+      this.#publishMetrics(this.monitor.publish(now))
+    }
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    this.#patch({
+      metrics,
+      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+}
diff --git a/examples/octane/realtime-trading/src/feed/feed-sample-rates.ts b/examples/octane/realtime-trading/src/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/octane/realtime-trading/src/feed/market-data.ts b/examples/octane/realtime-trading/src/feed/market-data.ts
new file mode 100644
index 0000000000..6231865d3f
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './worker/market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/octane/realtime-trading/src/feed/market-feed-config.ts b/examples/octane/realtime-trading/src/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/octane/realtime-trading/src/feed/market-feed-controller.ts b/examples/octane/realtime-trading/src/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..73716811be
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/market-feed-controller.ts
@@ -0,0 +1,240 @@
+import { batch, createStore } from '@tanstack/store'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedState {
+  workerReady: boolean
+  running: boolean
+  instrumentCount: number
+  targetTicksPerSecond: number
+  publishIntervalMs: number
+  updateSparklines: boolean
+  sparklineSampleIntervalMs: number
+  quotes: Array<MarketQuote>
+}
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export interface MarketFeedActions {
+  toggle: () => void
+  setInstrumentCount: (count: number) => void
+  setTargetRate: (rate: number) => void
+  setPublishInterval: (intervalMs: number) => void
+  setSparklineUpdates: (enabled: boolean) => void
+  setSparklineSampleInterval: (intervalMs: number) => void
+  runBurst: () => void
+  reset: () => void
+}
+
+const initialState: MarketFeedState = {
+  workerReady: false,
+  running: true,
+  instrumentCount: initialMarketFeedConfig.instrumentCount,
+  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  quotes: [],
+}
+
+export class MarketFeedController {
+  readonly store = createStore<MarketFeedState>(initialState)
+  readonly actions: MarketFeedActions
+  readonly #observers = new Set<MarketFeedObserver>()
+  readonly #runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+    quoteIndexBySymbol: new Map<string, number>(),
+  }
+
+  constructor() {
+    this.actions = {
+      toggle: () => {
+        const running = !this.store.get().running
+        this.#patch({ running })
+        this.#post({ type: 'set-running', running })
+      },
+      setInstrumentCount: (count) => {
+        this.#patch({ instrumentCount: count })
+        this.#resetWorker(count)
+      },
+      setTargetRate: (rate) => {
+        const sampleRate = normalizeFeedSampleRate(rate)
+        this.#patch({
+          targetTicksPerSecond: sampleRate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
+      },
+      setPublishInterval: (publishIntervalMs) => {
+        this.#patch({ publishIntervalMs })
+        this.#post({
+          type: 'set-publish-interval',
+          intervalMs: publishIntervalMs,
+        })
+      },
+      setSparklineUpdates: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#post({ type: 'set-sparklines', enabled })
+      },
+      setSparklineSampleInterval: (intervalMs) => {
+        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.#post({ type: 'set-sparkline-interval', intervalMs })
+      },
+      runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
+      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.#runtime.worker = worker
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    const state = this.store.get()
+    this.#post({
+      type: 'start',
+      rowCount: state.instrumentCount,
+      running: state.running,
+      ticksPerSecond: state.targetTicksPerSecond,
+      publishIntervalMs: state.publishIntervalMs,
+      updateSparklines: state.updateSparklines,
+      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+    })
+    return () => this.stop()
+  }
+
+  stop(): void {
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#observers.clear()
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  getQuoteBySymbol(
+    quotes: Array<MarketQuote>,
+    symbol: string | null,
+  ): MarketQuote | null {
+    if (symbol === null) return null
+
+    const index = this.#runtime.quoteIndexBySymbol.get(symbol)
+    return index === undefined ? null : (quotes[index] ?? null)
+  }
+
+  completeRender(): void {
+    if (!this.#runtime.renderPending) return
+
+    this.#runtime.renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#post({ type: 'set-running', running: this.store.get().running })
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#runtime.feedSessionId = data.sessionId
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.#startMutation()
+      const quotes = hydrateMarketQuotes(data.quotes)
+      this.#runtime.quoteIndexBySymbol = new Map(
+        quotes.map((quote, index) => [quote.symbol, index]),
+      )
+      batch(() => {
+        this.#patch({
+          quotes,
+          workerReady: true,
+        })
+      })
+      return
+    }
+
+    if (data.sessionId !== this.#runtime.feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.#patch({
+      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
+    })
+    const feedBatch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(feedBatch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorker(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#post({ type: 'set-running', running: false })
+    this.#post({ type: 'reset', rowCount })
+  }
+
+  #startMutation(): void {
+    this.#runtime.renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #patch(patch: Partial<MarketFeedState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#runtime.worker?.postMessage(command)
+  }
+}
diff --git a/examples/octane/realtime-trading/src/feed/sp500-instruments.ts b/examples/octane/realtime-trading/src/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/octane/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/octane/realtime-trading/src/feed/worker/market-feed-engine.ts
new file mode 100644
index 0000000000..557f7c30a8
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -0,0 +1,177 @@
+import { globalInstruments } from '../sp500-instruments'
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #tickIndex = 0
+
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue: market,
+        previousClose,
+        open,
+        high: open,
+        low: open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: createdAt,
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
+    this.#rowCursor = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyTicks(
+    tickCount: number,
+    updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#tickIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
+    const secondMix =
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/octane/realtime-trading/src/feed/worker/market-feed-protocol.ts b/examples/octane/realtime-trading/src/feed/worker/market-feed-protocol.ts
new file mode 100644
index 0000000000..21997ec89c
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/worker/market-feed-protocol.ts
@@ -0,0 +1,70 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  previousClose: number
+  open: number
+  high: number
+  low: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  high: number
+  low: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'start'
+      rowCount: number
+      running: boolean
+      ticksPerSecond: number
+      publishIntervalMs: number
+      updateSparklines: boolean
+      sparklineSampleIntervalMs: number
+    }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'snapshot'
+      sessionId: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/octane/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/octane/realtime-trading/src/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..2b7a642fd9
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -0,0 +1,143 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/octane/realtime-trading/src/index.css b/examples/octane/realtime-trading/src/index.css
new file mode 100644
index 0000000000..20264402de
--- /dev/null
+++ b/examples/octane/realtime-trading/src/index.css
@@ -0,0 +1,1048 @@
+:root {
+  color-scheme: dark;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
+  font-synthesis: none;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: var(--control-hover);
+  border-color: var(--border-strong);
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
+}
+
+.app-bar {
+  display: flex;
+  min-height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.header-actions,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: var(--muted);
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--muted);
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  grid-area: content;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.12rem 0 0.08rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
+}
+
+td {
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
+  overflow: hidden;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
+}
+
+td[data-column-id='market'] {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+td[data-column-id='name'] {
+  color: var(--text-strong);
+}
+
+td[data-column-id='symbol'] {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(even) {
+  background: var(--row-alt);
+}
+
+tbody tr:hover {
+  background: var(--panel-hover);
+}
+
+tbody tr[data-symbol-selected='true'] {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr[aria-selected='true'] {
+  background: rgb(76 145 228 / 13%);
+}
+
+td[aria-selected='true'] {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td[data-cell-focused='true'] {
+  background: rgb(70 139 222 / 21%);
+}
+
+td[aria-selected='true']::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td[data-selection-top='true']::after {
+  border-top-color: var(--blue);
+}
+
+td[data-selection-right='true']::after {
+  border-right-color: var(--blue);
+}
+
+td[data-selection-bottom='true']::after {
+  border-bottom-color: var(--blue);
+}
+
+td[data-selection-left='true']::after {
+  border-left-color: var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: var(--text);
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: var(--surface-control);
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.78;
+}
+
+.depth-bid {
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
+}
+
+.depth-ask {
+  background: var(--depth-ask);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: var(--text-strong);
+  font-size: 0.57rem;
+  text-shadow: 0 1px var(--background);
+}
+
+.quote-age {
+  color: var(--muted);
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 100%;
+  height: 1.35rem;
+  margin-left: auto;
+  color: var(--blue-soft);
+  overflow: visible;
+}
+
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: var(--surface-bar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  grid-area: footer;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
+.configurator {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.configurator > header {
+  display: flex;
+  height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  color: var(--text-strong);
+  background: var(--surface-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem var(--shell-inline-padding);
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
+}
+
+.primary-action:hover {
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text);
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.field small {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: var(--text);
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: var(--muted);
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  :root {
+    --sidebar-width: 15.625rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .trading-terminal {
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .market-panel {
+    min-height: 0;
+  }
+
+  .table-scroll {
+    min-height: 0;
+  }
+
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
+  }
+
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
+  }
+}
diff --git a/examples/octane/realtime-trading/src/main.tsrx b/examples/octane/realtime-trading/src/main.tsrx
new file mode 100644
index 0000000000..d7b6eaee20
--- /dev/null
+++ b/examples/octane/realtime-trading/src/main.tsrx
@@ -0,0 +1,12 @@
+import { createRoot } from 'octane'
+import { TradingBenchmarkController } from './benchmark/trading-benchmark-controller'
+import { MarketFeedController } from './feed/market-feed-controller'
+import { TradingShell } from './shell/TradingShell.tsrx'
+import './index.css'
+
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Failed to find the root element')
+
+const feed = new MarketFeedController()
+const controller = new TradingBenchmarkController(feed)
+createRoot(rootElement).render(() => <TradingShell controller={controller} feed={feed} />)
diff --git a/examples/octane/realtime-trading/src/shell/AppHeader.tsrx b/examples/octane/realtime-trading/src/shell/AppHeader.tsrx
new file mode 100644
index 0000000000..5ac4e13537
--- /dev/null
+++ b/examples/octane/realtime-trading/src/shell/AppHeader.tsrx
@@ -0,0 +1,38 @@
+import { shallowEqual, useStoreSelector } from '../use-store-value'
+import type { MarketFeedController, MarketFeedState } from '../feed/market-feed-controller'
+
+const selectFeedStatus = (state: MarketFeedState) => ({
+  workerReady: state.workerReady,
+  running: state.running,
+})
+
+export function AppHeader(props: {
+  feed: MarketFeedController
+  sidebarOpen: boolean
+  toggleSidebar: () => void
+}) @{
+  const state = useStoreSelector(
+    props.feed.store,
+    selectFeedStatus,
+    shallowEqual,
+  )
+  const status = !state.workerReady ? 'FEED CONNECTING' : state.running ? 'FEED LIVE' : 'FEED PAUSED'
+  <header className="app-bar">
+    <div className="brand"><strong>MARKET MONITOR</strong></div>
+    <div className="header-actions">
+      <span className={`feed-status ${state.workerReady && state.running ? 'is-running' : ''}`} data-testid="feed-status">
+        <span className="status-dot" aria-hidden="true" />{status}
+      </span>
+      <button
+        className="sidebar-toggle"
+        type="button"
+        aria-expanded={props.sidebarOpen}
+        aria-controls="benchmark-configurator"
+        aria-label={props.sidebarOpen ? 'Close configurator' : 'Open configurator'}
+        onClick={props.toggleSidebar}
+      >
+        <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5" /><path d="M12.5 3v14" /></svg>
+      </button>
+    </div>
+  </header>
+}
diff --git a/examples/octane/realtime-trading/src/shell/Configurator.tsrx b/examples/octane/realtime-trading/src/shell/Configurator.tsrx
new file mode 100644
index 0000000000..d4a43054ce
--- /dev/null
+++ b/examples/octane/realtime-trading/src/shell/Configurator.tsrx
@@ -0,0 +1,134 @@
+import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from '../feed/feed-sample-rates'
+import { FORCED_VIRTUALIZATION_ROW_COUNT, resolveVirtualScrollMode } from '../table/trading-row-virtualizer'
+import { shallowEqual, useStoreSelector, useStoreValue } from '../use-store-value'
+import { configuratorOptions } from './configurator-options'
+import { Diagnostics } from './Diagnostics.tsrx'
+import { SelectedInstrument } from './SelectedInstrument.tsrx'
+import type { MarketFeedController, MarketFeedState } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController, TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
+
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const selectConfiguratorFeedState = (state: MarketFeedState) => ({
+  running: state.running,
+  instrumentCount: state.instrumentCount,
+  targetTicksPerSecond: state.targetTicksPerSecond,
+  publishIntervalMs: state.publishIntervalMs,
+  updateSparklines: state.updateSparklines,
+  sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+})
+const selectRequestedVirtualScrollMode = (state: TradingBenchmarkState) =>
+  state.requestedVirtualScrollMode
+
+export function Configurator(props: {
+  controller: TradingBenchmarkController
+  feed: MarketFeedController
+}) @{
+  const feedState = useStoreSelector(
+    props.feed.store,
+    selectConfiguratorFeedState,
+    shallowEqual,
+  )
+  const requestedVirtualScrollMode = useStoreSelector(
+    props.controller.store,
+    selectRequestedVirtualScrollMode,
+    Object.is,
+  )
+  const rendererMode = useStoreValue(props.controller.renderAtoms.rendererMode)
+  const forced = feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  const virtualMode = resolveVirtualScrollMode(
+    requestedVirtualScrollMode,
+    feedState.instrumentCount,
+  )
+  const value = (event: Event): string => (event.target as HTMLInputElement | HTMLSelectElement).value
+  const number = (event: Event): number => Number(value(event))
+  const checked = (event: Event): boolean => (event.target as HTMLInputElement).checked
+
+  <aside id="benchmark-configurator" className="configurator" aria-label="Benchmark configurator">
+    <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+    <section className="config-section" aria-labelledby="feed-settings">
+      <h2 id="feed-settings">FEED</h2>
+      <button className="primary-action" type="button" data-testid="feed-toggle" onClick={props.feed.actions.toggle}>
+        {feedState.running ? 'PAUSE FEED' : 'START FEED'}
+      </button>
+      <label className="field">
+        <span>Instruments (rows)</span>
+        <select
+          data-testid="instrument-count-select"
+          value={feedState.instrumentCount}
+          onChange={(event) => {
+            props.controller.actions.resetViewState()
+            props.feed.actions.setInstrumentCount(number(event))
+          }}
+        >
+          @for (const option of configuratorOptions.instrumentCounts; key option.value) {
+            <option value={option.value}>{option.label}</option>
+          }
+        </select>
+      </label>
+      <label className="field rate-field">
+        <span>Synthetic quote workload <strong data-testid="target-sample-rate">{rate.format(feedState.targetTicksPerSecond)} samples/s</strong></span>
+        <input
+          data-testid="target-rate-slider"
+          type="range"
+          min="0"
+          max={feedSampleRateOptions.length - 1}
+          step="1"
+          value={feedSampleRateIndex(feedState.targetTicksPerSecond)}
+          onChange={(event) => props.feed.actions.setTargetRate(feedSampleRateAt(number(event)))}
+        />
+        <small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small>
+      </label>
+      <label className="field">
+        <span>Worker delivery interval</span>
+        <select data-testid="publish-interval-select" value={feedState.publishIntervalMs} onChange={(event) => props.feed.actions.setPublishInterval(number(event))}>
+          @for (const option of configuratorOptions.workerDeliveryIntervals; key option.value) {
+            <option value={option.value}>{option.label}</option>
+          }
+        </select>
+        <small>One coalesced worker message at this target cadence.</small>
+      </label>
+    </section>
+    <section className="config-section" aria-labelledby="render-settings">
+      <h2 id="render-settings">RENDER PATH</h2>
+      <label className="field" data-testid="virtual-scroll-mode">
+        <span>Row rendering</span>
+        <select
+          data-testid="virtual-scroll-select"
+          value={virtualMode}
+          disabled={forced}
+          onChange={(event) => props.controller.actions.setVirtualScrollEnabled(value(event) === 'tanstack')}
+        >
+          @for (const option of configuratorOptions.rowRenderingModes; key option.value) {
+            <option value={option.value}>{option.label}</option>
+          }
+        </select>
+        <small>{forced ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'}</small>
+      </label>
+      <label className="toggle-field">
+        <input type="checkbox" checked={rendererMode === 'swap'} onChange={(event) => props.controller.actions.setRendererMode(checked(event) ? 'swap' : 'stable')} />
+        <span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span>
+      </label>
+      <label className="toggle-field">
+        <input type="checkbox" checked={feedState.updateSparklines} onChange={(event) => props.feed.actions.setSparklineUpdates(checked(event))} />
+        <span>Update intraday charts<small>sample rolling prices independently</small></span>
+      </label>
+      <label className="field">
+        <span>Intraday chart sampling</span>
+        <select data-testid="sparkline-sample-interval-select" value={feedState.sparklineSampleIntervalMs} onChange={(event) => props.feed.actions.setSparklineSampleInterval(number(event))}>
+          @for (const option of configuratorOptions.intradaySamplingIntervals; key option.value) {
+            <option value={option.value}>{option.label}</option>
+          }
+        </select>
+      </label>
+    </section>
+    <section className="config-section" aria-labelledby="stress-actions">
+      <h2 id="stress-actions">STRESS ACTIONS</h2>
+      <div className="action-grid">
+        <button type="button" onClick={props.feed.actions.runBurst}>RUN 25K BURST</button>
+        <button type="button" onClick={props.controller.actions.resetMarket}>RESET SESSION</button>
+      </div>
+    </section>
+    <Diagnostics controller={props.controller} />
+    <SelectedInstrument controller={props.controller} feed={props.feed} />
+  </aside>
+}
diff --git a/examples/octane/realtime-trading/src/shell/Diagnostics.tsrx b/examples/octane/realtime-trading/src/shell/Diagnostics.tsrx
new file mode 100644
index 0000000000..86997841c1
--- /dev/null
+++ b/examples/octane/realtime-trading/src/shell/Diagnostics.tsrx
@@ -0,0 +1,42 @@
+import { useStoreValue } from '../use-store-value'
+import type { NamedInvocationRate } from '../benchmark/benchmark-monitor'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const ms = (value: number): string => `${value.toFixed(2)} ms`
+const invocations = (values: ReadonlyArray<NamedInvocationRate>): string => {
+  const active = values.filter((entry) => entry.callsPerSecond > 0)
+  return active.length ? active.map((entry) => `${entry.name} ${rate.format(entry.callsPerSecond)}`).join(' · ') : '—'
+}
+
+export function Diagnostics({ controller }: { controller: TradingBenchmarkController }) @{
+  const state = useStoreValue(controller.store)
+  const metrics = state.metrics
+  const items = [
+    ['Mounted cells', integer.format(state.mountedCells), ''],
+    ['Live components', integer.format(state.liveComponents), ''],
+    ['Created / destroyed', `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`, ''],
+    ['Renderer callbacks / s', rate.format(metrics.cellRendererCallsPerSecond), 'cell-render-rate'],
+    ['Component executions / s', rate.format(metrics.componentRenderCallsPerSecond), 'component-render-rate'],
+    ['Executions by component / s', invocations(metrics.componentRenderRates), 'component-render-breakdown'],
+    ['Callbacks by column / s', invocations(metrics.cellRendererRates), 'cell-render-breakdown'],
+    ['DOM mutation records / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'],
+    ['Core row model calls / s', metrics.rowModelCallsPerSecond.toFixed(1), 'row-model-call-rate'],
+    ['Core row model avg / max', `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, 'row-model-duration'],
+    ['Visible rows', integer.format(metrics.visibleRows), 'visible-row-count'],
+    ['Worker messages', integer.format(metrics.workerMessages), 'worker-messages'],
+    ['Worker-coalesced updates / s', rate.format(metrics.supersededUpdatesPerSecond), 'superseded-update-rate'],
+    ['Last samples / updated rows', `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`, ''],
+    ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''],
+    ['JS heap', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, ''],
+  ] as const
+  <section className="config-section diagnostics" aria-labelledby="diagnostics">
+    <h2 id="diagnostics">DIAGNOSTICS</h2>
+    <dl>
+      @for (const item of items; key item[0]) {
+        <div><dt>{item[0]}</dt><dd data-testid={item[2] || undefined}>{item[1]}</dd></div>
+      }
+    </dl>
+  </section>
+}
diff --git a/examples/octane/realtime-trading/src/shell/MarketStatusbar.tsrx b/examples/octane/realtime-trading/src/shell/MarketStatusbar.tsrx
new file mode 100644
index 0000000000..0aeb3d3761
--- /dev/null
+++ b/examples/octane/realtime-trading/src/shell/MarketStatusbar.tsrx
@@ -0,0 +1,24 @@
+import { shallowEqual, useStoreSelector } from '../use-store-value'
+import type { TradingBenchmarkController, TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
+
+const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+const selectStatusbarState = (state: TradingBenchmarkState) => ({
+  lastBatchSize: state.metrics.lastBatchSize,
+  lastUpdateCount: state.metrics.lastUpdateCount,
+  mountedCells: state.mountedCells,
+  liveComponents: state.liveComponents,
+})
+
+export function MarketStatusbar({ controller }: { controller: TradingBenchmarkController }) @{
+  const state = useStoreSelector(
+    controller.store,
+    selectStatusbarState,
+    shallowEqual,
+  )
+  <footer className="market-statusbar">
+    <span>MESSAGE SAMPLES <strong>{integer.format(state.lastBatchSize)}</strong></span>
+    <span>ROW UPDATES <strong>{integer.format(state.lastUpdateCount)}</strong></span>
+    <span>HOSTS <strong>{integer.format(state.mountedCells)}</strong></span>
+    <span>COMPONENTS <strong>{integer.format(state.liveComponents)}</strong></span>
+  </footer>
+}
diff --git a/examples/octane/realtime-trading/src/shell/MetricsStrip.tsrx b/examples/octane/realtime-trading/src/shell/MetricsStrip.tsrx
new file mode 100644
index 0000000000..8fe83ee98e
--- /dev/null
+++ b/examples/octane/realtime-trading/src/shell/MetricsStrip.tsrx
@@ -0,0 +1,25 @@
+import { useStoreValue } from '../use-store-value'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const ms = (value: number): string => `${value.toFixed(2)} ms`
+
+export function MetricsStrip({ controller }: { controller: TradingBenchmarkController }) @{
+  const state = useStoreValue(controller.store)
+  const metrics = state.metrics
+  const items = [
+    ['WORKER SAMPLES', rate.format(metrics.actualTicksPerSecond), 'generated samples/s', 'actual-rate'],
+    ['ROW UPDATES', rate.format(metrics.rowUpdatesPerSecond), 'unique rows applied/s', 'row-update-rate'],
+    ['MESSAGES', metrics.workerMessagesPerSecond.toFixed(1), 'worker messages/s', 'message-rate'],
+    ['STATE APPLIES', metrics.stateApplicationsPerSecond.toFixed(1), 'quote snapshots/s', 'state-apply-rate'],
+    ['TABLE COMMITS', metrics.tableRendersPerSecond.toFixed(1), 'completed renders/s', 'table-render-rate'],
+    ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
+    ['P95 RENDER', ms(metrics.p95RenderMs), `max ${ms(metrics.maxRenderMs)}`, ''],
+    ['LONG FRAMES', state.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', state.longAnimationFramesSupported ? `worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
+  ] as const
+  <section className="metrics-strip" aria-label="Live performance metrics">
+    @for (const item of items; key item[0]) {
+      <article><span>{item[0]}</span><strong data-testid={item[3] || undefined}>{item[1]}</strong><small>{item[2]}</small></article>
+    }
+  </section>
+}
diff --git a/examples/octane/realtime-trading/src/shell/SelectedInstrument.tsrx b/examples/octane/realtime-trading/src/shell/SelectedInstrument.tsrx
new file mode 100644
index 0000000000..b108842cc0
--- /dev/null
+++ b/examples/octane/realtime-trading/src/shell/SelectedInstrument.tsrx
@@ -0,0 +1,19 @@
+import { useStoreValue } from '../use-store-value'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+export function SelectedInstrument(props: {
+  controller: TradingBenchmarkController
+  feed: MarketFeedController
+}) @{
+  const feedState = useStoreValue(props.feed.store)
+  const symbol = useStoreValue(props.controller.renderAtoms.selectedSymbol)
+  const quote = props.feed.getQuoteBySymbol(feedState.quotes, symbol)
+  <section className="config-section selected-instrument" data-testid="selected-instrument">
+    <h2>SELECTED INSTRUMENT</h2>
+    {quote ? <>
+      <div className="selection"><div><strong>{quote.symbol}</strong><span>{quote.company}</span></div><small>{quote.venue}</small></div>
+      <dl><div><dt>Last</dt><dd>{quote.price.toFixed(2)}</dd></div><div><dt>Bid / ask</dt><dd>{quote.bid.toFixed(2)} / {quote.ask.toFixed(2)}</dd></div></dl>
+    </> : <p>Click or begin a cell selection in any row to inspect its instrument.</p>}
+  </section>
+}
diff --git a/examples/octane/realtime-trading/src/shell/TradingShell.tsrx b/examples/octane/realtime-trading/src/shell/TradingShell.tsrx
new file mode 100644
index 0000000000..4a2d994019
--- /dev/null
+++ b/examples/octane/realtime-trading/src/shell/TradingShell.tsrx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'octane'
+import { AppHeader } from './AppHeader.tsrx'
+import { Configurator } from './Configurator.tsrx'
+import { MarketStatusbar } from './MarketStatusbar.tsrx'
+import { MetricsStrip } from './MetricsStrip.tsrx'
+import { TradingTable } from '../table/TradingTable.tsrx'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+export function TradingShell(props: {
+  controller: TradingBenchmarkController
+  feed: MarketFeedController
+}) @{
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  useEffect(() => {
+    const stopFeed = props.feed.start()
+    const stopBenchmark = props.controller.start()
+    return () => {
+      stopBenchmark()
+      stopFeed()
+    }
+  }, [props.controller, props.feed])
+
+  <main className={`trading-terminal${sidebarOpen ? '' : ' is-sidebar-collapsed'}`}>
+    <div className="shell-header">
+      <AppHeader feed={props.feed} sidebarOpen={sidebarOpen} toggleSidebar={() => setSidebarOpen((open) => !open)} />
+      {import.meta.env.DEV && <aside className="development-warning">DEV BUILD — use the production build before recording results.</aside>}
+    </div>
+    <section className="market-panel" aria-label="Live synthetic quotes">
+      <MetricsStrip controller={props.controller} />
+      <TradingTable controller={props.controller} feed={props.feed} />
+    </section>
+    <MarketStatusbar controller={props.controller} />
+    <div className="sidebar-slot">
+      {sidebarOpen && <Configurator controller={props.controller} feed={props.feed} />}
+    </div>
+  </main>
+}
diff --git a/examples/octane/realtime-trading/src/shell/configurator-options.ts b/examples/octane/realtime-trading/src/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/octane/realtime-trading/src/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/octane/realtime-trading/src/table/TradingTable.tsrx b/examples/octane/realtime-trading/src/table/TradingTable.tsrx
new file mode 100644
index 0000000000..bf25502b89
--- /dev/null
+++ b/examples/octane/realtime-trading/src/table/TradingTable.tsrx
@@ -0,0 +1,308 @@
+import { useLayoutEffect, useMemo, useRef } from 'octane'
+import {
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  sortFn_basic,
+  stockFeatures,
+  tableFeatures,
+  useTable,
+} from '@tanstack/octane-table'
+import { startTableBenchmark } from '../benchmark/table-benchmark'
+import { shallowEqual, useStoreSelector, useStoreValue } from '../use-store-value'
+import { createTradingColumns, readMeasuredRows } from './table-config/trading-columns.tsrx'
+import { handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from './table-interactions'
+import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode, useVirtualizer } from './trading-row-virtualizer'
+import { useTradingGridPointer } from './use-trading-grid-pointer'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { MarketQuote } from '../feed/market-data'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+import type { MarketFeedState } from '../feed/market-feed-controller'
+import type { TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
+
+const features = tableFeatures({
+  ...stockFeatures,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { basic: sortFn_basic },
+})
+
+const selectTableFeedState = (state: MarketFeedState) => ({
+  quotes: state.quotes,
+  instrumentCount: state.instrumentCount,
+})
+const selectRequestedVirtualScrollMode = (state: TradingBenchmarkState) =>
+  state.requestedVirtualScrollMode
+
+interface TradingTableProps {
+  controller: TradingBenchmarkController
+  feed: MarketFeedController
+}
+
+export function TradingTable({ controller, feed }: TradingTableProps) @{
+  const feedState = useStoreSelector(
+    feed.store,
+    selectTableFeedState,
+    shallowEqual,
+  )
+  const requestedVirtualScrollMode = useStoreSelector(
+    controller.store,
+    selectRequestedVirtualScrollMode,
+    Object.is,
+  )
+  const rendererMode = useStoreValue(controller.renderAtoms.rendererMode)
+  const selectedSymbol = useStoreValue(controller.renderAtoms.selectedSymbol)
+  const columns = useMemo(
+    () => createTradingColumns<typeof features>(controller, rendererMode),
+    [controller, rendererMode],
+  )
+  const table = useTable(
+    {
+      features,
+      columns,
+      data: feedState.quotes,
+      getRowId: (row: MarketQuote) => row.id,
+      columnResizeMode: 'onChange',
+      defaultColumn: { minSize: 56, maxSize: 800 },
+      autoResetCellSelection: false,
+    },
+    (state) => ({
+      sorting: state.sorting,
+      columnFilters: state.columnFilters,
+      columnOrder: state.columnOrder,
+      rowSelection: state.rowSelection,
+      cellSelection: state.cellSelection,
+    }),
+  )
+  const rows = readMeasuredRows(() => table.getRowModel().rows)
+  const virtualMode = resolveVirtualScrollMode(
+    requestedVirtualScrollMode,
+    feedState.instrumentCount,
+  )
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const tableRef = useRef<HTMLTableElement | null>(null)
+  const bodyRef = useRef<HTMLTableSectionElement | null>(null)
+  const manuallyResized = useRef(false)
+  const pointer = useTradingGridPointer(table, controller.actions.selectSymbol)
+  const drag = useRef({
+    columnId: null as string | null,
+    source: null as HTMLTableCellElement | null,
+    target: null as HTMLTableCellElement | null,
+  })
+  const virtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => TRADING_ROW_HEIGHT,
+    overscan: TRADING_ROW_OVERSCAN,
+    enabled: virtualMode === 'tanstack',
+    getItemKey: (index) => rows[index]?.id ?? index,
+  })
+  const virtualRows = virtualMode === 'tanstack' ? virtualizer.getVirtualItems() : []
+  const renderedRowCount = virtualMode === 'tanstack' ? virtualRows.length : rows.length
+  const range = virtualizer.range
+  const visibleRange = virtualMode === 'tanstack' && range && rows.length > 0
+    ? { start: Math.min(range.startIndex, rows.length - 1), end: Math.min(range.endIndex, rows.length - 1) }
+    : null
+
+  useLayoutEffect(() => {
+    controller.actions.setRenderedRowCount(renderedRowCount)
+    feed.completeRender()
+  }, null)
+
+  useLayoutEffect(() => {
+    const writeColumnSizes = () => {
+      const element = tableRef.current
+      if (!element) return
+      for (const header of table.getFlatHeaders()) {
+        element.style.setProperty(`--header-${header.id}-size`, String(header.getSize()))
+        element.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize()))
+      }
+      element.style.width = `${table.getTotalSize()}px`
+    }
+    const fitAvailableWidth = () => {
+      const container = scrollRef.current
+      if (!container || manuallyResized.current) return
+      const width = table.getTotalSize()
+      if (container.clientWidth <= width + 1 || width <= 0) return
+      const ratio = container.clientWidth / width
+      table.setColumnSizing(Object.fromEntries(
+        table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio]),
+      ))
+    }
+    writeColumnSizes()
+    fitAvailableWidth()
+    const sizing = table.atoms.columnSizing.subscribe(writeColumnSizes)
+    const order = table.atoms.columnOrder.subscribe(writeColumnSizes)
+    const resizing = table.atoms.columnResizing.subscribe((state) => {
+      if (state.isResizingColumn !== false) manuallyResized.current = true
+    })
+    const resizeObserver = new ResizeObserver(fitAvailableWidth)
+    if (scrollRef.current) resizeObserver.observe(scrollRef.current)
+    const stopBenchmark = startTableBenchmark(controller, bodyRef.current)
+    return () => {
+      sizing.unsubscribe()
+      order.unsubscribe()
+      resizing.unsubscribe()
+      resizeObserver.disconnect()
+      stopBenchmark()
+    }
+  }, [controller, table.store])
+
+  const clearDrag = () => {
+    drag.current.source?.classList.remove('is-column-dragging')
+    drag.current.target?.classList.remove('is-column-drop-target')
+    drag.current.columnId = null
+    drag.current.source = null
+    drag.current.target = null
+  }
+  const showDropTarget = (columnId: string, element: HTMLTableCellElement | null) => {
+    drag.current.target?.classList.remove('is-column-drop-target')
+    drag.current.target = null
+    if (drag.current.columnId === columnId || !element) return
+    element.classList.add('is-column-drop-target')
+    drag.current.target = element
+  }
+  const renderRow = (
+    row: (typeof rows)[number],
+    virtualRow?: { index: number; start: number },
+  ) => (
+    <tr
+      key={row.id}
+      className={virtualRow ? 'virtual-table-row' : undefined}
+      style={virtualRow ? { transform: `translateY(${virtualRow.start}px)` } : undefined}
+      data-virtual-index={virtualRow?.index}
+      data-symbol={row.original.symbol}
+      data-row-id={row.original.id}
+      data-symbol-selected={selectedSymbol === row.original.symbol ? 'true' : undefined}
+      title={row.original.company}
+      aria-selected={row.getIsSelected()}
+    >
+      @for (const cell of row.getVisibleCells(); key cell.id) {
+        const edges = cell.getSelectionEdges()
+        <td
+          style={{ width: `calc(var(--col-${cell.column.id}-size) * 1px)` }}
+          data-column-id={cell.column.id}
+          data-cell-focused={cell.getIsFocused() ? 'true' : undefined}
+          data-selection-top={edges.top ? 'true' : undefined}
+          data-selection-right={edges.right ? 'true' : undefined}
+          data-selection-bottom={edges.bottom ? 'true' : undefined}
+          data-selection-left={edges.left ? 'true' : undefined}
+          aria-selected={cell.getIsSelected()}
+          tabIndex={cell.getTabIndex()}
+        >
+          <table.FlexRender cell={cell} />
+        </td>
+      }
+    </tr>
+  )
+
+  <>
+    <div
+      ref={scrollRef}
+      className={`table-scroll${virtualMode === 'tanstack' ? ' is-virtualized' : ''}`}
+      data-trading-table
+    >
+      <table
+        ref={tableRef}
+        className={`trading-data-grid${virtualMode === 'tanstack' ? ' virtual-table' : ''}`}
+        data-testid="trading-table"
+        role="grid"
+        aria-multiselectable="true"
+        tabIndex={0}
+        onKeyDown={(event) => handleCellNavigation(table, event)}
+      >
+        <thead>
+          @for (const group of table.getHeaderGroups(); key group.id) {
+            <tr>
+              @for (const header of group.headers; key header.id) {
+                const leaf = header.subHeaders.length === 0
+                const sorted = header.column.getIsSorted()
+                <th
+                  colSpan={header.colSpan}
+                  style={{ width: `calc(var(--header-${header.id}-size) * 1px)` }}
+                  aria-sort={leaf ? sortAriaValue(sorted) : undefined}
+                  className={`${!leaf ? 'column-group-header' : ''} ${leaf && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}`}
+                >
+                  {!header.isPlaceholder && (leaf ? <>
+                    <div
+                      className="leaf-header-content"
+                      onDragOver={(event) => {
+                        event.preventDefault()
+                        showDropTarget(header.column.id, event.currentTarget.closest('th'))
+                      }}
+                      onDrop={(event) => {
+                        event.preventDefault()
+                        const source = event.dataTransfer?.getData('text/plain') || drag.current.columnId
+                        if (source) {
+                          table.setColumnOrder(reorderColumnIds(
+                            table.getVisibleLeafColumns().map((column) => column.id),
+                            source,
+                            header.column.id,
+                          ))
+                        }
+                        clearDrag()
+                      }}
+                    >
+                      <button
+                        type="button"
+                        className="column-drag-handle"
+                        draggable
+                        aria-label={`Move ${header.column.id} column`}
+                        onDragStart={(event) => {
+                          drag.current.columnId = header.column.id
+                          drag.current.source = event.currentTarget.closest('th')
+                          drag.current.source?.classList.add('is-column-dragging')
+                          if (event.dataTransfer) {
+                            event.dataTransfer.effectAllowed = 'move'
+                            event.dataTransfer.setData('text/plain', header.column.id)
+                          }
+                        }}
+                        onDragEnd={clearDrag}
+                      >⋮⋮</button>
+                      <button
+                        type="button"
+                        className={`sort-header-button ${header.column.getCanSort() ? 'is-sortable' : ''}`}
+                        disabled={!header.column.getCanSort()}
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        <span className="header-label"><table.FlexRender header={header} /></span>
+                        {header.column.getCanSort() && <span className={`sort-indicator ${sorted ? 'is-active' : ''}`} aria-hidden="true">{sortIndicator(sorted)}</span>}
+                      </button>
+                    </div>
+                    {header.column.getCanResize() && <div
+                      className={`column-resize-handle ${header.column.getIsResizing() ? 'is-resizing' : ''}`}
+                      role="separator"
+                      aria-orientation="vertical"
+                      onDoubleClick={() => header.column.resetSize()}
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                    />}
+                  </> : <table.FlexRender header={header} />)}
+                </th>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody
+          ref={bodyRef}
+          className={virtualMode === 'tanstack' ? 'virtual-table-body' : undefined}
+          style={virtualMode === 'tanstack' ? { height: `${virtualizer.getTotalSize()}px` } : undefined}
+          data-source-row-count={feedState.quotes.length}
+          onMouseDown={pointer.onMouseDown}
+          onPointerOver={pointer.onPointerOver}
+          onMouseLeave={pointer.onMouseLeave}
+          onClick={pointer.onClick}
+        >
+          {virtualMode === 'tanstack'
+            ? virtualRows.map((item) => renderRow(rows[item.index]!, item))
+            : rows.map((row) => renderRow(row))}
+        </tbody>
+      </table>
+    </div>
+    {virtualMode === 'tanstack' && <footer className="virtual-scroll-footer" data-testid="virtual-scroll-footer">
+      <span>TanStack · Total · {rows.length} rows · {table.getVisibleLeafColumns().length} columns</span>
+      <span data-testid="visible-row-range">{visibleRange ? `Current · rows ${visibleRange.start}..${visibleRange.end}` : 'Current · rows —'}</span>
+    </footer>}
+  </>
+}
diff --git a/examples/octane/realtime-trading/src/table/table-config/quote-cells.tsrx b/examples/octane/realtime-trading/src/table/table-config/quote-cells.tsrx
new file mode 100644
index 0000000000..2ca5ecf8e6
--- /dev/null
+++ b/examples/octane/realtime-trading/src/table/table-config/quote-cells.tsrx
@@ -0,0 +1,94 @@
+import { useEffect } from 'octane'
+
+export const quoteCellLifecycle = { created: 0, destroyed: 0 }
+
+export const quoteCellRendererNames = [
+  'Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid',
+  'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday',
+] as const
+
+export const quoteComponentNames = [
+  'PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell',
+  'PercentChangeCell', 'SpreadCell', 'DepthCell', 'QuoteAgeCell',
+  'SparklineCell',
+] as const
+
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+
+const createCounterMap = <Name extends string,>(names: ReadonlyArray<Name>) =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
+  cellRendererCallsByName: createCounterMap(quoteCellRendererNames),
+  componentRenderCallsByName: createCounterMap(quoteComponentNames),
+}
+
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value
+}
+
+function useLifecycleCounter(name: QuoteComponentName): void {
+  quoteRenderDiagnostics.componentRenderCalls++
+  quoteRenderDiagnostics.componentRenderCallsByName[name]++
+  useEffect(() => {
+    quoteCellLifecycle.created++
+    return () => { quoteCellLifecycle.destroyed++ }
+  }, [])
+}
+
+export function PriceCell(props: { price: number; move: number; onSelect: () => void }) @{
+  useLifecycleCounter('PriceCell')
+  <button className={`price-button ${props.move >= 0 ? 'quote-up' : 'quote-down'}`} onClick={props.onSelect}>
+    {props.price.toFixed(2)}
+  </button>
+}
+
+export function StableMoveCell({ move }: { move: number }) @{
+  useLifecycleCounter('StableMoveCell')
+  <span className={`move-cell ${move >= 0 ? 'quote-up' : 'quote-down'}`}>{formatSigned(move)}</span>
+}
+
+export function UpMoveCell({ move }: { move: number }) @{
+  useLifecycleCounter('UpMoveCell')
+  <span className="move-cell quote-up">▲ {formatSigned(move)}</span>
+}
+
+export function DownMoveCell({ move }: { move: number }) @{
+  useLifecycleCounter('DownMoveCell')
+  <span className="move-cell quote-down">▼ {formatSigned(move)}</span>
+}
+
+export function PercentChangeCell({ value }: { value: number }) @{
+  useLifecycleCounter('PercentChangeCell')
+  <span className={`percent-change-cell ${value >= 0 ? 'quote-up' : 'quote-down'}`}>
+    {value >= 0 ? '+' : ''}{value.toFixed(2)}%
+  </span>
+}
+
+export function SparklineCell({ values }: { values: ReadonlyArray<number> }) @{
+  useLifecycleCounter('SparklineCell')
+  const rising = (values.at(-1) ?? 0) >= (values[0] ?? 0)
+  const first = values[0] ?? 0
+  const range = values.reduce(
+    (result, value) => ({ min: Math.min(result.min, value), max: Math.max(result.max, value) }),
+    { min: first, max: first },
+  )
+  const scale = range.max - range.min || 1
+  const denominator = Math.max(1, values.length - 1)
+  const points = values.map((value, index) => {
+    const x = (index / denominator) * 100
+    const y = 22 - ((value - range.min) / scale) * 20
+    return `${x.toFixed(1)},${y.toFixed(1)}`
+  }).join(' ')
+
+  <svg className={`sparkline ${rising ? 'quote-up' : 'quote-down'}`} viewBox="0 0 100 24" preserveAspectRatio="none">
+    <polyline points={points} />
+  </svg>
+}
+
+const formatSigned = (value: number): string => `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
diff --git a/examples/octane/realtime-trading/src/table/table-config/trading-columns.tsrx b/examples/octane/realtime-trading/src/table/table-config/trading-columns.tsrx
new file mode 100644
index 0000000000..296ef21c6f
--- /dev/null
+++ b/examples/octane/realtime-trading/src/table/table-config/trading-columns.tsrx
@@ -0,0 +1,106 @@
+import {
+  DownMoveCell,
+  PercentChangeCell,
+  PriceCell,
+  SparklineCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells.tsrx'
+import type { ColumnDef, TableFeatures } from '@tanstack/octane-table'
+import type { MarketQuote } from '../../feed/market-data'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
+
+export type RendererMode = 'stable' | 'swap'
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+
+interface TradingCellContext { row: { original: MarketQuote } }
+interface TradingColumnDefinition {
+  id: string
+  header: string
+  size?: number
+  columns?: Array<TradingColumnDefinition>
+  accessorFn?: (row: MarketQuote) => unknown
+  enableSorting?: boolean
+  filterFn?: 'includesString'
+  sortFn?: 'basic'
+  cell?: (context: TradingCellContext) => unknown
+}
+
+const compact = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export function createTradingColumns<TFeatures extends TableFeatures>(
+  controller: TradingBenchmarkController,
+  rendererMode: RendererMode,
+): Array<ColumnDef<TFeatures, MarketQuote>> {
+  const columns: Array<TradingColumnDefinition> = [
+    { id: 'instrument', header: 'Instrument', columns: [
+      { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', row.original.venue) },
+      { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', row.original.company) },
+      { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', row.original.symbol) },
+    ] },
+    { id: 'priceAndChange', header: 'Price & Change', columns: [
+      { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: ({ row }) => recordCellRender('Last', <PriceCell price={row.original.price} move={getDayChange(row.original)} onSelect={() => controller.actions.selectSymbol(row.original.symbol)} />) },
+      { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', <MoveCell mode={rendererMode} move={getDayChange(row.original)} />) },
+      { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: ({ row }) => recordCellRender('ChangePercent', <PercentChangeCell value={getDayChangePercent(row.original)} />) },
+    ] },
+    { id: 'orderBook', header: 'Order Book', columns: [
+      { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
+      { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compact.format(row.original.bidSize)) },
+      { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
+      { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compact.format(row.original.askSize)) },
+    ] },
+    { id: 'session', header: 'Session', columns: [
+      { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
+      { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
+      { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
+    ] },
+    { id: 'chart', header: 'Chart', columns: [
+      { id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: ({ row }) => recordCellRender('Intraday', <SparklineCell values={row.original.history} />) },
+    ] },
+  ]
+  return columns as unknown as Array<ColumnDef<TFeatures, MarketQuote>>
+}
+
+function MoveCell({ mode, move }: { mode: RendererMode; move: number }) @{
+  if (mode === 'stable') return <StableMoveCell move={move} />
+  if (move >= 0) return <UpMoveCell move={move} />
+  <DownMoveCell move={move} />
+}
+
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
+export const TRADING_COLUMN_COUNT = 14
+
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration)
+  rowModelDiagnostics.lastRowCount = rows.length
+  try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* optional User Timing detail */ }
+  return rows
+}
+
+export function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+
+export function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/octane/realtime-trading/src/table/table-interactions.ts b/examples/octane/realtime-trading/src/table/table-interactions.ts
new file mode 100644
index 0000000000..42356f5bd8
--- /dev/null
+++ b/examples/octane/realtime-trading/src/table/table-interactions.ts
@@ -0,0 +1,144 @@
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Partial<Record<string, SelectableGridCell>>
+}
+
+export interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Partial<Record<string, SelectableGridRow>>
+  }
+}
+
+export interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+  })
+}
+
+export function findTradingGridCellTarget(
+  table: TradingGridTable,
+  path: Array<EventTarget>,
+): SelectionCellTarget | null {
+  for (const target of path) {
+    if (!(target instanceof HTMLTableCellElement)) continue
+
+    const columnId = target.dataset['columnId']
+    const rowId =
+      target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+    if (!columnId || !rowId) return null
+
+    const row = table.getRowModel().rowsById[rowId]
+    const cell = row?.getAllCellsByColumnId()[columnId]
+    return row && cell ? { element: target, cell } : null
+  }
+
+  return null
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: KeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/octane/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/octane/realtime-trading/src/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..9b3df23552
--- /dev/null
+++ b/examples/octane/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -0,0 +1,52 @@
+import { useLayoutEffect, useState } from 'octane'
+import {
+  Virtualizer,
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+} from '@tanstack/virtual-core'
+import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
+
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
+
+export function useVirtualizer<
+  TScrollElement extends Element,
+  TItemElement extends Element,
+>(
+  options: PartialKeys<
+    VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  >,
+): Virtualizer<TScrollElement, TItemElement> {
+  const [, setRenderVersion] = useState(0)
+  const resolvedOptions: VirtualizerOptions<TScrollElement, TItemElement> = {
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options,
+    onChange: (instance, sync) => {
+      setRenderVersion((version) => version + 1)
+      options.onChange?.(instance, sync)
+    },
+  }
+  const [instance] = useState(
+    () => new Virtualizer<TScrollElement, TItemElement>(resolvedOptions),
+  )
+  instance.setOptions(resolvedOptions)
+  useLayoutEffect(() => instance._didMount(), [instance])
+  useLayoutEffect(() => instance._willUpdate(), null)
+  return instance
+}
diff --git a/examples/octane/realtime-trading/src/table/trading-table.ts b/examples/octane/realtime-trading/src/table/trading-table.ts
new file mode 100644
index 0000000000..ff1d5af1b3
--- /dev/null
+++ b/examples/octane/realtime-trading/src/table/trading-table.ts
@@ -0,0 +1,9 @@
+export {
+  TRADING_COLUMN_COUNT,
+  rowModelDiagnostics,
+} from './table-config/trading-columns.tsrx'
+export type {
+  CoreTableState,
+  RendererMode,
+} from './table-config/trading-columns.tsrx'
+export type { VirtualScrollMode } from './trading-row-virtualizer'
diff --git a/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts b/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
new file mode 100644
index 0000000000..80a0564f4f
--- /dev/null
+++ b/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
@@ -0,0 +1,57 @@
+import { useMemo, useRef } from 'octane'
+import {
+  findTradingGridCellTarget,
+  selectRowFromPointer,
+} from './table-interactions'
+import type { TradingGridTable } from './table-interactions'
+
+export interface TradingGridPointerHandlers {
+  readonly onMouseDown: (event: MouseEvent) => void
+  readonly onPointerOver: (event: PointerEvent) => void
+  readonly onMouseLeave: () => void
+  readonly onClick: (event: MouseEvent) => void
+}
+
+export function useTradingGridPointer(
+  table: TradingGridTable,
+  selectSymbol: (symbol: string) => void,
+): TradingGridPointerHandlers {
+  const lastPointerCell = useRef<HTMLTableCellElement | null>(null)
+
+  return useMemo(
+    () => ({
+      onMouseDown(event) {
+        if (event.button !== 0) return
+
+        const target = findTradingGridCellTarget(table, event.composedPath())
+        if (!target) return
+
+        lastPointerCell.current = target.element
+        selectSymbol(target.cell.row.original.symbol)
+        target.cell
+          .getSelectionStartHandler(target.element.ownerDocument)(event)
+      },
+      onPointerOver(event) {
+        if ((event.buttons & 1) === 0) {
+          lastPointerCell.current = null
+          return
+        }
+
+        const target = findTradingGridCellTarget(table, event.composedPath())
+        if (!target || target.element === lastPointerCell.current) return
+
+        lastPointerCell.current = target.element
+        target.cell.getSelectionExtendHandler()(event)
+      },
+      onMouseLeave() {
+        lastPointerCell.current = null
+      },
+      onClick(event) {
+        const target = findTradingGridCellTarget(table, event.composedPath())
+        if (!target) return
+        selectRowFromPointer(table, target.cell.row, event)
+      },
+    }),
+    [selectSymbol, table],
+  )
+}
diff --git a/examples/octane/realtime-trading/src/use-store-value.ts b/examples/octane/realtime-trading/src/use-store-value.ts
new file mode 100644
index 0000000000..676e041910
--- /dev/null
+++ b/examples/octane/realtime-trading/src/use-store-value.ts
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'octane'
+
+interface SubscribableValue<T> {
+  get: () => T
+  subscribe: (listener: (value: T) => void) => { unsubscribe: () => void }
+}
+
+export function useStoreValue<T>(source: SubscribableValue<T>): T {
+  const [value, setValue] = useState(() => source.get())
+  useEffect(() => {
+    setValue(source.get())
+    const subscription = source.subscribe((nextValue) => setValue(nextValue))
+    return () => subscription.unsubscribe()
+  }, [source])
+  return value
+}
+
+export function useStoreSelector<T, TSelected>(
+  source: SubscribableValue<T>,
+  selector: (value: T) => TSelected,
+  compare: (previous: TSelected, next: TSelected) => boolean,
+): TSelected {
+  const [selected, setSelected] = useState(() => selector(source.get()))
+  useEffect(() => {
+    const update = (value: T): void => {
+      const next = selector(value)
+      setSelected((previous) =>
+        compare(previous, next) ? previous : next,
+      )
+    }
+
+    update(source.get())
+    const subscription = source.subscribe(update)
+    return () => subscription.unsubscribe()
+  }, [compare, selector, source])
+  return selected
+}
+
+export function shallowEqual<T>(previous: T, next: T): boolean {
+  if (Object.is(previous, next)) return true
+  if (
+    typeof previous !== 'object' ||
+    previous === null ||
+    typeof next !== 'object' ||
+    next === null
+  ) {
+    return false
+  }
+
+  const previousRecord = previous as Record<string, unknown>
+  const nextRecord = next as Record<string, unknown>
+  const previousKeys = Object.keys(previousRecord)
+  const nextKeys = Object.keys(nextRecord)
+  return (
+    previousKeys.length === nextKeys.length &&
+    previousKeys.every((key) =>
+      Object.is(previousRecord[key], nextRecord[key]),
+    )
+  )
+}
diff --git a/examples/octane/realtime-trading/src/vite-env.d.ts b/examples/octane/realtime-trading/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/octane/realtime-trading/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts b/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..fc10f41e0d
--- /dev/null
+++ b/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,170 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the Octane realtime trading workload', async ({ page }) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
+    await expect(table).toBeVisible()
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
+
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('row-update-rate').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('message-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    await instrumentCount.selectOption('750')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(750)
+    expect(
+      await page.evaluate(
+        () => performance.getEntriesByName('tanstack-row-model').length > 0,
+      ),
+    ).toBe(true)
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/octane/realtime-trading/tsconfig.json b/examples/octane/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..a33b01356c
--- /dev/null
+++ b/examples/octane/realtime-trading/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "octane",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["node"]
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/octane/realtime-trading/vite.config.ts b/examples/octane/realtime-trading/vite.config.ts
new file mode 100644
index 0000000000..c98944687d
--- /dev/null
+++ b/examples/octane/realtime-trading/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import { octane } from 'octane/compiler/vite'
+
+export default defineConfig({
+  server: {
+    port: 7786,
+    allowedHosts: true,
+  },
+  plugins: [octane()],
+})
diff --git a/examples/preact/realtime-trading/README.md b/examples/preact/realtime-trading/README.md
new file mode 100644
index 0000000000..37ff8a725c
--- /dev/null
+++ b/examples/preact/realtime-trading/README.md
@@ -0,0 +1,44 @@
+# Preact realtime trading benchmark
+
+This standalone example stresses the current Preact Table adapter with an
+immutable synthetic market feed, core sorting/filtering, dynamic cells,
+virtualized rows, selection, and column resizing/reordering.
+
+## Run
+
+```bash
+pnpm --dir examples/preact/realtime-trading dev
+```
+
+Open `http://localhost:7780`.
+
+## Architecture
+
+- `feed/` owns the market controller, immutable quote snapshots, instruments,
+  configuration, and the dedicated feed worker.
+- `benchmark/` owns User Timing, DOM mutation, long-frame, and renderer-call
+  diagnostics.
+- `shell/` owns the full-viewport terminal layout and benchmark controls.
+- `table/` owns the Preact Table instance, table configuration, delegated grid
+  interactions, row rendering, and the local `@tanstack/virtual-core` hook.
+
+All files required by the example are copied into this folder. It does not
+import a shared example package.
+
+The example starts with 100 instruments. Below 250 instruments, row rendering
+can switch between **Full DOM** and **TanStack Virtual**. At 250 instruments or
+more, virtualization is enabled and locked.
+
+The sample-rate control represents synthetic quote generation inside the
+worker, not browser events or worker messages. The publish interval controls
+message cadence independently, and repeated instruments are coalesced into one
+row update per message.
+
+## Verification
+
+```bash
+pnpm --dir examples/preact/realtime-trading test:types
+pnpm --dir examples/preact/realtime-trading lint
+pnpm --dir examples/preact/realtime-trading build
+pnpm --dir examples/preact/realtime-trading test:e2e
+```
diff --git a/examples/preact/realtime-trading/index.html b/examples/preact/realtime-trading/index.html
new file mode 100644
index 0000000000..849dbe8b48
--- /dev/null
+++ b/examples/preact/realtime-trading/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="A synthetic real-time market benchmark for TanStack Preact Table FlexRender."
+    />
+    <link rel="icon" href="data:," />
+    <title>Preact Real-time Trading FlexRender Lab</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/preact/realtime-trading/package.json b/examples/preact/realtime-trading/package.json
new file mode 100644
index 0000000000..4a6e7421e3
--- /dev/null
+++ b/examples/preact/realtime-trading/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "tanstack-preact-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src",
+    "test:types": "tsc --noEmit",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "dependencies": {
+    "@tanstack/preact-store": "^0.13.1",
+    "@tanstack/preact-table": "9.1.2",
+    "@tanstack/virtual-core": "^3.17.7",
+    "preact": "^10.29.7"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.6",
+    "typescript": "6.0.3",
+    "vite": "^8.2.0"
+  }
+}
diff --git a/examples/preact/realtime-trading/src/App.tsx b/examples/preact/realtime-trading/src/App.tsx
new file mode 100644
index 0000000000..8499a00486
--- /dev/null
+++ b/examples/preact/realtime-trading/src/App.tsx
@@ -0,0 +1,23 @@
+import { useMarketFeedController } from './feed/use-market-feed-controller'
+import { useTradingBenchmarkController } from './benchmark/use-trading-benchmark-controller'
+import { TradingShell } from './shell/TradingShell'
+import {
+  TradingShellProvider,
+} from './shell/trading-shell-context'
+import { TradingTable } from './table/trading-table'
+
+export function App() {
+  const feed = useMarketFeedController()
+  const controller = useTradingBenchmarkController(feed)
+  return (
+    <TradingShellProvider controller={controller}>
+      <TradingShell>
+        <TradingTableOutlet />
+      </TradingShell>
+    </TradingShellProvider>
+  )
+}
+
+function TradingTableOutlet() {
+  return <TradingTable />
+}
diff --git a/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..9eea493fec
--- /dev/null
+++ b/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -0,0 +1,368 @@
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells'
+import { rowModelDiagnostics } from '../table/trading-table'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+  rowModelCallsPerSecond: number
+  rowModelAverageMs: number
+  rowModelMaxMs: number
+  visibleRows: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+  rowModelCallsPerSecond: 0,
+  rowModelAverageMs: 0,
+  rowModelMaxMs: 0,
+  visibleRows: 0,
+}
+
+const userTiming = { entryCount: 0 }
+
+export function recordMeasure(
+  name: string,
+  start: number,
+  end: number,
+  detail: Record<string, unknown>,
+): void {
+  try {
+    performance.measure(name, { start, end, detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('market-update-to-layout-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
+export function markBenchmarkAction(
+  name: string,
+  detail: Record<string, unknown> = {},
+): void {
+  try {
+    performance.mark(`benchmark:${name}`, { detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMarks()
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    renderSamples: [] as Array<number>,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+    previousRowModelCalls: 0,
+    previousRowModelDuration: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  recordCompletedRender(): void {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      const renderEndedAt = performance.now()
+      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      recordMeasure(
+        'market-update-to-layout-commit',
+        runtime.pendingRenderStartedAt,
+        renderEndedAt,
+        {},
+      )
+      runtime.pendingRenderStartedAt = null
+      runtime.tableRendersInSample++
+    }
+  }
+
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = tickCount
+    runtime.lastUpdateCount = updateCount
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const renderSamples = runtime.renderSamples
+    const sortedRenderSamples = [...renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const rowModelCalls =
+      rowModelDiagnostics.calls - runtime.previousRowModelCalls
+    const rowModelDuration =
+      rowModelDiagnostics.totalDurationMs - runtime.previousRowModelDuration
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const averageRenderMs =
+      renderSamples.length === 0
+        ? 0
+        : renderSamples.reduce((sum, value) => sum + value, 0) /
+          renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualTicksPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+      rowModelCallsPerSecond: (rowModelCalls / sampleDuration) * 1_000,
+      rowModelAverageMs:
+        rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
+      rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
+      visibleRows: rowModelDiagnostics.lastRowCount,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.renderSamples = []
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    rowModelDiagnostics.maxDurationMs = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..709c6ac277
--- /dev/null
+++ b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,152 @@
+import { batch, createAtom, createStore } from '@tanstack/preact-store'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from './benchmark-monitor'
+import type { FeedMetrics } from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+
+export interface TradingBenchmarkState {
+  requestedVirtualScrollMode: VirtualScrollMode
+  metrics: FeedMetrics
+  mountedCells: number
+  liveComponents: number
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  resetViewState: () => void
+  setRendererMode: (mode: RendererMode) => void
+  setVirtualScrollEnabled: (enabled: boolean) => void
+  setRenderedRowCount: (count: number) => void
+  selectSymbol: (symbol: string | null) => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  requestedVirtualScrollMode: 'none',
+  metrics: initialMetrics,
+  mountedCells: 0,
+  liveComponents: 0,
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly feed: MarketFeedController
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    stopObservingFeed: null as (() => void) | null,
+  }
+
+  constructor(feed: MarketFeedController) {
+    this.feed = feed
+    this.actions = {
+      resetViewState: () => {
+        this.renderAtoms.selectedSymbol.set(null)
+      },
+      setRendererMode: (mode) => {
+        this.renderAtoms.rendererMode.set(mode)
+      },
+      setVirtualScrollEnabled: (enabled) => {
+        if (
+          this.feed.store.get().instrumentCount >=
+          FORCED_VIRTUALIZATION_ROW_COUNT
+        ) {
+          return
+        }
+        this.#patch({
+          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
+        })
+      },
+      setRenderedRowCount: (count) => {
+        const mountedCells = count * TRADING_COLUMN_COUNT
+        if (mountedCells !== this.store.get().mountedCells) {
+          this.#patch({ mountedCells })
+        }
+      },
+      selectSymbol: (symbol) => {
+        this.renderAtoms.selectedSymbol.set(symbol)
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.store.setState((state) => ({
+            ...state,
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.feed.actions.reset()
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    this.#runtime.stopObservingFeed = this.feed.observe({
+      messageReceived: () => this.monitor.recordWorkerMessage(),
+      mutationStarted: () => this.monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+      renderCommitted: () => this.monitor.recordCompletedRender(),
+    })
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.stopObservingFeed?.()
+    this.#runtime.longAnimationFrameObserver = null
+    this.#runtime.stopObservingFeed = null
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    if (this.monitor.shouldPublish(now)) {
+      this.#publishMetrics(this.monitor.publish(now))
+    }
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    this.#patch({
+      metrics,
+      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+}
diff --git a/examples/preact/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/preact/realtime-trading/src/benchmark/use-table-benchmark.ts
new file mode 100644
index 0000000000..8aafed01dd
--- /dev/null
+++ b/examples/preact/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -0,0 +1,27 @@
+import { useEffect } from 'preact/hooks'
+import type { TradingBenchmarkController } from './trading-benchmark-controller'
+
+export function useTableBenchmark(
+  controller: TradingBenchmarkController,
+): void {
+  useEffect(() => {
+    const tableBody = document.querySelector(
+      '.market-panel [data-trading-table] tbody',
+    )
+    if (!tableBody) {
+      return
+    }
+
+    controller.monitor.resetDomMutations()
+    const observer = new MutationObserver((records) => {
+      controller.monitor.recordDomMutations(records.length)
+    })
+    observer.observe(tableBody, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+    return () => observer.disconnect()
+  }, [controller])
+}
diff --git a/examples/preact/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts b/examples/preact/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
new file mode 100644
index 0000000000..670253ed6a
--- /dev/null
+++ b/examples/preact/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'preact/hooks'
+import { TradingBenchmarkController } from './trading-benchmark-controller'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+
+export function useTradingBenchmarkController(feed: MarketFeedController) {
+  const [controller] = useState(() => new TradingBenchmarkController(feed))
+
+  useEffect(() => controller.start(), [controller])
+
+  return controller
+}
+
+export type { TradingBenchmarkController } from './trading-benchmark-controller'
diff --git a/examples/preact/realtime-trading/src/feed/feed-sample-rates.ts b/examples/preact/realtime-trading/src/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/preact/realtime-trading/src/feed/market-data.ts b/examples/preact/realtime-trading/src/feed/market-data.ts
new file mode 100644
index 0000000000..6231865d3f
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './worker/market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/preact/realtime-trading/src/feed/market-feed-config.ts b/examples/preact/realtime-trading/src/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/preact/realtime-trading/src/feed/market-feed-controller.ts b/examples/preact/realtime-trading/src/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..f59ff8afa0
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/market-feed-controller.ts
@@ -0,0 +1,240 @@
+import { batch, createStore } from '@tanstack/preact-store'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedState {
+  workerReady: boolean
+  running: boolean
+  instrumentCount: number
+  targetTicksPerSecond: number
+  publishIntervalMs: number
+  updateSparklines: boolean
+  sparklineSampleIntervalMs: number
+  quotes: Array<MarketQuote>
+}
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export interface MarketFeedActions {
+  toggle: () => void
+  setInstrumentCount: (count: number) => void
+  setTargetRate: (rate: number) => void
+  setPublishInterval: (intervalMs: number) => void
+  setSparklineUpdates: (enabled: boolean) => void
+  setSparklineSampleInterval: (intervalMs: number) => void
+  runBurst: () => void
+  reset: () => void
+}
+
+const initialState: MarketFeedState = {
+  workerReady: false,
+  running: true,
+  instrumentCount: initialMarketFeedConfig.instrumentCount,
+  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  quotes: [],
+}
+
+export class MarketFeedController {
+  readonly store = createStore<MarketFeedState>(initialState)
+  readonly actions: MarketFeedActions
+  readonly #observers = new Set<MarketFeedObserver>()
+  readonly #runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+    quoteIndexBySymbol: new Map<string, number>(),
+  }
+
+  constructor() {
+    this.actions = {
+      toggle: () => {
+        const running = !this.store.get().running
+        this.#patch({ running })
+        this.#post({ type: 'set-running', running })
+      },
+      setInstrumentCount: (count) => {
+        this.#patch({ instrumentCount: count })
+        this.#resetWorker(count)
+      },
+      setTargetRate: (rate) => {
+        const sampleRate = normalizeFeedSampleRate(rate)
+        this.#patch({
+          targetTicksPerSecond: sampleRate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
+      },
+      setPublishInterval: (publishIntervalMs) => {
+        this.#patch({ publishIntervalMs })
+        this.#post({
+          type: 'set-publish-interval',
+          intervalMs: publishIntervalMs,
+        })
+      },
+      setSparklineUpdates: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#post({ type: 'set-sparklines', enabled })
+      },
+      setSparklineSampleInterval: (intervalMs) => {
+        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.#post({ type: 'set-sparkline-interval', intervalMs })
+      },
+      runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
+      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.#runtime.worker = worker
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    const state = this.store.get()
+    this.#post({
+      type: 'start',
+      rowCount: state.instrumentCount,
+      running: state.running,
+      ticksPerSecond: state.targetTicksPerSecond,
+      publishIntervalMs: state.publishIntervalMs,
+      updateSparklines: state.updateSparklines,
+      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+    })
+    return () => this.stop()
+  }
+
+  stop(): void {
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#observers.clear()
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  getQuoteBySymbol(
+    quotes: Array<MarketQuote>,
+    symbol: string | null,
+  ): MarketQuote | null {
+    if (symbol === null) return null
+
+    const index = this.#runtime.quoteIndexBySymbol.get(symbol)
+    return index === undefined ? null : (quotes[index] ?? null)
+  }
+
+  completeRender(): void {
+    if (!this.#runtime.renderPending) return
+
+    this.#runtime.renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#post({ type: 'set-running', running: this.store.get().running })
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#runtime.feedSessionId = data.sessionId
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.#startMutation()
+      const quotes = hydrateMarketQuotes(data.quotes)
+      this.#runtime.quoteIndexBySymbol = new Map(
+        quotes.map((quote, index) => [quote.symbol, index]),
+      )
+      batch(() => {
+        this.#patch({
+          quotes,
+          workerReady: true,
+        })
+      })
+      return
+    }
+
+    if (data.sessionId !== this.#runtime.feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.#patch({
+      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
+    })
+    const feedBatch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(feedBatch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorker(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#post({ type: 'set-running', running: false })
+    this.#post({ type: 'reset', rowCount })
+  }
+
+  #startMutation(): void {
+    this.#runtime.renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #patch(patch: Partial<MarketFeedState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#runtime.worker?.postMessage(command)
+  }
+}
diff --git a/examples/preact/realtime-trading/src/feed/sp500-instruments.ts b/examples/preact/realtime-trading/src/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/preact/realtime-trading/src/feed/use-market-feed-controller.ts b/examples/preact/realtime-trading/src/feed/use-market-feed-controller.ts
new file mode 100644
index 0000000000..29196b8773
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/use-market-feed-controller.ts
@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'preact/hooks'
+import { MarketFeedController } from './market-feed-controller'
+
+export function useMarketFeedController(): MarketFeedController {
+  const [controller] = useState(() => new MarketFeedController())
+
+  useEffect(() => controller.start(), [controller])
+
+  return controller
+}
diff --git a/examples/preact/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/preact/realtime-trading/src/feed/worker/market-feed-engine.ts
new file mode 100644
index 0000000000..557f7c30a8
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -0,0 +1,177 @@
+import { globalInstruments } from '../sp500-instruments'
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #tickIndex = 0
+
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue: market,
+        previousClose,
+        open,
+        high: open,
+        low: open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: createdAt,
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
+    this.#rowCursor = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyTicks(
+    tickCount: number,
+    updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#tickIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
+    const secondMix =
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/preact/realtime-trading/src/feed/worker/market-feed-protocol.ts b/examples/preact/realtime-trading/src/feed/worker/market-feed-protocol.ts
new file mode 100644
index 0000000000..21997ec89c
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/worker/market-feed-protocol.ts
@@ -0,0 +1,70 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  previousClose: number
+  open: number
+  high: number
+  low: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  high: number
+  low: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'start'
+      rowCount: number
+      running: boolean
+      ticksPerSecond: number
+      publishIntervalMs: number
+      updateSparklines: boolean
+      sparklineSampleIntervalMs: number
+    }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'snapshot'
+      sessionId: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/preact/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/preact/realtime-trading/src/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..2b7a642fd9
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -0,0 +1,143 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/preact/realtime-trading/src/index.css b/examples/preact/realtime-trading/src/index.css
new file mode 100644
index 0000000000..20264402de
--- /dev/null
+++ b/examples/preact/realtime-trading/src/index.css
@@ -0,0 +1,1048 @@
+:root {
+  color-scheme: dark;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
+  font-synthesis: none;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: var(--control-hover);
+  border-color: var(--border-strong);
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
+}
+
+.app-bar {
+  display: flex;
+  min-height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.header-actions,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: var(--muted);
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--muted);
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  grid-area: content;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.12rem 0 0.08rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
+}
+
+td {
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
+  overflow: hidden;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
+}
+
+td[data-column-id='market'] {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+td[data-column-id='name'] {
+  color: var(--text-strong);
+}
+
+td[data-column-id='symbol'] {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(even) {
+  background: var(--row-alt);
+}
+
+tbody tr:hover {
+  background: var(--panel-hover);
+}
+
+tbody tr[data-symbol-selected='true'] {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr[aria-selected='true'] {
+  background: rgb(76 145 228 / 13%);
+}
+
+td[aria-selected='true'] {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td[data-cell-focused='true'] {
+  background: rgb(70 139 222 / 21%);
+}
+
+td[aria-selected='true']::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td[data-selection-top='true']::after {
+  border-top-color: var(--blue);
+}
+
+td[data-selection-right='true']::after {
+  border-right-color: var(--blue);
+}
+
+td[data-selection-bottom='true']::after {
+  border-bottom-color: var(--blue);
+}
+
+td[data-selection-left='true']::after {
+  border-left-color: var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: var(--text);
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: var(--surface-control);
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.78;
+}
+
+.depth-bid {
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
+}
+
+.depth-ask {
+  background: var(--depth-ask);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: var(--text-strong);
+  font-size: 0.57rem;
+  text-shadow: 0 1px var(--background);
+}
+
+.quote-age {
+  color: var(--muted);
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 100%;
+  height: 1.35rem;
+  margin-left: auto;
+  color: var(--blue-soft);
+  overflow: visible;
+}
+
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: var(--surface-bar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  grid-area: footer;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
+.configurator {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.configurator > header {
+  display: flex;
+  height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  color: var(--text-strong);
+  background: var(--surface-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem var(--shell-inline-padding);
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
+}
+
+.primary-action:hover {
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text);
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.field small {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: var(--text);
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: var(--muted);
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  :root {
+    --sidebar-width: 15.625rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .trading-terminal {
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .market-panel {
+    min-height: 0;
+  }
+
+  .table-scroll {
+    min-height: 0;
+  }
+
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
+  }
+
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
+  }
+}
diff --git a/examples/preact/realtime-trading/src/main.tsx b/examples/preact/realtime-trading/src/main.tsx
new file mode 100644
index 0000000000..ff31652405
--- /dev/null
+++ b/examples/preact/realtime-trading/src/main.tsx
@@ -0,0 +1,10 @@
+import { render } from 'preact'
+import { App } from './App'
+import './index.css'
+
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Failed to find the root element')
+
+// StrictMode is intentionally omitted: its development-only mount replay would
+// contaminate the component lifecycle counters used by this benchmark.
+render(<App />, rootElement)
diff --git a/examples/preact/realtime-trading/src/shell/TradingShell.tsx b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
new file mode 100644
index 0000000000..83a30ab517
--- /dev/null
+++ b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
@@ -0,0 +1,656 @@
+import { shallow, useSelector } from '@tanstack/preact-store'
+import { useState } from 'preact/hooks'
+import {
+  feedSampleRateAt,
+  feedSampleRateIndex,
+  feedSampleRateOptions,
+} from '../feed/feed-sample-rates'
+import {
+  FORCED_VIRTUALIZATION_ROW_COUNT,
+  resolveVirtualScrollMode,
+} from '../table/trading-row-virtualizer'
+import {
+  useMarketFeedController,
+  useMarketFeedState,
+  useTradingShellController,
+  useTradingShellState,
+} from './trading-shell-context'
+import { configuratorOptions } from './configurator-options'
+import type { ComponentChildren } from 'preact'
+import type { FeedMetrics } from '../benchmark/benchmark-monitor'
+
+const integerFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 0,
+})
+const rateFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+export function TradingShell(props: { children: ComponentChildren }) {
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const toggleSidebar = () => setSidebarOpen((open) => !open)
+
+  return (
+    <main
+      className={`trading-terminal ${sidebarOpen ? '' : 'is-sidebar-collapsed'}`}
+    >
+      <div className="shell-header">
+        <AppHeader sidebarOpen={sidebarOpen} onSidebarToggle={toggleSidebar} />
+
+        {import.meta.env.DEV && (
+          <aside className="development-warning">
+            DEV BUILD — use the production build before recording results.
+          </aside>
+        )}
+      </div>
+
+      <section className="market-panel" aria-label="Live synthetic quotes">
+        <MetricsStrip />
+        {props.children}
+      </section>
+      <MarketStatusbar />
+      <div className="sidebar-slot">
+        {sidebarOpen && <Configurator />}
+      </div>
+    </main>
+  )
+}
+
+function AppHeader(props: {
+  sidebarOpen: boolean
+  onSidebarToggle: () => void
+}) {
+  const { workerReady, running } = useMarketFeedState(
+    (state) => ({
+      workerReady: state.workerReady,
+      running: state.running,
+    }),
+    { compare: shallow },
+  )
+  return (
+    <header className="app-bar">
+      <div className="brand">
+        <strong>MARKET MONITOR</strong>
+      </div>
+      <div className="header-actions">
+        <span
+          className={`feed-status ${workerReady && running ? 'is-running' : ''}`}
+          data-testid="feed-status"
+        >
+          <span className="status-dot" aria-hidden="true" />
+          {!workerReady
+            ? 'FEED CONNECTING'
+            : running
+              ? 'FEED LIVE'
+              : 'FEED PAUSED'}
+        </span>
+        <button
+          className="sidebar-toggle"
+          type="button"
+          aria-expanded={props.sidebarOpen}
+          aria-controls="benchmark-configurator"
+          aria-label={
+            props.sidebarOpen ? 'Close configurator' : 'Open configurator'
+          }
+          title={props.sidebarOpen ? 'Close configurator' : 'Open configurator'}
+          onClick={props.onSidebarToggle}
+        >
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <rect x="2.5" y="3" width="15" height="14" rx="1.5" />
+            <path d="M12.5 3v14" />
+          </svg>
+        </button>
+      </div>
+    </header>
+  )
+}
+
+function MarketStatusbar() {
+  const { lastBatchSize, lastUpdateCount, mountedCells, liveComponents } =
+    useTradingShellState(
+      (state) => ({
+        lastBatchSize: state.metrics.lastBatchSize,
+        lastUpdateCount: state.metrics.lastUpdateCount,
+        mountedCells: state.mountedCells,
+        liveComponents: state.liveComponents,
+      }),
+      { compare: shallow },
+    )
+  return (
+    <footer className="market-statusbar">
+      <span>
+        MESSAGE SAMPLES <strong>{formatInteger(lastBatchSize)}</strong>
+      </span>
+      <span>
+        ROW UPDATES <strong>{formatInteger(lastUpdateCount)}</strong>
+      </span>
+      <span>
+        HOSTS <strong>{formatInteger(mountedCells)}</strong>
+      </span>
+      <span>
+        COMPONENTS <strong>{formatInteger(liveComponents)}</strong>
+      </span>
+    </footer>
+  )
+}
+
+function Configurator() {
+  const feedState = useMarketFeedState(
+    (storeState) => ({
+      running: storeState.running,
+      instrumentCount: storeState.instrumentCount,
+      targetTicksPerSecond: storeState.targetTicksPerSecond,
+      publishIntervalMs: storeState.publishIntervalMs,
+      updateSparklines: storeState.updateSparklines,
+      sparklineSampleIntervalMs: storeState.sparklineSampleIntervalMs,
+    }),
+    { compare: shallow },
+  )
+  const benchmarkState = useTradingShellState(
+    (storeState) => ({
+      requestedVirtualScrollMode: storeState.requestedVirtualScrollMode,
+    }),
+    { compare: shallow },
+  )
+  const controller = useTradingShellController()
+  const feed = useMarketFeedController()
+  const rendererMode = useSelector(controller.renderAtoms.rendererMode)
+  const { actions } = controller
+  const feedActions = feed.actions
+  const {
+    running,
+    instrumentCount,
+    targetTicksPerSecond,
+    publishIntervalMs,
+    updateSparklines,
+    sparklineSampleIntervalMs,
+  } = feedState
+  const { requestedVirtualScrollMode } = benchmarkState
+  const {
+    setRendererMode,
+    setVirtualScrollEnabled,
+    resetMarket,
+  } = actions
+  const {
+    toggle,
+    setInstrumentCount,
+    setTargetRate,
+    setPublishInterval,
+    setSparklineUpdates,
+    setSparklineSampleInterval,
+    runBurst,
+  } = feedActions
+  const virtualScrollForced = instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  const virtualScrollMode = resolveVirtualScrollMode(
+    requestedVirtualScrollMode,
+    instrumentCount,
+  )
+
+  return (
+    <aside
+      id="benchmark-configurator"
+      className="configurator"
+      aria-label="Benchmark configurator"
+    >
+      <header>
+        <span>CONFIGURATOR</span>
+        <small>RUN PARAMETERS</small>
+      </header>
+
+      <section className="config-section" aria-labelledby="feed-settings">
+        <h2 id="feed-settings">FEED</h2>
+        <button
+          className="primary-action"
+          type="button"
+          data-testid="feed-toggle"
+          onClick={toggle}
+        >
+          {running ? 'PAUSE FEED' : 'START FEED'}
+        </button>
+
+        <label className="field">
+          <span>Instruments (rows)</span>
+          <select
+            data-testid="instrument-count-select"
+            value={instrumentCount}
+            onChange={(event) => {
+              actions.resetViewState()
+              setInstrumentCount(Number(event.currentTarget.value))
+            }}
+          >
+            {configuratorOptions.instrumentCounts.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="field rate-field">
+          <span>
+            Synthetic quote workload
+            <strong data-testid="target-sample-rate">
+              {formatRate(targetTicksPerSecond)} samples/s
+            </strong>
+          </span>
+          <input
+            data-testid="target-rate-slider"
+            type="range"
+            min={0}
+            max={feedSampleRateOptions.length - 1}
+            step={1}
+            list="worker-sample-rate-steps"
+            value={feedSampleRateIndex(targetTicksPerSecond)}
+            aria-valuetext={`${formatRate(
+              targetTicksPerSecond,
+            )} synthetic quote samples per second`}
+            onChange={(event) =>
+              setTargetRate(feedSampleRateAt(Number(event.currentTarget.value)))
+            }
+          />
+          <datalist id="worker-sample-rate-steps">
+            {feedSampleRateOptions.map((option, index) => (
+              <option key={option.value} value={index} label={option.label} />
+            ))}
+          </datalist>
+          <small>
+            Fixed worker-side workload levels, from 100 to 100K samples/s.
+            Samples are coalesced; this is not the message delivery rate.
+          </small>
+        </label>
+
+        <label className="field">
+          <span>Worker delivery interval</span>
+          <select
+            data-testid="publish-interval-select"
+            value={publishIntervalMs}
+            onChange={(event) =>
+              setPublishInterval(Number(event.currentTarget.value))
+            }
+          >
+            {configuratorOptions.workerDeliveryIntervals.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <small>
+            The worker posts one coalesced update message at this target
+            cadence.
+          </small>
+        </label>
+      </section>
+
+      <section className="config-section" aria-labelledby="render-settings">
+        <h2 id="render-settings">RENDER PATH</h2>
+        <label className="field" data-testid="virtual-scroll-mode">
+          <span>Row rendering</span>
+          <select
+            data-testid="virtual-scroll-select"
+            value={virtualScrollMode}
+            disabled={virtualScrollForced}
+            onChange={(event) =>
+              setVirtualScrollEnabled(event.currentTarget.value === 'tanstack')
+            }
+          >
+            {configuratorOptions.rowRenderingModes.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <small>
+            {virtualScrollForced
+              ? 'TanStack Virtual is required and locked at 250 or more rows.'
+              : 'Full DOM mounts every row; TanStack Virtual mounts only the visible window.'}
+          </small>
+        </label>
+
+        <label className="toggle-field">
+          <input
+            type="checkbox"
+            checked={rendererMode === 'swap'}
+            onChange={(event) =>
+              setRendererMode(event.currentTarget.checked ? 'swap' : 'stable')
+            }
+          />
+          <span>
+            Swap Tick component A ↔ B
+            <small>destroy and recreate when direction changes</small>
+          </span>
+        </label>
+
+        <label className="toggle-field">
+          <input
+            type="checkbox"
+            checked={updateSparklines}
+            onChange={(event) =>
+              setSparklineUpdates(event.currentTarget.checked)
+            }
+          />
+          <span>
+            Update intraday charts
+            <small>
+              sample rolling prices independently for every instrument
+            </small>
+          </span>
+        </label>
+
+        <label className="field">
+          <span>Intraday chart sampling</span>
+          <select
+            data-testid="sparkline-sample-interval-select"
+            value={sparklineSampleIntervalMs}
+            onChange={(event) =>
+              setSparklineSampleInterval(Number(event.currentTarget.value))
+            }
+          >
+            {configuratorOptions.intradaySamplingIntervals.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <small>
+            How often each row adds a point to its sparkline. Quote generation
+            and worker delivery are unaffected.
+          </small>
+        </label>
+      </section>
+
+      <section className="config-section" aria-labelledby="stress-actions">
+        <h2 id="stress-actions">STRESS ACTIONS</h2>
+        <div className="action-grid">
+          <button type="button" onClick={runBurst}>
+            RUN 25K BURST
+          </button>
+          <button type="button" onClick={resetMarket}>
+            RESET SESSION
+          </button>
+        </div>
+      </section>
+
+      <Diagnostics />
+      <SelectedInstrument />
+    </aside>
+  )
+}
+
+function MetricsStrip() {
+  const { metrics, longAnimationFramesSupported } = useTradingShellState(
+    (state) => ({
+      metrics: state.metrics,
+      longAnimationFramesSupported: state.longAnimationFramesSupported,
+    }),
+    { compare: shallow },
+  )
+  return (
+    <section className="metrics-strip" aria-label="Live performance metrics">
+      <article>
+        <span>WORKER SAMPLES</span>
+        <strong data-testid="actual-rate">
+          {formatRate(metrics.actualTicksPerSecond)}
+        </strong>
+        <small>generated samples/s</small>
+      </article>
+      <article>
+        <span>ROW UPDATES</span>
+        <strong data-testid="row-update-rate">
+          {formatRate(metrics.rowUpdatesPerSecond)}
+        </strong>
+        <small>unique rows applied/s</small>
+      </article>
+      <article>
+        <span>MESSAGES</span>
+        <strong data-testid="message-rate">
+          {metrics.workerMessagesPerSecond.toFixed(1)}
+        </strong>
+        <small>worker messages/s</small>
+      </article>
+      <article>
+        <span>STATE APPLIES</span>
+        <strong data-testid="state-apply-rate">
+          {metrics.stateApplicationsPerSecond.toFixed(1)}
+        </strong>
+        <small>quote snapshots/s</small>
+      </article>
+      <article>
+        <span>TABLE COMMITS</span>
+        <strong data-testid="table-render-rate">
+          {metrics.tableRendersPerSecond.toFixed(1)}
+        </strong>
+        <small>completed renders/s</small>
+      </article>
+      <article>
+        <span>AVG RENDER</span>
+        <strong>{formatMs(metrics.averageRenderMs)}</strong>
+        <small>mutation → render</small>
+      </article>
+      <article>
+        <span>P95 RENDER</span>
+        <strong>{formatMs(metrics.p95RenderMs)}</strong>
+        <small>max {formatMs(metrics.maxRenderMs)}</small>
+      </article>
+      <article>
+        <span>LONG FRAMES</span>
+        {longAnimationFramesSupported ? (
+          <>
+            <strong
+              data-testid="long-frame-count"
+              className={metrics.longAnimationFrames > 0 ? 'metric-alert' : ''}
+            >
+              {metrics.longAnimationFrames}
+            </strong>
+            <small>worst {formatMs(metrics.worstLongAnimationFrameMs)}</small>
+          </>
+        ) : (
+          <>
+            <strong data-testid="long-frame-count">N/A</strong>
+            <small>unsupported</small>
+          </>
+        )}
+      </article>
+    </section>
+  )
+}
+
+function Diagnostics() {
+  const {
+    metrics,
+    mountedCells,
+    liveComponents,
+    longAnimationFramesSupported,
+  } = useTradingShellState(
+    (state) => ({
+      metrics: state.metrics,
+      mountedCells: state.mountedCells,
+      liveComponents: state.liveComponents,
+      longAnimationFramesSupported: state.longAnimationFramesSupported,
+    }),
+    { compare: shallow },
+  )
+  return (
+    <section
+      className="config-section diagnostics"
+      aria-labelledby="diagnostics"
+    >
+      <h2 id="diagnostics">DIAGNOSTICS</h2>
+      <dl>
+        <div>
+          <dt>Mounted cells</dt>
+          <dd>{formatInteger(mountedCells)}</dd>
+        </div>
+        <div>
+          <dt>Live components</dt>
+          <dd>{formatInteger(liveComponents)}</dd>
+        </div>
+        <div>
+          <dt>Created / destroyed</dt>
+          <dd>
+            {formatInteger(metrics.componentsCreated)} /{' '}
+            {formatInteger(metrics.componentsDestroyed)}
+          </dd>
+        </div>
+        <div>
+          <dt>Renderer callbacks / s</dt>
+          <dd data-testid="cell-render-rate">
+            {formatRate(metrics.cellRendererCallsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Component executions / s</dt>
+          <dd data-testid="component-render-rate">
+            {formatRate(metrics.componentRenderCallsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Executions by component / s</dt>
+          <dd data-testid="component-render-breakdown">
+            {formatInvocationRates(metrics.componentRenderRates)}
+          </dd>
+        </div>
+        <div>
+          <dt>Callbacks by column / s</dt>
+          <dd data-testid="cell-render-breakdown">
+            {formatInvocationRates(metrics.cellRendererRates)}
+          </dd>
+        </div>
+        <div>
+          <dt>DOM mutation records / s</dt>
+          <dd data-testid="dom-mutation-rate">
+            {formatRate(metrics.domMutationsPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Core row model calls / s</dt>
+          <dd data-testid="row-model-call-rate">
+            {metrics.rowModelCallsPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>Core row model avg / max</dt>
+          <dd data-testid="row-model-duration">
+            {formatMs(metrics.rowModelAverageMs)} /{' '}
+            {formatMs(metrics.rowModelMaxMs)}
+          </dd>
+        </div>
+        <div>
+          <dt>Visible rows</dt>
+          <dd data-testid="visible-row-count">
+            {formatInteger(metrics.visibleRows)}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages</dt>
+          <dd data-testid="worker-messages">
+            {formatInteger(metrics.workerMessages)}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker-coalesced updates / s</dt>
+          <dd data-testid="superseded-update-rate">
+            {formatRate(metrics.supersededUpdatesPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Last message samples / updated rows</dt>
+          <dd>
+            {formatInteger(metrics.lastBatchSize)} /{' '}
+            {formatInteger(metrics.lastUpdateCount)}
+          </dd>
+        </div>
+        <div>
+          <dt>Renders &gt; 16.7 ms</dt>
+          <dd>{metrics.slowRenders}</dd>
+        </div>
+        <div>
+          <dt>Long animation frames</dt>
+          <dd>
+            {longAnimationFramesSupported
+              ? formatInteger(metrics.longAnimationFrames)
+              : 'Unsupported'}
+          </dd>
+        </div>
+        <div>
+          <dt>JS heap</dt>
+          <dd>
+            {metrics.heapMb === null
+              ? 'N/A'
+              : `${metrics.heapMb.toFixed(1)} MB`}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  )
+}
+
+function SelectedInstrument() {
+  const controller = useTradingShellController()
+  const feed = useMarketFeedController()
+  const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
+  const quotes = useMarketFeedState((state) => state.quotes)
+  const selectedQuote = feed.getQuoteBySymbol(
+    quotes,
+    selectedSymbol,
+  )
+  return (
+    <section
+      className="config-section selected-instrument"
+      data-testid="selected-instrument"
+    >
+      <h2>SELECTED INSTRUMENT</h2>
+      {selectedQuote ? (
+        <>
+          <div className="selection">
+            <div>
+              <strong>{selectedQuote.symbol}</strong>
+              <span>{selectedQuote.company}</span>
+            </div>
+            <small>{selectedQuote.venue}</small>
+          </div>
+          <dl>
+            <div>
+              <dt>Last</dt>
+              <dd>{selectedQuote.price.toFixed(2)}</dd>
+            </div>
+            <div>
+              <dt>Bid / ask</dt>
+              <dd>
+                {selectedQuote.bid.toFixed(2)} / {selectedQuote.ask.toFixed(2)}
+              </dd>
+            </div>
+          </dl>
+        </>
+      ) : (
+        <p>
+          Click or begin a cell selection in any row to inspect its instrument.
+        </p>
+      )}
+    </section>
+  )
+}
+
+function formatInteger(value: number): string {
+  return integerFormatter.format(value)
+}
+
+function formatRate(value: number): string {
+  return rateFormatter.format(value)
+}
+
+function formatMs(value: number): string {
+  return `${value.toFixed(2)} ms`
+}
+
+function formatInvocationRates(
+  rates: FeedMetrics['componentRenderRates'],
+): string {
+  const activeRates = rates
+    .filter((rate) => rate.callsPerSecond > 0)
+    .sort((left, right) => right.callsPerSecond - left.callsPerSecond)
+  return activeRates.length === 0
+    ? 'No calls in sample'
+    : activeRates
+        .map((rate) => `${rate.name} ${formatRate(rate.callsPerSecond)}`)
+        .join(' · ')
+}
diff --git a/examples/preact/realtime-trading/src/shell/configurator-options.ts b/examples/preact/realtime-trading/src/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/preact/realtime-trading/src/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/preact/realtime-trading/src/shell/trading-shell-context.tsx b/examples/preact/realtime-trading/src/shell/trading-shell-context.tsx
new file mode 100644
index 0000000000..b4651a3d0f
--- /dev/null
+++ b/examples/preact/realtime-trading/src/shell/trading-shell-context.tsx
@@ -0,0 +1,61 @@
+import { createStoreContext, useSelector } from '@tanstack/preact-store'
+import type { ComponentChildren } from 'preact'
+import type {
+  MarketFeedController,
+  MarketFeedState,
+} from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/use-trading-benchmark-controller'
+import type { TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
+import type { UseSelectorOptions } from '@tanstack/preact-store'
+
+const {
+  StoreProvider: TradingStoreProvider,
+  useStoreContext: useTradingShellController,
+} = createStoreContext<TradingBenchmarkController>()
+
+const {
+  StoreProvider: MarketFeedStoreProvider,
+  useStoreContext: useMarketFeedController,
+} = createStoreContext<MarketFeedController>()
+
+export function MarketFeedProvider(props: {
+  controller: MarketFeedController
+  children: ComponentChildren
+}) {
+  return (
+    <MarketFeedStoreProvider value={props.controller}>
+      {props.children}
+    </MarketFeedStoreProvider>
+  )
+}
+
+export function TradingShellProvider(props: {
+  controller: TradingBenchmarkController
+  children: ComponentChildren
+}) {
+  return (
+    <MarketFeedProvider controller={props.controller.feed}>
+      <TradingStoreProvider value={props.controller}>
+        {props.children}
+      </TradingStoreProvider>
+    </MarketFeedProvider>
+  )
+}
+
+export { useMarketFeedController, useTradingShellController }
+
+export function useTradingShellState<TSelected>(
+  selector: (state: TradingBenchmarkState) => TSelected,
+  options?: UseSelectorOptions<TSelected>,
+): TSelected {
+  const controller = useTradingShellController()
+  return useSelector(controller.store, selector, options)
+}
+
+export function useMarketFeedState<TSelected>(
+  selector: (state: MarketFeedState) => TSelected,
+  options?: UseSelectorOptions<TSelected>,
+): TSelected {
+  const controller = useMarketFeedController()
+  return useSelector(controller.store, selector, options)
+}
diff --git a/examples/preact/realtime-trading/src/table/table-config/quote-cells.tsx b/examples/preact/realtime-trading/src/table/table-config/quote-cells.tsx
new file mode 100644
index 0000000000..05c16e9578
--- /dev/null
+++ b/examples/preact/realtime-trading/src/table/table-config/quote-cells.tsx
@@ -0,0 +1,219 @@
+import { useEffect } from 'preact/hooks'
+
+const compactNumber = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export const quoteCellLifecycle = {
+  created: 0,
+  destroyed: 0,
+}
+
+export const quoteCellRendererNames = [
+  'Market',
+  'Name',
+  'Symbol',
+  'Last',
+  'Change',
+  'ChangePercent',
+  'Bid',
+  'BidVolume',
+  'Ask',
+  'AskVolume',
+  'Open',
+  'High',
+  'Low',
+  'Intraday',
+] as const
+
+export const quoteComponentNames = [
+  'PriceCell',
+  'StableMoveCell',
+  'UpMoveCell',
+  'DownMoveCell',
+  'PercentChangeCell',
+  'SpreadCell',
+  'DepthCell',
+  'QuoteAgeCell',
+  'SparklineCell',
+] as const
+
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+
+const createCounterMap = <Name extends string>(
+  names: ReadonlyArray<Name>,
+): Record<Name, number> =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
+  cellRendererCallsByName: createCounterMap(quoteCellRendererNames),
+  componentRenderCallsByName: createCounterMap(quoteComponentNames),
+}
+
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
+  'use no memo'
+  // Benchmark instrumentation is intentionally impure and must run per call.
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value
+}
+
+function useLifecycleCounter(componentName: QuoteComponentName): void {
+  'use no memo'
+  // This diagnostic mutation measures component-function invocation itself.
+  quoteRenderDiagnostics.componentRenderCalls++
+  quoteRenderDiagnostics.componentRenderCallsByName[componentName]++
+  useEffect(() => {
+    quoteCellLifecycle.created++
+    return () => {
+      quoteCellLifecycle.destroyed++
+    }
+  }, [])
+}
+
+export function PriceCell(props: {
+  price: number
+  move: number
+  onSelect: () => void
+}) {
+  useLifecycleCounter('PriceCell')
+  return (
+    <button
+      className={`price-button ${props.move >= 0 ? 'quote-up' : 'quote-down'}`}
+      onClick={props.onSelect}
+    >
+      {props.price.toFixed(2)}
+    </button>
+  )
+}
+
+export function StableMoveCell({ move }: { move: number }) {
+  useLifecycleCounter('StableMoveCell')
+  return (
+    <span className={`move-cell ${move >= 0 ? 'quote-up' : 'quote-down'}`}>
+      {formatSigned(move)}
+    </span>
+  )
+}
+
+export function UpMoveCell({ move }: { move: number }) {
+  useLifecycleCounter('UpMoveCell')
+  return <span className="move-cell quote-up">▲ {formatSigned(move)}</span>
+}
+
+export function DownMoveCell({ move }: { move: number }) {
+  useLifecycleCounter('DownMoveCell')
+  return <span className="move-cell quote-down">▼ {formatSigned(move)}</span>
+}
+
+export function PercentChangeCell({ value }: { value: number }) {
+  useLifecycleCounter('PercentChangeCell')
+  return (
+    <span
+      className={`percent-change-cell ${value >= 0 ? 'quote-up' : 'quote-down'}`}
+    >
+      {value >= 0 ? '+' : ''}
+      {value.toFixed(2)}%
+    </span>
+  )
+}
+
+export function SpreadCell({ bid, ask }: { bid: number; ask: number }) {
+  useLifecycleCounter('SpreadCell')
+  const spread = Math.max(0, ask - bid)
+  const midpoint = (bid + ask) / 2
+  const basisPoints = midpoint === 0 ? 0 : (spread / midpoint) * 10_000
+
+  return (
+    <span className={`spread-cell ${basisPoints >= 4 ? 'spread-wide' : ''}`}>
+      {spread.toFixed(2)}
+      <small>{basisPoints.toFixed(1)} bp</small>
+    </span>
+  )
+}
+
+export function DepthCell(props: { bidSize: number; askSize: number }) {
+  useLifecycleCounter('DepthCell')
+  const total = props.bidSize + props.askSize
+  const bidShare = total === 0 ? 50 : (props.bidSize / total) * 100
+
+  return (
+    <div
+      className="depth-cell"
+      title={`Bid ${props.bidSize} / Ask ${props.askSize}`}
+    >
+      <span className="depth-bid" style={{ width: `${bidShare}%` }} />
+      <span className="depth-ask" style={{ width: `${100 - bidShare}%` }} />
+      <span className="depth-values">
+        <span>{compactNumber.format(props.bidSize)}</span>
+        <span>{compactNumber.format(props.askSize)}</span>
+      </span>
+    </div>
+  )
+}
+
+export function QuoteAgeCell({ ageMs }: { ageMs: number }) {
+  useLifecycleCounter('QuoteAgeCell')
+  const className =
+    ageMs >= 1_500
+      ? 'quote-age quote-age-stale'
+      : ageMs >= 500
+        ? 'quote-age quote-age-warm'
+        : 'quote-age'
+
+  return (
+    <span className={className}>
+      {ageMs < 1_000
+        ? `${Math.round(ageMs)} ms`
+        : `${(ageMs / 1_000).toFixed(1)} s`}
+    </span>
+  )
+}
+
+export function SparklineCell({ values }: { values: ReadonlyArray<number> }) {
+  useLifecycleCounter('SparklineCell')
+  const rising = (values.at(-1) ?? 0) >= (values[0] ?? 0)
+  const { min, max } = findRange(values)
+  const range = max - min || 1
+  const denominator = Math.max(1, values.length - 1)
+  const points = values
+    .map((value, index) => {
+      const x = (index / denominator) * 100
+      const y = 22 - ((value - min) / range) * 20
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    })
+    .join(' ')
+
+  return (
+    <svg
+      className={`sparkline ${rising ? 'quote-up' : 'quote-down'}`}
+      viewBox="0 0 100 24"
+      preserveAspectRatio="none"
+    >
+      <polyline points={points} />
+    </svg>
+  )
+}
+
+function formatSigned(value: number): string {
+  return `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+}
+
+function findRange(values: ReadonlyArray<number>): {
+  min: number
+  max: number
+} {
+  const first = values[0] ?? 0
+  return values.reduce(
+    (range, value) => {
+      range.min = Math.min(range.min, value)
+      range.max = Math.max(range.max, value)
+      return range
+    },
+    { min: first, max: first },
+  )
+}
diff --git a/examples/preact/realtime-trading/src/table/table-config/trading-table-config.tsx b/examples/preact/realtime-trading/src/table/table-config/trading-table-config.tsx
new file mode 100644
index 0000000000..43cb9cdf15
--- /dev/null
+++ b/examples/preact/realtime-trading/src/table/table-config/trading-table-config.tsx
@@ -0,0 +1,299 @@
+import { useSelector } from '@tanstack/preact-store'
+import { useTradingShellController } from '../../shell/trading-shell-context'
+import {
+  DownMoveCell,
+  PercentChangeCell,
+  PriceCell,
+  SparklineCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells'
+import type { ComponentChildren } from 'preact'
+import type { MarketQuote } from '../../feed/market-data'
+
+export type RendererMode = 'stable' | 'swap'
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+
+interface TradingCellContext {
+  row: { original: MarketQuote }
+}
+
+export interface TradingColumnDefinition {
+  id: string
+  header: string
+  size?: number
+  columns?: Array<TradingColumnDefinition>
+  accessorFn?: (row: MarketQuote) => unknown
+  enableSorting?: boolean
+  filterFn?: 'includesString'
+  sortFn?: 'basic'
+  cell?: (context: TradingCellContext) => ComponentChildren
+}
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+export const tradingColumns: Array<TradingColumnDefinition> = [
+  {
+    id: 'instrument',
+    header: 'Instrument',
+    columns: [
+      {
+        id: 'market',
+        header: 'Market',
+        size: 72,
+        accessorFn: (row) => row.venue,
+        cell: ({ row }) => recordCellRender('Market', row.original.venue),
+      },
+      {
+        id: 'name',
+        header: 'Name',
+        size: 180,
+        accessorFn: (row) => row.company,
+        cell: ({ row }) => recordCellRender('Name', row.original.company),
+      },
+      {
+        id: 'symbol',
+        header: 'Symbol',
+        size: 92,
+        accessorFn: (row) => row.symbol,
+        filterFn: 'includesString',
+        cell: ({ row }) => recordCellRender('Symbol', row.original.symbol),
+      },
+    ],
+  },
+  {
+    id: 'priceAndChange',
+    header: 'Price & Change',
+    columns: [
+      {
+        id: 'price',
+        header: 'Price',
+        size: 96,
+        accessorFn: (row) => row.price,
+        sortFn: 'basic',
+        cell: ({ row }) =>
+          recordCellRender('Last', <LastPriceCell quote={row.original} />),
+      },
+      {
+        id: 'change',
+        header: 'Chg',
+        size: 94,
+        accessorFn: (row) => getDayChange(row),
+        cell: ({ row }) =>
+          recordCellRender('Change', <DayChangeCell quote={row.original} />),
+      },
+      {
+        id: 'changePercent',
+        header: 'Chg%',
+        size: 90,
+        accessorFn: (row) => getDayChangePercent(row),
+        cell: ({ row }) =>
+          recordCellRender(
+            'ChangePercent',
+            <PercentChangeCell value={getDayChangePercent(row.original)} />,
+          ),
+      },
+    ],
+  },
+  {
+    id: 'orderBook',
+    header: 'Order Book',
+    columns: [
+      {
+        id: 'bid',
+        header: 'Bid',
+        size: 90,
+        accessorFn: (row) => row.bid,
+        cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)),
+      },
+      {
+        id: 'bidSize',
+        header: 'Bid Vol',
+        size: 100,
+        accessorFn: (row) => row.bidSize,
+        cell: ({ row }) =>
+          recordCellRender(
+            'BidVolume',
+            compactFormatter.format(row.original.bidSize),
+          ),
+      },
+      {
+        id: 'ask',
+        header: 'Ask',
+        size: 90,
+        accessorFn: (row) => row.ask,
+        cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)),
+      },
+      {
+        id: 'askSize',
+        header: 'Ask Vol',
+        size: 100,
+        accessorFn: (row) => row.askSize,
+        cell: ({ row }) =>
+          recordCellRender(
+            'AskVolume',
+            compactFormatter.format(row.original.askSize),
+          ),
+      },
+    ],
+  },
+  {
+    id: 'session',
+    header: 'Session',
+    columns: [
+      {
+        id: 'open',
+        header: 'Open',
+        size: 90,
+        accessorFn: (row) => row.open,
+        cell: ({ row }) =>
+          recordCellRender('Open', row.original.open.toFixed(2)),
+      },
+      {
+        id: 'high',
+        header: 'High',
+        size: 90,
+        accessorFn: (row) => row.high,
+        cell: ({ row }) =>
+          recordCellRender('High', row.original.high.toFixed(2)),
+      },
+      {
+        id: 'low',
+        header: 'Low',
+        size: 90,
+        accessorFn: (row) => row.low,
+        cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)),
+      },
+    ],
+  },
+  {
+    id: 'chart',
+    header: 'Chart',
+    columns: [
+      {
+        id: 'history',
+        header: 'Intraday',
+        size: 150,
+        enableSorting: false,
+        cell: ({ row }) =>
+          recordCellRender(
+            'Intraday',
+            <SparklineCell values={row.original.history} />,
+          ),
+      },
+    ],
+  },
+]
+
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
+
+export const TRADING_COLUMN_COUNT = 14
+
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(
+    rowModelDiagnostics.maxDurationMs,
+    duration,
+  )
+  rowModelDiagnostics.lastRowCount = rows.length
+
+  try {
+    performance.measure('tanstack-row-model', {
+      start,
+      end,
+      detail: { rowCount: rows.length },
+    })
+    if (rowModelDiagnostics.calls % 1_000 === 0) {
+      performance.clearMeasures('tanstack-row-model')
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+
+  return rows
+}
+
+function LastPriceCell(props: { quote: MarketQuote }) {
+  const { selectSymbol } = useTradingShellController().actions
+  return (
+    <PriceCell
+      price={props.quote.price}
+      move={getDayChange(props.quote)}
+      onSelect={() => selectSymbol(props.quote.symbol)}
+    />
+  )
+}
+
+function DayChangeCell(props: { quote: MarketQuote }) {
+  const { rendererMode } = useTradingShellController().renderAtoms
+  const mode = useSelector(rendererMode)
+  const change = getDayChange(props.quote)
+  if (mode === 'stable') {
+    return <StableMoveCell move={change} />
+  }
+  return change >= 0 ? (
+    <UpMoveCell move={change} />
+  ) : (
+    <DownMoveCell move={change} />
+  )
+}
+
+export function TradingRow(props: {
+  quote: MarketQuote
+  children: ComponentChildren
+  rowSelected: boolean
+  virtualRow?: { index: number; start: number }
+}) {
+  const { selectedSymbol } = useTradingShellController().renderAtoms
+  const selected = useSelector(
+    selectedSymbol,
+    (symbol) => symbol === props.quote.symbol,
+  )
+  return (
+    <tr
+      className={props.virtualRow ? 'virtual-table-row' : undefined}
+      style={
+        props.virtualRow
+          ? { transform: `translateY(${props.virtualRow.start}px)` }
+          : undefined
+      }
+      data-virtual-index={props.virtualRow?.index}
+      data-symbol={props.quote.symbol}
+      data-row-id={props.quote.id}
+      data-symbol-selected={selected ? 'true' : undefined}
+      title={props.quote.company}
+      aria-selected={props.rowSelected}
+    >
+      {props.children}
+    </tr>
+  )
+}
+
+function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+
+function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/preact/realtime-trading/src/table/table-interactions.ts b/examples/preact/realtime-trading/src/table/table-interactions.ts
new file mode 100644
index 0000000000..2c6bc72dff
--- /dev/null
+++ b/examples/preact/realtime-trading/src/table/table-interactions.ts
@@ -0,0 +1,189 @@
+import type { JSX } from 'preact'
+
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Record<string, SelectableGridCell>
+}
+
+interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Record<string, SelectableGridRow>
+  }
+}
+
+interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    nativeEvent: event,
+  })
+}
+
+export class TradingGridPointerController {
+  #lastPointerCell: HTMLTableCellElement | null = null
+
+  handleMouseDown(
+    table: TradingGridTable,
+    event: MouseEvent,
+    selectSymbol: (symbol: string) => void,
+  ): void {
+    if (event.button !== 0) return
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+
+    this.#lastPointerCell = target.element
+    selectSymbol(target.cell.row.original.symbol)
+    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+  }
+
+  handlePointerOver(table: TradingGridTable, event: MouseEvent): void {
+    if ((event.buttons & 1) === 0) {
+      this.resetPointerCell()
+      return
+    }
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target || target.element === this.#lastPointerCell) return
+
+    this.#lastPointerCell = target.element
+    target.cell.getSelectionExtendHandler()(event)
+  }
+
+  handleClick(table: TradingGridTable, event: MouseEvent): void {
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+    selectRowFromPointer(table, target.cell.row, event)
+  }
+
+  resetPointerCell(): void {
+    this.#lastPointerCell = null
+  }
+
+  #findCellTarget(
+    table: TradingGridTable,
+    path: Array<EventTarget>,
+  ): SelectionCellTarget | null {
+    for (const target of path) {
+      if (!(target instanceof HTMLTableCellElement)) continue
+
+      const columnId = target.dataset['columnId']
+      const rowId =
+        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+      if (!columnId || !rowId) return null
+
+      const row = table.getRowModel().rowsById[rowId]
+      const cell = row.getAllCellsByColumnId()[columnId]
+      return { element: target, cell }
+    }
+
+    return null
+  }
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: JSX.TargetedKeyboardEvent<HTMLElement>,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): JSX.AriaAttributes['aria-sort'] {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/preact/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/preact/realtime-trading/src/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..da5733158f
--- /dev/null
+++ b/examples/preact/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -0,0 +1,54 @@
+import { useLayoutEffect, useState } from 'preact/hooks'
+import {
+  Virtualizer,
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+} from '@tanstack/virtual-core'
+import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
+
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
+
+export function useVirtualizer<
+  TScrollElement extends Element,
+  TItemElement extends Element,
+>(
+  options: PartialKeys<
+    VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  >,
+): Virtualizer<TScrollElement, TItemElement> {
+  const [, setRenderVersion] = useState(0)
+  const resolvedOptions: VirtualizerOptions<TScrollElement, TItemElement> = {
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options,
+    onChange: (instance, sync) => {
+      setRenderVersion((version) => version + 1)
+      options.onChange?.(instance, sync)
+    },
+  }
+  const [instance] = useState(
+    () => new Virtualizer<TScrollElement, TItemElement>(resolvedOptions),
+  )
+
+  instance.setOptions(resolvedOptions)
+  useLayoutEffect(() => instance._didMount(), [instance])
+  useLayoutEffect(() => instance._willUpdate())
+
+  return instance
+}
diff --git a/examples/preact/realtime-trading/src/table/trading-table.tsx b/examples/preact/realtime-trading/src/table/trading-table.tsx
new file mode 100644
index 0000000000..347bb00ca7
--- /dev/null
+++ b/examples/preact/realtime-trading/src/table/trading-table.tsx
@@ -0,0 +1,625 @@
+import {
+  FlexRender,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  sortFn_basic,
+  stockFeatures,
+  tableFeatures,
+  useTable,
+} from '@tanstack/preact-table'
+import { useLayoutEffect, useRef, useState } from 'preact/hooks'
+import { useTableBenchmark } from '../benchmark/use-table-benchmark'
+import {
+  useMarketFeedController,
+  useMarketFeedState,
+  useTradingShellController,
+  useTradingShellState,
+} from '../shell/trading-shell-context'
+import {
+  TradingRow,
+  readMeasuredRows,
+  tradingColumns,
+} from './table-config/trading-table-config'
+import {
+  TradingGridPointerController,
+  handleCellNavigation,
+  reorderColumnIds,
+  sortAriaValue,
+  sortIndicator,
+} from './table-interactions'
+import {
+  TRADING_ROW_HEIGHT,
+  TRADING_ROW_OVERSCAN,
+  resolveVirtualScrollMode,
+  useVirtualizer,
+} from './trading-row-virtualizer'
+import type { VirtualScrollMode } from './trading-row-virtualizer'
+import type {
+  CellSelectionBounds,
+  CellSelectionState,
+} from '@tanstack/preact-table'
+import type { VirtualItem } from '@tanstack/virtual-core'
+import type { MarketQuote } from '../feed/market-data'
+import type { CoreTableState } from './table-config/trading-table-config'
+
+export {
+  TRADING_COLUMN_COUNT,
+  rowModelDiagnostics,
+} from './table-config/trading-table-config'
+export type {
+  CoreTableState,
+  RendererMode,
+} from './table-config/trading-table-config'
+export type { VirtualScrollMode } from './trading-row-virtualizer'
+
+const features = tableFeatures({
+  ...stockFeatures,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { basic: sortFn_basic },
+})
+
+export function TradingTable() {
+  const controller = useTradingShellController()
+  const feed = useMarketFeedController()
+  const quotes = useMarketFeedState((state) => state.quotes)
+  const requestedVirtualScrollMode = useTradingShellState(
+    (state) => state.requestedVirtualScrollMode,
+  )
+  const instrumentCount = useMarketFeedState((state) => state.instrumentCount)
+  const virtualScrollMode = resolveVirtualScrollMode(
+    requestedVirtualScrollMode,
+    instrumentCount,
+  )
+
+  useLayoutEffect(() => feed.completeRender())
+  useTableBenchmark(controller)
+  const table = useTradingTable({ quotes })
+  const layoutRefs = useTradingTableLayout(table)
+
+  return (
+    <table.Subscribe
+      selector={(state) => ({
+        sorting: state.sorting,
+        columnFilters: state.columnFilters,
+        columnOrder: state.columnOrder,
+      })}
+    >
+      {(coreState) => (
+        <TradingTableViewport
+          table={table}
+          rows={readRows(table, quotes, coreState)}
+          sourceRowCount={quotes.length}
+          layoutRefs={layoutRefs}
+          virtualScrollMode={virtualScrollMode}
+          reportRenderedRowCount={controller.actions.setRenderedRowCount}
+        />
+      )}
+    </table.Subscribe>
+  )
+}
+
+type TradingTableInstance = ReturnType<typeof useTradingTable>
+
+interface ColumnDragRuntime {
+  columnId: string | null
+  sourceElement: HTMLTableCellElement | null
+  targetElement: HTMLTableCellElement | null
+}
+
+function clearColumnDrag(runtime: ColumnDragRuntime): void {
+  runtime.sourceElement?.classList.remove('is-column-dragging')
+  runtime.targetElement?.classList.remove('is-column-drop-target')
+  runtime.columnId = null
+  runtime.sourceElement = null
+  runtime.targetElement = null
+}
+
+function showColumnDropTarget(
+  runtime: ColumnDragRuntime,
+  targetColumnId: string,
+  targetElement: HTMLTableCellElement | null,
+): void {
+  runtime.targetElement?.classList.remove('is-column-drop-target')
+  runtime.targetElement = null
+  if (runtime.columnId === targetColumnId || !targetElement) return
+  targetElement.classList.add('is-column-drop-target')
+  runtime.targetElement = targetElement
+}
+
+function useTradingTableLayout(table: TradingTableInstance) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const tableRef = useRef<HTMLTableElement>(null)
+  const fitRuntime = useRef({ manuallyResized: false })
+
+  useLayoutEffect(() => {
+    const writeColumnSizes = () => {
+      const tableElement = tableRef.current
+      if (!tableElement) return
+      for (const header of table.getFlatHeaders()) {
+        tableElement.style.setProperty(
+          `--header-${header.id}-size`,
+          String(header.getSize()),
+        )
+        tableElement.style.setProperty(
+          `--col-${header.column.id}-size`,
+          String(header.column.getSize()),
+        )
+      }
+      tableElement.style.width = `${table.getTotalSize()}px`
+    }
+
+    writeColumnSizes()
+    const sizingSubscription =
+      table.atoms.columnSizing.subscribe(writeColumnSizes)
+    const orderSubscription =
+      table.atoms.columnOrder.subscribe(writeColumnSizes)
+    const fitAvailableWidth = () => {
+      const scrollElement = scrollRef.current
+      if (!scrollElement || fitRuntime.current.manuallyResized) return
+      const currentWidth = table.getTotalSize()
+      const availableWidth = scrollElement.clientWidth
+      if (availableWidth <= currentWidth + 1 || currentWidth <= 0) return
+
+      const ratio = availableWidth / currentWidth
+      table.setColumnSizing(
+        Object.fromEntries(
+          table
+            .getVisibleLeafColumns()
+            .map((column) => [column.id, column.getSize() * ratio]),
+        ),
+      )
+    }
+    const resizeObserver = new ResizeObserver(fitAvailableWidth)
+    const resizingSubscription = table.atoms.columnResizing.subscribe(
+      (state) => {
+        if (state.isResizingColumn !== false) {
+          fitRuntime.current.manuallyResized = true
+        }
+      },
+    )
+    if (scrollRef.current) resizeObserver.observe(scrollRef.current)
+    fitAvailableWidth()
+
+    return () => {
+      sizingSubscription.unsubscribe()
+      orderSubscription.unsubscribe()
+      resizingSubscription.unsubscribe()
+      resizeObserver.disconnect()
+    }
+  }, [table])
+
+  return { scrollRef, tableRef }
+}
+
+function TradingTableHeader(props: { table: TradingTableInstance }) {
+  const dragRuntime = useRef<ColumnDragRuntime>({
+    columnId: null,
+    sourceElement: null,
+    targetElement: null,
+  })
+
+  return (
+    <props.table.Subscribe
+      selector={(state) => ({
+        columnOrder: state.columnOrder,
+        sorting: state.sorting,
+      })}
+    >
+      {() => (
+        <thead>
+          {props.table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                const isLeaf = header.subHeaders.length === 0
+                const sorted = header.column.getIsSorted()
+                return (
+                  <th
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    style={{
+                      width: `calc(var(--header-${header.id}-size) * 1px)`,
+                    }}
+                    className={getHeaderClassName(header)}
+                    aria-sort={isLeaf ? sortAriaValue(sorted) : undefined}
+                  >
+                    {!header.isPlaceholder &&
+                      (isLeaf ? (
+                        <>
+                          <div
+                            className="leaf-header-content"
+                            onDragOver={(event) => {
+                              event.preventDefault()
+                              showColumnDropTarget(
+                                dragRuntime.current,
+                                header.column.id,
+                                event.currentTarget.closest('th'),
+                              )
+                            }}
+                            onDrop={(event) => {
+                              event.preventDefault()
+                              const dataTransfer = event.dataTransfer
+                              const sourceId =
+                                dataTransfer?.getData('text/plain') ||
+                                dragRuntime.current.columnId
+                              if (sourceId) {
+                                props.table.setColumnOrder(
+                                  reorderColumnIds(
+                                    props.table
+                                      .getVisibleLeafColumns()
+                                      .map((column) => column.id),
+                                    sourceId,
+                                    header.column.id,
+                                  ),
+                                )
+                              }
+                              clearColumnDrag(dragRuntime.current)
+                            }}
+                          >
+                            <button
+                              type="button"
+                              className="column-drag-handle"
+                              draggable
+                              aria-label={`Move ${header.column.id} column`}
+                              onDragStart={(event) => {
+                                const runtime = dragRuntime.current
+                                runtime.columnId = header.column.id
+                                runtime.sourceElement =
+                                  event.currentTarget.closest('th')
+                                runtime.sourceElement?.classList.add(
+                                  'is-column-dragging',
+                                )
+                                const dataTransfer = event.dataTransfer
+                                if (!dataTransfer) return
+                                dataTransfer.effectAllowed = 'move'
+                                dataTransfer.setData(
+                                  'text/plain',
+                                  header.column.id,
+                                )
+                              }}
+                              onDragEnd={() => {
+                                clearColumnDrag(dragRuntime.current)
+                              }}
+                            >
+                              ⋮⋮
+                            </button>
+                            <button
+                              type="button"
+                              className={`sort-header-button${
+                                header.column.getCanSort() ? ' is-sortable' : ''
+                              }`}
+                              disabled={!header.column.getCanSort()}
+                              onClick={header.column.getToggleSortingHandler()}
+                            >
+                              <span className="header-label">
+                                <FlexRender header={header} />
+                              </span>
+                              {header.column.getCanSort() && (
+                                <span
+                                  className={`sort-indicator${
+                                    sorted ? ' is-active' : ''
+                                  }`}
+                                  aria-hidden="true"
+                                >
+                                  {sortIndicator(sorted)}
+                                </span>
+                              )}
+                            </button>
+                          </div>
+                          {header.column.getCanResize() && (
+                            <props.table.Subscribe
+                              selector={(state) =>
+                                state.columnResizing.isResizingColumn ===
+                                header.column.id
+                              }
+                            >
+                              {(isResizing) => (
+                                <div
+                                  className={`column-resize-handle${
+                                    isResizing ? ' is-resizing' : ''
+                                  }`}
+                                  role="separator"
+                                  aria-orientation="vertical"
+                                  onDblClick={() =>
+                                    header.column.resetSize()
+                                  }
+                                  onMouseDown={header.getResizeHandler()}
+                                  onTouchStart={header.getResizeHandler()}
+                                />
+                              )}
+                            </props.table.Subscribe>
+                          )}
+                        </>
+                      ) : (
+                        <FlexRender header={header} />
+                      ))}
+                  </th>
+                )
+              })}
+            </tr>
+          ))}
+        </thead>
+      )}
+    </props.table.Subscribe>
+  )
+}
+
+function useTradingTable(props: {
+  quotes: Array<MarketQuote>
+}) {
+  return useTable(
+    {
+      key: 'preact-realtime-trading',
+      features,
+      columns: tradingColumns,
+      data: props.quotes,
+      getRowId: (row) => row.id,
+      columnResizeMode: 'onChange',
+      defaultColumn: { minSize: 56, maxSize: 800 },
+      autoResetCellSelection: false,
+    },
+    () => null,
+  )
+}
+
+function TradingTableViewport(props: {
+  table: ReturnType<typeof useTradingTable>
+  rows: ReturnType<ReturnType<typeof useTradingTable>['getRowModel']>['rows']
+  sourceRowCount: number
+  layoutRefs: ReturnType<typeof useTradingTableLayout>
+  virtualScrollMode: VirtualScrollMode
+  reportRenderedRowCount: (count: number) => void
+}) {
+  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+    count: props.rows.length,
+    estimateSize: () => TRADING_ROW_HEIGHT,
+    getScrollElement: () => props.layoutRefs.scrollRef.current,
+    getItemKey: (index) => props.rows[index]?.id ?? index,
+    overscan: TRADING_ROW_OVERSCAN,
+    enabled: props.virtualScrollMode === 'tanstack',
+  })
+  const virtualRows = rowVirtualizer.getVirtualItems()
+  const renderedRowCount =
+    props.virtualScrollMode === 'tanstack'
+      ? virtualRows.length
+      : props.rows.length
+  const visibleRange = readVisibleRange(
+    rowVirtualizer.range,
+    props.rows.length,
+    props.virtualScrollMode,
+  )
+
+  useLayoutEffect(() => {
+    props.reportRenderedRowCount(renderedRowCount)
+  }, [props.reportRenderedRowCount, renderedRowCount])
+
+  return (
+    <>
+      <div
+        ref={props.layoutRefs.scrollRef}
+        className={`table-scroll${
+          props.virtualScrollMode === 'tanstack' ? ' is-virtualized' : ''
+        }`}
+        data-trading-table
+        tabIndex={0}
+        onKeyDown={(event) => handleCellNavigation(props.table, event)}
+      >
+        <table
+          ref={props.layoutRefs.tableRef}
+          className={`trading-data-grid${
+            props.virtualScrollMode === 'tanstack' ? ' virtual-table' : ''
+          }`}
+          data-testid="trading-table"
+          role="grid"
+          aria-multiselectable="true"
+        >
+          <TradingTableHeader table={props.table} />
+          <TradingRows
+            table={props.table}
+            rows={props.rows}
+            sourceRowCount={props.sourceRowCount}
+            virtualRows={virtualRows}
+            virtualScrollMode={props.virtualScrollMode}
+          />
+        </table>
+      </div>
+      {props.virtualScrollMode === 'tanstack' && (
+        <footer
+          className="virtual-scroll-footer"
+          data-testid="virtual-scroll-footer"
+        >
+          <span>
+            TanStack · Total · {props.rows.length} rows ·{' '}
+            {props.table.getVisibleLeafColumns().length} columns
+          </span>
+          <span data-testid="visible-row-range">
+            {visibleRange
+              ? `Current · rows ${visibleRange.start}..${visibleRange.end}`
+              : 'Current · rows —'}
+          </span>
+        </footer>
+      )}
+    </>
+  )
+}
+
+function TradingRows(props: {
+  table: ReturnType<typeof useTradingTable>
+  rows: ReturnType<ReturnType<typeof useTradingTable>['getRowModel']>['rows']
+  sourceRowCount: number
+  virtualRows: Array<VirtualItem>
+  virtualScrollMode: VirtualScrollMode
+}) {
+  const { selectSymbol } = useTradingShellController().actions
+  const [pointerInteractions] = useState(
+    () => new TradingGridPointerController(),
+  )
+
+  return (
+    <tbody
+      className={
+        props.virtualScrollMode === 'tanstack'
+          ? 'virtual-table-body'
+          : undefined
+      }
+      style={
+        props.virtualScrollMode === 'tanstack'
+          ? { height: `${props.rows.length * TRADING_ROW_HEIGHT}px` }
+          : undefined
+      }
+      data-source-row-count={props.sourceRowCount}
+      onMouseDown={(event) =>
+        pointerInteractions.handleMouseDown(
+          props.table,
+          event,
+          selectSymbol,
+        )
+      }
+      onPointerOver={(event) =>
+        pointerInteractions.handlePointerOver(props.table, event)
+      }
+      onMouseLeave={() => pointerInteractions.resetPointerCell()}
+      onClick={(event) =>
+        pointerInteractions.handleClick(props.table, event)
+      }
+    >
+      {props.virtualScrollMode === 'tanstack'
+        ? props.virtualRows.map((virtualRow) => {
+            const row = props.rows[virtualRow.index]
+            return (
+              <TradingRowBoundary
+                key={row.id}
+                table={props.table}
+                row={row}
+                virtualRow={virtualRow}
+              />
+            )
+          })
+        : props.rows.map((row) => (
+            <TradingRowBoundary
+              key={row.id}
+              table={props.table}
+              row={row}
+            />
+          ))}
+    </tbody>
+  )
+}
+
+type TradingTableRow = ReturnType<
+  ReturnType<typeof useTradingTable>['getRowModel']
+>['rows'][number]
+
+function TradingRowBoundary(props: {
+  table: ReturnType<typeof useTradingTable>
+  row: TradingTableRow
+  virtualRow?: VirtualItem
+}) {
+  const { row, table, virtualRow } = props
+
+  return (
+    <table.Subscribe
+      selector={(state) =>
+        `${row.id in state.rowSelection ? 1 : 0}:${cellSelectionRowKey(
+          state.cellSelection,
+          table.getCellSelectionBounds(),
+          row.getDisplayIndex(),
+          row.id,
+        )}`
+      }
+    >
+      {() => (
+        <TradingRow
+          quote={row.original}
+          rowSelected={row.getIsSelected()}
+          virtualRow={virtualRow}
+        >
+          {row.getVisibleCells().map((cell) => {
+            const edges = cell.getSelectionEdges()
+
+            return (
+              <td
+                key={cell.id}
+                style={{
+                  width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                }}
+                data-column-id={cell.column.id}
+                data-cell-focused={cell.getIsFocused() ? 'true' : undefined}
+                data-selection-top={edges.top ? 'true' : undefined}
+                data-selection-right={edges.right ? 'true' : undefined}
+                data-selection-bottom={edges.bottom ? 'true' : undefined}
+                data-selection-left={edges.left ? 'true' : undefined}
+                aria-selected={cell.getIsSelected()}
+                tabIndex={cell.getTabIndex()}
+              >
+                <FlexRender cell={cell} />
+              </td>
+            )
+          })}
+        </TradingRow>
+      )}
+    </table.Subscribe>
+  )
+}
+
+function getHeaderClassName(header: {
+  subHeaders: ReadonlyArray<unknown>
+  column: { id: string }
+}): string | undefined {
+  if (header.subHeaders.length > 0) return 'column-group-header'
+  return isTextColumn(header.column.id) ? undefined : 'numeric-header'
+}
+
+function isTextColumn(columnId: string): boolean {
+  return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
+}
+
+function readVisibleRange(
+  range: { startIndex: number; endIndex: number } | null,
+  rowCount: number,
+  virtualScrollMode: VirtualScrollMode,
+): { start: number; end: number } | null {
+  if (virtualScrollMode !== 'tanstack' || rowCount === 0 || range === null) {
+    return null
+  }
+
+  const lastRowIndex = rowCount - 1
+  const start = Math.min(range.startIndex, lastRowIndex)
+  return {
+    start,
+    end: Math.min(Math.max(start, range.endIndex), lastRowIndex),
+  }
+}
+
+function readRows(
+  table: ReturnType<typeof useTradingTable>,
+  quoteSnapshot: Array<MarketQuote>,
+  coreState: CoreTableState,
+) {
+  void quoteSnapshot
+  void coreState
+  return readMeasuredRows(() => table.getRowModel().rows)
+}
+
+function cellSelectionRowKey(
+  ranges: CellSelectionState,
+  bounds: Array<CellSelectionBounds>,
+  rowIndex: number,
+  rowId: string,
+): string {
+  const active = ranges.at(-1)
+  const initial =
+    active?.anchorRowId === rowId ? `f${active.anchorColumnId}` : ''
+
+  return bounds.reduce((key, bound) => {
+    const self = rowIndex >= bound.minRowIndex && rowIndex <= bound.maxRowIndex
+    const above =
+      rowIndex - 1 >= bound.minRowIndex && rowIndex - 1 <= bound.maxRowIndex
+    const below =
+      rowIndex + 1 >= bound.minRowIndex && rowIndex + 1 <= bound.maxRowIndex
+    if (!self && !above && !below) return key
+    return `${key}|${self ? 1 : 0}${above ? 1 : 0}${below ? 1 : 0}:${bound.minColumnIndex}-${bound.maxColumnIndex}`
+  }, initial)
+}
diff --git a/examples/preact/realtime-trading/src/vite-env.d.ts b/examples/preact/realtime-trading/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/preact/realtime-trading/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts b/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..ccc66066cb
--- /dev/null
+++ b/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,170 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the Preact realtime trading workload', async ({ page }) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
+    await expect(table).toBeVisible()
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
+
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('row-update-rate').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('message-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    await instrumentCount.selectOption('750')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(750)
+    expect(
+      await page.evaluate(
+        () => performance.getEntriesByName('tanstack-row-model').length > 0,
+      ),
+    ).toBe(true)
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/preact/realtime-trading/tsconfig.json b/examples/preact/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..2172bff227
--- /dev/null
+++ b/examples/preact/realtime-trading/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "tests/e2e", "vite.config.ts"]
+}
diff --git a/examples/preact/realtime-trading/vite.config.ts b/examples/preact/realtime-trading/vite.config.ts
new file mode 100644
index 0000000000..d6fc34647f
--- /dev/null
+++ b/examples/preact/realtime-trading/vite.config.ts
@@ -0,0 +1,10 @@
+import preact from '@preact/preset-vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {
+    port: 7780,
+    allowedHosts: true,
+  },
+  plugins: [preact()],
+})
diff --git a/examples/react/realtime-trading/README.md b/examples/react/realtime-trading/README.md
index ad69a57e01..ac14ed687b 100644
--- a/examples/react/realtime-trading/README.md
+++ b/examples/react/realtime-trading/README.md
@@ -1,8 +1,8 @@
 # React realtime trading benchmark
 
 This example stresses the current React Table adapter with a synthetic market
-feed, immutable quote snapshots, core sorting/filtering, dynamic cells, React
-Profiler measurements, and automated scroll pressure.
+feed, immutable quote snapshots, core sorting/filtering, dynamic cells, and
+React Profiler measurements.
 
 ## Run
 
@@ -27,13 +27,20 @@ pnpm --dir examples/react/realtime-trading build:profile
 - `trading-table.tsx` owns the current React Table instance and its subscription
   boundaries.
 - `trading-table-shared.tsx` owns columns, row rendering, and row-model timing.
-- `benchmark/` owns React Profiler, User Timing, DOM mutation, long-frame, and
-  scroll-pressure diagnostics.
+- `benchmark/` owns React Profiler, User Timing, DOM mutation, and long-frame
+  diagnostics.
 - `shell/` owns the trading-terminal layout and benchmark controls.
 
 There is one table implementation. The shell and application root do not
 subscribe to or switch between historical adapters.
 
+## Row rendering
+
+The example starts with 100 instruments. Below 250 instruments, the row-rendering
+select can compare **Full DOM** with **TanStack Virtual**. At 250 instruments or
+more, virtualization is enabled and locked so large row counts cannot
+accidentally mount the complete table.
+
 ## React Compiler
 
 The Vite build enables React Compiler. The current adapter is compiled normally;
@@ -45,10 +52,9 @@ removed.
 - Stable market snapshots with sorting and filtering handled by the table.
 - Core Table sorting and filtering controlled through table atoms.
 - Stable or alternating cell component types.
-- Vertical, horizontal, or combined automated scrolling.
 - Per-column renderer and per-component render invocation rates.
-- Per-instrument Intraday history sampling with a configurable 100–2,000 ms
-  worker interval.
+- Per-instrument Intraday history sampling with a configurable 16–2,000 ms
+  worker interval, defaulting to 16 ms for the initial 100-row workload.
 
 The sample rate controls synthetic quote generation inside the worker; it is not
 a browser event or `postMessage` rate. The publish interval separately controls
diff --git a/examples/react/realtime-trading/index.html b/examples/react/realtime-trading/index.html
index ee58bbd285..c3dac68d53 100644
--- a/examples/react/realtime-trading/index.html
+++ b/examples/react/realtime-trading/index.html
@@ -9,7 +9,6 @@
     />
     <link rel="icon" href="data:," />
     <title>React Real-time Trading flexRender Lab</title>
-    <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/examples/react/realtime-trading/package.json b/examples/react/realtime-trading/package.json
index f91cafb828..b6e9231ab3 100644
--- a/examples/react/realtime-trading/package.json
+++ b/examples/react/realtime-trading/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@tanstack/react-store": "^0.11.0",
     "@tanstack/react-table": "9.1.2",
+    "@tanstack/react-virtual": "^3.14.9",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },
diff --git a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
index 225c946444..c60eac85bd 100644
--- a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -44,13 +44,8 @@ export interface FeedMetrics {
   rowModelAverageMs: number
   rowModelMaxMs: number
   visibleRows: number
-  scrollCallbacksPerSecond: number
-  scrollDistancePerSecond: number
-  scrollJankFrames: number
 }
 
-export type ScrollStressMode = 'off' | 'vertical' | 'horizontal' | 'both'
-
 export const initialMetrics: FeedMetrics = {
   actualTicksPerSecond: 0,
   rowUpdatesPerSecond: 0,
@@ -85,9 +80,6 @@ export const initialMetrics: FeedMetrics = {
   rowModelAverageMs: 0,
   rowModelMaxMs: 0,
   visibleRows: 0,
-  scrollCallbacksPerSecond: 0,
-  scrollDistancePerSecond: 0,
-  scrollJankFrames: 0,
 }
 
 const userTiming = { entryCount: 0 }
@@ -160,9 +152,6 @@ export class BenchmarkMonitor {
     domMutationsInSample: 0,
     previousRowModelCalls: 0,
     previousRowModelDuration: 0,
-    scrollCallbacksInSample: 0,
-    scrollDistanceInSample: 0,
-    scrollJankFramesInSample: 0,
   }
 
   readonly recordProfilerRender: ProfilerOnRenderCallback = (
@@ -243,15 +232,6 @@ export class BenchmarkMonitor {
     this.#runtime.domMutationsInSample = 0
   }
 
-  recordScrollFrame(distance: number, delayed: boolean): void {
-    const runtime = this.#runtime
-    runtime.scrollCallbacksInSample++
-    runtime.scrollDistanceInSample += distance
-    if (delayed) {
-      runtime.scrollJankFramesInSample++
-    }
-  }
-
   shouldPublish(now: number): boolean {
     return now - this.#runtime.sampleStartedAt >= 500
   }
@@ -359,11 +339,6 @@ export class BenchmarkMonitor {
         rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
       rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
       visibleRows: rowModelDiagnostics.lastRowCount,
-      scrollCallbacksPerSecond:
-        (runtime.scrollCallbacksInSample / sampleDuration) * 1_000,
-      scrollDistancePerSecond:
-        (runtime.scrollDistanceInSample / sampleDuration) * 1_000,
-      scrollJankFrames: runtime.scrollJankFramesInSample,
     }
 
     runtime.sampleStartedAt = now
@@ -380,9 +355,6 @@ export class BenchmarkMonitor {
     runtime.profilerSamples = []
     runtime.previousRowModelCalls = rowModelDiagnostics.calls
     runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
-    runtime.scrollCallbacksInSample = 0
-    runtime.scrollDistanceInSample = 0
-    runtime.scrollJankFramesInSample = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
     runtime.workerMessagesInSample = 0
@@ -425,9 +397,6 @@ export class BenchmarkMonitor {
     runtime.domMutationsInSample = 0
     runtime.previousRowModelCalls = rowModelDiagnostics.calls
     runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
-    runtime.scrollCallbacksInSample = 0
-    runtime.scrollDistanceInSample = 0
-    runtime.scrollJankFramesInSample = 0
     rowModelDiagnostics.maxDurationMs = 0
   }
 }
diff --git a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index bb74b113e2..34b1e422fe 100644
--- a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -1,32 +1,19 @@
 import { batch, createAtom, createStore } from '@tanstack/react-store'
-import {
-  TRADING_COLUMN_COUNT,
-  rowModelDiagnostics,
-} from '../table/trading-table'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
 import {
   BenchmarkMonitor,
   initialMetrics,
   longAnimationFramesSupported,
-  markBenchmarkAction,
 } from './benchmark-monitor'
-import type { FeedMetrics, ScrollStressMode } from './benchmark-monitor'
+import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
-import type { MarketQuote } from '../feed/market-data'
-import type {
-  CoreRowModelMode,
-  CoreTableState,
-  RendererMode,
-} from '../table/trading-table'
+import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  coreRowModelMode: CoreRowModelMode
-  coreFilterValue: string
-  scrollStressMode: ScrollStressMode
-  rendererMode: RendererMode
-  selectedSymbol: string | null
+  requestedVirtualScrollMode: VirtualScrollMode
   metrics: FeedMetrics
-  displayQuotes: Array<MarketQuote>
-  selectedQuote: MarketQuote | null
   mountedCells: number
   liveComponents: number
   longAnimationFramesSupported: boolean
@@ -34,23 +21,16 @@ export interface TradingBenchmarkState {
 
 export interface TradingBenchmarkActions {
   resetViewState: () => void
-  setCoreRowModelMode: (mode: CoreRowModelMode) => void
-  setCoreFilterValue: (value: string) => void
-  setScrollStressMode: (mode: ScrollStressMode) => void
   setRendererMode: (mode: RendererMode) => void
+  setVirtualScrollEnabled: (enabled: boolean) => void
+  setRenderedRowCount: (count: number) => void
   selectSymbol: (symbol: string | null) => void
   resetMarket: () => void
 }
 
 const initialState: TradingBenchmarkState = {
-  coreRowModelMode: 'none',
-  coreFilterValue: 'ALP',
-  scrollStressMode: 'off',
-  rendererMode: 'stable',
-  selectedSymbol: null,
+  requestedVirtualScrollMode: 'none',
   metrics: initialMetrics,
-  displayQuotes: [],
-  selectedQuote: null,
   mountedCells: 0,
   liveComponents: 0,
   longAnimationFramesSupported,
@@ -58,10 +38,6 @@ const initialState: TradingBenchmarkState = {
 
 export class TradingBenchmarkController {
   readonly store = createStore<TradingBenchmarkState>(initialState)
-  readonly tableAtoms = {
-    sorting: createAtom<CoreTableState['sorting']>([]),
-    columnFilters: createAtom<CoreTableState['columnFilters']>([]),
-  }
   readonly renderAtoms = {
     selectedSymbol: createAtom<string | null>(null),
     rendererMode: createAtom<RendererMode>('stable'),
@@ -73,59 +49,43 @@ export class TradingBenchmarkController {
   readonly #runtime = {
     animationFrameId: 0,
     longAnimationFrameObserver: null as PerformanceObserver | null,
-    feedSubscription: null as { unsubscribe: () => void } | null,
     stopObservingFeed: null as (() => void) | null,
-    lastFeedQuotes: null as Array<MarketQuote> | null,
   }
 
   constructor(feed: MarketFeedController) {
     this.feed = feed
     this.actions = {
       resetViewState: () => {
-        batch(() => {
-          this.#setSelectionState({ selectedSymbol: null })
-          this.renderAtoms.selectedSymbol.set(null)
-        })
+        this.renderAtoms.selectedSymbol.set(null)
       },
-      setCoreRowModelMode: (mode) => {
-        markBenchmarkAction('core-row-model-change', { mode })
-        batch(() => {
-          this.#setSelectionState({
-            coreRowModelMode: mode,
-            selectedSymbol: null,
-          })
-          this.#syncCoreTableAtoms(mode, this.store.get().coreFilterValue)
-          this.renderAtoms.selectedSymbol.set(null)
-        })
+      setRendererMode: (mode) => {
+        this.renderAtoms.rendererMode.set(mode)
       },
-      setCoreFilterValue: (value) => {
-        batch(() => {
-          this.#patch({ coreFilterValue: value })
-          this.#syncCoreTableAtoms(this.store.get().coreRowModelMode, value)
+      setVirtualScrollEnabled: (enabled) => {
+        if (
+          this.feed.store.get().instrumentCount >=
+          FORCED_VIRTUALIZATION_ROW_COUNT
+        ) {
+          return
+        }
+        this.#patch({
+          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
         })
       },
-      setScrollStressMode: (mode) => {
-        this.#patch({ scrollStressMode: mode })
-      },
-      setRendererMode: (mode) => {
-        batch(() => {
-          this.#patch({ rendererMode: mode })
-          this.renderAtoms.rendererMode.set(mode)
-        })
+      setRenderedRowCount: (count) => {
+        const mountedCells = count * TRADING_COLUMN_COUNT
+        if (mountedCells !== this.store.get().mountedCells) {
+          this.#patch({ mountedCells })
+        }
       },
       selectSymbol: (symbol) => {
-        batch(() => {
-          this.#setSelectionState({ selectedSymbol: symbol })
-          this.renderAtoms.selectedSymbol.set(symbol)
-        })
+        this.renderAtoms.selectedSymbol.set(symbol)
       },
       resetMarket: () => {
         batch(() => {
           this.monitor.reset()
           this.store.setState((state) => ({
             ...state,
-            selectedSymbol: null,
-            selectedQuote: null,
             metrics: { ...initialMetrics },
             mountedCells: 0,
             liveComponents: 0,
@@ -154,15 +114,6 @@ export class TradingBenchmarkController {
         this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
       renderCommitted: () => this.monitor.recordCompletedRender(),
     })
-    this.#runtime.feedSubscription = this.feed.store.subscribe((state) => {
-      if (state.quotes === this.#runtime.lastFeedQuotes) return
-
-      this.#runtime.lastFeedQuotes = state.quotes
-      this.#setQuotes(state.quotes)
-    })
-    const initialQuotes = this.feed.store.get().quotes
-    this.#runtime.lastFeedQuotes = initialQuotes
-    this.#setQuotes(initialQuotes)
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
       buffered: true,
@@ -175,12 +126,9 @@ export class TradingBenchmarkController {
   stop(): void {
     cancelAnimationFrame(this.#runtime.animationFrameId)
     this.#runtime.longAnimationFrameObserver?.disconnect()
-    this.#runtime.feedSubscription?.unsubscribe()
     this.#runtime.stopObservingFeed?.()
     this.#runtime.longAnimationFrameObserver = null
-    this.#runtime.feedSubscription = null
     this.#runtime.stopObservingFeed = null
-    this.#runtime.lastFeedQuotes = null
   }
 
   readonly #benchmarkFrame = (now: number): void => {
@@ -195,61 +143,10 @@ export class TradingBenchmarkController {
     this.store.setState((state) => ({ ...state, ...patch }))
   }
 
-  #setQuotes(quotes: Array<MarketQuote>): void {
-    this.store.setState((state) => {
-      return {
-        ...state,
-        displayQuotes: quotes,
-        selectedQuote: findSelectedQuote(quotes, state.selectedSymbol),
-      }
-    })
-  }
-
-  #setSelectionState(
-    patch: Partial<
-      Pick<TradingBenchmarkState, 'coreRowModelMode' | 'selectedSymbol'>
-    >,
-  ): void {
-    this.store.setState((state) => {
-      const nextState = { ...state, ...patch }
-      return {
-        ...nextState,
-        selectedQuote: findSelectedQuote(
-          nextState.displayQuotes,
-          nextState.selectedSymbol,
-        ),
-      }
-    })
-  }
-
   #publishMetrics(metrics: FeedMetrics): void {
-    const visibleRows = rowModelDiagnostics.hasMeasurement
-      ? rowModelDiagnostics.lastRowCount
-      : this.store.get().displayQuotes.length
     this.#patch({
       metrics,
-      mountedCells: visibleRows * TRADING_COLUMN_COUNT,
       liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
     })
   }
-
-  #syncCoreTableAtoms(mode: CoreRowModelMode, filterValue: string): void {
-    const sorts = mode === 'sort' || mode === 'sort-filter'
-    const trimmedFilter = filterValue.trim()
-    const filters =
-      (mode === 'filter' || mode === 'sort-filter') && trimmedFilter.length > 0
-    this.tableAtoms.sorting.set(() =>
-      sorts ? [{ id: 'price', desc: true }] : [],
-    )
-    this.tableAtoms.columnFilters.set(() =>
-      filters ? [{ id: 'symbol', value: trimmedFilter }] : [],
-    )
-  }
-}
-
-function findSelectedQuote(
-  quotes: Array<MarketQuote>,
-  selectedSymbol: string | null,
-): MarketQuote | null {
-  return quotes.find((quote) => quote.symbol === selectedSymbol) ?? null
 }
diff --git a/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
index 7af1d368cf..6768999620 100644
--- a/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
+++ b/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -1,13 +1,9 @@
 import { useEffect } from 'react'
-import { markBenchmarkAction } from './benchmark-monitor'
-import type { ScrollStressMode } from './benchmark-monitor'
 import type { TradingBenchmarkController } from './trading-benchmark-controller'
 
 export function useTableBenchmark(
   controller: TradingBenchmarkController,
-  scrollStressMode: ScrollStressMode,
 ): void {
-  'use no memo'
   useEffect(() => {
     const tableBody = document.querySelector(
       '.market-panel [data-trading-table] tbody',
@@ -28,75 +24,4 @@ export function useTableBenchmark(
     })
     return () => observer.disconnect()
   }, [controller])
-
-  useEffect(() => {
-    const scrollContainer = document.querySelector<HTMLElement>(
-      '.market-panel [data-trading-table]',
-    )
-    if (!scrollContainer) {
-      return
-    }
-
-    if (scrollStressMode === 'off') {
-      scrollContainer.scrollTop = 0
-      scrollContainer.scrollLeft = 0
-      return
-    }
-
-    markBenchmarkAction('scroll-start', {
-      mode: scrollStressMode,
-    })
-    const runtime = {
-      animationFrameId: 0,
-      previousFrameAt: performance.now(),
-      verticalDirection: 1,
-      horizontalDirection: 1,
-    }
-    const scrollFrame = (now: number): void => {
-      const rawElapsed = now - runtime.previousFrameAt
-      const elapsed = Math.min(rawElapsed, 50)
-      runtime.previousFrameAt = now
-      const previousTop = scrollContainer.scrollTop
-      const previousLeft = scrollContainer.scrollLeft
-
-      if (scrollStressMode === 'vertical' || scrollStressMode === 'both') {
-        const maxTop =
-          scrollContainer.scrollHeight - scrollContainer.clientHeight
-        const candidateTop =
-          scrollContainer.scrollTop +
-          (runtime.verticalDirection * (700 * elapsed)) / 1_000
-        const nextTop = Math.max(0, Math.min(maxTop, candidateTop))
-        if (maxTop > 0) {
-          scrollContainer.scrollTop = nextTop
-          if (candidateTop >= maxTop || candidateTop <= 0) {
-            runtime.verticalDirection *= -1
-          }
-        }
-      }
-
-      if (scrollStressMode === 'horizontal' || scrollStressMode === 'both') {
-        const maxLeft =
-          scrollContainer.scrollWidth - scrollContainer.clientWidth
-        const candidateLeft =
-          scrollContainer.scrollLeft +
-          (runtime.horizontalDirection * (420 * elapsed)) / 1_000
-        const nextLeft = Math.max(0, Math.min(maxLeft, candidateLeft))
-        if (maxLeft > 0) {
-          scrollContainer.scrollLeft = nextLeft
-          if (candidateLeft >= maxLeft || candidateLeft <= 0) {
-            runtime.horizontalDirection *= -1
-          }
-        }
-      }
-
-      const distance =
-        Math.abs(scrollContainer.scrollTop - previousTop) +
-        Math.abs(scrollContainer.scrollLeft - previousLeft)
-      controller.monitor.recordScrollFrame(distance, rawElapsed > 34)
-      runtime.animationFrameId = requestAnimationFrame(scrollFrame)
-    }
-
-    runtime.animationFrameId = requestAnimationFrame(scrollFrame)
-    return () => cancelAnimationFrame(runtime.animationFrameId)
-  }, [controller, scrollStressMode])
 }
diff --git a/examples/react/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts b/examples/react/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
index a7ee92d79f..b163778419 100644
--- a/examples/react/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
+++ b/examples/react/realtime-trading/src/benchmark/use-trading-benchmark-controller.ts
@@ -1,12 +1,9 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useState } from 'react'
 import { TradingBenchmarkController } from './trading-benchmark-controller'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 
 export function useTradingBenchmarkController(feed: MarketFeedController) {
-  'use no memo'
-  const controllerRef = useRef<TradingBenchmarkController | null>(null)
-  controllerRef.current ??= new TradingBenchmarkController(feed)
-  const controller = controllerRef.current
+  const [controller] = useState(() => new TradingBenchmarkController(feed))
 
   useEffect(() => controller.start(), [controller])
 
diff --git a/examples/react/realtime-trading/src/feed/feed-load-profiles.ts b/examples/react/realtime-trading/src/feed/feed-load-profiles.ts
deleted file mode 100644
index 417177ff0f..0000000000
--- a/examples/react/realtime-trading/src/feed/feed-load-profiles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type FeedLoadProfile =
-  | 'low'
-  | 'medium'
-  | 'high'
-  | 'very-high'
-  | 'max'
-  | 'custom'
-
-export const feedLoadRates: Record<
-  Exclude<FeedLoadProfile, 'custom'>,
-  number
-> = {
-  low: 1_000,
-  medium: 5_000,
-  high: 10_000,
-  'very-high': 25_000,
-  max: 100_000,
-}
diff --git a/examples/react/realtime-trading/src/feed/feed-sample-rates.ts b/examples/react/realtime-trading/src/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/react/realtime-trading/src/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/react/realtime-trading/src/feed/market-feed-config.ts b/examples/react/realtime-trading/src/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/react/realtime-trading/src/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/react/realtime-trading/src/feed/market-feed-controller.ts b/examples/react/realtime-trading/src/feed/market-feed-controller.ts
index fdb8ea5923..939f6b5b97 100644
--- a/examples/react/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/react/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,7 +1,7 @@
 import { batch, createStore } from '@tanstack/react-store'
-import { feedLoadRates } from './feed-load-profiles'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
-import type { FeedLoadProfile } from './feed-load-profiles'
 import type {
   MarketFeedCommand,
   MarketFeedEvent,
@@ -12,7 +12,6 @@ export interface MarketFeedState {
   workerReady: boolean
   running: boolean
   instrumentCount: number
-  feedLoadProfile: FeedLoadProfile
   targetTicksPerSecond: number
   publishIntervalMs: number
   updateSparklines: boolean
@@ -36,7 +35,6 @@ export interface MarketFeedObserver {
 export interface MarketFeedActions {
   toggle: () => void
   setInstrumentCount: (count: number) => void
-  setLoadProfile: (profile: FeedLoadProfile) => void
   setTargetRate: (rate: number) => void
   setPublishInterval: (intervalMs: number) => void
   setSparklineUpdates: (enabled: boolean) => void
@@ -48,12 +46,11 @@ export interface MarketFeedActions {
 const initialState: MarketFeedState = {
   workerReady: false,
   running: true,
-  instrumentCount: 250,
-  feedLoadProfile: 'high',
-  targetTicksPerSecond: 10_000,
-  publishIntervalMs: 20,
-  updateSparklines: true,
-  sparklineSampleIntervalMs: 250,
+  instrumentCount: initialMarketFeedConfig.instrumentCount,
+  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
   quotes: [],
 }
 
@@ -67,6 +64,7 @@ export class MarketFeedController {
     renderPending: false,
     resetWaitingForCommit: false,
     resetSnapshotReady: false,
+    quoteIndexBySymbol: new Map<string, number>(),
   }
 
   constructor() {
@@ -80,24 +78,12 @@ export class MarketFeedController {
         this.#patch({ instrumentCount: count })
         this.#resetWorker(count)
       },
-      setLoadProfile: (profile) => {
-        if (profile === 'custom') {
-          this.#patch({ feedLoadProfile: profile })
-          return
-        }
-        const rate = feedLoadRates[profile]
-        this.#patch({
-          feedLoadProfile: profile,
-          targetTicksPerSecond: rate,
-        })
-        this.#post({ type: 'set-rate', ticksPerSecond: rate })
-      },
       setTargetRate: (rate) => {
+        const sampleRate = normalizeFeedSampleRate(rate)
         this.#patch({
-          feedLoadProfile: 'custom',
-          targetTicksPerSecond: rate,
+          targetTicksPerSecond: sampleRate,
         })
-        this.#post({ type: 'set-rate', ticksPerSecond: rate })
+        this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
         this.#patch({ publishIntervalMs })
@@ -156,6 +142,16 @@ export class MarketFeedController {
     return () => this.#observers.delete(observer)
   }
 
+  getQuoteBySymbol(
+    quotes: Array<MarketQuote>,
+    symbol: string | null,
+  ): MarketQuote | null {
+    if (symbol === null) return null
+
+    const index = this.#runtime.quoteIndexBySymbol.get(symbol)
+    return index === undefined ? null : (quotes[index] ?? null)
+  }
+
   completeRender(): void {
     if (!this.#runtime.renderPending) return
 
@@ -182,9 +178,13 @@ export class MarketFeedController {
         this.#runtime.resetSnapshotReady = true
       }
       this.#startMutation()
+      const quotes = hydrateMarketQuotes(data.quotes)
+      this.#runtime.quoteIndexBySymbol = new Map(
+        quotes.map((quote, index) => [quote.symbol, index]),
+      )
       batch(() => {
         this.#patch({
-          quotes: hydrateMarketQuotes(data.quotes),
+          quotes,
           workerReady: true,
         })
       })
diff --git a/examples/react/realtime-trading/src/feed/use-market-feed-controller.ts b/examples/react/realtime-trading/src/feed/use-market-feed-controller.ts
index 7f01777cc5..74c5208f38 100644
--- a/examples/react/realtime-trading/src/feed/use-market-feed-controller.ts
+++ b/examples/react/realtime-trading/src/feed/use-market-feed-controller.ts
@@ -1,14 +1,10 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useState } from 'react'
 import { MarketFeedController } from './market-feed-controller'
 
 export function useMarketFeedController(): MarketFeedController {
-  'use no memo'
-  const controllerRef = useRef<MarketFeedController | null>(null)
-  controllerRef.current ??= new MarketFeedController()
-  const controller = controllerRef.current
+  const [controller] = useState(() => new MarketFeedController())
 
   useEffect(() => controller.start(), [controller])
 
   return controller
 }
-
diff --git a/examples/react/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/react/realtime-trading/src/feed/worker/market-feed.worker.ts
index 7b22656f2e..2b7a642fd9 100644
--- a/examples/react/realtime-trading/src/feed/worker/market-feed.worker.ts
+++ b/examples/react/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -1,3 +1,4 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
 import { MarketFeedEngine } from './market-feed-engine'
 import type {
   MarketFeedCommand,
@@ -13,11 +14,11 @@ const runtime = {
   pendingCoalescedUpdateCount: 0,
   initialized: false,
   running: true,
-  ticksPerSecond: 10_000,
-  publishIntervalMs: 20,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
   publishTimerId: null as ReturnType<typeof setInterval> | null,
-  updateSparklines: true,
-  sparklineSampleIntervalMs: 250,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
   tickBudget: 0,
   lastTickAt: performance.now(),
 }
diff --git a/examples/react/realtime-trading/src/index.css b/examples/react/realtime-trading/src/index.css
index d92540e03c..20264402de 100644
--- a/examples/react/realtime-trading/src/index.css
+++ b/examples/react/realtime-trading/src/index.css
@@ -101,16 +101,6 @@ select {
   font-size: 0.75rem;
 }
 
-input[type='text'] {
-  width: 100%;
-  padding: 0.45rem 0.55rem;
-  color: var(--text);
-  background: var(--panel-raised);
-  border: 1px solid var(--control-border);
-  border-radius: var(--control-radius);
-  font-size: 0.75rem;
-}
-
 .trading-terminal {
   --active-sidebar-width: var(--sidebar-width);
   display: grid;
@@ -154,7 +144,6 @@ input[type='text'] {
 
 .brand,
 .header-actions,
-.session-info,
 .feed-status {
   display: flex;
   align-items: center;
@@ -165,31 +154,6 @@ input[type='text'] {
   color: var(--text-strong);
 }
 
-.brand-mark {
-  display: grid;
-  width: 24px;
-  height: 24px;
-  place-items: center;
-  color: var(--text-inverse);
-  background: var(--surface-control);
-  border: 1px solid var(--border-strong);
-  font-size: 0.62rem;
-  font-weight: 800;
-}
-
-.environment {
-  padding: 0.16rem 0.3rem;
-  color: var(--amber);
-  background: color-mix(in srgb, var(--amber) 8%, transparent);
-  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
-  font-size: 0.58rem;
-}
-
-.session-info {
-  gap: 1rem;
-  color: var(--muted);
-}
-
 .header-actions {
   gap: 0.75rem;
 }
@@ -310,6 +274,22 @@ input[type='text'] {
   background: var(--surface-table);
 }
 
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
 table {
   min-width: 100%;
   border-spacing: 0;
@@ -319,6 +299,40 @@ table {
   font-variant-numeric: tabular-nums;
 }
 
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
 .trading-data-grid {
   display: grid;
 }
@@ -787,10 +801,6 @@ td[data-selection-left='true']::after {
   font-weight: 500;
 }
 
-.statusbar-spacer {
-  flex: 1;
-}
-
 .sidebar-slot {
   width: var(--sidebar-width);
   min-width: 0;
@@ -944,6 +954,21 @@ input[type='range'] {
   border-bottom: 0;
 }
 
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
 dt {
   color: var(--muted);
   font-size: 0.61rem;
@@ -999,10 +1024,6 @@ dd {
     overflow: hidden;
   }
 
-  .session-info > span:first-child {
-    display: none;
-  }
-
   .market-panel {
     min-height: 0;
   }
diff --git a/examples/react/realtime-trading/src/main.tsx b/examples/react/realtime-trading/src/main.tsx
index f3a5967836..cd7ad7fb78 100644
--- a/examples/react/realtime-trading/src/main.tsx
+++ b/examples/react/realtime-trading/src/main.tsx
@@ -2,6 +2,13 @@ import { createRoot } from 'react-dom/client'
 import { App } from './App'
 import './index.css'
 
+if (import.meta.env.DEV) {
+  const reactScan = document.createElement('script')
+  reactScan.src = 'https://unpkg.com/react-scan/dist/auto.global.js'
+  reactScan.async = true
+  document.head.append(reactScan)
+}
+
 const rootElement = document.getElementById('root')
 if (!rootElement) throw new Error('Failed to find the root element')
 
diff --git a/examples/react/realtime-trading/src/shell/TradingShell.tsx b/examples/react/realtime-trading/src/shell/TradingShell.tsx
index a11d72b14b..ec0421ce89 100644
--- a/examples/react/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/react/realtime-trading/src/shell/TradingShell.tsx
@@ -1,18 +1,23 @@
-import { shallow } from '@tanstack/react-store'
+import { shallow, useSelector } from '@tanstack/react-store'
 import { useState } from 'react'
+import {
+  feedSampleRateAt,
+  feedSampleRateIndex,
+  feedSampleRateOptions,
+} from '../feed/feed-sample-rates'
+import {
+  FORCED_VIRTUALIZATION_ROW_COUNT,
+  resolveVirtualScrollMode,
+} from '../table/trading-row-virtualizer'
 import {
   useMarketFeedController,
   useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from './trading-shell-context'
+import { configuratorOptions } from './configurator-options'
 import type { ReactNode } from 'react'
-import type {
-  FeedMetrics,
-  ScrollStressMode,
-} from '../benchmark/benchmark-monitor'
-import type { FeedLoadProfile } from '../feed/feed-load-profiles'
-import type { CoreRowModelMode } from '../table/trading-table'
+import type { FeedMetrics } from '../benchmark/benchmark-monitor'
 
 const integerFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 0,
@@ -53,7 +58,7 @@ export function TradingShell(props: { children: ReactNode }) {
       </section>
       <MarketStatusbar />
       <div className="sidebar-slot">
-        <Configurator />
+        {sidebarOpen && <Configurator />}
       </div>
     </main>
   )
@@ -73,25 +78,20 @@ function AppHeader(props: {
   return (
     <header className="app-bar">
       <div className="brand">
-        <span className="brand-mark">TT</span>
         <strong>MARKET MONITOR</strong>
-        <span className="environment">SIMULATED</span>
       </div>
       <div className="header-actions">
-        <div className="session-info">
-          <span>REACT / FLEX RENDER</span>
-          <span
-            className={`feed-status ${workerReady && running ? 'is-running' : ''}`}
-            data-testid="feed-status"
-          >
-            <span className="status-dot" aria-hidden="true" />
-            {!workerReady
-              ? 'FEED CONNECTING'
-              : running
-                ? 'FEED LIVE'
-                : 'FEED PAUSED'}
-          </span>
-        </div>
+        <span
+          className={`feed-status ${workerReady && running ? 'is-running' : ''}`}
+          data-testid="feed-status"
+        >
+          <span className="status-dot" aria-hidden="true" />
+          {!workerReady
+            ? 'FEED CONNECTING'
+            : running
+              ? 'FEED LIVE'
+              : 'FEED PAUSED'}
+        </span>
         <button
           className="sidebar-toggle"
           type="button"
@@ -127,7 +127,7 @@ function MarketStatusbar() {
   return (
     <footer className="market-statusbar">
       <span>
-        BATCH TICKS <strong>{formatInteger(lastBatchSize)}</strong>
+        MESSAGE SAMPLES <strong>{formatInteger(lastBatchSize)}</strong>
       </span>
       <span>
         ROW UPDATES <strong>{formatInteger(lastUpdateCount)}</strong>
@@ -138,8 +138,6 @@ function MarketStatusbar() {
       <span>
         COMPONENTS <strong>{formatInteger(liveComponents)}</strong>
       </span>
-      <span className="statusbar-spacer" />
-      <span>WORKER / FIXED CADENCE / IMMUTABLE</span>
     </footer>
   )
 }
@@ -149,7 +147,6 @@ function Configurator() {
     (storeState) => ({
       running: storeState.running,
       instrumentCount: storeState.instrumentCount,
-      feedLoadProfile: storeState.feedLoadProfile,
       targetTicksPerSecond: storeState.targetTicksPerSecond,
       publishIntervalMs: storeState.publishIntervalMs,
       updateSparklines: storeState.updateSparklines,
@@ -159,45 +156,43 @@ function Configurator() {
   )
   const benchmarkState = useTradingShellState(
     (storeState) => ({
-      coreRowModelMode: storeState.coreRowModelMode,
-      coreFilterValue: storeState.coreFilterValue,
-      scrollStressMode: storeState.scrollStressMode,
-      rendererMode: storeState.rendererMode,
+      requestedVirtualScrollMode: storeState.requestedVirtualScrollMode,
     }),
     { compare: shallow },
   )
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
+  const rendererMode = useSelector(controller.renderAtoms.rendererMode)
   const { actions } = controller
   const feedActions = feed.actions
   const {
     running,
     instrumentCount,
-    feedLoadProfile,
     targetTicksPerSecond,
     publishIntervalMs,
     updateSparklines,
     sparklineSampleIntervalMs,
   } = feedState
-  const { coreRowModelMode, coreFilterValue, scrollStressMode, rendererMode } =
-    benchmarkState
+  const { requestedVirtualScrollMode } = benchmarkState
   const {
-    setCoreRowModelMode,
-    setCoreFilterValue,
-    setScrollStressMode,
     setRendererMode,
+    setVirtualScrollEnabled,
     resetMarket,
   } = actions
   const {
     toggle,
     setInstrumentCount,
-    setLoadProfile,
     setTargetRate,
     setPublishInterval,
     setSparklineUpdates,
     setSparklineSampleInterval,
     runBurst,
   } = feedActions
+  const virtualScrollForced = instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  const virtualScrollMode = resolveVirtualScrollMode(
+    requestedVirtualScrollMode,
+    instrumentCount,
+  )
 
   return (
     <aside
@@ -222,7 +217,7 @@ function Configurator() {
         </button>
 
         <label className="field">
-          <span>Instruments</span>
+          <span>Instruments (rows)</span>
           <select
             data-testid="instrument-count-select"
             value={instrumentCount}
@@ -231,65 +226,49 @@ function Configurator() {
               setInstrumentCount(Number(event.currentTarget.value))
             }}
           >
-            <option value="50">50</option>
-            <option value="100">100</option>
-            <option value="150">150</option>
-            <option value="250">250</option>
-            <option value="350">350</option>
-            <option value="500">500</option>
-            <option value="750">750</option>
-            <option value="1000">1,000</option>
-            <option value="1500">1,500</option>
-            <option value="2500">2,500</option>
-            <option value="5000">5,000</option>
-          </select>
-        </label>
-
-        <label className="field">
-          <span>Load profile</span>
-          <select
-            data-testid="load-profile-select"
-            value={feedLoadProfile}
-            onChange={(event) =>
-              setLoadProfile(event.currentTarget.value as FeedLoadProfile)
-            }
-          >
-            <option value="low">Low · 1K/s</option>
-            <option value="medium">Medium · 5K/s</option>
-            <option value="high">High · 10K/s</option>
-            <option value="very-high">Very high · 25K/s</option>
-            <option value="max">Max · 100K/s</option>
-            <option value="custom">Custom</option>
+            {configuratorOptions.instrumentCounts.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
           </select>
-          <small>
-            High is the repeatable default; Max is intentionally saturating.
-          </small>
         </label>
 
         <label className="field rate-field">
           <span>
-            Worker sample generation
-            <strong>{formatRate(targetTicksPerSecond)}/s</strong>
+            Synthetic quote workload
+            <strong data-testid="target-sample-rate">
+              {formatRate(targetTicksPerSecond)} samples/s
+            </strong>
           </span>
           <input
             data-testid="target-rate-slider"
             type="range"
-            min="100"
-            max="100000"
-            step="100"
-            value={targetTicksPerSecond}
+            min={0}
+            max={feedSampleRateOptions.length - 1}
+            step={1}
+            list="worker-sample-rate-steps"
+            value={feedSampleRateIndex(targetTicksPerSecond)}
+            aria-valuetext={`${formatRate(
+              targetTicksPerSecond,
+            )} synthetic quote samples per second`}
             onChange={(event) =>
-              setTargetRate(Number(event.currentTarget.value))
+              setTargetRate(feedSampleRateAt(Number(event.currentTarget.value)))
             }
           />
+          <datalist id="worker-sample-rate-steps">
+            {feedSampleRateOptions.map((option, index) => (
+              <option key={option.value} value={index} label={option.label} />
+            ))}
+          </datalist>
           <small>
-            Synthetic quote samples generated inside the worker, not browser
-            events. Repeated instruments are coalesced before each message.
+            Fixed worker-side workload levels, from 100 to 100K samples/s.
+            Samples are coalesced; this is not the message delivery rate.
           </small>
         </label>
 
         <label className="field">
-          <span>Publish interval</span>
+          <span>Worker delivery interval</span>
           <select
             data-testid="publish-interval-select"
             value={publishIntervalMs}
@@ -297,15 +276,11 @@ function Configurator() {
               setPublishInterval(Number(event.currentTarget.value))
             }
           >
-            <option value="8">8 ms · 125 msg/s</option>
-            <option value="16">16 ms · 62.5 msg/s</option>
-            <option value="20">20 ms · 50 msg/s</option>
-            <option value="33">33 ms · 30 msg/s</option>
-            <option value="50">50 ms · 20 msg/s</option>
-            <option value="100">100 ms · 10 msg/s</option>
-            <option value="250">250 ms · 4 msg/s</option>
-            <option value="500">500 ms · 2 msg/s</option>
-            <option value="1000">1000 ms · 1 msg/s</option>
+            {configuratorOptions.workerDeliveryIntervals.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
           </select>
           <small>
             The worker posts one coalesced update message at this target
@@ -316,42 +291,29 @@ function Configurator() {
 
       <section className="config-section" aria-labelledby="render-settings">
         <h2 id="render-settings">RENDER PATH</h2>
-        <label className="field">
-          <span>TanStack core row model</span>
+        <label className="field" data-testid="virtual-scroll-mode">
+          <span>Row rendering</span>
           <select
-            data-testid="core-row-model-select"
-            value={coreRowModelMode}
+            data-testid="virtual-scroll-select"
+            value={virtualScrollMode}
+            disabled={virtualScrollForced}
             onChange={(event) =>
-              setCoreRowModelMode(event.currentTarget.value as CoreRowModelMode)
+              setVirtualScrollEnabled(event.currentTarget.value === 'tanstack')
             }
           >
-            <option value="none">Off · source order</option>
-            <option value="sort">Sort Last descending</option>
-            <option value="filter">Filter Symbol</option>
-            <option value="sort-filter">Filter + sort Last</option>
+            {configuratorOptions.rowRenderingModes.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
           </select>
           <small>
-            Runs inside the selected adapter against the stable market-data
-            array.
+            {virtualScrollForced
+              ? 'TanStack Virtual is required and locked at 250 or more rows.'
+              : 'Full DOM mounts every row; TanStack Virtual mounts only the visible window.'}
           </small>
         </label>
 
-        {(coreRowModelMode === 'filter' ||
-          coreRowModelMode === 'sort-filter') && (
-          <label className="field">
-            <span>Symbol contains</span>
-            <input
-              data-testid="core-filter-input"
-              type="text"
-              value={coreFilterValue}
-              onChange={(event) =>
-                setCoreFilterValue(event.currentTarget.value)
-              }
-            />
-            <small>Case-insensitive column filter; try ALP, 1, or R.</small>
-          </label>
-        )}
-
         <label className="toggle-field">
           <input
             type="checkbox"
@@ -383,7 +345,7 @@ function Configurator() {
         </label>
 
         <label className="field">
-          <span>Intraday sample interval</span>
+          <span>Intraday chart sampling</span>
           <select
             data-testid="sparkline-sample-interval-select"
             value={sparklineSampleIntervalMs}
@@ -391,39 +353,21 @@ function Configurator() {
               setSparklineSampleInterval(Number(event.currentTarget.value))
             }
           >
-            <option value="100">100 ms</option>
-            <option value="250">250 ms</option>
-            <option value="500">500 ms</option>
-            <option value="1000">1,000 ms</option>
-            <option value="2000">2,000 ms</option>
+            {configuratorOptions.intradaySamplingIntervals.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
           </select>
           <small>
-            Minimum time between rolling samples for the same instrument.
+            How often each row adds a point to its sparkline. Quote generation
+            and worker delivery are unaffected.
           </small>
         </label>
       </section>
 
       <section className="config-section" aria-labelledby="stress-actions">
         <h2 id="stress-actions">STRESS ACTIONS</h2>
-        <label className="field">
-          <span>Automated scroll pressure</span>
-          <select
-            data-testid="scroll-stress-select"
-            value={scrollStressMode}
-            onChange={(event) =>
-              setScrollStressMode(event.currentTarget.value as ScrollStressMode)
-            }
-          >
-            <option value="off">Off</option>
-            <option value="vertical">Vertical · 700 px/s</option>
-            <option value="horizontal">Horizontal · 420 px/s</option>
-            <option value="both">Vertical + horizontal</option>
-          </select>
-          <small>
-            Bounces the real table viewport and records callback rate, distance,
-            and delayed scroll frames.
-          </small>
-        </label>
         <div className="action-grid">
           <button type="button" onClick={runBurst}>
             RUN 25K BURST
@@ -558,25 +502,25 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>Cell renderer calls / s</dt>
+          <dt>Renderer callbacks / s</dt>
           <dd data-testid="cell-render-rate">
             {formatRate(metrics.cellRendererCallsPerSecond)}
           </dd>
         </div>
         <div>
-          <dt>Component function calls / s</dt>
+          <dt>Component executions / s</dt>
           <dd data-testid="component-render-rate">
             {formatRate(metrics.componentRenderCallsPerSecond)}
           </dd>
         </div>
         <div>
-          <dt>Component function calls by type / s</dt>
+          <dt>Executions by component / s</dt>
           <dd data-testid="component-render-breakdown">
             {formatInvocationRates(metrics.componentRenderRates)}
           </dd>
         </div>
         <div>
-          <dt>Cell callbacks by column / s</dt>
+          <dt>Callbacks by column / s</dt>
           <dd data-testid="cell-render-breakdown">
             {formatInvocationRates(metrics.cellRendererRates)}
           </dd>
@@ -630,19 +574,6 @@ function Diagnostics() {
             {formatInteger(metrics.visibleRows)}
           </dd>
         </div>
-        <div>
-          <dt>Scroll callbacks / distance</dt>
-          <dd data-testid="scroll-pressure-rate">
-            {metrics.scrollCallbacksPerSecond.toFixed(1)} /{' '}
-            {formatRate(metrics.scrollDistancePerSecond)} px/s
-          </dd>
-        </div>
-        <div>
-          <dt>Delayed scroll frames (&gt;34 ms)</dt>
-          <dd data-testid="scroll-jank-frames">
-            {formatInteger(metrics.scrollJankFrames)}
-          </dd>
-        </div>
         <div>
           <dt>Worker messages</dt>
           <dd data-testid="worker-messages">
@@ -656,7 +587,7 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>Last batch ticks / rows</dt>
+          <dt>Last message samples / updated rows</dt>
           <dd>
             {formatInteger(metrics.lastBatchSize)} /{' '}
             {formatInteger(metrics.lastUpdateCount)}
@@ -688,7 +619,12 @@ function Diagnostics() {
 }
 
 function SelectedInstrument() {
-  const selectedQuote = useTradingShellState((state) => state.selectedQuote)
+  const controller = useTradingShellController()
+  const feed = useMarketFeedController()
+  const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
+  const selectedQuote = useMarketFeedState((state) =>
+    feed.getQuoteBySymbol(state.quotes, selectedSymbol),
+  )
   return (
     <section
       className="config-section selected-instrument"
diff --git a/examples/react/realtime-trading/src/shell/configurator-options.ts b/examples/react/realtime-trading/src/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/react/realtime-trading/src/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/react/realtime-trading/src/shell/trading-shell-context.tsx b/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
index 7e287fbfde..8b86801f38 100644
--- a/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
+++ b/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
@@ -5,9 +5,7 @@ import type {
   MarketFeedState,
 } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../benchmark/use-trading-benchmark-controller'
-import type {
-  TradingBenchmarkState,
-} from '../benchmark/trading-benchmark-controller'
+import type { TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
 import type { UseSelectorOptions } from '@tanstack/react-store'
 
 const {
diff --git a/examples/react/realtime-trading/src/table/table-config/quote-cells.tsx b/examples/react/realtime-trading/src/table/table-config/quote-cells.tsx
index 9401da9cc8..1c5ff4523d 100644
--- a/examples/react/realtime-trading/src/table/table-config/quote-cells.tsx
+++ b/examples/react/realtime-trading/src/table/table-config/quote-cells.tsx
@@ -177,8 +177,7 @@ export function QuoteAgeCell({ ageMs }: { ageMs: number }) {
 export function SparklineCell({ values }: { values: ReadonlyArray<number> }) {
   useLifecycleCounter('SparklineCell')
   const rising = (values.at(-1) ?? 0) >= (values[0] ?? 0)
-  const min = Math.min(...values)
-  const max = Math.max(...values)
+  const { min, max } = findRange(values)
   const range = max - min || 1
   const denominator = Math.max(1, values.length - 1)
   const points = values
@@ -203,3 +202,18 @@ export function SparklineCell({ values }: { values: ReadonlyArray<number> }) {
 function formatSigned(value: number): string {
   return `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
 }
+
+function findRange(values: ReadonlyArray<number>): {
+  min: number
+  max: number
+} {
+  const first = values[0] ?? 0
+  return values.reduce(
+    (range, value) => {
+      range.min = Math.min(range.min, value)
+      range.max = Math.max(range.max, value)
+      return range
+    },
+    { min: first, max: first },
+  )
+}
diff --git a/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx b/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
index 05b0273bcc..c82558d6ef 100644
--- a/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
+++ b/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from 'react'
 import { useSelector } from '@tanstack/react-store'
 import { useTradingShellController } from '../../shell/trading-shell-context'
 import {
@@ -10,18 +9,10 @@ import {
   UpMoveCell,
   recordCellRender,
 } from './quote-cells'
-import type { MouseEventHandler, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import type { MarketQuote } from '../../feed/market-data'
 
 export type RendererMode = 'stable' | 'swap'
-export type CoreRowModelMode = 'none' | 'sort' | 'filter' | 'sort-filter'
-
-export interface TradingTableProps {
-  quotes: Array<MarketQuote>
-  coreRowModelMode: CoreRowModelMode
-  coreFilterValue: string
-}
-
 export interface CoreTableState {
   sorting: Array<{ id: string; desc: boolean }>
   columnFilters: Array<{ id: string; value: unknown }>
@@ -53,166 +44,148 @@ export const tradingColumns: Array<TradingColumnDefinition> = [
     header: 'Instrument',
     columns: [
       {
-        id: 'identity',
-        header: 'Identity',
-        columns: [
-          {
-            id: 'market',
-            header: 'Market',
-            size: 72,
-            accessorFn: (row) => row.venue,
-            cell: ({ row }) => recordCellRender('Market', row.original.venue),
-          },
-          {
-            id: 'name',
-            header: 'Name',
-            size: 180,
-            accessorFn: (row) => row.company,
-            cell: ({ row }) => recordCellRender('Name', row.original.company),
-          },
-          {
-            id: 'symbol',
-            header: 'Symbol',
-            size: 92,
-            accessorFn: (row) => row.symbol,
-            filterFn: 'includesString',
-            cell: ({ row }) => recordCellRender('Symbol', row.original.symbol),
-          },
-        ],
+        id: 'market',
+        header: 'Market',
+        size: 72,
+        accessorFn: (row) => row.venue,
+        cell: ({ row }) => recordCellRender('Market', row.original.venue),
+      },
+      {
+        id: 'name',
+        header: 'Name',
+        size: 180,
+        accessorFn: (row) => row.company,
+        cell: ({ row }) => recordCellRender('Name', row.original.company),
+      },
+      {
+        id: 'symbol',
+        header: 'Symbol',
+        size: 92,
+        accessorFn: (row) => row.symbol,
+        filterFn: 'includesString',
+        cell: ({ row }) => recordCellRender('Symbol', row.original.symbol),
+      },
+    ],
+  },
+  {
+    id: 'priceAndChange',
+    header: 'Price & Change',
+    columns: [
+      {
+        id: 'price',
+        header: 'Price',
+        size: 96,
+        accessorFn: (row) => row.price,
+        sortFn: 'basic',
+        cell: ({ row }) =>
+          recordCellRender('Last', <LastPriceCell quote={row.original} />),
+      },
+      {
+        id: 'change',
+        header: 'Chg',
+        size: 94,
+        accessorFn: (row) => getDayChange(row),
+        cell: ({ row }) =>
+          recordCellRender('Change', <DayChangeCell quote={row.original} />),
+      },
+      {
+        id: 'changePercent',
+        header: 'Chg%',
+        size: 90,
+        accessorFn: (row) => getDayChangePercent(row),
+        cell: ({ row }) =>
+          recordCellRender(
+            'ChangePercent',
+            <PercentChangeCell value={getDayChangePercent(row.original)} />,
+          ),
       },
     ],
   },
   {
-    id: 'marketData',
-    header: 'Market Data',
+    id: 'orderBook',
+    header: 'Order Book',
     columns: [
       {
-        id: 'priceAndChange',
-        header: 'Price & Change',
-        columns: [
-          {
-            id: 'price',
-            header: 'Price',
-            size: 96,
-            accessorFn: (row) => row.price,
-            sortFn: 'basic',
-            cell: ({ row }) =>
-              recordCellRender('Last', <LastPriceCell quote={row.original} />),
-          },
-          {
-            id: 'change',
-            header: 'Chg',
-            size: 94,
-            accessorFn: (row) => getDayChange(row),
-            cell: ({ row }) =>
-              recordCellRender(
-                'Change',
-                <DayChangeCell quote={row.original} />,
-              ),
-          },
-          {
-            id: 'changePercent',
-            header: 'Chg%',
-            size: 90,
-            accessorFn: (row) => getDayChangePercent(row),
-            cell: ({ row }) =>
-              recordCellRender(
-                'ChangePercent',
-                <PercentChangeCell value={getDayChangePercent(row.original)} />,
-              ),
-          },
-        ],
+        id: 'bid',
+        header: 'Bid',
+        size: 90,
+        accessorFn: (row) => row.bid,
+        cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)),
       },
       {
-        id: 'orderBook',
-        header: 'Order Book',
-        columns: [
-          {
-            id: 'bid',
-            header: 'Bid',
-            size: 90,
-            accessorFn: (row) => row.bid,
-            cell: ({ row }) =>
-              recordCellRender('Bid', row.original.bid.toFixed(2)),
-          },
-          {
-            id: 'bidSize',
-            header: 'Bid Vol',
-            size: 100,
-            accessorFn: (row) => row.bidSize,
-            cell: ({ row }) =>
-              recordCellRender(
-                'BidVolume',
-                compactFormatter.format(row.original.bidSize),
-              ),
-          },
-          {
-            id: 'ask',
-            header: 'Ask',
-            size: 90,
-            accessorFn: (row) => row.ask,
-            cell: ({ row }) =>
-              recordCellRender('Ask', row.original.ask.toFixed(2)),
-          },
-          {
-            id: 'askSize',
-            header: 'Ask Vol',
-            size: 100,
-            accessorFn: (row) => row.askSize,
-            cell: ({ row }) =>
-              recordCellRender(
-                'AskVolume',
-                compactFormatter.format(row.original.askSize),
-              ),
-          },
-        ],
+        id: 'bidSize',
+        header: 'Bid Vol',
+        size: 100,
+        accessorFn: (row) => row.bidSize,
+        cell: ({ row }) =>
+          recordCellRender(
+            'BidVolume',
+            compactFormatter.format(row.original.bidSize),
+          ),
       },
       {
-        id: 'session',
-        header: 'Session',
-        columns: [
-          {
-            id: 'open',
-            header: 'Open',
-            size: 90,
-            accessorFn: (row) => row.open,
-            cell: ({ row }) =>
-              recordCellRender('Open', row.original.open.toFixed(2)),
-          },
-          {
-            id: 'high',
-            header: 'High',
-            size: 90,
-            accessorFn: (row) => row.high,
-            cell: ({ row }) =>
-              recordCellRender('High', row.original.high.toFixed(2)),
-          },
-          {
-            id: 'low',
-            header: 'Low',
-            size: 90,
-            accessorFn: (row) => row.low,
-            cell: ({ row }) =>
-              recordCellRender('Low', row.original.low.toFixed(2)),
-          },
-        ],
+        id: 'ask',
+        header: 'Ask',
+        size: 90,
+        accessorFn: (row) => row.ask,
+        cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)),
       },
       {
-        id: 'chart',
-        header: 'Chart',
-        columns: [
-          {
-            id: 'history',
-            header: 'Intraday',
-            size: 150,
-            enableSorting: false,
-            cell: ({ row }) =>
-              recordCellRender(
-                'Intraday',
-                <SparklineCell values={row.original.history} />,
-              ),
-          },
-        ],
+        id: 'askSize',
+        header: 'Ask Vol',
+        size: 100,
+        accessorFn: (row) => row.askSize,
+        cell: ({ row }) =>
+          recordCellRender(
+            'AskVolume',
+            compactFormatter.format(row.original.askSize),
+          ),
+      },
+    ],
+  },
+  {
+    id: 'session',
+    header: 'Session',
+    columns: [
+      {
+        id: 'open',
+        header: 'Open',
+        size: 90,
+        accessorFn: (row) => row.open,
+        cell: ({ row }) =>
+          recordCellRender('Open', row.original.open.toFixed(2)),
+      },
+      {
+        id: 'high',
+        header: 'High',
+        size: 90,
+        accessorFn: (row) => row.high,
+        cell: ({ row }) =>
+          recordCellRender('High', row.original.high.toFixed(2)),
+      },
+      {
+        id: 'low',
+        header: 'Low',
+        size: 90,
+        accessorFn: (row) => row.low,
+        cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)),
+      },
+    ],
+  },
+  {
+    id: 'chart',
+    header: 'Chart',
+    columns: [
+      {
+        id: 'history',
+        header: 'Intraday',
+        size: 150,
+        enableSorting: false,
+        cell: ({ row }) =>
+          recordCellRender(
+            'Intraday',
+            <SparklineCell values={row.original.history} />,
+          ),
       },
     ],
   },
@@ -228,30 +201,6 @@ export const rowModelDiagnostics = {
 
 export const TRADING_COLUMN_COUNT = 14
 
-export function getCoreTableState(props: TradingTableProps) {
-  const sorts =
-    props.coreRowModelMode === 'sort' ||
-    props.coreRowModelMode === 'sort-filter'
-  const filters =
-    (props.coreRowModelMode === 'filter' ||
-      props.coreRowModelMode === 'sort-filter') &&
-    props.coreFilterValue.trim().length > 0
-
-  return {
-    sorting: sorts ? [{ id: 'price', desc: true }] : [],
-    columnFilters: filters
-      ? [{ id: 'symbol', value: props.coreFilterValue.trim() }]
-      : [],
-  } satisfies CoreTableState
-}
-
-export function useCoreTableState(props: TradingTableProps) {
-  return useMemo(
-    () => getCoreTableState(props),
-    [props.coreFilterValue, props.coreRowModelMode],
-  )
-}
-
 export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
   const start = performance.now()
   const rows = readRows()
@@ -312,8 +261,7 @@ export function TradingRow(props: {
   quote: MarketQuote
   children: ReactNode
   rowSelected: boolean
-  onMouseDown: MouseEventHandler<HTMLTableRowElement>
-  onClick: MouseEventHandler<HTMLTableRowElement>
+  virtualRow?: { index: number; start: number }
 }) {
   const { selectedSymbol } = useTradingShellController().renderAtoms
   const selected = useSelector(
@@ -322,13 +270,18 @@ export function TradingRow(props: {
   )
   return (
     <tr
+      className={props.virtualRow ? 'virtual-table-row' : undefined}
+      style={
+        props.virtualRow
+          ? { transform: `translateY(${props.virtualRow.start}px)` }
+          : undefined
+      }
+      data-virtual-index={props.virtualRow?.index}
       data-symbol={props.quote.symbol}
       data-row-id={props.quote.id}
       data-symbol-selected={selected ? 'true' : undefined}
       title={props.quote.company}
       aria-selected={props.rowSelected}
-      onMouseDown={props.onMouseDown}
-      onClick={props.onClick}
     >
       {props.children}
     </tr>
diff --git a/examples/react/realtime-trading/src/table/table-interactions.ts b/examples/react/realtime-trading/src/table/table-interactions.ts
index b976fa4ac7..c0f0c9208b 100644
--- a/examples/react/realtime-trading/src/table/table-interactions.ts
+++ b/examples/react/realtime-trading/src/table/table-interactions.ts
@@ -1,7 +1,6 @@
 import type {
   AriaAttributes,
   KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
 } from 'react'
 
 export type CellDirection = 'up' | 'down' | 'left' | 'right'
@@ -17,6 +16,30 @@ interface SelectableRow {
   }) => (event: unknown) => void
 }
 
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Partial<Record<string, SelectableGridCell>>
+}
+
+export interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Partial<Record<string, SelectableGridRow>>
+  }
+}
+
+export interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
 interface CellNavigationTable {
   extendCellSelection: (direction: CellDirection) => void
   moveCellSelection: (direction: CellDirection) => void
@@ -52,7 +75,7 @@ export function reorderColumnIds(
 export function selectRowFromPointer(
   table: RowSelectionTable,
   row: SelectableRow,
-  event: ReactMouseEvent,
+  event: MouseEvent,
 ): void {
   const additive = event.ctrlKey || event.metaKey
   const checked = additive ? !row.getIsSelected() : true
@@ -64,10 +87,30 @@ export function selectRowFromPointer(
     shiftKey: event.shiftKey,
     ctrlKey: event.ctrlKey,
     metaKey: event.metaKey,
-    nativeEvent: event.nativeEvent,
+    nativeEvent: event,
   })
 }
 
+export function findTradingGridCellTarget(
+  table: TradingGridTable,
+  path: Array<EventTarget>,
+): SelectionCellTarget | null {
+  for (const target of path) {
+    if (!(target instanceof HTMLTableCellElement)) continue
+
+    const columnId = target.dataset['columnId']
+    const rowId =
+      target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+    if (!columnId || !rowId) return null
+
+    const row = table.getRowModel().rowsById[rowId]
+    const cell = row?.getAllCellsByColumnId()[columnId]
+    return row && cell ? { element: target, cell } : null
+  }
+
+  return null
+}
+
 export function handleCellNavigation(
   table: CellNavigationTable,
   event: ReactKeyboardEvent,
diff --git a/examples/react/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/react/realtime-trading/src/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..d733342a00
--- /dev/null
+++ b/examples/react/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -0,0 +1,14 @@
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
diff --git a/examples/react/realtime-trading/src/table/trading-table.tsx b/examples/react/realtime-trading/src/table/trading-table.tsx
index cd9ff6bc0c..1d22599cde 100644
--- a/examples/react/realtime-trading/src/table/trading-table.tsx
+++ b/examples/react/realtime-trading/src/table/trading-table.tsx
@@ -8,10 +8,12 @@ import {
   tableFeatures,
   useTable,
 } from '@tanstack/react-table'
+import { useVirtualizer } from '@tanstack/react-virtual'
 import { useLayoutEffect, useRef } from 'react'
 import { useTableBenchmark } from '../benchmark/use-table-benchmark'
 import {
   useMarketFeedController,
+  useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from '../shell/trading-shell-context'
@@ -23,28 +25,33 @@ import {
 import {
   handleCellNavigation,
   reorderColumnIds,
-  selectRowFromPointer,
   sortAriaValue,
   sortIndicator,
 } from './table-interactions'
+import { useTradingGridPointer } from './use-trading-grid-pointer'
+import {
+  TRADING_ROW_HEIGHT,
+  TRADING_ROW_OVERSCAN,
+  resolveVirtualScrollMode,
+} from './trading-row-virtualizer'
+import type { VirtualScrollMode } from './trading-row-virtualizer'
 import type {
   CellSelectionBounds,
   CellSelectionState,
 } from '@tanstack/react-table'
+import type { VirtualItem } from '@tanstack/react-virtual'
 import type { MarketQuote } from '../feed/market-data'
 import type { CoreTableState } from './table-config/trading-table-config'
 
 export {
   TRADING_COLUMN_COUNT,
-  getCoreTableState,
   rowModelDiagnostics,
 } from './table-config/trading-table-config'
 export type {
-  CoreRowModelMode,
   CoreTableState,
   RendererMode,
-  TradingTableProps,
 } from './table-config/trading-table-config'
+export type { VirtualScrollMode } from './trading-row-virtualizer'
 
 const features = tableFeatures({
   ...stockFeatures,
@@ -57,38 +64,40 @@ const features = tableFeatures({
 export function TradingTable() {
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
-  const quotes = useTradingShellState((state) => state.displayQuotes)
-  const scrollStressMode = useTradingShellState(
-    (state) => state.scrollStressMode,
+  const quotes = useMarketFeedState((state) => state.quotes)
+  const requestedVirtualScrollMode = useTradingShellState(
+    (state) => state.requestedVirtualScrollMode,
+  )
+  const instrumentCount = useMarketFeedState((state) => state.instrumentCount)
+  const virtualScrollMode = resolveVirtualScrollMode(
+    requestedVirtualScrollMode,
+    instrumentCount,
   )
 
   useLayoutEffect(() => feed.completeRender())
-  useTableBenchmark(controller, scrollStressMode)
-  const table = useTradingTable({
-    quotes,
-    tableAtoms: controller.tableAtoms,
-  })
+  useTableBenchmark(controller)
+  const table = useTradingTable({ quotes })
   const layoutRefs = useTradingTableLayout(table)
 
   return (
-    <div
-      ref={layoutRefs.scrollRef}
-      className="table-scroll"
-      data-trading-table
-      tabIndex={0}
-      onKeyDown={(event) => handleCellNavigation(table, event)}
+    <table.Subscribe
+      selector={(state) => ({
+        sorting: state.sorting,
+        columnFilters: state.columnFilters,
+        columnOrder: state.columnOrder,
+      })}
     >
-      <table
-        ref={layoutRefs.tableRef}
-        className="trading-data-grid"
-        data-testid="trading-table"
-        role="grid"
-        aria-multiselectable="true"
-      >
-        <TradingTableHeader table={table} />
-        <TradingTableBody table={table} quotes={quotes} />
-      </table>
-    </div>
+      {(coreState) => (
+        <TradingTableViewport
+          table={table}
+          rows={readRows(table, quotes, coreState)}
+          sourceRowCount={quotes.length}
+          layoutRefs={layoutRefs}
+          virtualScrollMode={virtualScrollMode}
+          reportRenderedRowCount={controller.actions.setRenderedRowCount}
+        />
+      )}
+    </table.Subscribe>
   )
 }
 
@@ -336,7 +345,6 @@ function TradingTableHeader(props: { table: TradingTableInstance }) {
 
 function useTradingTable(props: {
   quotes: Array<MarketQuote>
-  tableAtoms: ReturnType<typeof useTradingShellController>['tableAtoms']
 }) {
   return useTable(
     {
@@ -345,7 +353,6 @@ function useTradingTable(props: {
       columns: tradingColumns,
       data: props.quotes,
       getRowId: (row) => row.id,
-      atoms: props.tableAtoms,
       columnResizeMode: 'onChange',
       defaultColumn: { minSize: 56, maxSize: 800 },
       autoResetCellSelection: false,
@@ -354,89 +361,188 @@ function useTradingTable(props: {
   )
 }
 
-function TradingTableBody(props: {
+function TradingTableViewport(props: {
   table: ReturnType<typeof useTradingTable>
-  quotes: Array<MarketQuote>
+  rows: ReturnType<ReturnType<typeof useTradingTable>['getRowModel']>['rows']
+  sourceRowCount: number
+  layoutRefs: ReturnType<typeof useTradingTableLayout>
+  virtualScrollMode: VirtualScrollMode
+  reportRenderedRowCount: (count: number) => void
 }) {
+  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+    count: props.rows.length,
+    estimateSize: () => TRADING_ROW_HEIGHT,
+    getScrollElement: () => props.layoutRefs.scrollRef.current,
+    getItemKey: (index) => props.rows[index]?.id ?? index,
+    overscan: TRADING_ROW_OVERSCAN,
+    enabled: props.virtualScrollMode === 'tanstack',
+  })
+  const virtualRows = rowVirtualizer.getVirtualItems()
+  const renderedRowCount =
+    props.virtualScrollMode === 'tanstack'
+      ? virtualRows.length
+      : props.rows.length
+  const visibleRange = readVisibleRange(
+    rowVirtualizer.range,
+    props.rows.length,
+    props.virtualScrollMode,
+  )
+
+  useLayoutEffect(() => {
+    props.reportRenderedRowCount(renderedRowCount)
+  }, [props.reportRenderedRowCount, renderedRowCount])
+
   return (
-    <props.table.Subscribe
-      selector={(state) => ({
-        sorting: state.sorting,
-        columnFilters: state.columnFilters,
-        columnOrder: state.columnOrder,
-      })}
-    >
-      {(coreState) => (
-        <TradingRows
-          table={props.table}
-          quoteSnapshot={props.quotes}
-          coreState={coreState}
-        />
+    <>
+      <div
+        ref={props.layoutRefs.scrollRef}
+        className={`table-scroll${
+          props.virtualScrollMode === 'tanstack' ? ' is-virtualized' : ''
+        }`}
+        data-trading-table
+        tabIndex={0}
+        onKeyDown={(event) => handleCellNavigation(props.table, event)}
+      >
+        <table
+          ref={props.layoutRefs.tableRef}
+          className={`trading-data-grid${
+            props.virtualScrollMode === 'tanstack' ? ' virtual-table' : ''
+          }`}
+          data-testid="trading-table"
+          role="grid"
+          aria-multiselectable="true"
+        >
+          <TradingTableHeader table={props.table} />
+          <TradingRows
+            table={props.table}
+            rows={props.rows}
+            sourceRowCount={props.sourceRowCount}
+            virtualRows={virtualRows}
+            virtualScrollMode={props.virtualScrollMode}
+          />
+        </table>
+      </div>
+      {props.virtualScrollMode === 'tanstack' && (
+        <footer
+          className="virtual-scroll-footer"
+          data-testid="virtual-scroll-footer"
+        >
+          <span>
+            TanStack · Total · {props.rows.length} rows ·{' '}
+            {props.table.getVisibleLeafColumns().length} columns
+          </span>
+          <span data-testid="visible-row-range">
+            {visibleRange
+              ? `Current · rows ${visibleRange.start}..${visibleRange.end}`
+              : 'Current · rows —'}
+          </span>
+        </footer>
       )}
-    </props.table.Subscribe>
+    </>
   )
 }
 
 function TradingRows(props: {
   table: ReturnType<typeof useTradingTable>
-  quoteSnapshot: Array<MarketQuote>
-  coreState: CoreTableState
+  rows: ReturnType<ReturnType<typeof useTradingTable>['getRowModel']>['rows']
+  sourceRowCount: number
+  virtualRows: Array<VirtualItem>
+  virtualScrollMode: VirtualScrollMode
 }) {
   const { selectSymbol } = useTradingShellController().actions
-  const rows = readRows(props.table, props.quoteSnapshot, props.coreState)
+  const pointerInteractions = useTradingGridPointer(props.table, selectSymbol)
+
+  return (
+    <tbody
+      className={
+        props.virtualScrollMode === 'tanstack'
+          ? 'virtual-table-body'
+          : undefined
+      }
+      style={
+        props.virtualScrollMode === 'tanstack'
+          ? { height: `${props.rows.length * TRADING_ROW_HEIGHT}px` }
+          : undefined
+      }
+      data-source-row-count={props.sourceRowCount}
+      {...pointerInteractions}
+    >
+      {props.virtualScrollMode === 'tanstack'
+        ? props.virtualRows.map((virtualRow) => {
+            const row = props.rows[virtualRow.index]
+            return (
+              <TradingRowBoundary
+                key={row.id}
+                table={props.table}
+                row={row}
+                virtualRow={virtualRow}
+              />
+            )
+          })
+        : props.rows.map((row) => (
+            <TradingRowBoundary
+              key={row.id}
+              table={props.table}
+              row={row}
+            />
+          ))}
+    </tbody>
+  )
+}
+
+type TradingTableRow = ReturnType<
+  ReturnType<typeof useTradingTable>['getRowModel']
+>['rows'][number]
+
+function TradingRowBoundary(props: {
+  table: ReturnType<typeof useTradingTable>
+  row: TradingTableRow
+  virtualRow?: VirtualItem
+}) {
+  const { row, table, virtualRow } = props
 
   return (
-    <tbody data-source-row-count={props.quoteSnapshot.length}>
-      {rows.map((row) => (
-        <props.table.Subscribe
-          key={row.id}
-          selector={(state) =>
-            `${row.id in state.rowSelection ? 1 : 0}:${cellSelectionRowKey(
-              state.cellSelection,
-              props.table.getCellSelectionBounds(),
-              row.getDisplayIndex(),
-              row.id,
-            )}`
-          }
+    <table.Subscribe
+      selector={(state) =>
+        `${row.id in state.rowSelection ? 1 : 0}:${cellSelectionRowKey(
+          state.cellSelection,
+          table.getCellSelectionBounds(),
+          row.getDisplayIndex(),
+          row.id,
+        )}`
+      }
+    >
+      {() => (
+        <TradingRow
+          quote={row.original}
+          rowSelected={row.getIsSelected()}
+          virtualRow={virtualRow}
         >
-          {() => (
-            <TradingRow
-              quote={row.original}
-              rowSelected={row.getIsSelected()}
-              onMouseDown={(event) => {
-                if (event.button === 0) selectSymbol(row.original.symbol)
-              }}
-              onClick={(event) => selectRowFromPointer(props.table, row, event)}
-            >
-              {row.getVisibleCells().map((cell) => {
-                const edges = cell.getSelectionEdges()
+          {row.getVisibleCells().map((cell) => {
+            const edges = cell.getSelectionEdges()
 
-                return (
-                  <td
-                    key={cell.id}
-                    style={{
-                      width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
-                    }}
-                    data-column-id={cell.column.id}
-                    data-cell-focused={cell.getIsFocused() ? 'true' : undefined}
-                    data-selection-top={edges.top ? 'true' : undefined}
-                    data-selection-right={edges.right ? 'true' : undefined}
-                    data-selection-bottom={edges.bottom ? 'true' : undefined}
-                    data-selection-left={edges.left ? 'true' : undefined}
-                    aria-selected={cell.getIsSelected()}
-                    tabIndex={cell.getTabIndex()}
-                    onMouseDown={cell.getSelectionStartHandler()}
-                    onMouseEnter={cell.getSelectionExtendHandler()}
-                  >
-                    <FlexRender cell={cell} />
-                  </td>
-                )
-              })}
-            </TradingRow>
-          )}
-        </props.table.Subscribe>
-      ))}
-    </tbody>
+            return (
+              <td
+                key={cell.id}
+                style={{
+                  width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                }}
+                data-column-id={cell.column.id}
+                data-cell-focused={cell.getIsFocused() ? 'true' : undefined}
+                data-selection-top={edges.top ? 'true' : undefined}
+                data-selection-right={edges.right ? 'true' : undefined}
+                data-selection-bottom={edges.bottom ? 'true' : undefined}
+                data-selection-left={edges.left ? 'true' : undefined}
+                aria-selected={cell.getIsSelected()}
+                tabIndex={cell.getTabIndex()}
+              >
+                <FlexRender cell={cell} />
+              </td>
+            )
+          })}
+        </TradingRow>
+      )}
+    </table.Subscribe>
   )
 }
 
@@ -445,13 +551,30 @@ function getHeaderClassName(header: {
   column: { id: string }
 }): string | undefined {
   if (header.subHeaders.length > 0) return 'column-group-header'
-  return isIdentityColumn(header.column.id) ? undefined : 'numeric-header'
+  return isTextColumn(header.column.id) ? undefined : 'numeric-header'
 }
 
-function isIdentityColumn(columnId: string): boolean {
+function isTextColumn(columnId: string): boolean {
   return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
 }
 
+function readVisibleRange(
+  range: { startIndex: number; endIndex: number } | null,
+  rowCount: number,
+  virtualScrollMode: VirtualScrollMode,
+): { start: number; end: number } | null {
+  if (virtualScrollMode !== 'tanstack' || rowCount === 0 || range === null) {
+    return null
+  }
+
+  const lastRowIndex = rowCount - 1
+  const start = Math.min(range.startIndex, lastRowIndex)
+  return {
+    start,
+    end: Math.min(Math.max(start, range.endIndex), lastRowIndex),
+  }
+}
+
 function readRows(
   table: ReturnType<typeof useTradingTable>,
   quoteSnapshot: Array<MarketQuote>,
diff --git a/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts b/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
new file mode 100644
index 0000000000..64dbb62c74
--- /dev/null
+++ b/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
@@ -0,0 +1,74 @@
+import { useRef } from 'react'
+import {
+  findTradingGridCellTarget,
+  selectRowFromPointer,
+} from './table-interactions'
+import type {
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+} from 'react'
+import type { TradingGridTable } from './table-interactions'
+
+export interface TradingGridPointerHandlers {
+  readonly onMouseDown: (
+    event: ReactMouseEvent<HTMLTableSectionElement>,
+  ) => void
+  readonly onPointerOver: (
+    event: ReactPointerEvent<HTMLTableSectionElement>,
+  ) => void
+  readonly onMouseLeave: () => void
+  readonly onClick: (event: ReactMouseEvent<HTMLTableSectionElement>) => void
+}
+
+export function useTradingGridPointer(
+  table: TradingGridTable,
+  selectSymbol: (symbol: string) => void,
+): TradingGridPointerHandlers {
+  const lastPointerCell = useRef<HTMLTableCellElement | null>(null)
+
+  return {
+    onMouseDown(event) {
+      if (event.button !== 0) return
+
+      const nativeEvent = event.nativeEvent
+      const target = findTradingGridCellTarget(
+        table,
+        nativeEvent.composedPath(),
+      )
+      if (!target) return
+
+      lastPointerCell.current = target.element
+      selectSymbol(target.cell.row.original.symbol)
+      target.cell
+        .getSelectionStartHandler(target.element.ownerDocument)(nativeEvent)
+    },
+    onPointerOver(event) {
+      const nativeEvent = event.nativeEvent
+      if ((nativeEvent.buttons & 1) === 0) {
+        lastPointerCell.current = null
+        return
+      }
+
+      const target = findTradingGridCellTarget(
+        table,
+        nativeEvent.composedPath(),
+      )
+      if (!target || target.element === lastPointerCell.current) return
+
+      lastPointerCell.current = target.element
+      target.cell.getSelectionExtendHandler()(nativeEvent)
+    },
+    onMouseLeave() {
+      lastPointerCell.current = null
+    },
+    onClick(event) {
+      const nativeEvent = event.nativeEvent
+      const target = findTradingGridCellTarget(
+        table,
+        nativeEvent.composedPath(),
+      )
+      if (!target) return
+      selectRowFromPointer(table, target.cell.row, nativeEvent)
+    },
+  }
+}
diff --git a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
index eb71bf2dc8..439de89ad5 100644
--- a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
@@ -31,9 +31,64 @@ test('runs the React realtime trading workload', async ({ page }) => {
     await page.goto(server.url)
 
     const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
     await expect(table).toBeVisible()
-    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
     await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
     await expect(table.locator('thead')).toContainText('Market')
     await expect(table.locator('thead')).toContainText('Bid Vol')
     await expect(table.locator('thead')).toContainText('Intraday')
@@ -44,38 +99,37 @@ test('runs the React realtime trading workload', async ({ page }) => {
       selectedSymbol ?? '',
     )
     await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
-    const instrumentCount = page.getByTestId('instrument-count-select')
     await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
     await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
     await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
 
-    const loadProfile = page.getByTestId('load-profile-select')
-    await expect(loadProfile).toHaveValue('high')
-    await loadProfile.selectOption('very-high')
-    await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
-    await loadProfile.selectOption('high')
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
 
     const sparklineInterval = page.getByTestId(
       'sparkline-sample-interval-select',
     )
-    await expect(sparklineInterval).toHaveValue('250')
-    await sparklineInterval.selectOption('500')
-    await expect(sparklineInterval).toHaveValue('500')
-    await sparklineInterval.selectOption('250')
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
 
     const publishInterval = page.getByTestId('publish-interval-select')
     await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
     await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
 
-    const coreRowModel = page.getByTestId('core-row-model-select')
-    await coreRowModel.selectOption('filter')
-    await expect(page.getByTestId('core-filter-input')).toHaveValue('ALP')
-    await expect(table.locator('tbody tr')).toHaveCount(21)
-    await page.getByTestId('core-filter-input').fill('CRN')
-    await expect(table.locator('tbody tr')).toHaveCount(21)
-    await coreRowModel.selectOption('none')
-    await expect(table.locator('tbody tr')).toHaveCount(250)
-
     await expect
       .poll(async () => {
         const text = await page.getByTestId('row-update-rate').textContent()
@@ -110,37 +164,8 @@ test('runs the React realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
     await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
 
-    await coreRowModel.selectOption('sort')
-    const sortedPrices = await table
-      .locator('tbody tr')
-      .evaluateAll((rows) =>
-        rows.map((row) =>
-          Number(
-            row.querySelector<HTMLButtonElement>('.price-button')?.textContent,
-          ),
-        ),
-      )
-    expect(sortedPrices).toEqual([...sortedPrices].sort((a, b) => b - a))
-
     await instrumentCount.selectOption('750')
-    await expect(table.locator('tbody tr')).toHaveCount(750)
-    await page.getByTestId('scroll-stress-select').selectOption('vertical')
-    await expect
-      .poll(() =>
-        page.locator('.table-scroll').evaluate((element) => element.scrollTop),
-      )
-      .toBeGreaterThan(0)
-    await expect
-      .poll(async () =>
-        Number(
-          (await page.getByTestId('scroll-pressure-rate').textContent())
-            ?.split('/')[0]
-            .trim(),
-        ),
-      )
-      .toBeGreaterThan(0)
-    await page.getByTestId('scroll-stress-select').selectOption('off')
-
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(750)
     await expect
       .poll(async () =>
         Number(await page.getByTestId('profiler-commit-rate').textContent()),
diff --git a/examples/solid/realtime-trading/README.md b/examples/solid/realtime-trading/README.md
index d85998c297..38d34d2a25 100644
--- a/examples/solid/realtime-trading/README.md
+++ b/examples/solid/realtime-trading/README.md
@@ -32,14 +32,21 @@ pnpm --dir examples/solid/realtime-trading build
 The application renders one table implementation directly. Historical adapter
 switching and compatibility code are not part of the benchmark.
 
+## Row rendering
+
+The example starts with 100 instruments. Below 250 instruments, the row-rendering
+select can compare **Full DOM** with **TanStack Virtual**. At 250 instruments or
+more, virtualization is enabled and locked so large row counts cannot
+accidentally mount the complete table.
+
 ## Workloads
 
 - Stable market snapshots with interactive table sorting.
 - Stable or alternating cell component types.
 - Optional sparkline and quote-age invalidation.
-- Per-instrument Intraday history sampling with a configurable 100–2,000 ms
-  worker interval.
-- Configurable worker-sample profiles and explicit sample bursts.
+- Per-instrument Intraday history sampling with a configurable 16–2,000 ms
+  worker interval, defaulting to 16 ms for the initial 100-row workload.
+- Discrete worker-side sample workloads and explicit sample bursts.
 
 The sample rate controls synthetic quote generation inside the worker; it is not
 a browser event or `postMessage` rate. The publish interval separately controls
diff --git a/examples/solid/realtime-trading/package.json b/examples/solid/realtime-trading/package.json
index 1c4cf589a5..c5ba2fea1d 100644
--- a/examples/solid/realtime-trading/package.json
+++ b/examples/solid/realtime-trading/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tanstack/solid-table": "9.1.2",
+    "@tanstack/solid-virtual": "^3.13.36",
     "solid-js": "^1.9.14"
   },
   "devDependencies": {
diff --git a/examples/solid/realtime-trading/src/App.tsx b/examples/solid/realtime-trading/src/App.tsx
index 5e4ebced5f..c7bae11144 100644
--- a/examples/solid/realtime-trading/src/App.tsx
+++ b/examples/solid/realtime-trading/src/App.tsx
@@ -3,6 +3,7 @@ import { createMarketFeedController } from './feed/market-feed-controller'
 import { TradingShell } from './shell/TradingShell'
 import {
   TradingShellProvider,
+  useMarketFeedController,
   useTradingShellController,
 } from './shell/trading-shell-context'
 import { TradingTable } from './table/trading-table'
@@ -21,12 +22,15 @@ export default function App() {
 
 function TradingTableOutlet() {
   const { state, actions } = useTradingShellController()
+  const feed = useMarketFeedController()
   return (
     <TradingTable
-      quotes={state.displayQuotes()}
+      quotes={feed.state.quotes()}
       rendererMode={state.rendererMode()}
       selectedSymbol={state.selectedSymbol()}
+      virtualScrollMode={state.virtualScrollMode()}
       onSelectSymbol={actions.selectSymbol}
+      onRenderedRowCount={actions.setRenderedRowCount}
     />
   )
 }
diff --git a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 68130a4146..6206cdf435 100644
--- a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -1,11 +1,14 @@
 import {
-  createEffect,
   createMemo,
   createSignal,
   onCleanup,
   onMount,
 } from 'solid-js'
 import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import {
+  FORCED_VIRTUALIZATION_ROW_COUNT,
+  resolveVirtualScrollMode,
+} from '../table/trading-row-virtualizer'
 import {
   BenchmarkMonitor,
   initialMetrics,
@@ -13,15 +16,20 @@ import {
 } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
 
 export function createTradingBenchmarkController(feed: MarketFeedController) {
   const [rendererMode, setRendererMode] = createSignal<RendererMode>('stable')
+  const [requestedVirtualScrollMode, setRequestedVirtualScrollMode] =
+    createSignal<VirtualScrollMode>('none')
+  const [renderedRowCount, setRenderedRowCount] = createSignal(0)
   const [selectedSymbol, setSelectedSymbol] = createSignal<string | null>(null)
   const [metrics, setMetrics] = createSignal(initialMetrics)
   const monitor = new BenchmarkMonitor()
   const runtime = {
     animationFrameId: 0,
     longAnimationFrameObserver: null as PerformanceObserver | null,
+    mutationObserver: null as MutationObserver | null,
   }
 
   const stopObservingFeed = feed.observe({
@@ -32,24 +40,23 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
     renderCommitted: () => monitor.recordCompletedRender(),
   })
 
-  createEffect(() => {
+  const observeTableMutations = (): void => {
     const tableBody = document.querySelector(
       '.market-panel [data-trading-table] tbody',
     )
     if (!tableBody) return
 
     monitor.resetDomMutations()
-    const observer = new MutationObserver((records) => {
+    runtime.mutationObserver = new MutationObserver((records) => {
       monitor.recordDomMutations(records.length)
     })
-    observer.observe(tableBody, {
+    runtime.mutationObserver.observe(tableBody, {
       attributes: true,
       characterData: true,
       childList: true,
       subtree: true,
     })
-    onCleanup(() => observer.disconnect())
-  })
+  }
 
   const benchmarkFrame = (now: number): void => {
     monitor.recordAnimationFrame()
@@ -60,6 +67,7 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
   }
 
   onMount(() => {
+    observeTableMutations()
     if (longAnimationFramesSupported) {
       runtime.longAnimationFrameObserver = new PerformanceObserver(
         (entries) => {
@@ -80,6 +88,7 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
     stopObservingFeed()
     cancelAnimationFrame(runtime.animationFrameId)
     runtime.longAnimationFrameObserver?.disconnect()
+    runtime.mutationObserver?.disconnect()
   })
 
   const resetViewState = (): void => {
@@ -89,6 +98,12 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
   const actions = {
     resetViewState,
     setRendererMode,
+    setVirtualScrollEnabled(enabled: boolean): void {
+      if (feed.state.instrumentCount() >= FORCED_VIRTUALIZATION_ROW_COUNT)
+        return
+      setRequestedVirtualScrollMode(enabled ? 'tanstack' : 'none')
+    },
+    setRenderedRowCount,
     selectSymbol: setSelectedSymbol,
     resetMarket(): void {
       monitor.reset()
@@ -98,14 +113,17 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
     },
   }
 
-  const displayQuotes = feed.state.quotes
-  const selectedQuote = createMemo(
-    () =>
-      displayQuotes().find((quote) => quote.symbol === selectedSymbol()) ??
-      null,
+  const virtualScrollForced = createMemo(
+    () => feed.state.instrumentCount() >= FORCED_VIRTUALIZATION_ROW_COUNT,
+  )
+  const virtualScrollMode = createMemo(() =>
+    resolveVirtualScrollMode(
+      requestedVirtualScrollMode(),
+      feed.state.instrumentCount(),
+    ),
   )
   const mountedCells = createMemo(
-    () => displayQuotes().length * TRADING_COLUMN_COUNT,
+    () => renderedRowCount() * TRADING_COLUMN_COUNT,
   )
   const liveComponents = createMemo(
     () => metrics().componentsCreated - metrics().componentsDestroyed,
@@ -115,10 +133,12 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
     feed,
     state: {
       rendererMode,
+      requestedVirtualScrollMode,
+      virtualScrollForced,
+      virtualScrollMode,
+      renderedRowCount,
       selectedSymbol,
       metrics,
-      displayQuotes,
-      selectedQuote,
       mountedCells,
       liveComponents,
     },
diff --git a/examples/solid/realtime-trading/src/feed/feed-load-profiles.ts b/examples/solid/realtime-trading/src/feed/feed-load-profiles.ts
deleted file mode 100644
index 417177ff0f..0000000000
--- a/examples/solid/realtime-trading/src/feed/feed-load-profiles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type FeedLoadProfile =
-  | 'low'
-  | 'medium'
-  | 'high'
-  | 'very-high'
-  | 'max'
-  | 'custom'
-
-export const feedLoadRates: Record<
-  Exclude<FeedLoadProfile, 'custom'>,
-  number
-> = {
-  low: 1_000,
-  medium: 5_000,
-  high: 10_000,
-  'very-high': 25_000,
-  max: 100_000,
-}
diff --git a/examples/solid/realtime-trading/src/feed/feed-sample-rates.ts b/examples/solid/realtime-trading/src/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/solid/realtime-trading/src/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/solid/realtime-trading/src/feed/market-feed-config.ts b/examples/solid/realtime-trading/src/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/solid/realtime-trading/src/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/solid/realtime-trading/src/feed/market-feed-controller.ts b/examples/solid/realtime-trading/src/feed/market-feed-controller.ts
index 7d6b4f893a..4c93721c8c 100644
--- a/examples/solid/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/solid/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,7 +1,7 @@
-import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
-import { feedLoadRates } from './feed-load-profiles'
+import { createSignal, onCleanup, onMount } from 'solid-js'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
-import type { FeedLoadProfile } from './feed-load-profiles'
 import type {
   MarketFeedCommand,
   MarketFeedEvent,
@@ -24,20 +24,27 @@ export interface MarketFeedObserver {
 export function createMarketFeedController() {
   const [workerReady, setWorkerReady] = createSignal(false)
   const [running, setRunning] = createSignal(true)
-  const [instrumentCount, setInstrumentCount] = createSignal(250)
-  const [feedLoadProfile, setFeedLoadProfile] =
-    createSignal<FeedLoadProfile>('high')
-  const [targetTicksPerSecond, setTargetTicksPerSecond] = createSignal(10_000)
-  const [publishIntervalMs, setPublishIntervalMsState] = createSignal(20)
-  const [updateSparklines, setUpdateSparklines] = createSignal(true)
+  const [instrumentCount, setInstrumentCount] = createSignal(
+    initialMarketFeedConfig.instrumentCount,
+  )
+  const [targetTicksPerSecond, setTargetTicksPerSecond] = createSignal(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  const [publishIntervalMs, setPublishIntervalMsState] = createSignal(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  const [updateSparklines, setUpdateSparklines] = createSignal(
+    initialMarketFeedConfig.updateSparklines,
+  )
   const [sparklineSampleIntervalMs, setSparklineSampleIntervalMs] =
-    createSignal(250)
+    createSignal(initialMarketFeedConfig.sparklineSampleIntervalMs)
   const [quotes, setQuotes] = createSignal<Array<MarketQuote>>([])
   const observers = new Set<MarketFeedObserver>()
   const runtime = {
     worker: null as Worker | null,
     feedSessionId: 0,
     renderPending: false,
+    quoteIndexBySymbol: new Map<string, number>(),
   }
 
   const post = (command: MarketFeedCommand): void =>
@@ -59,18 +66,17 @@ export function createMarketFeedController() {
     }
   }
 
-  createEffect(() => {
-    quotes()
-    completeRender()
-  })
-
   const handleWorkerMessage = ({
     data,
   }: MessageEvent<MarketFeedEvent>): void => {
     if (data.type === 'snapshot') {
       runtime.feedSessionId = data.sessionId
       startMutation()
-      setQuotes(hydrateMarketQuotes(data.quotes))
+      const nextQuotes = hydrateMarketQuotes(data.quotes)
+      runtime.quoteIndexBySymbol = new Map(
+        nextQuotes.map((quote, index) => [quote.symbol, index]),
+      )
+      setQuotes(nextQuotes)
       setWorkerReady(true)
       return
     }
@@ -141,18 +147,10 @@ export function createMarketFeedController() {
       setInstrumentCount(count)
       reset()
     },
-    setLoadProfile(profile: FeedLoadProfile): void {
-      setFeedLoadProfile(profile)
-      if (profile === 'custom') return
-
-      const rate = feedLoadRates[profile]
-      setTargetTicksPerSecond(rate)
-      post({ type: 'set-rate', ticksPerSecond: rate })
-    },
     setTargetRate(rate: number): void {
-      setFeedLoadProfile('custom')
-      setTargetTicksPerSecond(rate)
-      post({ type: 'set-rate', ticksPerSecond: rate })
+      const sampleRate = normalizeFeedSampleRate(rate)
+      setTargetTicksPerSecond(sampleRate)
+      post({ type: 'set-rate', ticksPerSecond: sampleRate })
     },
     setPublishInterval(intervalMs: number): void {
       setPublishIntervalMsState(intervalMs)
@@ -177,7 +175,6 @@ export function createMarketFeedController() {
       workerReady,
       running,
       instrumentCount,
-      feedLoadProfile,
       targetTicksPerSecond,
       publishIntervalMs,
       updateSparklines,
@@ -189,6 +186,12 @@ export function createMarketFeedController() {
       observers.add(observer)
       return () => observers.delete(observer)
     },
+    getQuoteBySymbol(symbol: string | null): MarketQuote | null {
+      if (symbol === null) return null
+
+      const index = runtime.quoteIndexBySymbol.get(symbol)
+      return index === undefined ? null : (quotes()[index] ?? null)
+    },
     completeRender,
   }
 }
diff --git a/examples/solid/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/solid/realtime-trading/src/feed/worker/market-feed.worker.ts
index 7b22656f2e..2b7a642fd9 100644
--- a/examples/solid/realtime-trading/src/feed/worker/market-feed.worker.ts
+++ b/examples/solid/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -1,3 +1,4 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
 import { MarketFeedEngine } from './market-feed-engine'
 import type {
   MarketFeedCommand,
@@ -13,11 +14,11 @@ const runtime = {
   pendingCoalescedUpdateCount: 0,
   initialized: false,
   running: true,
-  ticksPerSecond: 10_000,
-  publishIntervalMs: 20,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
   publishTimerId: null as ReturnType<typeof setInterval> | null,
-  updateSparklines: true,
-  sparklineSampleIntervalMs: 250,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
   tickBudget: 0,
   lastTickAt: performance.now(),
 }
diff --git a/examples/solid/realtime-trading/src/index.css b/examples/solid/realtime-trading/src/index.css
index 9ae9207e30..20264402de 100644
--- a/examples/solid/realtime-trading/src/index.css
+++ b/examples/solid/realtime-trading/src/index.css
@@ -144,7 +144,6 @@ select {
 
 .brand,
 .header-actions,
-.session-info,
 .feed-status {
   display: flex;
   align-items: center;
@@ -155,31 +154,6 @@ select {
   color: var(--text-strong);
 }
 
-.brand-mark {
-  display: grid;
-  width: 24px;
-  height: 24px;
-  place-items: center;
-  color: var(--text-inverse);
-  background: var(--surface-control);
-  border: 1px solid var(--border-strong);
-  font-size: 0.62rem;
-  font-weight: 800;
-}
-
-.environment {
-  padding: 0.16rem 0.3rem;
-  color: var(--amber);
-  background: color-mix(in srgb, var(--amber) 8%, transparent);
-  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
-  font-size: 0.58rem;
-}
-
-.session-info {
-  gap: 1rem;
-  color: var(--muted);
-}
-
 .header-actions {
   gap: 0.75rem;
 }
@@ -300,6 +274,22 @@ select {
   background: var(--surface-table);
 }
 
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
 table {
   min-width: 100%;
   border-spacing: 0;
@@ -309,6 +299,40 @@ table {
   font-variant-numeric: tabular-nums;
 }
 
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
 .trading-data-grid {
   display: grid;
 }
@@ -777,10 +801,6 @@ td[data-selection-left='true']::after {
   font-weight: 500;
 }
 
-.statusbar-spacer {
-  flex: 1;
-}
-
 .sidebar-slot {
   width: var(--sidebar-width);
   min-width: 0;
@@ -934,6 +954,21 @@ input[type='range'] {
   border-bottom: 0;
 }
 
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
 dt {
   color: var(--muted);
   font-size: 0.61rem;
@@ -989,10 +1024,6 @@ dd {
     overflow: hidden;
   }
 
-  .session-info > span:first-child {
-    display: none;
-  }
-
   .market-panel {
     min-height: 0;
   }
diff --git a/examples/solid/realtime-trading/src/shell/TradingShell.tsx b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
index 02ae134ca2..0041d32561 100644
--- a/examples/solid/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
@@ -1,12 +1,18 @@
-import { Show, createSignal } from 'solid-js'
+import { For, Show, createMemo, createSignal } from 'solid-js'
 import { longAnimationFramesSupported } from '../benchmark/benchmark-monitor'
+import {
+  feedSampleRateAt,
+  feedSampleRateIndex,
+  feedSampleRateOptions,
+} from '../feed/feed-sample-rates'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
 import {
   useMarketFeedController,
   useTradingShellController,
 } from './trading-shell-context'
+import { configuratorOptions } from './configurator-options'
 import type { JSX } from 'solid-js'
 import type { FeedMetrics } from '../benchmark/benchmark-monitor'
-import type { FeedLoadProfile } from '../feed/feed-load-profiles'
 
 const integerFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 0,
@@ -44,7 +50,9 @@ export function TradingShell(props: { children: JSX.Element }) {
       </section>
       <MarketStatusbar />
       <div class="sidebar-slot">
-        <Configurator />
+        <Show when={sidebarOpen()}>
+          <Configurator />
+        </Show>
       </div>
     </main>
   )
@@ -58,26 +66,21 @@ function AppHeader(props: {
   return (
     <header class="app-bar">
       <div class="brand">
-        <span class="brand-mark">TT</span>
         <strong>MARKET MONITOR</strong>
-        <span class="environment">SIMULATED</span>
       </div>
       <div class="header-actions">
-        <div class="session-info">
-          <span>SOLID / FLEX RENDER</span>
-          <span
-            class="feed-status"
-            classList={{ 'is-running': workerReady() && running() }}
-            data-testid="feed-status"
-          >
-            <span class="status-dot" aria-hidden="true" />
-            {!workerReady()
-              ? 'FEED CONNECTING'
-              : running()
-                ? 'FEED LIVE'
-                : 'FEED PAUSED'}
-          </span>
-        </div>
+        <span
+          class="feed-status"
+          classList={{ 'is-running': workerReady() && running() }}
+          data-testid="feed-status"
+        >
+          <span class="status-dot" aria-hidden="true" />
+          {!workerReady()
+            ? 'FEED CONNECTING'
+            : running()
+              ? 'FEED LIVE'
+              : 'FEED PAUSED'}
+        </span>
         <button
           class="sidebar-toggle"
           type="button"
@@ -105,7 +108,8 @@ function MarketStatusbar() {
   return (
     <footer class="market-statusbar">
       <span>
-        BATCH TICKS <strong>{formatInteger(metrics().lastBatchSize)}</strong>
+        MESSAGE SAMPLES{' '}
+        <strong>{formatInteger(metrics().lastBatchSize)}</strong>
       </span>
       <span>
         ROW UPDATES <strong>{formatInteger(metrics().lastUpdateCount)}</strong>
@@ -116,8 +120,6 @@ function MarketStatusbar() {
       <span>
         COMPONENTS <strong>{formatInteger(liveComponents())}</strong>
       </span>
-      <span class="statusbar-spacer" />
-      <span>WORKER / FIXED CADENCE / IMMUTABLE</span>
     </footer>
   )
 }
@@ -125,22 +127,28 @@ function MarketStatusbar() {
 function Configurator() {
   const { state, actions } = useTradingShellController()
   const feed = useMarketFeedController()
-  const { rendererMode, metrics, selectedQuote, mountedCells, liveComponents } =
-    state
+  const {
+    rendererMode,
+    virtualScrollForced,
+    virtualScrollMode,
+  } = state
   const {
     running,
     instrumentCount,
-    feedLoadProfile,
     targetTicksPerSecond,
     publishIntervalMs,
     updateSparklines,
     sparklineSampleIntervalMs,
   } = feed.state
-  const { resetViewState, setRendererMode, resetMarket } = actions
+  const {
+    resetViewState,
+    setRendererMode,
+    setVirtualScrollEnabled,
+    resetMarket,
+  } = actions
   const {
     toggle,
     setInstrumentCount,
-    setLoadProfile,
     setTargetRate,
     setPublishInterval,
     setSparklineUpdates,
@@ -170,7 +178,7 @@ function Configurator() {
         </button>
 
         <label class="field">
-          <span>Instruments</span>
+          <span>Instruments (rows)</span>
           <select
             data-testid="instrument-count-select"
             value={instrumentCount()}
@@ -179,65 +187,49 @@ function Configurator() {
               setInstrumentCount(Number(event.currentTarget.value))
             }}
           >
-            <option value="50">50</option>
-            <option value="100">100</option>
-            <option value="150">150</option>
-            <option value="250">250</option>
-            <option value="350">350</option>
-            <option value="500">500</option>
-            <option value="750">750</option>
-            <option value="1000">1,000</option>
-            <option value="1500">1,500</option>
-            <option value="2500">2,500</option>
-            <option value="5000">5,000</option>
+            <For each={configuratorOptions.instrumentCounts}>
+              {(option) => <option value={option.value}>{option.label}</option>}
+            </For>
           </select>
         </label>
 
-        <label class="field">
-          <span>Load profile</span>
-          <select
-            data-testid="load-profile-select"
-            value={feedLoadProfile()}
-            onChange={(event) =>
-              setLoadProfile(event.currentTarget.value as FeedLoadProfile)
-            }
-          >
-            <option value="low">Low · 1K/s</option>
-            <option value="medium">Medium · 5K/s</option>
-            <option value="high">High · 10K/s</option>
-            <option value="very-high">Very high · 25K/s</option>
-            <option value="max">Max · 100K/s</option>
-            <option value="custom">Custom</option>
-          </select>
-          <small>
-            High is the repeatable default; Max is intentionally saturating.
-          </small>
-        </label>
-
         <label class="field rate-field">
           <span>
-            Worker sample generation
-            <strong>{formatRate(targetTicksPerSecond())}/s</strong>
+            Synthetic quote workload
+            <strong data-testid="target-sample-rate">
+              {formatRate(targetTicksPerSecond())} samples/s
+            </strong>
           </span>
           <input
             data-testid="target-rate-slider"
             type="range"
-            min="100"
-            max="100000"
-            step="100"
-            value={targetTicksPerSecond()}
+            min={0}
+            max={feedSampleRateOptions.length - 1}
+            step={1}
+            list="worker-sample-rate-steps"
+            value={feedSampleRateIndex(targetTicksPerSecond())}
+            aria-valuetext={`${formatRate(
+              targetTicksPerSecond(),
+            )} synthetic quote samples per second`}
             onInput={(event) =>
-              setTargetRate(Number(event.currentTarget.value))
+              setTargetRate(feedSampleRateAt(Number(event.currentTarget.value)))
             }
           />
+          <datalist id="worker-sample-rate-steps">
+            <For each={feedSampleRateOptions}>
+              {(option, index) => (
+                <option value={index()} label={option.label} />
+              )}
+            </For>
+          </datalist>
           <small>
-            Synthetic quote samples generated inside the worker, not browser
-            events. Repeated instruments are coalesced before each message.
+            Fixed worker-side workload levels, from 100 to 100K samples/s.
+            Samples are coalesced; this is not the message delivery rate.
           </small>
         </label>
 
         <label class="field">
-          <span>Publish interval</span>
+          <span>Worker delivery interval</span>
           <select
             data-testid="publish-interval-select"
             value={publishIntervalMs()}
@@ -245,15 +237,9 @@ function Configurator() {
               setPublishInterval(Number(event.currentTarget.value))
             }
           >
-            <option value="8">8 ms · 125 msg/s</option>
-            <option value="16">16 ms · 62.5 msg/s</option>
-            <option value="20">20 ms · 50 msg/s</option>
-            <option value="33">33 ms · 30 msg/s</option>
-            <option value="50">50 ms · 20 msg/s</option>
-            <option value="100">100 ms · 10 msg/s</option>
-            <option value="250">250 ms · 4 msg/s</option>
-            <option value="500">500 ms · 2 msg/s</option>
-            <option value="1000">1000 ms · 1 msg/s</option>
+            <For each={configuratorOptions.workerDeliveryIntervals}>
+              {(option) => <option value={option.value}>{option.label}</option>}
+            </For>
           </select>
           <small>
             The worker posts one coalesced update message at this target
@@ -264,6 +250,27 @@ function Configurator() {
 
       <section class="config-section" aria-labelledby="render-settings">
         <h2 id="render-settings">RENDER PATH</h2>
+        <label class="field" data-testid="virtual-scroll-mode">
+          <span>Row rendering</span>
+          <select
+            data-testid="virtual-scroll-select"
+            value={virtualScrollMode()}
+            disabled={virtualScrollForced()}
+            onChange={(event) =>
+              setVirtualScrollEnabled(event.currentTarget.value === 'tanstack')
+            }
+          >
+            <For each={configuratorOptions.rowRenderingModes}>
+              {(option) => <option value={option.value}>{option.label}</option>}
+            </For>
+          </select>
+          <small>
+            {virtualScrollForced()
+              ? `TanStack Virtual is required and locked at ${FORCED_VIRTUALIZATION_ROW_COUNT.toLocaleString()} or more rows.`
+              : 'Full DOM mounts every row; TanStack Virtual mounts only the visible window.'}
+          </small>
+        </label>
+
         <label class="toggle-field">
           <input
             type="checkbox"
@@ -295,7 +302,7 @@ function Configurator() {
         </label>
 
         <label class="field">
-          <span>Intraday sample interval</span>
+          <span>Intraday chart sampling</span>
           <select
             data-testid="sparkline-sample-interval-select"
             value={sparklineSampleIntervalMs()}
@@ -303,14 +310,13 @@ function Configurator() {
               setSparklineSampleInterval(Number(event.currentTarget.value))
             }
           >
-            <option value="100">100 ms</option>
-            <option value="250">250 ms</option>
-            <option value="500">500 ms</option>
-            <option value="1000">1,000 ms</option>
-            <option value="2000">2,000 ms</option>
+            <For each={configuratorOptions.intradaySamplingIntervals}>
+              {(option) => <option value={option.value}>{option.label}</option>}
+            </For>
           </select>
           <small>
-            Minimum time between rolling samples for the same instrument.
+            How often each row adds a point to its sparkline. Quote generation
+            and worker delivery are unaffected.
           </small>
         </label>
       </section>
@@ -327,51 +333,8 @@ function Configurator() {
         </div>
       </section>
 
-      <Diagnostics
-        metrics={metrics()}
-        mountedCells={mountedCells()}
-        liveComponents={liveComponents()}
-      />
-
-      <section
-        class="config-section selected-instrument"
-        data-testid="selected-instrument"
-      >
-        <h2>SELECTED INSTRUMENT</h2>
-        <Show
-          when={selectedQuote()}
-          fallback={
-            <p>
-              Click or begin a cell selection in any row to inspect its
-              instrument.
-            </p>
-          }
-        >
-          {(quote) => (
-            <>
-              <div class="selection">
-                <div>
-                  <strong>{quote().symbol}</strong>
-                  <span>{quote().company}</span>
-                </div>
-                <small>{quote().venue}</small>
-              </div>
-              <dl>
-                <div>
-                  <dt>Last</dt>
-                  <dd>{quote().price.toFixed(2)}</dd>
-                </div>
-                <div>
-                  <dt>Bid / ask</dt>
-                  <dd>
-                    {quote().bid.toFixed(2)} / {quote().ask.toFixed(2)}
-                  </dd>
-                </div>
-              </dl>
-            </>
-          )}
-        </Show>
-      </section>
+      <Diagnostics />
+      <SelectedInstrument />
     </aside>
   )
 }
@@ -451,97 +414,95 @@ function MetricsStrip() {
   )
 }
 
-function Diagnostics(props: {
-  metrics: FeedMetrics
-  mountedCells: number
-  liveComponents: number
-}) {
+function Diagnostics() {
+  const { metrics, mountedCells, liveComponents } =
+    useTradingShellController().state
   return (
     <section class="config-section diagnostics" aria-labelledby="diagnostics">
       <h2 id="diagnostics">DIAGNOSTICS</h2>
       <dl>
         <div>
           <dt>Mounted cells</dt>
-          <dd>{formatInteger(props.mountedCells)}</dd>
+          <dd>{formatInteger(mountedCells())}</dd>
         </div>
         <div>
           <dt>Live components</dt>
-          <dd>{formatInteger(props.liveComponents)}</dd>
+          <dd>{formatInteger(liveComponents())}</dd>
         </div>
         <div>
           <dt>Created / destroyed</dt>
           <dd>
-            {formatInteger(props.metrics.componentsCreated)} /{' '}
-            {formatInteger(props.metrics.componentsDestroyed)}
+            {formatInteger(metrics().componentsCreated)} /{' '}
+            {formatInteger(metrics().componentsDestroyed)}
           </dd>
         </div>
         <div>
-          <dt>Cell renderer calls / s</dt>
+          <dt>Renderer callbacks / s</dt>
           <dd data-testid="cell-render-rate">
-            {formatRate(props.metrics.cellRendererCallsPerSecond)}
+            {formatRate(metrics().cellRendererCallsPerSecond)}
           </dd>
         </div>
         <div>
-          <dt>Component function calls / s</dt>
+          <dt>Component executions / s</dt>
           <dd data-testid="component-render-rate">
-            {formatRate(props.metrics.componentRenderCallsPerSecond)}
+            {formatRate(metrics().componentRenderCallsPerSecond)}
           </dd>
         </div>
         <div>
-          <dt>Component function calls by type / s</dt>
+          <dt>Executions by component / s</dt>
           <dd data-testid="component-render-breakdown">
-            {formatInvocationRates(props.metrics.componentRenderRates)}
+            {formatInvocationRates(metrics().componentRenderRates)}
           </dd>
         </div>
         <div>
-          <dt>Cell callbacks by column / s</dt>
+          <dt>Callbacks by column / s</dt>
           <dd data-testid="cell-render-breakdown">
-            {formatInvocationRates(props.metrics.cellRendererRates)}
+            {formatInvocationRates(metrics().cellRendererRates)}
           </dd>
         </div>
         <div>
           <dt>DOM mutation records / s</dt>
           <dd data-testid="dom-mutation-rate">
-            {formatRate(props.metrics.domMutationsPerSecond)}
+            {formatRate(metrics().domMutationsPerSecond)}
           </dd>
         </div>
         <div>
           <dt>Worker messages</dt>
           <dd data-testid="worker-messages">
-            {formatInteger(props.metrics.workerMessages)}
+            {formatInteger(metrics().workerMessages)}
           </dd>
         </div>
         <div>
           <dt>Worker-coalesced updates / s</dt>
           <dd data-testid="superseded-update-rate">
-            {formatRate(props.metrics.supersededUpdatesPerSecond)}
+            {formatRate(metrics().supersededUpdatesPerSecond)}
           </dd>
         </div>
         <div>
-          <dt>Last batch ticks / rows</dt>
+          <dt>Last message samples / updated rows</dt>
           <dd>
-            {formatInteger(props.metrics.lastBatchSize)} /{' '}
-            {formatInteger(props.metrics.lastUpdateCount)}
+            {formatInteger(metrics().lastBatchSize)} /{' '}
+            {formatInteger(metrics().lastUpdateCount)}
           </dd>
         </div>
         <div>
           <dt>Renders &gt; 16.7 ms</dt>
-          <dd>{props.metrics.slowRenders}</dd>
+          <dd>{metrics().slowRenders}</dd>
         </div>
         <div>
           <dt>Long animation frames</dt>
           <dd>
             {longAnimationFramesSupported
-              ? formatInteger(props.metrics.longAnimationFrames)
+              ? formatInteger(metrics().longAnimationFrames)
               : 'Unsupported'}
           </dd>
         </div>
         <div>
           <dt>JS heap</dt>
           <dd>
-            {props.metrics.heapMb === null
+            {metrics().heapMb === null
               ? 'N/A'
-              : `${props.metrics.heapMb.toFixed(1)} MB`}
+              : `${metrics().heapMb?.toFixed(1)} MB`}
           </dd>
         </div>
       </dl>
@@ -549,6 +510,55 @@ function Diagnostics(props: {
   )
 }
 
+function SelectedInstrument() {
+  const feed = useMarketFeedController()
+  const { selectedSymbol } = useTradingShellController().state
+  const selectedQuote = createMemo(() =>
+    feed.getQuoteBySymbol(selectedSymbol()),
+  )
+  return (
+    <section
+      class="config-section selected-instrument"
+      data-testid="selected-instrument"
+    >
+      <h2>SELECTED INSTRUMENT</h2>
+      <Show
+        when={selectedQuote()}
+        fallback={
+          <p>
+            Click or begin a cell selection in any row to inspect its
+            instrument.
+          </p>
+        }
+      >
+        {(quote) => (
+          <>
+            <div class="selection">
+              <div>
+                <strong>{quote().symbol}</strong>
+                <span>{quote().company}</span>
+              </div>
+              <small>{quote().venue}</small>
+            </div>
+            <dl>
+              <div>
+                <dt>Last</dt>
+                <dd>{quote().price.toFixed(2)}</dd>
+              </div>
+              <div>
+                <dt>Bid / ask</dt>
+                <dd>
+                  {quote().bid.toFixed(2)} / {quote().ask.toFixed(2)}
+                </dd>
+              </div>
+            </dl>
+          </>
+        )}
+      </Show>
+    </section>
+  )
+}
+
 function formatInteger(value: number): string {
   return integerFormatter.format(value)
 }
diff --git a/examples/solid/realtime-trading/src/shell/configurator-options.ts b/examples/solid/realtime-trading/src/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/solid/realtime-trading/src/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx b/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
index 06103d7733..906f35e52e 100644
--- a/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
+++ b/examples/solid/realtime-trading/src/shell/trading-shell-context.tsx
@@ -33,7 +33,9 @@ export function TradingShellProvider(props: {
 export function useMarketFeedController(): MarketFeedController {
   const controller = useContext(MarketFeedContext)
   if (!controller) {
-    throw new Error('Market data consumers must be rendered inside MarketFeedProvider')
+    throw new Error(
+      'Market data consumers must be rendered inside MarketFeedProvider',
+    )
   }
   return controller
 }
diff --git a/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx b/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
index 4a2c368d9c..e75f43ee5c 100644
--- a/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
+++ b/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
@@ -1,4 +1,4 @@
-import { onCleanup, onMount } from 'solid-js'
+import { createMemo, onCleanup, onMount } from 'solid-js'
 
 const compactNumber = new Intl.NumberFormat('en-US', {
   notation: 'compact',
@@ -137,11 +137,11 @@ export function PercentChangeCell(props: { value: number }) {
 
 export function SpreadCell(props: { bid: number; ask: number }) {
   trackLifecycle('SpreadCell')
-  const spread = () => Math.max(0, props.ask - props.bid)
-  const basisPoints = () => {
+  const spread = createMemo(() => Math.max(0, props.ask - props.bid))
+  const basisPoints = createMemo(() => {
     const midpoint = (props.bid + props.ask) / 2
     return midpoint === 0 ? 0 : (spread() / midpoint) * 10_000
-  }
+  })
 
   return (
     <span class="spread-cell" classList={{ 'spread-wide': basisPoints() >= 4 }}>
@@ -153,10 +153,10 @@ export function SpreadCell(props: { bid: number; ask: number }) {
 
 export function DepthCell(props: { bidSize: number; askSize: number }) {
   trackLifecycle('DepthCell')
-  const bidShare = () => {
+  const bidShare = createMemo(() => {
     const total = props.bidSize + props.askSize
     return total === 0 ? 50 : (props.bidSize / total) * 100
-  }
+  })
 
   return (
     <div
@@ -192,10 +192,11 @@ export function QuoteAgeCell(props: { ageMs: number }) {
 
 export function SparklineCell(props: { values: ReadonlyArray<number> }) {
   trackLifecycle('SparklineCell')
-  const rising = () => (props.values.at(-1) ?? 0) >= (props.values[0] ?? 0)
-  const points = () => {
-    const min = Math.min(...props.values)
-    const max = Math.max(...props.values)
+  const rising = createMemo(
+    () => (props.values.at(-1) ?? 0) >= (props.values[0] ?? 0),
+  )
+  const points = createMemo(() => {
+    const { min, max } = findRange(props.values)
     const range = max - min || 1
     const denominator = Math.max(1, props.values.length - 1)
     return props.values
@@ -205,7 +206,7 @@ export function SparklineCell(props: { values: ReadonlyArray<number> }) {
         return `${x.toFixed(1)},${y.toFixed(1)}`
       })
       .join(' ')
-  }
+  })
 
   return (
     <svg
@@ -222,3 +223,18 @@ export function SparklineCell(props: { values: ReadonlyArray<number> }) {
 function formatSigned(value: number): string {
   return `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
 }
+
+function findRange(values: ReadonlyArray<number>): {
+  min: number
+  max: number
+} {
+  const first = values[0] ?? 0
+  return values.reduce(
+    (range, value) => {
+      range.min = Math.min(range.min, value)
+      range.max = Math.max(range.max, value)
+      return range
+    },
+    { min: first, max: first },
+  )
+}
diff --git a/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx b/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
index f7c81dbfb5..3811536ead 100644
--- a/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
+++ b/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
@@ -9,6 +9,7 @@ import {
 } from './quote-cells'
 import type { JSX } from 'solid-js'
 import type { MarketQuote } from '../../feed/market-data'
+import type { VirtualScrollMode } from '../trading-row-virtualizer'
 
 export type RendererMode = 'stable' | 'swap'
 
@@ -16,7 +17,9 @@ export interface TradingTableProps {
   quotes: Array<MarketQuote>
   rendererMode: RendererMode
   selectedSymbol: string | null
+  virtualScrollMode: VirtualScrollMode
   onSelectSymbol: (symbol: string) => void
+  onRenderedRowCount: (count: number) => void
 }
 
 interface TradingCellContext {
@@ -46,181 +49,167 @@ export function createTradingColumns(
       header: 'Instrument',
       columns: [
         {
-          id: 'identity',
-          header: 'Identity',
-          columns: [
-            {
-              id: 'market',
-              header: 'Market',
-              size: 72,
-              accessorFn: (row) => row.venue,
-              cell: ({ row }) =>
-                recordCellRender('Market', () => row.original.venue),
-            },
-            {
-              id: 'name',
-              header: 'Name',
-              size: 180,
-              accessorFn: (row) => row.company,
-              cell: ({ row }) =>
-                recordCellRender('Name', () => row.original.company),
-            },
-            {
-              id: 'symbol',
-              header: 'Symbol',
-              size: 92,
-              accessorFn: (row) => row.symbol,
-              cell: ({ row }) =>
-                recordCellRender('Symbol', () => row.original.symbol),
-            },
-          ],
+          id: 'market',
+          header: 'Market',
+          size: 72,
+          accessorFn: (row) => row.venue,
+          cell: ({ row }) =>
+            recordCellRender('Market', () => row.original.venue),
+        },
+        {
+          id: 'name',
+          header: 'Name',
+          size: 180,
+          accessorFn: (row) => row.company,
+          cell: ({ row }) =>
+            recordCellRender('Name', () => row.original.company),
+        },
+        {
+          id: 'symbol',
+          header: 'Symbol',
+          size: 92,
+          accessorFn: (row) => row.symbol,
+          cell: ({ row }) =>
+            recordCellRender('Symbol', () => row.original.symbol),
+        },
+      ],
+    },
+    {
+      id: 'priceAndChange',
+      header: 'Price & Change',
+      columns: [
+        {
+          id: 'price',
+          header: 'Price',
+          size: 96,
+          accessorFn: (row) => row.price,
+          cell: ({ row }) =>
+            recordCellRender('Last', () => {
+              const change = getDayChange(row.original)
+              return (
+                <PriceCell
+                  price={row.original.price}
+                  move={change}
+                  onSelect={() => props.onSelectSymbol(row.original.symbol)}
+                />
+              )
+            }),
+        },
+        {
+          id: 'change',
+          header: 'Chg',
+          size: 94,
+          accessorFn: (row) => getDayChange(row),
+          cell: ({ row }) =>
+            recordCellRender('Change', () => {
+              const move = getDayChange(row.original)
+              if (props.rendererMode === 'stable') {
+                return <StableMoveCell move={move} />
+              }
+              return move >= 0 ? (
+                <UpMoveCell move={move} />
+              ) : (
+                <DownMoveCell move={move} />
+              )
+            }),
+        },
+        {
+          id: 'changePercent',
+          header: 'Chg%',
+          size: 90,
+          accessorFn: (row) => getDayChangePercent(row),
+          cell: ({ row }) =>
+            recordCellRender('ChangePercent', () => (
+              <PercentChangeCell value={getDayChangePercent(row.original)} />
+            )),
+        },
+      ],
+    },
+    {
+      id: 'orderBook',
+      header: 'Order Book',
+      columns: [
+        {
+          id: 'bid',
+          header: 'Bid',
+          size: 90,
+          accessorFn: (row) => row.bid,
+          cell: ({ row }) =>
+            recordCellRender('Bid', () => row.original.bid.toFixed(2)),
+        },
+        {
+          id: 'bidSize',
+          header: 'Bid Vol',
+          size: 100,
+          accessorFn: (row) => row.bidSize,
+          cell: ({ row }) =>
+            recordCellRender('BidVolume', () =>
+              compactFormatter.format(row.original.bidSize),
+            ),
+        },
+        {
+          id: 'ask',
+          header: 'Ask',
+          size: 90,
+          accessorFn: (row) => row.ask,
+          cell: ({ row }) =>
+            recordCellRender('Ask', () => row.original.ask.toFixed(2)),
+        },
+        {
+          id: 'askSize',
+          header: 'Ask Vol',
+          size: 100,
+          accessorFn: (row) => row.askSize,
+          cell: ({ row }) =>
+            recordCellRender('AskVolume', () =>
+              compactFormatter.format(row.original.askSize),
+            ),
         },
       ],
     },
     {
-      id: 'marketData',
-      header: 'Market Data',
+      id: 'session',
+      header: 'Session',
       columns: [
         {
-          id: 'priceAndChange',
-          header: 'Price & Change',
-          columns: [
-            {
-              id: 'price',
-              header: 'Price',
-              size: 96,
-              accessorFn: (row) => row.price,
-              cell: ({ row }) =>
-                recordCellRender('Last', () => {
-                  const change = getDayChange(row.original)
-                  return (
-                    <PriceCell
-                      price={row.original.price}
-                      move={change}
-                      onSelect={() => props.onSelectSymbol(row.original.symbol)}
-                    />
-                  )
-                }),
-            },
-            {
-              id: 'change',
-              header: 'Chg',
-              size: 94,
-              accessorFn: (row) => getDayChange(row),
-              cell: ({ row }) =>
-                recordCellRender('Change', () => {
-                  const move = getDayChange(row.original)
-                  if (props.rendererMode === 'stable') {
-                    return <StableMoveCell move={move} />
-                  }
-                  return move >= 0 ? (
-                    <UpMoveCell move={move} />
-                  ) : (
-                    <DownMoveCell move={move} />
-                  )
-                }),
-            },
-            {
-              id: 'changePercent',
-              header: 'Chg%',
-              size: 90,
-              accessorFn: (row) => getDayChangePercent(row),
-              cell: ({ row }) =>
-                recordCellRender('ChangePercent', () => (
-                  <PercentChangeCell
-                    value={getDayChangePercent(row.original)}
-                  />
-                )),
-            },
-          ],
+          id: 'open',
+          header: 'Open',
+          size: 90,
+          accessorFn: (row) => row.open,
+          cell: ({ row }) =>
+            recordCellRender('Open', () => row.original.open.toFixed(2)),
         },
         {
-          id: 'orderBook',
-          header: 'Order Book',
-          columns: [
-            {
-              id: 'bid',
-              header: 'Bid',
-              size: 90,
-              accessorFn: (row) => row.bid,
-              cell: ({ row }) =>
-                recordCellRender('Bid', () => row.original.bid.toFixed(2)),
-            },
-            {
-              id: 'bidSize',
-              header: 'Bid Vol',
-              size: 100,
-              accessorFn: (row) => row.bidSize,
-              cell: ({ row }) =>
-                recordCellRender('BidVolume', () =>
-                  compactFormatter.format(row.original.bidSize),
-                ),
-            },
-            {
-              id: 'ask',
-              header: 'Ask',
-              size: 90,
-              accessorFn: (row) => row.ask,
-              cell: ({ row }) =>
-                recordCellRender('Ask', () => row.original.ask.toFixed(2)),
-            },
-            {
-              id: 'askSize',
-              header: 'Ask Vol',
-              size: 100,
-              accessorFn: (row) => row.askSize,
-              cell: ({ row }) =>
-                recordCellRender('AskVolume', () =>
-                  compactFormatter.format(row.original.askSize),
-                ),
-            },
-          ],
+          id: 'high',
+          header: 'High',
+          size: 90,
+          accessorFn: (row) => row.high,
+          cell: ({ row }) =>
+            recordCellRender('High', () => row.original.high.toFixed(2)),
         },
         {
-          id: 'session',
-          header: 'Session',
-          columns: [
-            {
-              id: 'open',
-              header: 'Open',
-              size: 90,
-              accessorFn: (row) => row.open,
-              cell: ({ row }) =>
-                recordCellRender('Open', () => row.original.open.toFixed(2)),
-            },
-            {
-              id: 'high',
-              header: 'High',
-              size: 90,
-              accessorFn: (row) => row.high,
-              cell: ({ row }) =>
-                recordCellRender('High', () => row.original.high.toFixed(2)),
-            },
-            {
-              id: 'low',
-              header: 'Low',
-              size: 90,
-              accessorFn: (row) => row.low,
-              cell: ({ row }) =>
-                recordCellRender('Low', () => row.original.low.toFixed(2)),
-            },
-          ],
+          id: 'low',
+          header: 'Low',
+          size: 90,
+          accessorFn: (row) => row.low,
+          cell: ({ row }) =>
+            recordCellRender('Low', () => row.original.low.toFixed(2)),
         },
+      ],
+    },
+    {
+      id: 'chart',
+      header: 'Chart',
+      columns: [
         {
-          id: 'chart',
-          header: 'Chart',
-          columns: [
-            {
-              id: 'history',
-              header: 'Intraday',
-              size: 150,
-              enableSorting: false,
-              cell: ({ row }) =>
-                recordCellRender('Intraday', () => (
-                  <SparklineCell values={row.original.history} />
-                )),
-            },
-          ],
+          id: 'history',
+          header: 'Intraday',
+          size: 150,
+          enableSorting: false,
+          cell: ({ row }) =>
+            recordCellRender('Intraday', () => (
+              <SparklineCell values={row.original.history} />
+            )),
         },
       ],
     },
diff --git a/examples/solid/realtime-trading/src/table/table-interactions.ts b/examples/solid/realtime-trading/src/table/table-interactions.ts
index af4797da46..1df83b2484 100644
--- a/examples/solid/realtime-trading/src/table/table-interactions.ts
+++ b/examples/solid/realtime-trading/src/table/table-interactions.ts
@@ -11,6 +11,30 @@ interface SelectableRow {
   }) => (event: unknown) => void
 }
 
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Record<string, SelectableGridCell>
+}
+
+interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Record<string, SelectableGridRow>
+  }
+}
+
+interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
 interface CellNavigationTable {
   extendCellSelection: (direction: CellDirection) => void
   moveCellSelection: (direction: CellDirection) => void
@@ -61,6 +85,68 @@ export function selectRowFromPointer(
   })
 }
 
+export class TradingGridPointerController {
+  #lastPointerCell: HTMLTableCellElement | null = null
+
+  handleMouseDown(
+    table: TradingGridTable,
+    event: MouseEvent,
+    selectSymbol: (symbol: string) => void,
+  ): void {
+    if (event.button !== 0) return
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+
+    this.#lastPointerCell = target.element
+    selectSymbol(target.cell.row.original.symbol)
+    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+  }
+
+  handlePointerOver(table: TradingGridTable, event: MouseEvent): void {
+    if ((event.buttons & 1) === 0) {
+      this.resetPointerCell()
+      return
+    }
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target || target.element === this.#lastPointerCell) return
+
+    this.#lastPointerCell = target.element
+    target.cell.getSelectionExtendHandler()(event)
+  }
+
+  handleClick(table: TradingGridTable, event: MouseEvent): void {
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+    selectRowFromPointer(table, target.cell.row, event)
+  }
+
+  resetPointerCell(): void {
+    this.#lastPointerCell = null
+  }
+
+  #findCellTarget(
+    table: TradingGridTable,
+    path: Array<EventTarget>,
+  ): SelectionCellTarget | null {
+    for (const target of path) {
+      if (!(target instanceof HTMLTableCellElement)) continue
+
+      const columnId = target.dataset['columnId']
+      const rowId =
+        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+      if (!columnId || !rowId) return null
+
+      const row = table.getRowModel().rowsById[rowId]
+      const cell = row.getAllCellsByColumnId()[columnId]
+      return { element: target, cell }
+    }
+
+    return null
+  }
+}
+
 export function handleCellNavigation(
   table: CellNavigationTable,
   event: KeyboardEvent,
diff --git a/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..d733342a00
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -0,0 +1,14 @@
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-table.tsx b/examples/solid/realtime-trading/src/table/trading-table.tsx
index c706692668..52e3c3a938 100644
--- a/examples/solid/realtime-trading/src/table/trading-table.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table.tsx
@@ -5,15 +5,31 @@ import {
   stockFeatures,
   tableFeatures,
 } from '@tanstack/solid-table'
-import { For, Show, createMemo, onCleanup, onMount } from 'solid-js'
+import { createVirtualizer } from '@tanstack/solid-virtual'
+import {
+  For,
+  Index,
+  Show,
+  createEffect,
+  createMemo,
+  onCleanup,
+  onMount,
+} from 'solid-js'
+import { useMarketFeedController } from '../shell/trading-shell-context'
 import { createTradingColumns } from './table-config/trading-columns'
 import {
+  TradingGridPointerController,
   handleCellNavigation,
   reorderColumnIds,
-  selectRowFromPointer,
   sortAriaValue,
   sortIndicator,
 } from './table-interactions'
+import {
+  TRADING_ROW_HEIGHT,
+  TRADING_ROW_OVERSCAN,
+} from './trading-row-virtualizer'
+import type { VirtualItem } from '@tanstack/solid-virtual'
+import type { Accessor } from 'solid-js'
 import type { TradingTableProps } from './table-config/trading-columns'
 
 const features = tableFeatures({
@@ -28,6 +44,8 @@ export type {
 } from './table-config/trading-columns'
 
 export function TradingTable(props: TradingTableProps) {
+  const feed = useMarketFeedController()
+  const pointerInteractions = new TradingGridPointerController()
   const columns = createTradingColumns(props)
   const dragRuntime: ColumnDragRuntime = {
     columnId: null,
@@ -50,6 +68,7 @@ export function TradingTable(props: TradingTableProps) {
     },
     getRowId: (row) => row.id,
   })
+  type TradingRow = ReturnType<typeof table.getRowModel>['rows'][number]
   const tableStyle = createMemo(() => {
     void table.atoms.columnSizing.get()
     void table.atoms.columnOrder.get()
@@ -62,6 +81,52 @@ export function TradingTable(props: TradingTableProps) {
     }
     return styles
   })
+  const rows = createMemo(() => table.getRowModel().rows)
+  const rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>(
+    {
+      get count() {
+        return rows().length
+      },
+      estimateSize: () => TRADING_ROW_HEIGHT,
+      getScrollElement: () => layoutRuntime.scrollElement,
+      getItemKey: (index) => rows()[index]?.id ?? index,
+      overscan: TRADING_ROW_OVERSCAN,
+      get enabled() {
+        return props.virtualScrollMode === 'tanstack'
+      },
+    },
+  )
+  const virtualRows = rowVirtualizer.getVirtualItems
+  const visibleRange = createMemo(() => {
+    void virtualRows()
+    const rowCount = rows().length
+    const range = rowVirtualizer.range
+    if (
+      props.virtualScrollMode !== 'tanstack' ||
+      rowCount === 0 ||
+      range === null
+    ) {
+      return null
+    }
+
+    const lastRowIndex = rowCount - 1
+    const start = Math.min(range.startIndex, lastRowIndex)
+    return {
+      start,
+      end: Math.min(Math.max(start, range.endIndex), lastRowIndex),
+    }
+  })
+  createEffect(() => {
+    props.quotes
+    feed.completeRender()
+  })
+  createEffect(() => {
+    props.onRenderedRowCount(
+      props.virtualScrollMode === 'tanstack'
+        ? virtualRows().length
+        : rows().length,
+    )
+  })
   onMount(() => {
     const fitAvailableWidth = () => {
       const scrollElement = layoutRuntime.scrollElement
@@ -98,209 +163,268 @@ export function TradingTable(props: TradingTableProps) {
     })
   })
 
-  return (
-    <div
-      ref={(element) => {
-        layoutRuntime.scrollElement = element
-      }}
-      class="table-scroll"
-      data-trading-table
-      tabindex={0}
-      onKeyDown={(event) => handleCellNavigation(table, event)}
+  const renderRow = (
+    row: Accessor<TradingRow>,
+    virtualRow?: Accessor<VirtualItem>,
+  ) => (
+    <tr
+      classList={{ 'virtual-table-row': virtualRow !== undefined }}
+      style={
+        virtualRow
+          ? { transform: `translateY(${virtualRow().start}px)` }
+          : undefined
+      }
+      data-virtual-index={virtualRow?.().index}
+      data-symbol={row().original.symbol}
+      data-row-id={row().original.id}
+      data-symbol-selected={
+        props.selectedSymbol === row().original.symbol ? 'true' : undefined
+      }
+      title={virtualRow ? undefined : row().original.company}
+      aria-selected={row().getIsSelected()}
     >
-      <table
-        class="trading-data-grid"
-        data-testid="trading-table"
-        role="grid"
-        aria-multiselectable="true"
-        style={tableStyle()}
+      <Index each={row().getVisibleCells()}>
+        {(cell) => {
+          const selectionEdges = createMemo(() =>
+            cell().getSelectionEdges(),
+          )
+          return (
+            <td
+              style={{
+                width: `calc(var(--col-${cell().column.id}-size) * 1px)`,
+              }}
+              data-column-id={cell().column.id}
+              data-cell-focused={
+                cell().getIsFocused() ? 'true' : undefined
+              }
+              data-selection-top={selectionEdges().top ? 'true' : undefined}
+              data-selection-right={
+                selectionEdges().right ? 'true' : undefined
+              }
+              data-selection-bottom={
+                selectionEdges().bottom ? 'true' : undefined
+              }
+              data-selection-left={
+                selectionEdges().left ? 'true' : undefined
+              }
+              aria-selected={cell().getIsSelected()}
+              tabindex={cell().getTabIndex()}
+            >
+              <FlexRender cell={cell()} />
+            </td>
+          )
+        }}
+      </Index>
+    </tr>
+  )
+
+  return (
+    <>
+      <div
+        ref={(element) => {
+          layoutRuntime.scrollElement = element
+        }}
+        class="table-scroll"
+        classList={{ 'is-virtualized': props.virtualScrollMode === 'tanstack' }}
+        data-trading-table
+        tabindex={0}
+        onKeyDown={(event) => handleCellNavigation(table, event)}
       >
-        <thead>
-          <For each={table.getHeaderGroups()}>
-            {(headerGroup) => (
-              <tr>
-                <For each={headerGroup.headers}>
-                  {(header) => {
-                    const isLeaf = () => header.subHeaders.length === 0
-                    const sorted = () => header.column.getIsSorted()
-                    return (
-                      <th
-                        colSpan={header.colSpan}
-                        style={{
-                          width: `calc(var(--header-${header.id}-size) * 1px)`,
-                        }}
-                        aria-sort={
-                          isLeaf() ? sortAriaValue(sorted()) : undefined
-                        }
-                        classList={{
-                          'column-group-header': !isLeaf(),
-                          'numeric-header':
-                            isLeaf() && !isIdentityColumn(header.column.id),
-                        }}
-                      >
-                        <Show when={!header.isPlaceholder}>
-                          <Show
-                            when={isLeaf()}
-                            fallback={<FlexRender header={header} />}
-                          >
-                            <div
-                              class="leaf-header-content"
-                              onDragOver={(event) => {
-                                event.preventDefault()
-                                showColumnDropTarget(
-                                  dragRuntime,
-                                  header.column.id,
-                                  event.currentTarget.closest('th'),
-                                )
-                              }}
-                              onDrop={(event) => {
-                                event.preventDefault()
-                                const sourceId =
-                                  event.dataTransfer?.getData('text/plain') ||
-                                  dragRuntime.columnId
-                                if (sourceId) {
-                                  table.setColumnOrder(
-                                    reorderColumnIds(
-                                      table
-                                        .getVisibleLeafColumns()
-                                        .map((column) => column.id),
-                                      sourceId,
-                                      header.column.id,
-                                    ),
-                                  )
-                                }
-                                clearColumnDrag(dragRuntime)
-                              }}
+        <table
+          class="trading-data-grid"
+          classList={{
+            'virtual-table': props.virtualScrollMode === 'tanstack',
+          }}
+          data-testid="trading-table"
+          role="grid"
+          aria-multiselectable="true"
+          style={tableStyle()}
+        >
+          <thead>
+            <For each={table.getHeaderGroups()}>
+              {(headerGroup) => (
+                <tr>
+                  <For each={headerGroup.headers}>
+                    {(header) => {
+                      const isLeaf = () => header.subHeaders.length === 0
+                      const sorted = () => header.column.getIsSorted()
+                      return (
+                        <th
+                          colSpan={header.colSpan}
+                          style={{
+                            width: `calc(var(--header-${header.id}-size) * 1px)`,
+                          }}
+                          aria-sort={
+                            isLeaf() ? sortAriaValue(sorted()) : undefined
+                          }
+                          classList={{
+                            'column-group-header': !isLeaf(),
+                            'numeric-header':
+                              isLeaf() && !isTextColumn(header.column.id),
+                          }}
+                        >
+                          <Show when={!header.isPlaceholder}>
+                            <Show
+                              when={isLeaf()}
+                              fallback={<FlexRender header={header} />}
                             >
-                              <button
-                                type="button"
-                                class="column-drag-handle"
-                                draggable={true}
-                                aria-label={`Move ${header.column.id} column`}
-                                onDragStart={(event) => {
-                                  dragRuntime.columnId = header.column.id
-                                  dragRuntime.sourceElement =
-                                    event.currentTarget.closest('th')
-                                  dragRuntime.sourceElement?.classList.add(
-                                    'is-column-dragging',
-                                  )
-                                  const dataTransfer = event.dataTransfer
-                                  if (!dataTransfer) return
-                                  dataTransfer.effectAllowed = 'move'
-                                  dataTransfer.setData(
-                                    'text/plain',
+                              <div
+                                class="leaf-header-content"
+                                onDragOver={(event) => {
+                                  event.preventDefault()
+                                  showColumnDropTarget(
+                                    dragRuntime,
                                     header.column.id,
+                                    event.currentTarget.closest('th'),
                                   )
                                 }}
-                                onDragEnd={() => {
+                                onDrop={(event) => {
+                                  event.preventDefault()
+                                  const sourceId =
+                                    event.dataTransfer?.getData('text/plain') ||
+                                    dragRuntime.columnId
+                                  if (sourceId) {
+                                    table.setColumnOrder(
+                                      reorderColumnIds(
+                                        table
+                                          .getVisibleLeafColumns()
+                                          .map((column) => column.id),
+                                        sourceId,
+                                        header.column.id,
+                                      ),
+                                    )
+                                  }
                                   clearColumnDrag(dragRuntime)
                                 }}
                               >
-                                ⋮⋮
-                              </button>
-                              <button
-                                type="button"
-                                class="sort-header-button"
-                                classList={{
-                                  'is-sortable': header.column.getCanSort(),
-                                }}
-                                disabled={!header.column.getCanSort()}
-                                onClick={header.column.getToggleSortingHandler()}
-                              >
-                                <span class="header-label">
-                                  <FlexRender header={header} />
-                                </span>
-                                <Show when={header.column.getCanSort()}>
-                                  <span
-                                    class="sort-indicator"
-                                    classList={{ 'is-active': !!sorted() }}
-                                    aria-hidden="true"
-                                  >
-                                    {sortIndicator(sorted())}
+                                <button
+                                  type="button"
+                                  class="column-drag-handle"
+                                  draggable={true}
+                                  aria-label={`Move ${header.column.id} column`}
+                                  onDragStart={(event) => {
+                                    dragRuntime.columnId = header.column.id
+                                    dragRuntime.sourceElement =
+                                      event.currentTarget.closest('th')
+                                    dragRuntime.sourceElement?.classList.add(
+                                      'is-column-dragging',
+                                    )
+                                    const dataTransfer = event.dataTransfer
+                                    if (!dataTransfer) return
+                                    dataTransfer.effectAllowed = 'move'
+                                    dataTransfer.setData(
+                                      'text/plain',
+                                      header.column.id,
+                                    )
+                                  }}
+                                  onDragEnd={() => {
+                                    clearColumnDrag(dragRuntime)
+                                  }}
+                                >
+                                  ⋮⋮
+                                </button>
+                                <button
+                                  type="button"
+                                  class="sort-header-button"
+                                  classList={{
+                                    'is-sortable': header.column.getCanSort(),
+                                  }}
+                                  disabled={!header.column.getCanSort()}
+                                  onClick={header.column.getToggleSortingHandler()}
+                                >
+                                  <span class="header-label">
+                                    <FlexRender header={header} />
                                   </span>
-                                </Show>
-                              </button>
-                            </div>
-                            <Show when={header.column.getCanResize()}>
-                              <div
-                                class="column-resize-handle"
-                                classList={{
-                                  'is-resizing': header.column.getIsResizing(),
-                                }}
-                                role="separator"
-                                aria-orientation="vertical"
-                                onDblClick={() => header.column.resetSize()}
-                                onMouseDown={header.getResizeHandler()}
-                                onTouchStart={header.getResizeHandler()}
-                              />
+                                  <Show when={header.column.getCanSort()}>
+                                    <span
+                                      class="sort-indicator"
+                                      classList={{ 'is-active': !!sorted() }}
+                                      aria-hidden="true"
+                                    >
+                                      {sortIndicator(sorted())}
+                                    </span>
+                                  </Show>
+                                </button>
+                              </div>
+                              <Show when={header.column.getCanResize()}>
+                                <div
+                                  class="column-resize-handle"
+                                  classList={{
+                                    'is-resizing':
+                                      header.column.getIsResizing(),
+                                  }}
+                                  role="separator"
+                                  aria-orientation="vertical"
+                                  onDblClick={() => header.column.resetSize()}
+                                  onMouseDown={header.getResizeHandler()}
+                                  onTouchStart={header.getResizeHandler()}
+                                />
+                              </Show>
                             </Show>
                           </Show>
-                        </Show>
-                      </th>
-                    )
-                  }}
-                </For>
-              </tr>
-            )}
-          </For>
-        </thead>
-        <tbody>
-          <For each={table.getRowModel().rows}>
-            {(row) => (
-              <tr
-                data-symbol={row.original.symbol}
-                data-row-id={row.original.id}
-                data-symbol-selected={
-                  props.selectedSymbol === row.original.symbol
-                    ? 'true'
-                    : undefined
-                }
-                title={row.original.company}
-                aria-selected={row.getIsSelected()}
-                onMouseDown={(event) => {
-                  if (event.button === 0) {
-                    props.onSelectSymbol(row.original.symbol)
-                  }
+                        </th>
+                      )
+                    }}
+                  </For>
+                </tr>
+              )}
+            </For>
+          </thead>
+          <tbody
+            classList={{
+              'virtual-table-body': props.virtualScrollMode === 'tanstack',
+            }}
+            style={
+              props.virtualScrollMode === 'tanstack'
+                ? { height: `${rows().length * TRADING_ROW_HEIGHT}px` }
+                : undefined
+            }
+            onMouseDown={(event) =>
+              pointerInteractions.handleMouseDown(
+                table,
+                event,
+                props.onSelectSymbol,
+              )
+            }
+            onPointerOver={(event) =>
+              pointerInteractions.handlePointerOver(table, event)
+            }
+            onMouseLeave={() => pointerInteractions.resetPointerCell()}
+            onClick={(event) =>
+              pointerInteractions.handleClick(table, event)
+            }
+          >
+            <Show
+              when={props.virtualScrollMode === 'tanstack'}
+              fallback={<Index each={rows()}>{(row) => renderRow(row)}</Index>}
+            >
+              <Index each={virtualRows()}>
+                {(virtualRow) => {
+                  const row = createMemo(() => rows()[virtualRow().index])
+                  return renderRow(row, virtualRow)
                 }}
-                onClick={(event) => selectRowFromPointer(table, row, event)}
-              >
-                <For each={row.getVisibleCells()}>
-                  {(cell) => (
-                    <td
-                      style={{
-                        width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
-                      }}
-                      data-column-id={cell.column.id}
-                      data-cell-focused={
-                        cell.getIsFocused() ? 'true' : undefined
-                      }
-                      data-selection-top={
-                        cell.getSelectionEdges().top ? 'true' : undefined
-                      }
-                      data-selection-right={
-                        cell.getSelectionEdges().right ? 'true' : undefined
-                      }
-                      data-selection-bottom={
-                        cell.getSelectionEdges().bottom ? 'true' : undefined
-                      }
-                      data-selection-left={
-                        cell.getSelectionEdges().left ? 'true' : undefined
-                      }
-                      aria-selected={cell.getIsSelected()}
-                      tabindex={cell.getTabIndex()}
-                      onMouseDown={cell.getSelectionStartHandler()}
-                      onMouseEnter={cell.getSelectionExtendHandler()}
-                    >
-                      <FlexRender cell={cell} />
-                    </td>
-                  )}
-                </For>
-              </tr>
-            )}
-          </For>
-        </tbody>
-      </table>
-    </div>
+              </Index>
+            </Show>
+          </tbody>
+        </table>
+      </div>
+      <Show when={props.virtualScrollMode === 'tanstack'}>
+        <footer
+          class="virtual-scroll-footer"
+          data-testid="virtual-scroll-footer"
+        >
+          <span>
+            TanStack · Total · {rows().length} rows ·{' '}
+            {table.getVisibleLeafColumns().length} columns
+          </span>
+          <span data-testid="visible-row-range">
+            <Show when={visibleRange()} fallback={'Current · rows —'}>
+              {(range) => `Current · rows ${range().start}..${range().end}`}
+            </Show>
+          </span>
+        </footer>
+      </Show>
+    </>
   )
 }
 
@@ -335,6 +459,6 @@ function showColumnDropTarget(
   runtime.targetElement = targetElement
 }
 
-function isIdentityColumn(columnId: string): boolean {
+function isTextColumn(columnId: string): boolean {
   return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
 }
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
index 098e8b95ea..4d60a32a8d 100644
--- a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -22,9 +22,64 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
     await page.goto(server.url)
 
     const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
     await expect(table).toBeVisible()
-    await expect(table.locator('tbody tr')).toHaveCount(250)
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
     await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
     await expect(table.locator('thead')).toContainText('Market')
     await expect(table.locator('thead')).toContainText('Bid Vol')
     await expect(table.locator('thead')).toContainText('Intraday')
@@ -35,24 +90,32 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
       selectedSymbol ?? '',
     )
     await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
-    const instrumentCount = page.getByTestId('instrument-count-select')
     await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
     await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
     await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
 
-    const loadProfile = page.getByTestId('load-profile-select')
-    await expect(loadProfile).toHaveValue('high')
-    await loadProfile.selectOption('very-high')
-    await expect(page.getByTestId('target-rate-slider')).toHaveValue('25000')
-    await loadProfile.selectOption('high')
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
 
     const sparklineInterval = page.getByTestId(
       'sparkline-sample-interval-select',
     )
-    await expect(sparklineInterval).toHaveValue('250')
-    await sparklineInterval.selectOption('500')
-    await expect(sparklineInterval).toHaveValue('500')
-    await sparklineInterval.selectOption('250')
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
 
     const publishInterval = page.getByTestId('publish-interval-select')
     await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
diff --git a/examples/svelte/realtime-trading/.gitignore b/examples/svelte/realtime-trading/.gitignore
new file mode 100644
index 0000000000..a2ae9ce43f
--- /dev/null
+++ b/examples/svelte/realtime-trading/.gitignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+.svelte-kit
+
diff --git a/examples/svelte/realtime-trading/README.md b/examples/svelte/realtime-trading/README.md
new file mode 100644
index 0000000000..736f6c5d82
--- /dev/null
+++ b/examples/svelte/realtime-trading/README.md
@@ -0,0 +1,16 @@
+# Svelte realtime trading benchmark
+
+This standalone example applies the shared realtime-trading workload to the
+TanStack Svelte Table adapter. It includes the immutable worker feed, sortable
+headers, column resizing and drag ordering, delegated row and cell selection,
+dynamic quote components, and Full DOM or TanStack Virtual row rendering.
+
+It starts with 100 instruments. Full DOM and TanStack Virtual are selectable
+below 250 instruments; virtualization is enabled and locked at 250 or more.
+
+```bash
+pnpm --dir examples/svelte/realtime-trading dev
+pnpm --dir examples/svelte/realtime-trading test:types
+pnpm --dir examples/svelte/realtime-trading lint
+pnpm --dir examples/svelte/realtime-trading build
+```
diff --git a/examples/svelte/realtime-trading/index.html b/examples/svelte/realtime-trading/index.html
new file mode 100644
index 0000000000..a45ca3d04d
--- /dev/null
+++ b/examples/svelte/realtime-trading/index.html
@@ -0,0 +1,3 @@
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+
diff --git a/examples/svelte/realtime-trading/package.json b/examples/svelte/realtime-trading/package.json
new file mode 100644
index 0000000000..92fd0558a1
--- /dev/null
+++ b/examples/svelte/realtime-trading/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "tanstack-svelte-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "dependencies": {
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/svelte-store": "^0.12.0",
+    "@tanstack/svelte-table": "9.1.2",
+    "@tanstack/svelte-virtual": "^3.13.35",
+    "svelte": "^5.56.8"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "@tsconfig/svelte": "^5.0.8",
+    "svelte-check": "^4.7.4",
+    "typescript": "6.0.3",
+    "vite": "^8.2.0"
+  }
+}
diff --git a/examples/svelte/realtime-trading/src/App.svelte b/examples/svelte/realtime-trading/src/App.svelte
new file mode 100644
index 0000000000..2464cea6b1
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/App.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { TradingBenchmarkController } from './benchmark/trading-benchmark-controller'
+  import { MarketFeedController } from './feed/market-feed-controller'
+  import TradingShell from './shell/TradingShell.svelte'
+  import { provideTradingControllers } from './shell/trading-shell-context'
+  import TradingTable from './table/TradingTable.svelte'
+
+  const feed = new MarketFeedController()
+  const benchmark = new TradingBenchmarkController(feed)
+  provideTradingControllers(benchmark)
+
+  onMount(() => {
+    const stopFeed = feed.start()
+    const stopBenchmark = benchmark.start()
+    return () => { stopBenchmark(); stopFeed() }
+  })
+</script>
+
+<TradingShell><TradingTable /></TradingShell>
diff --git a/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..9eea493fec
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -0,0 +1,368 @@
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells'
+import { rowModelDiagnostics } from '../table/trading-table'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+  rowModelCallsPerSecond: number
+  rowModelAverageMs: number
+  rowModelMaxMs: number
+  visibleRows: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+  rowModelCallsPerSecond: 0,
+  rowModelAverageMs: 0,
+  rowModelMaxMs: 0,
+  visibleRows: 0,
+}
+
+const userTiming = { entryCount: 0 }
+
+export function recordMeasure(
+  name: string,
+  start: number,
+  end: number,
+  detail: Record<string, unknown>,
+): void {
+  try {
+    performance.measure(name, { start, end, detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('market-update-to-layout-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
+export function markBenchmarkAction(
+  name: string,
+  detail: Record<string, unknown> = {},
+): void {
+  try {
+    performance.mark(`benchmark:${name}`, { detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMarks()
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    renderSamples: [] as Array<number>,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+    previousRowModelCalls: 0,
+    previousRowModelDuration: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  recordCompletedRender(): void {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      const renderEndedAt = performance.now()
+      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      recordMeasure(
+        'market-update-to-layout-commit',
+        runtime.pendingRenderStartedAt,
+        renderEndedAt,
+        {},
+      )
+      runtime.pendingRenderStartedAt = null
+      runtime.tableRendersInSample++
+    }
+  }
+
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = tickCount
+    runtime.lastUpdateCount = updateCount
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const renderSamples = runtime.renderSamples
+    const sortedRenderSamples = [...renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const rowModelCalls =
+      rowModelDiagnostics.calls - runtime.previousRowModelCalls
+    const rowModelDuration =
+      rowModelDiagnostics.totalDurationMs - runtime.previousRowModelDuration
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const averageRenderMs =
+      renderSamples.length === 0
+        ? 0
+        : renderSamples.reduce((sum, value) => sum + value, 0) /
+          renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualTicksPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+      rowModelCallsPerSecond: (rowModelCalls / sampleDuration) * 1_000,
+      rowModelAverageMs:
+        rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
+      rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
+      visibleRows: rowModelDiagnostics.lastRowCount,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.renderSamples = []
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    rowModelDiagnostics.maxDurationMs = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/svelte/realtime-trading/src/benchmark/table-benchmark.ts b/examples/svelte/realtime-trading/src/benchmark/table-benchmark.ts
new file mode 100644
index 0000000000..7115e9e7bb
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/benchmark/table-benchmark.ts
@@ -0,0 +1,22 @@
+import type { TradingBenchmarkController } from './trading-benchmark-controller'
+
+export function startTableBenchmark(
+  controller: TradingBenchmarkController,
+): () => void {
+  const tableBody = document.querySelector(
+    '.market-panel [data-trading-table] tbody',
+  )
+  if (!tableBody) return () => undefined
+
+  controller.monitor.resetDomMutations()
+  const observer = new MutationObserver((records) => {
+    controller.monitor.recordDomMutations(records.length)
+  })
+  observer.observe(tableBody, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  })
+  return () => observer.disconnect()
+}
diff --git a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..316bb530e6
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,152 @@
+import { batch, createAtom, createStore } from '@tanstack/store'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from './benchmark-monitor'
+import type { FeedMetrics } from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+
+export interface TradingBenchmarkState {
+  requestedVirtualScrollMode: VirtualScrollMode
+  metrics: FeedMetrics
+  mountedCells: number
+  liveComponents: number
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  resetViewState: () => void
+  setRendererMode: (mode: RendererMode) => void
+  setVirtualScrollEnabled: (enabled: boolean) => void
+  setRenderedRowCount: (count: number) => void
+  selectSymbol: (symbol: string | null) => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  requestedVirtualScrollMode: 'none',
+  metrics: initialMetrics,
+  mountedCells: 0,
+  liveComponents: 0,
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly feed: MarketFeedController
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    stopObservingFeed: null as (() => void) | null,
+  }
+
+  constructor(feed: MarketFeedController) {
+    this.feed = feed
+    this.actions = {
+      resetViewState: () => {
+        this.renderAtoms.selectedSymbol.set(null)
+      },
+      setRendererMode: (mode) => {
+        this.renderAtoms.rendererMode.set(mode)
+      },
+      setVirtualScrollEnabled: (enabled) => {
+        if (
+          this.feed.store.get().instrumentCount >=
+          FORCED_VIRTUALIZATION_ROW_COUNT
+        ) {
+          return
+        }
+        this.#patch({
+          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
+        })
+      },
+      setRenderedRowCount: (count) => {
+        const mountedCells = count * TRADING_COLUMN_COUNT
+        if (mountedCells !== this.store.get().mountedCells) {
+          this.#patch({ mountedCells })
+        }
+      },
+      selectSymbol: (symbol) => {
+        this.renderAtoms.selectedSymbol.set(symbol)
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.store.setState((state) => ({
+            ...state,
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.feed.actions.reset()
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    this.#runtime.stopObservingFeed = this.feed.observe({
+      messageReceived: () => this.monitor.recordWorkerMessage(),
+      mutationStarted: () => this.monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+      renderCommitted: () => this.monitor.recordCompletedRender(),
+    })
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.stopObservingFeed?.()
+    this.#runtime.longAnimationFrameObserver = null
+    this.#runtime.stopObservingFeed = null
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    if (this.monitor.shouldPublish(now)) {
+      this.#publishMetrics(this.monitor.publish(now))
+    }
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    this.#patch({
+      metrics,
+      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+}
diff --git a/examples/svelte/realtime-trading/src/feed/feed-sample-rates.ts b/examples/svelte/realtime-trading/src/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/svelte/realtime-trading/src/feed/market-data.ts b/examples/svelte/realtime-trading/src/feed/market-data.ts
new file mode 100644
index 0000000000..6231865d3f
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './worker/market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/svelte/realtime-trading/src/feed/market-feed-config.ts b/examples/svelte/realtime-trading/src/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/svelte/realtime-trading/src/feed/market-feed-controller.ts b/examples/svelte/realtime-trading/src/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..73716811be
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/market-feed-controller.ts
@@ -0,0 +1,240 @@
+import { batch, createStore } from '@tanstack/store'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedState {
+  workerReady: boolean
+  running: boolean
+  instrumentCount: number
+  targetTicksPerSecond: number
+  publishIntervalMs: number
+  updateSparklines: boolean
+  sparklineSampleIntervalMs: number
+  quotes: Array<MarketQuote>
+}
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export interface MarketFeedActions {
+  toggle: () => void
+  setInstrumentCount: (count: number) => void
+  setTargetRate: (rate: number) => void
+  setPublishInterval: (intervalMs: number) => void
+  setSparklineUpdates: (enabled: boolean) => void
+  setSparklineSampleInterval: (intervalMs: number) => void
+  runBurst: () => void
+  reset: () => void
+}
+
+const initialState: MarketFeedState = {
+  workerReady: false,
+  running: true,
+  instrumentCount: initialMarketFeedConfig.instrumentCount,
+  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  quotes: [],
+}
+
+export class MarketFeedController {
+  readonly store = createStore<MarketFeedState>(initialState)
+  readonly actions: MarketFeedActions
+  readonly #observers = new Set<MarketFeedObserver>()
+  readonly #runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+    quoteIndexBySymbol: new Map<string, number>(),
+  }
+
+  constructor() {
+    this.actions = {
+      toggle: () => {
+        const running = !this.store.get().running
+        this.#patch({ running })
+        this.#post({ type: 'set-running', running })
+      },
+      setInstrumentCount: (count) => {
+        this.#patch({ instrumentCount: count })
+        this.#resetWorker(count)
+      },
+      setTargetRate: (rate) => {
+        const sampleRate = normalizeFeedSampleRate(rate)
+        this.#patch({
+          targetTicksPerSecond: sampleRate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
+      },
+      setPublishInterval: (publishIntervalMs) => {
+        this.#patch({ publishIntervalMs })
+        this.#post({
+          type: 'set-publish-interval',
+          intervalMs: publishIntervalMs,
+        })
+      },
+      setSparklineUpdates: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#post({ type: 'set-sparklines', enabled })
+      },
+      setSparklineSampleInterval: (intervalMs) => {
+        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.#post({ type: 'set-sparkline-interval', intervalMs })
+      },
+      runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
+      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.#runtime.worker = worker
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    const state = this.store.get()
+    this.#post({
+      type: 'start',
+      rowCount: state.instrumentCount,
+      running: state.running,
+      ticksPerSecond: state.targetTicksPerSecond,
+      publishIntervalMs: state.publishIntervalMs,
+      updateSparklines: state.updateSparklines,
+      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+    })
+    return () => this.stop()
+  }
+
+  stop(): void {
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#observers.clear()
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  getQuoteBySymbol(
+    quotes: Array<MarketQuote>,
+    symbol: string | null,
+  ): MarketQuote | null {
+    if (symbol === null) return null
+
+    const index = this.#runtime.quoteIndexBySymbol.get(symbol)
+    return index === undefined ? null : (quotes[index] ?? null)
+  }
+
+  completeRender(): void {
+    if (!this.#runtime.renderPending) return
+
+    this.#runtime.renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#post({ type: 'set-running', running: this.store.get().running })
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#runtime.feedSessionId = data.sessionId
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.#startMutation()
+      const quotes = hydrateMarketQuotes(data.quotes)
+      this.#runtime.quoteIndexBySymbol = new Map(
+        quotes.map((quote, index) => [quote.symbol, index]),
+      )
+      batch(() => {
+        this.#patch({
+          quotes,
+          workerReady: true,
+        })
+      })
+      return
+    }
+
+    if (data.sessionId !== this.#runtime.feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.#patch({
+      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
+    })
+    const feedBatch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(feedBatch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorker(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#post({ type: 'set-running', running: false })
+    this.#post({ type: 'reset', rowCount })
+  }
+
+  #startMutation(): void {
+    this.#runtime.renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #patch(patch: Partial<MarketFeedState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#runtime.worker?.postMessage(command)
+  }
+}
diff --git a/examples/svelte/realtime-trading/src/feed/sp500-instruments.ts b/examples/svelte/realtime-trading/src/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/svelte/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/svelte/realtime-trading/src/feed/worker/market-feed-engine.ts
new file mode 100644
index 0000000000..557f7c30a8
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -0,0 +1,177 @@
+import { globalInstruments } from '../sp500-instruments'
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #tickIndex = 0
+
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue: market,
+        previousClose,
+        open,
+        high: open,
+        low: open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: createdAt,
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
+    this.#rowCursor = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyTicks(
+    tickCount: number,
+    updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#tickIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
+    const secondMix =
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/svelte/realtime-trading/src/feed/worker/market-feed-protocol.ts b/examples/svelte/realtime-trading/src/feed/worker/market-feed-protocol.ts
new file mode 100644
index 0000000000..21997ec89c
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/worker/market-feed-protocol.ts
@@ -0,0 +1,70 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  previousClose: number
+  open: number
+  high: number
+  low: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  high: number
+  low: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'start'
+      rowCount: number
+      running: boolean
+      ticksPerSecond: number
+      publishIntervalMs: number
+      updateSparklines: boolean
+      sparklineSampleIntervalMs: number
+    }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'snapshot'
+      sessionId: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/svelte/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/svelte/realtime-trading/src/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..2b7a642fd9
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -0,0 +1,143 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/svelte/realtime-trading/src/index.css b/examples/svelte/realtime-trading/src/index.css
new file mode 100644
index 0000000000..20264402de
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/index.css
@@ -0,0 +1,1048 @@
+:root {
+  color-scheme: dark;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
+  font-synthesis: none;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: var(--control-hover);
+  border-color: var(--border-strong);
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
+}
+
+.app-bar {
+  display: flex;
+  min-height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.header-actions,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: var(--muted);
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--muted);
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  grid-area: content;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.12rem 0 0.08rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
+}
+
+td {
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
+  overflow: hidden;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
+}
+
+td[data-column-id='market'] {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+td[data-column-id='name'] {
+  color: var(--text-strong);
+}
+
+td[data-column-id='symbol'] {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(even) {
+  background: var(--row-alt);
+}
+
+tbody tr:hover {
+  background: var(--panel-hover);
+}
+
+tbody tr[data-symbol-selected='true'] {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr[aria-selected='true'] {
+  background: rgb(76 145 228 / 13%);
+}
+
+td[aria-selected='true'] {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td[data-cell-focused='true'] {
+  background: rgb(70 139 222 / 21%);
+}
+
+td[aria-selected='true']::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td[data-selection-top='true']::after {
+  border-top-color: var(--blue);
+}
+
+td[data-selection-right='true']::after {
+  border-right-color: var(--blue);
+}
+
+td[data-selection-bottom='true']::after {
+  border-bottom-color: var(--blue);
+}
+
+td[data-selection-left='true']::after {
+  border-left-color: var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: var(--text);
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: var(--surface-control);
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.78;
+}
+
+.depth-bid {
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
+}
+
+.depth-ask {
+  background: var(--depth-ask);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: var(--text-strong);
+  font-size: 0.57rem;
+  text-shadow: 0 1px var(--background);
+}
+
+.quote-age {
+  color: var(--muted);
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 100%;
+  height: 1.35rem;
+  margin-left: auto;
+  color: var(--blue-soft);
+  overflow: visible;
+}
+
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: var(--surface-bar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  grid-area: footer;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
+.configurator {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.configurator > header {
+  display: flex;
+  height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  color: var(--text-strong);
+  background: var(--surface-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem var(--shell-inline-padding);
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
+}
+
+.primary-action:hover {
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text);
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.field small {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: var(--text);
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: var(--muted);
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  :root {
+    --sidebar-width: 15.625rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .trading-terminal {
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .market-panel {
+    min-height: 0;
+  }
+
+  .table-scroll {
+    min-height: 0;
+  }
+
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
+  }
+
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
+  }
+}
diff --git a/examples/svelte/realtime-trading/src/main.ts b/examples/svelte/realtime-trading/src/main.ts
new file mode 100644
index 0000000000..acece3d643
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/main.ts
@@ -0,0 +1,5 @@
+import { mount } from 'svelte'
+import App from './App.svelte'
+import './index.css'
+
+mount(App, { target: document.getElementById('app')! })
diff --git a/examples/svelte/realtime-trading/src/shell/AppHeader.svelte b/examples/svelte/realtime-trading/src/shell/AppHeader.svelte
new file mode 100644
index 0000000000..559afc6434
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/AppHeader.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { useSelector } from '@tanstack/svelte-store'
+  import { useMarketFeedController } from './trading-shell-context'
+  const { sidebarOpen, onSidebarToggle }: { sidebarOpen: boolean; onSidebarToggle: () => void } = $props()
+  const state = useSelector(useMarketFeedController().store, ({ workerReady, running }) => ({ workerReady, running }))
+</script>
+
+<header class="app-bar">
+  <div class="brand"><strong>MARKET MONITOR</strong></div>
+  <div class="header-actions">
+    <span class:is-running={state.current.workerReady && state.current.running} class="feed-status" data-testid="feed-status"><span class="status-dot" aria-hidden="true"></span>{!state.current.workerReady ? 'FEED CONNECTING' : state.current.running ? 'FEED LIVE' : 'FEED PAUSED'}</span>
+    <button class="sidebar-toggle" type="button" aria-expanded={sidebarOpen} aria-controls="benchmark-configurator" aria-label={sidebarOpen ? 'Close configurator' : 'Open configurator'} onclick={onSidebarToggle}>
+      <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect><path d="M12.5 3v14"></path></svg>
+    </button>
+  </div>
+</header>
diff --git a/examples/svelte/realtime-trading/src/shell/Configurator.svelte b/examples/svelte/realtime-trading/src/shell/Configurator.svelte
new file mode 100644
index 0000000000..10ff0822b9
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/Configurator.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { useSelector } from '@tanstack/svelte-store'
+  import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from '../feed/feed-sample-rates'
+  import { FORCED_VIRTUALIZATION_ROW_COUNT, resolveVirtualScrollMode } from '../table/trading-row-virtualizer'
+  import { configuratorOptions } from './configurator-options'
+  import { useMarketFeedController, useTradingShellController } from './trading-shell-context'
+  import Diagnostics from './Diagnostics.svelte'
+  import SelectedInstrument from './SelectedInstrument.svelte'
+
+  const controller = useTradingShellController()
+  const feed = useMarketFeedController()
+  const feedState = useSelector(feed.store)
+  const benchmarkState = useSelector(controller.store)
+  const rendererMode = useSelector(controller.renderAtoms.rendererMode)
+  const virtualScrollForced = $derived(feedState.current.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT)
+  const virtualScrollMode = $derived(resolveVirtualScrollMode(benchmarkState.current.requestedVirtualScrollMode, feedState.current.instrumentCount))
+  const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+  const numberValue = (event: Event) => Number((event.target as HTMLInputElement | HTMLSelectElement).value)
+  const stringValue = (event: Event) => (event.target as HTMLInputElement | HTMLSelectElement).value
+  const checkedValue = (event: Event) => (event.target as HTMLInputElement).checked
+</script>
+
+<aside id="benchmark-configurator" class="configurator" aria-label="Benchmark configurator">
+  <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+  <section class="config-section" aria-labelledby="feed-settings"><h2 id="feed-settings">FEED</h2>
+    <button class="primary-action" type="button" data-testid="feed-toggle" onclick={feed.actions.toggle}>{feedState.current.running ? 'PAUSE FEED' : 'START FEED'}</button>
+    <label class="field"><span>Instruments (rows)</span><select data-testid="instrument-count-select" value={feedState.current.instrumentCount} onchange={(event) => { controller.actions.resetViewState(); feed.actions.setInstrumentCount(numberValue(event)) }}>{#each configuratorOptions.instrumentCounts as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select></label>
+    <label class="field rate-field"><span>Synthetic quote workload <strong data-testid="target-sample-rate">{rate.format(feedState.current.targetTicksPerSecond)} samples/s</strong></span><input data-testid="target-rate-slider" type="range" min="0" max={feedSampleRateOptions.length - 1} step="1" value={feedSampleRateIndex(feedState.current.targetTicksPerSecond)} onchange={(event) => feed.actions.setTargetRate(feedSampleRateAt(numberValue(event)))} /><small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small></label>
+    <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" value={feedState.current.publishIntervalMs} onchange={(event) => feed.actions.setPublishInterval(numberValue(event))}>{#each configuratorOptions.workerDeliveryIntervals as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select><small>One coalesced worker message at this target cadence.</small></label>
+  </section>
+  <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
+    <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" value={virtualScrollMode} disabled={virtualScrollForced} onchange={(event) => controller.actions.setVirtualScrollEnabled(stringValue(event) === 'tanstack')}>{#each configuratorOptions.rowRenderingModes as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select><small>{virtualScrollForced ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'}</small></label>
+    <label class="toggle-field"><input type="checkbox" checked={rendererMode.current === 'swap'} onchange={(event) => controller.actions.setRendererMode(checkedValue(event) ? 'swap' : 'stable')} /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
+    <label class="toggle-field"><input type="checkbox" checked={feedState.current.updateSparklines} onchange={(event) => feed.actions.setSparklineUpdates(checkedValue(event))} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
+    <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" value={feedState.current.sparklineSampleIntervalMs} onchange={(event) => feed.actions.setSparklineSampleInterval(numberValue(event))}>{#each configuratorOptions.intradaySamplingIntervals as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select></label>
+  </section>
+  <section class="config-section" aria-labelledby="stress-actions"><h2 id="stress-actions">STRESS ACTIONS</h2>
+    <div class="action-grid"><button type="button" onclick={feed.actions.runBurst}>RUN 25K BURST</button><button type="button" onclick={controller.actions.resetMarket}>RESET SESSION</button></div>
+  </section>
+  <Diagnostics /><SelectedInstrument />
+</aside>
diff --git a/examples/svelte/realtime-trading/src/shell/Diagnostics.svelte b/examples/svelte/realtime-trading/src/shell/Diagnostics.svelte
new file mode 100644
index 0000000000..dcfe131286
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/Diagnostics.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { useSelector } from '@tanstack/svelte-store'
+  import { useTradingShellController } from './trading-shell-context'
+  import type { NamedInvocationRate } from '../benchmark/benchmark-monitor'
+
+  const state = useSelector(useTradingShellController().store)
+  const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+  const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+  const ms = (value: number) => `${value.toFixed(2)} ms`
+  const invocationRates = (values: ReadonlyArray<NamedInvocationRate>) => {
+    const active = values.filter((entry) => entry.callsPerSecond > 0)
+    return active.length === 0 ? '—' : active.map((entry) => `${entry.name} ${rate.format(entry.callsPerSecond)}`).join(' · ')
+  }
+  const metrics = $derived(state.current.metrics)
+  const items = $derived([
+    ['Mounted cells', integer.format(state.current.mountedCells)],
+    ['Live components', integer.format(state.current.liveComponents)],
+    ['Created / destroyed', `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`],
+    ['Renderer callbacks / s', rate.format(metrics.cellRendererCallsPerSecond), 'cell-render-rate'],
+    ['Component executions / s', rate.format(metrics.componentRenderCallsPerSecond), 'component-render-rate'],
+    ['Executions by component / s', invocationRates(metrics.componentRenderRates), 'component-render-breakdown'],
+    ['Callbacks by column / s', invocationRates(metrics.cellRendererRates), 'cell-render-breakdown'],
+    ['DOM mutation records / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'],
+    ['Core row model calls / s', metrics.rowModelCallsPerSecond.toFixed(1), 'row-model-call-rate'],
+    ['Core row model avg / max', `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, 'row-model-duration'],
+    ['Visible rows', integer.format(metrics.visibleRows), 'visible-row-count'],
+    ['Worker messages', integer.format(metrics.workerMessages), 'worker-messages'],
+    ['Worker-coalesced updates / s', rate.format(metrics.supersededUpdatesPerSecond), 'superseded-update-rate'],
+    ['Last samples / updated rows', `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`],
+    ['Renders > 16.7 ms', integer.format(metrics.slowRenders)],
+    ['JS heap', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`],
+  ] as const)
+</script>
+
+<section class="config-section diagnostics" aria-labelledby="diagnostics"><h2 id="diagnostics">DIAGNOSTICS</h2><dl>
+  {#each items as item (item[0])}<div><dt>{item[0]}</dt><dd data-testid={item[2]}>{item[1]}</dd></div>{/each}
+</dl></section>
diff --git a/examples/svelte/realtime-trading/src/shell/MarketStatusbar.svelte b/examples/svelte/realtime-trading/src/shell/MarketStatusbar.svelte
new file mode 100644
index 0000000000..01cbf5e1b6
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/MarketStatusbar.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { useSelector } from '@tanstack/svelte-store'
+  import { useTradingShellController } from './trading-shell-context'
+  const state = useSelector(useTradingShellController().store)
+  const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+</script>
+
+<footer class="market-statusbar">
+  <span>MESSAGE SAMPLES <strong>{integer.format(state.current.metrics.lastBatchSize)}</strong></span>
+  <span>ROW UPDATES <strong>{integer.format(state.current.metrics.lastUpdateCount)}</strong></span>
+  <span>HOSTS <strong>{integer.format(state.current.mountedCells)}</strong></span>
+  <span>COMPONENTS <strong>{integer.format(state.current.liveComponents)}</strong></span>
+</footer>
diff --git a/examples/svelte/realtime-trading/src/shell/MetricsStrip.svelte b/examples/svelte/realtime-trading/src/shell/MetricsStrip.svelte
new file mode 100644
index 0000000000..822bd621a9
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/MetricsStrip.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { useSelector } from '@tanstack/svelte-store'
+  import { useTradingShellController } from './trading-shell-context'
+  const state = useSelector(useTradingShellController().store, ({ metrics, longAnimationFramesSupported }) => ({ metrics, longAnimationFramesSupported }))
+  const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+  const formatMs = (value: number) => `${value.toFixed(2)} ms`
+  const metrics = $derived(state.current.metrics)
+  const items = $derived([
+    { label: 'WORKER SAMPLES', value: rate.format(metrics.actualTicksPerSecond), detail: 'generated samples/s', testId: 'actual-rate' },
+    { label: 'ROW UPDATES', value: rate.format(metrics.rowUpdatesPerSecond), detail: 'unique rows applied/s', testId: 'row-update-rate' },
+    { label: 'MESSAGES', value: metrics.workerMessagesPerSecond.toFixed(1), detail: 'worker messages/s', testId: 'message-rate' },
+    { label: 'STATE APPLIES', value: metrics.stateApplicationsPerSecond.toFixed(1), detail: 'quote snapshots/s', testId: 'state-apply-rate' },
+    { label: 'TABLE COMMITS', value: metrics.tableRendersPerSecond.toFixed(1), detail: 'completed renders/s', testId: 'table-render-rate' },
+    { label: 'AVG RENDER', value: formatMs(metrics.averageRenderMs), detail: 'mutation → render' },
+    { label: 'P95 RENDER', value: formatMs(metrics.p95RenderMs), detail: `max ${formatMs(metrics.maxRenderMs)}` },
+    { label: 'LONG FRAMES', value: state.current.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', detail: state.current.longAnimationFramesSupported ? `worst ${formatMs(metrics.worstLongAnimationFrameMs)}` : 'unsupported', testId: 'long-frame-count' },
+  ])
+</script>
+
+<section class="metrics-strip" aria-label="Live performance metrics">
+  {#each items as item (item.label)}<article><span>{item.label}</span><strong data-testid={item.testId}>{item.value}</strong><small>{item.detail}</small></article>{/each}
+</section>
diff --git a/examples/svelte/realtime-trading/src/shell/SelectedInstrument.svelte b/examples/svelte/realtime-trading/src/shell/SelectedInstrument.svelte
new file mode 100644
index 0000000000..69cddc2f60
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/SelectedInstrument.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { useSelector } from '@tanstack/svelte-store'
+  import { useMarketFeedController, useTradingShellController } from './trading-shell-context'
+  const feed = useMarketFeedController()
+  const selectedSymbol = useSelector(useTradingShellController().renderAtoms.selectedSymbol)
+  const quotes = useSelector(feed.store, (state) => state.quotes)
+  const selectedQuote = $derived(feed.getQuoteBySymbol(quotes.current, selectedSymbol.current))
+</script>
+
+<section class="config-section selected-instrument" data-testid="selected-instrument">
+  <h2>SELECTED INSTRUMENT</h2>
+  {#if selectedQuote}
+    <div class="selection"><div><strong>{selectedQuote.symbol}</strong><span>{selectedQuote.company}</span></div><small>{selectedQuote.venue}</small></div>
+    <dl><div><dt>Last</dt><dd>{selectedQuote.price.toFixed(2)}</dd></div><div><dt>Bid / ask</dt><dd>{selectedQuote.bid.toFixed(2)} / {selectedQuote.ask.toFixed(2)}</dd></div></dl>
+  {:else}<p>Click or begin a cell selection in any row to inspect its instrument.</p>{/if}
+</section>
diff --git a/examples/svelte/realtime-trading/src/shell/TradingShell.svelte b/examples/svelte/realtime-trading/src/shell/TradingShell.svelte
new file mode 100644
index 0000000000..3706e48085
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/TradingShell.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import AppHeader from './AppHeader.svelte'
+  import Configurator from './Configurator.svelte'
+  import MarketStatusbar from './MarketStatusbar.svelte'
+  import MetricsStrip from './MetricsStrip.svelte'
+  const { children }: { children: Snippet } = $props()
+  const layout = $state({ sidebarOpen: true })
+</script>
+
+<main class:is-sidebar-collapsed={!layout.sidebarOpen} class="trading-terminal">
+  <div class="shell-header"><AppHeader sidebarOpen={layout.sidebarOpen} onSidebarToggle={() => { layout.sidebarOpen = !layout.sidebarOpen }} />{#if import.meta.env.DEV}<aside class="development-warning">DEV BUILD — use the production build before recording results.</aside>{/if}</div>
+  <section class="market-panel" aria-label="Live synthetic quotes"><MetricsStrip />{@render children()}</section>
+  <MarketStatusbar />
+  <div class="sidebar-slot">{#if layout.sidebarOpen}<Configurator />{/if}</div>
+</main>
diff --git a/examples/svelte/realtime-trading/src/shell/configurator-options.ts b/examples/svelte/realtime-trading/src/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/svelte/realtime-trading/src/shell/trading-shell-context.ts b/examples/svelte/realtime-trading/src/shell/trading-shell-context.ts
new file mode 100644
index 0000000000..434f512cd3
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/shell/trading-shell-context.ts
@@ -0,0 +1,29 @@
+import { getContext, setContext } from 'svelte'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
+
+interface TradingControllers {
+  benchmark: TradingBenchmarkController
+  feed: MarketFeedController
+}
+
+const tradingControllersKey = Symbol('trading-controllers')
+
+export function provideTradingControllers(benchmark: TradingBenchmarkController): void {
+  setContext<TradingControllers>(tradingControllersKey, {
+    benchmark,
+    feed: benchmark.feed,
+  })
+}
+
+export function useTradingShellController(): TradingBenchmarkController {
+  const controllers = getContext<TradingControllers | undefined>(tradingControllersKey)
+  if (!controllers) throw new Error('Missing trading controllers')
+  return controllers.benchmark
+}
+
+export function useMarketFeedController(): MarketFeedController {
+  const controllers = getContext<TradingControllers | undefined>(tradingControllersKey)
+  if (!controllers) throw new Error('Missing trading controllers')
+  return controllers.feed
+}
diff --git a/examples/svelte/realtime-trading/src/table/TradingTable.svelte b/examples/svelte/realtime-trading/src/table/TradingTable.svelte
new file mode 100644
index 0000000000..f469c1c29d
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/TradingTable.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+  import { get } from 'svelte/store'
+  import { onMount, tick } from 'svelte'
+  import { useSelector } from '@tanstack/svelte-store'
+  import { FlexRender, createFilteredRowModel, createSortedRowModel, createTable, filterFn_includesString, sortFn_basic, stockFeatures, tableFeatures } from '@tanstack/svelte-table'
+  import { createVirtualizer } from '@tanstack/svelte-virtual'
+  import { startTableBenchmark } from '../benchmark/table-benchmark'
+  import { useMarketFeedController, useTradingShellController } from '../shell/trading-shell-context'
+  import { TRADING_COLUMN_COUNT, readMeasuredRows, rowModelDiagnostics, tradingColumns } from './table-config/trading-columns'
+  import { TradingGridPointerController, handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from './table-interactions'
+  import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode } from './trading-row-virtualizer'
+  import type { MarketQuote } from '../feed/market-data'
+  import type { VirtualItem } from '@tanstack/svelte-virtual'
+
+  export { TRADING_COLUMN_COUNT, rowModelDiagnostics }
+
+  const features = tableFeatures({
+    ...stockFeatures,
+    filteredRowModel: createFilteredRowModel(),
+    sortedRowModel: createSortedRowModel(),
+    filterFns: { includesString: filterFn_includesString },
+    sortFns: { basic: sortFn_basic },
+  })
+  const controller = useTradingShellController()
+  const feed = useMarketFeedController()
+  const feedState = useSelector(feed.store)
+  const benchmarkState = useSelector(controller.store)
+  const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
+  const table = createTable({
+    key: 'svelte-realtime-trading',
+    features,
+    columns: tradingColumns,
+    get data() { return feedState.current.quotes },
+    getRowId: (row: MarketQuote) => row.id,
+    columnResizeMode: 'onChange',
+    defaultColumn: { minSize: 56, maxSize: 800 },
+    autoResetCellSelection: false,
+  })
+  const tableState = useSelector(table.store, (state) => ({
+    sorting: state.sorting,
+    columnFilters: state.columnFilters,
+    columnOrder: state.columnOrder,
+    rowSelection: state.rowSelection,
+    cellSelection: state.cellSelection,
+  }))
+  const virtualScrollMode = $derived(resolveVirtualScrollMode(benchmarkState.current.requestedVirtualScrollMode, feedState.current.instrumentCount))
+  const rows = $derived.by(() => {
+    void feedState.current.quotes
+    void tableState.current
+    return readMeasuredRows(() => table.getRowModel().rows)
+  })
+  const refs = $state<{ scroll: HTMLDivElement | null; table: HTMLTableElement | null }>({ scroll: null, table: null })
+  const rowVirtualizer = createVirtualizer({
+    count: 0,
+    estimateSize: () => TRADING_ROW_HEIGHT,
+    getScrollElement: () => refs.scroll,
+    getItemKey: (index) => rows[index]?.id ?? index,
+    overscan: TRADING_ROW_OVERSCAN,
+    enabled: false,
+  })
+  const virtualRows = $derived($rowVirtualizer.getVirtualItems())
+  const visibleRange = $derived.by(() => {
+    const range = $rowVirtualizer.range
+    if (virtualScrollMode !== 'tanstack' || rows.length === 0 || range === null) return null
+    const lastIndex = rows.length - 1
+    const start = Math.min(range.startIndex, lastIndex)
+    return { start, end: Math.min(Math.max(start, range.endIndex), lastIndex) }
+  })
+  const pointerInteractions = new TradingGridPointerController()
+  const drag = { columnId: null as string | null, sourceElement: null as HTMLTableCellElement | null, targetElement: null as HTMLTableCellElement | null }
+  const layout = { manuallyResized: false }
+
+  $effect(() => {
+    get(rowVirtualizer).setOptions({
+      count: rows.length,
+      estimateSize: () => TRADING_ROW_HEIGHT,
+      getScrollElement: () => refs.scroll,
+      getItemKey: (index) => rows[index]?.id ?? index,
+      overscan: TRADING_ROW_OVERSCAN,
+      enabled: virtualScrollMode === 'tanstack',
+    })
+  })
+  $effect(() => { controller.actions.setRenderedRowCount(virtualScrollMode === 'tanstack' ? virtualRows.length : rows.length) })
+  $effect(() => { void feedState.current.quotes; tick().then(() => feed.completeRender()) })
+
+  const writeColumnSizes = (): void => {
+    if (!refs.table) return
+    for (const header of table.getFlatHeaders()) {
+      refs.table.style.setProperty(`--header-${header.id}-size`, String(header.getSize()))
+      refs.table.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize()))
+    }
+    refs.table.style.width = `${table.getTotalSize()}px`
+  }
+  const fitAvailableWidth = (): void => {
+    if (!refs.scroll || layout.manuallyResized) return
+    const width = table.getTotalSize()
+    if (refs.scroll.clientWidth <= width + 1 || width <= 0) return
+    const ratio = refs.scroll.clientWidth / width
+    table.setColumnSizing(Object.fromEntries(table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio])))
+  }
+  const clearColumnDrag = (): void => {
+    drag.sourceElement?.classList.remove('is-column-dragging')
+    drag.targetElement?.classList.remove('is-column-drop-target')
+    drag.columnId = null; drag.sourceElement = null; drag.targetElement = null
+  }
+  const showColumnDropTarget = (columnId: string, element: HTMLTableCellElement | null): void => {
+    drag.targetElement?.classList.remove('is-column-drop-target')
+    drag.targetElement = null
+    if (drag.columnId === columnId || !element) return
+    element.classList.add('is-column-drop-target')
+    drag.targetElement = element
+  }
+  const isTextColumn = (columnId: string): boolean => columnId === 'market' || columnId === 'name' || columnId === 'symbol'
+
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(fitAvailableWidth)
+    const sizing = table.atoms.columnSizing.subscribe(writeColumnSizes)
+    const order = table.atoms.columnOrder.subscribe(writeColumnSizes)
+    const resizing = table.atoms.columnResizing.subscribe((state) => { if (state.isResizingColumn !== false) layout.manuallyResized = true })
+    tick().then(() => { writeColumnSizes(); fitAvailableWidth(); if (refs.scroll) resizeObserver.observe(refs.scroll) })
+    const stopBenchmark = startTableBenchmark(controller)
+    feed.completeRender()
+    return () => { sizing.unsubscribe(); order.unsubscribe(); resizing.unsubscribe(); resizeObserver.disconnect(); stopBenchmark() }
+  })
+</script>
+
+{#snippet renderRow(row: (typeof rows)[number], virtualRow?: VirtualItem)}
+  <tr class:virtual-table-row={Boolean(virtualRow)} style:transform={virtualRow ? `translateY(${virtualRow.start}px)` : undefined} data-virtual-index={virtualRow?.index} data-symbol={row.original.symbol} data-row-id={row.original.id} data-symbol-selected={selectedSymbol.current === row.original.symbol ? 'true' : undefined} title={row.original.company} aria-selected={row.getIsSelected()}>
+    {#each row.getVisibleCells() as cell (cell.id)}{@const edges = cell.getSelectionEdges()}<td style:width={`calc(var(--col-${cell.column.id}-size) * 1px)`} data-column-id={cell.column.id} data-cell-focused={cell.getIsFocused() || undefined} data-selection-top={edges.top || undefined} data-selection-right={edges.right || undefined} data-selection-bottom={edges.bottom || undefined} data-selection-left={edges.left || undefined} aria-selected={cell.getIsSelected()} tabindex={cell.getTabIndex()}><FlexRender {cell} /></td>{/each}
+  </tr>
+{/snippet}
+
+<div bind:this={refs.scroll} class:is-virtualized={virtualScrollMode === 'tanstack'} class="table-scroll" data-trading-table>
+  <table bind:this={refs.table} class:virtual-table={virtualScrollMode === 'tanstack'} class="trading-data-grid" data-testid="trading-table" role="grid" aria-multiselectable="true" tabindex="0" onkeydown={(event) => handleCellNavigation(table, event)}>
+    <thead>
+      {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}<tr>
+        {#each headerGroup.headers as header (header.id)}
+          {@const isLeaf = header.subHeaders.length === 0}{@const sorted = header.column.getIsSorted()}
+          <th colspan={header.colSpan} style:width={`calc(var(--header-${header.id}-size) * 1px)`} aria-sort={isLeaf ? sortAriaValue(sorted) : undefined} class:column-group-header={!isLeaf} class:numeric-header={isLeaf && !isTextColumn(header.column.id)}>
+            {#if !header.isPlaceholder}
+              {#if isLeaf}
+                <div role="group" class="leaf-header-content" ondragover={(event) => { event.preventDefault(); showColumnDropTarget(header.column.id, (event.currentTarget as HTMLElement).closest('th')) }} ondrop={(event) => { event.preventDefault(); const sourceId = event.dataTransfer?.getData('text/plain') || drag.columnId; if (sourceId) table.setColumnOrder(reorderColumnIds(table.getVisibleLeafColumns().map((column) => column.id), sourceId, header.column.id)); clearColumnDrag() }}>
+                  <button type="button" class="column-drag-handle" draggable="true" aria-label={`Move ${header.column.id} column`} ondragstart={(event) => { drag.columnId = header.column.id; drag.sourceElement = (event.currentTarget as HTMLElement).closest('th'); drag.sourceElement?.classList.add('is-column-dragging'); if (event.dataTransfer) { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', header.column.id) } }} ondragend={clearColumnDrag}>⋮⋮</button>
+                  <button type="button" class:is-sortable={header.column.getCanSort()} class="sort-header-button" disabled={!header.column.getCanSort()} onclick={header.column.getToggleSortingHandler()}><span class="header-label"><FlexRender {header} /></span>{#if header.column.getCanSort()}<span class:is-active={Boolean(sorted)} class="sort-indicator" aria-hidden="true">{sortIndicator(sorted)}</span>{/if}</button>
+                </div>
+                {#if header.column.getCanResize()}<!-- svelte-ignore a11y_no_noninteractive_element_interactions --><div class:is-resizing={header.column.getIsResizing()} class="column-resize-handle" role="separator" aria-orientation="vertical" tabindex="-1" ondblclick={() => header.column.resetSize()} onmousedown={header.getResizeHandler()} ontouchstart={header.getResizeHandler()}></div>{/if}
+              {:else}<FlexRender {header} />{/if}
+            {/if}
+          </th>
+        {/each}
+      </tr>{/each}
+    </thead>
+    <!-- Delegated table-grid pointer handling intentionally lives on one tbody. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <tbody class:virtual-table-body={virtualScrollMode === 'tanstack'} style:height={virtualScrollMode === 'tanstack' ? `${rows.length * TRADING_ROW_HEIGHT}px` : undefined} data-source-row-count={feedState.current.quotes.length} onmousedown={(event) => pointerInteractions.handleMouseDown(table, event, controller.actions.selectSymbol)} onpointerover={(event) => pointerInteractions.handlePointerOver(table, event)} onmouseleave={() => pointerInteractions.resetPointerCell()} onclick={(event) => pointerInteractions.handleClick(table, event)}>
+      {#if virtualScrollMode === 'tanstack'}
+        {#each virtualRows as virtualRow (virtualRow.key)}{@render renderRow(rows[virtualRow.index], virtualRow)}{/each}
+      {:else}
+        {#each rows as row (row.id)}{@render renderRow(row)}{/each}
+      {/if}
+    </tbody>
+  </table>
+</div>
+{#if virtualScrollMode === 'tanstack'}<footer class="virtual-scroll-footer" data-testid="virtual-scroll-footer"><span>TanStack · Total · {rows.length} rows · {table.getVisibleLeafColumns().length} columns</span><span data-testid="visible-row-range">{visibleRange ? `Current · rows ${visibleRange.start}..${visibleRange.end}` : 'Current · rows —'}</span></footer>{/if}
diff --git a/examples/svelte/realtime-trading/src/table/table-config/DayChangeCell.svelte b/examples/svelte/realtime-trading/src/table/table-config/DayChangeCell.svelte
new file mode 100644
index 0000000000..ac9fd4210c
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-config/DayChangeCell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { useSelector } from '@tanstack/svelte-store'
+  import { useTradingShellController } from '../../shell/trading-shell-context'
+  import type { MarketQuote } from '../../feed/market-data'
+  import MoveCell from './MoveCell.svelte'
+  import { getDayChange } from './trading-columns'
+
+  const { quote }: { quote: MarketQuote } = $props()
+  const mode = useSelector(useTradingShellController().renderAtoms.rendererMode)
+  const change = $derived(getDayChange(quote))
+</script>
+
+{#if mode.current === 'stable'}
+  <MoveCell move={change} componentName="StableMoveCell" />
+{:else if change >= 0}
+  <MoveCell move={change} componentName="UpMoveCell" fixedDirection="up" />
+{:else}
+  <MoveCell move={change} componentName="DownMoveCell" fixedDirection="down" />
+{/if}
diff --git a/examples/svelte/realtime-trading/src/table/table-config/LastPriceCell.svelte b/examples/svelte/realtime-trading/src/table/table-config/LastPriceCell.svelte
new file mode 100644
index 0000000000..2fe41997c7
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-config/LastPriceCell.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { useTradingShellController } from '../../shell/trading-shell-context'
+  import type { MarketQuote } from '../../feed/market-data'
+  import PriceCell from './PriceCell.svelte'
+  import { getDayChange } from './trading-columns'
+
+  const { quote }: { quote: MarketQuote } = $props()
+  const { selectSymbol } = useTradingShellController().actions
+</script>
+
+<PriceCell price={quote.price} move={getDayChange(quote)} onSelect={() => selectSymbol(quote.symbol)} />
diff --git a/examples/svelte/realtime-trading/src/table/table-config/MoveCell.svelte b/examples/svelte/realtime-trading/src/table/table-config/MoveCell.svelte
new file mode 100644
index 0000000000..0ecf1544b2
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-config/MoveCell.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { formatSigned, quoteCellLifecycle, recordComponentRender } from './quote-cells'
+  import type { QuoteComponentName } from './quote-cells'
+
+  const { move, componentName, fixedDirection }: {
+    move: number
+    componentName: Extract<QuoteComponentName, 'StableMoveCell' | 'UpMoveCell' | 'DownMoveCell'>
+    fixedDirection?: 'up' | 'down'
+  } = $props()
+  const direction = $derived(fixedDirection ?? (move >= 0 ? 'up' : 'down'))
+  const indicator = $derived(fixedDirection === 'up' ? '▲ ' : fixedDirection === 'down' ? '▼ ' : '')
+  $effect(() => { void move; recordComponentRender(componentName) })
+  onMount(() => { quoteCellLifecycle.created++; return () => { quoteCellLifecycle.destroyed++ } })
+</script>
+
+<span class="move-cell quote-{direction}">{indicator}{formatSigned(move)}</span>
diff --git a/examples/svelte/realtime-trading/src/table/table-config/PercentChangeCell.svelte b/examples/svelte/realtime-trading/src/table/table-config/PercentChangeCell.svelte
new file mode 100644
index 0000000000..d108a65007
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-config/PercentChangeCell.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { quoteCellLifecycle, recordComponentRender } from './quote-cells'
+
+  const { value }: { value: number } = $props()
+  $effect(() => { void value; recordComponentRender('PercentChangeCell') })
+  onMount(() => { quoteCellLifecycle.created++; return () => { quoteCellLifecycle.destroyed++ } })
+</script>
+
+<span class:quote-up={value >= 0} class:quote-down={value < 0} class="percent-change-cell">{value >= 0 ? '+' : ''}{value.toFixed(2)}%</span>
diff --git a/examples/svelte/realtime-trading/src/table/table-config/PriceCell.svelte b/examples/svelte/realtime-trading/src/table/table-config/PriceCell.svelte
new file mode 100644
index 0000000000..4f25bd5fd5
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-config/PriceCell.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { quoteCellLifecycle, recordComponentRender } from './quote-cells'
+
+  const { price, move, onSelect }: { price: number; move: number; onSelect: () => void } = $props()
+  $effect(() => { void price; void move; recordComponentRender('PriceCell') })
+  onMount(() => { quoteCellLifecycle.created++; return () => { quoteCellLifecycle.destroyed++ } })
+</script>
+
+<button class:quote-up={move >= 0} class:quote-down={move < 0} class="price-button" onclick={onSelect}>{price.toFixed(2)}</button>
diff --git a/examples/svelte/realtime-trading/src/table/table-config/SparklineCell.svelte b/examples/svelte/realtime-trading/src/table/table-config/SparklineCell.svelte
new file mode 100644
index 0000000000..bee2789d9d
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-config/SparklineCell.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { quoteCellLifecycle, recordComponentRender, sparklinePoints } from './quote-cells'
+
+  const { values }: { values: ReadonlyArray<number> } = $props()
+  const rising = $derived((values.at(-1) ?? 0) >= (values[0] ?? 0))
+  const points = $derived(sparklinePoints(values))
+  $effect(() => { void values; recordComponentRender('SparklineCell') })
+  onMount(() => { quoteCellLifecycle.created++; return () => { quoteCellLifecycle.destroyed++ } })
+</script>
+
+<svg class:quote-up={rising} class:quote-down={!rising} class="sparkline" viewBox="0 0 100 24" preserveAspectRatio="none"><polyline {points} /></svg>
diff --git a/examples/svelte/realtime-trading/src/table/table-config/quote-cells.ts b/examples/svelte/realtime-trading/src/table/table-config/quote-cells.ts
new file mode 100644
index 0000000000..12eacc0847
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-config/quote-cells.ts
@@ -0,0 +1,59 @@
+export const quoteCellLifecycle = { created: 0, destroyed: 0 }
+
+export const quoteCellRendererNames = [
+  'Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid',
+  'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday',
+] as const
+
+export const quoteComponentNames = [
+  'PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell',
+  'PercentChangeCell', 'SparklineCell',
+] as const
+
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+
+const createCounterMap = <Name extends string>(names: ReadonlyArray<Name>) =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
+  cellRendererCallsByName: createCounterMap(quoteCellRendererNames),
+  componentRenderCallsByName: createCounterMap(quoteComponentNames),
+}
+
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value
+}
+
+export function recordComponentRender(name: QuoteComponentName): void {
+  quoteRenderDiagnostics.componentRenderCalls++
+  quoteRenderDiagnostics.componentRenderCallsByName[name]++
+}
+
+export function formatSigned(value: number): string {
+  return `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+}
+
+export function sparklinePoints(values: ReadonlyArray<number>): string {
+  const first = values[0] ?? 0
+  const range = values.reduce(
+    (current, value) => ({
+      min: Math.min(current.min, value),
+      max: Math.max(current.max, value),
+    }),
+    { min: first, max: first },
+  )
+  const height = range.max - range.min || 1
+  const denominator = Math.max(1, values.length - 1)
+  return values
+    .map((value, index) => {
+      const x = (index / denominator) * 100
+      const y = 22 - ((value - range.min) / height) * 20
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    })
+    .join(' ')
+}
diff --git a/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts b/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
new file mode 100644
index 0000000000..d563f4e6c8
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
@@ -0,0 +1,78 @@
+import { renderComponent } from '@tanstack/svelte-table'
+import DayChangeCell from './DayChangeCell.svelte'
+import LastPriceCell from './LastPriceCell.svelte'
+import PercentChangeCell from './PercentChangeCell.svelte'
+import SparklineCell from './SparklineCell.svelte'
+import { recordCellRender } from './quote-cells'
+import type { MarketQuote } from '../../feed/market-data'
+
+export type RendererMode = 'stable' | 'swap'
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+
+interface TradingCellContext { row: { original: MarketQuote } }
+
+export interface TradingColumnDefinition {
+  id: string
+  header: string
+  size?: number
+  columns?: Array<TradingColumnDefinition>
+  accessorFn?: (row: MarketQuote) => unknown
+  enableSorting?: boolean
+  filterFn?: 'includesString'
+  sortFn?: 'basic'
+  cell?: (context: TradingCellContext) => unknown
+}
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact', maximumFractionDigits: 1,
+})
+
+export const tradingColumns: Array<TradingColumnDefinition> = [
+  { id: 'instrument', header: 'Instrument', columns: [
+    { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', row.original.venue) },
+    { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', row.original.company) },
+    { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', row.original.symbol) },
+  ] },
+  { id: 'priceAndChange', header: 'Price & Change', columns: [
+    { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: ({ row }) => recordCellRender('Last', renderComponent(LastPriceCell, { quote: row.original })) },
+    { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', renderComponent(DayChangeCell, { quote: row.original })) },
+    { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: ({ row }) => recordCellRender('ChangePercent', renderComponent(PercentChangeCell, { value: getDayChangePercent(row.original) })) },
+  ] },
+  { id: 'orderBook', header: 'Order Book', columns: [
+    { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
+    { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compactFormatter.format(row.original.bidSize)) },
+    { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
+    { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compactFormatter.format(row.original.askSize)) },
+  ] },
+  { id: 'session', header: 'Session', columns: [
+    { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
+    { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
+    { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
+  ] },
+  { id: 'chart', header: 'Chart', columns: [
+    { id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: ({ row }) => recordCellRender('Intraday', renderComponent(SparklineCell, { values: row.original.history })) },
+  ] },
+]
+
+export const rowModelDiagnostics = { hasMeasurement: false, calls: 0, totalDurationMs: 0, maxDurationMs: 0, lastRowCount: 0 }
+export const TRADING_COLUMN_COUNT = 14
+
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration)
+  rowModelDiagnostics.lastRowCount = rows.length
+  try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* User Timing Level 3 is optional. */ }
+  return rows
+}
+
+export function getDayChange(quote: MarketQuote): number { return quote.price - quote.previousClose }
+export function getDayChangePercent(quote: MarketQuote): number { return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100 }
diff --git a/examples/svelte/realtime-trading/src/table/table-interactions.ts b/examples/svelte/realtime-trading/src/table/table-interactions.ts
new file mode 100644
index 0000000000..1df83b2484
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/table-interactions.ts
@@ -0,0 +1,186 @@
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Record<string, SelectableGridCell>
+}
+
+interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Record<string, SelectableGridRow>
+  }
+}
+
+interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+  })
+}
+
+export class TradingGridPointerController {
+  #lastPointerCell: HTMLTableCellElement | null = null
+
+  handleMouseDown(
+    table: TradingGridTable,
+    event: MouseEvent,
+    selectSymbol: (symbol: string) => void,
+  ): void {
+    if (event.button !== 0) return
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+
+    this.#lastPointerCell = target.element
+    selectSymbol(target.cell.row.original.symbol)
+    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+  }
+
+  handlePointerOver(table: TradingGridTable, event: MouseEvent): void {
+    if ((event.buttons & 1) === 0) {
+      this.resetPointerCell()
+      return
+    }
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target || target.element === this.#lastPointerCell) return
+
+    this.#lastPointerCell = target.element
+    target.cell.getSelectionExtendHandler()(event)
+  }
+
+  handleClick(table: TradingGridTable, event: MouseEvent): void {
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+    selectRowFromPointer(table, target.cell.row, event)
+  }
+
+  resetPointerCell(): void {
+    this.#lastPointerCell = null
+  }
+
+  #findCellTarget(
+    table: TradingGridTable,
+    path: Array<EventTarget>,
+  ): SelectionCellTarget | null {
+    for (const target of path) {
+      if (!(target instanceof HTMLTableCellElement)) continue
+
+      const columnId = target.dataset['columnId']
+      const rowId =
+        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+      if (!columnId || !rowId) return null
+
+      const row = table.getRowModel().rowsById[rowId]
+      const cell = row.getAllCellsByColumnId()[columnId]
+      return { element: target, cell }
+    }
+
+    return null
+  }
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: KeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/svelte/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/svelte/realtime-trading/src/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..d733342a00
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -0,0 +1,14 @@
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
diff --git a/examples/svelte/realtime-trading/src/table/trading-table.ts b/examples/svelte/realtime-trading/src/table/trading-table.ts
new file mode 100644
index 0000000000..3b6ca3f800
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/table/trading-table.ts
@@ -0,0 +1,3 @@
+export { TRADING_COLUMN_COUNT, rowModelDiagnostics } from './table-config/trading-columns'
+export type { CoreTableState, RendererMode } from './table-config/trading-columns'
+export type { VirtualScrollMode } from './trading-row-virtualizer'
diff --git a/examples/svelte/realtime-trading/src/vite-env.d.ts b/examples/svelte/realtime-trading/src/vite-env.d.ts
new file mode 100644
index 0000000000..ed77210660
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+
diff --git a/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts b/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..3362a2eadc
--- /dev/null
+++ b/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,170 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the Vue realtime trading workload', async ({ page }) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
+    await expect(table).toBeVisible()
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
+
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('row-update-rate').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('message-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    await instrumentCount.selectOption('750')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(750)
+    expect(
+      await page.evaluate(
+        () => performance.getEntriesByName('tanstack-row-model').length > 0,
+      ),
+    ).toBe(true)
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/svelte/realtime-trading/tsconfig.json b/examples/svelte/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..47c369bed0
--- /dev/null
+++ b/examples/svelte/realtime-trading/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["svelte", "vite/client"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte", "tests/**/*.ts", "vite.config.ts"]
+}
diff --git a/examples/svelte/realtime-trading/vite.config.ts b/examples/svelte/realtime-trading/vite.config.ts
new file mode 100644
index 0000000000..f05490e534
--- /dev/null
+++ b/examples/svelte/realtime-trading/vite.config.ts
@@ -0,0 +1,7 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: { port: 7782, allowedHosts: true },
+  plugins: [svelte()],
+})
diff --git a/examples/vue/realtime-trading/README.md b/examples/vue/realtime-trading/README.md
new file mode 100644
index 0000000000..7bec52a817
--- /dev/null
+++ b/examples/vue/realtime-trading/README.md
@@ -0,0 +1,37 @@
+# Vue realtime trading benchmark
+
+This standalone example applies the same realtime-trading workload used by the
+Angular, React, Solid, and Preact examples to the current Vue Table adapter.
+It includes the immutable worker feed, sorting/filtering, resizing, drag column
+ordering, row and cell selection, dynamic quote components, full-DOM and
+TanStack Virtual row rendering and benchmark diagnostics.
+
+## Run
+
+```bash
+pnpm --dir examples/vue/realtime-trading dev
+```
+
+Open `http://localhost:7781`.
+
+## Structure
+
+- `feed/` owns the copied market data, configuration, instruments, controller,
+  protocol, engine, and dedicated Web Worker.
+- `benchmark/` owns feed/render timing, lifecycle, DOM mutation, and row-model
+  measurements.
+- `shell/` owns injected controllers, header, metrics, statusbar, configurator,
+  diagnostics, and selected-instrument UI.
+- `table/` owns Vue Table, FlexRender components, delegated grid interactions,
+  column configuration, and Vue Virtual integration.
+
+The example is self-contained and does not import a shared example package.
+
+## Verification
+
+```bash
+pnpm --dir examples/vue/realtime-trading test:types
+pnpm --dir examples/vue/realtime-trading lint
+pnpm --dir examples/vue/realtime-trading build
+pnpm --dir examples/vue/realtime-trading test:e2e
+```
diff --git a/examples/vue/realtime-trading/index.html b/examples/vue/realtime-trading/index.html
new file mode 100644
index 0000000000..3a941cafa2
--- /dev/null
+++ b/examples/vue/realtime-trading/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="A synthetic real-time market benchmark for TanStack Vue Table FlexRender."
+    />
+    <link rel="icon" href="data:," />
+    <title>Vue Real-time Trading FlexRender Lab</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/realtime-trading/package.json b/examples/vue/realtime-trading/package.json
new file mode 100644
index 0000000000..d6064cde1c
--- /dev/null
+++ b/examples/vue/realtime-trading/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "tanstack-vue-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src",
+    "test:types": "vue-tsc --noEmit",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "dependencies": {
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/vue-store": "^0.11.0",
+    "@tanstack/vue-table": "9.1.2",
+    "@tanstack/vue-virtual": "^3.13.35",
+    "vue": "^3.5.40"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.2",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitejs/plugin-vue-jsx": "^5.1.6",
+    "typescript": "6.0.3",
+    "vite": "^8.2.0",
+    "vue-tsc": "^3.3.5"
+  }
+}
diff --git a/examples/vue/realtime-trading/src/App.tsx b/examples/vue/realtime-trading/src/App.tsx
new file mode 100644
index 0000000000..554e0a5d63
--- /dev/null
+++ b/examples/vue/realtime-trading/src/App.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, onBeforeUnmount } from 'vue'
+import { TradingBenchmarkController } from './benchmark/trading-benchmark-controller'
+import { MarketFeedController } from './feed/market-feed-controller'
+import { TradingShell } from './shell/TradingShell'
+import { provideTradingControllers } from './shell/trading-shell-context'
+import { TradingTable } from './table/trading-table'
+
+export const App = defineComponent({
+  name: 'RealtimeTradingApp',
+  setup() {
+    const feed = new MarketFeedController()
+    const benchmark = new TradingBenchmarkController(feed)
+    provideTradingControllers(benchmark)
+
+    const stopFeed = feed.start()
+    const stopBenchmark = benchmark.start()
+    onBeforeUnmount(() => {
+      stopBenchmark()
+      stopFeed()
+    })
+
+    return () => (
+      <TradingShell>
+        {{ default: () => <TradingTable /> }}
+      </TradingShell>
+    )
+  },
+})
diff --git a/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
new file mode 100644
index 0000000000..9eea493fec
--- /dev/null
+++ b/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -0,0 +1,368 @@
+import {
+  quoteCellLifecycle,
+  quoteRenderDiagnostics,
+} from '../table/table-config/quote-cells'
+import { rowModelDiagnostics } from '../table/trading-table'
+
+export interface NamedInvocationRate {
+  name: string
+  callsPerSecond: number
+}
+
+export interface FeedMetrics {
+  actualTicksPerSecond: number
+  rowUpdatesPerSecond: number
+  workerMessagesPerSecond: number
+  stateApplicationsPerSecond: number
+  supersededUpdatesPerSecond: number
+  totalTicks: number
+  rafCallbacksPerSecond: number
+  tableRendersPerSecond: number
+  lastBatchSize: number
+  averageRenderMs: number
+  p95RenderMs: number
+  maxRenderMs: number
+  slowRenders: number
+  longAnimationFrames: number
+  worstLongAnimationFrameMs: number
+  heapMb: number | null
+  componentsCreated: number
+  componentsDestroyed: number
+  workerMessages: number
+  lastUpdateCount: number
+  cellRendererCallsPerSecond: number
+  componentRenderCallsPerSecond: number
+  cellRendererRates: ReadonlyArray<NamedInvocationRate>
+  componentRenderRates: ReadonlyArray<NamedInvocationRate>
+  domMutationsPerSecond: number
+  rowModelCallsPerSecond: number
+  rowModelAverageMs: number
+  rowModelMaxMs: number
+  visibleRows: number
+}
+
+export const initialMetrics: FeedMetrics = {
+  actualTicksPerSecond: 0,
+  rowUpdatesPerSecond: 0,
+  workerMessagesPerSecond: 0,
+  stateApplicationsPerSecond: 0,
+  supersededUpdatesPerSecond: 0,
+  totalTicks: 0,
+  rafCallbacksPerSecond: 0,
+  tableRendersPerSecond: 0,
+  lastBatchSize: 0,
+  averageRenderMs: 0,
+  p95RenderMs: 0,
+  maxRenderMs: 0,
+  slowRenders: 0,
+  longAnimationFrames: 0,
+  worstLongAnimationFrameMs: 0,
+  heapMb: null,
+  componentsCreated: 0,
+  componentsDestroyed: 0,
+  workerMessages: 0,
+  lastUpdateCount: 0,
+  cellRendererCallsPerSecond: 0,
+  componentRenderCallsPerSecond: 0,
+  cellRendererRates: [],
+  componentRenderRates: [],
+  domMutationsPerSecond: 0,
+  rowModelCallsPerSecond: 0,
+  rowModelAverageMs: 0,
+  rowModelMaxMs: 0,
+  visibleRows: 0,
+}
+
+const userTiming = { entryCount: 0 }
+
+export function recordMeasure(
+  name: string,
+  start: number,
+  end: number,
+  detail: Record<string, unknown>,
+): void {
+  try {
+    performance.measure(name, { start, end, detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('market-update-to-layout-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
+export function markBenchmarkAction(
+  name: string,
+  detail: Record<string, unknown> = {},
+): void {
+  try {
+    performance.mark(`benchmark:${name}`, { detail })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMarks()
+    }
+  } catch {
+    // User Timing Level 3 detail is not implemented in every browser.
+  }
+}
+
+export class BenchmarkMonitor {
+  readonly #runtime = {
+    sampleStartedAt: performance.now(),
+    pendingRenderStartedAt: null as number | null,
+    renderSamples: [] as Array<number>,
+    totalTicks: 0,
+    ticksInSample: 0,
+    rowUpdatesInSample: 0,
+    workerMessagesInSample: 0,
+    stateApplicationsInSample: 0,
+    supersededUpdatesInSample: 0,
+    lastBatchSize: 0,
+    lastUpdateCount: 0,
+    workerMessages: 0,
+    rafCallbacksInSample: 0,
+    tableRendersInSample: 0,
+    longAnimationFrameCount: 0,
+    worstLongAnimationFrameMs: 0,
+    previousCellRendererCalls: 0,
+    previousComponentRenderCalls: 0,
+    previousCellRendererCallsByName: {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    },
+    previousComponentRenderCallsByName: {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    },
+    domMutationsInSample: 0,
+    previousRowModelCalls: 0,
+    previousRowModelDuration: 0,
+  }
+
+  markRenderPending(): void {
+    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  }
+
+  recordCompletedRender(): void {
+    const runtime = this.#runtime
+    if (runtime.pendingRenderStartedAt !== null) {
+      const renderEndedAt = performance.now()
+      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      recordMeasure(
+        'market-update-to-layout-commit',
+        runtime.pendingRenderStartedAt,
+        renderEndedAt,
+        {},
+      )
+      runtime.pendingRenderStartedAt = null
+      runtime.tableRendersInSample++
+    }
+  }
+
+  recordWorkerMessage(): void {
+    this.#runtime.workerMessages++
+    this.#runtime.workerMessagesInSample++
+  }
+
+  recordBatch(
+    tickCount: number,
+    updateCount: number,
+    supersededUpdateCount: number,
+  ): void {
+    const runtime = this.#runtime
+    runtime.lastBatchSize = tickCount
+    runtime.lastUpdateCount = updateCount
+    runtime.ticksInSample += tickCount
+    runtime.totalTicks += tickCount
+    runtime.rowUpdatesInSample += updateCount
+    runtime.stateApplicationsInSample++
+    runtime.supersededUpdatesInSample += supersededUpdateCount
+  }
+
+  recordAnimationFrame(): void {
+    this.#runtime.rafCallbacksInSample++
+  }
+
+  recordLongAnimationFrame(duration: number): void {
+    const runtime = this.#runtime
+    runtime.longAnimationFrameCount++
+    runtime.worstLongAnimationFrameMs = Math.max(
+      runtime.worstLongAnimationFrameMs,
+      duration,
+    )
+  }
+
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
+  shouldPublish(now: number): boolean {
+    return now - this.#runtime.sampleStartedAt >= 500
+  }
+
+  publish(now: number): FeedMetrics {
+    const runtime = this.#runtime
+    const sampleDuration = now - runtime.sampleStartedAt
+    const renderSamples = runtime.renderSamples
+    const sortedRenderSamples = [...renderSamples].sort(
+      (left, right) => left - right,
+    )
+    const rowModelCalls =
+      rowModelDiagnostics.calls - runtime.previousRowModelCalls
+    const rowModelDuration =
+      rowModelDiagnostics.totalDurationMs - runtime.previousRowModelDuration
+    const cellRendererCalls =
+      quoteRenderDiagnostics.cellRendererCalls -
+      runtime.previousCellRendererCalls
+    const componentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls -
+      runtime.previousComponentRenderCalls
+    const cellRendererRates = calculateInvocationRates(
+      quoteRenderDiagnostics.cellRendererCallsByName,
+      runtime.previousCellRendererCallsByName,
+      sampleDuration,
+    )
+    const componentRenderRates = calculateInvocationRates(
+      quoteRenderDiagnostics.componentRenderCallsByName,
+      runtime.previousComponentRenderCallsByName,
+      sampleDuration,
+    )
+    const averageRenderMs =
+      renderSamples.length === 0
+        ? 0
+        : renderSamples.reduce((sum, value) => sum + value, 0) /
+          renderSamples.length
+    const p95Index = Math.max(
+      0,
+      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+    )
+    const metrics: FeedMetrics = {
+      actualTicksPerSecond:
+        sampleDuration === 0
+          ? 0
+          : (runtime.ticksInSample / sampleDuration) * 1_000,
+      rowUpdatesPerSecond:
+        (runtime.rowUpdatesInSample / sampleDuration) * 1_000,
+      workerMessagesPerSecond:
+        (runtime.workerMessagesInSample / sampleDuration) * 1_000,
+      stateApplicationsPerSecond:
+        (runtime.stateApplicationsInSample / sampleDuration) * 1_000,
+      supersededUpdatesPerSecond:
+        (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
+      totalTicks: runtime.totalTicks,
+      rafCallbacksPerSecond:
+        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+      tableRendersPerSecond:
+        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      lastBatchSize: runtime.lastBatchSize,
+      averageRenderMs,
+      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
+      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
+      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      longAnimationFrames: runtime.longAnimationFrameCount,
+      worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
+      heapMb: readHeapSizeMb(),
+      componentsCreated: quoteCellLifecycle.created,
+      componentsDestroyed: quoteCellLifecycle.destroyed,
+      workerMessages: runtime.workerMessages,
+      lastUpdateCount: runtime.lastUpdateCount,
+      cellRendererCallsPerSecond: (cellRendererCalls / sampleDuration) * 1_000,
+      componentRenderCallsPerSecond:
+        (componentRenderCalls / sampleDuration) * 1_000,
+      cellRendererRates,
+      componentRenderRates,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
+      rowModelCallsPerSecond: (rowModelCalls / sampleDuration) * 1_000,
+      rowModelAverageMs:
+        rowModelCalls === 0 ? 0 : rowModelDuration / rowModelCalls,
+      rowModelMaxMs: rowModelDiagnostics.maxDurationMs,
+      visibleRows: rowModelDiagnostics.lastRowCount,
+    }
+
+    runtime.sampleStartedAt = now
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.renderSamples = []
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    return metrics
+  }
+
+  reset(): void {
+    const runtime = this.#runtime
+    runtime.sampleStartedAt = performance.now()
+    runtime.pendingRenderStartedAt = null
+    runtime.renderSamples = []
+    runtime.totalTicks = 0
+    runtime.ticksInSample = 0
+    runtime.rowUpdatesInSample = 0
+    runtime.workerMessagesInSample = 0
+    runtime.stateApplicationsInSample = 0
+    runtime.supersededUpdatesInSample = 0
+    runtime.lastBatchSize = 0
+    runtime.lastUpdateCount = 0
+    runtime.workerMessages = 0
+    runtime.rafCallbacksInSample = 0
+    runtime.tableRendersInSample = 0
+    runtime.longAnimationFrameCount = 0
+    runtime.worstLongAnimationFrameMs = 0
+    runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
+    runtime.previousComponentRenderCalls =
+      quoteRenderDiagnostics.componentRenderCalls
+    runtime.previousCellRendererCallsByName = {
+      ...quoteRenderDiagnostics.cellRendererCallsByName,
+    }
+    runtime.previousComponentRenderCallsByName = {
+      ...quoteRenderDiagnostics.componentRenderCallsByName,
+    }
+    runtime.domMutationsInSample = 0
+    runtime.previousRowModelCalls = rowModelDiagnostics.calls
+    runtime.previousRowModelDuration = rowModelDiagnostics.totalDurationMs
+    rowModelDiagnostics.maxDurationMs = 0
+  }
+}
+
+export const longAnimationFramesSupported =
+  PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+
+function readHeapSizeMb(): number | null {
+  const memory = (
+    performance as Performance & {
+      memory?: { usedJSHeapSize: number }
+    }
+  ).memory
+  return memory ? memory.usedJSHeapSize / 1_048_576 : null
+}
+
+function calculateInvocationRates(
+  current: Record<string, number>,
+  previous: Record<string, number>,
+  sampleDuration: number,
+): ReadonlyArray<NamedInvocationRate> {
+  return Object.entries(current).map(([name, calls]) => ({
+    name,
+    callsPerSecond:
+      sampleDuration === 0
+        ? 0
+        : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
+  }))
+}
diff --git a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
new file mode 100644
index 0000000000..316bb530e6
--- /dev/null
+++ b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -0,0 +1,152 @@
+import { batch, createAtom, createStore } from '@tanstack/store'
+import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
+import {
+  BenchmarkMonitor,
+  initialMetrics,
+  longAnimationFramesSupported,
+} from './benchmark-monitor'
+import type { FeedMetrics } from './benchmark-monitor'
+import type { MarketFeedController } from '../feed/market-feed-controller'
+import type { RendererMode } from '../table/trading-table'
+import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+
+export interface TradingBenchmarkState {
+  requestedVirtualScrollMode: VirtualScrollMode
+  metrics: FeedMetrics
+  mountedCells: number
+  liveComponents: number
+  longAnimationFramesSupported: boolean
+}
+
+export interface TradingBenchmarkActions {
+  resetViewState: () => void
+  setRendererMode: (mode: RendererMode) => void
+  setVirtualScrollEnabled: (enabled: boolean) => void
+  setRenderedRowCount: (count: number) => void
+  selectSymbol: (symbol: string | null) => void
+  resetMarket: () => void
+}
+
+const initialState: TradingBenchmarkState = {
+  requestedVirtualScrollMode: 'none',
+  metrics: initialMetrics,
+  mountedCells: 0,
+  liveComponents: 0,
+  longAnimationFramesSupported,
+}
+
+export class TradingBenchmarkController {
+  readonly store = createStore<TradingBenchmarkState>(initialState)
+  readonly renderAtoms = {
+    selectedSymbol: createAtom<string | null>(null),
+    rendererMode: createAtom<RendererMode>('stable'),
+  }
+  readonly monitor = new BenchmarkMonitor()
+  readonly feed: MarketFeedController
+  readonly actions: TradingBenchmarkActions
+
+  readonly #runtime = {
+    animationFrameId: 0,
+    longAnimationFrameObserver: null as PerformanceObserver | null,
+    stopObservingFeed: null as (() => void) | null,
+  }
+
+  constructor(feed: MarketFeedController) {
+    this.feed = feed
+    this.actions = {
+      resetViewState: () => {
+        this.renderAtoms.selectedSymbol.set(null)
+      },
+      setRendererMode: (mode) => {
+        this.renderAtoms.rendererMode.set(mode)
+      },
+      setVirtualScrollEnabled: (enabled) => {
+        if (
+          this.feed.store.get().instrumentCount >=
+          FORCED_VIRTUALIZATION_ROW_COUNT
+        ) {
+          return
+        }
+        this.#patch({
+          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
+        })
+      },
+      setRenderedRowCount: (count) => {
+        const mountedCells = count * TRADING_COLUMN_COUNT
+        if (mountedCells !== this.store.get().mountedCells) {
+          this.#patch({ mountedCells })
+        }
+      },
+      selectSymbol: (symbol) => {
+        this.renderAtoms.selectedSymbol.set(symbol)
+      },
+      resetMarket: () => {
+        batch(() => {
+          this.monitor.reset()
+          this.store.setState((state) => ({
+            ...state,
+            metrics: { ...initialMetrics },
+            mountedCells: 0,
+            liveComponents: 0,
+          }))
+          this.renderAtoms.selectedSymbol.set(null)
+          this.feed.actions.reset()
+        })
+      },
+    }
+  }
+
+  start(): () => void {
+    const longAnimationFrameObserver = longAnimationFramesSupported
+      ? new PerformanceObserver((entries) => {
+          for (const entry of entries.getEntries()) {
+            this.monitor.recordLongAnimationFrame(entry.duration)
+          }
+        })
+      : null
+
+    this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
+    this.#runtime.stopObservingFeed = this.feed.observe({
+      messageReceived: () => this.monitor.recordWorkerMessage(),
+      mutationStarted: () => this.monitor.markRenderPending(),
+      batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
+        this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
+      renderCommitted: () => this.monitor.recordCompletedRender(),
+    })
+    longAnimationFrameObserver?.observe({
+      type: 'long-animation-frame',
+      buffered: true,
+    })
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+
+    return () => this.stop()
+  }
+
+  stop(): void {
+    cancelAnimationFrame(this.#runtime.animationFrameId)
+    this.#runtime.longAnimationFrameObserver?.disconnect()
+    this.#runtime.stopObservingFeed?.()
+    this.#runtime.longAnimationFrameObserver = null
+    this.#runtime.stopObservingFeed = null
+  }
+
+  readonly #benchmarkFrame = (now: number): void => {
+    this.monitor.recordAnimationFrame()
+    if (this.monitor.shouldPublish(now)) {
+      this.#publishMetrics(this.monitor.publish(now))
+    }
+    this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
+  }
+
+  #patch(patch: Partial<TradingBenchmarkState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #publishMetrics(metrics: FeedMetrics): void {
+    this.#patch({
+      metrics,
+      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
+    })
+  }
+}
diff --git a/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
new file mode 100644
index 0000000000..2d7399ad3a
--- /dev/null
+++ b/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -0,0 +1,26 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+import type { TradingBenchmarkController } from './trading-benchmark-controller'
+
+export function useTableBenchmark(controller: TradingBenchmarkController): void {
+  const runtime = { mutationObserver: null as MutationObserver | null }
+
+  onMounted(() => {
+    const tableBody = document.querySelector(
+      '.market-panel [data-trading-table] tbody',
+    )
+    if (!tableBody) return
+
+    controller.monitor.resetDomMutations()
+    runtime.mutationObserver = new MutationObserver((records) => {
+      controller.monitor.recordDomMutations(records.length)
+    })
+    runtime.mutationObserver.observe(tableBody, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+  })
+
+  onBeforeUnmount(() => runtime.mutationObserver?.disconnect())
+}
diff --git a/examples/vue/realtime-trading/src/feed/feed-sample-rates.ts b/examples/vue/realtime-trading/src/feed/feed-sample-rates.ts
new file mode 100644
index 0000000000..17dc2015a6
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/feed-sample-rates.ts
@@ -0,0 +1,33 @@
+export const feedSampleRateOptions = [
+  { label: '100', value: 100 },
+  { label: '250', value: 250 },
+  { label: '500', value: 500 },
+  { label: '1K', value: 1_000 },
+  { label: '2.5K', value: 2_500 },
+  { label: '5K', value: 5_000 },
+  { label: '10K', value: 10_000 },
+  { label: '25K', value: 25_000 },
+  { label: '50K', value: 50_000 },
+  { label: '100K', value: 100_000 },
+] as const
+
+export function feedSampleRateIndex(rate: number): number {
+  return feedSampleRateOptions.reduce((closestIndex, candidate, index) => {
+    const closest = feedSampleRateOptions[closestIndex]
+    return Math.abs(candidate.value - rate) < Math.abs(closest.value - rate)
+      ? index
+      : closestIndex
+  }, 0)
+}
+
+export function feedSampleRateAt(stepIndex: number): number {
+  const index = Math.min(
+    feedSampleRateOptions.length - 1,
+    Math.max(0, Math.round(stepIndex)),
+  )
+  return feedSampleRateOptions[index].value
+}
+
+export function normalizeFeedSampleRate(rate: number): number {
+  return feedSampleRateAt(feedSampleRateIndex(rate))
+}
diff --git a/examples/vue/realtime-trading/src/feed/market-data.ts b/examples/vue/realtime-trading/src/feed/market-data.ts
new file mode 100644
index 0000000000..6231865d3f
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/market-data.ts
@@ -0,0 +1,38 @@
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './worker/market-feed-protocol'
+
+export interface MarketQuote extends Omit<MarketQuoteSnapshot, 'history'> {
+  history: ReadonlyArray<number>
+}
+
+export function hydrateMarketQuotes(
+  snapshots: Array<MarketQuoteSnapshot>,
+): Array<MarketQuote> {
+  return snapshots.map((quote) => ({
+    ...quote,
+    history: [...quote.history],
+  }))
+}
+
+export function applyMarketUpdates(
+  quotes: Array<MarketQuote>,
+  updates: Array<MarketQuoteUpdate>,
+): Array<MarketQuote> {
+  const nextQuotes = [...quotes]
+
+  for (const update of updates) {
+    const { index, history, ...values } = update
+    const previousQuote = quotes.at(index)
+    if (!previousQuote) continue
+
+    nextQuotes[index] = {
+      ...previousQuote,
+      ...values,
+      history: history ?? previousQuote.history,
+    }
+  }
+
+  return nextQuotes
+}
diff --git a/examples/vue/realtime-trading/src/feed/market-feed-config.ts b/examples/vue/realtime-trading/src/feed/market-feed-config.ts
new file mode 100644
index 0000000000..9d477ed663
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/market-feed-config.ts
@@ -0,0 +1,15 @@
+export interface MarketFeedConfig {
+  readonly instrumentCount: number
+  readonly targetSamplesPerSecond: number
+  readonly publishIntervalMs: number
+  readonly updateSparklines: boolean
+  readonly sparklineSampleIntervalMs: number
+}
+
+export const initialMarketFeedConfig: MarketFeedConfig = {
+  instrumentCount: 100,
+  targetSamplesPerSecond: 10_000,
+  publishIntervalMs: 20,
+  updateSparklines: true,
+  sparklineSampleIntervalMs: 16,
+}
diff --git a/examples/vue/realtime-trading/src/feed/market-feed-controller.ts b/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
new file mode 100644
index 0000000000..73716811be
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
@@ -0,0 +1,240 @@
+import { batch, createStore } from '@tanstack/store'
+import { normalizeFeedSampleRate } from './feed-sample-rates'
+import { initialMarketFeedConfig } from './market-feed-config'
+import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+} from './worker/market-feed-protocol'
+import type { MarketQuote } from './market-data'
+
+export interface MarketFeedState {
+  workerReady: boolean
+  running: boolean
+  instrumentCount: number
+  targetTicksPerSecond: number
+  publishIntervalMs: number
+  updateSparklines: boolean
+  sparklineSampleIntervalMs: number
+  quotes: Array<MarketQuote>
+}
+
+export interface MarketFeedBatch {
+  tickCount: number
+  updateCount: number
+  supersededUpdateCount: number
+}
+
+export interface MarketFeedObserver {
+  messageReceived?: () => void
+  mutationStarted?: () => void
+  batchApplied?: (batch: MarketFeedBatch) => void
+  renderCommitted?: () => void
+}
+
+export interface MarketFeedActions {
+  toggle: () => void
+  setInstrumentCount: (count: number) => void
+  setTargetRate: (rate: number) => void
+  setPublishInterval: (intervalMs: number) => void
+  setSparklineUpdates: (enabled: boolean) => void
+  setSparklineSampleInterval: (intervalMs: number) => void
+  runBurst: () => void
+  reset: () => void
+}
+
+const initialState: MarketFeedState = {
+  workerReady: false,
+  running: true,
+  instrumentCount: initialMarketFeedConfig.instrumentCount,
+  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  quotes: [],
+}
+
+export class MarketFeedController {
+  readonly store = createStore<MarketFeedState>(initialState)
+  readonly actions: MarketFeedActions
+  readonly #observers = new Set<MarketFeedObserver>()
+  readonly #runtime = {
+    worker: null as Worker | null,
+    feedSessionId: 0,
+    renderPending: false,
+    resetWaitingForCommit: false,
+    resetSnapshotReady: false,
+    quoteIndexBySymbol: new Map<string, number>(),
+  }
+
+  constructor() {
+    this.actions = {
+      toggle: () => {
+        const running = !this.store.get().running
+        this.#patch({ running })
+        this.#post({ type: 'set-running', running })
+      },
+      setInstrumentCount: (count) => {
+        this.#patch({ instrumentCount: count })
+        this.#resetWorker(count)
+      },
+      setTargetRate: (rate) => {
+        const sampleRate = normalizeFeedSampleRate(rate)
+        this.#patch({
+          targetTicksPerSecond: sampleRate,
+        })
+        this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
+      },
+      setPublishInterval: (publishIntervalMs) => {
+        this.#patch({ publishIntervalMs })
+        this.#post({
+          type: 'set-publish-interval',
+          intervalMs: publishIntervalMs,
+        })
+      },
+      setSparklineUpdates: (enabled) => {
+        this.#patch({ updateSparklines: enabled })
+        this.#post({ type: 'set-sparklines', enabled })
+      },
+      setSparklineSampleInterval: (intervalMs) => {
+        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.#post({ type: 'set-sparkline-interval', intervalMs })
+      },
+      runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
+      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+    }
+  }
+
+  start(): () => void {
+    const worker = new Worker(
+      new URL('./worker/market-feed.worker.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.#runtime.worker = worker
+    worker.addEventListener('message', this.#handleWorkerMessage)
+    worker.addEventListener('error', this.#handleWorkerError)
+    const state = this.store.get()
+    this.#post({
+      type: 'start',
+      rowCount: state.instrumentCount,
+      running: state.running,
+      ticksPerSecond: state.targetTicksPerSecond,
+      publishIntervalMs: state.publishIntervalMs,
+      updateSparklines: state.updateSparklines,
+      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+    })
+    return () => this.stop()
+  }
+
+  stop(): void {
+    this.#runtime.worker?.removeEventListener(
+      'message',
+      this.#handleWorkerMessage,
+    )
+    this.#runtime.worker?.removeEventListener('error', this.#handleWorkerError)
+    this.#runtime.worker?.terminate()
+    this.#runtime.worker = null
+    this.#observers.clear()
+  }
+
+  observe(observer: MarketFeedObserver): () => void {
+    this.#observers.add(observer)
+    return () => this.#observers.delete(observer)
+  }
+
+  getQuoteBySymbol(
+    quotes: Array<MarketQuote>,
+    symbol: string | null,
+  ): MarketQuote | null {
+    if (symbol === null) return null
+
+    const index = this.#runtime.quoteIndexBySymbol.get(symbol)
+    return index === undefined ? null : (quotes[index] ?? null)
+  }
+
+  completeRender(): void {
+    if (!this.#runtime.renderPending) return
+
+    this.#runtime.renderPending = false
+    for (const observer of this.#observers) {
+      observer.renderCommitted?.()
+    }
+    if (
+      this.#runtime.resetWaitingForCommit &&
+      this.#runtime.resetSnapshotReady
+    ) {
+      this.#runtime.resetWaitingForCommit = false
+      this.#runtime.resetSnapshotReady = false
+      this.#post({ type: 'set-running', running: this.store.get().running })
+    }
+  }
+
+  readonly #handleWorkerMessage = ({
+    data,
+  }: MessageEvent<MarketFeedEvent>): void => {
+    if (data.type === 'snapshot') {
+      this.#runtime.feedSessionId = data.sessionId
+      if (this.#runtime.resetWaitingForCommit) {
+        this.#runtime.resetSnapshotReady = true
+      }
+      this.#startMutation()
+      const quotes = hydrateMarketQuotes(data.quotes)
+      this.#runtime.quoteIndexBySymbol = new Map(
+        quotes.map((quote, index) => [quote.symbol, index]),
+      )
+      batch(() => {
+        this.#patch({
+          quotes,
+          workerReady: true,
+        })
+      })
+      return
+    }
+
+    if (data.sessionId !== this.#runtime.feedSessionId) return
+
+    for (const observer of this.#observers) {
+      observer.messageReceived?.()
+    }
+    this.#startMutation()
+    this.#patch({
+      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
+    })
+    const feedBatch = {
+      tickCount: data.tickCount,
+      updateCount: data.updates.length,
+      supersededUpdateCount: data.coalescedUpdateCount,
+    }
+    for (const observer of this.#observers) {
+      observer.batchApplied?.(feedBatch)
+    }
+  }
+
+  readonly #handleWorkerError = (error: ErrorEvent): void => {
+    this.#patch({ workerReady: false, running: false })
+    console.error('Market feed worker failed', error)
+  }
+
+  #resetWorker(rowCount: number): void {
+    this.#patch({ workerReady: false })
+    this.#runtime.resetWaitingForCommit = true
+    this.#runtime.resetSnapshotReady = false
+    this.#post({ type: 'set-running', running: false })
+    this.#post({ type: 'reset', rowCount })
+  }
+
+  #startMutation(): void {
+    this.#runtime.renderPending = true
+    for (const observer of this.#observers) {
+      observer.mutationStarted?.()
+    }
+  }
+
+  #patch(patch: Partial<MarketFeedState>): void {
+    this.store.setState((state) => ({ ...state, ...patch }))
+  }
+
+  #post(command: MarketFeedCommand): void {
+    this.#runtime.worker?.postMessage(command)
+  }
+}
diff --git a/examples/vue/realtime-trading/src/feed/sp500-instruments.ts b/examples/vue/realtime-trading/src/feed/sp500-instruments.ts
new file mode 100644
index 0000000000..c44eb5d152
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/sp500-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const sp500Instruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  sp500Instruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/vue/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/vue/realtime-trading/src/feed/worker/market-feed-engine.ts
new file mode 100644
index 0000000000..557f7c30a8
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -0,0 +1,177 @@
+import { globalInstruments } from '../sp500-instruments'
+import type {
+  MarketQuoteSnapshot,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const INITIAL_MARKET_SEED = 0x4d41524b
+const LIVE_FEED_SEED = 0x5449434b
+
+export class MarketFeedEngine {
+  #quotes: Array<MarketQuoteSnapshot> = []
+  #lastHistorySampledAt = new Uint32Array(0)
+  #random = createRandom(2_026)
+  #rowCursor = 0
+  #tickIndex = 0
+
+  reset(count: number): Array<MarketQuoteSnapshot> {
+    const random = createRandom(INITIAL_MARKET_SEED ^ count)
+    const createdAt = Date.now()
+
+    this.#quotes = Array.from({ length: count }, (_, index) => {
+      const [baseSymbol, company, market] =
+        globalInstruments[index % globalInstruments.length]
+      const series = Math.floor(index / globalInstruments.length)
+      const symbol = series === 0 ? baseSymbol : `${baseSymbol}${series}`
+      const previousClose = roundPrice(20 + random() * 480)
+      const open = roundPrice(previousClose * (1 + (random() - 0.5) * 0.016))
+      const spread = Math.max(0.01, open * (0.0002 + random() * 0.0004))
+      const history = Array.from({ length: 24 }, (_, historyIndex) =>
+        roundPrice(
+          open *
+            (1 + Math.sin(historyIndex / 4) * 0.002 + (random() - 0.5) * 0.001),
+        ),
+      )
+      const volume = Math.floor(50_000 + random() * 2_000_000)
+      const lastSize = Math.floor(10 + random() * 5_000)
+
+      return {
+        id: `instrument-${index}`,
+        symbol,
+        company,
+        venue: market,
+        previousClose,
+        open,
+        high: open,
+        low: open,
+        price: open,
+        bid: roundPrice(open - spread / 2),
+        ask: roundPrice(open + spread / 2),
+        bidSize: Math.floor(100 + random() * 25_000),
+        askSize: Math.floor(100 + random() * 25_000),
+        lastSize,
+        lastMove: 0,
+        lastUpdatedAt: createdAt,
+        volume,
+        turnover: roundMoney(open * volume),
+        history,
+      }
+    })
+
+    this.#random = createRandom(LIVE_FEED_SEED ^ count)
+    this.#rowCursor = 0
+    this.#lastHistorySampledAt = new Uint32Array(count)
+    this.#lastHistorySampledAt.fill(createdAt >>> 0)
+
+    return this.#quotes.map((quote) => ({
+      ...quote,
+      history: [...quote.history],
+    }))
+  }
+
+  applyTicks(
+    tickCount: number,
+    updateSparklines: boolean,
+    sparklineSampleIntervalMs: number,
+  ): Array<MarketQuoteUpdate> {
+    if (this.#quotes.length === 0 || tickCount <= 0) return []
+
+    const updatedAt = Date.now()
+    const sampledAt = updatedAt >>> 0
+    const sampleIntervalMs = Math.max(16, sparklineSampleIntervalMs)
+    const updatedQuotes = new Map<number, MarketQuoteUpdate>()
+    const stride = 97
+
+    this.#tickIndex = 0
+    while (this.#tickIndex < tickCount) {
+      this.#rowCursor = (this.#rowCursor + stride) % this.#quotes.length
+      const quote = this.#quotes[this.#rowCursor]
+      const lastSampledAt = this.#lastHistorySampledAt[this.#rowCursor]
+      const shouldUpdateHistory =
+        updateSparklines &&
+        (sampledAt - lastSampledAt) >>> 0 >= sampleIntervalMs
+
+      if (shouldUpdateHistory) {
+        this.#lastHistorySampledAt[this.#rowCursor] = sampledAt
+      }
+
+      this.#applyTick(quote, shouldUpdateHistory, updatedAt)
+
+      const previousUpdate = updatedQuotes.get(this.#rowCursor)
+      updatedQuotes.set(this.#rowCursor, {
+        index: this.#rowCursor,
+        price: quote.price,
+        bid: quote.bid,
+        ask: quote.ask,
+        bidSize: quote.bidSize,
+        askSize: quote.askSize,
+        lastSize: quote.lastSize,
+        lastMove: quote.lastMove,
+        lastUpdatedAt: quote.lastUpdatedAt,
+        high: quote.high,
+        low: quote.low,
+        volume: quote.volume,
+        turnover: quote.turnover,
+        ...(shouldUpdateHistory || previousUpdate?.history
+          ? { history: [...quote.history] }
+          : {}),
+      })
+      this.#tickIndex++
+    }
+
+    return [...updatedQuotes.values()]
+  }
+
+  #applyTick(
+    quote: MarketQuoteSnapshot,
+    updateHistory: boolean,
+    updatedAt: number,
+  ): void {
+    const previousPrice = quote.price
+    const volatility = 0.00015 + this.#random() * 0.0012
+    const move = previousPrice * (this.#random() - 0.495) * volatility
+    const nextPrice = roundPrice(Math.max(0.1, previousPrice + move))
+    const spread = Math.max(
+      0.01,
+      nextPrice * (0.00015 + this.#random() * 0.0005),
+    )
+
+    quote.lastMove = nextPrice - previousPrice
+    quote.price = nextPrice
+    quote.high = Math.max(quote.high, nextPrice)
+    quote.low = Math.min(quote.low, nextPrice)
+    quote.bid = roundPrice(nextPrice - spread / 2)
+    quote.ask = roundPrice(nextPrice + spread / 2)
+    quote.bidSize = Math.floor(100 + this.#random() * 25_000)
+    quote.askSize = Math.floor(100 + this.#random() * 25_000)
+    quote.lastSize = Math.floor(10 + this.#random() * 5_000)
+    quote.lastUpdatedAt = updatedAt
+    quote.volume += quote.lastSize
+    quote.turnover = roundMoney(quote.turnover + nextPrice * quote.lastSize)
+
+    if (updateHistory) {
+      quote.history = [...quote.history.slice(-23), nextPrice]
+    }
+  }
+}
+
+function createRandom(seed: number): () => number {
+  const runtime = { state: seed >>> 0 }
+  return () => {
+    runtime.state += 0x6d2b79f5
+    const stateValue = runtime.state
+    const firstMix = Math.imul(stateValue ^ (stateValue >>> 15), stateValue | 1)
+    const secondMix =
+      firstMix + Math.imul(firstMix ^ (firstMix >>> 7), firstMix | 61)
+    const value = firstMix ^ secondMix
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+function roundPrice(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/examples/vue/realtime-trading/src/feed/worker/market-feed-protocol.ts b/examples/vue/realtime-trading/src/feed/worker/market-feed-protocol.ts
new file mode 100644
index 0000000000..21997ec89c
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/worker/market-feed-protocol.ts
@@ -0,0 +1,70 @@
+export interface MarketQuoteSnapshot {
+  id: string
+  symbol: string
+  company: string
+  venue: string
+  previousClose: number
+  open: number
+  high: number
+  low: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  volume: number
+  turnover: number
+  history: Array<number>
+}
+
+export interface MarketQuoteUpdate {
+  index: number
+  price: number
+  bid: number
+  ask: number
+  bidSize: number
+  askSize: number
+  lastSize: number
+  lastMove: number
+  lastUpdatedAt: number
+  high: number
+  low: number
+  volume: number
+  turnover: number
+  history?: Array<number>
+}
+
+export type MarketFeedCommand =
+  | {
+      type: 'start'
+      rowCount: number
+      running: boolean
+      ticksPerSecond: number
+      publishIntervalMs: number
+      updateSparklines: boolean
+      sparklineSampleIntervalMs: number
+    }
+  | { type: 'set-running'; running: boolean }
+  | { type: 'set-rate'; ticksPerSecond: number }
+  | { type: 'set-publish-interval'; intervalMs: number }
+  | { type: 'set-sparklines'; enabled: boolean }
+  | { type: 'set-sparkline-interval'; intervalMs: number }
+  | { type: 'reset'; rowCount: number }
+  | { type: 'burst'; tickCount: number }
+
+export type MarketFeedEvent =
+  | {
+      type: 'snapshot'
+      sessionId: number
+      quotes: Array<MarketQuoteSnapshot>
+    }
+  | {
+      type: 'updates'
+      sessionId: number
+      tickCount: number
+      coalescedUpdateCount: number
+      updates: Array<MarketQuoteUpdate>
+    }
diff --git a/examples/vue/realtime-trading/src/feed/worker/market-feed.worker.ts b/examples/vue/realtime-trading/src/feed/worker/market-feed.worker.ts
new file mode 100644
index 0000000000..2b7a642fd9
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/worker/market-feed.worker.ts
@@ -0,0 +1,143 @@
+import { initialMarketFeedConfig } from '../market-feed-config'
+import { MarketFeedEngine } from './market-feed-engine'
+import type {
+  MarketFeedCommand,
+  MarketFeedEvent,
+  MarketQuoteUpdate,
+} from './market-feed-protocol'
+
+const engine = new MarketFeedEngine()
+const pendingUpdates = new Map<number, MarketQuoteUpdate>()
+const runtime = {
+  sessionId: 0,
+  pendingTickCount: 0,
+  pendingCoalescedUpdateCount: 0,
+  initialized: false,
+  running: true,
+  ticksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
+  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
+  publishTimerId: null as ReturnType<typeof setInterval> | null,
+  updateSparklines: initialMarketFeedConfig.updateSparklines,
+  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
+  tickBudget: 0,
+  lastTickAt: performance.now(),
+}
+
+addEventListener('message', ({ data }: MessageEvent<MarketFeedCommand>) => {
+  switch (data.type) {
+    case 'start':
+      runtime.running = data.running
+      runtime.ticksPerSecond = data.ticksPerSecond
+      runtime.publishIntervalMs = data.publishIntervalMs
+      runtime.updateSparklines = data.updateSparklines
+      runtime.sparklineSampleIntervalMs = data.sparklineSampleIntervalMs
+      restartPublishTimer()
+      reset(data.rowCount)
+      break
+    case 'set-running':
+      runtime.running = data.running
+      break
+    case 'set-rate':
+      runtime.ticksPerSecond = data.ticksPerSecond
+      break
+    case 'set-publish-interval':
+      runtime.publishIntervalMs = Math.max(4, data.intervalMs)
+      restartPublishTimer()
+      break
+    case 'set-sparklines':
+      runtime.updateSparklines = data.enabled
+      break
+    case 'set-sparkline-interval':
+      runtime.sparklineSampleIntervalMs = Math.max(16, data.intervalMs)
+      break
+    case 'reset':
+      reset(data.rowCount)
+      break
+    case 'burst':
+      produceTicks(data.tickCount)
+      flush()
+      break
+  }
+})
+
+setInterval(() => {
+  const now = performance.now()
+  const elapsed = Math.min(100, Math.max(0, now - runtime.lastTickAt))
+  runtime.lastTickAt = now
+
+  if (runtime.initialized && runtime.running) {
+    runtime.tickBudget += (runtime.ticksPerSecond * elapsed) / 1_000
+    const tickCount = Math.floor(runtime.tickBudget)
+    runtime.tickBudget -= tickCount
+    produceTicks(tickCount)
+  }
+}, 16)
+
+restartPublishTimer()
+
+function reset(rowCount: number): void {
+  runtime.initialized = true
+  runtime.sessionId++
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  runtime.tickBudget = 0
+  runtime.lastTickAt = performance.now()
+
+  post({
+    type: 'snapshot',
+    sessionId: runtime.sessionId,
+    quotes: engine.reset(rowCount),
+  })
+}
+
+function produceTicks(tickCount: number): void {
+  if (!runtime.initialized || tickCount <= 0) return
+
+  runtime.pendingTickCount += tickCount
+  for (const update of engine.applyTicks(
+    tickCount,
+    runtime.updateSparklines,
+    runtime.sparklineSampleIntervalMs,
+  )) {
+    const previousUpdate = pendingUpdates.get(update.index)
+    if (previousUpdate) runtime.pendingCoalescedUpdateCount++
+    pendingUpdates.set(update.index, {
+      ...update,
+      ...(update.history || !previousUpdate?.history
+        ? {}
+        : { history: previousUpdate.history }),
+    })
+  }
+}
+
+function flush(): void {
+  if (runtime.pendingTickCount === 0) return
+
+  const message: MarketFeedEvent = {
+    type: 'updates',
+    sessionId: runtime.sessionId,
+    tickCount: runtime.pendingTickCount,
+    coalescedUpdateCount: runtime.pendingCoalescedUpdateCount,
+    updates: [...pendingUpdates.values()],
+  }
+
+  runtime.pendingTickCount = 0
+  runtime.pendingCoalescedUpdateCount = 0
+  pendingUpdates.clear()
+  post(message)
+}
+
+function restartPublishTimer(): void {
+  if (runtime.publishTimerId !== null) {
+    clearInterval(runtime.publishTimerId)
+  }
+  runtime.publishTimerId = setInterval(
+    flush,
+    Math.max(4, runtime.publishIntervalMs),
+  )
+}
+
+function post(event: MarketFeedEvent): void {
+  postMessage(event)
+}
diff --git a/examples/vue/realtime-trading/src/index.css b/examples/vue/realtime-trading/src/index.css
new file mode 100644
index 0000000000..20264402de
--- /dev/null
+++ b/examples/vue/realtime-trading/src/index.css
@@ -0,0 +1,1048 @@
+:root {
+  color-scheme: dark;
+  --font-ui:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-family: var(--font-ui);
+  font-synthesis: none;
+  --background: #050505;
+  --panel: #080808;
+  --panel-raised: #111111;
+  --panel-hover: #181818;
+  --surface-bar: #080808;
+  --surface-toolbar: #0d0d0d;
+  --surface-table: #050505;
+  --surface-header: #101010;
+  --surface-control: #151515;
+  --border: #303030;
+  --border-soft: #242424;
+  --border-strong: #4a4a4a;
+  --text: #e7ebf0;
+  --text-strong: #ffffff;
+  --text-inverse: #f7f9fb;
+  --muted: #737982;
+  --blue: #62a9ff;
+  --blue-soft: #a9d0ff;
+  --green: #42e488;
+  --red: #ff646b;
+  --amber: #dfb465;
+  --depth-bid: #315774;
+  --depth-ask: #634049;
+  --row-alt: rgb(255 255 255 / 1.8%);
+  --row-selected: rgb(66 132 214 / 16%);
+  --control-border: #354456;
+  --control-hover: #192431;
+  --sidebar-width: 18rem;
+  --shell-bar-height: 2.625rem;
+  --metrics-height: 3.5rem;
+  --statusbar-height: 1.625rem;
+  --virtual-footer-height: 2.125rem;
+  --table-header-height: 2rem;
+  --table-row-height: 2rem;
+  --shell-inline-padding: 0.75rem;
+  --table-cell-inline-padding: 0.6rem;
+  --control-radius: 1px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  background: var(--background);
+}
+
+body {
+  color: var(--text);
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button,
+select {
+  color: var(--text);
+  background: var(--panel-raised);
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
+}
+
+button {
+  padding: 0.5rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.025em;
+}
+
+button:hover {
+  background: var(--control-hover);
+  border-color: var(--border-strong);
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 1px solid var(--blue);
+  outline-offset: 1px;
+}
+
+select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.trading-terminal {
+  --active-sidebar-width: var(--sidebar-width);
+  display: grid;
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background);
+  grid-template-areas:
+    'header sidebar'
+    'content sidebar'
+    'footer sidebar';
+  grid-template-columns: minmax(0, 1fr) var(--active-sidebar-width);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  transition: grid-template-columns 160ms ease;
+}
+
+.trading-terminal.is-sidebar-collapsed {
+  --active-sidebar-width: 0px;
+}
+
+.shell-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  grid-area: header;
+}
+
+.app-bar {
+  display: flex;
+  min-height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  background: var(--surface-bar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.045em;
+}
+
+.brand,
+.header-actions,
+.feed-status {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  gap: 0.65rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  gap: 0.75rem;
+}
+
+.sidebar-toggle {
+  display: grid;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  place-items: center;
+  color: var(--muted);
+  background: transparent;
+  border-color: transparent;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-strong);
+  background: var(--surface-control);
+  border-color: var(--border);
+}
+
+.sidebar-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-width: 1.4;
+}
+
+.feed-status {
+  gap: 0.4rem;
+  color: var(--muted);
+}
+
+.feed-status.is-running {
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--muted);
+  border-radius: 50%;
+}
+
+.feed-status.is-running .status-dot {
+  background: var(--green);
+}
+
+.development-warning {
+  flex: 0 0 auto;
+  padding: 0.3rem 0.75rem;
+  color: var(--amber);
+  background: color-mix(in srgb, var(--amber) 8%, var(--background));
+  border-bottom: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+}
+
+.market-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--panel);
+  grid-area: content;
+}
+
+.metrics-strip {
+  display: grid;
+  flex: 0 0 var(--metrics-height);
+  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
+  overflow-x: auto;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+  gap: 1px;
+}
+
+.metrics-strip article {
+  min-width: 0;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-bar);
+}
+
+.metrics-strip span,
+.metrics-strip small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.56rem;
+  letter-spacing: 0.045em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong {
+  display: block;
+  margin: 0.12rem 0 0.08rem;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics-strip strong.metric-alert {
+  color: var(--amber);
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.virtual-scroll-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--virtual-footer-height);
+  padding: 0 var(--shell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-toolbar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+table {
+  min-width: 100%;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-ui);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.virtual-table {
+  display: grid;
+}
+
+.virtual-table thead {
+  display: grid;
+}
+
+.virtual-table thead tr,
+.virtual-table-row {
+  display: flex;
+  width: 100%;
+}
+
+.virtual-table th,
+.virtual-table-row > td {
+  flex: 0 0 auto;
+}
+
+.virtual-table-body {
+  position: relative;
+  display: grid;
+}
+
+.virtual-table-row {
+  position: absolute;
+  left: 0;
+  height: var(--table-row-height);
+}
+
+.virtual-table-row > td {
+  display: block;
+}
+
+.trading-data-grid {
+  display: grid;
+}
+
+.trading-data-grid thead,
+.trading-data-grid tbody {
+  display: grid;
+}
+
+.trading-data-grid thead > tr,
+.trading-data-grid tbody > tr {
+  display: flex;
+  width: 100%;
+}
+
+.trading-data-grid tbody > tr {
+  min-height: var(--table-row-height);
+  content-visibility: auto;
+  contain-intrinsic-block-size: var(--table-row-height);
+}
+
+.trading-data-grid th,
+.trading-data-grid td {
+  flex: 0 0 auto;
+}
+
+thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+th {
+  height: var(--table-header-height);
+  padding: 0 var(--table-cell-inline-padding);
+  color: var(--muted);
+  background: var(--surface-header);
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th.column-group-header {
+  color: #666b72;
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+thead tr:first-child th.column-group-header {
+  color: #777d85;
+  font-size: 0.76rem;
+}
+
+th.numeric-header {
+  text-align: right;
+}
+
+td {
+  height: var(--table-row-height);
+  padding: 0 var(--table-cell-inline-padding);
+  overflow: hidden;
+  color: #eef1f5;
+  border-right: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-soft);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th:last-child,
+td:last-child {
+  border-right: 0;
+}
+
+td[data-column-id='market'],
+td[data-column-id='name'],
+td[data-column-id='symbol'] {
+  text-align: left;
+}
+
+td[data-column-id='market'] {
+  color: var(--blue);
+  font-weight: 550;
+}
+
+td[data-column-id='name'] {
+  color: var(--text-strong);
+}
+
+td[data-column-id='symbol'] {
+  color: #d8dde4;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(even) {
+  background: var(--row-alt);
+}
+
+tbody tr:hover {
+  background: var(--panel-hover);
+}
+
+tbody tr[data-symbol-selected='true'] {
+  background: var(--row-selected);
+  box-shadow: inset 2px 0 0 var(--blue);
+}
+
+.table-scroll:focus {
+  outline: none;
+}
+
+th {
+  position: relative;
+}
+
+.leaf-header-content {
+  display: flex;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  height: 100%;
+  align-items: stretch;
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+}
+
+.column-drag-handle,
+.sort-header-button {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
+.column-drag-handle {
+  flex: 0 0 1.05rem;
+  color: var(--muted);
+  cursor: grab;
+  opacity: 0.35;
+  font-size: 0.56rem;
+  letter-spacing: -0.32rem;
+  text-align: center;
+}
+
+.column-drag-handle:active {
+  cursor: grabbing;
+}
+
+th:hover .column-drag-handle,
+.column-drag-handle:focus-visible {
+  opacity: 0.9;
+}
+
+.column-drag-handle:hover,
+.sort-header-button:hover {
+  background: rgb(255 255 255 / 4%);
+  border-color: transparent;
+}
+
+th.is-column-dragging {
+  opacity: 0.45;
+}
+
+th.is-column-drop-target {
+  background: rgb(50 139 255 / 16%);
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
+th.is-column-drop-target::before {
+  position: absolute;
+  z-index: 6;
+  top: -1px;
+  bottom: -1px;
+  left: -2px;
+  width: 4px;
+  background: #62a9ff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 12px rgb(70 151 255 / 90%);
+  content: '';
+  pointer-events: none;
+}
+
+.sort-header-button {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+  padding-inline: 0.25rem var(--table-cell-inline-padding);
+  cursor: default;
+  text-align: inherit;
+}
+
+.numeric-header .sort-header-button {
+  justify-content: flex-end;
+}
+
+.sort-header-button.is-sortable {
+  cursor: pointer;
+}
+
+.sort-header-button:disabled {
+  opacity: 1;
+}
+
+.header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  flex: 0 0 auto;
+  color: #66717e;
+  font-size: 0.72rem;
+}
+
+.sort-indicator.is-active {
+  color: var(--blue-soft);
+}
+
+.column-resize-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.column-resize-handle::after {
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background: var(--border-strong);
+  content: '';
+  opacity: 0;
+}
+
+th:hover > .column-resize-handle::after,
+.column-resize-handle.is-resizing::after {
+  background: var(--blue);
+  opacity: 1;
+}
+
+tbody tr[aria-selected='true'] {
+  background: rgb(76 145 228 / 13%);
+}
+
+td[aria-selected='true'] {
+  position: relative;
+  background: rgb(70 139 222 / 12%);
+}
+
+td[data-cell-focused='true'] {
+  background: rgb(70 139 222 / 21%);
+}
+
+td[aria-selected='true']::after {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+td[data-selection-top='true']::after {
+  border-top-color: var(--blue);
+}
+
+td[data-selection-right='true']::after {
+  border-right-color: var(--blue);
+}
+
+td[data-selection-bottom='true']::after {
+  border-bottom-color: var(--blue);
+}
+
+td[data-selection-left='true']::after {
+  border-left-color: var(--blue);
+}
+
+.price-button {
+  min-width: 4.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+.price-button:hover {
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.move-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.move-cell.quote-up,
+.percent-change-cell.quote-up {
+  background: color-mix(in srgb, var(--green) 7%, transparent);
+}
+
+.move-cell.quote-down,
+.percent-change-cell.quote-down {
+  background: color-mix(in srgb, var(--red) 7%, transparent);
+}
+
+.percent-change-cell {
+  display: block;
+  width: calc(100% + 2 * var(--table-cell-inline-padding));
+  margin-inline: calc(-1 * var(--table-cell-inline-padding));
+  padding-inline: var(--table-cell-inline-padding);
+  line-height: var(--table-row-height);
+  text-align: right;
+}
+
+.spread-cell {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  color: var(--text);
+}
+
+.spread-cell small {
+  min-width: 2.8rem;
+  color: var(--muted);
+  font-size: 0.55rem;
+}
+
+.spread-cell.spread-wide,
+.spread-cell.spread-wide small {
+  color: var(--amber);
+}
+
+.depth-cell {
+  position: relative;
+  display: flex;
+  height: 17px;
+  overflow: hidden;
+  background: var(--surface-control);
+}
+
+.depth-bid,
+.depth-ask {
+  height: 100%;
+  opacity: 0.78;
+}
+
+.depth-bid {
+  background: var(--depth-bid);
+  border-right: 1px solid var(--panel);
+}
+
+.depth-ask {
+  background: var(--depth-ask);
+}
+
+.depth-values {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.28rem;
+  color: var(--text-strong);
+  font-size: 0.57rem;
+  text-shadow: 0 1px var(--background);
+}
+
+.quote-age {
+  color: var(--muted);
+}
+
+.quote-age-warm {
+  color: var(--amber);
+}
+
+.quote-age-stale {
+  color: var(--red);
+}
+
+.quote-up {
+  color: var(--green);
+}
+
+.quote-down {
+  color: var(--red);
+}
+
+.sparkline {
+  display: block;
+  width: 100%;
+  height: 1.35rem;
+  margin-left: auto;
+  color: var(--blue-soft);
+  overflow: visible;
+}
+
+.sparkline.quote-up {
+  color: var(--green);
+}
+
+.sparkline.quote-down {
+  color: var(--red);
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 1.25;
+  vector-effect: non-scaling-stroke;
+}
+
+.market-statusbar {
+  display: flex;
+  flex: 0 0 var(--statusbar-height);
+  min-height: var(--statusbar-height);
+  gap: 1.1rem;
+  align-items: center;
+  padding: 0 0.65rem;
+  color: var(--muted);
+  background: var(--surface-bar);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  grid-area: footer;
+  letter-spacing: 0.035em;
+}
+
+.market-statusbar strong {
+  margin-left: 0.25rem;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.sidebar-slot {
+  width: var(--sidebar-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--surface-table);
+  border-left: 1px solid var(--border);
+  grid-area: sidebar;
+  transition:
+    opacity 120ms ease,
+    transform 160ms ease,
+    visibility 160ms;
+}
+
+.is-sidebar-collapsed .sidebar-slot {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+}
+
+.configurator {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface-table);
+}
+
+.configurator > header {
+  display: flex;
+  height: var(--shell-bar-height);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--shell-inline-padding);
+  color: var(--text-strong);
+  background: var(--surface-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+}
+
+.configurator > header small {
+  color: var(--muted);
+  font-size: 0.54rem;
+  font-weight: 500;
+}
+
+.config-section {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.8rem var(--shell-inline-padding);
+  border-bottom: 1px solid var(--border);
+}
+
+.config-section h2 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.58rem;
+  letter-spacing: 0.075em;
+}
+
+.primary-action {
+  width: 100%;
+  color: var(--text-inverse);
+  background: var(--blue);
+  border-color: var(--blue-soft);
+}
+
+.primary-action:hover {
+  background: var(--blue-soft);
+  border-color: var(--text-strong);
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text);
+  font-size: 0.66rem;
+}
+
+.rate-field > span {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rate-field strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.field small {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+}
+
+input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  color: var(--text);
+  font-size: 0.66rem;
+  line-height: 1.3;
+}
+
+.toggle-field input {
+  margin: 0.12rem 0 0;
+  accent-color: var(--blue);
+}
+
+.toggle-field small {
+  display: block;
+  margin-top: 0.14rem;
+  color: var(--muted);
+  font-size: 0.57rem;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.4rem;
+}
+
+.diagnostics dl,
+.selected-instrument dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.diagnostics dl > div,
+.selected-instrument dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.diagnostics dl > div:last-child,
+.selected-instrument dl > div:last-child {
+  border-bottom: 0;
+}
+
+.diagnostics dl > div:has(dd[data-testid$='-breakdown']) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+  padding-block: 0.28rem;
+}
+
+.diagnostics dd[data-testid$='-breakdown'] {
+  width: 100%;
+  overflow-x: auto;
+  padding-block: 0.12rem;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+dt {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+dd {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+}
+
+.selection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.selection div {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.selection strong {
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.selection span,
+.selection small,
+.selected-instrument p {
+  color: var(--muted);
+  font-size: 0.61rem;
+}
+
+.selected-instrument p {
+  margin: 0;
+  line-height: 1.45;
+}
+
+@media (max-width: 980px) {
+  :root {
+    --sidebar-width: 15.625rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .trading-terminal {
+    --active-sidebar-width: 0px;
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .market-panel {
+    min-height: 0;
+  }
+
+  .table-scroll {
+    min-height: 0;
+  }
+
+  .sidebar-slot {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--sidebar-width), calc(100vw - 2.75rem));
+    box-shadow: -18px 0 42px rgb(0 0 0 / 48%);
+  }
+
+  .is-sidebar-collapsed .sidebar-slot {
+    box-shadow: none;
+  }
+}
diff --git a/examples/vue/realtime-trading/src/main.ts b/examples/vue/realtime-trading/src/main.ts
new file mode 100644
index 0000000000..196e4d4b2c
--- /dev/null
+++ b/examples/vue/realtime-trading/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import { App } from './App'
+import './index.css'
+
+createApp(App).mount('#root')
diff --git a/examples/vue/realtime-trading/src/shell/TradingShell.tsx b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
new file mode 100644
index 0000000000..4297c5244b
--- /dev/null
+++ b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
@@ -0,0 +1,468 @@
+import { computed, defineComponent, ref } from 'vue'
+import { useSelector } from '@tanstack/vue-store'
+import {
+  feedSampleRateAt,
+  feedSampleRateIndex,
+  feedSampleRateOptions,
+} from '../feed/feed-sample-rates'
+import {
+  FORCED_VIRTUALIZATION_ROW_COUNT,
+  resolveVirtualScrollMode,
+} from '../table/trading-row-virtualizer'
+import {
+  useMarketFeedController,
+  useMarketFeedState,
+  useTradingShellController,
+  useTradingShellState,
+} from './trading-shell-context'
+import { configuratorOptions } from './configurator-options'
+import type { FeedMetrics } from '../benchmark/benchmark-monitor'
+
+const integerFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 0,
+})
+const rateFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export const TradingShell = defineComponent({
+  name: 'TradingShell',
+  setup(_, { slots }) {
+    const sidebarOpen = ref(true)
+    return () => (
+      <main
+        class={[
+          'trading-terminal',
+          !sidebarOpen.value && 'is-sidebar-collapsed',
+        ]}
+      >
+        <div class="shell-header">
+          <AppHeader
+            sidebarOpen={sidebarOpen.value}
+            onSidebarToggle={() => {
+              sidebarOpen.value = !sidebarOpen.value
+            }}
+          />
+          {import.meta.env.DEV && (
+            <aside class="development-warning">
+              DEV BUILD — use the production build before recording results.
+            </aside>
+          )}
+        </div>
+        <section class="market-panel" aria-label="Live synthetic quotes">
+          <MetricsStrip />
+          {slots.default?.()}
+        </section>
+        <MarketStatusbar />
+        <div class="sidebar-slot">
+          {sidebarOpen.value && <Configurator />}
+        </div>
+      </main>
+    )
+  },
+})
+
+const AppHeader = defineComponent({
+  name: 'AppHeader',
+  props: {
+    sidebarOpen: { type: Boolean, required: true },
+    onSidebarToggle: { type: Function, required: true },
+  },
+  setup(props) {
+    const state = useMarketFeedState((feedState) => ({
+      workerReady: feedState.workerReady,
+      running: feedState.running,
+    }))
+    return () => (
+      <header class="app-bar">
+        <div class="brand"><strong>MARKET MONITOR</strong></div>
+        <div class="header-actions">
+          <span
+            class={[
+              'feed-status',
+              state.value.workerReady && state.value.running && 'is-running',
+            ]}
+            data-testid="feed-status"
+          >
+            <span class="status-dot" aria-hidden="true" />
+            {!state.value.workerReady
+              ? 'FEED CONNECTING'
+              : state.value.running
+                ? 'FEED LIVE'
+                : 'FEED PAUSED'}
+          </span>
+          <button
+            class="sidebar-toggle"
+            type="button"
+            aria-expanded={props.sidebarOpen}
+            aria-controls="benchmark-configurator"
+            aria-label={
+              props.sidebarOpen ? 'Close configurator' : 'Open configurator'
+            }
+            onClick={() => (props.onSidebarToggle as () => void)()}
+          >
+            <svg viewBox="0 0 20 20" aria-hidden="true">
+              <rect x="2.5" y="3" width="15" height="14" rx="1.5" />
+              <path d="M12.5 3v14" />
+            </svg>
+          </button>
+        </div>
+      </header>
+    )
+  },
+})
+
+const MetricsStrip = defineComponent({
+  name: 'MetricsStrip',
+  setup() {
+    const state = useTradingShellState((benchmark) => ({
+      metrics: benchmark.metrics,
+      longAnimationFramesSupported: benchmark.longAnimationFramesSupported,
+    }))
+    return () => {
+      const metrics = state.value.metrics
+      return (
+        <section class="metrics-strip" aria-label="Live performance metrics">
+          <Metric label="WORKER SAMPLES" value={formatRate(metrics.actualTicksPerSecond)} detail="generated samples/s" testId="actual-rate" />
+          <Metric label="ROW UPDATES" value={formatRate(metrics.rowUpdatesPerSecond)} detail="unique rows applied/s" testId="row-update-rate" />
+          <Metric label="MESSAGES" value={metrics.workerMessagesPerSecond.toFixed(1)} detail="worker messages/s" testId="message-rate" />
+          <Metric label="STATE APPLIES" value={metrics.stateApplicationsPerSecond.toFixed(1)} detail="quote snapshots/s" testId="state-apply-rate" />
+          <Metric label="TABLE COMMITS" value={metrics.tableRendersPerSecond.toFixed(1)} detail="completed renders/s" testId="table-render-rate" />
+          <Metric label="AVG RENDER" value={formatMs(metrics.averageRenderMs)} detail="mutation → render" />
+          <Metric label="P95 RENDER" value={formatMs(metrics.p95RenderMs)} detail={`max ${formatMs(metrics.maxRenderMs)}`} />
+          <Metric
+            label="LONG FRAMES"
+            value={
+              state.value.longAnimationFramesSupported
+                ? String(metrics.longAnimationFrames)
+                : 'N/A'
+            }
+            detail={
+              state.value.longAnimationFramesSupported
+                ? `worst ${formatMs(metrics.worstLongAnimationFrameMs)}`
+                : 'unsupported'
+            }
+            testId="long-frame-count"
+          />
+        </section>
+      )
+    }
+  },
+})
+
+const Metric = defineComponent({
+  name: 'Metric',
+  props: {
+    label: { type: String, required: true },
+    value: { type: String, required: true },
+    detail: { type: String, required: true },
+    testId: String,
+  },
+  setup(props) {
+    return () => (
+      <article>
+        <span>{props.label}</span>
+        <strong data-testid={props.testId}>{props.value}</strong>
+        <small>{props.detail}</small>
+      </article>
+    )
+  },
+})
+
+const MarketStatusbar = defineComponent({
+  name: 'MarketStatusbar',
+  setup() {
+    const state = useTradingShellState((benchmark) => ({
+      lastBatchSize: benchmark.metrics.lastBatchSize,
+      lastUpdateCount: benchmark.metrics.lastUpdateCount,
+      mountedCells: benchmark.mountedCells,
+      liveComponents: benchmark.liveComponents,
+    }))
+    return () => (
+      <footer class="market-statusbar">
+        <span>MESSAGE SAMPLES <strong>{formatInteger(state.value.lastBatchSize)}</strong></span>
+        <span>ROW UPDATES <strong>{formatInteger(state.value.lastUpdateCount)}</strong></span>
+        <span>HOSTS <strong>{formatInteger(state.value.mountedCells)}</strong></span>
+        <span>COMPONENTS <strong>{formatInteger(state.value.liveComponents)}</strong></span>
+      </footer>
+    )
+  },
+})
+
+const Configurator = defineComponent({
+  name: 'Configurator',
+  setup() {
+    const controller = useTradingShellController()
+    const feed = useMarketFeedController()
+    const feedState = useMarketFeedState((state) => state)
+    const benchmarkState = useTradingShellState((state) => state)
+    const rendererMode = useSelector(controller.renderAtoms.rendererMode)
+    const virtualScrollForced = computed(
+      () =>
+        feedState.value.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT,
+    )
+    const virtualScrollMode = computed(() =>
+      resolveVirtualScrollMode(
+        benchmarkState.value.requestedVirtualScrollMode,
+        feedState.value.instrumentCount,
+      ),
+    )
+
+    return () => (
+      <aside
+        id="benchmark-configurator"
+        class="configurator"
+        aria-label="Benchmark configurator"
+      >
+        <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+        <section class="config-section" aria-labelledby="feed-settings">
+          <h2 id="feed-settings">FEED</h2>
+          <button
+            class="primary-action"
+            type="button"
+            data-testid="feed-toggle"
+            onClick={feed.actions.toggle}
+          >
+            {feedState.value.running ? 'PAUSE FEED' : 'START FEED'}
+          </button>
+          <label class="field">
+            <span>Instruments (rows)</span>
+            <select
+              data-testid="instrument-count-select"
+              value={feedState.value.instrumentCount}
+              onChange={(event) => {
+                controller.actions.resetViewState()
+                feed.actions.setInstrumentCount(numberValue(event))
+              }}
+            >
+              {configuratorOptions.instrumentCounts.map(optionNode)}
+            </select>
+          </label>
+          <label class="field rate-field">
+            <span>
+              Synthetic quote workload
+              <strong data-testid="target-sample-rate">
+                {formatRate(feedState.value.targetTicksPerSecond)} samples/s
+              </strong>
+            </span>
+            <input
+              data-testid="target-rate-slider"
+              type="range"
+              min={0}
+              max={feedSampleRateOptions.length - 1}
+              step={1}
+              value={feedSampleRateIndex(feedState.value.targetTicksPerSecond)}
+              onChange={(event) =>
+                feed.actions.setTargetRate(
+                  feedSampleRateAt(numberValue(event)),
+                )
+              }
+            />
+            <small>
+              Fixed worker-side workload levels. Samples are coalesced; this is
+              not the message delivery rate.
+            </small>
+          </label>
+          <label class="field">
+            <span>Worker delivery interval</span>
+            <select
+              data-testid="publish-interval-select"
+              value={feedState.value.publishIntervalMs}
+              onChange={(event) =>
+                feed.actions.setPublishInterval(numberValue(event))
+              }
+            >
+              {configuratorOptions.workerDeliveryIntervals.map(optionNode)}
+            </select>
+            <small>One coalesced worker message at this target cadence.</small>
+          </label>
+        </section>
+        <section class="config-section" aria-labelledby="render-settings">
+          <h2 id="render-settings">RENDER PATH</h2>
+          <label class="field" data-testid="virtual-scroll-mode">
+            <span>Row rendering</span>
+            <select
+              data-testid="virtual-scroll-select"
+              value={virtualScrollMode.value}
+              disabled={virtualScrollForced.value}
+              onChange={(event) =>
+                controller.actions.setVirtualScrollEnabled(
+                  stringValue(event) === 'tanstack',
+                )
+              }
+            >
+              {configuratorOptions.rowRenderingModes.map(optionNode)}
+            </select>
+            <small>
+              {virtualScrollForced.value
+                ? 'TanStack Virtual is required and locked at 250 or more rows.'
+                : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'}
+            </small>
+          </label>
+          <label class="toggle-field">
+            <input
+              type="checkbox"
+              checked={rendererMode.value === 'swap'}
+              onChange={(event) =>
+                controller.actions.setRendererMode(
+                  checkedValue(event) ? 'swap' : 'stable',
+                )
+              }
+            />
+            <span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span>
+          </label>
+          <label class="toggle-field">
+            <input
+              type="checkbox"
+              checked={feedState.value.updateSparklines}
+              onChange={(event) =>
+                feed.actions.setSparklineUpdates(checkedValue(event))
+              }
+            />
+            <span>Update intraday charts<small>sample rolling prices independently</small></span>
+          </label>
+          <label class="field">
+            <span>Intraday chart sampling</span>
+            <select
+              data-testid="sparkline-sample-interval-select"
+              value={feedState.value.sparklineSampleIntervalMs}
+              onChange={(event) =>
+                feed.actions.setSparklineSampleInterval(numberValue(event))
+              }
+            >
+              {configuratorOptions.intradaySamplingIntervals.map(optionNode)}
+            </select>
+          </label>
+        </section>
+        <section class="config-section" aria-labelledby="stress-actions">
+          <h2 id="stress-actions">STRESS ACTIONS</h2>
+          <div class="action-grid">
+            <button type="button" onClick={feed.actions.runBurst}>RUN 25K BURST</button>
+            <button type="button" onClick={controller.actions.resetMarket}>RESET SESSION</button>
+          </div>
+        </section>
+        <Diagnostics />
+        <SelectedInstrument />
+      </aside>
+    )
+  },
+})
+
+const Diagnostics = defineComponent({
+  name: 'Diagnostics',
+  setup() {
+    const state = useTradingShellState((benchmark) => benchmark)
+    return () => {
+      const { metrics } = state.value
+      return (
+        <section class="config-section diagnostics" aria-labelledby="diagnostics">
+          <h2 id="diagnostics">DIAGNOSTICS</h2>
+          <dl>
+            <Diagnostic label="Mounted cells" value={formatInteger(state.value.mountedCells)} />
+            <Diagnostic label="Live components" value={formatInteger(state.value.liveComponents)} />
+            <Diagnostic label="Created / destroyed" value={`${formatInteger(metrics.componentsCreated)} / ${formatInteger(metrics.componentsDestroyed)}`} />
+            <Diagnostic label="Renderer callbacks / s" value={formatRate(metrics.cellRendererCallsPerSecond)} testId="cell-render-rate" />
+            <Diagnostic label="Component executions / s" value={formatRate(metrics.componentRenderCallsPerSecond)} testId="component-render-rate" />
+            <Diagnostic label="Executions by component / s" value={formatInvocationRates(metrics.componentRenderRates)} testId="component-render-breakdown" />
+            <Diagnostic label="Callbacks by column / s" value={formatInvocationRates(metrics.cellRendererRates)} testId="cell-render-breakdown" />
+            <Diagnostic label="DOM mutation records / s" value={formatRate(metrics.domMutationsPerSecond)} testId="dom-mutation-rate" />
+            <Diagnostic label="Core row model calls / s" value={metrics.rowModelCallsPerSecond.toFixed(1)} testId="row-model-call-rate" />
+            <Diagnostic label="Core row model avg / max" value={`${formatMs(metrics.rowModelAverageMs)} / ${formatMs(metrics.rowModelMaxMs)}`} testId="row-model-duration" />
+            <Diagnostic label="Visible rows" value={formatInteger(metrics.visibleRows)} testId="visible-row-count" />
+            <Diagnostic label="Worker messages" value={formatInteger(metrics.workerMessages)} testId="worker-messages" />
+            <Diagnostic label="Worker-coalesced updates / s" value={formatRate(metrics.supersededUpdatesPerSecond)} testId="superseded-update-rate" />
+            <Diagnostic label="Last samples / updated rows" value={`${formatInteger(metrics.lastBatchSize)} / ${formatInteger(metrics.lastUpdateCount)}`} />
+            <Diagnostic label="Renders > 16.7 ms" value={formatInteger(metrics.slowRenders)} />
+            <Diagnostic label="JS heap" value={metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`} />
+          </dl>
+        </section>
+      )
+    }
+  },
+})
+
+const Diagnostic = defineComponent({
+  name: 'Diagnostic',
+  props: {
+    label: { type: String, required: true },
+    value: { type: String, required: true },
+    testId: String,
+  },
+  setup(props) {
+    return () => (
+      <div><dt>{props.label}</dt><dd data-testid={props.testId}>{props.value}</dd></div>
+    )
+  },
+})
+
+const SelectedInstrument = defineComponent({
+  name: 'SelectedInstrument',
+  setup() {
+    const controller = useTradingShellController()
+    const feed = useMarketFeedController()
+    const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
+    const quotes = useMarketFeedState((state) => state.quotes)
+    const selectedQuote = computed(() =>
+      feed.getQuoteBySymbol(quotes.value, selectedSymbol.value),
+    )
+    return () => (
+      <section class="config-section selected-instrument" data-testid="selected-instrument">
+        <h2>SELECTED INSTRUMENT</h2>
+        {selectedQuote.value ? (
+          <>
+            <div class="selection">
+              <div><strong>{selectedQuote.value.symbol}</strong><span>{selectedQuote.value.company}</span></div>
+              <small>{selectedQuote.value.venue}</small>
+            </div>
+            <dl>
+              <div><dt>Last</dt><dd>{selectedQuote.value.price.toFixed(2)}</dd></div>
+              <div><dt>Bid / ask</dt><dd>{selectedQuote.value.bid.toFixed(2)} / {selectedQuote.value.ask.toFixed(2)}</dd></div>
+            </dl>
+          </>
+        ) : (
+          <p>Click or begin a cell selection in any row to inspect its instrument.</p>
+        )}
+      </section>
+    )
+  },
+})
+
+function optionNode(option: { readonly label: string; readonly value: number | string }) {
+  return <option key={option.value} value={option.value}>{option.label}</option>
+}
+
+function stringValue(event: Event): string {
+  return (event.target as HTMLInputElement | HTMLSelectElement).value
+}
+
+function numberValue(event: Event): number {
+  return Number(stringValue(event))
+}
+
+function checkedValue(event: Event): boolean {
+  return (event.target as HTMLInputElement).checked
+}
+
+function formatRate(value: number): string {
+  return rateFormatter.format(value)
+}
+
+function formatInteger(value: number): string {
+  return integerFormatter.format(value)
+}
+
+function formatMs(value: number): string {
+  return `${value.toFixed(2)} ms`
+}
+
+function formatInvocationRates(
+  rates: FeedMetrics['cellRendererRates'],
+): string {
+  const active = rates.filter((entry) => entry.callsPerSecond > 0)
+  return active.length === 0
+    ? '—'
+    : active
+        .map((entry) => `${entry.name} ${formatRate(entry.callsPerSecond)}`)
+        .join(' · ')
+}
diff --git a/examples/vue/realtime-trading/src/shell/configurator-options.ts b/examples/vue/realtime-trading/src/shell/configurator-options.ts
new file mode 100644
index 0000000000..49a9566fe7
--- /dev/null
+++ b/examples/vue/realtime-trading/src/shell/configurator-options.ts
@@ -0,0 +1,55 @@
+export interface ConfiguratorOption<TValue extends number | string> {
+  readonly label: string
+  readonly value: TValue
+}
+
+const instrumentCountOptions = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '150', value: 150 },
+  { label: '250', value: 250 },
+  { label: '350', value: 350 },
+  { label: '500', value: 500 },
+  { label: '750', value: 750 },
+  { label: '1,000', value: 1_000 },
+  { label: '1,500', value: 1_500 },
+  { label: '2,500', value: 2_500 },
+  { label: '5,000', value: 5_000 },
+  { label: '1,000,000', value: 1_000_000 },
+  { label: '10,000,000', value: 10_000_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const workerDeliveryOptions = [
+  { label: '8 ms · 125 msg/s', value: 8 },
+  { label: '16 ms · 62.5 msg/s', value: 16 },
+  { label: '20 ms · 50 msg/s', value: 20 },
+  { label: '33 ms · 30 msg/s', value: 33 },
+  { label: '50 ms · 20 msg/s', value: 50 },
+  { label: '100 ms · 10 msg/s', value: 100 },
+  { label: '250 ms · 4 msg/s', value: 250 },
+  { label: '500 ms · 2 msg/s', value: 500 },
+  { label: '1,000 ms · 1 msg/s', value: 1_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+const rowRenderingOptions = [
+  { label: 'Full DOM · render every row', value: 'none' },
+  { label: 'TanStack Virtual · visible rows only', value: 'tanstack' },
+] as const satisfies ReadonlyArray<ConfiguratorOption<string>>
+
+const intradaySamplingOptions = [
+  { label: '16 ms · fastest', value: 16 },
+  { label: '33 ms · very fast', value: 33 },
+  { label: '50 ms · fast', value: 50 },
+  { label: '100 ms', value: 100 },
+  { label: '250 ms', value: 250 },
+  { label: '500 ms', value: 500 },
+  { label: '1,000 ms', value: 1_000 },
+  { label: '2,000 ms', value: 2_000 },
+] as const satisfies ReadonlyArray<ConfiguratorOption<number>>
+
+export const configuratorOptions = {
+  instrumentCounts: instrumentCountOptions,
+  workerDeliveryIntervals: workerDeliveryOptions,
+  rowRenderingModes: rowRenderingOptions,
+  intradaySamplingIntervals: intradaySamplingOptions,
+} as const
diff --git a/examples/vue/realtime-trading/src/shell/trading-shell-context.ts b/examples/vue/realtime-trading/src/shell/trading-shell-context.ts
new file mode 100644
index 0000000000..266cce4eab
--- /dev/null
+++ b/examples/vue/realtime-trading/src/shell/trading-shell-context.ts
@@ -0,0 +1,50 @@
+import { inject, provide } from 'vue'
+import { useSelector } from '@tanstack/vue-store'
+import type { InjectionKey } from 'vue'
+import type {
+  MarketFeedController,
+  MarketFeedState,
+} from '../feed/market-feed-controller'
+import type {
+  TradingBenchmarkController,
+  TradingBenchmarkState,
+} from '../benchmark/trading-benchmark-controller'
+
+interface TradingControllers {
+  benchmark: TradingBenchmarkController
+  feed: MarketFeedController
+}
+
+const tradingControllersKey: InjectionKey<TradingControllers> = Symbol(
+  'trading-controllers',
+)
+
+export function provideTradingControllers(
+  benchmark: TradingBenchmarkController,
+): void {
+  provide(tradingControllersKey, { benchmark, feed: benchmark.feed })
+}
+
+export function useTradingShellController(): TradingBenchmarkController {
+  const controllers = inject(tradingControllersKey)
+  if (!controllers) throw new Error('Missing trading controllers')
+  return controllers.benchmark
+}
+
+export function useMarketFeedController(): MarketFeedController {
+  const controllers = inject(tradingControllersKey)
+  if (!controllers) throw new Error('Missing trading controllers')
+  return controllers.feed
+}
+
+export function useTradingShellState<TSelected>(
+  selector: (state: TradingBenchmarkState) => TSelected,
+) {
+  return useSelector(useTradingShellController().store, selector)
+}
+
+export function useMarketFeedState<TSelected>(
+  selector: (state: MarketFeedState) => TSelected,
+) {
+  return useSelector(useMarketFeedController().store, selector)
+}
diff --git a/examples/vue/realtime-trading/src/table/table-config/quote-cells.tsx b/examples/vue/realtime-trading/src/table/table-config/quote-cells.tsx
new file mode 100644
index 0000000000..e03118649d
--- /dev/null
+++ b/examples/vue/realtime-trading/src/table/table-config/quote-cells.tsx
@@ -0,0 +1,202 @@
+import { defineComponent, onMounted, onUnmounted } from 'vue'
+import type { PropType } from 'vue'
+
+export const quoteCellLifecycle = {
+  created: 0,
+  destroyed: 0,
+}
+
+export const quoteCellRendererNames = [
+  'Market',
+  'Name',
+  'Symbol',
+  'Last',
+  'Change',
+  'ChangePercent',
+  'Bid',
+  'BidVolume',
+  'Ask',
+  'AskVolume',
+  'Open',
+  'High',
+  'Low',
+  'Intraday',
+] as const
+
+export const quoteComponentNames = [
+  'PriceCell',
+  'StableMoveCell',
+  'UpMoveCell',
+  'DownMoveCell',
+  'PercentChangeCell',
+  'SparklineCell',
+] as const
+
+export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
+export type QuoteComponentName = (typeof quoteComponentNames)[number]
+
+const createCounterMap = <Name extends string>(
+  names: ReadonlyArray<Name>,
+): Record<Name, number> =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
+  cellRendererCallsByName: createCounterMap(quoteCellRendererNames),
+  componentRenderCallsByName: createCounterMap(quoteComponentNames),
+}
+
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value
+}
+
+function useLifecycleCounter(componentName: QuoteComponentName): () => void {
+  onMounted(() => {
+    quoteCellLifecycle.created++
+  })
+  onUnmounted(() => {
+    quoteCellLifecycle.destroyed++
+  })
+  return () => {
+    quoteRenderDiagnostics.componentRenderCalls++
+    quoteRenderDiagnostics.componentRenderCallsByName[componentName]++
+  }
+}
+
+export const PriceCell = defineComponent({
+  name: 'PriceCell',
+  props: {
+    price: { type: Number, required: true },
+    move: { type: Number, required: true },
+    onSelect: {
+      type: Function as PropType<() => void>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const recordRender = useLifecycleCounter('PriceCell')
+    return () => {
+      recordRender()
+      return (
+        <button
+          class={[
+            'price-button',
+            props.move >= 0 ? 'quote-up' : 'quote-down',
+          ]}
+          onClick={props.onSelect}
+        >
+          {props.price.toFixed(2)}
+        </button>
+      )
+    }
+  },
+})
+
+function createMoveCell(
+  name: 'StableMoveCell' | 'UpMoveCell' | 'DownMoveCell',
+  fixedDirection?: 'up' | 'down',
+) {
+  return defineComponent({
+    name,
+    props: { move: { type: Number, required: true } },
+    setup(props) {
+      const recordRender = useLifecycleCounter(name)
+      return () => {
+        recordRender()
+        const direction = fixedDirection ?? (props.move >= 0 ? 'up' : 'down')
+        const indicator =
+          fixedDirection === 'up' ? '▲ ' : fixedDirection === 'down' ? '▼ ' : ''
+        return (
+          <span class={['move-cell', `quote-${direction}`]}>
+            {indicator}
+            {formatSigned(props.move)}
+          </span>
+        )
+      }
+    },
+  })
+}
+
+export const StableMoveCell = createMoveCell('StableMoveCell')
+export const UpMoveCell = createMoveCell('UpMoveCell', 'up')
+export const DownMoveCell = createMoveCell('DownMoveCell', 'down')
+
+export const PercentChangeCell = defineComponent({
+  name: 'PercentChangeCell',
+  props: { value: { type: Number, required: true } },
+  setup(props) {
+    const recordRender = useLifecycleCounter('PercentChangeCell')
+    return () => {
+      recordRender()
+      return (
+        <span
+          class={[
+            'percent-change-cell',
+            props.value >= 0 ? 'quote-up' : 'quote-down',
+          ]}
+        >
+          {props.value >= 0 ? '+' : ''}
+          {props.value.toFixed(2)}%
+        </span>
+      )
+    }
+  },
+})
+
+export const SparklineCell = defineComponent({
+  name: 'SparklineCell',
+  props: {
+    values: {
+      type: Array as PropType<ReadonlyArray<number>>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const recordRender = useLifecycleCounter('SparklineCell')
+    return () => {
+      recordRender()
+      const rising =
+        (props.values.at(-1) ?? 0) >= (props.values[0] ?? 0)
+      const { min, max } = findRange(props.values)
+      const range = max - min || 1
+      const denominator = Math.max(1, props.values.length - 1)
+      const points = props.values
+        .map((value, index) => {
+          const x = (index / denominator) * 100
+          const y = 22 - ((value - min) / range) * 20
+          return `${x.toFixed(1)},${y.toFixed(1)}`
+        })
+        .join(' ')
+      return (
+        <svg
+          class={['sparkline', rising ? 'quote-up' : 'quote-down']}
+          viewBox="0 0 100 24"
+          preserveAspectRatio="none"
+        >
+          <polyline points={points} />
+        </svg>
+      )
+    }
+  },
+})
+
+function formatSigned(value: number): string {
+  return `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+}
+
+function findRange(values: ReadonlyArray<number>): {
+  min: number
+  max: number
+} {
+  const first = values[0] ?? 0
+  return values.reduce(
+    (range, value) => ({
+      min: Math.min(range.min, value),
+      max: Math.max(range.max, value),
+    }),
+    { min: first, max: first },
+  )
+}
diff --git a/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx b/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
new file mode 100644
index 0000000000..781ee6e079
--- /dev/null
+++ b/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
@@ -0,0 +1,277 @@
+import { defineComponent } from 'vue'
+import { useSelector } from '@tanstack/vue-store'
+import { useTradingShellController } from '../../shell/trading-shell-context'
+import {
+  DownMoveCell,
+  PercentChangeCell,
+  PriceCell,
+  SparklineCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells'
+import type { PropType, VNodeChild } from 'vue'
+import type { MarketQuote } from '../../feed/market-data'
+
+export type RendererMode = 'stable' | 'swap'
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+
+interface TradingCellContext {
+  row: { original: MarketQuote }
+}
+
+export interface TradingColumnDefinition {
+  id: string
+  header: string
+  size?: number
+  columns?: Array<TradingColumnDefinition>
+  accessorFn?: (row: MarketQuote) => unknown
+  enableSorting?: boolean
+  filterFn?: 'includesString'
+  sortFn?: 'basic'
+  cell?: (context: TradingCellContext) => VNodeChild
+}
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export const tradingColumns: Array<TradingColumnDefinition> = [
+  {
+    id: 'instrument',
+    header: 'Instrument',
+    columns: [
+      {
+        id: 'market',
+        header: 'Market',
+        size: 72,
+        accessorFn: (row) => row.venue,
+        cell: ({ row }) => recordCellRender('Market', row.original.venue),
+      },
+      {
+        id: 'name',
+        header: 'Name',
+        size: 180,
+        accessorFn: (row) => row.company,
+        cell: ({ row }) => recordCellRender('Name', row.original.company),
+      },
+      {
+        id: 'symbol',
+        header: 'Symbol',
+        size: 92,
+        accessorFn: (row) => row.symbol,
+        filterFn: 'includesString',
+        cell: ({ row }) => recordCellRender('Symbol', row.original.symbol),
+      },
+    ],
+  },
+  {
+    id: 'priceAndChange',
+    header: 'Price & Change',
+    columns: [
+      {
+        id: 'price',
+        header: 'Price',
+        size: 96,
+        accessorFn: (row) => row.price,
+        sortFn: 'basic',
+        cell: ({ row }) =>
+          recordCellRender('Last', <LastPriceCell quote={row.original} />),
+      },
+      {
+        id: 'change',
+        header: 'Chg',
+        size: 94,
+        accessorFn: (row) => getDayChange(row),
+        cell: ({ row }) =>
+          recordCellRender('Change', <DayChangeCell quote={row.original} />),
+      },
+      {
+        id: 'changePercent',
+        header: 'Chg%',
+        size: 90,
+        accessorFn: (row) => getDayChangePercent(row),
+        cell: ({ row }) =>
+          recordCellRender(
+            'ChangePercent',
+            <PercentChangeCell value={getDayChangePercent(row.original)} />,
+          ),
+      },
+    ],
+  },
+  {
+    id: 'orderBook',
+    header: 'Order Book',
+    columns: [
+      {
+        id: 'bid',
+        header: 'Bid',
+        size: 90,
+        accessorFn: (row) => row.bid,
+        cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)),
+      },
+      {
+        id: 'bidSize',
+        header: 'Bid Vol',
+        size: 100,
+        accessorFn: (row) => row.bidSize,
+        cell: ({ row }) =>
+          recordCellRender(
+            'BidVolume',
+            compactFormatter.format(row.original.bidSize),
+          ),
+      },
+      {
+        id: 'ask',
+        header: 'Ask',
+        size: 90,
+        accessorFn: (row) => row.ask,
+        cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)),
+      },
+      {
+        id: 'askSize',
+        header: 'Ask Vol',
+        size: 100,
+        accessorFn: (row) => row.askSize,
+        cell: ({ row }) =>
+          recordCellRender(
+            'AskVolume',
+            compactFormatter.format(row.original.askSize),
+          ),
+      },
+    ],
+  },
+  {
+    id: 'session',
+    header: 'Session',
+    columns: [
+      {
+        id: 'open',
+        header: 'Open',
+        size: 90,
+        accessorFn: (row) => row.open,
+        cell: ({ row }) =>
+          recordCellRender('Open', row.original.open.toFixed(2)),
+      },
+      {
+        id: 'high',
+        header: 'High',
+        size: 90,
+        accessorFn: (row) => row.high,
+        cell: ({ row }) =>
+          recordCellRender('High', row.original.high.toFixed(2)),
+      },
+      {
+        id: 'low',
+        header: 'Low',
+        size: 90,
+        accessorFn: (row) => row.low,
+        cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)),
+      },
+    ],
+  },
+  {
+    id: 'chart',
+    header: 'Chart',
+    columns: [
+      {
+        id: 'history',
+        header: 'Intraday',
+        size: 150,
+        enableSorting: false,
+        cell: ({ row }) =>
+          recordCellRender(
+            'Intraday',
+            <SparklineCell values={row.original.history} />,
+          ),
+      },
+    ],
+  },
+]
+
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
+
+export const TRADING_COLUMN_COUNT = 14
+
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(
+    rowModelDiagnostics.maxDurationMs,
+    duration,
+  )
+  rowModelDiagnostics.lastRowCount = rows.length
+  try {
+    performance.measure('tanstack-row-model', {
+      start,
+      end,
+      detail: { rowCount: rows.length },
+    })
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+  return rows
+}
+
+const LastPriceCell = defineComponent({
+  name: 'LastPriceCell',
+  props: {
+    quote: { type: Object as PropType<MarketQuote>, required: true },
+  },
+  setup(props) {
+    const { selectSymbol } = useTradingShellController().actions
+    return () => (
+      <PriceCell
+        price={props.quote.price}
+        move={getDayChange(props.quote)}
+        onSelect={() => selectSymbol(props.quote.symbol)}
+      />
+    )
+  },
+})
+
+const DayChangeCell = defineComponent({
+  name: 'DayChangeCell',
+  props: {
+    quote: { type: Object as PropType<MarketQuote>, required: true },
+  },
+  setup(props) {
+    const mode = useSelector(
+      useTradingShellController().renderAtoms.rendererMode,
+    )
+    return () => {
+      const change = getDayChange(props.quote)
+      if (mode.value === 'stable') return <StableMoveCell move={change} />
+      return change >= 0 ? (
+        <UpMoveCell move={change} />
+      ) : (
+        <DownMoveCell move={change} />
+      )
+    }
+  },
+})
+
+export function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+
+export function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/vue/realtime-trading/src/table/table-interactions.ts b/examples/vue/realtime-trading/src/table/table-interactions.ts
new file mode 100644
index 0000000000..1df83b2484
--- /dev/null
+++ b/examples/vue/realtime-trading/src/table/table-interactions.ts
@@ -0,0 +1,186 @@
+export type CellDirection = 'up' | 'down' | 'left' | 'right'
+
+interface RowSelectionTable {
+  resetRowSelection: (defaultState?: boolean) => void
+}
+
+interface SelectableRow {
+  getIsSelected: () => boolean
+  getToggleSelectedHandler: (options?: {
+    selectChildren?: boolean
+  }) => (event: unknown) => void
+}
+
+interface SelectableGridCell {
+  row: SelectableGridRow
+  getSelectionStartHandler: (
+    contextDocument?: Document,
+  ) => (event: unknown) => void
+  getSelectionExtendHandler: () => (event: unknown) => void
+}
+
+interface SelectableGridRow extends SelectableRow {
+  original: { symbol: string }
+  getAllCellsByColumnId: () => Record<string, SelectableGridCell>
+}
+
+interface TradingGridTable extends RowSelectionTable {
+  getRowModel: () => {
+    rowsById: Record<string, SelectableGridRow>
+  }
+}
+
+interface SelectionCellTarget {
+  element: HTMLTableCellElement
+  cell: SelectableGridCell
+}
+
+interface CellNavigationTable {
+  extendCellSelection: (direction: CellDirection) => void
+  moveCellSelection: (direction: CellDirection) => void
+  resetCellSelection: (defaultState?: boolean) => void
+  selectAllCells: () => void
+}
+
+const keyDirections: Partial<Record<string, CellDirection>> = {
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+}
+
+export function reorderColumnIds(
+  columnIds: Array<string>,
+  sourceId: string,
+  targetId: string,
+): Array<string> {
+  if (sourceId === targetId || !columnIds.includes(sourceId)) return columnIds
+
+  const withoutSource = columnIds.filter((id) => id !== sourceId)
+  const targetIndex = withoutSource.indexOf(targetId)
+  if (targetIndex < 0) return columnIds
+
+  return [
+    ...withoutSource.slice(0, targetIndex),
+    sourceId,
+    ...withoutSource.slice(targetIndex),
+  ]
+}
+
+export function selectRowFromPointer(
+  table: RowSelectionTable,
+  row: SelectableRow,
+  event: MouseEvent,
+): void {
+  const additive = event.ctrlKey || event.metaKey
+  const checked = additive ? !row.getIsSelected() : true
+
+  if (!event.shiftKey && !additive) table.resetRowSelection(true)
+
+  row.getToggleSelectedHandler({ selectChildren: false })({
+    target: { checked },
+    shiftKey: event.shiftKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+  })
+}
+
+export class TradingGridPointerController {
+  #lastPointerCell: HTMLTableCellElement | null = null
+
+  handleMouseDown(
+    table: TradingGridTable,
+    event: MouseEvent,
+    selectSymbol: (symbol: string) => void,
+  ): void {
+    if (event.button !== 0) return
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+
+    this.#lastPointerCell = target.element
+    selectSymbol(target.cell.row.original.symbol)
+    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+  }
+
+  handlePointerOver(table: TradingGridTable, event: MouseEvent): void {
+    if ((event.buttons & 1) === 0) {
+      this.resetPointerCell()
+      return
+    }
+
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target || target.element === this.#lastPointerCell) return
+
+    this.#lastPointerCell = target.element
+    target.cell.getSelectionExtendHandler()(event)
+  }
+
+  handleClick(table: TradingGridTable, event: MouseEvent): void {
+    const target = this.#findCellTarget(table, event.composedPath())
+    if (!target) return
+    selectRowFromPointer(table, target.cell.row, event)
+  }
+
+  resetPointerCell(): void {
+    this.#lastPointerCell = null
+  }
+
+  #findCellTarget(
+    table: TradingGridTable,
+    path: Array<EventTarget>,
+  ): SelectionCellTarget | null {
+    for (const target of path) {
+      if (!(target instanceof HTMLTableCellElement)) continue
+
+      const columnId = target.dataset['columnId']
+      const rowId =
+        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+      if (!columnId || !rowId) return null
+
+      const row = table.getRowModel().rowsById[rowId]
+      const cell = row.getAllCellsByColumnId()[columnId]
+      return { element: target, cell }
+    }
+
+    return null
+  }
+}
+
+export function handleCellNavigation(
+  table: CellNavigationTable,
+  event: KeyboardEvent,
+): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    table.resetCellSelection(true)
+    return
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+    event.preventDefault()
+    table.selectAllCells()
+    return
+  }
+
+  const direction = keyDirections[event.key]
+  if (!direction) return
+
+  event.preventDefault()
+  if (event.shiftKey) table.extendCellSelection(direction)
+  else table.moveCellSelection(direction)
+}
+
+export function sortIndicator(direction: false | 'asc' | 'desc'): string {
+  if (direction === 'asc') return '↑'
+  if (direction === 'desc') return '↓'
+  return '↕'
+}
+
+export function sortAriaValue(
+  direction: false | 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' {
+  if (direction === 'asc') return 'ascending'
+  if (direction === 'desc') return 'descending'
+  return 'none'
+}
diff --git a/examples/vue/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/vue/realtime-trading/src/table/trading-row-virtualizer.ts
new file mode 100644
index 0000000000..d733342a00
--- /dev/null
+++ b/examples/vue/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -0,0 +1,14 @@
+export const TRADING_ROW_HEIGHT = 32
+export const TRADING_ROW_OVERSCAN = 10
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+
+export type VirtualScrollMode = 'tanstack' | 'none'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollMode,
+  instrumentCount: number,
+): VirtualScrollMode {
+  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : requestedMode
+}
diff --git a/examples/vue/realtime-trading/src/table/trading-table.tsx b/examples/vue/realtime-trading/src/table/trading-table.tsx
new file mode 100644
index 0000000000..8a35e0bc81
--- /dev/null
+++ b/examples/vue/realtime-trading/src/table/trading-table.tsx
@@ -0,0 +1,517 @@
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watchEffect,
+} from 'vue'
+import { useSelector } from '@tanstack/vue-store'
+import {
+  FlexRender,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  sortFn_basic,
+  stockFeatures,
+  tableFeatures,
+  useTable,
+} from '@tanstack/vue-table'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useTableBenchmark } from '../benchmark/use-table-benchmark'
+import {
+  useMarketFeedController,
+  useMarketFeedState,
+  useTradingShellController,
+  useTradingShellState,
+} from '../shell/trading-shell-context'
+import {
+  TRADING_COLUMN_COUNT,
+  readMeasuredRows,
+  rowModelDiagnostics,
+  tradingColumns,
+} from './table-config/trading-columns'
+import {
+  TradingGridPointerController,
+  handleCellNavigation,
+  reorderColumnIds,
+  sortAriaValue,
+  sortIndicator,
+} from './table-interactions'
+import {
+  TRADING_ROW_HEIGHT,
+  TRADING_ROW_OVERSCAN,
+  resolveVirtualScrollMode,
+} from './trading-row-virtualizer'
+import type { PropType } from 'vue'
+import type { VirtualItem } from '@tanstack/vue-virtual'
+import type { MarketQuote } from '../feed/market-data'
+
+export { TRADING_COLUMN_COUNT, rowModelDiagnostics }
+export type {
+  CoreTableState,
+  RendererMode,
+} from './table-config/trading-columns'
+export type { VirtualScrollMode } from './trading-row-virtualizer'
+
+const features = tableFeatures({
+  ...stockFeatures,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { basic: sortFn_basic },
+})
+
+type TradingTableInstance = ReturnType<typeof useTable<typeof features, MarketQuote>>
+type TradingRow = ReturnType<TradingTableInstance['getRowModel']>['rows'][number]
+
+interface ColumnDragRuntime {
+  columnId: string | null
+  sourceElement: HTMLTableCellElement | null
+  targetElement: HTMLTableCellElement | null
+}
+
+const TradingRowView = defineComponent({
+  name: 'TradingRowView',
+  props: {
+    row: { type: Object as PropType<TradingRow>, required: true },
+    virtualRow: Object as PropType<VirtualItem>,
+  },
+  setup(props, { slots }) {
+    const selectedSymbol = useSelector(
+      useTradingShellController().renderAtoms.selectedSymbol,
+    )
+    return () => (
+      <tr
+        class={props.virtualRow ? 'virtual-table-row' : undefined}
+        style={
+          props.virtualRow
+            ? { transform: `translateY(${props.virtualRow.start}px)` }
+            : undefined
+        }
+        data-virtual-index={props.virtualRow?.index}
+        data-symbol={props.row.original.symbol}
+        data-row-id={props.row.original.id}
+        data-symbol-selected={
+          selectedSymbol.value === props.row.original.symbol
+            ? 'true'
+            : undefined
+        }
+        title={props.row.original.company}
+        aria-selected={props.row.getIsSelected()}
+      >
+        {slots.default?.()}
+      </tr>
+    )
+  },
+})
+
+export const TradingTable = defineComponent({
+  name: 'TradingTable',
+  setup() {
+    const controller = useTradingShellController()
+    const feed = useMarketFeedController()
+    const quotes = useMarketFeedState((state) => state.quotes)
+    const instrumentCount = useMarketFeedState(
+      (state) => state.instrumentCount,
+    )
+    const requestedVirtualScrollMode = useTradingShellState(
+      (state) => state.requestedVirtualScrollMode,
+    )
+    const virtualScrollMode = computed(() =>
+      resolveVirtualScrollMode(
+        requestedVirtualScrollMode.value,
+        instrumentCount.value,
+      ),
+    )
+    const table = useTable({
+      key: 'vue-realtime-trading',
+      features,
+      columns: tradingColumns,
+      get data() {
+        return quotes.value
+      },
+      getRowId: (row: MarketQuote) => row.id,
+      columnResizeMode: 'onChange',
+      defaultColumn: { minSize: 56, maxSize: 800 },
+      autoResetCellSelection: false,
+    })
+    const tableState = useSelector(table.store, (state) => ({
+      sorting: state.sorting,
+      columnFilters: state.columnFilters,
+      columnOrder: state.columnOrder,
+      rowSelection: state.rowSelection,
+      cellSelection: state.cellSelection,
+    }))
+    const rows = computed(() => {
+      void quotes.value
+      tableState.value
+      return readMeasuredRows(() => table.getRowModel().rows)
+    })
+    const scrollElement = ref<HTMLDivElement | null>(null)
+    const tableElement = ref<HTMLTableElement | null>(null)
+    const virtualizer = useVirtualizer(
+      computed(() => ({
+        count: rows.value.length,
+        estimateSize: () => TRADING_ROW_HEIGHT,
+        getScrollElement: () => scrollElement.value,
+        getItemKey: (index: number) => rows.value[index]?.id ?? index,
+        overscan: TRADING_ROW_OVERSCAN,
+        enabled: virtualScrollMode.value === 'tanstack',
+      })),
+    )
+    const virtualRows = computed(() => virtualizer.value.getVirtualItems())
+    const visibleRange = computed(() => {
+      const range = virtualizer.value.range
+      if (
+        virtualScrollMode.value !== 'tanstack' ||
+        rows.value.length === 0 ||
+        range === null
+      ) {
+        return null
+      }
+      const lastIndex = rows.value.length - 1
+      const start = Math.min(range.startIndex, lastIndex)
+      return {
+        start,
+        end: Math.min(Math.max(start, range.endIndex), lastIndex),
+      }
+    })
+    const pointerInteractions = new TradingGridPointerController()
+    const dragRuntime: ColumnDragRuntime = {
+      columnId: null,
+      sourceElement: null,
+      targetElement: null,
+    }
+    const layoutRuntime = { manuallyResized: false }
+
+    useTableBenchmark(controller)
+    onUpdated(() => feed.completeRender())
+    onMounted(() => feed.completeRender())
+
+    const writeColumnSizes = (): void => {
+      const element = tableElement.value
+      if (!element) return
+      for (const header of table.getFlatHeaders()) {
+        element.style.setProperty(
+          `--header-${header.id}-size`,
+          String(header.getSize()),
+        )
+        element.style.setProperty(
+          `--col-${header.column.id}-size`,
+          String(header.column.getSize()),
+        )
+      }
+      element.style.width = `${table.getTotalSize()}px`
+    }
+    const fitAvailableWidth = (): void => {
+      const container = scrollElement.value
+      if (!container || layoutRuntime.manuallyResized) return
+      const currentWidth = table.getTotalSize()
+      if (container.clientWidth <= currentWidth + 1 || currentWidth <= 0) return
+      const ratio = container.clientWidth / currentWidth
+      table.setColumnSizing(
+        Object.fromEntries(
+          table
+            .getVisibleLeafColumns()
+            .map((column) => [column.id, column.getSize() * ratio]),
+        ),
+      )
+    }
+    const resizeObserver = new ResizeObserver(fitAvailableWidth)
+    const sizingSubscription = table.atoms.columnSizing.subscribe(
+      writeColumnSizes,
+    )
+    const orderSubscription = table.atoms.columnOrder.subscribe(writeColumnSizes)
+    const resizingSubscription = table.atoms.columnResizing.subscribe((state) => {
+      if (state.isResizingColumn !== false) layoutRuntime.manuallyResized = true
+    })
+    onMounted(() => {
+      nextTick(() => {
+        writeColumnSizes()
+        fitAvailableWidth()
+        if (scrollElement.value) resizeObserver.observe(scrollElement.value)
+      })
+    })
+    onBeforeUnmount(() => {
+      sizingSubscription.unsubscribe()
+      orderSubscription.unsubscribe()
+      resizingSubscription.unsubscribe()
+      resizeObserver.disconnect()
+    })
+    watchEffect(() => {
+      controller.actions.setRenderedRowCount(
+        virtualScrollMode.value === 'tanstack'
+          ? virtualRows.value.length
+          : rows.value.length,
+      )
+    })
+
+    const clearColumnDrag = (): void => {
+      dragRuntime.sourceElement?.classList.remove('is-column-dragging')
+      dragRuntime.targetElement?.classList.remove('is-column-drop-target')
+      dragRuntime.columnId = null
+      dragRuntime.sourceElement = null
+      dragRuntime.targetElement = null
+    }
+    const showColumnDropTarget = (
+      columnId: string,
+      element: HTMLTableCellElement | null,
+    ): void => {
+      dragRuntime.targetElement?.classList.remove('is-column-drop-target')
+      dragRuntime.targetElement = null
+      if (dragRuntime.columnId === columnId || !element) return
+      element.classList.add('is-column-drop-target')
+      dragRuntime.targetElement = element
+    }
+
+    const renderRow = (row: TradingRow, virtualRow?: VirtualItem) => (
+      <TradingRowView key={row.id} row={row} virtualRow={virtualRow}>
+        {{
+          default: () =>
+            row.getVisibleCells().map((cell) => {
+              const edges = cell.getSelectionEdges()
+              return (
+                <td
+                  key={cell.id}
+                  style={{
+                    width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                  }}
+                  data-column-id={cell.column.id}
+                  data-cell-focused={
+                    cell.getIsFocused() ? 'true' : undefined
+                  }
+                  data-selection-top={edges.top ? 'true' : undefined}
+                  data-selection-right={edges.right ? 'true' : undefined}
+                  data-selection-bottom={edges.bottom ? 'true' : undefined}
+                  data-selection-left={edges.left ? 'true' : undefined}
+                  aria-selected={cell.getIsSelected()}
+                  tabindex={cell.getTabIndex()}
+                >
+                  <FlexRender cell={cell} />
+                </td>
+              )
+            }),
+        }}
+      </TradingRowView>
+    )
+
+    return () => {
+      tableState.value
+      const currentRows = rows.value
+      const activeVirtualRows = virtualRows.value
+      return (
+        <>
+          <div
+            ref={scrollElement}
+            class={[
+              'table-scroll',
+              virtualScrollMode.value === 'tanstack' && 'is-virtualized',
+            ]}
+            data-trading-table
+            tabindex={0}
+            onKeydown={(event) => handleCellNavigation(table, event)}
+          >
+            <table
+              ref={tableElement}
+              class={[
+                'trading-data-grid',
+                virtualScrollMode.value === 'tanstack' && 'virtual-table',
+              ]}
+              data-testid="trading-table"
+              role="grid"
+              aria-multiselectable="true"
+            >
+              <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      const isLeaf = header.subHeaders.length === 0
+                      const sorted = header.column.getIsSorted()
+                      return (
+                        <th
+                          key={header.id}
+                          colspan={header.colSpan}
+                          style={{
+                            width: `calc(var(--header-${header.id}-size) * 1px)`,
+                          }}
+                          aria-sort={isLeaf ? sortAriaValue(sorted) : undefined}
+                          class={[
+                            !isLeaf && 'column-group-header',
+                            isLeaf &&
+                              !isTextColumn(header.column.id) &&
+                              'numeric-header',
+                          ]}
+                        >
+                          {!header.isPlaceholder &&
+                            (isLeaf ? (
+                              <>
+                                <div
+                                  class="leaf-header-content"
+                                  onDragover={(event) => {
+                                    event.preventDefault()
+                                    showColumnDropTarget(
+                                      header.column.id,
+                                      (
+                                        event.currentTarget as HTMLElement
+                                      ).closest('th'),
+                                    )
+                                  }}
+                                  onDrop={(event) => {
+                                    event.preventDefault()
+                                    const sourceId =
+                                      event.dataTransfer?.getData(
+                                        'text/plain',
+                                      ) || dragRuntime.columnId
+                                    if (sourceId) {
+                                      table.setColumnOrder(
+                                        reorderColumnIds(
+                                          table
+                                            .getVisibleLeafColumns()
+                                            .map((column) => column.id),
+                                          sourceId,
+                                          header.column.id,
+                                        ),
+                                      )
+                                    }
+                                    clearColumnDrag()
+                                  }}
+                                >
+                                  <button
+                                    type="button"
+                                    class="column-drag-handle"
+                                    draggable
+                                    aria-label={`Move ${header.column.id} column`}
+                                    onDragstart={(event) => {
+                                      dragRuntime.columnId = header.column.id
+                                      dragRuntime.sourceElement =
+                                        (
+                                          event.currentTarget as HTMLElement
+                                        ).closest('th')
+                                      dragRuntime.sourceElement?.classList.add(
+                                        'is-column-dragging',
+                                      )
+                                      if (!event.dataTransfer) return
+                                      event.dataTransfer.effectAllowed = 'move'
+                                      event.dataTransfer.setData(
+                                        'text/plain',
+                                        header.column.id,
+                                      )
+                                    }}
+                                    onDragend={clearColumnDrag}
+                                  >
+                                    ⋮⋮
+                                  </button>
+                                  <button
+                                    type="button"
+                                    class={[
+                                      'sort-header-button',
+                                      header.column.getCanSort() && 'is-sortable',
+                                    ]}
+                                    disabled={!header.column.getCanSort()}
+                                    onClick={
+                                      header.column.getToggleSortingHandler()
+                                    }
+                                  >
+                                    <span class="header-label">
+                                      <FlexRender header={header} />
+                                    </span>
+                                    {header.column.getCanSort() && (
+                                      <span
+                                        class={[
+                                          'sort-indicator',
+                                          sorted && 'is-active',
+                                        ]}
+                                        aria-hidden="true"
+                                      >
+                                        {sortIndicator(sorted)}
+                                      </span>
+                                    )}
+                                  </button>
+                                </div>
+                                {header.column.getCanResize() && (
+                                  <div
+                                    class={[
+                                      'column-resize-handle',
+                                      header.column.getIsResizing() &&
+                                        'is-resizing',
+                                    ]}
+                                    role="separator"
+                                    aria-orientation="vertical"
+                                    onDblclick={() => header.column.resetSize()}
+                                    onMousedown={header.getResizeHandler()}
+                                    onTouchstart={header.getResizeHandler()}
+                                  />
+                                )}
+                              </>
+                            ) : (
+                              <FlexRender header={header} />
+                            ))}
+                        </th>
+                      )
+                    })}
+                  </tr>
+                ))}
+              </thead>
+              <tbody
+                class={
+                  virtualScrollMode.value === 'tanstack'
+                    ? 'virtual-table-body'
+                    : undefined
+                }
+                style={
+                  virtualScrollMode.value === 'tanstack'
+                    ? { height: `${currentRows.length * TRADING_ROW_HEIGHT}px` }
+                    : undefined
+                }
+                data-source-row-count={quotes.value.length}
+                onMousedown={(event) =>
+                  pointerInteractions.handleMouseDown(
+                    table,
+                    event,
+                    controller.actions.selectSymbol,
+                  )
+                }
+                onPointerover={(event) =>
+                  pointerInteractions.handlePointerOver(table, event)
+                }
+                onMouseleave={() => pointerInteractions.resetPointerCell()}
+                onClick={(event) =>
+                  pointerInteractions.handleClick(table, event)
+                }
+              >
+                {virtualScrollMode.value === 'tanstack'
+                  ? activeVirtualRows.map((virtualRow) =>
+                      renderRow(currentRows[virtualRow.index], virtualRow),
+                    )
+                  : currentRows.map((row) => renderRow(row))}
+              </tbody>
+            </table>
+          </div>
+          {virtualScrollMode.value === 'tanstack' && (
+            <footer
+              class="virtual-scroll-footer"
+              data-testid="virtual-scroll-footer"
+            >
+              <span>
+                TanStack · Total · {currentRows.length} rows ·{' '}
+                {table.getVisibleLeafColumns().length} columns
+              </span>
+              <span data-testid="visible-row-range">
+                {visibleRange.value
+                  ? `Current · rows ${visibleRange.value.start}..${visibleRange.value.end}`
+                  : 'Current · rows —'}
+              </span>
+            </footer>
+          )}
+        </>
+      )
+    }
+  },
+})
+
+function isTextColumn(columnId: string): boolean {
+  return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
+}
diff --git a/examples/vue/realtime-trading/src/vite-env.d.ts b/examples/vue/realtime-trading/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/vue/realtime-trading/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts b/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
new file mode 100644
index 0000000000..3362a2eadc
--- /dev/null
+++ b/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
@@ -0,0 +1,170 @@
+import path from 'node:path'
+import { expect, test } from '@playwright/test'
+import { startExampleServer } from '../../../../../tests/e2e/helpers/startExampleServer'
+import type { Page } from '@playwright/test'
+
+const exampleDir = path.resolve()
+
+function collectPageErrors(page: Page) {
+  const errors: Array<string> = []
+  page.on('pageerror', (error) => errors.push(error.message))
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  return errors
+}
+
+test('runs the Vue realtime trading workload', async ({ page }) => {
+  const server = await startExampleServer(exampleDir)
+  const errors = collectPageErrors(page)
+
+  try {
+    await page.goto(server.url)
+
+    const table = page.getByTestId('trading-table')
+    const instrumentCount = page.getByTestId('instrument-count-select')
+    const virtualScrollSelect = page.getByTestId('virtual-scroll-select')
+    await expect(table).toBeVisible()
+    await expect(instrumentCount).toHaveValue('100')
+    await expect(page.locator('.brand')).toHaveText('MARKET MONITOR')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await virtualScrollSelect.selectOption('tanstack')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
+    await expect(table.locator('tbody tr').first()).toHaveCSS(
+      'content-visibility',
+      'auto',
+    )
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await virtualScrollSelect.selectOption('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeDisabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
+      'Total · 250 rows · 14 columns',
+    )
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows 0\.\.\d+\s*$/,
+    )
+    await table.locator('..').evaluate((element) => {
+      element.scrollTop = 2_000
+      element.dispatchEvent(new Event('scroll'))
+    })
+    await expect
+      .poll(async () =>
+        Number(
+          await table
+            .locator('tbody tr')
+            .first()
+            .getAttribute('data-virtual-index'),
+        ),
+      )
+      .toBeGreaterThan(0)
+    await expect(page.getByTestId('visible-row-range')).toHaveText(
+      /^\s*Current · rows [1-9]\d*\.\.\d+\s*$/,
+    )
+    await instrumentCount.selectOption('100')
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('thead tr')).toHaveCount(2)
+    await expect(table.locator('thead tr').last().locator('th')).toHaveCount(14)
+    await expect(table.locator('thead')).not.toContainText('Identity')
+    await expect(table.locator('thead')).not.toContainText('Market Data')
+    await expect(table.locator('thead')).toContainText('Market')
+    await expect(table.locator('thead')).toContainText('Bid Vol')
+    await expect(table.locator('thead')).toContainText('Intraday')
+    const selectedRow = table.locator('tbody tr').first()
+    const selectedSymbol = await selectedRow.getAttribute('data-symbol')
+    await selectedRow.locator('td').nth(1).click()
+    await expect(page.getByTestId('selected-instrument')).toContainText(
+      selectedSymbol ?? '',
+    )
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
+    await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
+    await expect(instrumentCount.locator('option[value="750"]')).toHaveCount(1)
+
+    const targetRateSlider = page.getByTestId('target-rate-slider')
+    await expect(targetRateSlider).toHaveAttribute('min', '0')
+    await expect(targetRateSlider).toHaveAttribute('max', '9')
+    await expect(targetRateSlider).toHaveAttribute('step', '1')
+    await expect(targetRateSlider).toHaveValue('6')
+    await targetRateSlider.fill('7')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '25K samples/s',
+    )
+    await targetRateSlider.fill('8')
+    await expect(page.getByTestId('target-sample-rate')).toContainText(
+      '50K samples/s',
+    )
+    await targetRateSlider.fill('6')
+
+    const sparklineInterval = page.getByTestId(
+      'sparkline-sample-interval-select',
+    )
+    await expect(sparklineInterval).toHaveValue('16')
+    await sparklineInterval.selectOption('100')
+    await expect(sparklineInterval).toHaveValue('100')
+    await sparklineInterval.selectOption('16')
+
+    const publishInterval = page.getByTestId('publish-interval-select')
+    await expect(publishInterval.locator('option[value="500"]')).toHaveCount(1)
+    await expect(publishInterval.locator('option[value="1000"]')).toHaveCount(1)
+
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('row-update-rate').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('worker-messages').textContent()
+        return Number(text?.replace(/\D/g, '') ?? 0)
+      })
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('message-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(async () =>
+        Number(await page.getByTestId('table-render-rate').textContent()),
+      )
+      .toBeGreaterThan(0)
+
+    const firstPrice = page.locator('tbody tr').first().getByRole('button')
+    const priceBeforeUpdate = await firstPrice.textContent()
+    await expect
+      .poll(() => firstPrice.textContent())
+      .not.toBe(priceBeforeUpdate)
+
+    await page.locator('.config-section input[type="checkbox"]').first().check()
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    await expect(page.getByTestId('feed-status')).toHaveText('FEED PAUSED')
+
+    await instrumentCount.selectOption('750')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(750)
+    expect(
+      await page.evaluate(
+        () => performance.getEntriesByName('tanstack-row-model').length > 0,
+      ),
+    ).toBe(true)
+
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/vue/realtime-trading/tsconfig.json b/examples/vue/realtime-trading/tsconfig.json
new file mode 100644
index 0000000000..709980136e
--- /dev/null
+++ b/examples/vue/realtime-trading/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "tests/e2e", "vite.config.ts"]
+}
diff --git a/examples/vue/realtime-trading/vite.config.ts b/examples/vue/realtime-trading/vite.config.ts
new file mode 100644
index 0000000000..8a0fa94d84
--- /dev/null
+++ b/examples/vue/realtime-trading/vite.config.ts
@@ -0,0 +1,11 @@
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {
+    port: 7781,
+    allowedHosts: true,
+  },
+  plugins: [vue(), vueJsx()],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cfff0ed0bf..4b9120c444 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -746,6 +746,31 @@ importers:
         specifier: ^8.2.0
         version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
+  examples/alpine/realtime-trading:
+    dependencies:
+      '@tanstack/alpine-table':
+        specifier: workspace:*
+        version: link:../../../packages/alpine-table
+      '@tanstack/store':
+        specifier: ^0.11.0
+        version: 0.11.0
+      '@tanstack/virtual-core':
+        specifier: ^3.13.35
+        version: 3.17.7
+      alpinejs:
+        specifier: ^3.15.12
+        version: 3.15.12
+    devDependencies:
+      '@types/alpinejs':
+        specifier: ^3.13.11
+        version: 3.13.11
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+
   examples/alpine/row-pinning:
     dependencies:
       '@faker-js/faker':
@@ -906,7 +931,7 @@ importers:
     devDependencies:
       '@angular/build':
         specifier: ^22.1.2
-        version: 22.1.2(6fe94f9200bc61445b7cf283a6dbda65)
+        version: 22.1.2(c2d92ba4e1aec8f30e382cb6e9758205)
       '@angular/cli':
         specifier: ^22.1.2
         version: 22.1.2(@types/node@26.1.2)(chokidar@5.0.0)(supports-color@8.1.1)
@@ -4868,6 +4893,82 @@ importers:
         specifier: ^8.2.0
         version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
+  examples/ember/realtime-trading:
+    dependencies:
+      '@embroider/macros':
+        specifier: 1.20.5
+        version: 1.20.5(@babel/core@7.29.7(supports-color@8.1.1))(@glint/template@1.7.10)(supports-color@8.1.1)
+      '@embroider/router':
+        specifier: 3.0.6
+        version: 3.0.6(@embroider/core@4.6.2(@glint/template@1.7.10)(supports-color@8.1.1))(supports-color@8.1.1)
+      '@glimmer/component':
+        specifier: 2.1.1
+        version: 2.1.1(supports-color@8.1.1)
+      '@tanstack/ember-table':
+        specifier: workspace:*
+        version: link:../../../packages/ember-table
+      '@tanstack/store':
+        specifier: ^0.11.0
+        version: 0.11.0
+      '@tanstack/virtual-core':
+        specifier: ^3.13.36
+        version: 3.17.7
+      decorator-transforms:
+        specifier: 2.4.0
+        version: 2.4.0(@babel/core@7.29.7(supports-color@8.1.1))
+      ember-modifier:
+        specifier: ^4.3.0
+        version: 4.3.0(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
+      ember-source:
+        specifier: 7.1.0
+        version: 7.1.0(@glimmer/component@2.1.1(supports-color@8.1.1))(supports-color@8.1.1)
+      ember-strict-application-resolver:
+        specifier: 0.1.1
+        version: 0.1.1(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
+    devDependencies:
+      '@babel/core':
+        specifier: 7.29.7
+        version: 7.29.7(supports-color@8.1.1)
+      '@babel/plugin-transform-runtime':
+        specifier: 7.29.7
+        version: 7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
+      '@babel/plugin-transform-typescript':
+        specifier: 7.29.7
+        version: 7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
+      '@babel/runtime':
+        specifier: 7.29.7
+        version: 7.29.7
+      '@ember/app-tsconfig':
+        specifier: 2.0.0
+        version: 2.0.0
+      '@embroider/core':
+        specifier: 4.6.2
+        version: 4.6.2(@glint/template@1.7.10)(supports-color@8.1.1)
+      '@glint/ember-tsc':
+        specifier: 1.8.14
+        version: 1.8.14(ember-source@7.1.0(@glimmer/component@2.1.1(supports-color@8.1.1))(supports-color@8.1.1))(supports-color@8.1.1)(typescript@6.0.3)
+      '@glint/template':
+        specifier: 1.7.10
+        version: 1.7.10
+      '@glint/tsserver-plugin':
+        specifier: 2.5.20
+        version: 2.5.20(ember-source@7.1.0(@glimmer/component@2.1.1(supports-color@8.1.1))(supports-color@8.1.1))(supports-color@8.1.1)
+      '@nullvoxpopuli/ember-vite':
+        specifier: 1.1.0
+        version: 1.1.0(@glint/template@1.7.10)(@types/babel__core@7.20.5)(rollup@4.62.3)(supports-color@8.1.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+      '@rollup/plugin-babel':
+        specifier: 7.1.0
+        version: 7.1.0(@babel/core@7.29.7(supports-color@8.1.1))(@types/babel__core@7.20.5)(rollup@4.62.3)(supports-color@8.1.1)
+      babel-plugin-ember-template-compilation:
+        specifier: 4.0.0
+        version: 4.0.0
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+
   examples/ember/remote-data:
     dependencies:
       '@embroider/macros':
@@ -5925,6 +6026,28 @@ importers:
         specifier: ^8.2.0
         version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
+  examples/lit/realtime-trading:
+    dependencies:
+      '@tanstack/lit-table':
+        specifier: workspace:*
+        version: link:../../../packages/lit-table
+      '@tanstack/lit-virtual':
+        specifier: ^3.13.36
+        version: 3.13.36(lit@3.3.3)
+      '@tanstack/store':
+        specifier: ^0.11.0
+        version: 0.11.0
+      lit:
+        specifier: ^3.3.3
+        version: 3.3.3
+    devDependencies:
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+
   examples/lit/row-pinning:
     dependencies:
       '@faker-js/faker':
@@ -6117,17 +6240,17 @@ importers:
         version: 10.5.0
       '@tanstack/octane-store':
         specifier: ^0.12.1
-        version: 0.12.1(octane@0.1.21(@typescript-eslint/types@8.62.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))
+        version: 0.12.1(octane@0.1.21(@typescript-eslint/types@8.65.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))
       '@tanstack/octane-table':
         specifier: workspace:*
         version: link:../../../packages/octane-table
       octane:
         specifier: 0.1.21
-        version: 0.1.21(@typescript-eslint/types@8.62.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+        version: 0.1.21(@typescript-eslint/types@8.65.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
     devDependencies:
       '@tsrx/typescript-plugin':
         specifier: ^0.3.118
-        version: 0.3.118(octane@0.1.21(@typescript-eslint/types@8.62.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(typescript@6.0.3)
+        version: 0.3.118(octane@0.1.21(@typescript-eslint/types@8.65.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(typescript@6.0.3)
       typescript:
         specifier: 6.0.3
         version: 6.0.3
@@ -6747,6 +6870,31 @@ importers:
         specifier: ^8.2.0
         version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
+  examples/octane/realtime-trading:
+    dependencies:
+      '@tanstack/octane-table':
+        specifier: workspace:*
+        version: link:../../../packages/octane-table
+      '@tanstack/store':
+        specifier: ^0.11.0
+        version: 0.11.0
+      '@tanstack/virtual-core':
+        specifier: ^3.13.36
+        version: 3.17.7
+      octane:
+        specifier: 0.1.21
+        version: 0.1.21(@typescript-eslint/types@8.65.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+    devDependencies:
+      '@tsrx/typescript-plugin':
+        specifier: ^0.3.118
+        version: 0.3.118(octane@0.1.21(@typescript-eslint/types@8.65.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(typescript@6.0.3)
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+
   examples/octane/row-pinning:
     dependencies:
       '@faker-js/faker':
@@ -7572,6 +7720,31 @@ importers:
         specifier: ^8.2.0
         version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
+  examples/preact/realtime-trading:
+    dependencies:
+      '@tanstack/preact-store':
+        specifier: ^0.13.1
+        version: 0.13.1(preact@10.29.7)
+      '@tanstack/preact-table':
+        specifier: workspace:*
+        version: link:../../../packages/preact-table
+      '@tanstack/virtual-core':
+        specifier: ^3.17.7
+        version: 3.17.7
+      preact:
+        specifier: ^10.29.7
+        version: 10.29.7(preact-render-to-string@6.7.0)
+    devDependencies:
+      '@preact/preset-vite':
+        specifier: ^2.10.6
+        version: 2.10.6(@babel/core@7.29.7(supports-color@8.1.1))(preact@10.29.7)(rollup@4.62.3)(supports-color@8.1.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+
   examples/preact/row-pinning:
     dependencies:
       '@faker-js/faker':
@@ -9194,7 +9367,7 @@ importers:
         version: 3.2.1(@react-spectrum/provider@3.11.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.3.3)
       '@heroui/styles':
         specifier: ^3.2.1
-        version: 3.2.1(tailwind-merge@3.4.0)(tailwindcss@4.3.3)
+        version: 3.2.1(tailwind-merge@3.6.0)(tailwindcss@4.3.3)
       '@tailwindcss/vite':
         specifier: ^4.3.3
         version: 4.3.3(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
@@ -9744,7 +9917,7 @@ importers:
         version: 3.2.1(@react-spectrum/provider@3.11.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.3.3)
       '@heroui/styles':
         specifier: ^3.2.1
-        version: 3.2.1(tailwind-merge@3.6.0)(tailwindcss@4.3.3)
+        version: 3.2.1(tailwind-merge@3.4.0)(tailwindcss@4.3.3)
       '@tailwindcss/vite':
         specifier: ^4.3.3
         version: 4.3.3(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
@@ -10276,6 +10449,9 @@ importers:
       '@tanstack/react-table':
         specifier: workspace:*
         version: link:../../../packages/react-table
+      '@tanstack/react-virtual':
+        specifier: ^3.14.9
+        version: 3.14.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react:
         specifier: ^19.2.8
         version: 19.2.8
@@ -11696,6 +11872,9 @@ importers:
       '@tanstack/solid-table':
         specifier: workspace:*
         version: link:../../../packages/solid-table
+      '@tanstack/solid-virtual':
+        specifier: ^3.13.36
+        version: 3.13.36(solid-js@1.9.14)
       solid-js:
         specifier: ^1.9.14
         version: 1.9.14
@@ -13021,6 +13200,40 @@ importers:
         specifier: ^8.2.0
         version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
+  examples/svelte/realtime-trading:
+    dependencies:
+      '@tanstack/store':
+        specifier: ^0.11.0
+        version: 0.11.0
+      '@tanstack/svelte-store':
+        specifier: ^0.12.0
+        version: 0.12.0(svelte@5.56.8(@typescript-eslint/types@8.65.0))
+      '@tanstack/svelte-table':
+        specifier: workspace:*
+        version: link:../../../packages/svelte-table
+      '@tanstack/svelte-virtual':
+        specifier: ^3.13.35
+        version: 3.13.35(svelte@5.56.8(@typescript-eslint/types@8.65.0))
+      svelte:
+        specifier: ^5.56.8
+        version: 5.56.8(@typescript-eslint/types@8.65.0)
+    devDependencies:
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^7.2.0
+        version: 7.2.0(svelte@5.56.8(@typescript-eslint/types@8.65.0))(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+      '@tsconfig/svelte':
+        specifier: ^5.0.8
+        version: 5.0.8
+      svelte-check:
+        specifier: ^4.7.4
+        version: 4.7.4(picomatch@4.0.5)(svelte@5.56.8(@typescript-eslint/types@8.65.0))(typescript@6.0.3)
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+
   examples/svelte/row-pinning:
     devDependencies:
       '@faker-js/faker':
@@ -14487,14 +14700,20 @@ importers:
         specifier: ^3.3.5
         version: 3.3.5(typescript@6.0.3)
 
-  examples/vue/row-pinning:
+  examples/vue/realtime-trading:
     dependencies:
-      '@faker-js/faker':
-        specifier: ^10.5.0
-        version: 10.5.0
+      '@tanstack/store':
+        specifier: ^0.11.0
+        version: 0.11.0
+      '@tanstack/vue-store':
+        specifier: ^0.11.0
+        version: 0.11.0(vue@3.5.40(typescript@6.0.3))
       '@tanstack/vue-table':
         specifier: workspace:*
         version: link:../../../packages/vue-table
+      '@tanstack/vue-virtual':
+        specifier: ^3.13.35
+        version: 3.13.35(vue@3.5.40(typescript@6.0.3))
       vue:
         specifier: ^3.5.40
         version: 3.5.40(typescript@6.0.3)
@@ -14518,20 +14737,14 @@ importers:
         specifier: ^3.3.5
         version: 3.3.5(typescript@6.0.3)
 
-  examples/vue/row-selection:
+  examples/vue/row-pinning:
     dependencies:
       '@faker-js/faker':
         specifier: ^10.5.0
         version: 10.5.0
-      '@tanstack/vue-devtools':
-        specifier: ^0.2.23
-        version: 0.2.23(csstype@3.2.3)(solid-js@1.9.14)
       '@tanstack/vue-table':
         specifier: workspace:*
         version: link:../../../packages/vue-table
-      '@tanstack/vue-table-devtools':
-        specifier: workspace:*
-        version: link:../../../packages/vue-table-devtools
       vue:
         specifier: ^3.5.40
         version: 3.5.40(typescript@6.0.3)
@@ -14555,14 +14768,20 @@ importers:
         specifier: ^3.3.5
         version: 3.3.5(typescript@6.0.3)
 
-  examples/vue/sorting:
+  examples/vue/row-selection:
     dependencies:
       '@faker-js/faker':
         specifier: ^10.5.0
         version: 10.5.0
+      '@tanstack/vue-devtools':
+        specifier: ^0.2.23
+        version: 0.2.23(csstype@3.2.3)(solid-js@1.9.14)
       '@tanstack/vue-table':
         specifier: workspace:*
         version: link:../../../packages/vue-table
+      '@tanstack/vue-table-devtools':
+        specifier: workspace:*
+        version: link:../../../packages/vue-table-devtools
       vue:
         specifier: ^3.5.40
         version: 3.5.40(typescript@6.0.3)
@@ -14586,7 +14805,7 @@ importers:
         specifier: ^3.3.5
         version: 3.3.5(typescript@6.0.3)
 
-  examples/vue/sub-components:
+  examples/vue/sorting:
     dependencies:
       '@faker-js/faker':
         specifier: ^10.5.0
@@ -14617,7 +14836,7 @@ importers:
         specifier: ^3.3.5
         version: 3.3.5(typescript@6.0.3)
 
-  examples/vue/virtualized-columns:
+  examples/vue/sub-components:
     dependencies:
       '@faker-js/faker':
         specifier: ^10.5.0
@@ -14625,9 +14844,6 @@ importers:
       '@tanstack/vue-table':
         specifier: workspace:*
         version: link:../../../packages/vue-table
-      '@tanstack/vue-virtual':
-        specifier: ^3.13.35
-        version: 3.13.35(vue@3.5.40(typescript@6.0.3))
       vue:
         specifier: ^3.5.40
         version: 3.5.40(typescript@6.0.3)
@@ -14651,20 +14867,11 @@ importers:
         specifier: ^3.3.5
         version: 3.3.5(typescript@6.0.3)
 
-  examples/vue/virtualized-infinite-scrolling:
+  examples/vue/virtualized-columns:
     dependencies:
       '@faker-js/faker':
         specifier: ^10.5.0
         version: 10.5.0
-      '@tanstack/match-sorter-utils':
-        specifier: workspace:*
-        version: link:../../../packages/match-sorter-utils
-      '@tanstack/vue-query':
-        specifier: ^5.101.4
-        version: 5.101.4(vue@3.5.40(typescript@6.0.3))
-      '@tanstack/vue-store':
-        specifier: ^0.11.0
-        version: 0.11.0(vue@3.5.40(typescript@6.0.3))
       '@tanstack/vue-table':
         specifier: workspace:*
         version: link:../../../packages/vue-table
@@ -14694,7 +14901,50 @@ importers:
         specifier: ^3.3.5
         version: 3.3.5(typescript@6.0.3)
 
-  examples/vue/virtualized-rows:
+  examples/vue/virtualized-infinite-scrolling:
+    dependencies:
+      '@faker-js/faker':
+        specifier: ^10.5.0
+        version: 10.5.0
+      '@tanstack/match-sorter-utils':
+        specifier: workspace:*
+        version: link:../../../packages/match-sorter-utils
+      '@tanstack/vue-query':
+        specifier: ^5.101.4
+        version: 5.101.4(vue@3.5.40(typescript@6.0.3))
+      '@tanstack/vue-store':
+        specifier: ^0.11.0
+        version: 0.11.0(vue@3.5.40(typescript@6.0.3))
+      '@tanstack/vue-table':
+        specifier: workspace:*
+        version: link:../../../packages/vue-table
+      '@tanstack/vue-virtual':
+        specifier: ^3.13.35
+        version: 3.13.35(vue@3.5.40(typescript@6.0.3))
+      vue:
+        specifier: ^3.5.40
+        version: 3.5.40(typescript@6.0.3)
+    devDependencies:
+      '@types/node':
+        specifier: ^26.1.2
+        version: 26.1.2
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.8
+        version: 6.0.8(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))(vue@3.5.40(typescript@6.0.3))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^5.1.6
+        version: 5.1.6(supports-color@8.1.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))(vue@3.5.40(typescript@6.0.3))
+      typescript:
+        specifier: 6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.0
+        version: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
+      vue-tsc:
+        specifier: ^3.3.5
+        version: 3.3.5(typescript@6.0.3)
+
+  examples/vue/virtualized-rows:
     dependencies:
       '@faker-js/faker':
         specifier: ^10.5.0
@@ -14850,10 +15100,10 @@ importers:
     devDependencies:
       '@analogjs/vite-plugin-angular':
         specifier: ^2.6.4
-        version: 2.6.4(@angular-devkit/build-angular@22.1.2(c4f3ba9ba46a9d9ffd46bd36081dcea2))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+        version: 2.6.4(@angular-devkit/build-angular@22.1.2(6c34a2633be8b81f08ae264f6e41ec5e))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
       '@analogjs/vitest-angular':
         specifier: ^2.6.4
-        version: 2.6.4(@analogjs/vite-plugin-angular@2.6.4(@angular-devkit/build-angular@22.1.2(c4f3ba9ba46a9d9ffd46bd36081dcea2))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(@angular-devkit/architect@0.2201.2(chokidar@5.0.0))(@angular-devkit/schematics@22.1.2(chokidar@5.0.0))(vitest@4.1.10)
+        version: 2.6.4(@analogjs/vite-plugin-angular@2.6.4(@angular-devkit/build-angular@22.1.2(6c34a2633be8b81f08ae264f6e41ec5e))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(@angular-devkit/architect@0.2201.2(chokidar@5.0.0))(@angular-devkit/schematics@22.1.2(chokidar@5.0.0))(vitest@4.1.10)
       '@angular/compiler':
         specifier: ^22.1.0
         version: 22.1.0
@@ -23983,6 +24233,9 @@ packages:
   ember-estree@0.6.10:
     resolution: {integrity: sha512-5nItZGzvxHgoCdASQbn9qBzF4sdjSggUeZpXdihAanmYWm6XkObT/TlUvakYtoKret1/8gm0jNLwNPqZYwHtCw==}
 
+  ember-modifier@4.3.0:
+    resolution: {integrity: sha512-O0rirSLQbGg0VJ/NqoQ4uN1bh2iAekZC/Ykma+FkjCM2ofrO38u+d8n3+AK6uVWeMJmogGX2KL+Is5fofoInJg==}
+
   ember-qunit@9.1.0:
     resolution: {integrity: sha512-dE32lSODyv4em0ACBS8PDzrAIPKR75hhSpn/au0qFBlzbdmNA/VVsgv2aoFAVRdlQ0zYJ8EiNPFqsBFciIeXVA==}
     peerDependencies:
@@ -28559,10 +28812,6 @@ packages:
     resolution: {integrity: sha512-hXXvrjtx2PLYx4qruKl+kyRSLc52V+cCvMxRjmKwoA+CBbbF5GfIBtR6kCvl0fYGqTUPKB+1ktVmTHqMOzgCBg==}
     engines: {node: '>=18.0.0'}
 
-  webpack-sources@3.5.0:
-    resolution: {integrity: sha512-HPuy+uuoTCaaoEoI1LQ3JN9+vrPBvEesnnX1jADHy728cHSMlq4wUc4afYqahq2B1mhQVZxCXOkNTnXltr+2vQ==}
-    engines: {node: '>=10.13.0'}
-
   webpack-sources@3.5.1:
     resolution: {integrity: sha512-jyuiGJdtvY434z5bUZrjz67v76/ePNvFZTp9Mdz29IlH4+GPsgyGjiv0fKI+M7BdkU6ADjulUcKAd3tUK3WlEw==}
     engines: {node: '>=10.13.0'}
@@ -28856,7 +29105,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
 
-  '@analogjs/vite-plugin-angular@2.6.4(@angular-devkit/build-angular@22.1.2(c4f3ba9ba46a9d9ffd46bd36081dcea2))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))':
+  '@analogjs/vite-plugin-angular@2.6.4(@angular-devkit/build-angular@22.1.2(6c34a2633be8b81f08ae264f6e41ec5e))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))':
     dependencies:
       magic-string: 0.30.21
       obug: 2.1.3
@@ -28864,7 +29113,7 @@ snapshots:
       tinyglobby: 0.2.17
       ts-morph: 21.0.1
     optionalDependencies:
-      '@angular-devkit/build-angular': 22.1.2(c4f3ba9ba46a9d9ffd46bd36081dcea2)
+      '@angular-devkit/build-angular': 22.1.2(6c34a2633be8b81f08ae264f6e41ec5e)
       '@angular/build': 22.1.2(0935b688b04d27585268941dfe103369)
       '@angular/compiler': 22.1.0
       vite: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
@@ -28872,9 +29121,9 @@ snapshots:
       - '@emnapi/core'
       - '@emnapi/runtime'
 
-  '@analogjs/vitest-angular@2.6.4(@analogjs/vite-plugin-angular@2.6.4(@angular-devkit/build-angular@22.1.2(c4f3ba9ba46a9d9ffd46bd36081dcea2))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(@angular-devkit/architect@0.2201.2(chokidar@5.0.0))(@angular-devkit/schematics@22.1.2(chokidar@5.0.0))(vitest@4.1.10)':
+  '@analogjs/vitest-angular@2.6.4(@analogjs/vite-plugin-angular@2.6.4(@angular-devkit/build-angular@22.1.2(6c34a2633be8b81f08ae264f6e41ec5e))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(@angular-devkit/architect@0.2201.2(chokidar@5.0.0))(@angular-devkit/schematics@22.1.2(chokidar@5.0.0))(vitest@4.1.10)':
     dependencies:
-      '@analogjs/vite-plugin-angular': 2.6.4(@angular-devkit/build-angular@22.1.2(c4f3ba9ba46a9d9ffd46bd36081dcea2))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
+      '@analogjs/vite-plugin-angular': 2.6.4(@angular-devkit/build-angular@22.1.2(6c34a2633be8b81f08ae264f6e41ec5e))(@angular/build@22.1.2(0935b688b04d27585268941dfe103369))(@angular/compiler@22.1.0)(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
       '@angular-devkit/architect': 0.2201.2(chokidar@5.0.0)
       '@angular-devkit/schematics': 22.1.2(chokidar@5.0.0)
       vitest: 4.1.10(@types/node@26.1.2)(@vitest/coverage-v8@4.1.10)(jsdom@30.0.1(@noble/hashes@2.2.0))(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
@@ -28886,13 +29135,13 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@angular-devkit/build-angular@22.1.2(915cfc90bbd65bf9d48a517227b04cea)':
+  '@angular-devkit/build-angular@22.1.2(6c34a2633be8b81f08ae264f6e41ec5e)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2201.2(chokidar@5.0.0)
-      '@angular-devkit/build-webpack': 0.2201.2(chokidar@5.0.0)(webpack-dev-server@5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)))(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      '@angular-devkit/build-webpack': 0.2201.2(chokidar@5.0.0)(webpack-dev-server@5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)))(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       '@angular-devkit/core': 22.1.2(chokidar@5.0.0)
-      '@angular/build': 22.1.2(5f2f0f9ec872a62378ddad7e97650036)
+      '@angular/build': 22.1.2(4a056a285aa5428f36a27c9d2c051c2c)
       '@angular/compiler-cli': 22.1.0(@angular/compiler@22.1.0)(typescript@6.0.3)
       '@babel/core': 8.0.1
       '@babel/generator': 8.0.0
@@ -28904,45 +29153,45 @@ snapshots:
       '@babel/preset-env': 8.0.2(@babel/core@8.0.1)
       '@babel/runtime': 8.0.0
       '@discoveryjs/json-ext': 1.1.0
-      '@ngtools/webpack': 22.1.2(@angular/compiler-cli@22.1.0(@angular/compiler@22.1.0)(typescript@6.0.3))(typescript@6.0.3)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      '@ngtools/webpack': 22.1.2(@angular/compiler-cli@22.1.0(@angular/compiler@22.1.0)(typescript@6.0.3))(typescript@6.0.3)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       ansi-colors: 4.1.3
       autoprefixer: 10.5.4(postcss@8.5.19)
-      babel-loader: 10.1.1(@babel/core@8.0.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
-      browserslist: 4.28.2
-      copy-webpack-plugin: 14.0.0(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
-      css-loader: 7.1.4(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      babel-loader: 10.1.1(@babel/core@8.0.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
+      browserslist: 4.28.7
+      copy-webpack-plugin: 14.0.0(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
+      css-loader: 7.1.4(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       esbuild-wasm: 0.28.1
       http-proxy-middleware: 4.2.0(supports-color@8.1.1)
       istanbul-lib-instrument: 6.0.3(supports-color@8.1.1)
       jsonc-parser: 3.3.1
       karma-source-map-support: 1.4.0
       less: 4.6.7
-      less-loader: 13.0.0(less@4.6.7)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
-      license-webpack-plugin: 4.0.2(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      less-loader: 13.0.0(less@4.6.7)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
+      license-webpack-plugin: 4.0.2(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       loader-utils: 3.3.1
-      mini-css-extract-plugin: 2.10.2(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      mini-css-extract-plugin: 2.10.2(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       open: 11.0.0
       ora: 9.4.1
       picomatch: 4.0.5
       piscina: 5.2.0
       postcss: 8.5.19
-      postcss-loader: 8.2.1(postcss@8.5.19)(typescript@6.0.3)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      postcss-loader: 8.2.1(postcss@8.5.19)(typescript@6.0.3)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       resolve-url-loader: 5.0.0
       rxjs: 7.8.2
       sass: 1.101.0
-      sass-loader: 17.0.0(sass@1.101.0)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      sass-loader: 17.0.0(sass@1.101.0)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       semver: 7.8.5
-      source-map-loader: 5.0.0(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      source-map-loader: 5.0.0(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       source-map-support: 0.5.21
       terser: 5.49.0
       tinyglobby: 0.2.17
       tslib: 2.8.1
       typescript: 6.0.3
-      webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
-      webpack-dev-middleware: 8.0.3(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
-      webpack-dev-server: 5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+      webpack-dev-middleware: 8.0.3(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
+      webpack-dev-server: 5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
       webpack-merge: 6.0.1
-      webpack-subresource-integrity: 5.1.0(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
+      webpack-subresource-integrity: 5.1.0(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
     optionalDependencies:
       '@angular/core': 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
       '@angular/platform-browser': 22.1.0(@angular/animations@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)))(@angular/common@22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2))
@@ -28982,14 +29231,15 @@ snapshots:
       - vitest
       - webpack-cli
       - yaml
+    optional: true
 
-  '@angular-devkit/build-angular@22.1.2(c4f3ba9ba46a9d9ffd46bd36081dcea2)':
+  '@angular-devkit/build-angular@22.1.2(915cfc90bbd65bf9d48a517227b04cea)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2201.2(chokidar@5.0.0)
       '@angular-devkit/build-webpack': 0.2201.2(chokidar@5.0.0)(webpack-dev-server@5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)))(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
       '@angular-devkit/core': 22.1.2(chokidar@5.0.0)
-      '@angular/build': 22.1.2(4a056a285aa5428f36a27c9d2c051c2c)
+      '@angular/build': 22.1.2(5f2f0f9ec872a62378ddad7e97650036)
       '@angular/compiler-cli': 22.1.0(@angular/compiler@22.1.0)(typescript@6.0.3)
       '@babel/core': 8.0.1
       '@babel/generator': 8.0.0
@@ -29005,7 +29255,7 @@ snapshots:
       ansi-colors: 4.1.3
       autoprefixer: 10.5.4(postcss@8.5.19)
       babel-loader: 10.1.1(@babel/core@8.0.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
-      browserslist: 4.28.2
+      browserslist: 4.28.7
       copy-webpack-plugin: 14.0.0(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
       css-loader: 7.1.4(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))
       esbuild-wasm: 0.28.1
@@ -29079,7 +29329,6 @@ snapshots:
       - vitest
       - webpack-cli
       - yaml
-    optional: true
 
   '@angular-devkit/build-webpack@0.2201.2(chokidar@5.0.0)(webpack-dev-server@5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)))(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3))':
     dependencies:
@@ -29090,6 +29339,16 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
+  '@angular-devkit/build-webpack@0.2201.2(chokidar@5.0.0)(webpack-dev-server@5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)))(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))':
+    dependencies:
+      '@angular-devkit/architect': 0.2201.2(chokidar@5.0.0)
+      rxjs: 7.8.2
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+      webpack-dev-server: 5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
+    transitivePeerDependencies:
+      - chokidar
+    optional: true
+
   '@angular-devkit/core@22.1.2(chokidar@5.0.0)':
     dependencies:
       ajv: 8.20.0
@@ -29128,7 +29387,7 @@ snapshots:
       '@inquirer/confirm': 6.1.1(@types/node@26.1.2)
       '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
       beasties: 0.4.3
-      browserslist: 4.28.2
+      browserslist: 4.28.7
       esbuild: 0.28.1
       https-proxy-agent: 9.1.0(supports-color@8.1.1)
       jsonc-parser: 3.3.1
@@ -29187,7 +29446,7 @@ snapshots:
       '@inquirer/confirm': 6.1.1(@types/node@26.1.2)
       '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
       beasties: 0.4.3
-      browserslist: 4.28.2
+      browserslist: 4.28.7
       esbuild: 0.28.1
       https-proxy-agent: 9.1.0(supports-color@8.1.1)
       jsonc-parser: 3.3.1
@@ -29247,7 +29506,7 @@ snapshots:
       '@inquirer/confirm': 6.1.1(@types/node@26.1.2)
       '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.19))(terser@5.49.0)(yaml@2.9.0))
       beasties: 0.4.3
-      browserslist: 4.28.2
+      browserslist: 4.28.7
       esbuild: 0.28.1
       https-proxy-agent: 9.1.0(supports-color@8.1.1)
       jsonc-parser: 3.3.1
@@ -29294,7 +29553,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/build@22.1.2(6fe94f9200bc61445b7cf283a6dbda65)':
+  '@angular/build@22.1.2(c2d92ba4e1aec8f30e382cb6e9758205)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2201.2(chokidar@5.0.0)
@@ -29304,9 +29563,9 @@ snapshots:
       '@babel/helper-annotate-as-pure': 8.0.0
       '@babel/helper-split-export-declaration': 7.24.7
       '@inquirer/confirm': 6.1.1(@types/node@26.1.2)
-      '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0))
+      '@vitejs/plugin-basic-ssl': 2.3.0(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
       beasties: 0.4.3
-      browserslist: 4.28.2
+      browserslist: 4.28.7
       esbuild: 0.28.1
       https-proxy-agent: 9.1.0(supports-color@8.1.1)
       jsonc-parser: 3.3.1
@@ -29324,7 +29583,7 @@ snapshots:
       tinyglobby: 0.2.17
       tslib: 2.8.1
       typescript: 6.0.3
-      vite: 8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0)
+      vite: 8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
       watchpack: 2.5.2
     optionalDependencies:
       '@angular/core': 22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)
@@ -29338,7 +29597,7 @@ snapshots:
       postcss: 8.5.16
       rollup: 4.62.3
       tailwindcss: 4.3.3
-      vitest: 4.1.10(@types/node@26.1.2)(@vitest/coverage-v8@4.1.10)(jsdom@30.0.1(@noble/hashes@2.2.0))(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0))
+      vitest: 4.1.10(@types/node@26.1.2)(@vitest/coverage-v8@4.1.10)(jsdom@30.0.1(@noble/hashes@2.2.0))(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
     transitivePeerDependencies:
       - '@types/node'
       - '@vitejs/devtools'
@@ -32667,13 +32926,6 @@ snapshots:
       '@tybys/wasm-util': 0.10.3
     optional: true
 
-  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
-    dependencies:
-      '@emnapi/core': 1.11.1
-      '@emnapi/runtime': 1.11.1
-      '@tybys/wasm-util': 0.10.3
-    optional: true
-
   '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
     dependencies:
       '@emnapi/core': 1.11.2
@@ -32688,6 +32940,20 @@ snapshots:
       '@tybys/wasm-util': 0.10.3
     optional: true
 
+  '@napi-rs/wasm-runtime@1.2.1(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    dependencies:
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.2.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
+    dependencies:
+      '@emnapi/core': 1.11.2
+      '@emnapi/runtime': 1.11.2
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
   '@napi-rs/wasm-runtime@1.2.1(@emnapi/core@2.0.0-alpha.3)(@emnapi/runtime@2.0.0-alpha.3)':
     dependencies:
       '@emnapi/core': 2.0.0-alpha.3
@@ -32701,6 +32967,13 @@ snapshots:
       typescript: 6.0.3
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  '@ngtools/webpack@22.1.2(@angular/compiler-cli@22.1.0(@angular/compiler@22.1.0)(typescript@6.0.3))(typescript@6.0.3)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))':
+    dependencies:
+      '@angular/compiler-cli': 22.1.0(@angular/compiler@22.1.0)(typescript@6.0.3)
+      typescript: 6.0.3
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     dependencies:
       eslint-scope: 5.1.1
@@ -33004,7 +33277,7 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.2.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@oxc-parser/binding-wasm32-wasi@0.133.0':
@@ -33018,7 +33291,7 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.11.2
       '@emnapi/runtime': 1.11.2
-      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
+      '@napi-rs/wasm-runtime': 1.2.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
     optional: true
 
   '@oxc-parser/binding-win32-arm64-msvc@0.121.0':
@@ -34486,14 +34759,14 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.11.1
       '@emnapi/runtime': 1.11.1
-      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+      '@napi-rs/wasm-runtime': 1.2.1(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
     optional: true
 
   '@rolldown/binding-wasm32-wasi@1.2.0':
     dependencies:
       '@emnapi/core': 1.11.2
       '@emnapi/runtime': 1.11.2
-      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
+      '@napi-rs/wasm-runtime': 1.2.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
     optional: true
 
   '@rolldown/binding-wasm32-wasi@1.2.1':
@@ -35157,11 +35430,6 @@ snapshots:
       '@tanstack/virtual-core': 3.17.7
       lit: 3.3.3
 
-  '@tanstack/octane-store@0.12.1(octane@0.1.21(@typescript-eslint/types@8.62.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))':
-    dependencies:
-      '@tanstack/store': 0.11.0
-      octane: 0.1.21(@typescript-eslint/types@8.62.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
-
   '@tanstack/octane-store@0.12.1(octane@0.1.21(@typescript-eslint/types@8.65.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))':
     dependencies:
       '@tanstack/store': 0.11.0
@@ -35681,7 +35949,7 @@ snapshots:
       '@tanstack/router-utils': 1.162.2(supports-color@8.1.1)
       '@tanstack/start-server-core': 1.169.16
       exsolve: 1.1.0
-      lightningcss: 1.32.0
+      lightningcss: 1.33.0
       pathe: 2.0.3
       picomatch: 4.0.5
       seroval: 1.5.4
@@ -35918,21 +36186,6 @@ snapshots:
 
   '@tsconfig/svelte@5.0.8': {}
 
-  '@tsrx/core@0.1.56(@typescript-eslint/types@8.62.0)':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@noble/hashes': 2.2.0
-      '@sveltejs/acorn-typescript': 1.0.11(acorn@8.18.0)
-      '@types/estree': 1.0.9
-      '@types/estree-jsx': 1.0.5
-      acorn: 8.18.0
-      esrap: 2.3.0(@typescript-eslint/types@8.62.0)
-      is-reference: 3.0.3
-      magic-string: 0.30.21
-      zimmerframe: 1.1.4
-    transitivePeerDependencies:
-      - '@typescript-eslint/types'
-
   '@tsrx/core@0.1.56(@typescript-eslint/types@8.65.0)':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -35948,14 +36201,6 @@ snapshots:
     transitivePeerDependencies:
       - '@typescript-eslint/types'
 
-  '@tsrx/typescript-plugin@0.3.118(octane@0.1.21(@typescript-eslint/types@8.62.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(typescript@6.0.3)':
-    dependencies:
-      '@volar/language-core': 2.4.28
-      '@volar/typescript': 2.4.28
-      typescript: 6.0.3
-    optionalDependencies:
-      octane: 0.1.21(@typescript-eslint/types@8.62.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
-
   '@tsrx/typescript-plugin@0.3.118(octane@0.1.21(@typescript-eslint/types@8.65.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)))(typescript@6.0.3)':
     dependencies:
       '@volar/language-core': 2.4.28
@@ -36421,10 +36666,6 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
     optional: true
 
-  '@vitejs/plugin-basic-ssl@2.3.0(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0))':
-    dependencies:
-      vite: 8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0)
-
   '@vitejs/plugin-basic-ssl@2.3.0(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.19))(terser@5.49.0)(yaml@2.9.0))':
     dependencies:
       vite: 8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.19))(terser@5.49.0)(yaml@2.9.0)
@@ -36490,13 +36731,13 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.10(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0))':
+  '@vitest/mocker@4.1.10(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 4.1.10
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0)
+      vite: 8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
     optional: true
 
   '@vitest/mocker@4.1.10(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0))':
@@ -36671,7 +36912,7 @@ snapshots:
       '@vue/shared': 3.5.38
       estree-walker: 2.0.2
       magic-string: 0.30.21
-      postcss: 8.5.16
+      postcss: 8.5.25
       source-map-js: 1.2.1
 
   '@vue/compiler-sfc@3.5.40':
@@ -37737,6 +37978,14 @@ snapshots:
     optionalDependencies:
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  babel-loader@10.1.1(@babel/core@8.0.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      '@babel/core': 8.0.1
+      find-up: 5.0.0
+    optionalDependencies:
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   babel-plugin-debug-macros@0.3.4(@babel/core@7.29.7(supports-color@8.1.1)):
     dependencies:
       '@babel/core': 7.29.7(supports-color@8.1.1)
@@ -37866,9 +38115,9 @@ snapshots:
       domhandler: 5.0.3
       htmlparser2: 10.1.0
       picocolors: 1.1.1
-      postcss: 8.5.16
+      postcss: 8.5.25
       postcss-media-query-parser: 0.2.3
-      postcss-safe-parser: 7.0.1(postcss@8.5.16)
+      postcss-safe-parser: 7.0.1(postcss@8.5.25)
 
   better-path-resolve@1.0.0:
     dependencies:
@@ -38361,6 +38610,16 @@ snapshots:
       tinyglobby: 0.2.17
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  copy-webpack-plugin@14.0.0(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      glob-parent: 6.0.2
+      normalize-path: 3.0.0
+      schema-utils: 4.3.3
+      serialize-javascript: 7.0.5
+      tinyglobby: 0.2.17
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   core-js-compat@3.49.0:
     dependencies:
       browserslist: 4.28.7
@@ -38397,17 +38656,31 @@ snapshots:
 
   css-loader@7.1.4(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.16)
-      postcss: 8.5.16
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.16)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.16)
-      postcss-modules-scope: 3.2.1(postcss@8.5.16)
-      postcss-modules-values: 4.0.0(postcss@8.5.16)
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.25)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.25)
+      postcss-modules-scope: 3.2.1(postcss@8.5.25)
+      postcss-modules-values: 4.0.0(postcss@8.5.25)
       postcss-value-parser: 4.2.0
       semver: 7.8.5
     optionalDependencies:
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  css-loader@7.1.4(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.25)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.25)
+      postcss-modules-scope: 3.2.1(postcss@8.5.25)
+      postcss-modules-values: 4.0.0(postcss@8.5.25)
+      postcss-value-parser: 4.2.0
+      semver: 7.8.5
+    optionalDependencies:
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   css-select@5.2.2:
     dependencies:
       boolbase: 1.0.0
@@ -38774,6 +39047,14 @@ snapshots:
       content-tag: 4.2.0
       oxc-parser: 0.130.0
 
+  ember-modifier@4.3.0(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1):
+    dependencies:
+      '@embroider/addon-shim': 1.10.3(supports-color@8.1.1)
+      decorator-transforms: 2.4.0(@babel/core@7.29.7(supports-color@8.1.1))
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   ember-qunit@9.1.0(@ember/test-helpers@5.4.3(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(qunit@2.26.0)(supports-color@8.1.1):
     dependencies:
       '@ember/test-helpers': 5.4.3(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
@@ -39422,12 +39703,6 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@2.3.0(@typescript-eslint/types@8.62.0):
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-    optionalDependencies:
-      '@typescript-eslint/types': 8.62.0
-
   esrap@2.3.0(@typescript-eslint/types@8.65.0):
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -40177,9 +40452,9 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  icss-utils@5.1.0(postcss@8.5.16):
+  icss-utils@5.1.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.16
+      postcss: 8.5.25
 
   ieee754@1.2.1: {}
 
@@ -40675,6 +40950,14 @@ snapshots:
     optionalDependencies:
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  less-loader@13.0.0(less@4.6.7)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      '@types/less': 3.0.8
+      less: 4.6.7
+    optionalDependencies:
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   less@4.6.7:
     dependencies:
       copy-anything: 3.0.5
@@ -40695,10 +40978,17 @@ snapshots:
 
   license-webpack-plugin@4.0.2(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)):
     dependencies:
-      webpack-sources: 3.5.0
+      webpack-sources: 3.5.1
     optionalDependencies:
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  license-webpack-plugin@4.0.2(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      webpack-sources: 3.5.1
+    optionalDependencies:
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   lightningcss-android-arm64@1.32.0:
     optional: true
 
@@ -41063,6 +41353,13 @@ snapshots:
       tapable: 2.3.3
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  mini-css-extract-plugin@2.10.2(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      schema-utils: 4.3.3
+      tapable: 2.3.3
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   minimalistic-assert@1.0.1: {}
 
   minimatch@10.2.5:
@@ -41110,6 +41407,18 @@ snapshots:
       uglify-js: 3.19.3
     optional: true
 
+  minimizer-webpack-plugin@5.6.1(esbuild@0.28.1)(postcss@8.5.19)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.49.0
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optionalDependencies:
+      esbuild: 0.28.1
+      postcss: 8.5.19
+    optional: true
+
   minipass@4.2.8: {}
 
   minipass@7.1.3: {}
@@ -41449,19 +41758,6 @@ snapshots:
 
   obug@2.1.4: {}
 
-  octane@0.1.21(@typescript-eslint/types@8.62.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)):
-    dependencies:
-      '@tsrx/core': 0.1.56(@typescript-eslint/types@8.62.0)
-      '@types/react': 19.2.18
-      devalue: 5.8.2
-      esrap: 2.3.0(@typescript-eslint/types@8.62.0)
-    optionalDependencies:
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      vite: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
-    transitivePeerDependencies:
-      - '@typescript-eslint/types'
-
   octane@0.1.21(@typescript-eslint/types@8.65.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)):
     dependencies:
       '@tsrx/core': 0.1.56(@typescript-eslint/types@8.65.0)
@@ -41887,6 +42183,18 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  postcss-loader@8.2.1(postcss@8.5.19)(typescript@6.0.3)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      cosmiconfig: 9.0.1(typescript@6.0.3)
+      jiti: 2.7.0
+      postcss: 8.5.19
+      semver: 7.8.5
+    optionalDependencies:
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    transitivePeerDependencies:
+      - typescript
+    optional: true
+
   postcss-media-query-parser@0.2.3: {}
 
   postcss-mixins@12.1.2(postcss@8.5.25):
@@ -41897,26 +42205,26 @@ snapshots:
       sugarss: 5.0.1(postcss@8.5.25)
       tinyglobby: 0.2.17
 
-  postcss-modules-extract-imports@3.1.0(postcss@8.5.16):
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.16
+      postcss: 8.5.25
 
-  postcss-modules-local-by-default@4.2.0(postcss@8.5.16):
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.25):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.16)
-      postcss: 8.5.16
-      postcss-selector-parser: 7.1.1
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
 
-  postcss-modules-scope@3.2.1(postcss@8.5.16):
+  postcss-modules-scope@3.2.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.16
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-modules-values@4.0.0(postcss@8.5.16):
+  postcss-modules-values@4.0.0(postcss@8.5.25):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.16)
-      postcss: 8.5.16
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
 
   postcss-nested@7.0.2(postcss@8.5.25):
     dependencies:
@@ -41933,9 +42241,13 @@ snapshots:
     dependencies:
       postcss: 8.5.16
 
-  postcss-scss@4.0.9(postcss@8.5.16):
+  postcss-safe-parser@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.16
+      postcss: 8.5.25
+
+  postcss-scss@4.0.9(postcss@8.5.25):
+    dependencies:
+      postcss: 8.5.25
 
   postcss-selector-parser@7.1.1:
     dependencies:
@@ -41961,7 +42273,7 @@ snapshots:
 
   postcss@8.5.19:
     dependencies:
-      nanoid: 3.3.12
+      nanoid: 3.3.16
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -42512,7 +42824,7 @@ snapshots:
       adjust-sourcemap-loader: 4.0.0
       convert-source-map: 1.9.0
       loader-utils: 2.0.4
-      postcss: 8.5.16
+      postcss: 8.5.25
       source-map: 0.6.1
 
   resolve.exports@2.0.3: {}
@@ -42770,6 +43082,12 @@ snapshots:
       sass: 1.101.0
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  sass-loader@17.0.0(sass@1.101.0)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    optionalDependencies:
+      sass: 1.101.0
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   sass@1.101.0:
     dependencies:
       chokidar: 5.0.0
@@ -43103,6 +43421,13 @@ snapshots:
       source-map-js: 1.2.1
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  source-map-loader@5.0.0(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      iconv-lite: 0.6.3
+      source-map-js: 1.2.1
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   source-map-support@0.5.21:
     dependencies:
       buffer-from: 1.1.2
@@ -43311,8 +43636,8 @@ snapshots:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
-      postcss: 8.5.16
-      postcss-scss: 4.0.9(postcss@8.5.16)
+      postcss: 8.5.25
+      postcss-scss: 4.0.9(postcss@8.5.25)
       postcss-selector-parser: 7.1.1
       semver: 7.8.5
     optionalDependencies:
@@ -43931,27 +44256,9 @@ snapshots:
       stack-trace: 1.0.0
       vite: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
-  vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0):
-    dependencies:
-      lightningcss: 1.32.0
-      picomatch: 4.0.5
-      postcss: 8.5.25
-      rolldown: 1.1.5
-      tinyglobby: 0.2.17
-    optionalDependencies:
-      '@types/node': 26.1.2
-      esbuild: 0.28.1
-      fsevents: 2.3.3
-      jiti: 2.7.0
-      less: 4.6.7
-      sass: 1.101.0
-      sugarss: 5.0.1(postcss@8.5.16)
-      terser: 5.49.0
-      yaml: 2.9.0
-
   vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.19))(terser@5.49.0)(yaml@2.9.0):
     dependencies:
-      lightningcss: 1.32.0
+      lightningcss: 1.33.0
       picomatch: 4.0.5
       postcss: 8.5.25
       rolldown: 1.1.5
@@ -43969,7 +44276,7 @@ snapshots:
 
   vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0):
     dependencies:
-      lightningcss: 1.32.0
+      lightningcss: 1.33.0
       picomatch: 4.0.5
       postcss: 8.5.25
       rolldown: 1.1.5
@@ -44048,10 +44355,10 @@ snapshots:
     optionalDependencies:
       vite: 8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
 
-  vitest@4.1.10(@types/node@26.1.2)(@vitest/coverage-v8@4.1.10)(jsdom@30.0.1(@noble/hashes@2.2.0))(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0)):
+  vitest@4.1.10(@types/node@26.1.2)(@vitest/coverage-v8@4.1.10)(jsdom@30.0.1(@noble/hashes@2.2.0))(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.10
-      '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0))
+      '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0))
       '@vitest/pretty-format': 4.1.10
       '@vitest/runner': 4.1.10
       '@vitest/snapshot': 4.1.10
@@ -44068,7 +44375,7 @@ snapshots:
       tinyexec: 1.2.4
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vite: 8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.49.0)(yaml@2.9.0)
+      vite: 8.1.5(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.7)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.25))(terser@5.49.0)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 26.1.2
@@ -44314,6 +44621,20 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
+  webpack-dev-middleware@7.4.5(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      colorette: 2.0.20
+      memfs: 4.57.6(tslib@2.8.1)
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      schema-utils: 4.3.3
+    optionalDependencies:
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    transitivePeerDependencies:
+      - tslib
+    optional: true
+
   webpack-dev-middleware@8.0.3(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)):
     dependencies:
       memfs: 4.57.6(tslib@2.8.1)
@@ -44326,6 +44647,19 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
+  webpack-dev-middleware@8.0.3(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      memfs: 4.57.6(tslib@2.8.1)
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      schema-utils: 4.3.3
+    optionalDependencies:
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    transitivePeerDependencies:
+      - tslib
+    optional: true
+
   webpack-dev-server@5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)):
     dependencies:
       '@types/bonjour': 3.5.13
@@ -44365,14 +44699,52 @@ snapshots:
       - tslib
       - utf-8-validate
 
+  webpack-dev-server@5.2.6(debug@4.4.3(supports-color@8.1.1))(supports-color@8.1.1)(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      '@types/bonjour': 3.5.13
+      '@types/connect-history-api-fallback': 1.5.4
+      '@types/express': 4.17.25
+      '@types/express-serve-static-core': 4.19.8
+      '@types/serve-index': 1.9.4
+      '@types/serve-static': 1.15.10
+      '@types/sockjs': 0.3.36
+      '@types/ws': 8.18.1
+      ansi-html-community: 0.0.8
+      bonjour-service: 1.4.0
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      compression: 1.8.1(supports-color@8.1.1)
+      connect-history-api-fallback: 2.0.0
+      express: 4.22.2(supports-color@8.1.1)
+      graceful-fs: 4.2.11
+      http-proxy-middleware: 2.0.9(@types/express@4.17.25)(debug@4.4.3(supports-color@8.1.1))
+      ipaddr.js: 2.4.0
+      launch-editor: 2.14.1
+      open: 10.2.0
+      p-retry: 6.2.1
+      schema-utils: 4.3.3
+      selfsigned: 5.5.0
+      serve-index: 1.9.2(supports-color@8.1.1)
+      sockjs: 0.3.24
+      spdy: 4.0.2(supports-color@8.1.1)
+      webpack-dev-middleware: 7.4.5(tslib@2.8.1)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
+      ws: 8.21.0
+    optionalDependencies:
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - tslib
+      - utf-8-validate
+    optional: true
+
   webpack-merge@6.0.1:
     dependencies:
       clone-deep: 4.0.1
       flat: 5.0.2
       wildcard: 2.0.1
 
-  webpack-sources@3.5.0: {}
-
   webpack-sources@3.5.1: {}
 
   webpack-subresource-integrity@5.1.0(webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)):
@@ -44380,6 +44752,12 @@ snapshots:
       typed-assert: 1.0.9
       webpack: 5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3)
 
+  webpack-subresource-integrity@5.1.0(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19)):
+    dependencies:
+      typed-assert: 1.0.9
+      webpack: 5.109.2(esbuild@0.28.1)(postcss@8.5.19)
+    optional: true
+
   webpack-virtual-modules@0.6.2: {}
 
   webpack@5.109.2(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)(uglify-js@3.19.3):
@@ -44455,6 +44833,43 @@ snapshots:
       - uglify-js
     optional: true
 
+  webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19):
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.18.0
+      browserslist: 4.28.7
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.24.5
+      es-module-lexer: 2.1.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      graceful-fs: 4.2.11
+      mime-db: 1.54.0
+      minimizer-webpack-plugin: 5.6.1(esbuild@0.28.1)(postcss@8.5.19)(webpack@5.109.2(esbuild@0.28.1)(postcss@8.5.19))
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.3
+      watchpack: 2.5.2
+      webpack-sources: 3.5.1
+    transitivePeerDependencies:
+      - '@minify-html/node'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
+      - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
+      - uglify-js
+    optional: true
+
   websocket-driver@0.7.5:
     dependencies:
       http-parser-js: 0.5.10

From 2f98958613c9237ea45747d7d10e0aea5a4f7a6f Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sun, 16 Aug 2026 18:37:15 +0200
Subject: [PATCH 09/23] Default to virtual scrolling for larger trading
 datasets

---
 examples/alpine/realtime-trading/index.html   |  2 +-
 .../benchmark/trading-benchmark-controller.ts |  6 ++---
 .../src/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 .../benchmark/trading-benchmark.controller.ts | 18 +++++++++++----
 .../src/app/shell/configurator.html           |  4 ++--
 .../src/app/table/trading-row-virtualizer.ts  | 14 +++++++++++
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 23 +++++++++++++------
 .../benchmark/trading-benchmark-controller.ts |  6 ++---
 .../app/components/shell/configurator.gts     |  2 +-
 .../app/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 .../benchmark/trading-benchmark-controller.ts |  6 ++---
 .../src/shell/Configurator.ts                 |  2 +-
 .../src/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 .../benchmark/trading-benchmark-controller.ts |  6 ++---
 .../src/shell/Configurator.tsrx               |  2 +-
 .../src/table/TradingTable.tsrx               |  4 ++--
 .../src/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 .../benchmark/trading-benchmark-controller.ts |  6 ++---
 .../src/shell/TradingShell.tsx                |  4 ++--
 .../src/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 .../benchmark/trading-benchmark-controller.ts |  6 ++---
 .../src/shell/TradingShell.tsx                |  4 ++--
 .../src/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 .../benchmark/trading-benchmark-controller.ts |  4 ++--
 .../src/shell/TradingShell.tsx                |  2 +-
 .../src/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 .../benchmark/trading-benchmark-controller.ts |  6 ++---
 .../src/shell/Configurator.svelte             |  2 +-
 .../src/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 .../benchmark/trading-benchmark-controller.ts |  6 ++---
 .../src/shell/TradingShell.tsx                |  4 ++--
 .../src/table/trading-row-virtualizer.ts      | 12 ++++++----
 .../realtime-trading/tests/e2e/smoke.spec.ts  | 15 +++++++++---
 41 files changed, 265 insertions(+), 117 deletions(-)

diff --git a/examples/alpine/realtime-trading/index.html b/examples/alpine/realtime-trading/index.html
index f96e4c37fb..6553353da5 100644
--- a/examples/alpine/realtime-trading/index.html
+++ b/examples/alpine/realtime-trading/index.html
@@ -25,7 +25,7 @@
       <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" :value="local.feed.publishIntervalMs" @change="setPublishInterval($event)"><template x-for="option in configuratorOptions.workerDeliveryIntervals" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select><small>One coalesced worker message at this target cadence.</small></label>
     </section>
     <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
-      <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" :value="virtualMode()" :disabled="local.feed.instrumentCount >= 250" @change="setVirtualMode($event)"><template x-for="option in configuratorOptions.rowRenderingModes" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select><small x-text="local.feed.instrumentCount >= 250 ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'"></small></label>
+      <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" :value="virtualMode()" :disabled="local.feed.instrumentCount >= 1500" @change="setVirtualMode($event)"><template x-for="option in configuratorOptions.rowRenderingModes" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select><small x-text="local.feed.instrumentCount >= 1500 ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'"></small></label>
       <label class="toggle-field"><input type="checkbox" :checked="local.rendererMode === 'swap'" @change="setRendererMode($event)" /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
       <label class="toggle-field"><input type="checkbox" :checked="local.feed.updateSparklines" @change="setSparklineUpdates($event)" /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
       <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" :value="local.feed.sparklineSampleIntervalMs" @change="setSparklineInterval($event)"><template x-for="option in configuratorOptions.intradaySamplingIntervals" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select></label>
diff --git a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 316bb530e6..9f4361b3da 100644
--- a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -9,10 +9,10 @@ import {
 import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollMode
+  requestedVirtualScrollMode: VirtualScrollPreference
   metrics: FeedMetrics
   mountedCells: number
   liveComponents: number
@@ -29,7 +29,7 @@ export interface TradingBenchmarkActions {
 }
 
 const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'none',
+  requestedVirtualScrollMode: 'auto',
   metrics: initialMetrics,
   mountedCells: 0,
   liveComponents: 0,
diff --git a/examples/alpine/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/alpine/realtime-trading/src/table/trading-row-virtualizer.ts
index d733342a00..bc4b34b528 100644
--- a/examples/alpine/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/alpine/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -1,14 +1,18 @@
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
diff --git a/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts b/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
index ebe0094f6d..82c6d5eb93 100644
--- a/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
@@ -35,6 +35,15 @@ test('runs the Alpine realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -44,12 +53,12 @@ test('runs the Alpine realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
diff --git a/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts b/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
index 44fd056ea7..014d474a26 100644
--- a/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
+++ b/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
@@ -8,13 +8,18 @@ import {
 } from '@angular/core'
 import { TRADING_COLUMN_COUNT } from '../table/table-config/trading-column-types'
 import { MarketFeedService } from '../feed/market-feed.service'
+import {
+  FORCED_VIRTUALIZATION_ROW_COUNT,
+  resolveVirtualScrollMode,
+} from '../table/trading-row-virtualizer'
 import { BenchmarkMonitor, initialMetrics } from './benchmark-monitor'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type {
+  VirtualScrollMode,
+  VirtualScrollPreference,
+} from '../table/trading-row-virtualizer'
 import type { FeedMetrics } from './benchmark-monitor'
 import type { RendererMode } from '../table/table-config/trading-column-types'
 
-const FORCED_VIRTUALIZATION_ROW_COUNT = 250
-
 @Injectable({ providedIn: 'root' })
 export class TradingBenchmarkController {
   readonly #destroyRef = inject(DestroyRef)
@@ -28,7 +33,7 @@ export class TradingBenchmarkController {
   readonly tableWorkerEnabled = signal(false)
   readonly renderedRowCount = signal(0)
   readonly rendererMode = signal<RendererMode>('stable')
-  readonly requestedVirtualScrollMode = signal<VirtualScrollMode>('none')
+  readonly requestedVirtualScrollMode = signal<VirtualScrollPreference>('auto')
   readonly selectedSymbol = signal<string | null>(null)
   readonly metrics = signal<FeedMetrics>(initialMetrics)
   readonly displayQuotes = this.#feed.quotes
@@ -42,7 +47,10 @@ export class TradingBenchmarkController {
     () => this.#feed.instrumentCount() >= FORCED_VIRTUALIZATION_ROW_COUNT,
   )
   readonly virtualScrollMode = computed<VirtualScrollMode>(() =>
-    this.virtualScrollForced() ? 'tanstack' : this.requestedVirtualScrollMode(),
+    resolveVirtualScrollMode(
+      this.requestedVirtualScrollMode(),
+      this.#feed.instrumentCount(),
+    ),
   )
   readonly mountedCells = computed(
     () => this.renderedRowCount() * TRADING_COLUMN_COUNT,
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.html b/examples/angular/realtime-trading/src/app/shell/configurator.html
index 761ecbd8ff..49f2784c0d 100644
--- a/examples/angular/realtime-trading/src/app/shell/configurator.html
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.html
@@ -107,9 +107,9 @@ <h2 id="render-settings">RENDER PATH</h2>
       </select>
       <small>
         @if (controller.virtualScrollForced()) {
-          TanStack Virtual is required and locked at 250 or more rows.
+          TanStack Virtual is required and locked at 1,500 or more rows.
         } @else {
-          Full DOM mounts every row; TanStack Virtual mounts only the visible window.
+          Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.
         }
       </small>
     </label>
diff --git a/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts b/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
index 2329bef2c1..122e4d1b6f 100644
--- a/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
+++ b/examples/angular/realtime-trading/src/app/table/trading-row-virtualizer.ts
@@ -9,10 +9,24 @@ import { injectVirtualizer } from '@tanstack/angular-virtual'
 import type { ElementRef, Signal } from '@angular/core'
 
 export const TRADING_ROW_HEIGHT = 32
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 const TANSTACK_OVERSCAN = 10
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
+
+export function resolveVirtualScrollMode(
+  requestedMode: VirtualScrollPreference,
+  instrumentCount: number,
+): VirtualScrollMode {
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
+    ? 'tanstack'
+    : 'none'
+}
 
 interface TradingVirtualRow {
   id: string
diff --git a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
index 5baeb90c1c..fc8df87c31 100644
--- a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
@@ -37,6 +37,15 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -46,12 +55,12 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
@@ -177,8 +186,8 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await tableWorker.check()
     await expect(page.getByText('ROW MODEL WORKER ON')).toBeVisible()
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await instrumentCount.selectOption('1500')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await instrumentCount.selectOption('100')
     await expect(table.locator('tbody tr')).toHaveCount(100)
     await page.getByTestId('feed-toggle').click()
@@ -196,8 +205,8 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await tableWorker.uncheck()
 
     await expect(tableWorker).toBeEnabled()
-    await instrumentCount.selectOption('250')
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await instrumentCount.selectOption('1500')
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     const firstPrice = table.locator('tbody tr').first().getByRole('button')
     const priceBeforeUpdate = await firstPrice.textContent()
diff --git a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
index 316bb530e6..9f4361b3da 100644
--- a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
+++ b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
@@ -9,10 +9,10 @@ import {
 import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollMode
+  requestedVirtualScrollMode: VirtualScrollPreference
   metrics: FeedMetrics
   mountedCells: number
   liveComponents: number
@@ -29,7 +29,7 @@ export interface TradingBenchmarkActions {
 }
 
 const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'none',
+  requestedVirtualScrollMode: 'auto',
   metrics: initialMetrics,
   mountedCells: 0,
   liveComponents: 0,
diff --git a/examples/ember/realtime-trading/app/components/shell/configurator.gts b/examples/ember/realtime-trading/app/components/shell/configurator.gts
index b3bcd23a01..7e4edce3bb 100644
--- a/examples/ember/realtime-trading/app/components/shell/configurator.gts
+++ b/examples/ember/realtime-trading/app/components/shell/configurator.gts
@@ -36,7 +36,7 @@ export default class Configurator extends Component<Signature> {
   get virtualMode() { return resolveVirtualScrollMode(this.benchmark.requestedVirtualScrollMode, this.feedState.instrumentCount) }
   get sampleRateIndex() { return feedSampleRateIndex(this.feedState.targetTicksPerSecond) }
   get sampleRateLabel() { return `${rate.format(this.feedState.targetTicksPerSecond)} samples/s` }
-  get virtualDescription() { return this.virtualForced ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.' }
+  get virtualDescription() { return this.virtualForced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.' }
 
   setInstrumentCount = (event: Event) => {
     this.args.controller.actions.resetViewState()
diff --git a/examples/ember/realtime-trading/app/table/trading-row-virtualizer.ts b/examples/ember/realtime-trading/app/table/trading-row-virtualizer.ts
index d733342a00..bc4b34b528 100644
--- a/examples/ember/realtime-trading/app/table/trading-row-virtualizer.ts
+++ b/examples/ember/realtime-trading/app/table/trading-row-virtualizer.ts
@@ -1,14 +1,18 @@
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
diff --git a/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts b/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
index bc4d1d6fd6..6806f95afc 100644
--- a/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
@@ -35,6 +35,15 @@ test('runs the Ember realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -44,12 +53,12 @@ test('runs the Ember realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
diff --git a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 316bb530e6..9f4361b3da 100644
--- a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -9,10 +9,10 @@ import {
 import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollMode
+  requestedVirtualScrollMode: VirtualScrollPreference
   metrics: FeedMetrics
   mountedCells: number
   liveComponents: number
@@ -29,7 +29,7 @@ export interface TradingBenchmarkActions {
 }
 
 const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'none',
+  requestedVirtualScrollMode: 'auto',
   metrics: initialMetrics,
   mountedCells: 0,
   liveComponents: 0,
diff --git a/examples/lit/realtime-trading/src/shell/Configurator.ts b/examples/lit/realtime-trading/src/shell/Configurator.ts
index 6acac808ca..df724f7f8e 100644
--- a/examples/lit/realtime-trading/src/shell/Configurator.ts
+++ b/examples/lit/realtime-trading/src/shell/Configurator.ts
@@ -34,7 +34,7 @@ export class Configurator extends ControllerElement {
         <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" .value=${String(feedState.publishIntervalMs)} @change=${(event: Event) => this.feed.actions.setPublishInterval(number(event))}>${options(configuratorOptions.workerDeliveryIntervals)}</select><small>One coalesced worker message at this target cadence.</small></label>
       </section>
       <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
-        <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" .value=${virtualMode} ?disabled=${forced} @change=${(event: Event) => this.controller.actions.setVirtualScrollEnabled(value(event) === 'tanstack')}>${options(configuratorOptions.rowRenderingModes)}</select><small>${forced ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'}</small></label>
+        <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" .value=${virtualMode} ?disabled=${forced} @change=${(event: Event) => this.controller.actions.setVirtualScrollEnabled(value(event) === 'tanstack')}>${options(configuratorOptions.rowRenderingModes)}</select><small>${forced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}</small></label>
         <label class="toggle-field"><input type="checkbox" .checked=${this.controller.renderAtoms.rendererMode.get() === 'swap'} @change=${(event: Event) => this.controller.actions.setRendererMode(checked(event) ? 'swap' : 'stable')} /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
         <label class="toggle-field"><input type="checkbox" .checked=${feedState.updateSparklines} @change=${(event: Event) => this.feed.actions.setSparklineUpdates(checked(event))} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
         <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" .value=${String(feedState.sparklineSampleIntervalMs)} @change=${(event: Event) => this.feed.actions.setSparklineSampleInterval(number(event))}>${options(configuratorOptions.intradaySamplingIntervals)}</select></label>
diff --git a/examples/lit/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/lit/realtime-trading/src/table/trading-row-virtualizer.ts
index d733342a00..bc4b34b528 100644
--- a/examples/lit/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/lit/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -1,14 +1,18 @@
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
diff --git a/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts b/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
index 103d7e152a..cfc675f211 100644
--- a/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
@@ -35,6 +35,15 @@ test('runs the Lit realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -44,12 +53,12 @@ test('runs the Lit realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
diff --git a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 316bb530e6..9f4361b3da 100644
--- a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -9,10 +9,10 @@ import {
 import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollMode
+  requestedVirtualScrollMode: VirtualScrollPreference
   metrics: FeedMetrics
   mountedCells: number
   liveComponents: number
@@ -29,7 +29,7 @@ export interface TradingBenchmarkActions {
 }
 
 const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'none',
+  requestedVirtualScrollMode: 'auto',
   metrics: initialMetrics,
   mountedCells: 0,
   liveComponents: 0,
diff --git a/examples/octane/realtime-trading/src/shell/Configurator.tsrx b/examples/octane/realtime-trading/src/shell/Configurator.tsrx
index d4a43054ce..9aba645780 100644
--- a/examples/octane/realtime-trading/src/shell/Configurator.tsrx
+++ b/examples/octane/realtime-trading/src/shell/Configurator.tsrx
@@ -102,7 +102,7 @@ export function Configurator(props: {
             <option value={option.value}>{option.label}</option>
           }
         </select>
-        <small>{forced ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'}</small>
+        <small>{forced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}</small>
       </label>
       <label className="toggle-field">
         <input type="checkbox" checked={rendererMode === 'swap'} onChange={(event) => props.controller.actions.setRendererMode(checked(event) ? 'swap' : 'stable')} />
diff --git a/examples/octane/realtime-trading/src/table/TradingTable.tsrx b/examples/octane/realtime-trading/src/table/TradingTable.tsrx
index bf25502b89..8dd5356c4d 100644
--- a/examples/octane/realtime-trading/src/table/TradingTable.tsrx
+++ b/examples/octane/realtime-trading/src/table/TradingTable.tsrx
@@ -130,8 +130,6 @@ export function TradingTable({ controller, feed }: TradingTableProps) @{
         table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio]),
       ))
     }
-    writeColumnSizes()
-    fitAvailableWidth()
     const sizing = table.atoms.columnSizing.subscribe(writeColumnSizes)
     const order = table.atoms.columnOrder.subscribe(writeColumnSizes)
     const resizing = table.atoms.columnResizing.subscribe((state) => {
@@ -139,6 +137,8 @@ export function TradingTable({ controller, feed }: TradingTableProps) @{
     })
     const resizeObserver = new ResizeObserver(fitAvailableWidth)
     if (scrollRef.current) resizeObserver.observe(scrollRef.current)
+    writeColumnSizes()
+    fitAvailableWidth()
     const stopBenchmark = startTableBenchmark(controller, bodyRef.current)
     return () => {
       sizing.unsubscribe()
diff --git a/examples/octane/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/octane/realtime-trading/src/table/trading-row-virtualizer.ts
index 9b3df23552..fecaf38f6f 100644
--- a/examples/octane/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/octane/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -9,17 +9,21 @@ import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
 
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
 
 export function useVirtualizer<
diff --git a/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts b/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
index fc10f41e0d..a0f33d97b7 100644
--- a/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
@@ -35,6 +35,15 @@ test('runs the Octane realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -44,12 +53,12 @@ test('runs the Octane realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
diff --git a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 709c6ac277..ac2ccf0a4d 100644
--- a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -9,10 +9,10 @@ import {
 import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollMode
+  requestedVirtualScrollMode: VirtualScrollPreference
   metrics: FeedMetrics
   mountedCells: number
   liveComponents: number
@@ -29,7 +29,7 @@ export interface TradingBenchmarkActions {
 }
 
 const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'none',
+  requestedVirtualScrollMode: 'auto',
   metrics: initialMetrics,
   mountedCells: 0,
   liveComponents: 0,
diff --git a/examples/preact/realtime-trading/src/shell/TradingShell.tsx b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
index 83a30ab517..2c87a9da98 100644
--- a/examples/preact/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
@@ -301,8 +301,8 @@ function Configurator() {
           </select>
           <small>
             {virtualScrollForced
-              ? 'TanStack Virtual is required and locked at 250 or more rows.'
-              : 'Full DOM mounts every row; TanStack Virtual mounts only the visible window.'}
+              ? 'TanStack Virtual is required and locked at 1,500 or more rows.'
+              : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}
           </small>
         </label>
 
diff --git a/examples/preact/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/preact/realtime-trading/src/table/trading-row-virtualizer.ts
index da5733158f..2252ee2a35 100644
--- a/examples/preact/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/preact/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -9,17 +9,21 @@ import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
 
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
 
 export function useVirtualizer<
diff --git a/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts b/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
index ccc66066cb..d34bc88a96 100644
--- a/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
@@ -35,6 +35,15 @@ test('runs the Preact realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -44,12 +53,12 @@ test('runs the Preact realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
diff --git a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 34b1e422fe..01879ef8c9 100644
--- a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -9,10 +9,10 @@ import {
 import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollMode
+  requestedVirtualScrollMode: VirtualScrollPreference
   metrics: FeedMetrics
   mountedCells: number
   liveComponents: number
@@ -29,7 +29,7 @@ export interface TradingBenchmarkActions {
 }
 
 const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'none',
+  requestedVirtualScrollMode: 'auto',
   metrics: initialMetrics,
   mountedCells: 0,
   liveComponents: 0,
diff --git a/examples/react/realtime-trading/src/shell/TradingShell.tsx b/examples/react/realtime-trading/src/shell/TradingShell.tsx
index ec0421ce89..7066464a3f 100644
--- a/examples/react/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/react/realtime-trading/src/shell/TradingShell.tsx
@@ -309,8 +309,8 @@ function Configurator() {
           </select>
           <small>
             {virtualScrollForced
-              ? 'TanStack Virtual is required and locked at 250 or more rows.'
-              : 'Full DOM mounts every row; TanStack Virtual mounts only the visible window.'}
+              ? 'TanStack Virtual is required and locked at 1,500 or more rows.'
+              : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}
           </small>
         </label>
 
diff --git a/examples/react/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/react/realtime-trading/src/table/trading-row-virtualizer.ts
index d733342a00..bc4b34b528 100644
--- a/examples/react/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/react/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -1,14 +1,18 @@
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
diff --git a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
index 439de89ad5..c5cfd68ec4 100644
--- a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
@@ -44,6 +44,15 @@ test('runs the React realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -53,12 +62,12 @@ test('runs the React realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
diff --git a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 6206cdf435..cbc6ef8564 100644
--- a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -16,12 +16,12 @@ import {
 } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export function createTradingBenchmarkController(feed: MarketFeedController) {
   const [rendererMode, setRendererMode] = createSignal<RendererMode>('stable')
   const [requestedVirtualScrollMode, setRequestedVirtualScrollMode] =
-    createSignal<VirtualScrollMode>('none')
+    createSignal<VirtualScrollPreference>('auto')
   const [renderedRowCount, setRenderedRowCount] = createSignal(0)
   const [selectedSymbol, setSelectedSymbol] = createSignal<string | null>(null)
   const [metrics, setMetrics] = createSignal(initialMetrics)
diff --git a/examples/solid/realtime-trading/src/shell/TradingShell.tsx b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
index 0041d32561..a74e4dadc1 100644
--- a/examples/solid/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
@@ -267,7 +267,7 @@ function Configurator() {
           <small>
             {virtualScrollForced()
               ? `TanStack Virtual is required and locked at ${FORCED_VIRTUALIZATION_ROW_COUNT.toLocaleString()} or more rows.`
-              : 'Full DOM mounts every row; TanStack Virtual mounts only the visible window.'}
+              : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}
           </small>
         </label>
 
diff --git a/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
index d733342a00..bc4b34b528 100644
--- a/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -1,14 +1,18 @@
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
index 4d60a32a8d..f79a817496 100644
--- a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -35,6 +35,15 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -44,12 +53,12 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
diff --git a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 316bb530e6..9f4361b3da 100644
--- a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -9,10 +9,10 @@ import {
 import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollMode
+  requestedVirtualScrollMode: VirtualScrollPreference
   metrics: FeedMetrics
   mountedCells: number
   liveComponents: number
@@ -29,7 +29,7 @@ export interface TradingBenchmarkActions {
 }
 
 const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'none',
+  requestedVirtualScrollMode: 'auto',
   metrics: initialMetrics,
   mountedCells: 0,
   liveComponents: 0,
diff --git a/examples/svelte/realtime-trading/src/shell/Configurator.svelte b/examples/svelte/realtime-trading/src/shell/Configurator.svelte
index 10ff0822b9..0e7591a3ff 100644
--- a/examples/svelte/realtime-trading/src/shell/Configurator.svelte
+++ b/examples/svelte/realtime-trading/src/shell/Configurator.svelte
@@ -29,7 +29,7 @@
     <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" value={feedState.current.publishIntervalMs} onchange={(event) => feed.actions.setPublishInterval(numberValue(event))}>{#each configuratorOptions.workerDeliveryIntervals as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select><small>One coalesced worker message at this target cadence.</small></label>
   </section>
   <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
-    <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" value={virtualScrollMode} disabled={virtualScrollForced} onchange={(event) => controller.actions.setVirtualScrollEnabled(stringValue(event) === 'tanstack')}>{#each configuratorOptions.rowRenderingModes as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select><small>{virtualScrollForced ? 'TanStack Virtual is required and locked at 250 or more rows.' : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'}</small></label>
+    <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" value={virtualScrollMode} disabled={virtualScrollForced} onchange={(event) => controller.actions.setVirtualScrollEnabled(stringValue(event) === 'tanstack')}>{#each configuratorOptions.rowRenderingModes as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select><small>{virtualScrollForced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}</small></label>
     <label class="toggle-field"><input type="checkbox" checked={rendererMode.current === 'swap'} onchange={(event) => controller.actions.setRendererMode(checkedValue(event) ? 'swap' : 'stable')} /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
     <label class="toggle-field"><input type="checkbox" checked={feedState.current.updateSparklines} onchange={(event) => feed.actions.setSparklineUpdates(checkedValue(event))} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
     <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" value={feedState.current.sparklineSampleIntervalMs} onchange={(event) => feed.actions.setSparklineSampleInterval(numberValue(event))}>{#each configuratorOptions.intradaySamplingIntervals as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select></label>
diff --git a/examples/svelte/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/svelte/realtime-trading/src/table/trading-row-virtualizer.ts
index d733342a00..bc4b34b528 100644
--- a/examples/svelte/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/svelte/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -1,14 +1,18 @@
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
diff --git a/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts b/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
index 3362a2eadc..51f19e03cd 100644
--- a/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
@@ -35,6 +35,15 @@ test('runs the Vue realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -44,12 +53,12 @@ test('runs the Vue realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,
diff --git a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 316bb530e6..9f4361b3da 100644
--- a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -9,10 +9,10 @@ import {
 import type { FeedMetrics } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
-import type { VirtualScrollMode } from '../table/trading-row-virtualizer'
+import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollMode
+  requestedVirtualScrollMode: VirtualScrollPreference
   metrics: FeedMetrics
   mountedCells: number
   liveComponents: number
@@ -29,7 +29,7 @@ export interface TradingBenchmarkActions {
 }
 
 const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'none',
+  requestedVirtualScrollMode: 'auto',
   metrics: initialMetrics,
   mountedCells: 0,
   liveComponents: 0,
diff --git a/examples/vue/realtime-trading/src/shell/TradingShell.tsx b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
index 4297c5244b..ed28768958 100644
--- a/examples/vue/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
@@ -296,8 +296,8 @@ const Configurator = defineComponent({
             </select>
             <small>
               {virtualScrollForced.value
-                ? 'TanStack Virtual is required and locked at 250 or more rows.'
-                : 'Full DOM mounts every row; TanStack Virtual mounts the visible window.'}
+                ? 'TanStack Virtual is required and locked at 1,500 or more rows.'
+                : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}
             </small>
           </label>
           <label class="toggle-field">
diff --git a/examples/vue/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/vue/realtime-trading/src/table/trading-row-virtualizer.ts
index d733342a00..bc4b34b528 100644
--- a/examples/vue/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/vue/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -1,14 +1,18 @@
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
-export const FORCED_VIRTUALIZATION_ROW_COUNT = 250
+export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
+export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 
 export type VirtualScrollMode = 'tanstack' | 'none'
+export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
 export function resolveVirtualScrollMode(
-  requestedMode: VirtualScrollMode,
+  requestedMode: VirtualScrollPreference,
   instrumentCount: number,
 ): VirtualScrollMode {
-  return instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  if (instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) return 'tanstack'
+  if (requestedMode !== 'auto') return requestedMode
+  return instrumentCount >= DEFAULT_VIRTUALIZATION_ROW_COUNT
     ? 'tanstack'
-    : requestedMode
+    : 'none'
 }
diff --git a/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts b/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
index 3362a2eadc..51f19e03cd 100644
--- a/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
@@ -35,6 +35,15 @@ test('runs the Vue realtime trading workload', async ({ page }) => {
       'auto',
     )
     await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
+    await instrumentCount.selectOption('250')
+    await expect(virtualScrollSelect).toHaveValue('tanstack')
+    await expect(virtualScrollSelect).toBeEnabled()
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
+    await instrumentCount.selectOption('100')
+    await expect(virtualScrollSelect).toHaveValue('none')
+    await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(page.getByTestId('virtual-scroll-footer')).toHaveCount(0)
     await virtualScrollSelect.selectOption('tanstack')
     await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(100)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
@@ -44,12 +53,12 @@ test('runs the Vue realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     await virtualScrollSelect.selectOption('none')
     await expect(table.locator('tbody tr')).toHaveCount(100)
-    await instrumentCount.selectOption('250')
+    await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(250)
+    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
-      'Total · 250 rows · 14 columns',
+      'Total · 1500 rows · 14 columns',
     )
     await expect(page.getByTestId('visible-row-range')).toHaveText(
       /^\s*Current · rows 0\.\.\d+\s*$/,

From 46b5f30a4c55d1403ffd32148f84eb8cd71b3436 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Tue, 18 Aug 2026 13:00:55 +0200
Subject: [PATCH 10/23] update README.md

---
 examples/alpine/realtime-trading/README.md  | 129 ++++++++-
 examples/angular/realtime-trading/README.md | 277 ++++++++++++++------
 examples/ember/realtime-trading/README.md   | 135 +++++++++-
 examples/lit/realtime-trading/README.md     | 123 ++++++++-
 examples/octane/realtime-trading/README.md  | 145 +++++++++-
 examples/preact/realtime-trading/README.md  | 153 +++++++++--
 examples/react/realtime-trading/README.md   | 239 +++++++++++++----
 examples/solid/realtime-trading/README.md   | 171 ++++++++----
 examples/svelte/realtime-trading/README.md  | 127 ++++++++-
 examples/vue/realtime-trading/README.md     | 141 ++++++++--
 10 files changed, 1378 insertions(+), 262 deletions(-)

diff --git a/examples/alpine/realtime-trading/README.md b/examples/alpine/realtime-trading/README.md
index 07aeab1acd..e97d51f053 100644
--- a/examples/alpine/realtime-trading/README.md
+++ b/examples/alpine/realtime-trading/README.md
@@ -1,13 +1,134 @@
 # Alpine realtime trading benchmark
 
-Standalone Alpine implementation of the common realtime-trading workload. The
-feed, worker, instruments, benchmark monitor, shell state, table configuration,
-custom quote elements, delegated grid interactions, and Virtual Core instance
-all live in this example folder.
+This standalone example exercises the current TanStack Alpine Table adapter
+with a high-frequency worker feed, immutable snapshots, interactive columns,
+custom quote elements, Virtual Core, and browser diagnostics. It is a
+repeatable UI stress workload, not an exchange or network benchmark.
+
+## Run and verify
 
 ```bash
 pnpm --dir examples/alpine/realtime-trading dev
+```
+
+Open `http://localhost:7784`.
+
+```bash
 pnpm --dir examples/alpine/realtime-trading test:types
 pnpm --dir examples/alpine/realtime-trading lint
 pnpm --dir examples/alpine/realtime-trading build
+pnpm --dir examples/alpine/realtime-trading test:e2e
 ```
+
+Use a production build for performance recordings.
+
+## Structure and ownership
+
+| Path | Responsibility |
+| --- | --- |
+| `src/feed/` | Market model, instrument universe, feed config, immutable update helpers, and Store-backed feed controller. |
+| `src/feed/worker/` | Typed protocol, deterministic engine, and module worker. |
+| `src/benchmark/` | Browser monitor and benchmark controller. |
+| `src/shell/configurator-options.ts` | Declarative select/range options used by the sidebar. |
+| `src/table/table-config/` | Grouped columns and custom quote elements. |
+| `src/table/` | Shared interaction helpers and virtualization constants. |
+| `src/main.ts` | Alpine component factory and the imperative bridges to Store, Table, Virtual Core, observers, and DOM layout. |
+| `index.html` | Declarative full-viewport shell, table template, controls, diagnostics, and status bar. |
+
+Alpine keeps the markup declarative in `index.html`; `tradingApp` owns only the
+runtime coordination that cannot live in HTML. Feed and benchmark remain
+separate controllers. Their Store values are copied into one Alpine reactive
+view object by subscriptions, while selected symbol and renderer mode stay in
+dedicated atoms. Every subscription, observer, virtualizer mount, controller,
+and worker has an explicit cleanup registered by `init()`/`destroy()`.
+
+## Feed and worker pipeline
+
+Defaults are 100 instruments, 10K generated samples/s, 20 ms delivery, enabled
+intraday charts, and 16 ms chart sampling.
+
+Mutable quotes stay in the worker. A deterministic 16 ms budget loop generates
+samples, a row-indexed `Map` coalesces repeated instrument changes, and a
+separate timer publishes the latest unique rows. The main thread creates a new
+outer array and only new changed rows. Unchanged rows and unsampled history
+arrays retain identity. Session IDs reject late messages after resets or row
+count changes.
+
+- **Synthetic quote workload** is generated worker samples/s, not Alpine DOM
+  updates or worker messages.
+- **Worker delivery interval** controls coalesced message cadence; 20 ms targets
+  about 50 messages/s.
+- **Row updates** counts unique immutable row objects applied.
+- **Message samples** is the generated work represented by the latest batch.
+
+The 25K burst intentionally creates and flushes one expensive message.
+Worker delivery resembles an upstream stream but does not include a network.
+
+## Alpine table architecture
+
+The table has 14 leaf columns grouped into Instrument, Price & Change, Order
+Book, Session, and Chart. It supports sorting/filtering, on-change resizing,
+double-click reset, drag column ordering, CSS hover, row selection, drag cell
+ranges, keyboard navigation, and Price/Move/Percent/Sparkline custom elements.
+
+Stable instrument IDs back `getRowId`. The local `rows()` function caches the
+row model by feed-array identity and table-state version so repeated Alpine
+template reads do not call `getRowModel()` again during the same state. One
+`TradingGridPointerController` handles all body input using `composedPath()` and
+data attributes instead of per-cell listeners.
+
+Column widths are CSS custom properties updated only by sizing/order
+subscriptions. `ResizeObserver` performs initial fit and stops after manual
+resize. Component A/B swapping is an explicit lifecycle stress mode; stable
+rendering is the realistic default.
+
+## Virtualization
+
+- Below 200 rows, automatic mode chooses Full DOM, but Virtual remains
+  selectable.
+- From 200 through 1,499 rows, automatic mode chooses TanStack Virtual and Full
+  DOM remains selectable.
+- At 1,500 rows or more, Virtual is forced and the control is locked.
+
+`main.ts` owns one `@tanstack/virtual-core` instance, updates its count/options,
+and increments a narrow Alpine virtual version when its range changes. It uses
+32 px estimates, 10-row overscan, row IDs as keys, transformed rows, and a body
+spacer. The footer reads the instance range. Both modes apply
+`content-visibility: auto`; Full DOM still creates all rows/cells.
+
+## Performance decisions
+
+- worker generation and coalescing before main-thread delivery;
+- structural sharing for unchanged rows and histories;
+- cached row-model reads keyed by actual dependencies;
+- stable table/virtual row IDs;
+- dedicated reactive versions for table and virtualizer changes;
+- one delegated grid interaction controller and CSS hover;
+- CSS variables for column sizes;
+- configurable chart cadence and opt-in component churn;
+- virtual mounting for large row sets;
+- explicit lifecycle cleanup and low-frequency metrics publication.
+
+The immutable outer array changes by design. Stable inner references reduce
+cell work, but sorting/filtering can still require a fresh row-model pass.
+
+## Diagnostics and interpretation
+
+The monitor reports generated samples, messages, unique row updates, state
+applies, table commits, average mutation-to-render latency, long animation
+frames, mounted cells, custom component lifecycle/execution, callbacks per
+column, DOM mutation records, core row-model timing, and optional heap data.
+
+Callback counts do not imply DOM changes. Temporary heap growth is not proof of
+a leak; verify post-GC retained objects. Compare identical production settings
+and use Chrome Performance together with the in-app counters.
+
+## Standalone policy
+
+This folder intentionally contains its own instruments, feed, worker,
+benchmark, shell markup, styles, and table code. It can run independently or be
+copied to StackBlitz, so common source and README sections are duplicated across
+adapters by design.
+
+The workspace resolves the pinned `@tanstack/alpine-table` dependency to the
+local adapter package while keeping the manifest release-like.
diff --git a/examples/angular/realtime-trading/README.md b/examples/angular/realtime-trading/README.md
index 3ca3e94954..d72b32aa91 100644
--- a/examples/angular/realtime-trading/README.md
+++ b/examples/angular/realtime-trading/README.md
@@ -1,10 +1,16 @@
 # Angular realtime trading benchmark
 
-This example stresses the current Angular Table adapter with a synthetic market
-feed, immutable quote snapshots, dynamic cell components, row-model workloads,
-and optional row virtualization.
+This is a standalone stress example for the current TanStack Angular Table
+adapter. It combines a high-frequency synthetic market feed, immutable row
+snapshots, sortable and resizable columns, range selection, dynamic Angular
+cell components, optional row virtualization, and browser performance
+instrumentation.
 
-## Run
+The goal is not to reproduce an exchange. It is to provide a repeatable grid
+workload in which feed generation, message delivery, state application, table
+work, Angular rendering, and browser layout can be measured separately.
+
+## Run and verify
 
 ```bash
 pnpm --dir examples/angular/realtime-trading dev
@@ -12,79 +18,204 @@ pnpm --dir examples/angular/realtime-trading dev
 
 Open `http://localhost:7777`.
 
-Use a production build for performance recordings:
+Use a production build before recording representative timings:
 
 ```bash
 pnpm --dir examples/angular/realtime-trading build
-```
-
-## Architecture
-
-- `TradingBenchmarkController` owns feed state, benchmark controls, derived
-  quote snapshots, and diagnostics.
-- `market-feed.worker.ts` produces synthetic quote samples outside the main
-  thread. Multiple samples for the same instrument are coalesced into one row
-  update per published message.
-- `CurrentTradingTable` renders the current Angular Table implementation.
-- `WorkerTradingTable` uses the same columns and template while moving the
-  filtered row-model stage to the experimental table worker plugin.
-- `trading-row-virtualizer.ts` integrates TanStack Virtual and reports the
-  visible and mounted row ranges.
-- Components under `shell/` own the surrounding terminal UI and inject the
-  controller directly.
-
-The application root only selects between the normal and worker-backed current
-table. There are no historical adapter implementations in this benchmark.
-
-The Angular 22 application is zoneless by default. Components use signal
-inputs, outputs, queries and derived state; resource cleanup is registered with
-`DestroyRef`, and no `ngOnInit`, `ngOnDestroy`, `@HostBinding`, or
-`@HostListener` hooks are used.
-
-## Row rendering
-
-The example starts with 100 instruments. The row count and the row-rendering
-control select the rendering path:
-
-- Below 250 instruments, **TanStack Virtual** can be enabled or disabled to
-  compare it with **Full DOM**.
-- At 250 instruments or more, **TanStack Virtual** is enabled and locked. It
-  mounts a keyed overscan window and positions rows with a transform.
-- Both paths apply `content-visibility: auto` and a fixed intrinsic row height;
-  the Full DOM path can therefore skip offscreen browser rendering without
-  avoiding framework work or DOM creation.
-
-Angular CDK scrolling is intentionally not part of this example.
-
-## Feed rate
-
-The configured sample rate controls synthetic quote generation inside the
-worker. It is not a browser event or `postMessage` rate. The publish interval
-separately controls the target message cadence. The worker coalesces repeated
-instruments in each message and posts independently of render completion, like
-an external stream. Random seeds stay private to the feed engine.
-
-## Workloads
-
-- The market-data universe preserves row order and IDs.
-- **Swap Tick component A ↔ B** exercises component destruction and creation.
-- Sparkline and quote-age toggles control high-frequency component input
-  invalidation.
-- Intraday history is sampled independently per instrument in the worker. Its
-  sampling interval is configurable from 16 ms to 2,000 ms and defaults to
-  16 ms for the initial 100-row workload.
-
-## Dependency resolution
-
-The example pins `@tanstack/angular-table` to the current repository version.
-The root workspace override resolves that dependency to `packages/angular-table`
-while preserving a release-like manifest.
-
-## Verification
-
-```bash
 pnpm --dir examples/angular/realtime-trading test:types
 pnpm --dir examples/angular/realtime-trading lint
-pnpm --dir examples/angular/realtime-trading build
 pnpm --dir examples/angular/realtime-trading test:e2e
 ```
+
+Development mode includes Angular assertions and extra benchmark bookkeeping,
+so its absolute timings should not be compared with a production build.
+
+## Directory structure
+
+| Path | Responsibility |
+| --- | --- |
+| `src/app/feed/` | Market types, the instrument universe, feed configuration, immutable update helpers, and the Angular feed service. |
+| `src/app/feed/worker/` | Worker protocol, deterministic market engine, and the module Web Worker that generates and publishes quote updates. |
+| `src/app/benchmark/` | Performance monitor and the controller that connects feed lifecycle events to UI diagnostics. |
+| `src/app/shell/` | Full-viewport layout, header, metrics strip, sidebar configurator, selected-instrument panel, diagnostics, and status bar. |
+| `src/app/table/table-config/` | Grouped column definitions and custom quote cell components. |
+| `src/app/table/view/` | Header component plus table-level selection and cell host directives. |
+| `src/app/table/` | Current table, table interactions, initial column fitting, and the TanStack Virtual integration. |
+| `src/app/table/worker/` | Optional experimental table-worker implementation and its row-model worker. |
+| `src/app/app.ts` | Composition root; it projects only the selected table implementation into the shell. |
+
+The feed, benchmark, shell, and table layers are deliberately separate. The
+feed can run without the benchmark monitor, and shell components inject only
+the controller or service whose state they display.
+
+## Data and worker pipeline
+
+The initial configuration is 100 instruments, 10K generated samples per
+second, a 20 ms delivery interval, enabled intraday charts, and 16 ms intraday
+sampling.
+
+1. `MarketFeedService` creates a module worker and sends the current
+   configuration.
+2. `market-feed-engine.ts` owns mutable quote state inside the worker. A
+   deterministic PRNG and stable instrument IDs keep runs reproducible.
+3. A 16 ms generation loop accrues a fractional sample budget and applies the
+   requested synthetic workload to the worker-owned quotes.
+4. Updated instruments are stored in a `Map` by row index. Repeated updates to
+   one instrument are coalesced, retaining its latest value.
+5. A separate publication timer posts one message at the configured delivery
+   interval. Generation rate and message rate are therefore independent.
+6. The main thread creates a new outer quotes array and replaces only the row
+   objects included in the message. Unchanged rows retain their references.
+7. A session ID rejects messages from an obsolete worker configuration after a
+   reset or instrument-count change.
+
+The terms in the UI are intentionally distinct:
+
+- **Synthetic quote workload** is generated samples per second inside the
+  worker. It is not DOM events, table renders, or `postMessage` calls.
+- **Worker delivery interval** is the target cadence for coalesced messages.
+  For example, 20 ms targets roughly 50 messages per second.
+- **Row updates** is the number of unique immutable row objects applied on the
+  main thread. It can be lower than generated samples because of coalescing.
+- **Message samples** is the number of generated samples represented by the
+  latest delivered batch.
+
+Intraday history is sampled independently of quote generation. Its interval
+controls how frequently a row receives a new history array; other quote fields
+can continue changing between history samples. The 25K burst command generates
+and flushes one intentionally expensive batch immediately.
+
+The worker is analogous to an upstream WebSocket/SSE producer, but it is not a
+network benchmark: serialization, browser worker messaging, main-thread state
+application, and rendering are in scope; network latency is not.
+
+## Angular state and rendering architecture
+
+- `MarketFeedService` owns feed signals and worker lifecycle.
+- `TradingBenchmarkController` owns benchmark-only state, selected symbol,
+  renderer mode, virtualization preference, and derived metrics.
+- The application is zoneless and uses signal inputs, outputs, queries,
+  `computed`, `effect`, `DestroyRef`, and `OnPush` components.
+- The root component does not subscribe to individual diagnostics. It only
+  chooses the normal or experimental worker-backed table and supplies the same
+  signal values to it.
+- Custom cells are declared with `flexRenderComponent` only where an Angular
+  component is required. Plain columns remain plain render callbacks.
+- Stable row IDs come from the instrument ID, so sorting and updates do not
+  make row identity depend on the current array position.
+
+The optional **table worker** is separate from the market-feed worker. The feed
+worker always produces market data; the table worker moves the supported
+row-model work off the main thread. Both table paths intentionally have their
+own column configuration boundary so component render tokens stay explicit.
+
+## Table behavior
+
+The grid has 14 leaf columns grouped into Instrument, Price & Change, Order
+Book, Session, and Chart sections. It supports:
+
+- core sorting and filtering;
+- on-change column resizing, including double-click reset;
+- drag-and-drop leaf-column ordering with a visible drop target;
+- CSS-only row hover;
+- click/modified-click row selection;
+- mouse-drag cell range selection and keyboard navigation;
+- custom Price, Move, Percent Change, and Sparkline components;
+- a stress mode that swaps the move component type when direction changes,
+  intentionally exercising destruction and recreation.
+
+Selection events are delegated once at the table boundary by
+`TradingGridSelectionDirective`. It resolves a cell from `event.composedPath()`
+and data attributes, avoiding a `mousedown`/move listener per cell. The cell
+directive uses signal inputs and host properties for width, focus, ARIA, and
+selection-edge attributes; it does not toggle CSS classes imperatively.
+
+Column sizes are written to table-level CSS custom properties. Cells reference
+those variables rather than recomputing an inline pixel width during every
+quote update. A `ResizeObserver` expands the initial column sizes to available
+width; manual resizing disables subsequent automatic fitting.
+
+## Full DOM and virtual rows
+
+The internal preference is `auto`, `tanstack`, or `none`:
+
+- Below 200 rows, `auto` resolves to **Full DOM**, but virtualization remains
+  manually selectable.
+- From 200 through 1,499 rows, `auto` resolves to **TanStack Virtual**, and the
+  user may still switch back to Full DOM.
+- At 1,500 rows or more, virtualization is forced and the control is locked to
+  prevent an accidental full-table mount.
+
+TanStack Virtual uses a fixed 32 px estimate, 10-row overscan, instrument row
+IDs as item keys, cached measurements, and transformed rows inside a body-sized
+spacer. Only the visible overscan window creates Angular row views. The footer
+reads the virtualizer range and reports the current row interval.
+
+The Angular virtualizer disables application-wide ticks and schedules a local
+`detectChanges()` flush for virtualizer changes. This confines scroll-driven
+updates to the table instead of checking the complete application shell.
+
+Both Full DOM and virtual rows use `content-visibility: auto` with a matching
+intrinsic block size. In Full DOM this may save browser style/layout/paint work,
+but Angular still creates every row and cell. In virtual mode it is an
+additional browser hint; virtualization remains the mechanism that limits
+mounted views.
+
+## Performance decisions
+
+- Market calculations execute off the main thread.
+- Repeated worker samples are coalesced before crossing the worker boundary.
+- Immutable snapshots preserve unchanged row and history references.
+- Stable row IDs and keyed `@for` blocks preserve row identity.
+- High-frequency selection input is delegated at the table, not bound per
+  cell.
+- Column widths use CSS variables and update only on sizing/order changes.
+- Shell widgets read narrow signal state and do not make the root consume the
+  complete feed.
+- Dynamic component churn is opt-in; the stable renderer is the realistic
+  baseline.
+- Virtualization limits framework and DOM work for larger data sets.
+- Benchmark metrics publish at a lower cadence than the data feed.
+
+`content-visibility`, worker generation, and virtualization solve different
+problems. None of them prevents the table core from rebuilding a sorted or
+filtered row model when its data/state inputs require it.
+
+## Diagnostics
+
+The benchmark layer observes the feed through callbacks, so it can be removed
+without changing feed semantics. It reports:
+
+- generated worker samples, unique row updates, received messages, and state
+  applies;
+- completed table renders and average mutation-to-render latency;
+- long animation frames and worst duration when the browser supports the Long
+  Animation Frames API;
+- mounted cell hosts and live/created/destroyed dynamic components;
+- cell-render callbacks by column and component executions by type;
+- DOM mutation records from a `MutationObserver`;
+- core row-model call rate and average/maximum duration;
+- heap information where the browser exposes it.
+
+Renderer callback counts are not DOM mutation counts. A callback can execute
+and still reuse a component/view, while a component execution count records the
+framework component path itself. Heap growth during the swap stress mode is not
+automatically a leak: garbage collection is nondeterministic, so retained
+objects must be confirmed with repeated heap snapshots after GC and a stable
+workload.
+
+Use Chrome Performance/Angular DevTools for call stacks and frame analysis, and
+the in-app diagnostics for controlled comparisons. Keep row count, workload,
+delivery interval, renderer mode, and virtual mode identical between runs.
+
+## Standalone example policy
+
+This folder intentionally contains its own instruments, feed engine, worker,
+benchmark monitor, styles, and UI instead of importing a shared demo package.
+That duplication lets the example run independently and be copied to
+StackBlitz. Shared concepts and some README text are therefore repeated across
+adapter examples by design.
+
+The package pins `@tanstack/angular-table` to the repository version. The root
+workspace override resolves it to `packages/angular-table` while retaining a
+release-like example manifest.
diff --git a/examples/ember/realtime-trading/README.md b/examples/ember/realtime-trading/README.md
index 5437511fd5..a7a6082eb9 100644
--- a/examples/ember/realtime-trading/README.md
+++ b/examples/ember/realtime-trading/README.md
@@ -1,11 +1,132 @@
-# Ember realtime trading
+# Ember realtime trading benchmark
 
-Standalone realtime market-grid benchmark for the TanStack Ember Table adapter.
-It mirrors the same feed, controls, table features, diagnostics, and row
-rendering modes used by the other framework examples.
+This standalone example exercises the current TanStack Ember Table adapter
+with a high-frequency worker feed, immutable snapshots, interactive columns,
+Glimmer quote components, Virtual Core, and browser diagnostics. It is a
+repeatable rendering stress workload, not an exchange or network benchmark.
+
+## Run and verify
+
+```bash
+pnpm --dir examples/ember/realtime-trading dev
+```
+
+Open `http://localhost:7785`.
 
 ```bash
-pnpm dev
-pnpm test:types
-pnpm build
+pnpm --dir examples/ember/realtime-trading test:types
+pnpm --dir examples/ember/realtime-trading build
+pnpm --dir examples/ember/realtime-trading test:e2e
 ```
+
+This example currently has no separate `lint` package script. Use a production
+build for performance recordings.
+
+## Structure and ownership
+
+| Path | Responsibility |
+| --- | --- |
+| `app/feed/` | Market model, instrument universe, configuration, immutable update helpers, and Store-backed feed controller. |
+| `app/feed/worker/` | Typed protocol, deterministic engine, and module worker. |
+| `app/benchmark/` | Browser monitor and benchmark controller. |
+| `app/components/shell/` | GTS header, metrics, configurator, diagnostics, selected instrument, status bar, and shell layout. |
+| `app/components/table/` | Trading table Glimmer component. |
+| `app/table/table-config/` | Grouped columns and custom GTS quote components. |
+| `app/table/` | Table construction, features, delegated interactions, and Virtual Core integration. |
+| `app/utils/subscriptions.ts` | Owner-bound Store subscription and cleanup helpers. |
+| `app/templates/application.gts` | Creates feed/benchmark controllers and composes the shell. |
+
+`MarketFeedController` owns worker/feed state. `TradingBenchmarkController`
+observes feed lifecycle callbacks and owns diagnostic/view state. The
+application passes stable controllers to shell/table components; owner-bound
+subscription helpers bridge selected TanStack Store values into Glimmer and
+register destruction automatically. The root does not proxy every quote or
+metric as application state.
+
+## Feed and worker pipeline
+
+Defaults are 100 instruments, 10K generated samples/s, 20 ms delivery, enabled
+intraday charts, and 16 ms chart sampling.
+
+Mutable quote state is private to the worker. A deterministic 16 ms budget loop
+generates samples, a row-indexed `Map` coalesces repeated changes, and a separate
+timer publishes the latest unique rows. The main thread creates a new outer
+array and replaces only changed rows; untouched rows and unsampled history
+arrays retain references. Session IDs reject stale messages after resets or
+instrument-count changes.
+
+- **Synthetic quote workload** is worker-generated samples/s, not Glimmer
+  renders, events, or messages.
+- **Worker delivery interval** controls coalesced message cadence; 20 ms targets
+  around 50 messages/s.
+- **Row updates** is the number of unique immutable rows applied.
+- **Message samples** is the generated work represented by the latest message.
+
+Intraday history uses its own cadence. The 25K burst deliberately publishes one
+heavy batch. The worker resembles an upstream stream, without network latency.
+
+## Ember table architecture
+
+The grid has 14 leaf columns grouped into Instrument, Price & Change, Order
+Book, Session, and Chart. It includes sorting/filtering, on-change resizing,
+double-click reset, drag ordering, CSS hover, row selection, drag cell ranges,
+keyboard navigation, and Price/Move/Percent/Sparkline Glimmer components.
+
+`flexRenderComponent` is used for actual component cells. Stable instrument IDs
+back row identity. One table/body interaction path resolves cells through
+`event.composedPath()` and data attributes instead of allocating handlers on
+every cell. Column widths are CSS variables updated on sizing/order; a
+`ResizeObserver` performs initial fitting until manual resize. A/B move
+component swapping is an explicit lifecycle stress mode.
+
+## Virtualization
+
+- Below 200 rows, automatic mode uses Full DOM, while Virtual is selectable.
+- From 200 through 1,499 rows, automatic mode uses TanStack Virtual and Full DOM
+  remains selectable.
+- At 1,500 rows or more, Virtual is forced and its control is disabled.
+
+The local Virtual Core integration owns one instance with 32 px estimates,
+10-row overscan, stable row IDs, transformed rows, and a spacer body. Instance
+notifications invalidate only the table range, and the footer reads that range.
+Both Full DOM and virtual rows use `content-visibility: auto`; Full DOM still
+creates every Glimmer row/cell.
+
+## Performance decisions
+
+- worker-side generation and pre-message coalescing;
+- immutable structural sharing for rows/history;
+- owner-bound, slice-oriented Store subscriptions;
+- stable table and virtual row identity;
+- componentized GTS shell/table/cell boundaries;
+- delegated pointer input and CSS hover;
+- CSS variables for width propagation;
+- opt-in lifecycle churn and independently sampled charts;
+- virtual mounting for larger row counts;
+- explicit destructor cleanup and lower-frequency metric publication.
+
+The outer array intentionally changes for an immutable batch. Structural
+sharing reduces cell work, but sorting/filtering can still trigger row-model
+processing when data changes.
+
+## Diagnostics and interpretation
+
+The benchmark records worker samples, messages, unique row updates, state
+applies, completed renders, average mutation-to-render latency, long animation
+frames, mounted hosts, component lifecycle/execution, callbacks by column, DOM
+mutation records, row-model timing, and optional heap information.
+
+Renderer callbacks and DOM mutations are different measurements. Temporary
+heap growth during component swapping is not a leak without post-GC retention.
+Compare identical production runs and use Chrome Performance with the in-app
+diagnostics.
+
+## Standalone policy
+
+All instruments, feed, worker, benchmark, shell, styles, and table code are
+copied into this directory intentionally. It remains independently runnable and
+StackBlitz-friendly, so common implementation and README material is repeated
+across adapters by design.
+
+The workspace resolves `@tanstack/ember-table` to the repository adapter while
+the example package remains release-like.
diff --git a/examples/lit/realtime-trading/README.md b/examples/lit/realtime-trading/README.md
index cca4ed2307..02490da948 100644
--- a/examples/lit/realtime-trading/README.md
+++ b/examples/lit/realtime-trading/README.md
@@ -1,15 +1,128 @@
 # Lit realtime trading benchmark
 
-Standalone Lit implementation of the shared realtime-trading workload. It owns
-its market feed, worker, instruments, benchmark monitor, shell, table config,
-custom quote elements, delegated grid interactions, and Lit Virtual setup.
+This standalone example exercises the current TanStack Lit Table adapter with
+a high-frequency worker feed, immutable snapshots, interactive columns, custom
+elements for quote cells, Lit Virtual, and browser diagnostics. It is a
+repeatable rendering workload, not an exchange or network benchmark.
 
-It starts with 100 instruments. Full DOM and TanStack Virtual are selectable
-below 250 instruments; virtualization is enabled and locked at 250 or more.
+## Run and verify
 
 ```bash
 pnpm --dir examples/lit/realtime-trading dev
+```
+
+Open `http://localhost:7783`.
+
+```bash
 pnpm --dir examples/lit/realtime-trading test:types
 pnpm --dir examples/lit/realtime-trading lint
 pnpm --dir examples/lit/realtime-trading build
+pnpm --dir examples/lit/realtime-trading test:e2e
 ```
+
+Use the production build for measurements.
+
+## Structure and ownership
+
+| Path | Responsibility |
+| --- | --- |
+| `src/feed/` | Market types, instruments, configuration, immutable updates, and Store-backed feed controller. |
+| `src/feed/worker/` | Protocol, deterministic engine, and module worker. |
+| `src/benchmark/` | Browser monitor, benchmark controller, table timing, and row-model diagnostics. |
+| `src/shell/` | Custom elements for header, metrics, controls, diagnostics, selected instrument, status, and layout. |
+| `src/shell/controller-element.ts` | Base element that subscribes to controller sources and releases subscriptions on disconnect. |
+| `src/table/table-config/` | Grouped columns and custom quote cell elements. |
+| `src/table/` | Lit Table element, delegated interactions, column layout, and Lit Virtual integration. |
+| `src/main.ts` | Root custom element that creates, starts, stops, and passes the controllers. |
+
+The feed controller is independent from the benchmark controller. The root
+passes stable controller objects; each shell/table custom element observes the
+specific Store/atom sources it consumes. `ControllerElement` converts those
+notifications into `requestUpdate()` and guarantees unsubscribe on disconnect,
+avoiding one broad application-level subscription.
+
+## Feed and worker pipeline
+
+Defaults are 100 instruments, 10K generated samples/s, 20 ms delivery, enabled
+intraday charts, and 16 ms chart sampling.
+
+Mutable market state stays inside the worker. A deterministic 16 ms budget loop
+generates samples, a row-indexed `Map` coalesces repeated instrument changes,
+and an independent timer publishes the latest unique rows. The main thread
+creates a new outer array and only new changed rows; untouched rows and
+unsampled histories retain identity. Session IDs reject obsolete batches after
+reset or instrument-count changes.
+
+- **Synthetic quote workload** is worker-generated samples/s, not custom-element
+  updates or messages.
+- **Worker delivery interval** controls coalesced `postMessage` cadence; 20 ms
+  targets about 50 messages/s.
+- **Row updates** is the count of unique immutable rows applied.
+- **Message samples** is generated work represented by the latest batch.
+
+Intraday sampling is independent. The 25K burst deliberately publishes one
+heavy batch. Worker messaging resembles an upstream stream without including
+network latency.
+
+## Lit table architecture
+
+The 14 leaf columns are grouped into Instrument, Price & Change, Order Book,
+Session, and Chart. The grid supports sorting/filtering, on-change resizing,
+double-click reset, drag column ordering, CSS hover, row selection, drag cell
+ranges, keyboard navigation, and Price/Move/Percent/Sparkline custom elements.
+
+Stable instrument IDs define row identity. One body-level interaction
+controller resolves cells from `event.composedPath()` and data attributes,
+avoiding handlers on every cell. Column widths are CSS variables written only
+when sizing/order changes; a `ResizeObserver` performs initial fitting until a
+manual resize. The A/B move option is intentionally a custom-element lifecycle
+stress path.
+
+## Virtualization
+
+- Below 200 rows, automatic mode uses Full DOM, with Virtual still selectable.
+- From 200 through 1,499 rows, automatic mode uses TanStack Virtual, with Full
+  DOM still selectable.
+- At 1,500 rows or more, Virtual is forced and its control is disabled.
+
+Lit Virtual uses a 32 px estimate, 10-row overscan, stable row IDs, transformed
+rows, and a spacer body. The footer derives the visible interval from the
+virtualizer. Both modes apply `content-visibility: auto`; Full DOM still creates
+all elements even when the browser skips some offscreen layout/paint.
+
+## Performance decisions
+
+- worker-side generation and coalescing;
+- structural sharing for unchanged rows/history arrays;
+- source-specific Store subscriptions in custom elements;
+- stable keyed row/virtual identity;
+- lifecycle-safe controller element subscriptions;
+- delegated pointer input and CSS hover;
+- CSS variables for width propagation;
+- independently configurable chart/component stress;
+- virtual mounting at larger sizes;
+- metrics published below feed frequency.
+
+A new outer array is required by the immutable contract. Stable row references
+help rendering, but sorting/filtering may still recompute the row model when
+data changes.
+
+## Diagnostics and interpretation
+
+The monitor records generated samples, messages, unique row updates, state
+applies, completed renders, average mutation-to-render latency, long animation
+frames, mounted hosts, component lifecycle/execution, callbacks per column, DOM
+mutation records, row-model timing, and optional heap data.
+
+Callback counts and DOM mutations describe different layers. Heap growth during
+component swapping is not a leak without post-GC retention. Compare identical
+production settings and use Chrome Performance with the in-app diagnostics.
+
+## Standalone policy
+
+All instruments, feed, worker, benchmark, shell, styles, and table code live in
+this folder intentionally. It runs independently and can be copied to
+StackBlitz, so shared implementation and README text are duplicated by design.
+
+The workspace resolves the pinned `@tanstack/lit-table` dependency to the local
+adapter package while keeping the manifest release-like.
diff --git a/examples/octane/realtime-trading/README.md b/examples/octane/realtime-trading/README.md
index 5d5d4c7a6c..b0b208c099 100644
--- a/examples/octane/realtime-trading/README.md
+++ b/examples/octane/realtime-trading/README.md
@@ -1,13 +1,140 @@
-# Octane realtime trading
+# Octane realtime trading benchmark
 
-Standalone realtime market-grid benchmark for the TanStack Octane Table adapter.
-It intentionally mirrors the Angular, React, Solid, Vue, Svelte, Preact, Lit,
-and Alpine examples: the same synthetic worker feed, controls, columns,
-selection, sorting/filtering, resizing, column ordering, diagnostics, and
-Full DOM/TanStack Virtual row rendering modes.
+This standalone example exercises the current TanStack Octane Table adapter
+with a high-frequency worker feed, immutable snapshots, interactive columns,
+custom TSRX cells, Virtual Core, and browser diagnostics. It is a repeatable UI
+stress workload rather than an exchange/network simulator.
+
+## Run and verify
+
+```bash
+pnpm --dir examples/octane/realtime-trading dev
+```
+
+Open `http://localhost:7786`.
 
 ```bash
-pnpm dev
-pnpm test:types
-pnpm build
+pnpm --dir examples/octane/realtime-trading test:types
+pnpm --dir examples/octane/realtime-trading lint
+pnpm --dir examples/octane/realtime-trading build
+pnpm --dir examples/octane/realtime-trading test:e2e
 ```
+
+Use a production build for representative measurements.
+
+## Structure and ownership
+
+| Path | Responsibility |
+| --- | --- |
+| `src/feed/` | Market model, instruments, feed config, immutable update helpers, and TanStack Store feed controller. |
+| `src/feed/worker/` | Typed protocol, deterministic engine, and module worker. |
+| `src/benchmark/` | Browser monitor, benchmark controller, table observer, and row-model timing. |
+| `src/shell/` | Separate TSRX header, metrics, configurator, diagnostics, selected-instrument, status, and shell components. |
+| `src/table/table-config/` | Grouped columns and custom TSRX quote components. |
+| `src/table/` | Octane Table view/setup, interactions, pointer hook, column layout, and Virtual Core hook. |
+| `src/use-store-value.ts` | Small Octane hooks that subscribe to a whole store or a compared selector slice. |
+| `src/main.tsrx` | Creates controllers and renders the shell composition root. |
+
+`MarketFeedController` owns feed/worker state. `TradingBenchmarkController`
+observes it and owns diagnostic/view state. The shell receives stable controller
+objects; individual components call `useStoreSelector` or `useStoreValue` for
+the values they need. Selector comparison retains the previous value when its
+slice is unchanged, preventing unrelated controller publications from
+invalidating that component.
+
+## Feed and worker pipeline
+
+Defaults are 100 instruments, 10K generated samples/s, 20 ms delivery, enabled
+intraday charts, and 16 ms chart sampling.
+
+The worker keeps mutable quote state private. A deterministic 16 ms budget loop
+generates samples, and a row-indexed `Map` coalesces repeated updates. A separate
+publication timer posts the latest unique rows. The main thread creates a new
+outer array and replaces only changed row objects; untouched rows and unsampled
+history arrays retain their references. Session IDs discard stale batches after
+reset or instrument-count changes.
+
+- **Synthetic quote workload** means generated worker samples/s, not messages,
+  events, or component renders.
+- **Worker delivery interval** controls coalesced message cadence; 20 ms targets
+  about 50 messages/s.
+- **Row updates** counts unique immutable rows applied on the main thread.
+- **Message samples** is the generated work represented by the latest message.
+
+The 25K burst immediately generates and flushes one deliberately heavy batch.
+The worker approximates an upstream stream but does not measure network delay.
+
+## Octane table architecture
+
+The table has 14 leaf columns grouped into Instrument, Price & Change, Order
+Book, Session, and Chart. Sorting/filtering, on-change resizing, double-click
+reset, drag ordering, CSS row hover, row selection, drag cell ranges, keyboard
+navigation, and custom Price/Move/Percent/Sparkline components are included.
+
+Stable instrument IDs back `getRowId`. Table, row, header, and quote component
+boundaries keep ownership explicit. A local hook delegates pointer handling at
+the body and stores transient drag state without publishing render state. It
+resolves a cell through `event.composedPath()` and data attributes rather than
+installing per-cell listeners.
+
+Column widths are table CSS variables updated only for sizing/order. A
+`ResizeObserver` performs the initial fit and stops auto-fitting after manual
+resize. The move A/B option deliberately changes component type to measure
+creation/destruction; stable mode is the realistic baseline.
+
+## Virtualization
+
+- Below 200 rows, automatic mode resolves to Full DOM, while Virtual is
+  selectable.
+- From 200 through 1,499 rows, automatic mode resolves to TanStack Virtual and
+  Full DOM remains selectable.
+- At 1,500 rows or more, Virtual is forced and the control is locked.
+
+The local `useVirtualizer` bridge owns one `@tanstack/virtual-core` instance.
+It updates options in place, mounts/unmounts through Octane layout effects, and
+increments a local render version on virtualizer changes. Configuration uses a
+32 px estimate, 10-row overscan, row IDs as keys, transformed rows, and a spacer
+body. The footer reads the Virtualizer range.
+
+Both paths use `content-visibility: auto`. This can reduce offscreen browser
+work in Full DOM but does not prevent Octane from creating every row/cell.
+
+## Performance decisions
+
+- worker generation and coalescing before main-thread delivery;
+- immutable structural sharing for rows and chart histories;
+- selector-based subscriptions with explicit equality;
+- stable table and virtual row identity;
+- componentized shell/table/cells with local state ownership;
+- delegated pointer input and CSS hover;
+- CSS variables for column sizes;
+- opt-in component churn and independently sampled charts;
+- virtual mounting for larger data sets;
+- benchmark publication slower than feed updates.
+
+The outer array intentionally changes for immutable publication. Structural
+sharing reduces renderer work, but sorted/filtered row models may still execute
+when the data input changes.
+
+## Diagnostics and interpretation
+
+The monitor records worker samples, messages, unique row updates, state applies,
+completed renders, average mutation-to-render latency, long animation frames,
+mounted cells, component lifecycle/execution, callbacks by column, DOM mutation
+records, row-model timing, and optional heap information.
+
+Octane's completed-render measurement is connected to the feed mutation and
+the table's committed layout lifecycle; it should be compared using the same
+build and settings. Callback execution does not equal DOM mutation, and heap
+growth is not a confirmed leak without post-GC retention. Use Chrome
+Performance alongside the in-app diagnostics.
+
+## Standalone policy
+
+This folder owns copies of its feed, worker, instruments, benchmark, shell,
+styles, and table implementation. That duplication keeps it independently
+runnable and StackBlitz-friendly; shared README explanations are repeated
+across adapters intentionally.
+
+The workspace resolves `@tanstack/octane-table` to the repository adapter while
+the example manifest remains release-like.
diff --git a/examples/preact/realtime-trading/README.md b/examples/preact/realtime-trading/README.md
index 37ff8a725c..e684ae0996 100644
--- a/examples/preact/realtime-trading/README.md
+++ b/examples/preact/realtime-trading/README.md
@@ -1,10 +1,11 @@
 # Preact realtime trading benchmark
 
-This standalone example stresses the current Preact Table adapter with an
-immutable synthetic market feed, core sorting/filtering, dynamic cells,
-virtualized rows, selection, and column resizing/reordering.
+This standalone example exercises the current TanStack Preact Table adapter
+with an immutable high-frequency feed, table interactions, custom components,
+virtual rows, and browser diagnostics. It is a rendering stress lab rather than
+an exchange or network-latency simulation.
 
-## Run
+## Run and verify
 
 ```bash
 pnpm --dir examples/preact/realtime-trading dev
@@ -12,33 +13,129 @@ pnpm --dir examples/preact/realtime-trading dev
 
 Open `http://localhost:7780`.
 
-## Architecture
-
-- `feed/` owns the market controller, immutable quote snapshots, instruments,
-  configuration, and the dedicated feed worker.
-- `benchmark/` owns User Timing, DOM mutation, long-frame, and renderer-call
-  diagnostics.
-- `shell/` owns the full-viewport terminal layout and benchmark controls.
-- `table/` owns the Preact Table instance, table configuration, delegated grid
-  interactions, row rendering, and the local `@tanstack/virtual-core` hook.
-
-All files required by the example are copied into this folder. It does not
-import a shared example package.
-
-The example starts with 100 instruments. Below 250 instruments, row rendering
-can switch between **Full DOM** and **TanStack Virtual**. At 250 instruments or
-more, virtualization is enabled and locked.
-
-The sample-rate control represents synthetic quote generation inside the
-worker, not browser events or worker messages. The publish interval controls
-message cadence independently, and repeated instruments are coalesced into one
-row update per message.
-
-## Verification
-
 ```bash
 pnpm --dir examples/preact/realtime-trading test:types
 pnpm --dir examples/preact/realtime-trading lint
 pnpm --dir examples/preact/realtime-trading build
 pnpm --dir examples/preact/realtime-trading test:e2e
 ```
+
+Use the production build for measurements; development checks inflate the
+absolute cost.
+
+## Structure and ownership
+
+| Path | Responsibility |
+| --- | --- |
+| `src/feed/` | Market types, instruments, immutable update helpers, config, controller, and controller hook. |
+| `src/feed/worker/` | Worker protocol, deterministic market engine, and module worker. |
+| `src/benchmark/` | Feed/render timing, DOM/long-frame observers, row-model and component diagnostics. |
+| `src/shell/` | TanStack Store contexts, viewport shell, metrics, controls, selected instrument, and diagnostics. |
+| `src/table/table-config/` | Grouped columns, row/cell components, and render counters. |
+| `src/table/` | Preact Table instance, subscriptions, interactions, column layout, and Virtual Core hook. |
+| `src/App.tsx` | Creates the controllers and composes providers, shell, and table. |
+
+Feed state and benchmark state are different controllers. The feed does not
+depend on the monitor; the benchmark subscribes to feed lifecycle callbacks.
+TanStack Preact Store contexts pass stable controller objects, while components
+use selectors for the state slices they actually display. Renderer mode and
+selected symbol are separate atoms so their updates do not invalidate unrelated
+shell content.
+
+## Feed and worker pipeline
+
+The initial setup is 100 instruments, 10K generated samples/s, 20 ms worker
+delivery, enabled intraday charts, and 16 ms chart sampling.
+
+The module worker keeps mutable quote state private. A deterministic PRNG and a
+16 ms budget loop generate samples; a `Map` coalesces repeated updates for the
+same row. A separate publication timer sends the latest unique row updates at
+the configured interval. The main thread creates a new outer array and new
+objects only for changed rows, preserving every untouched row reference.
+History arrays are replaced only when their sampling interval elapses. Session
+IDs reject stale messages after reset or row-count changes.
+
+- **Synthetic quote workload** is worker-side generated samples per second. It
+  is not pointer events, renders, or messages.
+- **Worker delivery interval** controls coalesced `postMessage` cadence; 20 ms
+  targets about 50 messages/s.
+- **Row updates** counts unique row snapshots applied on the main thread.
+- **Message samples** shows how much generated work the latest message contains.
+
+The 25K burst deliberately creates and flushes one expensive batch. The worker
+mimics an external streaming producer, but network transport is not measured.
+
+## Table and interaction architecture
+
+The 14 leaf columns are grouped into Instrument, Price & Change, Order Book,
+Session, and Chart. The example supports core sorting/filtering, on-change
+resizing, double-click size reset, drag column ordering, row selection, drag
+cell ranges, keyboard navigation, and custom Price/Move/Percent/Sparkline cells.
+Stable instrument IDs are supplied through `getRowId`.
+
+`table.Subscribe` boundaries isolate table state, resize handles, and row
+selection. `TradingGridPointerController` is allocated once for the body and
+receives delegated mouse/pointer events. It resolves cells from
+`event.composedPath()` and data attributes, eliminating listeners per cell.
+Row hover is CSS-only.
+
+Column widths are table-level CSS custom properties updated only when sizing or
+ordering changes. Initial sizes expand to the viewport through a
+`ResizeObserver`; manual resizing turns off further auto-fit. The optional move
+component A/B mode intentionally destroys/recreates component types and should
+not be treated as the normal baseline.
+
+## Virtualization
+
+The preference is `auto`, `tanstack`, or `none`:
+
+- below 200 rows, `auto` means Full DOM, while Virtual remains selectable;
+- 200–1,499 rows default to TanStack Virtual but can be switched to Full DOM;
+- 1,500 or more rows force Virtual and lock the control.
+
+Because this adapter consumes `@tanstack/virtual-core` directly, the local
+`useVirtualizer` hook owns the Virtualizer instance and synchronizes its change
+notifications with Preact. It uses 32 px rows, 10-row overscan, row IDs as item
+keys, transformed rows, and a spacer body. The footer reads the virtualizer
+range. Both modes use `content-visibility: auto`; that browser hint does not
+avoid mounting every component in Full DOM mode.
+
+## Performance decisions
+
+- worker-side generation and pre-message coalescing;
+- structural sharing for unchanged rows and histories;
+- stable table/virtualizer keys;
+- selector-based Preact Store subscriptions;
+- table/row/resize subscription boundaries;
+- one delegated grid interaction controller;
+- CSS variables for column sizing;
+- opt-in component churn and independently sampled sparklines;
+- virtual mounting for large row counts;
+- benchmark publication slower than the data stream.
+
+The immutable outer array must change when a batch is applied. Stable inner
+references reduce renderer work, but sorting/filtering may still require a core
+row-model pass when data changes.
+
+## Diagnostics and interpretation
+
+Diagnostics cover worker samples, messages, unique row updates, state applies,
+completed renders, average mutation-to-render latency, long animation frames,
+mounted hosts, component creation/destruction, cell callbacks by column,
+component executions by type, DOM mutation records, row-model timing, and heap
+data where supported.
+
+Callback execution does not imply a DOM mutation, and temporary heap growth is
+not by itself a leak. Compare identical production configurations and confirm
+retention with post-GC heap snapshots. Use browser Performance tooling and
+Preact DevTools for call stacks alongside the in-app counters.
+
+## Standalone policy
+
+All feed, worker, instrument, shell, style, and benchmark files are copied into
+this directory intentionally. The example can run alone or be moved to
+StackBlitz without a shared example package, so common implementation and README
+sections are duplicated across adapters by design.
+
+The workspace resolves the pinned `@tanstack/preact-table` dependency to the
+repository package while keeping the example manifest release-like.
diff --git a/examples/react/realtime-trading/README.md b/examples/react/realtime-trading/README.md
index ac14ed687b..dd451131b8 100644
--- a/examples/react/realtime-trading/README.md
+++ b/examples/react/realtime-trading/README.md
@@ -1,10 +1,16 @@
 # React realtime trading benchmark
 
-This example stresses the current React Table adapter with a synthetic market
-feed, immutable quote snapshots, core sorting/filtering, dynamic cells, and
-React Profiler measurements.
+This is a standalone stress example for the current TanStack React Table
+adapter. It combines a high-frequency synthetic market feed, immutable row
+snapshots, sortable and resizable columns, range selection, dynamic React cell
+components, optional row virtualization, React Profiler measurements, and
+browser performance instrumentation.
 
-## Run
+The goal is to make feed work, message delivery, state application, table work,
+React commits, and browser layout independently observable. It is a repeatable
+rendering benchmark, not an exchange or network simulator.
+
+## Run and verify
 
 ```bash
 pnpm --dir examples/react/realtime-trading dev
@@ -12,63 +18,13 @@ pnpm --dir examples/react/realtime-trading dev
 
 Open `http://localhost:7778`.
 
-Use the profiling production build when recording React commit timings:
+For React commit timings, use the profiling production build:
 
 ```bash
 pnpm --dir examples/react/realtime-trading build:profile
 ```
 
-## Architecture
-
-- `TradingBenchmarkController` uses TanStack Store for application state and
-  exposes dedicated atoms for table and cell subscriptions.
-- `market-feed.worker.ts` produces synthetic quote samples outside the main
-  thread and coalesces repeated instruments into one row update per message.
-- `trading-table.tsx` owns the current React Table instance and its subscription
-  boundaries.
-- `trading-table-shared.tsx` owns columns, row rendering, and row-model timing.
-- `benchmark/` owns React Profiler, User Timing, DOM mutation, and long-frame
-  diagnostics.
-- `shell/` owns the trading-terminal layout and benchmark controls.
-
-There is one table implementation. The shell and application root do not
-subscribe to or switch between historical adapters.
-
-## Row rendering
-
-The example starts with 100 instruments. Below 250 instruments, the row-rendering
-select can compare **Full DOM** with **TanStack Virtual**. At 250 instruments or
-more, virtualization is enabled and locked so large row counts cannot
-accidentally mount the complete table.
-
-## React Compiler
-
-The Vite build enables React Compiler. The current adapter is compiled normally;
-the historical compatibility module and its `use no memo` boundary have been
-removed.
-
-## Workloads
-
-- Stable market snapshots with sorting and filtering handled by the table.
-- Core Table sorting and filtering controlled through table atoms.
-- Stable or alternating cell component types.
-- Per-column renderer and per-component render invocation rates.
-- Per-instrument Intraday history sampling with a configurable 16–2,000 ms
-  worker interval, defaulting to 16 ms for the initial 100-row workload.
-
-The sample rate controls synthetic quote generation inside the worker; it is not
-a browser event or `postMessage` rate. The publish interval separately controls
-the target message cadence. The worker coalesces repeated instruments in each
-message and posts independently of React render completion, like an external
-stream.
-
-## Dependency resolution
-
-The example pins `@tanstack/react-table` to the current repository version. The
-root workspace override resolves it to `packages/react-table` while preserving a
-release-like manifest.
-
-## Verification
+The normal verification commands are:
 
 ```bash
 pnpm --dir examples/react/realtime-trading test:types
@@ -76,3 +32,174 @@ pnpm --dir examples/react/realtime-trading lint
 pnpm --dir examples/react/realtime-trading build
 pnpm --dir examples/react/realtime-trading test:e2e
 ```
+
+Development builds include React checks and produce deliberately pessimistic
+timings. The standard production build disables Profiler callbacks; the
+`profile` mode aliases the profiling React DOM client so commit metrics remain
+available.
+
+## Directory structure
+
+| Path | Responsibility |
+| --- | --- |
+| `src/feed/` | Market types, instruments, feed configuration, immutable update helpers, controller, and React lifecycle hook. |
+| `src/feed/worker/` | Worker protocol, deterministic market engine, and the module Web Worker. |
+| `src/benchmark/` | Browser monitor, benchmark controller, table observers, and React Profiler integration. |
+| `src/shell/` | Store contexts, full-viewport shell, metrics, configurator, diagnostics, selected instrument, and status bar. |
+| `src/table/table-config/` | Grouped columns, row boundary, custom cells, and render counters. |
+| `src/table/` | Table instance, subscription boundaries, interactions, pointer hook, initial fit, and virtualization. |
+| `src/App.tsx` | Composition root; creates controllers, providers, shell, table, and Profiler boundary. |
+
+Feed state and benchmark state are intentionally separate. `MarketFeedController`
+can run without `TradingBenchmarkController`; the latter observes feed lifecycle
+events and owns only controls/metrics used by this benchmark UI.
+
+## Data and worker pipeline
+
+The initial configuration is 100 instruments, 10K generated samples per
+second, a 20 ms delivery interval, enabled intraday charts, and 16 ms intraday
+sampling.
+
+1. `MarketFeedController` starts a module worker and sends the active config.
+2. `market-feed-engine.ts` mutates worker-private quote state using a
+   deterministic PRNG and stable instrument IDs.
+3. A 16 ms loop accrues a fractional sample budget and produces the requested
+   amount of synthetic market work.
+4. A `Map` keyed by row index retains the latest pending update for each
+   instrument, coalescing repeated samples.
+5. A separate timer publishes at the selected delivery interval. Worker work
+   rate and `postMessage` rate are deliberately independent.
+6. The main thread creates a new outer quotes array and replaces only the rows
+   present in the message. Unchanged row objects remain referentially stable.
+7. History arrays change only on an intraday sample. A session ID discards stale
+   messages after reset or instrument-count changes.
+
+UI terminology:
+
+- **Synthetic quote workload** means generated samples per second inside the
+  worker, not browser events, React renders, or messages.
+- **Worker delivery interval** is the target coalesced-message cadence; 20 ms
+  targets approximately 50 messages per second.
+- **Row updates** counts unique immutable row objects applied on the main
+  thread, often fewer than generated samples.
+- **Message samples** is the generated work represented by the latest message.
+
+Intraday history sampling is independent of the quote workload, and the 25K
+burst creates one intentionally expensive immediate batch. The worker resembles
+an upstream WebSocket/SSE producer but does not include network latency.
+
+## React state and rendering architecture
+
+- Feed and benchmark controllers use TanStack Store.
+- `createStoreContext` provides the controllers without making every consumer
+  subscribe to the complete state object.
+- Shell components call `useSelector` with narrow slices and shallow comparison
+  where a selector returns an object.
+- Selected symbol and renderer mode are dedicated atoms because they have
+  different consumers and update frequencies from aggregate diagnostics.
+- `TradingTable` subscribes directly to quote data and the virtualization
+  inputs it needs; the parent shell does not receive the quotes array.
+- `table.Subscribe` boundaries isolate sorting/filtering/order changes, each
+  resize handle, and each row's selection state.
+- Stable row IDs come from instrument IDs through `getRowId`.
+
+React Compiler is enabled in the Vite Babel pipeline for `src`. The current
+adapter is compiled normally; there is no historical v8 implementation or
+`use no memo` compatibility boundary in this example. Compiler optimization
+does not replace correct subscription ownership: components still subscribe to
+the smallest practical state slice.
+
+## Table behavior
+
+The grid has 14 leaf columns grouped into Instrument, Price & Change, Order
+Book, Session, and Chart sections. It provides:
+
+- core sorting and filtering;
+- on-change column resizing with double-click reset;
+- drag-and-drop leaf-column ordering;
+- CSS-only row hover;
+- click/modified-click row selection;
+- mouse-drag cell range selection and keyboard navigation;
+- custom Price, Move, Percent Change, and Sparkline components;
+- an opt-in mode that swaps move component A/B as direction changes.
+
+`useTradingGridPointer` installs handlers once on `tbody`. It uses
+`event.composedPath()` and data attributes to resolve the TanStack cell, so the
+table does not allocate pointer handlers for every cell. Refs retain transient
+drag state without triggering React renders.
+
+Column sizes are written to CSS custom properties only when sizing or ordering
+changes. Cells reference those properties, avoiding width-object churn during
+quote updates. A `ResizeObserver` expands the initial column sizes to the
+available viewport; the first manual resize disables later automatic fitting.
+
+## Full DOM and virtual rows
+
+The internal preference is `auto`, `tanstack`, or `none`:
+
+- Below 200 rows, `auto` resolves to **Full DOM**, while virtualization remains
+  manually selectable.
+- From 200 through 1,499 rows, `auto` resolves to **TanStack Virtual**, but the
+  user may still choose Full DOM.
+- At 1,500 rows or more, virtualization is forced and the control is locked.
+
+React Virtual uses a fixed 32 px estimate, 10-row overscan, stable row IDs as
+item keys, transformed rows, and a body-sized spacer. The footer reports the
+current range from the virtualizer. Full DOM maps the complete row model.
+
+Both paths apply `content-visibility: auto` with a matching intrinsic height.
+For Full DOM this can reduce browser work but not React element creation or DOM
+mount count. Virtualization is what limits mounted row components.
+
+## Performance decisions
+
+- Market calculations run outside the main thread.
+- Repeated samples are coalesced before worker messaging.
+- Immutable snapshots preserve untouched row/history references.
+- Stable row keys and `getRowId` preserve identity through sorting.
+- Controller contexts carry stable objects; selectors subscribe to slices.
+- Table, header, resize handle, row selection, and cell renderer boundaries are
+  independently subscribable.
+- Pointer selection is delegated and transient pointer state lives in refs.
+- Column widths use CSS variables instead of per-tick style recalculation.
+- Dynamic component destruction is opt-in; stable components are the baseline.
+- Virtualization limits React and DOM work at larger row counts.
+- Benchmark publication is throttled separately from the feed.
+
+A new outer data array is required to publish immutable state. Referentially
+stable untouched rows, keyed rows, and narrow subscriptions reduce downstream
+work; they do not guarantee that the table's sorted/filtered row model can skip
+all processing when its data input changes.
+
+## Diagnostics
+
+The benchmark monitor reports generated samples, unique row updates, messages,
+state applies, completed commits, average mutation-to-render latency, long
+animation frames, mounted hosts, component lifecycle counts, callbacks by
+column, executions by component type, DOM mutation records, core row-model
+timing, and optional heap information.
+
+The React Profiler additionally records actual/base duration and commit counts
+when using development or the profiling build. User Timing marks connect a feed
+mutation to its completed render; old measures are periodically pruned.
+
+Callback counts are not DOM mutation counts. A cell callback can execute while
+React reuses the existing component and DOM. Likewise, a rising heap during the
+component-swap stress test is not proof of a leak until repeated post-GC heap
+snapshots show retained instances.
+
+Use Chrome Performance and React DevTools for call stacks/flamegraphs, and keep
+the instrument count, workload, delivery interval, renderer mode, build mode,
+and virtualization mode fixed between comparisons.
+
+## Standalone example policy
+
+This directory owns its instrument list, feed engine, worker, diagnostics,
+styles, and UI instead of importing a common demo package. The duplication is
+intentional: each adapter example must run independently and remain easy to
+copy to StackBlitz. Shared architectural explanations are repeated in the
+READMEs for the same reason.
+
+The package pins `@tanstack/react-table` to the repository version. The root
+workspace override resolves it to `packages/react-table` while preserving a
+release-like manifest.
diff --git a/examples/solid/realtime-trading/README.md b/examples/solid/realtime-trading/README.md
index 38d34d2a25..4e051403f6 100644
--- a/examples/solid/realtime-trading/README.md
+++ b/examples/solid/realtime-trading/README.md
@@ -1,10 +1,11 @@
 # Solid realtime trading benchmark
 
-This example stresses the current Solid Table adapter with a synthetic market
-feed, immutable quote snapshots, fine-grained cell updates, dynamic components,
-and browser performance diagnostics.
+This standalone example exercises the current TanStack Solid Table adapter
+with a high-frequency worker feed, immutable snapshots, fine-grained reactive
+cells, table interactions, virtual rows, and browser diagnostics. It is a
+repeatable UI workload, not an exchange or network benchmark.
 
-## Run
+## Run and verify
 
 ```bash
 pnpm --dir examples/solid/realtime-trading dev
@@ -12,58 +13,122 @@ pnpm --dir examples/solid/realtime-trading dev
 
 Open `http://localhost:7779`.
 
-Use a production build for performance recordings:
-
-```bash
-pnpm --dir examples/solid/realtime-trading build
-```
-
-## Architecture
-
-- `createTradingBenchmarkController` owns benchmark metrics and shell actions.
-- `market-feed.worker.ts` produces synthetic quote samples outside the main
-  thread and coalesces repeated instruments into one row update per message.
-- `trading-table.tsx` owns the current Solid Table instance, columns, and cell
-  renderers.
-- `benchmark/` tracks update latency, render calls, DOM mutations, long frames,
-  and heap usage when supported.
-- `shell/` owns the terminal layout and benchmark configurator.
-
-The application renders one table implementation directly. Historical adapter
-switching and compatibility code are not part of the benchmark.
-
-## Row rendering
-
-The example starts with 100 instruments. Below 250 instruments, the row-rendering
-select can compare **Full DOM** with **TanStack Virtual**. At 250 instruments or
-more, virtualization is enabled and locked so large row counts cannot
-accidentally mount the complete table.
-
-## Workloads
-
-- Stable market snapshots with interactive table sorting.
-- Stable or alternating cell component types.
-- Optional sparkline and quote-age invalidation.
-- Per-instrument Intraday history sampling with a configurable 16–2,000 ms
-  worker interval, defaulting to 16 ms for the initial 100-row workload.
-- Discrete worker-side sample workloads and explicit sample bursts.
-
-The sample rate controls synthetic quote generation inside the worker; it is not
-a browser event or `postMessage` rate. The publish interval separately controls
-the target message cadence. The worker coalesces repeated instruments in each
-message and posts independently of Solid updates, like an external stream.
-
-## Dependency resolution
-
-The example pins `@tanstack/solid-table` to the current repository version. The
-root workspace override resolves it to `packages/solid-table` while preserving a
-release-like manifest.
-
-## Verification
-
 ```bash
 pnpm --dir examples/solid/realtime-trading test:types
 pnpm --dir examples/solid/realtime-trading lint
 pnpm --dir examples/solid/realtime-trading build
 pnpm --dir examples/solid/realtime-trading test:e2e
 ```
+
+Record performance against the production build; development checks distort
+absolute timings.
+
+## Structure and ownership
+
+| Path | Responsibility |
+| --- | --- |
+| `src/feed/` | Market model, instrument universe, feed config, immutable update logic, and Solid feed controller. |
+| `src/feed/worker/` | Protocol, deterministic market engine, and module worker. |
+| `src/benchmark/` | Benchmark monitor and the controller that exposes benchmark signals/actions. |
+| `src/shell/` | Contexts, viewport shell, header, metrics, configurator, diagnostics, and selected instrument. |
+| `src/table/table-config/` | Grouped columns and custom quote components. |
+| `src/table/` | Solid Table instance, interactions, column layout, and Solid Virtual integration. |
+| `src/App.tsx` | Creates feed/benchmark controllers and composes their providers with the table. |
+
+`createMarketFeedController` and `createTradingBenchmarkController` are
+separate. The feed owns worker state and quotes; the benchmark observes feed
+events and owns only diagnostic/view state. Solid contexts provide controller
+objects, and consumers read individual accessors rather than one global state
+snapshot.
+
+## Feed and worker pipeline
+
+The initial setup is 100 instruments, 10K generated samples/s, 20 ms delivery,
+enabled intraday charts, and 16 ms chart sampling.
+
+Mutable quotes never leave the worker. A deterministic generator and a 16 ms
+budget loop create samples, while a row-indexed `Map` coalesces repeated changes.
+A separate timer publishes the latest unique updates. On the main thread the
+outer quote array is new, changed rows are new, and untouched rows keep their
+references. History arrays change only at their own sampling cadence. Session
+IDs prevent stale batches from an old configuration from being applied.
+
+- **Synthetic quote workload** is generated worker samples/s, not messages or
+  framework updates.
+- **Worker delivery interval** controls coalesced messages; 20 ms targets about
+  50 messages/s.
+- **Row updates** is the unique immutable rows applied by a message.
+- **Message samples** is the worker work represented by the latest message.
+
+The 25K burst immediately generates and flushes an intentionally heavy batch.
+The worker is a local stand-in for an upstream stream; network latency is not
+part of the test.
+
+## Solid table architecture
+
+The table has 14 leaf columns grouped into Instrument, Price & Change, Order
+Book, Session, and Chart. It supports sorting/filtering, on-change resizing,
+double-click reset, drag ordering, row selection, drag cell ranges, keyboard
+navigation, and component-based Price/Move/Percent/Sparkline cells.
+
+The table reads the feed's quote accessor directly. Stable instrument IDs back
+`getRowId`. Solid's fine-grained accessors and `<For>` keep updates local to the
+expressions/components that consume changed values. The renderer-mode stress
+control can switch the Move component type by direction, intentionally testing
+mount/unmount churn.
+
+One `TradingGridPointerController` handles delegated body events and resolves
+cells from `composedPath()` plus data attributes. No pointer listener is added
+per cell, and hover remains CSS-only. Column dimensions live in CSS variables
+and update only for column sizing/order; a `ResizeObserver` performs the initial
+fit until the user resizes manually.
+
+## Virtualization
+
+- Below 200 rows, automatic mode chooses Full DOM, but Virtual is selectable.
+- From 200 through 1,499 rows, automatic mode chooses TanStack Virtual and the
+  user may still choose Full DOM.
+- At 1,500 rows or more, Virtual is forced and the control is disabled.
+
+`createVirtualizer` uses 32 px row estimates, 10-row overscan, stable row IDs,
+transformed rows, and a spacer body. Its range drives the current-row footer.
+Both rendering paths use `content-visibility: auto`; in Full DOM it can skip
+some browser rendering but does not avoid creating every Solid row/cell.
+
+## Performance decisions
+
+- market work and coalescing happen before crossing to the main thread;
+- immutable snapshots preserve unchanged row/history references;
+- fine-grained signals avoid broad shell invalidation;
+- stable IDs preserve keyed row identity through updates and sorting;
+- delegated grid interaction avoids per-cell handlers;
+- CSS variables isolate width changes from quote updates;
+- dynamic component churn and sparkline frequency are explicit controls;
+- virtualization limits mounted DOM for larger data;
+- metrics publish at a lower cadence than feed updates.
+
+A new outer array is part of the immutable contract. Structural sharing helps
+cell rendering, but table sorting/filtering can still rebuild a row model when
+the data accessor changes.
+
+## Diagnostics and interpretation
+
+The monitor records generated samples, received messages, unique row updates,
+state applies, completed renders, average mutation-to-render latency, long
+animation frames, mounted cells, component lifecycle/execution rates, callbacks
+by column, DOM mutations, core row-model timing, and optional heap information.
+
+Renderer callbacks are not equivalent to DOM mutations. A rising heap during
+component swapping is not proof of a leak without stable post-GC retention.
+Use a production build, identical controls, Chrome Performance, and Solid
+DevTools for meaningful comparisons.
+
+## Standalone policy
+
+This directory intentionally owns copies of the feed, worker, instruments,
+benchmark code, UI, and styles. That makes it independent and StackBlitz-ready;
+shared code and explanatory README sections are duplicated across adapters by
+design.
+
+The workspace resolves the pinned `@tanstack/solid-table` dependency to the
+local adapter package while keeping the manifest release-like.
diff --git a/examples/svelte/realtime-trading/README.md b/examples/svelte/realtime-trading/README.md
index 736f6c5d82..4e5298e393 100644
--- a/examples/svelte/realtime-trading/README.md
+++ b/examples/svelte/realtime-trading/README.md
@@ -1,16 +1,131 @@
 # Svelte realtime trading benchmark
 
-This standalone example applies the shared realtime-trading workload to the
-TanStack Svelte Table adapter. It includes the immutable worker feed, sortable
-headers, column resizing and drag ordering, delegated row and cell selection,
-dynamic quote components, and Full DOM or TanStack Virtual row rendering.
+This standalone example exercises the current TanStack Svelte Table adapter
+with a high-frequency worker feed, immutable market snapshots, interactive
+columns, custom Svelte cells, virtual rows, and browser diagnostics. It is a
+repeatable rendering workload rather than an exchange/network simulator.
 
-It starts with 100 instruments. Full DOM and TanStack Virtual are selectable
-below 250 instruments; virtualization is enabled and locked at 250 or more.
+## Run and verify
 
 ```bash
 pnpm --dir examples/svelte/realtime-trading dev
+```
+
+Open `http://localhost:7782`.
+
+```bash
 pnpm --dir examples/svelte/realtime-trading test:types
 pnpm --dir examples/svelte/realtime-trading lint
 pnpm --dir examples/svelte/realtime-trading build
+pnpm --dir examples/svelte/realtime-trading test:e2e
 ```
+
+Use a production build for performance recordings.
+
+## Structure and ownership
+
+| Path | Responsibility |
+| --- | --- |
+| `src/feed/` | Market model, instrument universe, feed config, immutable updates, and feed controller. |
+| `src/feed/worker/` | Typed worker protocol, deterministic engine, and module worker. |
+| `src/benchmark/` | Browser monitor, benchmark controller, table observer, and row-model timing. |
+| `src/shell/` | Svelte context plus separate header, metrics, configurator, diagnostics, selected-instrument, and status components. |
+| `src/table/table-config/` | Grouped columns and dedicated Price/Move/Percent/Sparkline Svelte components. |
+| `src/table/` | Svelte Table setup, table view, delegated interactions, column layout, and Svelte Virtual integration. |
+| `src/App.svelte` | Creates/provides controllers and starts/stops them with the app lifecycle. |
+
+The feed and benchmark are separate controllers. The feed owns worker state and
+quotes; the benchmark registers observers and owns metrics/view controls.
+Svelte context passes those controllers without routing the quote array through
+the root component. Shell pieces subscribe only to the stores they display.
+
+## Feed and worker pipeline
+
+The default is 100 instruments, 10K generated samples/s, 20 ms delivery,
+enabled intraday charts, and 16 ms chart sampling.
+
+Worker-private mutable quotes are changed by a deterministic 16 ms budget loop.
+A row-indexed `Map` coalesces repeated instrument changes. An independent timer
+publishes the latest unique rows at the selected cadence. Applying a message
+creates a new outer array and new objects only for changed rows; untouched rows
+and unsampled histories retain their references. Session IDs prevent late
+messages from an old reset/row-count session from entering current state.
+
+- **Synthetic quote workload** is worker-side generated samples/s, not messages
+  or Svelte updates.
+- **Worker delivery interval** controls coalesced messages; 20 ms targets around
+  50 messages/s.
+- **Row updates** counts unique immutable row objects applied.
+- **Message samples** is the generated work represented by the latest message.
+
+Intraday history sampling is independent. The 25K burst deliberately publishes
+one heavy batch. This resembles an upstream stream but excludes network delay.
+
+## Svelte table architecture
+
+The 14 leaf columns are grouped into Instrument, Price & Change, Order Book,
+Session, and Chart. Sorting/filtering, on-change resizing, double-click reset,
+drag column ordering, row selection, drag cell ranges, keyboard navigation,
+CSS-only hover, and component-based quote cells are included.
+
+`TradingTable.svelte` owns the view, while `trading-table.ts` and
+`table-config/` isolate table construction and columns. Stable instrument IDs
+back row identity. The custom quote components make component executions and
+lifecycle churn measurable; the A/B move mode intentionally changes component
+type and is not the normal rendering baseline.
+
+Selection uses one delegated body-level interaction controller and resolves
+cells from `composedPath()` plus data attributes. Column dimensions are CSS
+custom properties updated only for sizing/order. A `ResizeObserver` performs
+initial fitting and yields after the user resizes.
+
+## Virtualization
+
+- Below 200 rows, automatic mode chooses Full DOM, but Virtual can be enabled.
+- From 200 through 1,499 rows, automatic mode chooses TanStack Virtual and Full
+  DOM remains selectable.
+- At 1,500 rows or more, Virtual is forced and the control is disabled.
+
+Svelte Virtual uses a 32 px estimate, 10-row overscan, row IDs for item keys,
+transformed rows, and a spacer body. The virtualizer range feeds the current-row
+footer. Both modes use `content-visibility: auto`; Full DOM still creates every
+Svelte row/cell even if the browser skips offscreen paint/layout work.
+
+## Performance decisions
+
+- worker generation and pre-message coalescing;
+- immutable structural sharing for unchanged rows/history;
+- controller context instead of root-level data prop drilling;
+- stable keyed row identity;
+- table/config/cell component boundaries with localized store reads;
+- delegated pointer selection and CSS hover;
+- CSS variables for column width propagation;
+- configurable chart frequency and opt-in component churn;
+- virtual mounting for larger row sets;
+- low-frequency metric publication relative to feed updates.
+
+Publishing immutable state necessarily changes the outer array. Stable inner
+references reduce downstream work, but sorting/filtering can still require a
+new table row-model pass.
+
+## Diagnostics and interpretation
+
+The benchmark reports generated samples, worker messages, unique row updates,
+state applies, table commits, average mutation-to-render latency, long animation
+frames, mounted hosts, component lifecycle/execution rates, callbacks by
+column, DOM mutation records, row-model timing, and optional heap information.
+
+Renderer callbacks and DOM mutations measure different layers. Heap growth is
+not automatically a leak; verify retained objects after GC. Use identical
+production settings, Chrome Performance, and Svelte DevTools when comparing
+runs.
+
+## Standalone policy
+
+This directory deliberately contains copies of the feed, worker, instruments,
+benchmark, shell, styles, and table code. It can run independently or be copied
+to StackBlitz, so shared code and README sections are repeated across adapters
+by design.
+
+The workspace resolves the pinned `@tanstack/svelte-table` dependency to the
+local adapter package while preserving a release-like manifest.
diff --git a/examples/vue/realtime-trading/README.md b/examples/vue/realtime-trading/README.md
index 7bec52a817..fc72a56d21 100644
--- a/examples/vue/realtime-trading/README.md
+++ b/examples/vue/realtime-trading/README.md
@@ -1,12 +1,11 @@
 # Vue realtime trading benchmark
 
-This standalone example applies the same realtime-trading workload used by the
-Angular, React, Solid, and Preact examples to the current Vue Table adapter.
-It includes the immutable worker feed, sorting/filtering, resizing, drag column
-ordering, row and cell selection, dynamic quote components, full-DOM and
-TanStack Virtual row rendering and benchmark diagnostics.
+This standalone example exercises the current TanStack Vue Table adapter with
+a high-frequency worker feed, immutable quote snapshots, interactive columns,
+custom Vue cells, optional virtualization, and browser diagnostics. It is a
+repeatable UI stress workload, not an exchange or network benchmark.
 
-## Run
+## Run and verify
 
 ```bash
 pnpm --dir examples/vue/realtime-trading dev
@@ -14,24 +13,124 @@ pnpm --dir examples/vue/realtime-trading dev
 
 Open `http://localhost:7781`.
 
-## Structure
-
-- `feed/` owns the copied market data, configuration, instruments, controller,
-  protocol, engine, and dedicated Web Worker.
-- `benchmark/` owns feed/render timing, lifecycle, DOM mutation, and row-model
-  measurements.
-- `shell/` owns injected controllers, header, metrics, statusbar, configurator,
-  diagnostics, and selected-instrument UI.
-- `table/` owns Vue Table, FlexRender components, delegated grid interactions,
-  column configuration, and Vue Virtual integration.
-
-The example is self-contained and does not import a shared example package.
-
-## Verification
-
 ```bash
 pnpm --dir examples/vue/realtime-trading test:types
 pnpm --dir examples/vue/realtime-trading lint
 pnpm --dir examples/vue/realtime-trading build
 pnpm --dir examples/vue/realtime-trading test:e2e
 ```
+
+Use the production build for recordings; Vue development checks add overhead.
+
+## Structure and ownership
+
+| Path | Responsibility |
+| --- | --- |
+| `src/feed/` | Market model, instrument universe, feed configuration, immutable updates, and feed controller. |
+| `src/feed/worker/` | Typed protocol, deterministic market engine, and module worker. |
+| `src/benchmark/` | Browser monitor, benchmark controller, table timing, lifecycle, and mutation observers. |
+| `src/shell/` | Controller injection, viewport shell, controls, metrics, selected instrument, and diagnostics. |
+| `src/table/table-config/` | Grouped columns and custom Vue quote cells. |
+| `src/table/` | Vue Table instance, delegated interactions, column layout, and Vue Virtual integration. |
+| `src/App.tsx` | Creates/starts controllers, provides them, and composes shell plus table. |
+
+`MarketFeedController` owns worker/feed state; `TradingBenchmarkController`
+observes it and owns benchmark/view state. Vue `provide`/`inject` distributes
+stable controller objects. `@tanstack/vue-store` selectors expose narrow
+reactive slices instead of making the root consume the quotes and every metric.
+Cleanup stops both controllers on application unmount.
+
+## Feed and worker pipeline
+
+The default run uses 100 instruments, 10K generated samples/s, 20 ms delivery,
+enabled intraday charts, and 16 ms chart sampling.
+
+The worker keeps mutable market state private. Its deterministic generator runs
+from a 16 ms accrued budget, while a row-indexed `Map` coalesces repeated
+updates. A separate publication timer sends the latest unique rows. The main
+thread publishes a new quote array but replaces only changed row objects;
+untouched rows and unsampled history arrays keep their references. Session IDs
+discard messages from an obsolete reset/instrument configuration.
+
+- **Synthetic quote workload** is generated samples/s in the worker, not Vue
+  renders or `postMessage` calls.
+- **Worker delivery interval** is the target coalesced-message cadence; 20 ms
+  targets roughly 50 messages/s.
+- **Row updates** counts unique immutable rows applied by a message.
+- **Message samples** is the generated work represented by the latest batch.
+
+Chart sampling is independent of price sampling. The 25K burst immediately
+creates and publishes one heavy batch. Worker messaging approximates an
+upstream stream, but actual network latency is outside the benchmark.
+
+## Vue table architecture
+
+The grid has 14 leaf columns grouped into Instrument, Price & Change, Order
+Book, Session, and Chart. It supports sorting/filtering, on-change resizing,
+double-click reset, drag ordering, CSS row hover, row selection, drag cell
+ranges, keyboard navigation, and component-based Price/Move/Percent/Sparkline
+cells.
+
+The table reads the selected quotes store value through a getter and uses the
+instrument ID for `getRowId`. Table state is selected independently from feed
+state; computed rows are invalidated only by the inputs relevant to the row
+model. Dedicated row views keep row markup and selected-instrument state below
+the whole-table boundary.
+
+A single `TradingGridPointerController` handles body pointer events. It maps
+`event.composedPath()` and data attributes back to the TanStack cell, avoiding
+one handler per cell. Column sizes are CSS variables updated only when sizing
+or order changes. `ResizeObserver` performs initial fit until manual resizing.
+The A/B Move renderer is an explicit component lifecycle stress mode.
+
+## Virtualization
+
+- Below 200 rows, automatic mode uses Full DOM, but Virtual is selectable.
+- From 200 through 1,499 rows, automatic mode uses TanStack Virtual, while Full
+  DOM remains selectable.
+- At 1,500 rows or more, Virtual is forced and its control is locked.
+
+Vue Virtual uses 32 px row estimates, 10-row overscan, instrument IDs as item
+keys, transformed rows, and a spacer body. The visible-range footer reads the
+virtualizer range. Both paths apply `content-visibility: auto`; in Full DOM it
+can reduce browser rendering but cannot prevent Vue from creating all rows.
+
+## Performance decisions
+
+- market generation/coalescing is moved off the main thread;
+- immutable structural sharing preserves untouched rows/histories;
+- store selectors and computed values narrow reactive invalidation;
+- stable row and virtual item keys preserve identity;
+- row rendering is componentized without subscribing the app root to data;
+- pointer selection is delegated once;
+- CSS variables separate width changes from quote updates;
+- component swapping and chart frequency are opt-in stress controls;
+- virtualization limits framework and DOM mounts;
+- metrics are published more slowly than the feed.
+
+The immutable outer array must change for a batch. Structural sharing can reduce
+cell work, but sorted/filtered row models may still run when the data input
+changes.
+
+## Diagnostics and interpretation
+
+The monitor records generated samples, worker messages, unique row updates,
+state applies, table commits, average mutation-to-render latency, long animation
+frames, mounted hosts, component creation/destruction and execution, cell
+callbacks by column, DOM mutation records, core row-model timing, and optional
+heap data.
+
+Callback counts are not DOM mutation counts. Temporary heap growth during the
+swap workload is not a leak unless post-GC snapshots retain instances. Compare
+identical production configurations and use Chrome Performance plus Vue
+DevTools for call stacks and component detail.
+
+## Standalone policy
+
+The instruments, feed, worker, benchmark, shell, styles, and table code are
+intentionally copied into this folder. This keeps the example independently
+runnable and StackBlitz-ready, so shared implementation and README explanations
+are duplicated across adapters by design.
+
+The workspace resolves the pinned `@tanstack/vue-table` dependency to the local
+adapter package while retaining a release-like manifest.

From e173783ef89c851d5112e2558030630b0abc527d Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 18 Aug 2026 11:03:23 +0000
Subject: [PATCH 11/23] ci: apply automated fixes

---
 examples/alpine/realtime-trading/README.md    |  20 +-
 examples/alpine/realtime-trading/index.html   | 435 +++++++++++--
 examples/alpine/realtime-trading/package.json |  27 +-
 examples/alpine/realtime-trading/src/main.ts  | 570 +++++++++++++++---
 .../src/table/table-config/quote-cells.ts     | 134 +++-
 .../src/table/table-config/trading-columns.ts | 263 +++++++-
 .../src/table/trading-table.ts                |  10 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 .../alpine/realtime-trading/tsconfig.json     |  17 +-
 examples/angular/realtime-trading/README.md   |  22 +-
 .../src/app/shell/configurator.html           |   3 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  12 +-
 examples/ember/realtime-trading/README.md     |  22 +-
 .../app/components/shell/app-header.gts       |  45 +-
 .../app/components/shell/configurator.gts     | 217 +++++--
 .../app/components/shell/diagnostics.gts      | 125 +++-
 .../app/components/shell/market-statusbar.gts |  22 +-
 .../app/components/shell/metrics-strip.gts    |  75 ++-
 .../components/shell/selected-instrument.gts  |  35 +-
 .../app/components/shell/trading-shell.gts    |  26 +-
 .../app/components/table/trading-table.gts    | 352 +++++++++--
 .../app/table/table-config/quote-cells.gts    | 144 ++++-
 .../table/table-config/trading-columns.gts    | 199 +++++-
 .../app/templates/application.gts             |   4 +-
 .../app/utils/subscriptions.ts                |   4 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 examples/lit/realtime-trading/README.md       |  20 +-
 examples/lit/realtime-trading/index.html      |  13 +-
 examples/lit/realtime-trading/package.json    |  19 +-
 examples/lit/realtime-trading/src/main.ts     |  19 +-
 .../realtime-trading/src/shell/AppHeader.ts   |  28 +-
 .../src/shell/Configurator.ts                 | 179 +++++-
 .../realtime-trading/src/shell/Diagnostics.ts | 121 +++-
 .../src/shell/MarketStatusbar.ts              |  21 +-
 .../src/shell/MetricsStrip.ts                 |  81 ++-
 .../src/shell/SelectedInstrument.ts           |  40 +-
 .../src/shell/TradingShell.ts                 |  33 +-
 .../src/shell/controller-element.ts           |   8 +-
 .../src/table/TradingTable.ts                 | 372 ++++++++++--
 .../src/table/table-config/quote-cells.ts     | 117 +++-
 .../src/table/table-config/trading-columns.ts | 255 ++++++--
 .../src/table/trading-table.ts                |  10 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 examples/lit/realtime-trading/tsconfig.json   |  21 +-
 examples/octane/realtime-trading/README.md    |  20 +-
 .../src/table/use-trading-grid-pointer.ts     |   5 +-
 .../realtime-trading/src/use-store-value.ts   |   8 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 examples/preact/realtime-trading/README.md    |  18 +-
 examples/preact/realtime-trading/src/App.tsx  |   4 +-
 .../src/shell/TradingShell.tsx                |  15 +-
 .../src/table/trading-table.tsx               |  24 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 examples/react/realtime-trading/README.md     |  18 +-
 .../src/shell/TradingShell.tsx                |  10 +-
 .../src/table/table-interactions.ts           |   5 +-
 .../src/table/trading-table.tsx               |  10 +-
 .../src/table/use-trading-grid-pointer.ts     |   5 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 .../sp500-instruments.js                      |  12 +-
 examples/solid/realtime-trading/README.md     |  18 +-
 .../benchmark/trading-benchmark-controller.ts |   7 +-
 .../src/shell/TradingShell.tsx                |   6 +-
 .../src/table/trading-table.tsx               |  20 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 examples/svelte/realtime-trading/README.md    |  18 +-
 examples/svelte/realtime-trading/index.html   |   1 -
 .../src/shell/trading-shell-context.ts        |  12 +-
 .../src/table/table-config/quote-cells.ts     |  24 +-
 .../src/table/table-config/trading-columns.ts | 222 ++++++-
 .../src/table/trading-table.ts                |  10 +-
 .../svelte/realtime-trading/src/vite-env.d.ts |   1 -
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 .../svelte/realtime-trading/tsconfig.json     |   8 +-
 examples/vue/realtime-trading/README.md       |  18 +-
 examples/vue/realtime-trading/src/App.tsx     |   4 +-
 .../src/benchmark/use-table-benchmark.ts      |   4 +-
 .../src/shell/TradingShell.tsx                | 247 ++++++--
 .../src/table/table-config/quote-cells.tsx    |   8 +-
 .../src/table/trading-table.tsx               |  45 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |   4 +-
 81 files changed, 4089 insertions(+), 914 deletions(-)

diff --git a/examples/alpine/realtime-trading/README.md b/examples/alpine/realtime-trading/README.md
index e97d51f053..5e86616696 100644
--- a/examples/alpine/realtime-trading/README.md
+++ b/examples/alpine/realtime-trading/README.md
@@ -24,16 +24,16 @@ Use a production build for performance recordings.
 
 ## Structure and ownership
 
-| Path | Responsibility |
-| --- | --- |
-| `src/feed/` | Market model, instrument universe, feed config, immutable update helpers, and Store-backed feed controller. |
-| `src/feed/worker/` | Typed protocol, deterministic engine, and module worker. |
-| `src/benchmark/` | Browser monitor and benchmark controller. |
-| `src/shell/configurator-options.ts` | Declarative select/range options used by the sidebar. |
-| `src/table/table-config/` | Grouped columns and custom quote elements. |
-| `src/table/` | Shared interaction helpers and virtualization constants. |
-| `src/main.ts` | Alpine component factory and the imperative bridges to Store, Table, Virtual Core, observers, and DOM layout. |
-| `index.html` | Declarative full-viewport shell, table template, controls, diagnostics, and status bar. |
+| Path                                | Responsibility                                                                                                |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `src/feed/`                         | Market model, instrument universe, feed config, immutable update helpers, and Store-backed feed controller.   |
+| `src/feed/worker/`                  | Typed protocol, deterministic engine, and module worker.                                                      |
+| `src/benchmark/`                    | Browser monitor and benchmark controller.                                                                     |
+| `src/shell/configurator-options.ts` | Declarative select/range options used by the sidebar.                                                         |
+| `src/table/table-config/`           | Grouped columns and custom quote elements.                                                                    |
+| `src/table/`                        | Shared interaction helpers and virtualization constants.                                                      |
+| `src/main.ts`                       | Alpine component factory and the imperative bridges to Store, Table, Virtual Core, observers, and DOM layout. |
+| `index.html`                        | Declarative full-viewport shell, table template, controls, diagnostics, and status bar.                       |
 
 Alpine keeps the markup declarative in `index.html`; `tradingApp` owns only the
 runtime coordination that cannot live in HTML. Feed and benchmark remain
diff --git a/examples/alpine/realtime-trading/index.html b/examples/alpine/realtime-trading/index.html
index 6553353da5..08ca958438 100644
--- a/examples/alpine/realtime-trading/index.html
+++ b/examples/alpine/realtime-trading/index.html
@@ -1,37 +1,400 @@
 <!doctype html>
-<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>TanStack Alpine Table · Realtime Trading</title></head>
-<body><main x-data="tradingApp" x-init="init" @alpine:destroy="destroy" class="trading-terminal" :class="{ 'is-sidebar-collapsed': !local.sidebarOpen }">
-  <div class="shell-header"><header class="app-bar"><div class="brand"><strong>MARKET MONITOR</strong></div><div class="header-actions"><span class="feed-status" :class="{ 'is-running': local.feed.workerReady && local.feed.running }" data-testid="feed-status"><span class="status-dot" aria-hidden="true"></span><span x-text="feedStatus()"></span></span><button class="sidebar-toggle" type="button" :aria-expanded="local.sidebarOpen" aria-controls="benchmark-configurator" :aria-label="local.sidebarOpen ? 'Close configurator' : 'Open configurator'" @click="toggleSidebar()"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect><path d="M12.5 3v14"></path></svg></button></div></header><aside class="development-warning">DEV BUILD — use the production build before recording results.</aside></div>
-  <section class="market-panel" aria-label="Live synthetic quotes">
-    <section class="metrics-strip" aria-label="Live performance metrics"><template x-for="item in metricItems()" :key="item[0]"><article><span x-text="item[0]"></span><strong :data-testid="item[3] || null" x-text="item[1]"></strong><small x-text="item[2]"></small></article></template></section>
-    <div x-ref="scroll" class="table-scroll" :class="{ 'is-virtualized': virtualMode() === 'tanstack' }" data-trading-table>
-      <table x-ref="table" class="trading-data-grid" :class="{ 'virtual-table': virtualMode() === 'tanstack' }" data-testid="trading-table" role="grid" aria-multiselectable="true" tabindex="0" @keydown="onGridKeyDown($event)">
-        <thead><template x-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id"><tr><template x-for="header in headerGroup.headers" :key="header.id"><th :colspan="header.colSpan" :style="`width:calc(var(--header-${header.id}-size) * 1px)`" :aria-sort="header.subHeaders.length === 0 ? sortAriaValue(header.column.getIsSorted()) : null" :class="{ 'column-group-header': header.subHeaders.length > 0, 'numeric-header': header.subHeaders.length === 0 && !isTextColumn(header.column.id) }">
-          <template x-if="!header.isPlaceholder && header.subHeaders.length === 0"><div><div class="leaf-header-content" @dragover="dragOver(header, $event)" @drop="drop(header, $event)"><button type="button" class="column-drag-handle" draggable="true" :aria-label="`Move ${header.column.id} column`" @dragstart="dragStart(header, $event)" @dragend="clearDrag()">⋮⋮</button><button type="button" class="sort-header-button" :class="{ 'is-sortable': header.column.getCanSort() }" :disabled="!header.column.getCanSort()" @click="header.column.getToggleSortingHandler()($event)"><span class="header-label" x-html="FlexRender({ header })"></span><span x-show="header.column.getCanSort()" class="sort-indicator" :class="{ 'is-active': header.column.getIsSorted() }" aria-hidden="true" x-text="sortIndicator(header.column.getIsSorted())"></span></button></div><div x-show="header.column.getCanResize()" class="column-resize-handle" :class="{ 'is-resizing': header.column.getIsResizing() }" role="separator" aria-orientation="vertical" @dblclick="header.column.resetSize()" @mousedown="header.getResizeHandler()($event)" @touchstart="header.getResizeHandler()($event)"></div></div></template>
-          <template x-if="!header.isPlaceholder && header.subHeaders.length > 0"><span x-html="FlexRender({ header })"></span></template>
-        </th></template></tr></template></thead>
-        <tbody :class="{ 'virtual-table-body': virtualMode() === 'tanstack' }" :style="virtualMode() === 'tanstack' ? `height:${tableHeight()}px` : ''" :data-source-row-count="local.feed.quotes.length" @mousedown="onBodyMouseDown($event)" @pointerover="onBodyPointerOver($event)" @mouseleave="resetPointer()" @click="onBodyClick($event)">
-          <template x-for="item in renderRows()" :key="item.row.id"><tr :class="{ 'virtual-table-row': item.virtual }" :style="item.virtual ? `transform:translateY(${item.virtual.start}px)` : ''" :data-virtual-index="item.virtual?.index ?? null" :data-symbol="item.row.original.symbol" :data-row-id="item.row.original.id" :data-symbol-selected="local.selectedSymbol === item.row.original.symbol ? 'true' : null" :title="item.row.original.company" :aria-selected="item.row.getIsSelected()"><template x-for="cell in item.row.getVisibleCells()" :key="cell.id"><td :style="`width:calc(var(--col-${cell.column.id}-size) * 1px)`" :data-column-id="cell.column.id" :data-cell-focused="cell.getIsFocused() ? 'true' : null" :data-selection-top="cell.getSelectionEdges().top ? 'true' : null" :data-selection-right="cell.getSelectionEdges().right ? 'true' : null" :data-selection-bottom="cell.getSelectionEdges().bottom ? 'true' : null" :data-selection-left="cell.getSelectionEdges().left ? 'true' : null" :aria-selected="cell.getIsSelected()" :tabindex="cell.getTabIndex()" x-html="FlexRender({ cell })"></td></template></tr></template>
-        </tbody>
-      </table>
-    </div>
-    <footer x-show="virtualMode() === 'tanstack'" class="virtual-scroll-footer" data-testid="virtual-scroll-footer"><span x-text="`TanStack · Total · ${rows().length} rows · ${table.getVisibleLeafColumns().length} columns`"></span><span data-testid="visible-row-range" x-text="visibleRangeText()"></span></footer>
-  </section>
-  <footer class="market-statusbar"><span>MESSAGE SAMPLES <strong x-text="formatInteger(local.benchmark.metrics.lastBatchSize)"></strong></span><span>ROW UPDATES <strong x-text="formatInteger(local.benchmark.metrics.lastUpdateCount)"></strong></span><span>HOSTS <strong x-text="formatInteger(local.benchmark.mountedCells)"></strong></span><span>COMPONENTS <strong x-text="formatInteger(local.benchmark.liveComponents)"></strong></span></footer>
-  <div class="sidebar-slot"><aside x-show="local.sidebarOpen" id="benchmark-configurator" class="configurator" aria-label="Benchmark configurator"><header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
-    <section class="config-section" aria-labelledby="feed-settings"><h2 id="feed-settings">FEED</h2><button class="primary-action" type="button" data-testid="feed-toggle" @click="feed.actions.toggle()" x-text="local.feed.running ? 'PAUSE FEED' : 'START FEED'"></button>
-      <label class="field"><span>Instruments (rows)</span><select data-testid="instrument-count-select" :value="local.feed.instrumentCount" @change="setInstrumentCount($event)"><template x-for="option in configuratorOptions.instrumentCounts" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select></label>
-      <label class="field rate-field"><span>Synthetic quote workload <strong data-testid="target-sample-rate" x-text="`${formatRate(local.feed.targetTicksPerSecond)} samples/s`"></strong></span><input data-testid="target-rate-slider" type="range" min="0" :max="feedSampleRateOptions.length - 1" step="1" :value="sampleRateIndex()" @change="setSampleRate($event)" /><small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small></label>
-      <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" :value="local.feed.publishIntervalMs" @change="setPublishInterval($event)"><template x-for="option in configuratorOptions.workerDeliveryIntervals" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select><small>One coalesced worker message at this target cadence.</small></label>
-    </section>
-    <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
-      <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" :value="virtualMode()" :disabled="local.feed.instrumentCount >= 1500" @change="setVirtualMode($event)"><template x-for="option in configuratorOptions.rowRenderingModes" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select><small x-text="local.feed.instrumentCount >= 1500 ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'"></small></label>
-      <label class="toggle-field"><input type="checkbox" :checked="local.rendererMode === 'swap'" @change="setRendererMode($event)" /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
-      <label class="toggle-field"><input type="checkbox" :checked="local.feed.updateSparklines" @change="setSparklineUpdates($event)" /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
-      <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" :value="local.feed.sparklineSampleIntervalMs" @change="setSparklineInterval($event)"><template x-for="option in configuratorOptions.intradaySamplingIntervals" :key="option.value"><option :value="option.value" x-text="option.label"></option></template></select></label>
-    </section>
-    <section class="config-section" aria-labelledby="stress-actions"><h2 id="stress-actions">STRESS ACTIONS</h2><div class="action-grid"><button type="button" @click="feed.actions.runBurst()">RUN 25K BURST</button><button type="button" @click="controller.actions.resetMarket()">RESET SESSION</button></div></section>
-    <section class="config-section diagnostics" aria-labelledby="diagnostics"><h2 id="diagnostics">DIAGNOSTICS</h2><dl><template x-for="item in diagnostics()" :key="item[0]"><div><dt x-text="item[0]"></dt><dd :data-testid="item[2] || null" x-text="item[1]"></dd></div></template></dl></section>
-    <section class="config-section selected-instrument" data-testid="selected-instrument"><h2>SELECTED INSTRUMENT</h2><template x-if="selectedQuote()"><div x-data="{ get quote() { return selectedQuote() } }"><div class="selection"><div><strong x-text="quote.symbol"></strong><span x-text="quote.company"></span></div><small x-text="quote.venue"></small></div><dl><div><dt>Last</dt><dd x-text="quote.price.toFixed(2)"></dd></div><div><dt>Bid / ask</dt><dd x-text="`${quote.bid.toFixed(2)} / ${quote.ask.toFixed(2)}`"></dd></div></dl></div></template><p x-show="!selectedQuote()">Click or begin a cell selection in any row to inspect its instrument.</p></section>
-  </aside></div>
-</main><script type="module" src="/src/main.ts"></script></body></html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Alpine Table · Realtime Trading</title>
+  </head>
+  <body>
+    <main
+      x-data="tradingApp"
+      x-init="init"
+      @alpine:destroy="destroy"
+      class="trading-terminal"
+      :class="{ 'is-sidebar-collapsed': !local.sidebarOpen }"
+    >
+      <div class="shell-header">
+        <header class="app-bar">
+          <div class="brand"><strong>MARKET MONITOR</strong></div>
+          <div class="header-actions">
+            <span
+              class="feed-status"
+              :class="{ 'is-running': local.feed.workerReady && local.feed.running }"
+              data-testid="feed-status"
+              ><span class="status-dot" aria-hidden="true"></span
+              ><span x-text="feedStatus()"></span></span
+            ><button
+              class="sidebar-toggle"
+              type="button"
+              :aria-expanded="local.sidebarOpen"
+              aria-controls="benchmark-configurator"
+              :aria-label="local.sidebarOpen ? 'Close configurator' : 'Open configurator'"
+              @click="toggleSidebar()"
+            >
+              <svg viewBox="0 0 20 20" aria-hidden="true">
+                <rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect>
+                <path d="M12.5 3v14"></path>
+              </svg>
+            </button>
+          </div>
+        </header>
+        <aside class="development-warning">
+          DEV BUILD — use the production build before recording results.
+        </aside>
+      </div>
+      <section class="market-panel" aria-label="Live synthetic quotes">
+        <section class="metrics-strip" aria-label="Live performance metrics">
+          <template x-for="item in metricItems()" :key="item[0]"
+            ><article>
+              <span x-text="item[0]"></span
+              ><strong :data-testid="item[3] || null" x-text="item[1]"></strong
+              ><small x-text="item[2]"></small></article
+          ></template>
+        </section>
+        <div
+          x-ref="scroll"
+          class="table-scroll"
+          :class="{ 'is-virtualized': virtualMode() === 'tanstack' }"
+          data-trading-table
+        >
+          <table
+            x-ref="table"
+            class="trading-data-grid"
+            :class="{ 'virtual-table': virtualMode() === 'tanstack' }"
+            data-testid="trading-table"
+            role="grid"
+            aria-multiselectable="true"
+            tabindex="0"
+            @keydown="onGridKeyDown($event)"
+          >
+            <thead>
+              <template
+                x-for="headerGroup in table.getHeaderGroups()"
+                :key="headerGroup.id"
+                ><tr>
+                  <template
+                    x-for="header in headerGroup.headers"
+                    :key="header.id"
+                    ><th
+                      :colspan="header.colSpan"
+                      :style="`width:calc(var(--header-${header.id}-size) * 1px)`"
+                      :aria-sort="header.subHeaders.length === 0 ? sortAriaValue(header.column.getIsSorted()) : null"
+                      :class="{ 'column-group-header': header.subHeaders.length > 0, 'numeric-header': header.subHeaders.length === 0 && !isTextColumn(header.column.id) }"
+                    >
+                      <template
+                        x-if="!header.isPlaceholder && header.subHeaders.length === 0"
+                        ><div>
+                          <div
+                            class="leaf-header-content"
+                            @dragover="dragOver(header, $event)"
+                            @drop="drop(header, $event)"
+                          >
+                            <button
+                              type="button"
+                              class="column-drag-handle"
+                              draggable="true"
+                              :aria-label="`Move ${header.column.id} column`"
+                              @dragstart="dragStart(header, $event)"
+                              @dragend="clearDrag()"
+                            >
+                              ⋮⋮</button
+                            ><button
+                              type="button"
+                              class="sort-header-button"
+                              :class="{ 'is-sortable': header.column.getCanSort() }"
+                              :disabled="!header.column.getCanSort()"
+                              @click="header.column.getToggleSortingHandler()($event)"
+                            >
+                              <span
+                                class="header-label"
+                                x-html="FlexRender({ header })"
+                              ></span
+                              ><span
+                                x-show="header.column.getCanSort()"
+                                class="sort-indicator"
+                                :class="{ 'is-active': header.column.getIsSorted() }"
+                                aria-hidden="true"
+                                x-text="sortIndicator(header.column.getIsSorted())"
+                              ></span>
+                            </button>
+                          </div>
+                          <div
+                            x-show="header.column.getCanResize()"
+                            class="column-resize-handle"
+                            :class="{ 'is-resizing': header.column.getIsResizing() }"
+                            role="separator"
+                            aria-orientation="vertical"
+                            @dblclick="header.column.resetSize()"
+                            @mousedown="header.getResizeHandler()($event)"
+                            @touchstart="header.getResizeHandler()($event)"
+                          ></div></div
+                      ></template>
+                      <template
+                        x-if="!header.isPlaceholder && header.subHeaders.length > 0"
+                        ><span x-html="FlexRender({ header })"></span
+                      ></template></th
+                  ></template></tr
+              ></template>
+            </thead>
+            <tbody
+              :class="{ 'virtual-table-body': virtualMode() === 'tanstack' }"
+              :style="virtualMode() === 'tanstack' ? `height:${tableHeight()}px` : ''"
+              :data-source-row-count="local.feed.quotes.length"
+              @mousedown="onBodyMouseDown($event)"
+              @pointerover="onBodyPointerOver($event)"
+              @mouseleave="resetPointer()"
+              @click="onBodyClick($event)"
+            >
+              <template x-for="item in renderRows()" :key="item.row.id"
+                ><tr
+                  :class="{ 'virtual-table-row': item.virtual }"
+                  :style="item.virtual ? `transform:translateY(${item.virtual.start}px)` : ''"
+                  :data-virtual-index="item.virtual?.index ?? null"
+                  :data-symbol="item.row.original.symbol"
+                  :data-row-id="item.row.original.id"
+                  :data-symbol-selected="local.selectedSymbol === item.row.original.symbol ? 'true' : null"
+                  :title="item.row.original.company"
+                  :aria-selected="item.row.getIsSelected()"
+                >
+                  <template
+                    x-for="cell in item.row.getVisibleCells()"
+                    :key="cell.id"
+                    ><td
+                      :style="`width:calc(var(--col-${cell.column.id}-size) * 1px)`"
+                      :data-column-id="cell.column.id"
+                      :data-cell-focused="cell.getIsFocused() ? 'true' : null"
+                      :data-selection-top="cell.getSelectionEdges().top ? 'true' : null"
+                      :data-selection-right="cell.getSelectionEdges().right ? 'true' : null"
+                      :data-selection-bottom="cell.getSelectionEdges().bottom ? 'true' : null"
+                      :data-selection-left="cell.getSelectionEdges().left ? 'true' : null"
+                      :aria-selected="cell.getIsSelected()"
+                      :tabindex="cell.getTabIndex()"
+                      x-html="FlexRender({ cell })"
+                    ></td
+                  ></template></tr
+              ></template>
+            </tbody>
+          </table>
+        </div>
+        <footer
+          x-show="virtualMode() === 'tanstack'"
+          class="virtual-scroll-footer"
+          data-testid="virtual-scroll-footer"
+        >
+          <span
+            x-text="`TanStack · Total · ${rows().length} rows · ${table.getVisibleLeafColumns().length} columns`"
+          ></span
+          ><span
+            data-testid="visible-row-range"
+            x-text="visibleRangeText()"
+          ></span>
+        </footer>
+      </section>
+      <footer class="market-statusbar">
+        <span
+          >MESSAGE SAMPLES
+          <strong
+            x-text="formatInteger(local.benchmark.metrics.lastBatchSize)"
+          ></strong></span
+        ><span
+          >ROW UPDATES
+          <strong
+            x-text="formatInteger(local.benchmark.metrics.lastUpdateCount)"
+          ></strong></span
+        ><span
+          >HOSTS
+          <strong
+            x-text="formatInteger(local.benchmark.mountedCells)"
+          ></strong></span
+        ><span
+          >COMPONENTS
+          <strong
+            x-text="formatInteger(local.benchmark.liveComponents)"
+          ></strong
+        ></span>
+      </footer>
+      <div class="sidebar-slot">
+        <aside
+          x-show="local.sidebarOpen"
+          id="benchmark-configurator"
+          class="configurator"
+          aria-label="Benchmark configurator"
+        >
+          <header>
+            <span>CONFIGURATOR</span><small>RUN PARAMETERS</small>
+          </header>
+          <section class="config-section" aria-labelledby="feed-settings">
+            <h2 id="feed-settings">FEED</h2>
+            <button
+              class="primary-action"
+              type="button"
+              data-testid="feed-toggle"
+              @click="feed.actions.toggle()"
+              x-text="local.feed.running ? 'PAUSE FEED' : 'START FEED'"
+            ></button>
+            <label class="field"
+              ><span>Instruments (rows)</span
+              ><select
+                data-testid="instrument-count-select"
+                :value="local.feed.instrumentCount"
+                @change="setInstrumentCount($event)"
+              >
+                <template
+                  x-for="option in configuratorOptions.instrumentCounts"
+                  :key="option.value"
+                  ><option :value="option.value" x-text="option.label"></option
+                ></template></select
+            ></label>
+            <label class="field rate-field"
+              ><span
+                >Synthetic quote workload
+                <strong
+                  data-testid="target-sample-rate"
+                  x-text="`${formatRate(local.feed.targetTicksPerSecond)} samples/s`"
+                ></strong></span
+              ><input
+                data-testid="target-rate-slider"
+                type="range"
+                min="0"
+                :max="feedSampleRateOptions.length - 1"
+                step="1"
+                :value="sampleRateIndex()"
+                @change="setSampleRate($event)"
+              /><small
+                >Fixed worker-side workload levels. Samples are coalesced; this
+                is not the message delivery rate.</small
+              ></label
+            >
+            <label class="field"
+              ><span>Worker delivery interval</span
+              ><select
+                data-testid="publish-interval-select"
+                :value="local.feed.publishIntervalMs"
+                @change="setPublishInterval($event)"
+              >
+                <template
+                  x-for="option in configuratorOptions.workerDeliveryIntervals"
+                  :key="option.value"
+                  ><option :value="option.value" x-text="option.label"></option
+                ></template></select
+              ><small
+                >One coalesced worker message at this target cadence.</small
+              ></label
+            >
+          </section>
+          <section class="config-section" aria-labelledby="render-settings">
+            <h2 id="render-settings">RENDER PATH</h2>
+            <label class="field" data-testid="virtual-scroll-mode"
+              ><span>Row rendering</span
+              ><select
+                data-testid="virtual-scroll-select"
+                :value="virtualMode()"
+                :disabled="local.feed.instrumentCount >= 1500"
+                @change="setVirtualMode($event)"
+              >
+                <template
+                  x-for="option in configuratorOptions.rowRenderingModes"
+                  :key="option.value"
+                  ><option :value="option.value" x-text="option.label"></option
+                ></template></select
+              ><small
+                x-text="local.feed.instrumentCount >= 1500 ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'"
+              ></small
+            ></label>
+            <label class="toggle-field"
+              ><input
+                type="checkbox"
+                :checked="local.rendererMode === 'swap'"
+                @change="setRendererMode($event)"
+              /><span
+                >Swap Tick component A ↔ B<small
+                  >destroy and recreate when direction changes</small
+                ></span
+              ></label
+            >
+            <label class="toggle-field"
+              ><input
+                type="checkbox"
+                :checked="local.feed.updateSparklines"
+                @change="setSparklineUpdates($event)"
+              /><span
+                >Update intraday charts<small
+                  >sample rolling prices independently</small
+                ></span
+              ></label
+            >
+            <label class="field"
+              ><span>Intraday chart sampling</span
+              ><select
+                data-testid="sparkline-sample-interval-select"
+                :value="local.feed.sparklineSampleIntervalMs"
+                @change="setSparklineInterval($event)"
+              >
+                <template
+                  x-for="option in configuratorOptions.intradaySamplingIntervals"
+                  :key="option.value"
+                  ><option :value="option.value" x-text="option.label"></option
+                ></template></select
+            ></label>
+          </section>
+          <section class="config-section" aria-labelledby="stress-actions">
+            <h2 id="stress-actions">STRESS ACTIONS</h2>
+            <div class="action-grid">
+              <button type="button" @click="feed.actions.runBurst()">
+                RUN 25K BURST</button
+              ><button type="button" @click="controller.actions.resetMarket()">
+                RESET SESSION
+              </button>
+            </div>
+          </section>
+          <section
+            class="config-section diagnostics"
+            aria-labelledby="diagnostics"
+          >
+            <h2 id="diagnostics">DIAGNOSTICS</h2>
+            <dl>
+              <template x-for="item in diagnostics()" :key="item[0]"
+                ><div>
+                  <dt x-text="item[0]"></dt>
+                  <dd :data-testid="item[2] || null" x-text="item[1]"></dd></div
+              ></template>
+            </dl>
+          </section>
+          <section
+            class="config-section selected-instrument"
+            data-testid="selected-instrument"
+          >
+            <h2>SELECTED INSTRUMENT</h2>
+            <template x-if="selectedQuote()"
+              ><div x-data="{ get quote() { return selectedQuote() } }">
+                <div class="selection">
+                  <div>
+                    <strong x-text="quote.symbol"></strong
+                    ><span x-text="quote.company"></span>
+                  </div>
+                  <small x-text="quote.venue"></small>
+                </div>
+                <dl>
+                  <div>
+                    <dt>Last</dt>
+                    <dd x-text="quote.price.toFixed(2)"></dd>
+                  </div>
+                  <div>
+                    <dt>Bid / ask</dt>
+                    <dd
+                      x-text="`${quote.bid.toFixed(2)} / ${quote.ask.toFixed(2)}`"
+                    ></dd>
+                  </div>
+                </dl></div
+            ></template>
+            <p x-show="!selectedQuote()">
+              Click or begin a cell selection in any row to inspect its
+              instrument.
+            </p>
+          </section>
+        </aside>
+      </div>
+    </main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/alpine/realtime-trading/package.json b/examples/alpine/realtime-trading/package.json
index 4dfd43d3ce..e0f67261e4 100644
--- a/examples/alpine/realtime-trading/package.json
+++ b/examples/alpine/realtime-trading/package.json
@@ -1,6 +1,25 @@
 {
-  "name": "tanstack-alpine-table-example-realtime-trading", "private": true, "type": "module",
-  "scripts": { "start": "vite", "dev": "vite", "build": "vite build", "serve": "vite preview", "lint": "eslint ./src", "test:types": "tsc --noEmit", "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts" },
-  "dependencies": { "@tanstack/alpine-table": "9.1.2", "@tanstack/store": "^0.11.0", "@tanstack/virtual-core": "^3.13.35", "alpinejs": "^3.15.12" },
-  "devDependencies": { "@types/alpinejs": "^3.13.11", "typescript": "6.0.3", "vite": "^8.2.0" }
+  "name": "tanstack-alpine-table-example-realtime-trading",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src",
+    "test:types": "tsc --noEmit",
+    "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
+  },
+  "dependencies": {
+    "@tanstack/alpine-table": "9.1.2",
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/virtual-core": "^3.13.35",
+    "alpinejs": "^3.15.12"
+  },
+  "devDependencies": {
+    "@types/alpinejs": "^3.13.11",
+    "typescript": "6.0.3",
+    "vite": "^8.2.0"
+  }
 }
diff --git a/examples/alpine/realtime-trading/src/main.ts b/examples/alpine/realtime-trading/src/main.ts
index f0857b248d..758bddcb8c 100644
--- a/examples/alpine/realtime-trading/src/main.ts
+++ b/examples/alpine/realtime-trading/src/main.ts
@@ -1,120 +1,540 @@
 import Alpine from 'alpinejs'
-import { FlexRender, createFilteredRowModel, createSortedRowModel, createTable, filterFn_includesString, sortFn_basic, stockFeatures, tableFeatures } from '@tanstack/alpine-table'
-import { Virtualizer, elementScroll, observeElementOffset, observeElementRect } from '@tanstack/virtual-core'
+import {
+  FlexRender,
+  createFilteredRowModel,
+  createSortedRowModel,
+  createTable,
+  filterFn_includesString,
+  sortFn_basic,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/alpine-table'
+import {
+  Virtualizer,
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+} from '@tanstack/virtual-core'
 import { TradingBenchmarkController } from './benchmark/trading-benchmark-controller'
 import { MarketFeedController } from './feed/market-feed-controller'
-import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from './feed/feed-sample-rates'
+import {
+  feedSampleRateAt,
+  feedSampleRateIndex,
+  feedSampleRateOptions,
+} from './feed/feed-sample-rates'
 import { configuratorOptions } from './shell/configurator-options'
-import { createTradingColumns, readMeasuredRows } from './table/table-config/trading-columns'
-import { TradingGridPointerController, handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from './table/table-interactions'
-import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode } from './table/trading-row-virtualizer'
+import {
+  createTradingColumns,
+  readMeasuredRows,
+} from './table/table-config/trading-columns'
+import {
+  TradingGridPointerController,
+  handleCellNavigation,
+  reorderColumnIds,
+  sortAriaValue,
+  sortIndicator,
+} from './table/table-interactions'
+import {
+  TRADING_ROW_HEIGHT,
+  TRADING_ROW_OVERSCAN,
+  resolveVirtualScrollMode,
+} from './table/trading-row-virtualizer'
 import './table/table-config/quote-cells'
 import './index.css'
 import type { AlpineTable } from '@tanstack/alpine-table'
 import type { VirtualItem } from '@tanstack/virtual-core'
 import type { MarketQuote } from './feed/market-data'
 
-const features = tableFeatures({ ...stockFeatures, filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(), filterFns: { includesString: filterFn_includesString }, sortFns: { basic: sortFn_basic } })
+const features = tableFeatures({
+  ...stockFeatures,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { basic: sortFn_basic },
+})
 type Table = AlpineTable<typeof features, MarketQuote>
 const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
-const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const rate = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
 const ms = (number: number) => `${number.toFixed(2)} ms`
 
 Alpine.data('tradingApp', () => {
   const feed = new MarketFeedController()
   const controller = new TradingBenchmarkController(feed)
   const local = Alpine.reactive({
-    feed: feed.store.get(), benchmark: controller.store.get(),
-    selectedSymbol: controller.renderAtoms.selectedSymbol.get(), rendererMode: controller.renderAtoms.rendererMode.get(),
-    sidebarOpen: true, virtualVersion: 0, tableVersion: 0,
+    feed: feed.store.get(),
+    benchmark: controller.store.get(),
+    selectedSymbol: controller.renderAtoms.selectedSymbol.get(),
+    rendererMode: controller.renderAtoms.rendererMode.get(),
+    sidebarOpen: true,
+    virtualVersion: 0,
+    tableVersion: 0,
   })
-  const columns = createTradingColumns<typeof features>(() => local.rendererMode)
-  const table = createTable({
-    key: 'alpine-realtime-trading', features, columns, get data() { return local.feed.quotes },
-    getRowId: (row: MarketQuote) => row.id,
-    columnResizeMode: 'onChange', defaultColumn: { minSize: 56, maxSize: 800 }, autoResetCellSelection: false,
-  }, (state) => ({ sorting: state.sorting, columnFilters: state.columnFilters, columnOrder: state.columnOrder, rowSelection: state.rowSelection, cellSelection: state.cellSelection }))
+  const columns = createTradingColumns<typeof features>(
+    () => local.rendererMode,
+  )
+  const table = createTable(
+    {
+      key: 'alpine-realtime-trading',
+      features,
+      columns,
+      get data() {
+        return local.feed.quotes
+      },
+      getRowId: (row: MarketQuote) => row.id,
+      columnResizeMode: 'onChange',
+      defaultColumn: { minSize: 56, maxSize: 800 },
+      autoResetCellSelection: false,
+    },
+    (state) => ({
+      sorting: state.sorting,
+      columnFilters: state.columnFilters,
+      columnOrder: state.columnOrder,
+      rowSelection: state.rowSelection,
+      cellSelection: state.cellSelection,
+    }),
+  )
   const pointer = new TradingGridPointerController()
   const runtime = {
-    virtualizer: null as Virtualizer<HTMLDivElement, HTMLTableRowElement> | null,
-    cleanups: [] as Array<() => void>, manuallyResized: false,
-    dragColumnId: null as string | null, dragSource: null as HTMLTableCellElement | null, dragTarget: null as HTMLTableCellElement | null,
-    cachedRows: [] as ReturnType<Table['getRowModel']>['rows'], cachedFeed: null as Array<MarketQuote> | null, cachedTableVersion: -1,
+    virtualizer: null as Virtualizer<
+      HTMLDivElement,
+      HTMLTableRowElement
+    > | null,
+    cleanups: [] as Array<() => void>,
+    manuallyResized: false,
+    dragColumnId: null as string | null,
+    dragSource: null as HTMLTableCellElement | null,
+    dragTarget: null as HTMLTableCellElement | null,
+    cachedRows: [] as ReturnType<Table['getRowModel']>['rows'],
+    cachedFeed: null as Array<MarketQuote> | null,
+    cachedTableVersion: -1,
   }
   const rows = () => {
-    if (runtime.cachedFeed !== local.feed.quotes || runtime.cachedTableVersion !== local.tableVersion) {
-      runtime.cachedFeed = local.feed.quotes; runtime.cachedTableVersion = local.tableVersion; runtime.cachedRows = readMeasuredRows(() => table.getRowModel().rows)
+    if (
+      runtime.cachedFeed !== local.feed.quotes ||
+      runtime.cachedTableVersion !== local.tableVersion
+    ) {
+      runtime.cachedFeed = local.feed.quotes
+      runtime.cachedTableVersion = local.tableVersion
+      runtime.cachedRows = readMeasuredRows(() => table.getRowModel().rows)
     }
     return runtime.cachedRows
   }
-  const virtualMode = () => resolveVirtualScrollMode(local.benchmark.requestedVirtualScrollMode, local.feed.instrumentCount)
+  const virtualMode = () =>
+    resolveVirtualScrollMode(
+      local.benchmark.requestedVirtualScrollMode,
+      local.feed.instrumentCount,
+    )
   const syncVirtualizer = () => {
-    const virtualizer = runtime.virtualizer; const currentRows = rows()
+    const virtualizer = runtime.virtualizer
+    const currentRows = rows()
     if (!virtualizer) return
-    virtualizer.setOptions({ ...virtualizer.options, count: currentRows.length, enabled: virtualMode() === 'tanstack', getItemKey: (index) => currentRows[index]?.id ?? index })
+    virtualizer.setOptions({
+      ...virtualizer.options,
+      count: currentRows.length,
+      enabled: virtualMode() === 'tanstack',
+      getItemKey: (index) => currentRows[index]?.id ?? index,
+    })
     virtualizer._willUpdate()
   }
-  const renderRows = (): Array<{ row: (typeof runtime.cachedRows)[number]; virtual: VirtualItem | null }> => {
-    void local.virtualVersion; syncVirtualizer(); const currentRows = rows()
-    const result = virtualMode() === 'tanstack' && runtime.virtualizer ? runtime.virtualizer.getVirtualItems().map((item) => ({ row: currentRows[item.index], virtual: item })) : currentRows.map((row) => ({ row, virtual: null }))
+  const renderRows = (): Array<{
+    row: (typeof runtime.cachedRows)[number]
+    virtual: VirtualItem | null
+  }> => {
+    void local.virtualVersion
+    syncVirtualizer()
+    const currentRows = rows()
+    const result =
+      virtualMode() === 'tanstack' && runtime.virtualizer
+        ? runtime.virtualizer
+            .getVirtualItems()
+            .map((item) => ({ row: currentRows[item.index], virtual: item }))
+        : currentRows.map((row) => ({ row, virtual: null }))
     queueMicrotask(() => controller.actions.setRenderedRowCount(result.length))
     return result
   }
-  const writeSizes = (tableElement: HTMLTableElement) => { for (const header of table.getFlatHeaders()) { tableElement.style.setProperty(`--header-${header.id}-size`, String(header.getSize())); tableElement.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize())) } tableElement.style.width = `${table.getTotalSize()}px` }
+  const writeSizes = (tableElement: HTMLTableElement) => {
+    for (const header of table.getFlatHeaders()) {
+      tableElement.style.setProperty(
+        `--header-${header.id}-size`,
+        String(header.getSize()),
+      )
+      tableElement.style.setProperty(
+        `--col-${header.column.id}-size`,
+        String(header.column.getSize()),
+      )
+    }
+    tableElement.style.width = `${table.getTotalSize()}px`
+  }
 
   return {
-    table, FlexRender, local, feed, controller, feedSampleRateOptions, configuratorOptions,
+    table,
+    FlexRender,
+    local,
+    feed,
+    controller,
+    feedSampleRateOptions,
+    configuratorOptions,
     init(this: { $refs: Record<string, HTMLElement> }) {
-      const scroll = this.$refs.scroll as HTMLDivElement; const tableElement = this.$refs.table as HTMLTableElement
-      runtime.virtualizer = new Virtualizer({ count: 0, getScrollElement: () => scroll, estimateSize: () => TRADING_ROW_HEIGHT, overscan: TRADING_ROW_OVERSCAN, observeElementRect, observeElementOffset, scrollToFn: elementScroll, onChange: () => { local.virtualVersion++ } })
+      const scroll = this.$refs.scroll as HTMLDivElement
+      const tableElement = this.$refs.table as HTMLTableElement
+      runtime.virtualizer = new Virtualizer({
+        count: 0,
+        getScrollElement: () => scroll,
+        estimateSize: () => TRADING_ROW_HEIGHT,
+        overscan: TRADING_ROW_OVERSCAN,
+        observeElementRect,
+        observeElementOffset,
+        scrollToFn: elementScroll,
+        onChange: () => {
+          local.virtualVersion++
+        },
+      })
       const stopVirtualizer = runtime.virtualizer._didMount()
-      const resizeObserver = new ResizeObserver(() => { if (runtime.manuallyResized) return; const width = table.getTotalSize(); if (scroll.clientWidth <= width + 1 || width <= 0) return; const ratio = scroll.clientWidth / width; table.setColumnSizing(Object.fromEntries(table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio]))) })
+      const resizeObserver = new ResizeObserver(() => {
+        if (runtime.manuallyResized) return
+        const width = table.getTotalSize()
+        if (scroll.clientWidth <= width + 1 || width <= 0) return
+        const ratio = scroll.clientWidth / width
+        table.setColumnSizing(
+          Object.fromEntries(
+            table
+              .getVisibleLeafColumns()
+              .map((column) => [column.id, column.getSize() * ratio]),
+          ),
+        )
+      })
       resizeObserver.observe(scroll)
-      const mutationObserver = new MutationObserver((records) => controller.monitor.recordDomMutations(records.length)); mutationObserver.observe(tableElement.tBodies[0], { attributes: true, characterData: true, childList: true, subtree: true })
+      const mutationObserver = new MutationObserver((records) =>
+        controller.monitor.recordDomMutations(records.length),
+      )
+      mutationObserver.observe(tableElement.tBodies[0], {
+        attributes: true,
+        characterData: true,
+        childList: true,
+        subtree: true,
+      })
       const subscriptions = [
-        feed.store.subscribe((state) => { local.feed = state; Alpine.nextTick(() => feed.completeRender()) }),
-        controller.store.subscribe((state) => { local.benchmark = state }),
-        controller.renderAtoms.selectedSymbol.subscribe((symbol) => { local.selectedSymbol = symbol }),
-        controller.renderAtoms.rendererMode.subscribe((mode) => { local.rendererMode = mode; local.tableVersion++ }),
-        table.store.subscribe(() => { local.tableVersion++ }),
+        feed.store.subscribe((state) => {
+          local.feed = state
+          Alpine.nextTick(() => feed.completeRender())
+        }),
+        controller.store.subscribe((state) => {
+          local.benchmark = state
+        }),
+        controller.renderAtoms.selectedSymbol.subscribe((symbol) => {
+          local.selectedSymbol = symbol
+        }),
+        controller.renderAtoms.rendererMode.subscribe((mode) => {
+          local.rendererMode = mode
+          local.tableVersion++
+        }),
+        table.store.subscribe(() => {
+          local.tableVersion++
+        }),
         table.atoms.columnSizing.subscribe(() => writeSizes(tableElement)),
         table.atoms.columnOrder.subscribe(() => writeSizes(tableElement)),
-        table.atoms.columnResizing.subscribe((state) => { if (state.isResizingColumn !== false) runtime.manuallyResized = true }),
+        table.atoms.columnResizing.subscribe((state) => {
+          if (state.isResizingColumn !== false) runtime.manuallyResized = true
+        }),
+      ]
+      const stopFeed = feed.start()
+      const stopBenchmark = controller.start()
+      runtime.cleanups.push(
+        stopVirtualizer,
+        stopFeed,
+        stopBenchmark,
+        () => resizeObserver.disconnect(),
+        () => mutationObserver.disconnect(),
+        ...subscriptions.map(
+          (subscription) => () => subscription.unsubscribe(),
+        ),
+      )
+      Alpine.nextTick(() => {
+        writeSizes(tableElement)
+        feed.completeRender()
+      })
+    },
+    destroy() {
+      for (const cleanup of runtime.cleanups) cleanup()
+      runtime.cleanups.length = 0
+    },
+    rows,
+    renderRows,
+    virtualMode,
+    tableHeight() {
+      void local.virtualVersion
+      return (
+        runtime.virtualizer?.getTotalSize() ??
+        rows().length * TRADING_ROW_HEIGHT
+      )
+    },
+    visibleRangeText() {
+      void local.virtualVersion
+      const range = runtime.virtualizer?.range
+      const currentRows = rows()
+      if (!range || virtualMode() !== 'tanstack' || !currentRows.length)
+        return 'Current · rows —'
+      return `Current · rows ${Math.min(range.startIndex, currentRows.length - 1)}..${Math.min(range.endIndex, currentRows.length - 1)}`
+    },
+    toggleSidebar() {
+      local.sidebarOpen = !local.sidebarOpen
+    },
+    feedStatus() {
+      return !local.feed.workerReady
+        ? 'FEED CONNECTING'
+        : local.feed.running
+          ? 'FEED LIVE'
+          : 'FEED PAUSED'
+    },
+    setInstrumentCount(event: Event) {
+      controller.actions.resetViewState()
+      feed.actions.setInstrumentCount(
+        Number((event.target as HTMLSelectElement).value),
+      )
+    },
+    sampleRateIndex() {
+      return feedSampleRateIndex(local.feed.targetTicksPerSecond)
+    },
+    setSampleRate(event: Event) {
+      feed.actions.setTargetRate(
+        feedSampleRateAt(Number((event.target as HTMLInputElement).value)),
+      )
+    },
+    setPublishInterval(event: Event) {
+      feed.actions.setPublishInterval(
+        Number((event.target as HTMLSelectElement).value),
+      )
+    },
+    setVirtualMode(event: Event) {
+      controller.actions.setVirtualScrollEnabled(
+        (event.target as HTMLSelectElement).value === 'tanstack',
+      )
+    },
+    setRendererMode(event: Event) {
+      controller.actions.setRendererMode(
+        (event.target as HTMLInputElement).checked ? 'swap' : 'stable',
+      )
+    },
+    setSparklineUpdates(event: Event) {
+      feed.actions.setSparklineUpdates(
+        (event.target as HTMLInputElement).checked,
+      )
+    },
+    setSparklineInterval(event: Event) {
+      feed.actions.setSparklineSampleInterval(
+        Number((event.target as HTMLSelectElement).value),
+      )
+    },
+    metricItems() {
+      const metrics = local.benchmark.metrics
+      return [
+        [
+          'WORKER SAMPLES',
+          rate.format(metrics.actualTicksPerSecond),
+          'generated samples/s',
+          'actual-rate',
+        ],
+        [
+          'ROW UPDATES',
+          rate.format(metrics.rowUpdatesPerSecond),
+          'unique rows applied/s',
+          'row-update-rate',
+        ],
+        [
+          'MESSAGES',
+          metrics.workerMessagesPerSecond.toFixed(1),
+          'worker messages/s',
+          'message-rate',
+        ],
+        [
+          'STATE APPLIES',
+          metrics.stateApplicationsPerSecond.toFixed(1),
+          'quote snapshots/s',
+          'state-apply-rate',
+        ],
+        [
+          'TABLE COMMITS',
+          metrics.tableRendersPerSecond.toFixed(1),
+          'completed renders/s',
+          'table-render-rate',
+        ],
+        ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
+        [
+          'P95 RENDER',
+          ms(metrics.p95RenderMs),
+          `max ${ms(metrics.maxRenderMs)}`,
+          '',
+        ],
+        [
+          'LONG FRAMES',
+          local.benchmark.longAnimationFramesSupported
+            ? String(metrics.longAnimationFrames)
+            : 'N/A',
+          local.benchmark.longAnimationFramesSupported
+            ? `worst ${ms(metrics.worstLongAnimationFrameMs)}`
+            : 'unsupported',
+          'long-frame-count',
+        ],
+      ]
+    },
+    diagnostics() {
+      const metrics = local.benchmark.metrics
+      const invocation = (items: typeof metrics.cellRendererRates) => {
+        const active = items.filter((item) => item.callsPerSecond > 0)
+        return active.length
+          ? active
+              .map((item) => `${item.name} ${rate.format(item.callsPerSecond)}`)
+              .join(' · ')
+          : '—'
+      }
+      return [
+        ['Mounted cells', integer.format(local.benchmark.mountedCells), ''],
+        ['Live components', integer.format(local.benchmark.liveComponents), ''],
+        [
+          'Created / destroyed',
+          `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`,
+          '',
+        ],
+        [
+          'Renderer callbacks / s',
+          rate.format(metrics.cellRendererCallsPerSecond),
+          'cell-render-rate',
+        ],
+        [
+          'Component executions / s',
+          rate.format(metrics.componentRenderCallsPerSecond),
+          'component-render-rate',
+        ],
+        [
+          'Executions by component / s',
+          invocation(metrics.componentRenderRates),
+          'component-render-breakdown',
+        ],
+        [
+          'Callbacks by column / s',
+          invocation(metrics.cellRendererRates),
+          'cell-render-breakdown',
+        ],
+        [
+          'DOM mutation records / s',
+          rate.format(metrics.domMutationsPerSecond),
+          'dom-mutation-rate',
+        ],
+        [
+          'Core row model calls / s',
+          metrics.rowModelCallsPerSecond.toFixed(1),
+          'row-model-call-rate',
+        ],
+        [
+          'Core row model avg / max',
+          `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`,
+          'row-model-duration',
+        ],
+        [
+          'Visible rows',
+          integer.format(metrics.visibleRows),
+          'visible-row-count',
+        ],
+        [
+          'Worker messages',
+          integer.format(metrics.workerMessages),
+          'worker-messages',
+        ],
+        [
+          'Worker-coalesced updates / s',
+          rate.format(metrics.supersededUpdatesPerSecond),
+          'superseded-update-rate',
+        ],
+        [
+          'Last samples / updated rows',
+          `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`,
+          '',
+        ],
+        ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''],
+        [
+          'JS heap',
+          metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`,
+          '',
+        ],
       ]
-      const stopFeed = feed.start(); const stopBenchmark = controller.start()
-      runtime.cleanups.push(stopVirtualizer, stopFeed, stopBenchmark, () => resizeObserver.disconnect(), () => mutationObserver.disconnect(), ...subscriptions.map((subscription) => () => subscription.unsubscribe()))
-      Alpine.nextTick(() => { writeSizes(tableElement); feed.completeRender() })
-    },
-    destroy() { for (const cleanup of runtime.cleanups) cleanup(); runtime.cleanups.length = 0 },
-    rows, renderRows, virtualMode,
-    tableHeight() { void local.virtualVersion; return runtime.virtualizer?.getTotalSize() ?? rows().length * TRADING_ROW_HEIGHT },
-    visibleRangeText() { void local.virtualVersion; const range = runtime.virtualizer?.range; const currentRows = rows(); if (!range || virtualMode() !== 'tanstack' || !currentRows.length) return 'Current · rows —'; return `Current · rows ${Math.min(range.startIndex, currentRows.length - 1)}..${Math.min(range.endIndex, currentRows.length - 1)}` },
-    toggleSidebar() { local.sidebarOpen = !local.sidebarOpen },
-    feedStatus() { return !local.feed.workerReady ? 'FEED CONNECTING' : local.feed.running ? 'FEED LIVE' : 'FEED PAUSED' },
-    setInstrumentCount(event: Event) { controller.actions.resetViewState(); feed.actions.setInstrumentCount(Number((event.target as HTMLSelectElement).value)) },
-    sampleRateIndex() { return feedSampleRateIndex(local.feed.targetTicksPerSecond) },
-    setSampleRate(event: Event) { feed.actions.setTargetRate(feedSampleRateAt(Number((event.target as HTMLInputElement).value))) },
-    setPublishInterval(event: Event) { feed.actions.setPublishInterval(Number((event.target as HTMLSelectElement).value)) },
-    setVirtualMode(event: Event) { controller.actions.setVirtualScrollEnabled((event.target as HTMLSelectElement).value === 'tanstack') },
-    setRendererMode(event: Event) { controller.actions.setRendererMode((event.target as HTMLInputElement).checked ? 'swap' : 'stable') },
-    setSparklineUpdates(event: Event) { feed.actions.setSparklineUpdates((event.target as HTMLInputElement).checked) },
-    setSparklineInterval(event: Event) { feed.actions.setSparklineSampleInterval(Number((event.target as HTMLSelectElement).value)) },
-    metricItems() { const metrics = local.benchmark.metrics; return [
-      ['WORKER SAMPLES', rate.format(metrics.actualTicksPerSecond), 'generated samples/s', 'actual-rate'], ['ROW UPDATES', rate.format(metrics.rowUpdatesPerSecond), 'unique rows applied/s', 'row-update-rate'], ['MESSAGES', metrics.workerMessagesPerSecond.toFixed(1), 'worker messages/s', 'message-rate'], ['STATE APPLIES', metrics.stateApplicationsPerSecond.toFixed(1), 'quote snapshots/s', 'state-apply-rate'], ['TABLE COMMITS', metrics.tableRendersPerSecond.toFixed(1), 'completed renders/s', 'table-render-rate'], ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''], ['P95 RENDER', ms(metrics.p95RenderMs), `max ${ms(metrics.maxRenderMs)}`, ''], ['LONG FRAMES', local.benchmark.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', local.benchmark.longAnimationFramesSupported ? `worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
-    ] },
-    diagnostics() { const metrics = local.benchmark.metrics; const invocation = (items: typeof metrics.cellRendererRates) => { const active = items.filter((item) => item.callsPerSecond > 0); return active.length ? active.map((item) => `${item.name} ${rate.format(item.callsPerSecond)}`).join(' · ') : '—' }; return [
-      ['Mounted cells', integer.format(local.benchmark.mountedCells), ''], ['Live components', integer.format(local.benchmark.liveComponents), ''], ['Created / destroyed', `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`, ''], ['Renderer callbacks / s', rate.format(metrics.cellRendererCallsPerSecond), 'cell-render-rate'], ['Component executions / s', rate.format(metrics.componentRenderCallsPerSecond), 'component-render-rate'], ['Executions by component / s', invocation(metrics.componentRenderRates), 'component-render-breakdown'], ['Callbacks by column / s', invocation(metrics.cellRendererRates), 'cell-render-breakdown'], ['DOM mutation records / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'], ['Core row model calls / s', metrics.rowModelCallsPerSecond.toFixed(1), 'row-model-call-rate'], ['Core row model avg / max', `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, 'row-model-duration'], ['Visible rows', integer.format(metrics.visibleRows), 'visible-row-count'], ['Worker messages', integer.format(metrics.workerMessages), 'worker-messages'], ['Worker-coalesced updates / s', rate.format(metrics.supersededUpdatesPerSecond), 'superseded-update-rate'], ['Last samples / updated rows', `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`, ''], ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''], ['JS heap', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, ''],
-    ] },
-    selectedQuote() { return feed.getQuoteBySymbol(local.feed.quotes, local.selectedSymbol) },
-    formatInteger: (number: number) => integer.format(number), formatRate: (number: number) => rate.format(number),
-    sortIndicator, sortAriaValue,
-    isTextColumn(id: string) { return ['market', 'name', 'symbol'].includes(id) },
-    onGridKeyDown(event: KeyboardEvent) { handleCellNavigation(table, event) },
-    onBodyMouseDown(event: MouseEvent) { pointer.handleMouseDown(table, event, controller.actions.selectSymbol) }, onBodyPointerOver(event: MouseEvent) { pointer.handlePointerOver(table, event) }, onBodyClick(event: MouseEvent) { pointer.handleClick(table, event) }, resetPointer() { pointer.resetPointerCell() },
-    clearDrag() { runtime.dragSource?.classList.remove('is-column-dragging'); runtime.dragTarget?.classList.remove('is-column-drop-target'); runtime.dragColumnId = null; runtime.dragSource = null; runtime.dragTarget = null },
-    dragStart(header: ReturnType<Table['getFlatHeaders']>[number], event: DragEvent) { runtime.dragColumnId = header.column.id; runtime.dragSource = (event.currentTarget as HTMLElement).closest('th'); runtime.dragSource?.classList.add('is-column-dragging'); if (event.dataTransfer) { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', header.column.id) } },
-    dragOver(header: ReturnType<Table['getFlatHeaders']>[number], event: DragEvent) { event.preventDefault(); runtime.dragTarget?.classList.remove('is-column-drop-target'); runtime.dragTarget = null; const element = (event.currentTarget as HTMLElement).closest('th'); if (runtime.dragColumnId !== header.column.id && element) { element.classList.add('is-column-drop-target'); runtime.dragTarget = element } },
-    drop(header: ReturnType<Table['getFlatHeaders']>[number], event: DragEvent) { event.preventDefault(); const source = event.dataTransfer?.getData('text/plain') || runtime.dragColumnId; if (source) table.setColumnOrder(reorderColumnIds(table.getVisibleLeafColumns().map((column) => column.id), source, header.column.id)); this.clearDrag() },
+    },
+    selectedQuote() {
+      return feed.getQuoteBySymbol(local.feed.quotes, local.selectedSymbol)
+    },
+    formatInteger: (number: number) => integer.format(number),
+    formatRate: (number: number) => rate.format(number),
+    sortIndicator,
+    sortAriaValue,
+    isTextColumn(id: string) {
+      return ['market', 'name', 'symbol'].includes(id)
+    },
+    onGridKeyDown(event: KeyboardEvent) {
+      handleCellNavigation(table, event)
+    },
+    onBodyMouseDown(event: MouseEvent) {
+      pointer.handleMouseDown(table, event, controller.actions.selectSymbol)
+    },
+    onBodyPointerOver(event: MouseEvent) {
+      pointer.handlePointerOver(table, event)
+    },
+    onBodyClick(event: MouseEvent) {
+      pointer.handleClick(table, event)
+    },
+    resetPointer() {
+      pointer.resetPointerCell()
+    },
+    clearDrag() {
+      runtime.dragSource?.classList.remove('is-column-dragging')
+      runtime.dragTarget?.classList.remove('is-column-drop-target')
+      runtime.dragColumnId = null
+      runtime.dragSource = null
+      runtime.dragTarget = null
+    },
+    dragStart(
+      header: ReturnType<Table['getFlatHeaders']>[number],
+      event: DragEvent,
+    ) {
+      runtime.dragColumnId = header.column.id
+      runtime.dragSource = (event.currentTarget as HTMLElement).closest('th')
+      runtime.dragSource?.classList.add('is-column-dragging')
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('text/plain', header.column.id)
+      }
+    },
+    dragOver(
+      header: ReturnType<Table['getFlatHeaders']>[number],
+      event: DragEvent,
+    ) {
+      event.preventDefault()
+      runtime.dragTarget?.classList.remove('is-column-drop-target')
+      runtime.dragTarget = null
+      const element = (event.currentTarget as HTMLElement).closest('th')
+      if (runtime.dragColumnId !== header.column.id && element) {
+        element.classList.add('is-column-drop-target')
+        runtime.dragTarget = element
+      }
+    },
+    drop(
+      header: ReturnType<Table['getFlatHeaders']>[number],
+      event: DragEvent,
+    ) {
+      event.preventDefault()
+      const source =
+        event.dataTransfer?.getData('text/plain') || runtime.dragColumnId
+      if (source)
+        table.setColumnOrder(
+          reorderColumnIds(
+            table.getVisibleLeafColumns().map((column) => column.id),
+            source,
+            header.column.id,
+          ),
+        )
+      this.clearDrag()
+    },
   }
 })
 
diff --git a/examples/alpine/realtime-trading/src/table/table-config/quote-cells.ts b/examples/alpine/realtime-trading/src/table/table-config/quote-cells.ts
index 5c0db04c70..b5f115e28f 100644
--- a/examples/alpine/realtime-trading/src/table/table-config/quote-cells.ts
+++ b/examples/alpine/realtime-trading/src/table/table-config/quote-cells.ts
@@ -1,57 +1,145 @@
 export const quoteCellLifecycle = { created: 0, destroyed: 0 }
-export const quoteCellRendererNames = ['Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid', 'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday'] as const
-export const quoteComponentNames = ['PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell', 'PercentChangeCell', 'SparklineCell'] as const
+export const quoteCellRendererNames = [
+  'Market',
+  'Name',
+  'Symbol',
+  'Last',
+  'Change',
+  'ChangePercent',
+  'Bid',
+  'BidVolume',
+  'Ask',
+  'AskVolume',
+  'Open',
+  'High',
+  'Low',
+  'Intraday',
+] as const
+export const quoteComponentNames = [
+  'PriceCell',
+  'StableMoveCell',
+  'UpMoveCell',
+  'DownMoveCell',
+  'PercentChangeCell',
+  'SparklineCell',
+] as const
 export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
 export type QuoteComponentName = (typeof quoteComponentNames)[number]
-const counters = <Name extends string>(names: ReadonlyArray<Name>) => Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
-export const quoteRenderDiagnostics = { cellRendererCalls: 0, componentRenderCalls: 0, cellRendererCallsByName: counters(quoteCellRendererNames), componentRenderCallsByName: counters(quoteComponentNames) }
-export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T { quoteRenderDiagnostics.cellRendererCalls++; quoteRenderDiagnostics.cellRendererCallsByName[name]++; return value }
+const counters = <Name extends string>(names: ReadonlyArray<Name>) =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+export const quoteRenderDiagnostics = {
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
+  cellRendererCallsByName: counters(quoteCellRendererNames),
+  componentRenderCallsByName: counters(quoteComponentNames),
+}
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value
+}
 const signed = (value: number) => `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
 
 abstract class QuoteElement extends HTMLElement {
   protected abstract readonly componentName: QuoteComponentName
-  connectedCallback() { quoteCellLifecycle.created++; this.renderCell() }
-  disconnectedCallback() { quoteCellLifecycle.destroyed++ }
-  attributeChangedCallback() { if (this.isConnected) this.renderCell() }
-  protected renderCell() { quoteRenderDiagnostics.componentRenderCalls++; quoteRenderDiagnostics.componentRenderCallsByName[this.componentName]++ }
-  protected number(name: string) { return Number(this.getAttribute(name) ?? 0) }
+  connectedCallback() {
+    quoteCellLifecycle.created++
+    this.renderCell()
+  }
+  disconnectedCallback() {
+    quoteCellLifecycle.destroyed++
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this.renderCell()
+  }
+  protected renderCell() {
+    quoteRenderDiagnostics.componentRenderCalls++
+    quoteRenderDiagnostics.componentRenderCallsByName[this.componentName]++
+  }
+  protected number(name: string) {
+    return Number(this.getAttribute(name) ?? 0)
+  }
 }
 
 class PriceCell extends QuoteElement {
   protected readonly componentName = 'PriceCell'
   static observedAttributes = ['price', 'move']
-  protected renderCell() { super.renderCell(); const price = this.number('price'); const move = this.number('move'); this.innerHTML = `<button class="price-button ${move >= 0 ? 'quote-up' : 'quote-down'}">${price.toFixed(2)}</button>` }
+  protected renderCell() {
+    super.renderCell()
+    const price = this.number('price')
+    const move = this.number('move')
+    this.innerHTML = `<button class="price-button ${move >= 0 ? 'quote-up' : 'quote-down'}">${price.toFixed(2)}</button>`
+  }
 }
 abstract class MoveCell extends QuoteElement {
   static observedAttributes = ['move']
   protected direction: 'up' | 'down' | null = null
   protected indicator = ''
-  protected renderCell() { super.renderCell(); const move = this.number('move'); const direction = this.direction ?? (move >= 0 ? 'up' : 'down'); this.innerHTML = `<span class="move-cell quote-${direction}">${this.indicator}${signed(move)}</span>` }
+  protected renderCell() {
+    super.renderCell()
+    const move = this.number('move')
+    const direction = this.direction ?? (move >= 0 ? 'up' : 'down')
+    this.innerHTML = `<span class="move-cell quote-${direction}">${this.indicator}${signed(move)}</span>`
+  }
+}
+class StableMoveCell extends MoveCell {
+  protected readonly componentName = 'StableMoveCell'
+}
+class UpMoveCell extends MoveCell {
+  protected readonly componentName = 'UpMoveCell'
+  protected direction = 'up' as const
+  protected indicator = '▲ '
+}
+class DownMoveCell extends MoveCell {
+  protected readonly componentName = 'DownMoveCell'
+  protected direction = 'down' as const
+  protected indicator = '▼ '
 }
-class StableMoveCell extends MoveCell { protected readonly componentName = 'StableMoveCell' }
-class UpMoveCell extends MoveCell { protected readonly componentName = 'UpMoveCell'; protected direction = 'up' as const; protected indicator = '▲ ' }
-class DownMoveCell extends MoveCell { protected readonly componentName = 'DownMoveCell'; protected direction = 'down' as const; protected indicator = '▼ ' }
 class PercentChangeCell extends QuoteElement {
   protected readonly componentName = 'PercentChangeCell'
   static observedAttributes = ['value']
-  protected renderCell() { super.renderCell(); const value = this.number('value'); this.innerHTML = `<span class="percent-change-cell ${value >= 0 ? 'quote-up' : 'quote-down'}">${signed(value)}%</span>` }
+  protected renderCell() {
+    super.renderCell()
+    const value = this.number('value')
+    this.innerHTML = `<span class="percent-change-cell ${value >= 0 ? 'quote-up' : 'quote-down'}">${signed(value)}%</span>`
+  }
 }
 class SparklineCell extends QuoteElement {
   protected readonly componentName = 'SparklineCell'
   static observedAttributes = ['points', 'rising']
-  protected renderCell() { super.renderCell(); this.innerHTML = `<svg class="sparkline ${this.getAttribute('rising') === 'true' ? 'quote-up' : 'quote-down'}" viewBox="0 0 100 24" preserveAspectRatio="none"><polyline points="${this.getAttribute('points') ?? ''}"></polyline></svg>` }
+  protected renderCell() {
+    super.renderCell()
+    this.innerHTML = `<svg class="sparkline ${this.getAttribute('rising') === 'true' ? 'quote-up' : 'quote-down'}" viewBox="0 0 100 24" preserveAspectRatio="none"><polyline points="${this.getAttribute('points') ?? ''}"></polyline></svg>`
+  }
 }
 
 const definitions = [
-  ['quote-price-cell', PriceCell], ['quote-stable-move', StableMoveCell], ['quote-up-move', UpMoveCell],
-  ['quote-down-move', DownMoveCell], ['quote-percent-change', PercentChangeCell], ['quote-sparkline', SparklineCell],
+  ['quote-price-cell', PriceCell],
+  ['quote-stable-move', StableMoveCell],
+  ['quote-up-move', UpMoveCell],
+  ['quote-down-move', DownMoveCell],
+  ['quote-percent-change', PercentChangeCell],
+  ['quote-sparkline', SparklineCell],
 ] as const
-for (const [name, definition] of definitions) if (!customElements.get(name)) customElements.define(name, definition)
+for (const [name, definition] of definitions)
+  if (!customElements.get(name)) customElements.define(name, definition)
 
 export function sparklineMarkup(values: ReadonlyArray<number>): string {
   const first = values[0] ?? 0
-  const range = values.reduce((current, value) => ({ min: Math.min(current.min, value), max: Math.max(current.max, value) }), { min: first, max: first })
-  const height = range.max - range.min || 1; const denominator = Math.max(1, values.length - 1)
-  const points = values.map((value, index) => `${((index / denominator) * 100).toFixed(1)},${(22 - ((value - range.min) / height) * 20).toFixed(1)}`).join(' ')
+  const range = values.reduce(
+    (current, value) => ({
+      min: Math.min(current.min, value),
+      max: Math.max(current.max, value),
+    }),
+    { min: first, max: first },
+  )
+  const height = range.max - range.min || 1
+  const denominator = Math.max(1, values.length - 1)
+  const points = values
+    .map(
+      (value, index) =>
+        `${((index / denominator) * 100).toFixed(1)},${(22 - ((value - range.min) / height) * 20).toFixed(1)}`,
+    )
+    .join(' ')
   return `<quote-sparkline points="${points}" rising="${(values.at(-1) ?? 0) >= first}"></quote-sparkline>`
 }
diff --git a/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts b/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
index 412ba2faad..fb503b8460 100644
--- a/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
+++ b/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
@@ -3,42 +3,239 @@ import type { ColumnDef, TableFeatures } from '@tanstack/alpine-table'
 import type { MarketQuote } from '../../feed/market-data'
 
 export type RendererMode = 'stable' | 'swap'
-export interface CoreTableState { sorting: Array<{ id: string; desc: boolean }>; columnFilters: Array<{ id: string; value: unknown }> }
-interface CellContext { row: { original: MarketQuote } }
-interface Definition { id: string; header: string; size?: number; columns?: Array<Definition>; accessorFn?: (row: MarketQuote) => unknown; enableSorting?: boolean; filterFn?: 'includesString'; sortFn?: 'basic'; cell?: (context: CellContext) => unknown }
-const compact = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
-const safe = (value: string) => value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;')
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+interface CellContext {
+  row: { original: MarketQuote }
+}
+interface Definition {
+  id: string
+  header: string
+  size?: number
+  columns?: Array<Definition>
+  accessorFn?: (row: MarketQuote) => unknown
+  enableSorting?: boolean
+  filterFn?: 'includesString'
+  sortFn?: 'basic'
+  cell?: (context: CellContext) => unknown
+}
+const compact = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+const safe = (value: string) =>
+  value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
 
-export function createTradingColumns<TFeatures extends TableFeatures>(getRendererMode: () => RendererMode): Array<ColumnDef<TFeatures, MarketQuote>> {
+export function createTradingColumns<TFeatures extends TableFeatures>(
+  getRendererMode: () => RendererMode,
+): Array<ColumnDef<TFeatures, MarketQuote>> {
   const columns: Array<Definition> = [
-    { id: 'instrument', header: 'Instrument', columns: [
-      { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', safe(row.original.venue)) },
-      { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', safe(row.original.company)) },
-      { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', safe(row.original.symbol)) },
-    ] },
-    { id: 'priceAndChange', header: 'Price & Change', columns: [
-      { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: ({ row }) => recordCellRender('Last', `<quote-price-cell price="${row.original.price}" move="${getDayChange(row.original)}"></quote-price-cell>`) },
-      { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', moveMarkup(getRendererMode(), getDayChange(row.original))) },
-      { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: ({ row }) => recordCellRender('ChangePercent', `<quote-percent-change value="${getDayChangePercent(row.original)}"></quote-percent-change>`) },
-    ] },
-    { id: 'orderBook', header: 'Order Book', columns: [
-      { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
-      { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compact.format(row.original.bidSize)) },
-      { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
-      { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compact.format(row.original.askSize)) },
-    ] },
-    { id: 'session', header: 'Session', columns: [
-      { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
-      { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
-      { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
-    ] },
-    { id: 'chart', header: 'Chart', columns: [{ id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: ({ row }) => recordCellRender('Intraday', sparklineMarkup(row.original.history)) }] },
+    {
+      id: 'instrument',
+      header: 'Instrument',
+      columns: [
+        {
+          id: 'market',
+          header: 'Market',
+          size: 72,
+          accessorFn: (row) => row.venue,
+          cell: ({ row }) =>
+            recordCellRender('Market', safe(row.original.venue)),
+        },
+        {
+          id: 'name',
+          header: 'Name',
+          size: 180,
+          accessorFn: (row) => row.company,
+          cell: ({ row }) =>
+            recordCellRender('Name', safe(row.original.company)),
+        },
+        {
+          id: 'symbol',
+          header: 'Symbol',
+          size: 92,
+          accessorFn: (row) => row.symbol,
+          filterFn: 'includesString',
+          cell: ({ row }) =>
+            recordCellRender('Symbol', safe(row.original.symbol)),
+        },
+      ],
+    },
+    {
+      id: 'priceAndChange',
+      header: 'Price & Change',
+      columns: [
+        {
+          id: 'price',
+          header: 'Price',
+          size: 96,
+          accessorFn: (row) => row.price,
+          sortFn: 'basic',
+          cell: ({ row }) =>
+            recordCellRender(
+              'Last',
+              `<quote-price-cell price="${row.original.price}" move="${getDayChange(row.original)}"></quote-price-cell>`,
+            ),
+        },
+        {
+          id: 'change',
+          header: 'Chg',
+          size: 94,
+          accessorFn: getDayChange,
+          cell: ({ row }) =>
+            recordCellRender(
+              'Change',
+              moveMarkup(getRendererMode(), getDayChange(row.original)),
+            ),
+        },
+        {
+          id: 'changePercent',
+          header: 'Chg%',
+          size: 90,
+          accessorFn: getDayChangePercent,
+          cell: ({ row }) =>
+            recordCellRender(
+              'ChangePercent',
+              `<quote-percent-change value="${getDayChangePercent(row.original)}"></quote-percent-change>`,
+            ),
+        },
+      ],
+    },
+    {
+      id: 'orderBook',
+      header: 'Order Book',
+      columns: [
+        {
+          id: 'bid',
+          header: 'Bid',
+          size: 90,
+          accessorFn: (row) => row.bid,
+          cell: ({ row }) =>
+            recordCellRender('Bid', row.original.bid.toFixed(2)),
+        },
+        {
+          id: 'bidSize',
+          header: 'Bid Vol',
+          size: 100,
+          accessorFn: (row) => row.bidSize,
+          cell: ({ row }) =>
+            recordCellRender('BidVolume', compact.format(row.original.bidSize)),
+        },
+        {
+          id: 'ask',
+          header: 'Ask',
+          size: 90,
+          accessorFn: (row) => row.ask,
+          cell: ({ row }) =>
+            recordCellRender('Ask', row.original.ask.toFixed(2)),
+        },
+        {
+          id: 'askSize',
+          header: 'Ask Vol',
+          size: 100,
+          accessorFn: (row) => row.askSize,
+          cell: ({ row }) =>
+            recordCellRender('AskVolume', compact.format(row.original.askSize)),
+        },
+      ],
+    },
+    {
+      id: 'session',
+      header: 'Session',
+      columns: [
+        {
+          id: 'open',
+          header: 'Open',
+          size: 90,
+          accessorFn: (row) => row.open,
+          cell: ({ row }) =>
+            recordCellRender('Open', row.original.open.toFixed(2)),
+        },
+        {
+          id: 'high',
+          header: 'High',
+          size: 90,
+          accessorFn: (row) => row.high,
+          cell: ({ row }) =>
+            recordCellRender('High', row.original.high.toFixed(2)),
+        },
+        {
+          id: 'low',
+          header: 'Low',
+          size: 90,
+          accessorFn: (row) => row.low,
+          cell: ({ row }) =>
+            recordCellRender('Low', row.original.low.toFixed(2)),
+        },
+      ],
+    },
+    {
+      id: 'chart',
+      header: 'Chart',
+      columns: [
+        {
+          id: 'history',
+          header: 'Intraday',
+          size: 150,
+          enableSorting: false,
+          cell: ({ row }) =>
+            recordCellRender('Intraday', sparklineMarkup(row.original.history)),
+        },
+      ],
+    },
   ]
   return columns as unknown as Array<ColumnDef<TFeatures, MarketQuote>>
 }
-function moveMarkup(mode: RendererMode, move: number) { if (mode === 'stable') return `<quote-stable-move move="${move}"></quote-stable-move>`; return move >= 0 ? `<quote-up-move move="${move}"></quote-up-move>` : `<quote-down-move move="${move}"></quote-down-move>` }
-export const rowModelDiagnostics = { hasMeasurement: false, calls: 0, totalDurationMs: 0, maxDurationMs: 0, lastRowCount: 0 }
+function moveMarkup(mode: RendererMode, move: number) {
+  if (mode === 'stable')
+    return `<quote-stable-move move="${move}"></quote-stable-move>`
+  return move >= 0
+    ? `<quote-up-move move="${move}"></quote-up-move>`
+    : `<quote-down-move move="${move}"></quote-down-move>`
+}
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
 export const TRADING_COLUMN_COUNT = 14
-export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> { const start = performance.now(); const rows = readRows(); const end = performance.now(); const duration = end - start; rowModelDiagnostics.calls++; rowModelDiagnostics.hasMeasurement = true; rowModelDiagnostics.totalDurationMs += duration; rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration); rowModelDiagnostics.lastRowCount = rows.length; try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* optional */ } return rows }
-export function getDayChange(quote: MarketQuote): number { return quote.price - quote.previousClose }
-export function getDayChangePercent(quote: MarketQuote): number { return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100 }
+export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(
+    rowModelDiagnostics.maxDurationMs,
+    duration,
+  )
+  rowModelDiagnostics.lastRowCount = rows.length
+  try {
+    performance.measure('tanstack-row-model', {
+      start,
+      end,
+      detail: { rowCount: rows.length },
+    })
+  } catch {
+    /* optional */
+  }
+  return rows
+}
+export function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+export function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/alpine/realtime-trading/src/table/trading-table.ts b/examples/alpine/realtime-trading/src/table/trading-table.ts
index 3b6ca3f800..77e4e6bee1 100644
--- a/examples/alpine/realtime-trading/src/table/trading-table.ts
+++ b/examples/alpine/realtime-trading/src/table/trading-table.ts
@@ -1,3 +1,9 @@
-export { TRADING_COLUMN_COUNT, rowModelDiagnostics } from './table-config/trading-columns'
-export type { CoreTableState, RendererMode } from './table-config/trading-columns'
+export {
+  TRADING_COLUMN_COUNT,
+  rowModelDiagnostics,
+} from './table-config/trading-columns'
+export type {
+  CoreTableState,
+  RendererMode,
+} from './table-config/trading-columns'
 export type { VirtualScrollMode } from './trading-row-virtualizer'
diff --git a/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts b/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
index 82c6d5eb93..ccbd8fedc5 100644
--- a/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
@@ -56,7 +56,9 @@ test('runs the Alpine realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
diff --git a/examples/alpine/realtime-trading/tsconfig.json b/examples/alpine/realtime-trading/tsconfig.json
index a91b658954..4986527dc3 100644
--- a/examples/alpine/realtime-trading/tsconfig.json
+++ b/examples/alpine/realtime-trading/tsconfig.json
@@ -1,4 +1,19 @@
 {
-  "compilerOptions": { "target": "ES2022", "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "types": ["vite/client"] },
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client"]
+  },
   "include": ["src", "tests/e2e", "vite.config.ts"]
 }
diff --git a/examples/angular/realtime-trading/README.md b/examples/angular/realtime-trading/README.md
index d72b32aa91..54e1fb5e5a 100644
--- a/examples/angular/realtime-trading/README.md
+++ b/examples/angular/realtime-trading/README.md
@@ -32,17 +32,17 @@ so its absolute timings should not be compared with a production build.
 
 ## Directory structure
 
-| Path | Responsibility |
-| --- | --- |
-| `src/app/feed/` | Market types, the instrument universe, feed configuration, immutable update helpers, and the Angular feed service. |
-| `src/app/feed/worker/` | Worker protocol, deterministic market engine, and the module Web Worker that generates and publishes quote updates. |
-| `src/app/benchmark/` | Performance monitor and the controller that connects feed lifecycle events to UI diagnostics. |
-| `src/app/shell/` | Full-viewport layout, header, metrics strip, sidebar configurator, selected-instrument panel, diagnostics, and status bar. |
-| `src/app/table/table-config/` | Grouped column definitions and custom quote cell components. |
-| `src/app/table/view/` | Header component plus table-level selection and cell host directives. |
-| `src/app/table/` | Current table, table interactions, initial column fitting, and the TanStack Virtual integration. |
-| `src/app/table/worker/` | Optional experimental table-worker implementation and its row-model worker. |
-| `src/app/app.ts` | Composition root; it projects only the selected table implementation into the shell. |
+| Path                          | Responsibility                                                                                                             |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `src/app/feed/`               | Market types, the instrument universe, feed configuration, immutable update helpers, and the Angular feed service.         |
+| `src/app/feed/worker/`        | Worker protocol, deterministic market engine, and the module Web Worker that generates and publishes quote updates.        |
+| `src/app/benchmark/`          | Performance monitor and the controller that connects feed lifecycle events to UI diagnostics.                              |
+| `src/app/shell/`              | Full-viewport layout, header, metrics strip, sidebar configurator, selected-instrument panel, diagnostics, and status bar. |
+| `src/app/table/table-config/` | Grouped column definitions and custom quote cell components.                                                               |
+| `src/app/table/view/`         | Header component plus table-level selection and cell host directives.                                                      |
+| `src/app/table/`              | Current table, table interactions, initial column fitting, and the TanStack Virtual integration.                           |
+| `src/app/table/worker/`       | Optional experimental table-worker implementation and its row-model worker.                                                |
+| `src/app/app.ts`              | Composition root; it projects only the selected table implementation into the shell.                                       |
 
 The feed, benchmark, shell, and table layers are deliberately separate. The
 feed can run without the benchmark monitor, and shell components inject only
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.html b/examples/angular/realtime-trading/src/app/shell/configurator.html
index 49f2784c0d..028f67684d 100644
--- a/examples/angular/realtime-trading/src/app/shell/configurator.html
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.html
@@ -109,7 +109,8 @@ <h2 id="render-settings">RENDER PATH</h2>
         @if (controller.virtualScrollForced()) {
           TanStack Virtual is required and locked at 1,500 or more rows.
         } @else {
-          Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.
+          Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and
+          remains selectable.
         }
       </small>
     </label>
diff --git a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
index fc8df87c31..00392e14d6 100644
--- a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
@@ -58,7 +58,9 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
@@ -187,7 +189,9 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await expect(page.getByText('ROW MODEL WORKER ON')).toBeVisible()
     await expect(table.locator('tbody tr')).toHaveCount(100)
     await instrumentCount.selectOption('1500')
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await instrumentCount.selectOption('100')
     await expect(table.locator('tbody tr')).toHaveCount(100)
     await page.getByTestId('feed-toggle').click()
@@ -206,7 +210,9 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
 
     await expect(tableWorker).toBeEnabled()
     await instrumentCount.selectOption('1500')
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toBeVisible()
     const firstPrice = table.locator('tbody tr').first().getByRole('button')
     const priceBeforeUpdate = await firstPrice.textContent()
diff --git a/examples/ember/realtime-trading/README.md b/examples/ember/realtime-trading/README.md
index a7a6082eb9..62e8a0f096 100644
--- a/examples/ember/realtime-trading/README.md
+++ b/examples/ember/realtime-trading/README.md
@@ -24,17 +24,17 @@ build for performance recordings.
 
 ## Structure and ownership
 
-| Path | Responsibility |
-| --- | --- |
-| `app/feed/` | Market model, instrument universe, configuration, immutable update helpers, and Store-backed feed controller. |
-| `app/feed/worker/` | Typed protocol, deterministic engine, and module worker. |
-| `app/benchmark/` | Browser monitor and benchmark controller. |
-| `app/components/shell/` | GTS header, metrics, configurator, diagnostics, selected instrument, status bar, and shell layout. |
-| `app/components/table/` | Trading table Glimmer component. |
-| `app/table/table-config/` | Grouped columns and custom GTS quote components. |
-| `app/table/` | Table construction, features, delegated interactions, and Virtual Core integration. |
-| `app/utils/subscriptions.ts` | Owner-bound Store subscription and cleanup helpers. |
-| `app/templates/application.gts` | Creates feed/benchmark controllers and composes the shell. |
+| Path                            | Responsibility                                                                                                |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `app/feed/`                     | Market model, instrument universe, configuration, immutable update helpers, and Store-backed feed controller. |
+| `app/feed/worker/`              | Typed protocol, deterministic engine, and module worker.                                                      |
+| `app/benchmark/`                | Browser monitor and benchmark controller.                                                                     |
+| `app/components/shell/`         | GTS header, metrics, configurator, diagnostics, selected instrument, status bar, and shell layout.            |
+| `app/components/table/`         | Trading table Glimmer component.                                                                              |
+| `app/table/table-config/`       | Grouped columns and custom GTS quote components.                                                              |
+| `app/table/`                    | Table construction, features, delegated interactions, and Virtual Core integration.                           |
+| `app/utils/subscriptions.ts`    | Owner-bound Store subscription and cleanup helpers.                                                           |
+| `app/templates/application.gts` | Creates feed/benchmark controllers and composes the shell.                                                    |
 
 `MarketFeedController` owns worker/feed state. `TradingBenchmarkController`
 observes feed lifecycle callbacks and owns diagnostic/view state. The
diff --git a/examples/ember/realtime-trading/app/components/shell/app-header.gts b/examples/ember/realtime-trading/app/components/shell/app-header.gts
index 294c9140c0..9ffe6241ff 100644
--- a/examples/ember/realtime-trading/app/components/shell/app-header.gts
+++ b/examples/ember/realtime-trading/app/components/shell/app-header.gts
@@ -3,7 +3,10 @@ import { tracked } from '@glimmer/tracking'
 import { on } from '@ember/modifier'
 import { observeValue } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
-import type { MarketFeedController, MarketFeedState } from '../../feed/market-feed-controller'
+import type {
+  MarketFeedController,
+  MarketFeedState,
+} from '../../feed/market-feed-controller'
 
 interface Signature {
   Args: {
@@ -18,20 +21,50 @@ export default class AppHeader extends Component<Signature> {
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
     this.feedState = args.feed.store.get()
-    observeValue(this, args.feed.store, (state) => { this.feedState = state })
+    observeValue(this, args.feed.store, (state) => {
+      this.feedState = state
+    })
   }
   get status() {
-    return !this.feedState.workerReady ? 'FEED CONNECTING' : this.feedState.running ? 'FEED LIVE' : 'FEED PAUSED'
+    return !this.feedState.workerReady
+      ? 'FEED CONNECTING'
+      : this.feedState.running
+        ? 'FEED LIVE'
+        : 'FEED PAUSED'
   }
   <template>
     <header class='app-bar'>
       <div class='brand'><strong>MARKET MONITOR</strong></div>
       <div class='header-actions'>
-        <span class='feed-status {{if (and this.feedState.workerReady this.feedState.running) "is-running"}}' data-testid='feed-status'>
+        <span
+          class='feed-status
+            {{if
+              (and this.feedState.workerReady this.feedState.running)
+              "is-running"
+            }}'
+          data-testid='feed-status'
+        >
           <span class='status-dot' aria-hidden='true'></span>{{this.status}}
         </span>
-        <button class='sidebar-toggle' type='button' aria-expanded={{@sidebarOpen}} aria-controls='benchmark-configurator' aria-label={{if @sidebarOpen 'Close configurator' 'Open configurator'}} {{on 'click' @toggleSidebar}}>
-          <svg viewBox='0 0 20 20' aria-hidden='true'><rect x='2.5' y='3' width='15' height='14' rx='1.5'></rect><path d='M12.5 3v14'></path></svg>
+        <button
+          class='sidebar-toggle'
+          type='button'
+          aria-expanded={{@sidebarOpen}}
+          aria-controls='benchmark-configurator'
+          aria-label={{if
+            @sidebarOpen
+            'Close configurator'
+            'Open configurator'
+          }}
+          {{on 'click' @toggleSidebar}}
+        >
+          <svg viewBox='0 0 20 20' aria-hidden='true'><rect
+              x='2.5'
+              y='3'
+              width='15'
+              height='14'
+              rx='1.5'
+            ></rect><path d='M12.5 3v14'></path></svg>
         </button>
       </div>
     </header>
diff --git a/examples/ember/realtime-trading/app/components/shell/configurator.gts b/examples/ember/realtime-trading/app/components/shell/configurator.gts
index 7e4edce3bb..3c19e4ff3c 100644
--- a/examples/ember/realtime-trading/app/components/shell/configurator.gts
+++ b/examples/ember/realtime-trading/app/components/shell/configurator.gts
@@ -1,19 +1,37 @@
 import Component from '@glimmer/component'
 import { tracked } from '@glimmer/tracking'
 import { on } from '@ember/modifier'
-import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from '../../feed/feed-sample-rates'
-import { FORCED_VIRTUALIZATION_ROW_COUNT, resolveVirtualScrollMode } from '../../table/trading-row-virtualizer'
+import {
+  feedSampleRateAt,
+  feedSampleRateIndex,
+  feedSampleRateOptions,
+} from '../../feed/feed-sample-rates'
+import {
+  FORCED_VIRTUALIZATION_ROW_COUNT,
+  resolveVirtualScrollMode,
+} from '../../table/trading-row-virtualizer'
 import { observeValue } from '../../utils/subscriptions'
 import { configuratorOptions } from './configurator-options'
 import Diagnostics from './diagnostics.gts'
 import SelectedInstrument from './selected-instrument.gts'
 import type Owner from '@ember/owner'
-import type { MarketFeedController, MarketFeedState } from '../../feed/market-feed-controller'
-import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+import type {
+  MarketFeedController,
+  MarketFeedState,
+} from '../../feed/market-feed-controller'
+import type {
+  TradingBenchmarkController,
+  TradingBenchmarkState,
+} from '../../benchmark/trading-benchmark-controller'
 import type { RendererMode } from '../../table/trading-table'
 
-interface Signature { Args: { controller: TradingBenchmarkController; feed: MarketFeedController } }
-const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+interface Signature {
+  Args: { controller: TradingBenchmarkController; feed: MarketFeedController }
+}
+const rate = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
 
 export default class Configurator extends Component<Signature> {
   readonly feedSampleRateOptions = feedSampleRateOptions
@@ -27,76 +45,195 @@ export default class Configurator extends Component<Signature> {
     this.feedState = args.feed.store.get()
     this.benchmark = args.controller.store.get()
     this.rendererMode = args.controller.renderAtoms.rendererMode.get()
-    observeValue(this, args.feed.store, (state) => { this.feedState = state })
-    observeValue(this, args.controller.store, (state) => { this.benchmark = state })
-    observeValue(this, args.controller.renderAtoms.rendererMode, (mode) => { this.rendererMode = mode })
+    observeValue(this, args.feed.store, (state) => {
+      this.feedState = state
+    })
+    observeValue(this, args.controller.store, (state) => {
+      this.benchmark = state
+    })
+    observeValue(this, args.controller.renderAtoms.rendererMode, (mode) => {
+      this.rendererMode = mode
+    })
   }
 
-  get virtualForced() { return this.feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT }
-  get virtualMode() { return resolveVirtualScrollMode(this.benchmark.requestedVirtualScrollMode, this.feedState.instrumentCount) }
-  get sampleRateIndex() { return feedSampleRateIndex(this.feedState.targetTicksPerSecond) }
-  get sampleRateLabel() { return `${rate.format(this.feedState.targetTicksPerSecond)} samples/s` }
-  get virtualDescription() { return this.virtualForced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.' }
+  get virtualForced() {
+    return this.feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  }
+  get virtualMode() {
+    return resolveVirtualScrollMode(
+      this.benchmark.requestedVirtualScrollMode,
+      this.feedState.instrumentCount,
+    )
+  }
+  get sampleRateIndex() {
+    return feedSampleRateIndex(this.feedState.targetTicksPerSecond)
+  }
+  get sampleRateLabel() {
+    return `${rate.format(this.feedState.targetTicksPerSecond)} samples/s`
+  }
+  get virtualDescription() {
+    return this.virtualForced
+      ? 'TanStack Virtual is required and locked at 1,500 or more rows.'
+      : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'
+  }
 
   setInstrumentCount = (event: Event) => {
     this.args.controller.actions.resetViewState()
     this.args.feed.actions.setInstrumentCount(numberValue(event))
   }
-  setSampleRate = (event: Event) => { this.args.feed.actions.setTargetRate(feedSampleRateAt(numberValue(event))) }
-  setPublishInterval = (event: Event) => { this.args.feed.actions.setPublishInterval(numberValue(event)) }
-  setVirtualMode = (event: Event) => { this.args.controller.actions.setVirtualScrollEnabled(selectValue(event) === 'tanstack') }
-  setRendererMode = (event: Event) => { this.args.controller.actions.setRendererMode(checked(event) ? 'swap' : 'stable') }
-  setSparklineUpdates = (event: Event) => { this.args.feed.actions.setSparklineUpdates(checked(event)) }
-  setSparklineInterval = (event: Event) => { this.args.feed.actions.setSparklineSampleInterval(numberValue(event)) }
+  setSampleRate = (event: Event) => {
+    this.args.feed.actions.setTargetRate(feedSampleRateAt(numberValue(event)))
+  }
+  setPublishInterval = (event: Event) => {
+    this.args.feed.actions.setPublishInterval(numberValue(event))
+  }
+  setVirtualMode = (event: Event) => {
+    this.args.controller.actions.setVirtualScrollEnabled(
+      selectValue(event) === 'tanstack',
+    )
+  }
+  setRendererMode = (event: Event) => {
+    this.args.controller.actions.setRendererMode(
+      checked(event) ? 'swap' : 'stable',
+    )
+  }
+  setSparklineUpdates = (event: Event) => {
+    this.args.feed.actions.setSparklineUpdates(checked(event))
+  }
+  setSparklineInterval = (event: Event) => {
+    this.args.feed.actions.setSparklineSampleInterval(numberValue(event))
+  }
 
   <template>
-    <aside id='benchmark-configurator' class='configurator' aria-label='Benchmark configurator'>
+    <aside
+      id='benchmark-configurator'
+      class='configurator'
+      aria-label='Benchmark configurator'
+    >
       <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
       <section class='config-section' aria-labelledby='feed-settings'>
         <h2 id='feed-settings'>FEED</h2>
-        <button class='primary-action' type='button' data-testid='feed-toggle' {{on 'click' @feed.actions.toggle}}>{{if this.feedState.running 'PAUSE FEED' 'START FEED'}}</button>
+        <button
+          class='primary-action'
+          type='button'
+          data-testid='feed-toggle'
+          {{on 'click' @feed.actions.toggle}}
+        >{{if this.feedState.running 'PAUSE FEED' 'START FEED'}}</button>
         <label class='field'><span>Instruments (rows)</span>
-          <select data-testid='instrument-count-select' value={{this.feedState.instrumentCount}} {{on 'change' this.setInstrumentCount}}>
-            {{#each this.options.instrumentCounts as |item|}}<option value={{optionValue item}} selected={{eq (optionValue item) this.feedState.instrumentCount}}>{{optionLabel item}}</option>{{/each}}
+          <select
+            data-testid='instrument-count-select'
+            value={{this.feedState.instrumentCount}}
+            {{on 'change' this.setInstrumentCount}}
+          >
+            {{#each this.options.instrumentCounts as |item|}}<option
+                value={{optionValue item}}
+                selected={{eq
+                  (optionValue item)
+                  this.feedState.instrumentCount
+                }}
+              >{{optionLabel item}}</option>{{/each}}
           </select>
         </label>
-        <label class='field rate-field'><span>Synthetic quote workload <strong data-testid='target-sample-rate'>{{this.sampleRateLabel}}</strong></span>
-          <input data-testid='target-rate-slider' type='range' min='0' max={{subtract this.feedSampleRateOptions.length 1}} step='1' value={{this.sampleRateIndex}} {{on 'change' this.setSampleRate}} />
-          <small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small>
+        <label class='field rate-field'><span>Synthetic quote workload
+            <strong
+              data-testid='target-sample-rate'
+            >{{this.sampleRateLabel}}</strong></span>
+          <input
+            data-testid='target-rate-slider'
+            type='range'
+            min='0'
+            max={{subtract this.feedSampleRateOptions.length 1}}
+            step='1'
+            value={{this.sampleRateIndex}}
+            {{on 'change' this.setSampleRate}}
+          />
+          <small>Fixed worker-side workload levels. Samples are coalesced; this
+            is not the message delivery rate.</small>
         </label>
         <label class='field'><span>Worker delivery interval</span>
-          <select data-testid='publish-interval-select' value={{this.feedState.publishIntervalMs}} {{on 'change' this.setPublishInterval}}>
-            {{#each this.options.workerDeliveryIntervals as |item|}}<option value={{optionValue item}} selected={{eq (optionValue item) this.feedState.publishIntervalMs}}>{{optionLabel item}}</option>{{/each}}
+          <select
+            data-testid='publish-interval-select'
+            value={{this.feedState.publishIntervalMs}}
+            {{on 'change' this.setPublishInterval}}
+          >
+            {{#each this.options.workerDeliveryIntervals as |item|}}<option
+                value={{optionValue item}}
+                selected={{eq
+                  (optionValue item)
+                  this.feedState.publishIntervalMs
+                }}
+              >{{optionLabel item}}</option>{{/each}}
           </select>
           <small>One coalesced worker message at this target cadence.</small>
         </label>
       </section>
       <section class='config-section' aria-labelledby='render-settings'>
         <h2 id='render-settings'>RENDER PATH</h2>
-        <label class='field' data-testid='virtual-scroll-mode'><span>Row rendering</span>
-          <select data-testid='virtual-scroll-select' value={{this.virtualMode}} disabled={{this.virtualForced}} {{on 'change' this.setVirtualMode}}>
-            {{#each this.options.rowRenderingModes as |item|}}<option value={{optionValue item}} selected={{eq (optionValue item) this.virtualMode}}>{{optionLabel item}}</option>{{/each}}
+        <label class='field' data-testid='virtual-scroll-mode'><span>Row
+            rendering</span>
+          <select
+            data-testid='virtual-scroll-select'
+            value={{this.virtualMode}}
+            disabled={{this.virtualForced}}
+            {{on 'change' this.setVirtualMode}}
+          >
+            {{#each this.options.rowRenderingModes as |item|}}<option
+                value={{optionValue item}}
+                selected={{eq (optionValue item) this.virtualMode}}
+              >{{optionLabel item}}</option>{{/each}}
           </select><small>{{this.virtualDescription}}</small>
         </label>
-        <label class='toggle-field'><input type='checkbox' checked={{eq this.rendererMode 'swap'}} {{on 'change' this.setRendererMode}} /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
-        <label class='toggle-field'><input type='checkbox' checked={{this.feedState.updateSparklines}} {{on 'change' this.setSparklineUpdates}} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
+        <label class='toggle-field'><input
+            type='checkbox'
+            checked={{eq this.rendererMode 'swap'}}
+            {{on 'change' this.setRendererMode}}
+          /><span>Swap Tick component A ↔ B<small>destroy and recreate when
+              direction changes</small></span></label>
+        <label class='toggle-field'><input
+            type='checkbox'
+            checked={{this.feedState.updateSparklines}}
+            {{on 'change' this.setSparklineUpdates}}
+          /><span>Update intraday charts<small>sample rolling prices
+              independently</small></span></label>
         <label class='field'><span>Intraday chart sampling</span>
-          <select data-testid='sparkline-sample-interval-select' value={{this.feedState.sparklineSampleIntervalMs}} {{on 'change' this.setSparklineInterval}}>
-            {{#each this.options.intradaySamplingIntervals as |item|}}<option value={{optionValue item}} selected={{eq (optionValue item) this.feedState.sparklineSampleIntervalMs}}>{{optionLabel item}}</option>{{/each}}
+          <select
+            data-testid='sparkline-sample-interval-select'
+            value={{this.feedState.sparklineSampleIntervalMs}}
+            {{on 'change' this.setSparklineInterval}}
+          >
+            {{#each this.options.intradaySamplingIntervals as |item|}}<option
+                value={{optionValue item}}
+                selected={{eq
+                  (optionValue item)
+                  this.feedState.sparklineSampleIntervalMs
+                }}
+              >{{optionLabel item}}</option>{{/each}}
           </select>
         </label>
       </section>
-      <section class='config-section' aria-labelledby='stress-actions'><h2 id='stress-actions'>STRESS ACTIONS</h2><div class='action-grid'><button type='button' {{on 'click' @feed.actions.runBurst}}>RUN 25K BURST</button><button type='button' {{on 'click' @controller.actions.resetMarket}}>RESET SESSION</button></div></section>
+      <section class='config-section' aria-labelledby='stress-actions'><h2
+          id='stress-actions'
+        >STRESS ACTIONS</h2><div class='action-grid'><button
+            type='button'
+            {{on 'click' @feed.actions.runBurst}}
+          >RUN 25K BURST</button><button
+            type='button'
+            {{on 'click' @controller.actions.resetMarket}}
+          >RESET SESSION</button></div></section>
       <Diagnostics @controller={{@controller}} />
       <SelectedInstrument @controller={{@controller}} @feed={{@feed}} />
     </aside>
   </template>
 }
 
-const selectValue = (event: Event): string => (event.target as HTMLInputElement | HTMLSelectElement).value
+const selectValue = (event: Event): string =>
+  (event.target as HTMLInputElement | HTMLSelectElement).value
 const numberValue = (event: Event): number => Number(selectValue(event))
-const checked = (event: Event): boolean => (event.target as HTMLInputElement).checked
+const checked = (event: Event): boolean =>
+  (event.target as HTMLInputElement).checked
 const subtract = (left: number, right: number): number => left - right
 const eq = (left: unknown, right: unknown): boolean => left === right
-const optionValue = (option: { readonly value: number | string }): number | string => option.value
+const optionValue = (option: {
+  readonly value: number | string
+}): number | string => option.value
 const optionLabel = (option: { readonly label: string }): string => option.label
diff --git a/examples/ember/realtime-trading/app/components/shell/diagnostics.gts b/examples/ember/realtime-trading/app/components/shell/diagnostics.gts
index bf7000bef9..de55a836bf 100644
--- a/examples/ember/realtime-trading/app/components/shell/diagnostics.gts
+++ b/examples/ember/realtime-trading/app/components/shell/diagnostics.gts
@@ -3,15 +3,27 @@ import { tracked } from '@glimmer/tracking'
 import { observeValue } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
 import type { NamedInvocationRate } from '../../benchmark/benchmark-monitor'
-import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+import type {
+  TradingBenchmarkController,
+  TradingBenchmarkState,
+} from '../../benchmark/trading-benchmark-controller'
 
-interface Signature { Args: { controller: TradingBenchmarkController } }
+interface Signature {
+  Args: { controller: TradingBenchmarkController }
+}
 const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
-const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const rate = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
 const ms = (value: number): string => `${value.toFixed(2)} ms`
 const invocations = (values: ReadonlyArray<NamedInvocationRate>): string => {
   const active = values.filter((entry) => entry.callsPerSecond > 0)
-  return active.length ? active.map((entry) => `${entry.name} ${rate.format(entry.callsPerSecond)}`).join(' · ') : '—'
+  return active.length
+    ? active
+        .map((entry) => `${entry.name} ${rate.format(entry.callsPerSecond)}`)
+        .join(' · ')
+    : '—'
 }
 
 export default class Diagnostics extends Component<Signature> {
@@ -19,33 +31,102 @@ export default class Diagnostics extends Component<Signature> {
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
     this.state = args.controller.store.get()
-    observeValue(this, args.controller.store, (state) => { this.state = state })
+    observeValue(this, args.controller.store, (state) => {
+      this.state = state
+    })
   }
   get items() {
     const metrics = this.state.metrics
     return [
-      { label: 'Mounted cells', value: integer.format(this.state.mountedCells), testId: '' },
-      { label: 'Live components', value: integer.format(this.state.liveComponents), testId: '' },
-      { label: 'Created / destroyed', value: `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`, testId: '' },
-      { label: 'Renderer callbacks / s', value: rate.format(metrics.cellRendererCallsPerSecond), testId: 'cell-render-rate' },
-      { label: 'Component executions / s', value: rate.format(metrics.componentRenderCallsPerSecond), testId: 'component-render-rate' },
-      { label: 'Executions by component / s', value: invocations(metrics.componentRenderRates), testId: 'component-render-breakdown' },
-      { label: 'Callbacks by column / s', value: invocations(metrics.cellRendererRates), testId: 'cell-render-breakdown' },
-      { label: 'DOM mutation records / s', value: rate.format(metrics.domMutationsPerSecond), testId: 'dom-mutation-rate' },
-      { label: 'Core row model calls / s', value: metrics.rowModelCallsPerSecond.toFixed(1), testId: 'row-model-call-rate' },
-      { label: 'Core row model avg / max', value: `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, testId: 'row-model-duration' },
-      { label: 'Visible rows', value: integer.format(metrics.visibleRows), testId: 'visible-row-count' },
-      { label: 'Worker messages', value: integer.format(metrics.workerMessages), testId: 'worker-messages' },
-      { label: 'Worker-coalesced updates / s', value: rate.format(metrics.supersededUpdatesPerSecond), testId: 'superseded-update-rate' },
-      { label: 'Last samples / updated rows', value: `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`, testId: '' },
-      { label: 'Renders > 16.7 ms', value: integer.format(metrics.slowRenders), testId: '' },
-      { label: 'JS heap', value: metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, testId: '' },
+      {
+        label: 'Mounted cells',
+        value: integer.format(this.state.mountedCells),
+        testId: '',
+      },
+      {
+        label: 'Live components',
+        value: integer.format(this.state.liveComponents),
+        testId: '',
+      },
+      {
+        label: 'Created / destroyed',
+        value: `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`,
+        testId: '',
+      },
+      {
+        label: 'Renderer callbacks / s',
+        value: rate.format(metrics.cellRendererCallsPerSecond),
+        testId: 'cell-render-rate',
+      },
+      {
+        label: 'Component executions / s',
+        value: rate.format(metrics.componentRenderCallsPerSecond),
+        testId: 'component-render-rate',
+      },
+      {
+        label: 'Executions by component / s',
+        value: invocations(metrics.componentRenderRates),
+        testId: 'component-render-breakdown',
+      },
+      {
+        label: 'Callbacks by column / s',
+        value: invocations(metrics.cellRendererRates),
+        testId: 'cell-render-breakdown',
+      },
+      {
+        label: 'DOM mutation records / s',
+        value: rate.format(metrics.domMutationsPerSecond),
+        testId: 'dom-mutation-rate',
+      },
+      {
+        label: 'Core row model calls / s',
+        value: metrics.rowModelCallsPerSecond.toFixed(1),
+        testId: 'row-model-call-rate',
+      },
+      {
+        label: 'Core row model avg / max',
+        value: `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`,
+        testId: 'row-model-duration',
+      },
+      {
+        label: 'Visible rows',
+        value: integer.format(metrics.visibleRows),
+        testId: 'visible-row-count',
+      },
+      {
+        label: 'Worker messages',
+        value: integer.format(metrics.workerMessages),
+        testId: 'worker-messages',
+      },
+      {
+        label: 'Worker-coalesced updates / s',
+        value: rate.format(metrics.supersededUpdatesPerSecond),
+        testId: 'superseded-update-rate',
+      },
+      {
+        label: 'Last samples / updated rows',
+        value: `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`,
+        testId: '',
+      },
+      {
+        label: 'Renders > 16.7 ms',
+        value: integer.format(metrics.slowRenders),
+        testId: '',
+      },
+      {
+        label: 'JS heap',
+        value:
+          metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`,
+        testId: '',
+      },
     ]
   }
   <template>
     <section class='config-section diagnostics' aria-labelledby='diagnostics'>
       <h2 id='diagnostics'>DIAGNOSTICS</h2>
-      <dl>{{#each this.items as |item|}}<div><dt>{{item.label}}</dt><dd data-testid={{or item.testId undefined}}>{{item.value}}</dd></div>{{/each}}</dl>
+      <dl>{{#each this.items as |item|}}<div><dt>{{item.label}}</dt><dd
+              data-testid={{or item.testId undefined}}
+            >{{item.value}}</dd></div>{{/each}}</dl>
     </section>
   </template>
 }
diff --git a/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts b/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
index 370e1dccfa..b2921e51b9 100644
--- a/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
+++ b/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
@@ -2,9 +2,14 @@ import Component from '@glimmer/component'
 import { tracked } from '@glimmer/tracking'
 import { observeValue } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
-import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+import type {
+  TradingBenchmarkController,
+  TradingBenchmarkState,
+} from '../../benchmark/trading-benchmark-controller'
 
-interface Signature { Args: { controller: TradingBenchmarkController } }
+interface Signature {
+  Args: { controller: TradingBenchmarkController }
+}
 const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
 
 export default class MarketStatusbar extends Component<Signature> {
@@ -12,14 +17,19 @@ export default class MarketStatusbar extends Component<Signature> {
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
     this.state = args.controller.store.get()
-    observeValue(this, args.controller.store, (state) => { this.state = state })
+    observeValue(this, args.controller.store, (state) => {
+      this.state = state
+    })
   }
   <template>
     <footer class='market-statusbar'>
-      <span>MESSAGE SAMPLES <strong>{{format this.state.metrics.lastBatchSize}}</strong></span>
-      <span>ROW UPDATES <strong>{{format this.state.metrics.lastUpdateCount}}</strong></span>
+      <span>MESSAGE SAMPLES
+        <strong>{{format this.state.metrics.lastBatchSize}}</strong></span>
+      <span>ROW UPDATES
+        <strong>{{format this.state.metrics.lastUpdateCount}}</strong></span>
       <span>HOSTS <strong>{{format this.state.mountedCells}}</strong></span>
-      <span>COMPONENTS <strong>{{format this.state.liveComponents}}</strong></span>
+      <span>COMPONENTS
+        <strong>{{format this.state.liveComponents}}</strong></span>
     </footer>
   </template>
 }
diff --git a/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts b/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
index 70d43a396e..9f0ef5fd66 100644
--- a/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
+++ b/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
@@ -2,10 +2,18 @@ import Component from '@glimmer/component'
 import { tracked } from '@glimmer/tracking'
 import { observeValue } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
-import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+import type {
+  TradingBenchmarkController,
+  TradingBenchmarkState,
+} from '../../benchmark/trading-benchmark-controller'
 
-interface Signature { Args: { controller: TradingBenchmarkController } }
-const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+interface Signature {
+  Args: { controller: TradingBenchmarkController }
+}
+const rate = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
 const ms = (value: number): string => `${value.toFixed(2)} ms`
 
 export default class MetricsStrip extends Component<Signature> {
@@ -13,25 +21,68 @@ export default class MetricsStrip extends Component<Signature> {
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
     this.state = args.controller.store.get()
-    observeValue(this, args.controller.store, (state) => { this.state = state })
+    observeValue(this, args.controller.store, (state) => {
+      this.state = state
+    })
   }
   get items() {
     const metrics = this.state.metrics
     return [
-      ['WORKER SAMPLES', rate.format(metrics.actualTicksPerSecond), 'generated samples/s', 'actual-rate'],
-      ['ROW UPDATES', rate.format(metrics.rowUpdatesPerSecond), 'unique rows applied/s', 'row-update-rate'],
-      ['MESSAGES', metrics.workerMessagesPerSecond.toFixed(1), 'worker messages/s', 'message-rate'],
-      ['STATE APPLIES', metrics.stateApplicationsPerSecond.toFixed(1), 'quote snapshots/s', 'state-apply-rate'],
-      ['TABLE COMMITS', metrics.tableRendersPerSecond.toFixed(1), 'completed renders/s', 'table-render-rate'],
+      [
+        'WORKER SAMPLES',
+        rate.format(metrics.actualTicksPerSecond),
+        'generated samples/s',
+        'actual-rate',
+      ],
+      [
+        'ROW UPDATES',
+        rate.format(metrics.rowUpdatesPerSecond),
+        'unique rows applied/s',
+        'row-update-rate',
+      ],
+      [
+        'MESSAGES',
+        metrics.workerMessagesPerSecond.toFixed(1),
+        'worker messages/s',
+        'message-rate',
+      ],
+      [
+        'STATE APPLIES',
+        metrics.stateApplicationsPerSecond.toFixed(1),
+        'quote snapshots/s',
+        'state-apply-rate',
+      ],
+      [
+        'TABLE COMMITS',
+        metrics.tableRendersPerSecond.toFixed(1),
+        'completed renders/s',
+        'table-render-rate',
+      ],
       ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
-      ['P95 RENDER', ms(metrics.p95RenderMs), `max ${ms(metrics.maxRenderMs)}`, ''],
-      ['LONG FRAMES', this.state.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', this.state.longAnimationFramesSupported ? `worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
+      [
+        'P95 RENDER',
+        ms(metrics.p95RenderMs),
+        `max ${ms(metrics.maxRenderMs)}`,
+        '',
+      ],
+      [
+        'LONG FRAMES',
+        this.state.longAnimationFramesSupported
+          ? String(metrics.longAnimationFrames)
+          : 'N/A',
+        this.state.longAnimationFramesSupported
+          ? `worst ${ms(metrics.worstLongAnimationFrameMs)}`
+          : 'unsupported',
+        'long-frame-count',
+      ],
     ] as const
   }
   <template>
     <section class='metrics-strip' aria-label='Live performance metrics'>
       {{#each this.items as |item|}}
-        <article><span>{{item.[0]}}</span><strong data-testid={{or item.[3] undefined}}>{{item.[1]}}</strong><small>{{item.[2]}}</small></article>
+        <article><span>{{item.[0]}}</span><strong
+            data-testid={{or item.[3] undefined}}
+          >{{item.[1]}}</strong><small>{{item.[2]}}</small></article>
       {{/each}}
     </section>
   </template>
diff --git a/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts b/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
index a38a2a9d43..240c960e06 100644
--- a/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
+++ b/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
@@ -3,10 +3,15 @@ import { tracked } from '@glimmer/tracking'
 import { observeValue } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
 import type { MarketQuote } from '../../feed/market-data'
-import type { MarketFeedController, MarketFeedState } from '../../feed/market-feed-controller'
+import type {
+  MarketFeedController,
+  MarketFeedState,
+} from '../../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
-interface Signature { Args: { controller: TradingBenchmarkController; feed: MarketFeedController } }
+interface Signature {
+  Args: { controller: TradingBenchmarkController; feed: MarketFeedController }
+}
 
 export default class SelectedInstrument extends Component<Signature> {
   @tracked feedState: MarketFeedState
@@ -15,16 +20,30 @@ export default class SelectedInstrument extends Component<Signature> {
     super(owner, args)
     this.feedState = args.feed.store.get()
     this.symbol = args.controller.renderAtoms.selectedSymbol.get()
-    observeValue(this, args.feed.store, (state) => { this.feedState = state })
-    observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => { this.symbol = symbol })
+    observeValue(this, args.feed.store, (state) => {
+      this.feedState = state
+    })
+    observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => {
+      this.symbol = symbol
+    })
+  }
+  get quote(): MarketQuote | null {
+    return this.args.feed.getQuoteBySymbol(this.feedState.quotes, this.symbol)
   }
-  get quote(): MarketQuote | null { return this.args.feed.getQuoteBySymbol(this.feedState.quotes, this.symbol) }
   <template>
-    <section class='config-section selected-instrument' data-testid='selected-instrument'>
+    <section
+      class='config-section selected-instrument'
+      data-testid='selected-instrument'
+    >
       <h2>SELECTED INSTRUMENT</h2>
       {{#if this.quote}}
-        <div class='selection'><div><strong>{{this.quote.symbol}}</strong><span>{{this.quote.company}}</span></div><small>{{this.quote.venue}}</small></div>
-        <dl><div><dt>Last</dt><dd>{{fixed this.quote.price}}</dd></div><div><dt>Bid / ask</dt><dd>{{fixed this.quote.bid}} / {{fixed this.quote.ask}}</dd></div></dl>
+        <div class='selection'><div><strong>{{this.quote.symbol}}</strong><span
+            >{{this.quote.company}}</span></div><small
+          >{{this.quote.venue}}</small></div>
+        <dl><div><dt>Last</dt><dd>{{fixed this.quote.price}}</dd></div><div><dt
+            >Bid / ask</dt><dd>{{fixed this.quote.bid}}
+              /
+              {{fixed this.quote.ask}}</dd></div></dl>
       {{else}}
         <p>Click or begin a cell selection in any row to inspect its instrument.</p>
       {{/if}}
diff --git a/examples/ember/realtime-trading/app/components/shell/trading-shell.gts b/examples/ember/realtime-trading/app/components/shell/trading-shell.gts
index c9d8817bcd..4138df1440 100644
--- a/examples/ember/realtime-trading/app/components/shell/trading-shell.gts
+++ b/examples/ember/realtime-trading/app/components/shell/trading-shell.gts
@@ -9,24 +9,38 @@ import TradingTable from '../table/trading-table.gts'
 import type { MarketFeedController } from '../../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
-interface Signature { Args: { controller: TradingBenchmarkController; feed: MarketFeedController } }
+interface Signature {
+  Args: { controller: TradingBenchmarkController; feed: MarketFeedController }
+}
 
 export default class TradingShell extends Component<Signature> {
   @tracked sidebarOpen = true
-  toggleSidebar = () => { this.sidebarOpen = !this.sidebarOpen }
-  get rootClass() { return `trading-terminal${this.sidebarOpen ? '' : ' is-sidebar-collapsed'}` }
+  toggleSidebar = () => {
+    this.sidebarOpen = !this.sidebarOpen
+  }
+  get rootClass() {
+    return `trading-terminal${this.sidebarOpen ? '' : ' is-sidebar-collapsed'}`
+  }
   <template>
     <main class={{this.rootClass}}>
       <div class='shell-header'>
-        <AppHeader @feed={{@feed}} @sidebarOpen={{this.sidebarOpen}} @toggleSidebar={{this.toggleSidebar}} />
-        {{#if isDevelopment}}<aside class='development-warning'>DEV BUILD — use the production build before recording results.</aside>{{/if}}
+        <AppHeader
+          @feed={{@feed}}
+          @sidebarOpen={{this.sidebarOpen}}
+          @toggleSidebar={{this.toggleSidebar}}
+        />
+        {{#if isDevelopment}}<aside class='development-warning'>DEV BUILD — use
+            the production build before recording results.</aside>{{/if}}
       </div>
       <section class='market-panel' aria-label='Live synthetic quotes'>
         <MetricsStrip @controller={{@controller}} />
         <TradingTable @controller={{@controller}} @feed={{@feed}} />
       </section>
       <MarketStatusbar @controller={{@controller}} />
-      <div class='sidebar-slot'>{{#if this.sidebarOpen}}<Configurator @controller={{@controller}} @feed={{@feed}} />{{/if}}</div>
+      <div class='sidebar-slot'>{{#if this.sidebarOpen}}<Configurator
+            @controller={{@controller}}
+            @feed={{@feed}}
+          />{{/if}}</div>
     </main>
   </template>
 }
diff --git a/examples/ember/realtime-trading/app/components/table/trading-table.gts b/examples/ember/realtime-trading/app/components/table/trading-table.gts
index 2330d468c1..74cdd05eb9 100644
--- a/examples/ember/realtime-trading/app/components/table/trading-table.gts
+++ b/examples/ember/realtime-trading/app/components/table/trading-table.gts
@@ -18,17 +18,39 @@ import {
   observeElementRect,
   type VirtualItem,
 } from '@tanstack/virtual-core'
-import { createTradingColumns, readMeasuredRows, type RendererMode } from '../../table/table-config/trading-columns.gts'
+import {
+  createTradingColumns,
+  readMeasuredRows,
+  type RendererMode,
+} from '../../table/table-config/trading-columns.gts'
 import { tradingFeatures } from '../../table/trading-features'
-import { TradingGridPointerController, handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from '../../table/table-interactions'
-import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode } from '../../table/trading-row-virtualizer'
+import {
+  TradingGridPointerController,
+  handleCellNavigation,
+  reorderColumnIds,
+  sortAriaValue,
+  sortIndicator,
+} from '../../table/table-interactions'
+import {
+  TRADING_ROW_HEIGHT,
+  TRADING_ROW_OVERSCAN,
+  resolveVirtualScrollMode,
+} from '../../table/trading-row-virtualizer'
 import { observeValue, registerCleanup } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
 import type { MarketQuote } from '../../feed/market-data'
-import type { MarketFeedController, MarketFeedState } from '../../feed/market-feed-controller'
-import type { TradingBenchmarkController, TradingBenchmarkState } from '../../benchmark/trading-benchmark-controller'
+import type {
+  MarketFeedController,
+  MarketFeedState,
+} from '../../feed/market-feed-controller'
+import type {
+  TradingBenchmarkController,
+  TradingBenchmarkState,
+} from '../../benchmark/trading-benchmark-controller'
 
-interface Signature { Args: { controller: TradingBenchmarkController; feed: MarketFeedController } }
+interface Signature {
+  Args: { controller: TradingBenchmarkController; feed: MarketFeedController }
+}
 type TradingRow = Row<typeof tradingFeatures, MarketQuote>
 type TradingHeader = Header<typeof tradingFeatures, MarketQuote>
 interface RenderedRow {
@@ -38,7 +60,10 @@ interface RenderedRow {
 }
 
 const captureElement = modifier(
-  (element: HTMLElement, [capture]: [(element: HTMLElement | null) => void]) => {
+  (
+    element: HTMLElement,
+    [capture]: [(element: HTMLElement | null) => void],
+  ) => {
     capture(element)
     return () => capture(null)
   },
@@ -89,15 +114,26 @@ export default class TradingTable extends Component<Signature> {
       this.table.setOptions((options) => ({ ...options, data: state.quotes }))
       queueMicrotask(() => args.feed.completeRender())
     })
-    observeValue(this, args.controller.store, (state) => { this.benchmark = state })
-    observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => { this.selectedSymbol = symbol })
+    observeValue(this, args.controller.store, (state) => {
+      this.benchmark = state
+    })
+    observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => {
+      this.selectedSymbol = symbol
+    })
     observeValue(this, args.controller.renderAtoms.rendererMode, (mode) => {
       this.rendererMode = mode
       this.columns = createTradingColumns(args.controller, mode)
-      this.table.setOptions((options) => ({ ...options, columns: this.columns }))
+      this.table.setOptions((options) => ({
+        ...options,
+        columns: this.columns,
+      }))
     })
-    const sizing = this.table.atoms.columnSizing.subscribe(() => this.writeColumnSizes())
-    const order = this.table.atoms.columnOrder.subscribe(() => this.writeColumnSizes())
+    const sizing = this.table.atoms.columnSizing.subscribe(() =>
+      this.writeColumnSizes(),
+    )
+    const order = this.table.atoms.columnOrder.subscribe(() =>
+      this.writeColumnSizes(),
+    )
     const resizing = this.table.atoms.columnResizing.subscribe((state) => {
       if (state.isResizingColumn !== false) this.layout.manuallyResized = true
     })
@@ -114,22 +150,47 @@ export default class TradingTable extends Component<Signature> {
   get rows(): Array<TradingRow> {
     return readMeasuredRows(() => this.table.getRowModel().rows)
   }
-  get headerGroups() { return this.table.getHeaderGroups() }
-  get visibleLeafColumnCount() { return this.table.getVisibleLeafColumns().length }
+  get headerGroups() {
+    return this.table.getHeaderGroups()
+  }
+  get visibleLeafColumnCount() {
+    return this.table.getVisibleLeafColumns().length
+  }
   get virtualMode() {
-    return resolveVirtualScrollMode(this.benchmark.requestedVirtualScrollMode, this.feedState.instrumentCount)
+    return resolveVirtualScrollMode(
+      this.benchmark.requestedVirtualScrollMode,
+      this.feedState.instrumentCount,
+    )
   }
   get renderedRows(): Array<RenderedRow> {
     void this.virtualVersion
     const rows = this.rows
     this.syncVirtualizer(rows)
-    const result = this.virtualMode === 'tanstack' && this.virtualizer
-      ? this.virtualizer.getVirtualItems().map((item) => ({ row: rows[item.index]!, cells: rows[item.index]!.getVisibleCells(), virtual: item }))
-      : rows.map((row) => ({ row, cells: row.getVisibleCells(), virtual: null }))
-    queueMicrotask(() => this.args.controller.actions.setRenderedRowCount(result.length))
+    const result =
+      this.virtualMode === 'tanstack' && this.virtualizer
+        ? this.virtualizer
+            .getVirtualItems()
+            .map((item) => ({
+              row: rows[item.index]!,
+              cells: rows[item.index]!.getVisibleCells(),
+              virtual: item,
+            }))
+        : rows.map((row) => ({
+            row,
+            cells: row.getVisibleCells(),
+            virtual: null,
+          }))
+    queueMicrotask(() =>
+      this.args.controller.actions.setRenderedRowCount(result.length),
+    )
     return result
   }
-  get totalVirtualHeight() { void this.virtualVersion; return this.virtualizer?.getTotalSize() ?? this.rows.length * TRADING_ROW_HEIGHT }
+  get totalVirtualHeight() {
+    void this.virtualVersion
+    return (
+      this.virtualizer?.getTotalSize() ?? this.rows.length * TRADING_ROW_HEIGHT
+    )
+  }
   get visibleRangeText() {
     void this.virtualVersion
     const range = this.virtualizer?.range
@@ -150,7 +211,9 @@ export default class TradingTable extends Component<Signature> {
       observeElementRect,
       observeElementOffset,
       scrollToFn: elementScroll,
-      onChange: () => { this.virtualVersion++ },
+      onChange: () => {
+        this.virtualVersion++
+      },
     })
     this.stopVirtualizer = this.virtualizer._didMount()
     this.resizeObserver = new ResizeObserver(() => this.fitAvailableWidth())
@@ -170,8 +233,15 @@ export default class TradingTable extends Component<Signature> {
     this.bodyElement = element as HTMLTableSectionElement | null
     if (!this.bodyElement) return
     this.args.controller.monitor.resetDomMutations()
-    this.mutationObserver = new MutationObserver((records) => this.args.controller.monitor.recordDomMutations(records.length))
-    this.mutationObserver.observe(this.bodyElement, { attributes: true, characterData: true, childList: true, subtree: true })
+    this.mutationObserver = new MutationObserver((records) =>
+      this.args.controller.monitor.recordDomMutations(records.length),
+    )
+    this.mutationObserver.observe(this.bodyElement, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
   }
 
   syncVirtualizer(rows: Array<TradingRow>) {
@@ -187,8 +257,14 @@ export default class TradingTable extends Component<Signature> {
   writeColumnSizes() {
     if (!this.tableElement) return
     for (const header of this.table.getFlatHeaders()) {
-      this.tableElement.style.setProperty(`--header-${header.id}-size`, String(header.getSize()))
-      this.tableElement.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize()))
+      this.tableElement.style.setProperty(
+        `--header-${header.id}-size`,
+        String(header.getSize()),
+      )
+      this.tableElement.style.setProperty(
+        `--col-${header.column.id}-size`,
+        String(header.column.getSize()),
+      )
     }
     this.tableElement.style.width = `${this.table.getTotalSize()}px`
   }
@@ -197,13 +273,27 @@ export default class TradingTable extends Component<Signature> {
     const width = this.table.getTotalSize()
     if (this.scrollElement.clientWidth <= width + 1 || width <= 0) return
     const ratio = this.scrollElement.clientWidth / width
-    this.table.setColumnSizing(Object.fromEntries(this.table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio])))
+    this.table.setColumnSizing(
+      Object.fromEntries(
+        this.table
+          .getVisibleLeafColumns()
+          .map((column) => [column.id, column.getSize() * ratio]),
+      ),
+    )
   }
 
-  onGridKeyDown = (event: KeyboardEvent) => handleCellNavigation(this.table, event)
-  onBodyMouseDown = (event: MouseEvent) => this.pointer.handleMouseDown(this.table, event, this.args.controller.actions.selectSymbol)
-  onBodyPointerOver = (event: MouseEvent) => this.pointer.handlePointerOver(this.table, event)
-  onBodyClick = (event: MouseEvent) => this.pointer.handleClick(this.table, event)
+  onGridKeyDown = (event: KeyboardEvent) =>
+    handleCellNavigation(this.table, event)
+  onBodyMouseDown = (event: MouseEvent) =>
+    this.pointer.handleMouseDown(
+      this.table,
+      event,
+      this.args.controller.actions.selectSymbol,
+    )
+  onBodyPointerOver = (event: MouseEvent) =>
+    this.pointer.handlePointerOver(this.table, event)
+  onBodyClick = (event: MouseEvent) =>
+    this.pointer.handleClick(this.table, event)
   resetPointer = () => this.pointer.resetPointerCell()
   clearDrag = () => {
     this.drag.source?.classList.remove('is-column-dragging')
@@ -233,62 +323,190 @@ export default class TradingTable extends Component<Signature> {
   }
   drop = (header: TradingHeader) => (event: DragEvent) => {
     event.preventDefault()
-    const source = event.dataTransfer?.getData('text/plain') || this.drag.columnId
-    if (source) this.table.setColumnOrder(reorderColumnIds(this.table.getVisibleLeafColumns().map((column) => column.id), source, header.column.id))
+    const source =
+      event.dataTransfer?.getData('text/plain') || this.drag.columnId
+    if (source)
+      this.table.setColumnOrder(
+        reorderColumnIds(
+          this.table.getVisibleLeafColumns().map((column) => column.id),
+          source,
+          header.column.id,
+        ),
+      )
     this.clearDrag()
   }
 
   <template>
-    <div class='table-scroll {{if (eq this.virtualMode "tanstack") "is-virtualized"}}' data-trading-table {{captureElement this.captureScroll}}>
-      <table class='trading-data-grid {{if (eq this.virtualMode "tanstack") "virtual-table"}}' data-testid='trading-table' role='grid' aria-multiselectable='true' tabindex='0' {{captureElement this.captureTable}} {{on 'keydown' this.onGridKeyDown}}>
+    <div
+      class='table-scroll
+        {{if (eq this.virtualMode "tanstack") "is-virtualized"}}'
+      data-trading-table
+      {{captureElement this.captureScroll}}
+    >
+      <table
+        class='trading-data-grid
+          {{if (eq this.virtualMode "tanstack") "virtual-table"}}'
+        data-testid='trading-table'
+        role='grid'
+        aria-multiselectable='true'
+        tabindex='0'
+        {{captureElement this.captureTable}}
+        {{on 'keydown' this.onGridKeyDown}}
+      >
         <thead>
           {{#each this.headerGroups as |group|}}
-            <tr>{{#each group.headers as |header|}}<th colspan={{header.colSpan}} style={{headerStyle header}} aria-sort={{sortAria header}} class='{{headerClass header}}'>
-              {{#unless header.isPlaceholder}}
-                {{#if (isLeaf header)}}
-                  <div class='leaf-header-content' {{on 'dragover' (this.dragOver header)}} {{on 'drop' (this.drop header)}}>
-                    <button type='button' class='column-drag-handle' draggable='true' aria-label='Move {{header.column.id}} column' {{on 'dragstart' (this.dragStart header)}} {{on 'dragend' this.clearDrag}}>⋮⋮</button>
-                    <button type='button' class='sort-header-button {{if (canSort header) "is-sortable"}}' disabled={{not (canSort header)}} {{on 'click' (toggleSort header)}}><span class='header-label'><FlexRenderHeader @header={{header}} /></span>{{#if (canSort header)}}<span class='sort-indicator {{if (isSorted header) "is-active"}}' aria-hidden='true'>{{indicator header}}</span>{{/if}}</button>
-                  </div>
-                  {{#if (canResize header)}}<div class='column-resize-handle {{if (isResizing header) "is-resizing"}}' role='separator' aria-orientation='vertical' {{on 'dblclick' (resetSize header)}} {{on 'mousedown' (resizeHandler header)}} {{on 'touchstart' (resizeHandler header)}}></div>{{/if}}
-                {{else}}<FlexRenderHeader @header={{header}} />{{/if}}
-              {{/unless}}
-            </th>{{/each}}</tr>
+            <tr>{{#each group.headers as |header|}}<th
+                  colspan={{header.colSpan}}
+                  style={{headerStyle header}}
+                  aria-sort={{sortAria header}}
+                  class='{{headerClass header}}'
+                >
+                  {{#unless header.isPlaceholder}}
+                    {{#if (isLeaf header)}}
+                      <div
+                        class='leaf-header-content'
+                        {{on 'dragover' (this.dragOver header)}}
+                        {{on 'drop' (this.drop header)}}
+                      >
+                        <button
+                          type='button'
+                          class='column-drag-handle'
+                          draggable='true'
+                          aria-label='Move {{header.column.id}} column'
+                          {{on 'dragstart' (this.dragStart header)}}
+                          {{on 'dragend' this.clearDrag}}
+                        >⋮⋮</button>
+                        <button
+                          type='button'
+                          class='sort-header-button
+                            {{if (canSort header) "is-sortable"}}'
+                          disabled={{not (canSort header)}}
+                          {{on 'click' (toggleSort header)}}
+                        ><span class='header-label'><FlexRenderHeader
+                              @header={{header}}
+                            /></span>{{#if (canSort header)}}<span
+                              class='sort-indicator
+                                {{if (isSorted header) "is-active"}}'
+                              aria-hidden='true'
+                            >{{indicator header}}</span>{{/if}}</button>
+                      </div>
+                      {{#if (canResize header)}}<div
+                          class='column-resize-handle
+                            {{if (isResizing header) "is-resizing"}}'
+                          role='separator'
+                          aria-orientation='vertical'
+                          {{on 'dblclick' (resetSize header)}}
+                          {{on 'mousedown' (resizeHandler header)}}
+                          {{on 'touchstart' (resizeHandler header)}}
+                        ></div>{{/if}}
+                    {{else}}<FlexRenderHeader @header={{header}} />{{/if}}
+                  {{/unless}}
+                </th>{{/each}}</tr>
           {{/each}}
         </thead>
-        <tbody class={{if (eq this.virtualMode 'tanstack') 'virtual-table-body'}} style={{bodyStyle this.virtualMode this.totalVirtualHeight}} data-source-row-count={{this.feedState.quotes.length}} {{captureElement this.captureBody}} {{on 'mousedown' this.onBodyMouseDown}} {{on 'pointerover' this.onBodyPointerOver}} {{on 'mouseleave' this.resetPointer}} {{on 'click' this.onBodyClick}}>
+        <tbody
+          class={{if (eq this.virtualMode 'tanstack') 'virtual-table-body'}}
+          style={{bodyStyle this.virtualMode this.totalVirtualHeight}}
+          data-source-row-count={{this.feedState.quotes.length}}
+          {{captureElement this.captureBody}}
+          {{on 'mousedown' this.onBodyMouseDown}}
+          {{on 'pointerover' this.onBodyPointerOver}}
+          {{on 'mouseleave' this.resetPointer}}
+          {{on 'click' this.onBodyClick}}
+        >
           {{#each this.renderedRows key='row.id' as |item|}}
-            <tr class={{if item.virtual 'virtual-table-row'}} style={{rowStyle item.virtual}} data-virtual-index={{virtualIndex item.virtual}} data-symbol={{item.row.original.symbol}} data-row-id={{item.row.original.id}} data-symbol-selected={{if (eq this.selectedSymbol item.row.original.symbol) 'true'}} title={{item.row.original.company}} aria-selected={{rowSelected item.row}}>
-              {{#each item.cells key='id' as |cell|}}<td style={{cellStyle cell.column.id}} data-column-id={{cell.column.id}} data-cell-focused={{cellFocused cell}} data-selection-top={{edgeAttr cell 'top'}} data-selection-right={{edgeAttr cell 'right'}} data-selection-bottom={{edgeAttr cell 'bottom'}} data-selection-left={{edgeAttr cell 'left'}} aria-selected={{cellSelected cell}} tabindex={{cellTabIndex cell}}><FlexRenderCell @cell={{cell}} /></td>{{/each}}
+            <tr
+              class={{if item.virtual 'virtual-table-row'}}
+              style={{rowStyle item.virtual}}
+              data-virtual-index={{virtualIndex item.virtual}}
+              data-symbol={{item.row.original.symbol}}
+              data-row-id={{item.row.original.id}}
+              data-symbol-selected={{if
+                (eq this.selectedSymbol item.row.original.symbol)
+                'true'
+              }}
+              title={{item.row.original.company}}
+              aria-selected={{rowSelected item.row}}
+            >
+              {{#each item.cells key='id' as |cell|}}<td
+                  style={{cellStyle cell.column.id}}
+                  data-column-id={{cell.column.id}}
+                  data-cell-focused={{cellFocused cell}}
+                  data-selection-top={{edgeAttr cell 'top'}}
+                  data-selection-right={{edgeAttr cell 'right'}}
+                  data-selection-bottom={{edgeAttr cell 'bottom'}}
+                  data-selection-left={{edgeAttr cell 'left'}}
+                  aria-selected={{cellSelected cell}}
+                  tabindex={{cellTabIndex cell}}
+                ><FlexRenderCell @cell={{cell}} /></td>{{/each}}
             </tr>
           {{/each}}
         </tbody>
       </table>
     </div>
-    {{#if (eq this.virtualMode 'tanstack')}}<footer class='virtual-scroll-footer' data-testid='virtual-scroll-footer'><span>TanStack · Total · {{this.rows.length}} rows · {{this.visibleLeafColumnCount}} columns</span><span data-testid='visible-row-range'>{{this.visibleRangeText}}</span></footer>{{/if}}
+    {{#if (eq this.virtualMode 'tanstack')}}<footer
+        class='virtual-scroll-footer'
+        data-testid='virtual-scroll-footer'
+      ><span>TanStack · Total ·
+          {{this.rows.length}}
+          rows ·
+          {{this.visibleLeafColumnCount}}
+          columns</span><span
+          data-testid='visible-row-range'
+        >{{this.visibleRangeText}}</span></footer>{{/if}}
   </template>
 }
 
-const isLeaf = (header: TradingHeader): boolean => header.subHeaders.length === 0
+const isLeaf = (header: TradingHeader): boolean =>
+  header.subHeaders.length === 0
 const canSort = (header: TradingHeader): boolean => header.column.getCanSort()
-const isSorted = (header: TradingHeader): boolean => header.column.getIsSorted() !== false
-const canResize = (header: TradingHeader): boolean => header.column.getCanResize()
-const isResizing = (header: TradingHeader): boolean => header.column.getIsResizing()
-const toggleSort = (header: TradingHeader) => header.column.getToggleSortingHandler() ?? (() => undefined)
+const isSorted = (header: TradingHeader): boolean =>
+  header.column.getIsSorted() !== false
+const canResize = (header: TradingHeader): boolean =>
+  header.column.getCanResize()
+const isResizing = (header: TradingHeader): boolean =>
+  header.column.getIsResizing()
+const toggleSort = (header: TradingHeader) =>
+  header.column.getToggleSortingHandler() ?? (() => undefined)
 const resetSize = (header: TradingHeader) => () => header.column.resetSize()
-const resizeHandler = (header: TradingHeader) => (event: Event) => header.getResizeHandler()?.(event)
-const indicator = (header: TradingHeader): string => sortIndicator(header.column.getIsSorted())
-const sortAria = (header: TradingHeader) => isLeaf(header) ? sortAriaValue(header.column.getIsSorted()) : undefined
-const headerStyle = (header: TradingHeader) => htmlSafe(`width:calc(var(--header-${header.id}-size) * 1px)`)
-const headerClass = (header: TradingHeader): string => `${isLeaf(header) ? '' : 'column-group-header'} ${isLeaf(header) && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}`
-const cellStyle = (columnId: string) => htmlSafe(`width:calc(var(--col-${columnId}-size) * 1px)`)
-const bodyStyle = (mode: string, height: number) => mode === 'tanstack' ? htmlSafe(`height:${height}px`) : undefined
-const rowStyle = (virtual: VirtualItem | null) => virtual ? htmlSafe(`transform:translateY(${virtual.start}px)`) : undefined
-const edgeAttr = (cell: { getSelectionEdges: () => { top: boolean; right: boolean; bottom: boolean; left: boolean } }, edge: 'top' | 'right' | 'bottom' | 'left'): string | undefined => cell.getSelectionEdges()[edge] ? 'true' : undefined
+const resizeHandler = (header: TradingHeader) => (event: Event) =>
+  header.getResizeHandler()?.(event)
+const indicator = (header: TradingHeader): string =>
+  sortIndicator(header.column.getIsSorted())
+const sortAria = (header: TradingHeader) =>
+  isLeaf(header) ? sortAriaValue(header.column.getIsSorted()) : undefined
+const headerStyle = (header: TradingHeader) =>
+  htmlSafe(`width:calc(var(--header-${header.id}-size) * 1px)`)
+const headerClass = (header: TradingHeader): string =>
+  `${isLeaf(header) ? '' : 'column-group-header'} ${isLeaf(header) && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}`
+const cellStyle = (columnId: string) =>
+  htmlSafe(`width:calc(var(--col-${columnId}-size) * 1px)`)
+const bodyStyle = (mode: string, height: number) =>
+  mode === 'tanstack' ? htmlSafe(`height:${height}px`) : undefined
+const rowStyle = (virtual: VirtualItem | null) =>
+  virtual ? htmlSafe(`transform:translateY(${virtual.start}px)`) : undefined
+const edgeAttr = (
+  cell: {
+    getSelectionEdges: () => {
+      top: boolean
+      right: boolean
+      bottom: boolean
+      left: boolean
+    }
+  },
+  edge: 'top' | 'right' | 'bottom' | 'left',
+): string | undefined => (cell.getSelectionEdges()[edge] ? 'true' : undefined)
 const rowSelected = (row: TradingRow): boolean => row.getIsSelected()
-const cellSelected = (cell: ReturnType<TradingRow['getVisibleCells']>[number]): boolean => cell.getIsSelected()
-const cellFocused = (cell: ReturnType<TradingRow['getVisibleCells']>[number]): string | undefined => cell.getIsFocused() ? 'true' : undefined
-const cellTabIndex = (cell: ReturnType<TradingRow['getVisibleCells']>[number]): number => cell.getTabIndex()
-const virtualIndex = (virtual: VirtualItem | null): number | undefined => virtual?.index
+const cellSelected = (
+  cell: ReturnType<TradingRow['getVisibleCells']>[number],
+): boolean => cell.getIsSelected()
+const cellFocused = (
+  cell: ReturnType<TradingRow['getVisibleCells']>[number],
+): string | undefined => (cell.getIsFocused() ? 'true' : undefined)
+const cellTabIndex = (
+  cell: ReturnType<TradingRow['getVisibleCells']>[number],
+): number => cell.getTabIndex()
+const virtualIndex = (virtual: VirtualItem | null): number | undefined =>
+  virtual?.index
 const eq = (left: unknown, right: unknown): boolean => left === right
 const not = (value: boolean): boolean => !value
diff --git a/examples/ember/realtime-trading/app/table/table-config/quote-cells.gts b/examples/ember/realtime-trading/app/table/table-config/quote-cells.gts
index 478bba1807..2c2f8796c6 100644
--- a/examples/ember/realtime-trading/app/table/table-config/quote-cells.gts
+++ b/examples/ember/realtime-trading/app/table/table-config/quote-cells.gts
@@ -9,12 +9,30 @@ import type { tradingFeatures } from '../trading-features'
 export const quoteCellLifecycle = { created: 0, destroyed: 0 }
 
 export const quoteCellRendererNames = [
-  'Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid',
-  'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday',
+  'Market',
+  'Name',
+  'Symbol',
+  'Last',
+  'Change',
+  'ChangePercent',
+  'Bid',
+  'BidVolume',
+  'Ask',
+  'AskVolume',
+  'Open',
+  'High',
+  'Low',
+  'Intraday',
 ] as const
 export const quoteComponentNames = [
-  'PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell',
-  'PercentChangeCell', 'SpreadCell', 'DepthCell', 'QuoteAgeCell',
+  'PriceCell',
+  'StableMoveCell',
+  'UpMoveCell',
+  'DownMoveCell',
+  'PercentChangeCell',
+  'SpreadCell',
+  'DepthCell',
+  'QuoteAgeCell',
   'SparklineCell',
 ] as const
 export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
@@ -36,24 +54,44 @@ export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
   return value
 }
 
-interface PriceOptions { selectSymbol: (symbol: string) => void }
+interface PriceOptions {
+  selectSymbol: (symbol: string) => void
+}
 abstract class QuoteCell<Signature> extends Component<Signature> {
   constructor(owner: Owner, args: object, name: QuoteComponentName) {
     super(owner, args)
     quoteCellLifecycle.created++
-    registerDestructor(this, () => { quoteCellLifecycle.destroyed++ })
+    registerDestructor(this, () => {
+      quoteCellLifecycle.destroyed++
+    })
   }
 }
 
 export class PriceCell extends QuoteCell<
-  CellRenderableSignature<typeof tradingFeatures, MarketQuote, number, PriceOptions>
+  CellRenderableSignature<
+    typeof tradingFeatures,
+    MarketQuote,
+    number,
+    PriceOptions
+  >
 > {
-  constructor(owner: Owner, args: object) { super(owner, args, 'PriceCell') }
-  get quote() { return this.args.ctx.row.original }
-  select = () => { this.args.options?.selectSymbol(this.quote.symbol) }
+  constructor(owner: Owner, args: object) {
+    super(owner, args, 'PriceCell')
+  }
+  get quote() {
+    return this.args.ctx.row.original
+  }
+  select = () => {
+    this.args.options?.selectSymbol(this.quote.symbol)
+  }
   <template>
     {{recordComponent 'PriceCell'}}
-    <button class='price-button {{if (isPositive this.quote) "quote-up" "quote-down"}}' type='button' {{on 'click' this.select}}>
+    <button
+      class='price-button
+        {{if (isPositive this.quote) "quote-up" "quote-down"}}'
+      type='button'
+      {{on 'click' this.select}}
+    >
       {{fixed this.quote.price}}
     </button>
   </template>
@@ -62,20 +100,33 @@ export class PriceCell extends QuoteCell<
 abstract class MoveCellBase extends QuoteCell<
   CellRenderableSignature<typeof tradingFeatures, MarketQuote, number>
 > {
-  get move() { return this.args.ctx.row.original.price - this.args.ctx.row.original.previousClose }
-  get positive() { return this.move >= 0 }
+  get move() {
+    return (
+      this.args.ctx.row.original.price -
+      this.args.ctx.row.original.previousClose
+    )
+  }
+  get positive() {
+    return this.move >= 0
+  }
 }
 
 export class StableMoveCell extends MoveCellBase {
-  constructor(owner: Owner, args: object) { super(owner, args, 'StableMoveCell') }
+  constructor(owner: Owner, args: object) {
+    super(owner, args, 'StableMoveCell')
+  }
   <template>
     {{recordComponent 'StableMoveCell'}}
-    <span class='move-cell {{if this.positive "quote-up" "quote-down"}}'>{{signed this.move}}</span>
+    <span
+      class='move-cell {{if this.positive "quote-up" "quote-down"}}'
+    >{{signed this.move}}</span>
   </template>
 }
 
 export class UpMoveCell extends MoveCellBase {
-  constructor(owner: Owner, args: object) { super(owner, args, 'UpMoveCell') }
+  constructor(owner: Owner, args: object) {
+    super(owner, args, 'UpMoveCell')
+  }
   <template>
     {{recordComponent 'UpMoveCell'}}
     <span class='move-cell quote-up'>▲ {{signed this.move}}</span>
@@ -83,7 +134,9 @@ export class UpMoveCell extends MoveCellBase {
 }
 
 export class DownMoveCell extends MoveCellBase {
-  constructor(owner: Owner, args: object) { super(owner, args, 'DownMoveCell') }
+  constructor(owner: Owner, args: object) {
+    super(owner, args, 'DownMoveCell')
+  }
   <template>
     {{recordComponent 'DownMoveCell'}}
     <span class='move-cell quote-down'>▼ {{signed this.move}}</span>
@@ -93,48 +146,73 @@ export class DownMoveCell extends MoveCellBase {
 export class PercentChangeCell extends QuoteCell<
   CellRenderableSignature<typeof tradingFeatures, MarketQuote, number>
 > {
-  constructor(owner: Owner, args: object) { super(owner, args, 'PercentChangeCell') }
+  constructor(owner: Owner, args: object) {
+    super(owner, args, 'PercentChangeCell')
+  }
   get value() {
     const quote = this.args.ctx.row.original
-    return quote.previousClose === 0 ? 0 : ((quote.price - quote.previousClose) / quote.previousClose) * 100
+    return quote.previousClose === 0
+      ? 0
+      : ((quote.price - quote.previousClose) / quote.previousClose) * 100
   }
   <template>
     {{recordComponent 'PercentChangeCell'}}
-    <span class='percent-change-cell {{if (nonNegative this.value) "quote-up" "quote-down"}}'>{{percent this.value}}</span>
+    <span
+      class='percent-change-cell
+        {{if (nonNegative this.value) "quote-up" "quote-down"}}'
+    >{{percent this.value}}</span>
   </template>
 }
 
 export class SparklineCell extends QuoteCell<
   CellRenderableSignature<typeof tradingFeatures, MarketQuote>
 > {
-  constructor(owner: Owner, args: object) { super(owner, args, 'SparklineCell') }
-  get values() { return this.args.ctx.row.original.history }
-  get rising() { return (this.values.at(-1) ?? 0) >= (this.values[0] ?? 0) }
+  constructor(owner: Owner, args: object) {
+    super(owner, args, 'SparklineCell')
+  }
+  get values() {
+    return this.args.ctx.row.original.history
+  }
+  get rising() {
+    return (this.values.at(-1) ?? 0) >= (this.values[0] ?? 0)
+  }
   get points() {
     const first = this.values[0] ?? 0
     const range = this.values.reduce(
-      (result, value) => ({ min: Math.min(result.min, value), max: Math.max(result.max, value) }),
+      (result, value) => ({
+        min: Math.min(result.min, value),
+        max: Math.max(result.max, value),
+      }),
       { min: first, max: first },
     )
     const scale = range.max - range.min || 1
     const denominator = Math.max(1, this.values.length - 1)
-    return this.values.map((value, index) => {
-      const x = (index / denominator) * 100
-      const y = 22 - ((value - range.min) / scale) * 20
-      return `${x.toFixed(1)},${y.toFixed(1)}`
-    }).join(' ')
+    return this.values
+      .map((value, index) => {
+        const x = (index / denominator) * 100
+        const y = 22 - ((value - range.min) / scale) * 20
+        return `${x.toFixed(1)},${y.toFixed(1)}`
+      })
+      .join(' ')
   }
   <template>
     {{recordComponent 'SparklineCell'}}
-    <svg class='sparkline {{if this.rising "quote-up" "quote-down"}}' viewBox='0 0 100 24' preserveAspectRatio='none'><polyline points={{this.points}} /></svg>
+    <svg
+      class='sparkline {{if this.rising "quote-up" "quote-down"}}'
+      viewBox='0 0 100 24'
+      preserveAspectRatio='none'
+    ><polyline points={{this.points}} /></svg>
   </template>
 }
 
 const fixed = (value: number): string => value.toFixed(2)
-const signed = (value: number): string => `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
-const percent = (value: number): string => `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`
+const signed = (value: number): string =>
+  `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
+const percent = (value: number): string =>
+  `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`
 const nonNegative = (value: number): boolean => value >= 0
-const isPositive = (quote: MarketQuote): boolean => quote.price - quote.previousClose >= 0
+const isPositive = (quote: MarketQuote): boolean =>
+  quote.price - quote.previousClose >= 0
 const recordComponent = (name: QuoteComponentName): string => {
   quoteRenderDiagnostics.componentRenderCalls++
   quoteRenderDiagnostics.componentRenderCallsByName[name]++
diff --git a/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts b/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
index 809eeb7771..7196530a38 100644
--- a/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
+++ b/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
@@ -29,30 +29,162 @@ export function createTradingColumns(
   rendererMode: RendererMode,
 ): Array<ColumnDef<typeof tradingFeatures, MarketQuote>> {
   return [
-    { id: 'instrument', header: 'Instrument', columns: [
-      { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', row.original.venue) },
-      { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', row.original.company) },
-      { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', row.original.symbol) },
-    ] },
-    { id: 'priceAndChange', header: 'Price & Change', columns: [
-      { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: () => recordCellRender('Last', flexRenderComponent(PriceCell, { selectSymbol: controller.actions.selectSymbol })) },
-      { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', rendererMode === 'stable' ? flexRenderComponent(StableMoveCell) : getDayChange(row.original) >= 0 ? flexRenderComponent(UpMoveCell) : flexRenderComponent(DownMoveCell)) },
-      { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: () => recordCellRender('ChangePercent', flexRenderComponent(PercentChangeCell)) },
-    ] },
-    { id: 'orderBook', header: 'Order Book', columns: [
-      { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
-      { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compact.format(row.original.bidSize)) },
-      { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
-      { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compact.format(row.original.askSize)) },
-    ] },
-    { id: 'session', header: 'Session', columns: [
-      { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
-      { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
-      { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
-    ] },
-    { id: 'chart', header: 'Chart', columns: [
-      { id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: () => recordCellRender('Intraday', flexRenderComponent(SparklineCell)) },
-    ] },
+    {
+      id: 'instrument',
+      header: 'Instrument',
+      columns: [
+        {
+          id: 'market',
+          header: 'Market',
+          size: 72,
+          accessorFn: (row) => row.venue,
+          cell: ({ row }) => recordCellRender('Market', row.original.venue),
+        },
+        {
+          id: 'name',
+          header: 'Name',
+          size: 180,
+          accessorFn: (row) => row.company,
+          cell: ({ row }) => recordCellRender('Name', row.original.company),
+        },
+        {
+          id: 'symbol',
+          header: 'Symbol',
+          size: 92,
+          accessorFn: (row) => row.symbol,
+          filterFn: 'includesString',
+          cell: ({ row }) => recordCellRender('Symbol', row.original.symbol),
+        },
+      ],
+    },
+    {
+      id: 'priceAndChange',
+      header: 'Price & Change',
+      columns: [
+        {
+          id: 'price',
+          header: 'Price',
+          size: 96,
+          accessorFn: (row) => row.price,
+          sortFn: 'basic',
+          cell: () =>
+            recordCellRender(
+              'Last',
+              flexRenderComponent(PriceCell, {
+                selectSymbol: controller.actions.selectSymbol,
+              }),
+            ),
+        },
+        {
+          id: 'change',
+          header: 'Chg',
+          size: 94,
+          accessorFn: getDayChange,
+          cell: ({ row }) =>
+            recordCellRender(
+              'Change',
+              rendererMode === 'stable'
+                ? flexRenderComponent(StableMoveCell)
+                : getDayChange(row.original) >= 0
+                  ? flexRenderComponent(UpMoveCell)
+                  : flexRenderComponent(DownMoveCell),
+            ),
+        },
+        {
+          id: 'changePercent',
+          header: 'Chg%',
+          size: 90,
+          accessorFn: getDayChangePercent,
+          cell: () =>
+            recordCellRender(
+              'ChangePercent',
+              flexRenderComponent(PercentChangeCell),
+            ),
+        },
+      ],
+    },
+    {
+      id: 'orderBook',
+      header: 'Order Book',
+      columns: [
+        {
+          id: 'bid',
+          header: 'Bid',
+          size: 90,
+          accessorFn: (row) => row.bid,
+          cell: ({ row }) =>
+            recordCellRender('Bid', row.original.bid.toFixed(2)),
+        },
+        {
+          id: 'bidSize',
+          header: 'Bid Vol',
+          size: 100,
+          accessorFn: (row) => row.bidSize,
+          cell: ({ row }) =>
+            recordCellRender('BidVolume', compact.format(row.original.bidSize)),
+        },
+        {
+          id: 'ask',
+          header: 'Ask',
+          size: 90,
+          accessorFn: (row) => row.ask,
+          cell: ({ row }) =>
+            recordCellRender('Ask', row.original.ask.toFixed(2)),
+        },
+        {
+          id: 'askSize',
+          header: 'Ask Vol',
+          size: 100,
+          accessorFn: (row) => row.askSize,
+          cell: ({ row }) =>
+            recordCellRender('AskVolume', compact.format(row.original.askSize)),
+        },
+      ],
+    },
+    {
+      id: 'session',
+      header: 'Session',
+      columns: [
+        {
+          id: 'open',
+          header: 'Open',
+          size: 90,
+          accessorFn: (row) => row.open,
+          cell: ({ row }) =>
+            recordCellRender('Open', row.original.open.toFixed(2)),
+        },
+        {
+          id: 'high',
+          header: 'High',
+          size: 90,
+          accessorFn: (row) => row.high,
+          cell: ({ row }) =>
+            recordCellRender('High', row.original.high.toFixed(2)),
+        },
+        {
+          id: 'low',
+          header: 'Low',
+          size: 90,
+          accessorFn: (row) => row.low,
+          cell: ({ row }) =>
+            recordCellRender('Low', row.original.low.toFixed(2)),
+        },
+      ],
+    },
+    {
+      id: 'chart',
+      header: 'Chart',
+      columns: [
+        {
+          id: 'history',
+          header: 'Intraday',
+          size: 150,
+          enableSorting: false,
+          cell: () =>
+            recordCellRender('Intraday', flexRenderComponent(SparklineCell)),
+        },
+      ],
+    },
   ]
 }
 
@@ -73,9 +205,20 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
   rowModelDiagnostics.calls++
   rowModelDiagnostics.hasMeasurement = true
   rowModelDiagnostics.totalDurationMs += duration
-  rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration)
+  rowModelDiagnostics.maxDurationMs = Math.max(
+    rowModelDiagnostics.maxDurationMs,
+    duration,
+  )
   rowModelDiagnostics.lastRowCount = rows.length
-  try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* optional User Timing detail */ }
+  try {
+    performance.measure('tanstack-row-model', {
+      start,
+      end,
+      detail: { rowCount: rows.length },
+    })
+  } catch {
+    /* optional User Timing detail */
+  }
   return rows
 }
 
@@ -84,5 +227,7 @@ export function getDayChange(quote: MarketQuote): number {
 }
 
 export function getDayChangePercent(quote: MarketQuote): number {
-  return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
 }
diff --git a/examples/ember/realtime-trading/app/templates/application.gts b/examples/ember/realtime-trading/app/templates/application.gts
index fedc2658e9..695fb27818 100644
--- a/examples/ember/realtime-trading/app/templates/application.gts
+++ b/examples/ember/realtime-trading/app/templates/application.gts
@@ -19,5 +19,7 @@ export default class Application extends Component {
     })
   }
 
-  <template><TradingShell @controller={{this.controller}} @feed={{this.feed}} /></template>
+  <template>
+    <TradingShell @controller={{this.controller}} @feed={{this.feed}} />
+  </template>
 }
diff --git a/examples/ember/realtime-trading/app/utils/subscriptions.ts b/examples/ember/realtime-trading/app/utils/subscriptions.ts
index a2f3b86fa6..83ef1b151a 100644
--- a/examples/ember/realtime-trading/app/utils/subscriptions.ts
+++ b/examples/ember/realtime-trading/app/utils/subscriptions.ts
@@ -1,6 +1,8 @@
 import { registerDestructor } from '@ember/destroyable'
 
-interface Subscription { unsubscribe: () => void }
+interface Subscription {
+  unsubscribe: () => void
+}
 interface Subscribable<T> {
   get: () => T
   subscribe: (listener: (value: T) => void) => Subscription
diff --git a/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts b/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
index 6806f95afc..8918149657 100644
--- a/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
@@ -56,7 +56,9 @@ test('runs the Ember realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
diff --git a/examples/lit/realtime-trading/README.md b/examples/lit/realtime-trading/README.md
index 02490da948..7ddb4d630b 100644
--- a/examples/lit/realtime-trading/README.md
+++ b/examples/lit/realtime-trading/README.md
@@ -24,16 +24,16 @@ Use the production build for measurements.
 
 ## Structure and ownership
 
-| Path | Responsibility |
-| --- | --- |
-| `src/feed/` | Market types, instruments, configuration, immutable updates, and Store-backed feed controller. |
-| `src/feed/worker/` | Protocol, deterministic engine, and module worker. |
-| `src/benchmark/` | Browser monitor, benchmark controller, table timing, and row-model diagnostics. |
-| `src/shell/` | Custom elements for header, metrics, controls, diagnostics, selected instrument, status, and layout. |
-| `src/shell/controller-element.ts` | Base element that subscribes to controller sources and releases subscriptions on disconnect. |
-| `src/table/table-config/` | Grouped columns and custom quote cell elements. |
-| `src/table/` | Lit Table element, delegated interactions, column layout, and Lit Virtual integration. |
-| `src/main.ts` | Root custom element that creates, starts, stops, and passes the controllers. |
+| Path                              | Responsibility                                                                                       |
+| --------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `src/feed/`                       | Market types, instruments, configuration, immutable updates, and Store-backed feed controller.       |
+| `src/feed/worker/`                | Protocol, deterministic engine, and module worker.                                                   |
+| `src/benchmark/`                  | Browser monitor, benchmark controller, table timing, and row-model diagnostics.                      |
+| `src/shell/`                      | Custom elements for header, metrics, controls, diagnostics, selected instrument, status, and layout. |
+| `src/shell/controller-element.ts` | Base element that subscribes to controller sources and releases subscriptions on disconnect.         |
+| `src/table/table-config/`         | Grouped columns and custom quote cell elements.                                                      |
+| `src/table/`                      | Lit Table element, delegated interactions, column layout, and Lit Virtual integration.               |
+| `src/main.ts`                     | Root custom element that creates, starts, stops, and passes the controllers.                         |
 
 The feed controller is independent from the benchmark controller. The root
 passes stable controller objects; each shell/table custom element observes the
diff --git a/examples/lit/realtime-trading/index.html b/examples/lit/realtime-trading/index.html
index d4e04c8700..25afac7a22 100644
--- a/examples/lit/realtime-trading/index.html
+++ b/examples/lit/realtime-trading/index.html
@@ -1 +1,12 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>TanStack Lit Table · Realtime Trading</title></head><body><realtime-trading-app></realtime-trading-app><script type="module" src="/src/main.ts"></script></body></html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Lit Table · Realtime Trading</title>
+  </head>
+  <body>
+    <realtime-trading-app></realtime-trading-app>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/lit/realtime-trading/package.json b/examples/lit/realtime-trading/package.json
index 9658644002..0faf16cf38 100644
--- a/examples/lit/realtime-trading/package.json
+++ b/examples/lit/realtime-trading/package.json
@@ -3,13 +3,22 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "start": "vite", "dev": "vite", "build": "vite build", "serve": "vite preview",
-    "lint": "eslint ./src", "test:types": "tsc --noEmit",
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src",
+    "test:types": "tsc --noEmit",
     "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
   },
   "dependencies": {
-    "@tanstack/lit-table": "9.1.2", "@tanstack/lit-virtual": "^3.13.36",
-    "@tanstack/store": "^0.11.0", "lit": "^3.3.3"
+    "@tanstack/lit-table": "9.1.2",
+    "@tanstack/lit-virtual": "^3.13.36",
+    "@tanstack/store": "^0.11.0",
+    "lit": "^3.3.3"
   },
-  "devDependencies": { "typescript": "6.0.3", "vite": "^8.2.0" }
+  "devDependencies": {
+    "typescript": "6.0.3",
+    "vite": "^8.2.0"
+  }
 }
diff --git a/examples/lit/realtime-trading/src/main.ts b/examples/lit/realtime-trading/src/main.ts
index 247f5f4e85..b0c36824e4 100644
--- a/examples/lit/realtime-trading/src/main.ts
+++ b/examples/lit/realtime-trading/src/main.ts
@@ -9,16 +9,27 @@ import './index.css'
 export class RealtimeTradingApp extends LitElement {
   readonly #feed = new MarketFeedController()
   readonly #benchmark = new TradingBenchmarkController(this.#feed)
-  readonly #stop = { feed: null as (() => void) | null, benchmark: null as (() => void) | null }
-  protected createRenderRoot() { return this }
+  readonly #stop = {
+    feed: null as (() => void) | null,
+    benchmark: null as (() => void) | null,
+  }
+  protected createRenderRoot() {
+    return this
+  }
   connectedCallback() {
     super.connectedCallback()
     this.#stop.feed = this.#feed.start()
     this.#stop.benchmark = this.#benchmark.start()
   }
   disconnectedCallback() {
-    this.#stop.benchmark?.(); this.#stop.feed?.()
+    this.#stop.benchmark?.()
+    this.#stop.feed?.()
     super.disconnectedCallback()
   }
-  protected render() { return html`<trading-shell .controller=${this.#benchmark} .feed=${this.#feed}></trading-shell>` }
+  protected render() {
+    return html`<trading-shell
+      .controller=${this.#benchmark}
+      .feed=${this.#feed}
+    ></trading-shell>`
+  }
 }
diff --git a/examples/lit/realtime-trading/src/shell/AppHeader.ts b/examples/lit/realtime-trading/src/shell/AppHeader.ts
index 18e823d7eb..553ec4f452 100644
--- a/examples/lit/realtime-trading/src/shell/AppHeader.ts
+++ b/examples/lit/realtime-trading/src/shell/AppHeader.ts
@@ -8,9 +8,33 @@ export class AppHeader extends ControllerElement {
   @property({ attribute: false }) feed!: MarketFeedController
   @property({ type: Boolean }) sidebarOpen = true
   @property({ attribute: false }) toggleSidebar: () => void = () => undefined
-  protected firstUpdated() { this.observe(this.feed.store) }
+  protected firstUpdated() {
+    this.observe(this.feed.store)
+  }
   protected render() {
     const state = this.feed.store.get()
-    return html`<header class="app-bar"><div class="brand"><strong>MARKET MONITOR</strong></div><div class="header-actions"><span class="feed-status ${state.workerReady && state.running ? 'is-running' : ''}" data-testid="feed-status"><span class="status-dot" aria-hidden="true"></span>${!state.workerReady ? 'FEED CONNECTING' : state.running ? 'FEED LIVE' : 'FEED PAUSED'}</span><button class="sidebar-toggle" type="button" aria-expanded=${this.sidebarOpen} aria-controls="benchmark-configurator" aria-label=${this.sidebarOpen ? 'Close configurator' : 'Open configurator'} @click=${this.toggleSidebar}><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect><path d="M12.5 3v14"></path></svg></button></div></header>`
+    return html`<header class="app-bar">
+      <div class="brand"><strong>MARKET MONITOR</strong></div>
+      <div class="header-actions">
+        <span
+          class="feed-status ${state.workerReady && state.running ? 'is-running' : ''}"
+          data-testid="feed-status"
+          ><span class="status-dot" aria-hidden="true"></span
+          >${!state.workerReady ? 'FEED CONNECTING' : state.running ? 'FEED LIVE' : 'FEED PAUSED'}</span
+        ><button
+          class="sidebar-toggle"
+          type="button"
+          aria-expanded=${this.sidebarOpen}
+          aria-controls="benchmark-configurator"
+          aria-label=${this.sidebarOpen ? 'Close configurator' : 'Open configurator'}
+          @click=${this.toggleSidebar}
+        >
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect>
+            <path d="M12.5 3v14"></path>
+          </svg>
+        </button>
+      </div>
+    </header>`
   }
 }
diff --git a/examples/lit/realtime-trading/src/shell/Configurator.ts b/examples/lit/realtime-trading/src/shell/Configurator.ts
index df724f7f8e..a0d111eb09 100644
--- a/examples/lit/realtime-trading/src/shell/Configurator.ts
+++ b/examples/lit/realtime-trading/src/shell/Configurator.ts
@@ -1,8 +1,15 @@
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
-import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from '../feed/feed-sample-rates'
-import { FORCED_VIRTUALIZATION_ROW_COUNT, resolveVirtualScrollMode } from '../table/trading-row-virtualizer'
+import {
+  feedSampleRateAt,
+  feedSampleRateIndex,
+  feedSampleRateOptions,
+} from '../feed/feed-sample-rates'
+import {
+  FORCED_VIRTUALIZATION_ROW_COUNT,
+  resolveVirtualScrollMode,
+} from '../table/trading-row-virtualizer'
 import { configuratorOptions } from './configurator-options'
 import { ControllerElement } from './controller-element'
 import './Diagnostics'
@@ -10,37 +17,167 @@ import './SelectedInstrument'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
 
-const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
-const value = (event: Event) => (event.target as HTMLInputElement | HTMLSelectElement).value
+const rate = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+const value = (event: Event) =>
+  (event.target as HTMLInputElement | HTMLSelectElement).value
 const number = (event: Event) => Number(value(event))
 const checked = (event: Event) => (event.target as HTMLInputElement).checked
-const options = (items: ReadonlyArray<{ readonly label: string; readonly value: number | string }>) => repeat(items, (item) => item.value, (item) => html`<option value=${item.value}>${item.label}</option>`)
+const options = (
+  items: ReadonlyArray<{
+    readonly label: string
+    readonly value: number | string
+  }>,
+) =>
+  repeat(
+    items,
+    (item) => item.value,
+    (item) => html`<option value=${item.value}>${item.label}</option>`,
+  )
 
 @customElement('trading-configurator')
 export class Configurator extends ControllerElement {
   @property({ attribute: false }) controller!: TradingBenchmarkController
   @property({ attribute: false }) feed!: MarketFeedController
-  protected firstUpdated() { this.observe(this.controller.store); this.observe(this.controller.renderAtoms.rendererMode); this.observe(this.feed.store) }
+  protected firstUpdated() {
+    this.observe(this.controller.store)
+    this.observe(this.controller.renderAtoms.rendererMode)
+    this.observe(this.feed.store)
+  }
   protected render() {
-    const feedState = this.feed.store.get(); const benchmark = this.controller.store.get()
+    const feedState = this.feed.store.get()
+    const benchmark = this.controller.store.get()
     const forced = feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
-    const virtualMode = resolveVirtualScrollMode(benchmark.requestedVirtualScrollMode, feedState.instrumentCount)
-    return html`<aside id="benchmark-configurator" class="configurator" aria-label="Benchmark configurator">
+    const virtualMode = resolveVirtualScrollMode(
+      benchmark.requestedVirtualScrollMode,
+      feedState.instrumentCount,
+    )
+    return html`<aside
+      id="benchmark-configurator"
+      class="configurator"
+      aria-label="Benchmark configurator"
+    >
       <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
-      <section class="config-section" aria-labelledby="feed-settings"><h2 id="feed-settings">FEED</h2>
-        <button class="primary-action" type="button" data-testid="feed-toggle" @click=${this.feed.actions.toggle}>${feedState.running ? 'PAUSE FEED' : 'START FEED'}</button>
-        <label class="field"><span>Instruments (rows)</span><select data-testid="instrument-count-select" .value=${String(feedState.instrumentCount)} @change=${(event: Event) => { this.controller.actions.resetViewState(); this.feed.actions.setInstrumentCount(number(event)) }}>${options(configuratorOptions.instrumentCounts)}</select></label>
-        <label class="field rate-field"><span>Synthetic quote workload <strong data-testid="target-sample-rate">${rate.format(feedState.targetTicksPerSecond)} samples/s</strong></span><input data-testid="target-rate-slider" type="range" min="0" max=${feedSampleRateOptions.length - 1} step="1" .value=${String(feedSampleRateIndex(feedState.targetTicksPerSecond))} @change=${(event: Event) => this.feed.actions.setTargetRate(feedSampleRateAt(number(event)))} /><small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small></label>
-        <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" .value=${String(feedState.publishIntervalMs)} @change=${(event: Event) => this.feed.actions.setPublishInterval(number(event))}>${options(configuratorOptions.workerDeliveryIntervals)}</select><small>One coalesced worker message at this target cadence.</small></label>
+      <section class="config-section" aria-labelledby="feed-settings">
+        <h2 id="feed-settings">FEED</h2>
+        <button
+          class="primary-action"
+          type="button"
+          data-testid="feed-toggle"
+          @click=${this.feed.actions.toggle}
+        >
+          ${feedState.running ? 'PAUSE FEED' : 'START FEED'}
+        </button>
+        <label class="field"
+          ><span>Instruments (rows)</span
+          ><select
+            data-testid="instrument-count-select"
+            .value=${String(feedState.instrumentCount)}
+            @change=${(event: Event) => {
+          this.controller.actions.resetViewState()
+          this.feed.actions.setInstrumentCount(number(event))
+        }}
+          >
+            ${options(configuratorOptions.instrumentCounts)}
+          </select></label
+        >
+        <label class="field rate-field"
+          ><span
+            >Synthetic quote workload
+            <strong data-testid="target-sample-rate"
+              >${rate.format(feedState.targetTicksPerSecond)} samples/s</strong
+            ></span
+          ><input
+            data-testid="target-rate-slider"
+            type="range"
+            min="0"
+            max=${feedSampleRateOptions.length - 1}
+            step="1"
+            .value=${String(feedSampleRateIndex(feedState.targetTicksPerSecond))}
+            @change=${(event: Event) => this.feed.actions.setTargetRate(feedSampleRateAt(number(event)))}
+          /><small
+            >Fixed worker-side workload levels. Samples are coalesced; this is
+            not the message delivery rate.</small
+          ></label
+        >
+        <label class="field"
+          ><span>Worker delivery interval</span
+          ><select
+            data-testid="publish-interval-select"
+            .value=${String(feedState.publishIntervalMs)}
+            @change=${(event: Event) => this.feed.actions.setPublishInterval(number(event))}
+          >
+            ${options(configuratorOptions.workerDeliveryIntervals)}</select
+          ><small
+            >One coalesced worker message at this target cadence.</small
+          ></label
+        >
+      </section>
+      <section class="config-section" aria-labelledby="render-settings">
+        <h2 id="render-settings">RENDER PATH</h2>
+        <label class="field" data-testid="virtual-scroll-mode"
+          ><span>Row rendering</span
+          ><select
+            data-testid="virtual-scroll-select"
+            .value=${virtualMode}
+            ?disabled=${forced}
+            @change=${(event: Event) => this.controller.actions.setVirtualScrollEnabled(value(event) === 'tanstack')}
+          >
+            ${options(configuratorOptions.rowRenderingModes)}</select
+          ><small
+            >${forced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}</small
+          ></label
+        >
+        <label class="toggle-field"
+          ><input
+            type="checkbox"
+            .checked=${this.controller.renderAtoms.rendererMode.get() === 'swap'}
+            @change=${(event: Event) => this.controller.actions.setRendererMode(checked(event) ? 'swap' : 'stable')}
+          /><span
+            >Swap Tick component A ↔ B<small
+              >destroy and recreate when direction changes</small
+            ></span
+          ></label
+        >
+        <label class="toggle-field"
+          ><input
+            type="checkbox"
+            .checked=${feedState.updateSparklines}
+            @change=${(event: Event) => this.feed.actions.setSparklineUpdates(checked(event))}
+          /><span
+            >Update intraday charts<small
+              >sample rolling prices independently</small
+            ></span
+          ></label
+        >
+        <label class="field"
+          ><span>Intraday chart sampling</span
+          ><select
+            data-testid="sparkline-sample-interval-select"
+            .value=${String(feedState.sparklineSampleIntervalMs)}
+            @change=${(event: Event) => this.feed.actions.setSparklineSampleInterval(number(event))}
+          >
+            ${options(configuratorOptions.intradaySamplingIntervals)}
+          </select></label
+        >
       </section>
-      <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
-        <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" .value=${virtualMode} ?disabled=${forced} @change=${(event: Event) => this.controller.actions.setVirtualScrollEnabled(value(event) === 'tanstack')}>${options(configuratorOptions.rowRenderingModes)}</select><small>${forced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}</small></label>
-        <label class="toggle-field"><input type="checkbox" .checked=${this.controller.renderAtoms.rendererMode.get() === 'swap'} @change=${(event: Event) => this.controller.actions.setRendererMode(checked(event) ? 'swap' : 'stable')} /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
-        <label class="toggle-field"><input type="checkbox" .checked=${feedState.updateSparklines} @change=${(event: Event) => this.feed.actions.setSparklineUpdates(checked(event))} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
-        <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" .value=${String(feedState.sparklineSampleIntervalMs)} @change=${(event: Event) => this.feed.actions.setSparklineSampleInterval(number(event))}>${options(configuratorOptions.intradaySamplingIntervals)}</select></label>
+      <section class="config-section" aria-labelledby="stress-actions">
+        <h2 id="stress-actions">STRESS ACTIONS</h2>
+        <div class="action-grid">
+          <button type="button" @click=${this.feed.actions.runBurst}>
+            RUN 25K BURST</button
+          ><button type="button" @click=${this.controller.actions.resetMarket}>
+            RESET SESSION
+          </button>
+        </div>
       </section>
-      <section class="config-section" aria-labelledby="stress-actions"><h2 id="stress-actions">STRESS ACTIONS</h2><div class="action-grid"><button type="button" @click=${this.feed.actions.runBurst}>RUN 25K BURST</button><button type="button" @click=${this.controller.actions.resetMarket}>RESET SESSION</button></div></section>
-      <trading-diagnostics .controller=${this.controller}></trading-diagnostics><trading-selected-instrument .controller=${this.controller} .feed=${this.feed}></trading-selected-instrument>
+      <trading-diagnostics .controller=${this.controller}></trading-diagnostics
+      ><trading-selected-instrument
+        .controller=${this.controller}
+        .feed=${this.feed}
+      ></trading-selected-instrument>
     </aside>`
   }
 }
diff --git a/examples/lit/realtime-trading/src/shell/Diagnostics.ts b/examples/lit/realtime-trading/src/shell/Diagnostics.ts
index 59312e9dda..f4257f9696 100644
--- a/examples/lit/realtime-trading/src/shell/Diagnostics.ts
+++ b/examples/lit/realtime-trading/src/shell/Diagnostics.ts
@@ -6,31 +6,114 @@ import type { NamedInvocationRate } from '../benchmark/benchmark-monitor'
 import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
 
 const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
-const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const rate = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
 const ms = (value: number) => `${value.toFixed(2)} ms`
-const invocations = (values: ReadonlyArray<NamedInvocationRate>) => { const active = values.filter((entry) => entry.callsPerSecond > 0); return active.length ? active.map((entry) => `${entry.name} ${rate.format(entry.callsPerSecond)}`).join(' · ') : '—' }
+const invocations = (values: ReadonlyArray<NamedInvocationRate>) => {
+  const active = values.filter((entry) => entry.callsPerSecond > 0)
+  return active.length
+    ? active
+        .map((entry) => `${entry.name} ${rate.format(entry.callsPerSecond)}`)
+        .join(' · ')
+    : '—'
+}
 @customElement('trading-diagnostics')
 export class Diagnostics extends ControllerElement {
   @property({ attribute: false }) controller!: TradingBenchmarkController
-  protected firstUpdated() { this.observe(this.controller.store) }
+  protected firstUpdated() {
+    this.observe(this.controller.store)
+  }
   protected render() {
-    const state = this.controller.store.get(); const metrics = state.metrics
+    const state = this.controller.store.get()
+    const metrics = state.metrics
     const items = [
-      ['Mounted cells', integer.format(state.mountedCells), ''], ['Live components', integer.format(state.liveComponents), ''],
-      ['Created / destroyed', `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`, ''],
-      ['Renderer callbacks / s', rate.format(metrics.cellRendererCallsPerSecond), 'cell-render-rate'],
-      ['Component executions / s', rate.format(metrics.componentRenderCallsPerSecond), 'component-render-rate'],
-      ['Executions by component / s', invocations(metrics.componentRenderRates), 'component-render-breakdown'],
-      ['Callbacks by column / s', invocations(metrics.cellRendererRates), 'cell-render-breakdown'],
-      ['DOM mutation records / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'],
-      ['Core row model calls / s', metrics.rowModelCallsPerSecond.toFixed(1), 'row-model-call-rate'],
-      ['Core row model avg / max', `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, 'row-model-duration'],
-      ['Visible rows', integer.format(metrics.visibleRows), 'visible-row-count'],
-      ['Worker messages', integer.format(metrics.workerMessages), 'worker-messages'],
-      ['Worker-coalesced updates / s', rate.format(metrics.supersededUpdatesPerSecond), 'superseded-update-rate'],
-      ['Last samples / updated rows', `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`, ''],
-      ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''], ['JS heap', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, ''],
+      ['Mounted cells', integer.format(state.mountedCells), ''],
+      ['Live components', integer.format(state.liveComponents), ''],
+      [
+        'Created / destroyed',
+        `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`,
+        '',
+      ],
+      [
+        'Renderer callbacks / s',
+        rate.format(metrics.cellRendererCallsPerSecond),
+        'cell-render-rate',
+      ],
+      [
+        'Component executions / s',
+        rate.format(metrics.componentRenderCallsPerSecond),
+        'component-render-rate',
+      ],
+      [
+        'Executions by component / s',
+        invocations(metrics.componentRenderRates),
+        'component-render-breakdown',
+      ],
+      [
+        'Callbacks by column / s',
+        invocations(metrics.cellRendererRates),
+        'cell-render-breakdown',
+      ],
+      [
+        'DOM mutation records / s',
+        rate.format(metrics.domMutationsPerSecond),
+        'dom-mutation-rate',
+      ],
+      [
+        'Core row model calls / s',
+        metrics.rowModelCallsPerSecond.toFixed(1),
+        'row-model-call-rate',
+      ],
+      [
+        'Core row model avg / max',
+        `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`,
+        'row-model-duration',
+      ],
+      [
+        'Visible rows',
+        integer.format(metrics.visibleRows),
+        'visible-row-count',
+      ],
+      [
+        'Worker messages',
+        integer.format(metrics.workerMessages),
+        'worker-messages',
+      ],
+      [
+        'Worker-coalesced updates / s',
+        rate.format(metrics.supersededUpdatesPerSecond),
+        'superseded-update-rate',
+      ],
+      [
+        'Last samples / updated rows',
+        `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`,
+        '',
+      ],
+      ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''],
+      [
+        'JS heap',
+        metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`,
+        '',
+      ],
     ] as const
-    return html`<section class="config-section diagnostics" aria-labelledby="diagnostics"><h2 id="diagnostics">DIAGNOSTICS</h2><dl>${repeat(items, (item) => item[0], (item) => html`<div><dt>${item[0]}</dt><dd data-testid=${item[2] || undefined}>${item[1]}</dd></div>`)}</dl></section>`
+    return html`<section
+      class="config-section diagnostics"
+      aria-labelledby="diagnostics"
+    >
+      <h2 id="diagnostics">DIAGNOSTICS</h2>
+      <dl>
+        ${repeat(
+          items,
+          (item) => item[0],
+          (item) =>
+            html`<div>
+              <dt>${item[0]}</dt>
+              <dd data-testid=${item[2] || undefined}>${item[1]}</dd>
+            </div>`,
+        )}
+      </dl>
+    </section>`
   }
 }
diff --git a/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts b/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
index 77924ab04a..3a1b24ce05 100644
--- a/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
+++ b/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
@@ -7,6 +7,23 @@ const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
 @customElement('trading-market-statusbar')
 export class MarketStatusbar extends ControllerElement {
   @property({ attribute: false }) controller!: TradingBenchmarkController
-  protected firstUpdated() { this.observe(this.controller.store) }
-  protected render() { const state = this.controller.store.get(); return html`<footer class="market-statusbar"><span>MESSAGE SAMPLES <strong>${integer.format(state.metrics.lastBatchSize)}</strong></span><span>ROW UPDATES <strong>${integer.format(state.metrics.lastUpdateCount)}</strong></span><span>HOSTS <strong>${integer.format(state.mountedCells)}</strong></span><span>COMPONENTS <strong>${integer.format(state.liveComponents)}</strong></span></footer>` }
+  protected firstUpdated() {
+    this.observe(this.controller.store)
+  }
+  protected render() {
+    const state = this.controller.store.get()
+    return html`<footer class="market-statusbar">
+      <span
+        >MESSAGE SAMPLES
+        <strong>${integer.format(state.metrics.lastBatchSize)}</strong></span
+      ><span
+        >ROW UPDATES
+        <strong>${integer.format(state.metrics.lastUpdateCount)}</strong></span
+      ><span>HOSTS <strong>${integer.format(state.mountedCells)}</strong></span
+      ><span
+        >COMPONENTS
+        <strong>${integer.format(state.liveComponents)}</strong></span
+      >
+    </footer>`
+  }
 }
diff --git a/examples/lit/realtime-trading/src/shell/MetricsStrip.ts b/examples/lit/realtime-trading/src/shell/MetricsStrip.ts
index cb3597b996..442fa6ac04 100644
--- a/examples/lit/realtime-trading/src/shell/MetricsStrip.ts
+++ b/examples/lit/realtime-trading/src/shell/MetricsStrip.ts
@@ -4,24 +4,83 @@ import { repeat } from 'lit/directives/repeat.js'
 import { ControllerElement } from './controller-element'
 import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
 
-const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const rate = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
 const ms = (value: number) => `${value.toFixed(2)} ms`
 @customElement('trading-metrics-strip')
 export class MetricsStrip extends ControllerElement {
   @property({ attribute: false }) controller!: TradingBenchmarkController
-  protected firstUpdated() { this.observe(this.controller.store) }
+  protected firstUpdated() {
+    this.observe(this.controller.store)
+  }
   protected render() {
-    const state = this.controller.store.get(); const metrics = state.metrics
+    const state = this.controller.store.get()
+    const metrics = state.metrics
     const items = [
-      ['WORKER SAMPLES', rate.format(metrics.actualTicksPerSecond), 'generated samples/s', 'actual-rate'],
-      ['ROW UPDATES', rate.format(metrics.rowUpdatesPerSecond), 'unique rows applied/s', 'row-update-rate'],
-      ['MESSAGES', metrics.workerMessagesPerSecond.toFixed(1), 'worker messages/s', 'message-rate'],
-      ['STATE APPLIES', metrics.stateApplicationsPerSecond.toFixed(1), 'quote snapshots/s', 'state-apply-rate'],
-      ['TABLE COMMITS', metrics.tableRendersPerSecond.toFixed(1), 'completed renders/s', 'table-render-rate'],
+      [
+        'WORKER SAMPLES',
+        rate.format(metrics.actualTicksPerSecond),
+        'generated samples/s',
+        'actual-rate',
+      ],
+      [
+        'ROW UPDATES',
+        rate.format(metrics.rowUpdatesPerSecond),
+        'unique rows applied/s',
+        'row-update-rate',
+      ],
+      [
+        'MESSAGES',
+        metrics.workerMessagesPerSecond.toFixed(1),
+        'worker messages/s',
+        'message-rate',
+      ],
+      [
+        'STATE APPLIES',
+        metrics.stateApplicationsPerSecond.toFixed(1),
+        'quote snapshots/s',
+        'state-apply-rate',
+      ],
+      [
+        'TABLE COMMITS',
+        metrics.tableRendersPerSecond.toFixed(1),
+        'completed renders/s',
+        'table-render-rate',
+      ],
       ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
-      ['P95 RENDER', ms(metrics.p95RenderMs), `max ${ms(metrics.maxRenderMs)}`, ''],
-      ['LONG FRAMES', state.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', state.longAnimationFramesSupported ? `worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
+      [
+        'P95 RENDER',
+        ms(metrics.p95RenderMs),
+        `max ${ms(metrics.maxRenderMs)}`,
+        '',
+      ],
+      [
+        'LONG FRAMES',
+        state.longAnimationFramesSupported
+          ? String(metrics.longAnimationFrames)
+          : 'N/A',
+        state.longAnimationFramesSupported
+          ? `worst ${ms(metrics.worstLongAnimationFrameMs)}`
+          : 'unsupported',
+        'long-frame-count',
+      ],
     ] as const
-    return html`<section class="metrics-strip" aria-label="Live performance metrics">${repeat(items, (item) => item[0], (item) => html`<article><span>${item[0]}</span><strong data-testid=${item[3] || undefined}>${item[1]}</strong><small>${item[2]}</small></article>`)}</section>`
+    return html`<section
+      class="metrics-strip"
+      aria-label="Live performance metrics"
+    >
+      ${repeat(
+        items,
+        (item) => item[0],
+        (item) =>
+          html`<article>
+            <span>${item[0]}</span
+            ><strong data-testid=${item[3] || undefined}>${item[1]}</strong
+            ><small>${item[2]}</small>
+          </article>`,
+      )}
+    </section>`
   }
 }
diff --git a/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts b/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
index fdae1d071a..ac5e406294 100644
--- a/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
+++ b/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
@@ -8,9 +8,43 @@ import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-
 export class SelectedInstrument extends ControllerElement {
   @property({ attribute: false }) controller!: TradingBenchmarkController
   @property({ attribute: false }) feed!: MarketFeedController
-  protected firstUpdated() { this.observe(this.controller.renderAtoms.selectedSymbol); this.observe(this.feed.store) }
+  protected firstUpdated() {
+    this.observe(this.controller.renderAtoms.selectedSymbol)
+    this.observe(this.feed.store)
+  }
   protected render() {
-    const quote = this.feed.getQuoteBySymbol(this.feed.store.get().quotes, this.controller.renderAtoms.selectedSymbol.get())
-    return html`<section class="config-section selected-instrument" data-testid="selected-instrument"><h2>SELECTED INSTRUMENT</h2>${quote ? html`<div class="selection"><div><strong>${quote.symbol}</strong><span>${quote.company}</span></div><small>${quote.venue}</small></div><dl><div><dt>Last</dt><dd>${quote.price.toFixed(2)}</dd></div><div><dt>Bid / ask</dt><dd>${quote.bid.toFixed(2)} / ${quote.ask.toFixed(2)}</dd></div></dl>` : html`<p>Click or begin a cell selection in any row to inspect its instrument.</p>`}</section>`
+    const quote = this.feed.getQuoteBySymbol(
+      this.feed.store.get().quotes,
+      this.controller.renderAtoms.selectedSymbol.get(),
+    )
+    return html`<section
+      class="config-section selected-instrument"
+      data-testid="selected-instrument"
+    >
+      <h2>SELECTED INSTRUMENT</h2>
+      ${
+        quote
+          ? html`<div class="selection">
+                <div>
+                  <strong>${quote.symbol}</strong><span>${quote.company}</span>
+                </div>
+                <small>${quote.venue}</small>
+              </div>
+              <dl>
+                <div>
+                  <dt>Last</dt>
+                  <dd>${quote.price.toFixed(2)}</dd>
+                </div>
+                <div>
+                  <dt>Bid / ask</dt>
+                  <dd>${quote.bid.toFixed(2)} / ${quote.ask.toFixed(2)}</dd>
+                </div>
+              </dl>`
+          : html`<p>
+              Click or begin a cell selection in any row to inspect its
+              instrument.
+            </p>`
+      }
+    </section>`
   }
 }
diff --git a/examples/lit/realtime-trading/src/shell/TradingShell.ts b/examples/lit/realtime-trading/src/shell/TradingShell.ts
index 39d3520ef0..70d23587d9 100644
--- a/examples/lit/realtime-trading/src/shell/TradingShell.ts
+++ b/examples/lit/realtime-trading/src/shell/TradingShell.ts
@@ -15,11 +15,34 @@ export class TradingShell extends ControllerElement {
   @property({ attribute: false }) feed!: MarketFeedController
   @state() private sidebarOpen = true
   protected render() {
-    return html`<main class="trading-terminal ${this.sidebarOpen ? '' : 'is-sidebar-collapsed'}">
-      <div class="shell-header"><trading-app-header .feed=${this.feed} .sidebarOpen=${this.sidebarOpen} .toggleSidebar=${() => { this.sidebarOpen = !this.sidebarOpen }}></trading-app-header>${import.meta.env.DEV ? html`<aside class="development-warning">DEV BUILD — use the production build before recording results.</aside>` : null}</div>
-      <section class="market-panel" aria-label="Live synthetic quotes"><trading-metrics-strip .controller=${this.controller}></trading-metrics-strip><trading-data-table .controller=${this.controller} .feed=${this.feed}></trading-data-table></section>
-      <trading-market-statusbar .controller=${this.controller}></trading-market-statusbar>
-      <div class="sidebar-slot">${this.sidebarOpen ? html`<trading-configurator .controller=${this.controller} .feed=${this.feed}></trading-configurator>` : null}</div>
+    return html`<main
+      class="trading-terminal ${this.sidebarOpen ? '' : 'is-sidebar-collapsed'}"
+    >
+      <div class="shell-header">
+        <trading-app-header
+          .feed=${this.feed}
+          .sidebarOpen=${this.sidebarOpen}
+          .toggleSidebar=${() => {
+        this.sidebarOpen = !this.sidebarOpen
+      }}
+        ></trading-app-header
+        >${import.meta.env.DEV ? html`<aside class="development-warning">DEV BUILD — use the production build before recording results.</aside>` : null}
+      </div>
+      <section class="market-panel" aria-label="Live synthetic quotes">
+        <trading-metrics-strip
+          .controller=${this.controller}
+        ></trading-metrics-strip
+        ><trading-data-table
+          .controller=${this.controller}
+          .feed=${this.feed}
+        ></trading-data-table>
+      </section>
+      <trading-market-statusbar
+        .controller=${this.controller}
+      ></trading-market-statusbar>
+      <div class="sidebar-slot">
+        ${this.sidebarOpen ? html`<trading-configurator .controller=${this.controller} .feed=${this.feed}></trading-configurator>` : null}
+      </div>
     </main>`
   }
 }
diff --git a/examples/lit/realtime-trading/src/shell/controller-element.ts b/examples/lit/realtime-trading/src/shell/controller-element.ts
index e028b87e19..01ca122f3c 100644
--- a/examples/lit/realtime-trading/src/shell/controller-element.ts
+++ b/examples/lit/realtime-trading/src/shell/controller-element.ts
@@ -3,8 +3,12 @@ import type { Subscription } from '@tanstack/store'
 
 export abstract class ControllerElement extends LitElement {
   readonly #subscriptions: Array<Subscription> = []
-  protected createRenderRoot() { return this }
-  protected observe(source: { subscribe: (listener: () => void) => Subscription }): void {
+  protected createRenderRoot() {
+    return this
+  }
+  protected observe(source: {
+    subscribe: (listener: () => void) => Subscription
+  }): void {
     this.#subscriptions.push(source.subscribe(() => this.requestUpdate()))
   }
   disconnectedCallback() {
diff --git a/examples/lit/realtime-trading/src/table/TradingTable.ts b/examples/lit/realtime-trading/src/table/TradingTable.ts
index f05a6f46a1..f1505e9303 100644
--- a/examples/lit/realtime-trading/src/table/TradingTable.ts
+++ b/examples/lit/realtime-trading/src/table/TradingTable.ts
@@ -3,12 +3,34 @@ import { customElement, property } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { VirtualizerController } from '@tanstack/lit-virtual'
-import { FlexRender, TableController, createFilteredRowModel, createSortedRowModel, filterFn_includesString, sortFn_basic, stockFeatures, tableFeatures } from '@tanstack/lit-table'
+import {
+  FlexRender,
+  TableController,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  sortFn_basic,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/lit-table'
 import { startTableBenchmark } from '../benchmark/table-benchmark'
 import { ControllerElement } from '../shell/controller-element'
-import { createTradingColumns, readMeasuredRows } from './table-config/trading-columns'
-import { TradingGridPointerController, handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from './table-interactions'
-import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode } from './trading-row-virtualizer'
+import {
+  createTradingColumns,
+  readMeasuredRows,
+} from './table-config/trading-columns'
+import {
+  TradingGridPointerController,
+  handleCellNavigation,
+  reorderColumnIds,
+  sortAriaValue,
+  sortIndicator,
+} from './table-interactions'
+import {
+  TRADING_ROW_HEIGHT,
+  TRADING_ROW_OVERSCAN,
+  resolveVirtualScrollMode,
+} from './trading-row-virtualizer'
 import './table-config/quote-cells'
 import type { Ref } from 'lit/directives/ref.js'
 import type { LitTable } from '@tanstack/lit-table'
@@ -18,8 +40,10 @@ import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-
 
 const features = tableFeatures({
   ...stockFeatures,
-  filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(),
-  filterFns: { includesString: filterFn_includesString }, sortFns: { basic: sortFn_basic },
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { basic: sortFn_basic },
 })
 interface SelectedTableState {
   sorting: unknown
@@ -28,82 +52,342 @@ interface SelectedTableState {
   rowSelection: unknown
   cellSelection: unknown
 }
-type TradingTableInstance = LitTable<typeof features, MarketQuote, SelectedTableState>
+type TradingTableInstance = LitTable<
+  typeof features,
+  MarketQuote,
+  SelectedTableState
+>
 
 @customElement('trading-data-table')
 export class TradingTable extends ControllerElement {
   @property({ attribute: false }) controller!: TradingBenchmarkController
   @property({ attribute: false }) feed!: MarketFeedController
-  readonly #tableController = new TableController<typeof features, MarketQuote>(this)
+  readonly #tableController = new TableController<typeof features, MarketQuote>(
+    this,
+  )
   readonly #scrollRef: Ref<HTMLDivElement> = createRef()
   readonly #tableRef: Ref<HTMLTableElement> = createRef()
-  readonly #virtualizer = new VirtualizerController<HTMLDivElement, HTMLTableRowElement>(this, {
-    count: 0, getScrollElement: () => this.#scrollRef.value ?? null,
-    estimateSize: () => TRADING_ROW_HEIGHT, overscan: TRADING_ROW_OVERSCAN,
+  readonly #virtualizer = new VirtualizerController<
+    HTMLDivElement,
+    HTMLTableRowElement
+  >(this, {
+    count: 0,
+    getScrollElement: () => this.#scrollRef.value ?? null,
+    estimateSize: () => TRADING_ROW_HEIGHT,
+    overscan: TRADING_ROW_OVERSCAN,
   })
   readonly #pointer = new TradingGridPointerController()
-  readonly #drag = { columnId: null as string | null, source: null as HTMLTableCellElement | null, target: null as HTMLTableCellElement | null }
+  readonly #drag = {
+    columnId: null as string | null,
+    source: null as HTMLTableCellElement | null,
+    target: null as HTMLTableCellElement | null,
+  }
   readonly #layout = { manuallyResized: false }
   #table?: TradingTableInstance
   #columns?: ReturnType<typeof createTradingColumns<typeof features>>
   #cleanup: Array<() => void> = []
 
   protected firstUpdated() {
-    this.observe(this.feed.store); this.observe(this.controller.store); this.observe(this.controller.renderAtoms.rendererMode); this.observe(this.controller.renderAtoms.selectedSymbol)
+    this.observe(this.feed.store)
+    this.observe(this.controller.store)
+    this.observe(this.controller.renderAtoms.rendererMode)
+    this.observe(this.controller.renderAtoms.selectedSymbol)
     const table = this.#table
     if (!table) return
-    const sizing = table.atoms.columnSizing.subscribe(() => this.#writeColumnSizes())
-    const order = table.atoms.columnOrder.subscribe(() => this.#writeColumnSizes())
-    const resizing = table.atoms.columnResizing.subscribe((state) => { if (state.isResizingColumn !== false) this.#layout.manuallyResized = true })
+    const sizing = table.atoms.columnSizing.subscribe(() =>
+      this.#writeColumnSizes(),
+    )
+    const order = table.atoms.columnOrder.subscribe(() =>
+      this.#writeColumnSizes(),
+    )
+    const resizing = table.atoms.columnResizing.subscribe((state) => {
+      if (state.isResizingColumn !== false) this.#layout.manuallyResized = true
+    })
     const resizeObserver = new ResizeObserver(() => this.#fitAvailableWidth())
     if (this.#scrollRef.value) resizeObserver.observe(this.#scrollRef.value)
-    this.#cleanup.push(() => sizing.unsubscribe(), () => order.unsubscribe(), () => resizing.unsubscribe(), () => resizeObserver.disconnect(), startTableBenchmark(this.controller))
-    this.#writeColumnSizes(); this.#fitAvailableWidth(); this.feed.completeRender()
+    this.#cleanup.push(
+      () => sizing.unsubscribe(),
+      () => order.unsubscribe(),
+      () => resizing.unsubscribe(),
+      () => resizeObserver.disconnect(),
+      startTableBenchmark(this.controller),
+    )
+    this.#writeColumnSizes()
+    this.#fitAvailableWidth()
+    this.feed.completeRender()
+  }
+  protected updated() {
+    this.#writeColumnSizes()
+    this.feed.completeRender()
+  }
+  disconnectedCallback() {
+    for (const cleanup of this.#cleanup) cleanup()
+    this.#cleanup.length = 0
+    super.disconnectedCallback()
   }
-  protected updated() { this.#writeColumnSizes(); this.feed.completeRender() }
-  disconnectedCallback() { for (const cleanup of this.#cleanup) cleanup(); this.#cleanup.length = 0; super.disconnectedCallback() }
 
   #writeColumnSizes() {
-    const element = this.#tableRef.value; const table = this.#table
+    const element = this.#tableRef.value
+    const table = this.#table
     if (!element || !table) return
-    for (const header of table.getFlatHeaders()) { element.style.setProperty(`--header-${header.id}-size`, String(header.getSize())); element.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize())) }
+    for (const header of table.getFlatHeaders()) {
+      element.style.setProperty(
+        `--header-${header.id}-size`,
+        String(header.getSize()),
+      )
+      element.style.setProperty(
+        `--col-${header.column.id}-size`,
+        String(header.column.getSize()),
+      )
+    }
     element.style.width = `${table.getTotalSize()}px`
   }
   #fitAvailableWidth() {
-    const container = this.#scrollRef.value; const table = this.#table
+    const container = this.#scrollRef.value
+    const table = this.#table
     if (!container || !table || this.#layout.manuallyResized) return
-    const width = table.getTotalSize(); if (container.clientWidth <= width + 1 || width <= 0) return
+    const width = table.getTotalSize()
+    if (container.clientWidth <= width + 1 || width <= 0) return
     const ratio = container.clientWidth / width
-    table.setColumnSizing(Object.fromEntries(table.getVisibleLeafColumns().map((column) => [column.id, column.getSize() * ratio])))
+    table.setColumnSizing(
+      Object.fromEntries(
+        table
+          .getVisibleLeafColumns()
+          .map((column) => [column.id, column.getSize() * ratio]),
+      ),
+    )
+  }
+  #clearDrag = () => {
+    this.#drag.source?.classList.remove('is-column-dragging')
+    this.#drag.target?.classList.remove('is-column-drop-target')
+    this.#drag.columnId = null
+    this.#drag.source = null
+    this.#drag.target = null
+  }
+  #showDrop(columnId: string, element: HTMLTableCellElement | null) {
+    this.#drag.target?.classList.remove('is-column-drop-target')
+    this.#drag.target = null
+    if (this.#drag.columnId === columnId || !element) return
+    element.classList.add('is-column-drop-target')
+    this.#drag.target = element
   }
-  #clearDrag = () => { this.#drag.source?.classList.remove('is-column-dragging'); this.#drag.target?.classList.remove('is-column-drop-target'); this.#drag.columnId = null; this.#drag.source = null; this.#drag.target = null }
-  #showDrop(columnId: string, element: HTMLTableCellElement | null) { this.#drag.target?.classList.remove('is-column-drop-target'); this.#drag.target = null; if (this.#drag.columnId === columnId || !element) return; element.classList.add('is-column-drop-target'); this.#drag.target = element }
 
   protected render() {
     this.#columns ??= createTradingColumns<typeof features>(this.controller)
-    const table = this.#tableController.table({
-      key: 'lit-realtime-trading', features, columns: this.#columns,
-      data: this.feed.store.get().quotes, getRowId: (row) => row.id,
-      columnResizeMode: 'onChange',
-      defaultColumn: { minSize: 56, maxSize: 800 }, autoResetCellSelection: false,
-    }, (state) => ({ sorting: state.sorting, columnFilters: state.columnFilters, columnOrder: state.columnOrder, rowSelection: state.rowSelection, cellSelection: state.cellSelection }))
+    const table = this.#tableController.table(
+      {
+        key: 'lit-realtime-trading',
+        features,
+        columns: this.#columns,
+        data: this.feed.store.get().quotes,
+        getRowId: (row) => row.id,
+        columnResizeMode: 'onChange',
+        defaultColumn: { minSize: 56, maxSize: 800 },
+        autoResetCellSelection: false,
+      },
+      (state) => ({
+        sorting: state.sorting,
+        columnFilters: state.columnFilters,
+        columnOrder: state.columnOrder,
+        rowSelection: state.rowSelection,
+        cellSelection: state.cellSelection,
+      }),
+    )
     this.#table = table
     const rows = readMeasuredRows(() => table.getRowModel().rows)
     const benchmark = this.controller.store.get()
-    const virtualMode = resolveVirtualScrollMode(benchmark.requestedVirtualScrollMode, this.feed.store.get().instrumentCount)
+    const virtualMode = resolveVirtualScrollMode(
+      benchmark.requestedVirtualScrollMode,
+      this.feed.store.get().instrumentCount,
+    )
     const virtualizer = this.#virtualizer.getVirtualizer()
-    virtualizer.setOptions({ ...virtualizer.options, count: rows.length, enabled: virtualMode === 'tanstack', getItemKey: (index) => rows[index]?.id ?? index })
+    virtualizer.setOptions({
+      ...virtualizer.options,
+      count: rows.length,
+      enabled: virtualMode === 'tanstack',
+      getItemKey: (index) => rows[index]?.id ?? index,
+    })
     const virtualRows = virtualizer.getVirtualItems()
-    this.controller.actions.setRenderedRowCount(virtualMode === 'tanstack' ? virtualRows.length : rows.length)
+    this.controller.actions.setRenderedRowCount(
+      virtualMode === 'tanstack' ? virtualRows.length : rows.length,
+    )
     const range = virtualizer.range
-    const visibleRange = virtualMode === 'tanstack' && range && rows.length ? { start: Math.min(range.startIndex, rows.length - 1), end: Math.min(range.endIndex, rows.length - 1) } : null
-    const renderRow = (row: (typeof rows)[number], virtualRow?: (typeof virtualRows)[number]) => html`<tr class=${virtualRow ? 'virtual-table-row' : ''} style=${virtualRow ? `transform:translateY(${virtualRow.start}px)` : ''} data-virtual-index=${virtualRow?.index ?? undefined} data-symbol=${row.original.symbol} data-row-id=${row.original.id} data-symbol-selected=${this.controller.renderAtoms.selectedSymbol.get() === row.original.symbol ? 'true' : undefined} title=${row.original.company} aria-selected=${row.getIsSelected()}>
-      ${repeat(row.getVisibleCells(), (cell) => cell.id, (cell) => { const edges = cell.getSelectionEdges(); return html`<td style="width:calc(var(--col-${cell.column.id}-size) * 1px)" data-column-id=${cell.column.id} data-cell-focused=${cell.getIsFocused() ? 'true' : undefined} data-selection-top=${edges.top ? 'true' : undefined} data-selection-right=${edges.right ? 'true' : undefined} data-selection-bottom=${edges.bottom ? 'true' : undefined} data-selection-left=${edges.left ? 'true' : undefined} aria-selected=${cell.getIsSelected()} tabindex=${cell.getTabIndex()}>${FlexRender({ cell })}</td>` })}</tr>`
-    return html`<div ${ref(this.#scrollRef)} class="table-scroll ${virtualMode === 'tanstack' ? 'is-virtualized' : ''}" data-trading-table>
-      <table ${ref(this.#tableRef)} class="trading-data-grid ${virtualMode === 'tanstack' ? 'virtual-table' : ''}" data-testid="trading-table" role="grid" aria-multiselectable="true" tabindex="0" @keydown=${(event: KeyboardEvent) => handleCellNavigation(table, event)}>
-        <thead>${repeat(table.getHeaderGroups(), (group) => group.id, (group) => html`<tr>${repeat(group.headers, (header) => header.id, (header) => { const leaf = header.subHeaders.length === 0; const sorted = header.column.getIsSorted(); return html`<th colspan=${header.colSpan} style="width:calc(var(--header-${header.id}-size) * 1px)" aria-sort=${leaf ? sortAriaValue(sorted) : undefined} class="${!leaf ? 'column-group-header' : ''} ${leaf && !['market','name','symbol'].includes(header.column.id) ? 'numeric-header' : ''}">${!header.isPlaceholder ? leaf ? html`<div class="leaf-header-content" @dragover=${(event: DragEvent) => { event.preventDefault(); this.#showDrop(header.column.id, (event.currentTarget as HTMLElement).closest('th')) }} @drop=${(event: DragEvent) => { event.preventDefault(); const source = event.dataTransfer?.getData('text/plain') || this.#drag.columnId; if (source) table.setColumnOrder(reorderColumnIds(table.getVisibleLeafColumns().map((column) => column.id), source, header.column.id)); this.#clearDrag() }}><button type="button" class="column-drag-handle" draggable="true" aria-label="Move ${header.column.id} column" @dragstart=${(event: DragEvent) => { this.#drag.columnId = header.column.id; this.#drag.source = (event.currentTarget as HTMLElement).closest('th'); this.#drag.source?.classList.add('is-column-dragging'); if (event.dataTransfer) { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', header.column.id) } }} @dragend=${this.#clearDrag}>⋮⋮</button><button type="button" class="sort-header-button ${header.column.getCanSort() ? 'is-sortable' : ''}" ?disabled=${!header.column.getCanSort()} @click=${header.column.getToggleSortingHandler()}><span class="header-label">${FlexRender({ header })}</span>${header.column.getCanSort() ? html`<span class="sort-indicator ${sorted ? 'is-active' : ''}" aria-hidden="true">${sortIndicator(sorted)}</span>` : null}</button></div>${header.column.getCanResize() ? html`<div class="column-resize-handle ${header.column.getIsResizing() ? 'is-resizing' : ''}" role="separator" aria-orientation="vertical" @dblclick=${() => header.column.resetSize()} @mousedown=${header.getResizeHandler()} @touchstart=${header.getResizeHandler()}></div>` : null}` : FlexRender({ header }) : null}</th>` })}</tr>`)}</thead>
-        <tbody class=${virtualMode === 'tanstack' ? 'virtual-table-body' : ''} style=${virtualMode === 'tanstack' ? `height:${virtualizer.getTotalSize()}px` : ''} data-source-row-count=${this.feed.store.get().quotes.length} @mousedown=${(event: MouseEvent) => this.#pointer.handleMouseDown(table, event, this.controller.actions.selectSymbol)} @pointerover=${(event: MouseEvent) => this.#pointer.handlePointerOver(table, event)} @mouseleave=${() => this.#pointer.resetPointerCell()} @click=${(event: MouseEvent) => this.#pointer.handleClick(table, event)}>${virtualMode === 'tanstack' ? repeat(virtualRows, (item) => item.key, (item) => renderRow(rows[item.index], item)) : repeat(rows, (row) => row.id, (row) => renderRow(row))}</tbody>
-      </table></div>
+    const visibleRange =
+      virtualMode === 'tanstack' && range && rows.length
+        ? {
+            start: Math.min(range.startIndex, rows.length - 1),
+            end: Math.min(range.endIndex, rows.length - 1),
+          }
+        : null
+    const renderRow = (
+      row: (typeof rows)[number],
+      virtualRow?: (typeof virtualRows)[number],
+    ) =>
+      html`<tr
+        class=${virtualRow ? 'virtual-table-row' : ''}
+        style=${virtualRow ? `transform:translateY(${virtualRow.start}px)` : ''}
+        data-virtual-index=${virtualRow?.index ?? undefined}
+        data-symbol=${row.original.symbol}
+        data-row-id=${row.original.id}
+        data-symbol-selected=${this.controller.renderAtoms.selectedSymbol.get() === row.original.symbol ? 'true' : undefined}
+        title=${row.original.company}
+        aria-selected=${row.getIsSelected()}
+      >
+        ${repeat(
+        row.getVisibleCells(),
+        (cell) => cell.id,
+        (cell) => {
+          const edges = cell.getSelectionEdges()
+          return html`<td
+            style="width:calc(var(--col-${cell.column.id}-size) * 1px)"
+            data-column-id=${cell.column.id}
+            data-cell-focused=${cell.getIsFocused() ? 'true' : undefined}
+            data-selection-top=${edges.top ? 'true' : undefined}
+            data-selection-right=${edges.right ? 'true' : undefined}
+            data-selection-bottom=${edges.bottom ? 'true' : undefined}
+            data-selection-left=${edges.left ? 'true' : undefined}
+            aria-selected=${cell.getIsSelected()}
+            tabindex=${cell.getTabIndex()}
+          >
+            ${FlexRender({ cell })}
+          </td>`
+        },
+      )}
+      </tr>`
+    return html`<div
+        ${ref(this.#scrollRef)}
+        class="table-scroll ${virtualMode === 'tanstack' ? 'is-virtualized' : ''}"
+        data-trading-table
+      >
+        <table
+          ${ref(this.#tableRef)}
+          class="trading-data-grid ${virtualMode === 'tanstack' ? 'virtual-table' : ''}"
+          data-testid="trading-table"
+          role="grid"
+          aria-multiselectable="true"
+          tabindex="0"
+          @keydown=${(event: KeyboardEvent) => handleCellNavigation(table, event)}
+        >
+          <thead>
+            ${repeat(
+          table.getHeaderGroups(),
+          (group) => group.id,
+          (group) =>
+            html`<tr>
+              ${repeat(
+                group.headers,
+                (header) => header.id,
+                (header) => {
+                  const leaf = header.subHeaders.length === 0
+                  const sorted = header.column.getIsSorted()
+                  return html`<th
+                    colspan=${header.colSpan}
+                    style="width:calc(var(--header-${header.id}-size) * 1px)"
+                    aria-sort=${leaf ? sortAriaValue(sorted) : undefined}
+                    class="${!leaf ? 'column-group-header' : ''} ${leaf && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}"
+                  >
+                    ${
+                      !header.isPlaceholder
+                        ? leaf
+                          ? html`<div
+                                class="leaf-header-content"
+                                @dragover=${(event: DragEvent) => {
+                                  event.preventDefault()
+                                  this.#showDrop(
+                                    header.column.id,
+                                    (
+                                      event.currentTarget as HTMLElement
+                                    ).closest('th'),
+                                  )
+                                }}
+                                @drop=${(event: DragEvent) => {
+                                  event.preventDefault()
+                                  const source =
+                                    event.dataTransfer?.getData('text/plain') ||
+                                    this.#drag.columnId
+                                  if (source)
+                                    table.setColumnOrder(
+                                      reorderColumnIds(
+                                        table
+                                          .getVisibleLeafColumns()
+                                          .map((column) => column.id),
+                                        source,
+                                        header.column.id,
+                                      ),
+                                    )
+                                  this.#clearDrag()
+                                }}
+                              >
+                                <button
+                                  type="button"
+                                  class="column-drag-handle"
+                                  draggable="true"
+                                  aria-label="Move ${header.column.id} column"
+                                  @dragstart=${(event: DragEvent) => {
+                                    this.#drag.columnId = header.column.id
+                                    this.#drag.source = (
+                                      event.currentTarget as HTMLElement
+                                    ).closest('th')
+                                    this.#drag.source?.classList.add(
+                                      'is-column-dragging',
+                                    )
+                                    if (event.dataTransfer) {
+                                      event.dataTransfer.effectAllowed = 'move'
+                                      event.dataTransfer.setData(
+                                        'text/plain',
+                                        header.column.id,
+                                      )
+                                    }
+                                  }}
+                                  @dragend=${this.#clearDrag}
+                                >
+                                  ⋮⋮</button
+                                ><button
+                                  type="button"
+                                  class="sort-header-button ${header.column.getCanSort() ? 'is-sortable' : ''}"
+                                  ?disabled=${!header.column.getCanSort()}
+                                  @click=${header.column.getToggleSortingHandler()}
+                                >
+                                  <span class="header-label"
+                                    >${FlexRender({ header })}</span
+                                  >${header.column.getCanSort() ? html`<span class="sort-indicator ${sorted ? 'is-active' : ''}" aria-hidden="true">${sortIndicator(sorted)}</span>` : null}
+                                </button>
+                              </div>
+                              ${header.column.getCanResize() ? html`<div class="column-resize-handle ${header.column.getIsResizing() ? 'is-resizing' : ''}" role="separator" aria-orientation="vertical" @dblclick=${() => header.column.resetSize()} @mousedown=${header.getResizeHandler()} @touchstart=${header.getResizeHandler()}></div>` : null}`
+                          : FlexRender({ header })
+                        : null
+                    }
+                  </th>`
+                },
+              )}
+            </tr>`,
+        )}
+          </thead>
+          <tbody
+            class=${virtualMode === 'tanstack' ? 'virtual-table-body' : ''}
+            style=${virtualMode === 'tanstack' ? `height:${virtualizer.getTotalSize()}px` : ''}
+            data-source-row-count=${this.feed.store.get().quotes.length}
+            @mousedown=${(event: MouseEvent) => this.#pointer.handleMouseDown(table, event, this.controller.actions.selectSymbol)}
+            @pointerover=${(event: MouseEvent) => this.#pointer.handlePointerOver(table, event)}
+            @mouseleave=${() => this.#pointer.resetPointerCell()}
+            @click=${(event: MouseEvent) => this.#pointer.handleClick(table, event)}
+          >
+            ${
+          virtualMode === 'tanstack'
+            ? repeat(
+                virtualRows,
+                (item) => item.key,
+                (item) => renderRow(rows[item.index], item),
+              )
+            : repeat(
+                rows,
+                (row) => row.id,
+                (row) => renderRow(row),
+              )
+        }
+          </tbody>
+        </table>
+      </div>
       ${virtualMode === 'tanstack' ? html`<footer class="virtual-scroll-footer" data-testid="virtual-scroll-footer"><span>TanStack · Total · ${rows.length} rows · ${table.getVisibleLeafColumns().length} columns</span><span data-testid="visible-row-range">${visibleRange ? `Current · rows ${visibleRange.start}..${visibleRange.end}` : 'Current · rows —'}</span></footer>` : null}`
   }
 }
diff --git a/examples/lit/realtime-trading/src/table/table-config/quote-cells.ts b/examples/lit/realtime-trading/src/table/table-config/quote-cells.ts
index 0545766dd7..e10aa97938 100644
--- a/examples/lit/realtime-trading/src/table/table-config/quote-cells.ts
+++ b/examples/lit/realtime-trading/src/table/table-config/quote-cells.ts
@@ -2,25 +2,64 @@ import { LitElement, html, svg } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 export const quoteCellLifecycle = { created: 0, destroyed: 0 }
-export const quoteCellRendererNames = ['Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid', 'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday'] as const
-export const quoteComponentNames = ['PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell', 'PercentChangeCell', 'SparklineCell'] as const
+export const quoteCellRendererNames = [
+  'Market',
+  'Name',
+  'Symbol',
+  'Last',
+  'Change',
+  'ChangePercent',
+  'Bid',
+  'BidVolume',
+  'Ask',
+  'AskVolume',
+  'Open',
+  'High',
+  'Low',
+  'Intraday',
+] as const
+export const quoteComponentNames = [
+  'PriceCell',
+  'StableMoveCell',
+  'UpMoveCell',
+  'DownMoveCell',
+  'PercentChangeCell',
+  'SparklineCell',
+] as const
 export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
 export type QuoteComponentName = (typeof quoteComponentNames)[number]
-const counters = <Name extends string>(names: ReadonlyArray<Name>) => Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
+const counters = <Name extends string>(names: ReadonlyArray<Name>) =>
+  Object.fromEntries(names.map((name) => [name, 0])) as Record<Name, number>
 export const quoteRenderDiagnostics = {
-  cellRendererCalls: 0, componentRenderCalls: 0,
+  cellRendererCalls: 0,
+  componentRenderCalls: 0,
   cellRendererCallsByName: counters(quoteCellRendererNames),
   componentRenderCallsByName: counters(quoteComponentNames),
 }
-export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T { quoteRenderDiagnostics.cellRendererCalls++; quoteRenderDiagnostics.cellRendererCallsByName[name]++; return value }
+export function recordCellRender<T>(name: QuoteCellRendererName, value: T): T {
+  quoteRenderDiagnostics.cellRendererCalls++
+  quoteRenderDiagnostics.cellRendererCallsByName[name]++
+  return value
+}
 const signed = (value: number) => `${value >= 0 ? '+' : ''}${value.toFixed(2)}`
 
 abstract class QuoteElement extends LitElement {
   protected abstract readonly componentName: QuoteComponentName
-  protected createRenderRoot() { return this }
-  connectedCallback() { super.connectedCallback(); quoteCellLifecycle.created++ }
-  disconnectedCallback() { quoteCellLifecycle.destroyed++; super.disconnectedCallback() }
-  protected recordRender() { quoteRenderDiagnostics.componentRenderCalls++; quoteRenderDiagnostics.componentRenderCallsByName[this.componentName]++ }
+  protected createRenderRoot() {
+    return this
+  }
+  connectedCallback() {
+    super.connectedCallback()
+    quoteCellLifecycle.created++
+  }
+  disconnectedCallback() {
+    quoteCellLifecycle.destroyed++
+    super.disconnectedCallback()
+  }
+  protected recordRender() {
+    quoteRenderDiagnostics.componentRenderCalls++
+    quoteRenderDiagnostics.componentRenderCallsByName[this.componentName]++
+  }
 }
 
 @customElement('quote-price-cell')
@@ -29,24 +68,57 @@ export class PriceCell extends QuoteElement {
   @property({ type: Number }) price = 0
   @property({ type: Number }) move = 0
   @property({ attribute: false }) select: () => void = () => undefined
-  protected render() { this.recordRender(); return html`<button class="price-button ${this.move >= 0 ? 'quote-up' : 'quote-down'}" @click=${this.select}>${this.price.toFixed(2)}</button>` }
+  protected render() {
+    this.recordRender()
+    return html`<button
+      class="price-button ${this.move >= 0 ? 'quote-up' : 'quote-down'}"
+      @click=${this.select}
+    >
+      ${this.price.toFixed(2)}
+    </button>`
+  }
 }
 
 abstract class MoveCell extends QuoteElement {
   @property({ type: Number }) move = 0
   protected direction: 'up' | 'down' | null = null
   protected indicator = ''
-  protected render() { this.recordRender(); const direction = this.direction ?? (this.move >= 0 ? 'up' : 'down'); return html`<span class="move-cell quote-${direction}">${this.indicator}${signed(this.move)}</span>` }
+  protected render() {
+    this.recordRender()
+    const direction = this.direction ?? (this.move >= 0 ? 'up' : 'down')
+    return html`<span class="move-cell quote-${direction}"
+      >${this.indicator}${signed(this.move)}</span
+    >`
+  }
+}
+@customElement('quote-stable-move')
+export class StableMoveCell extends MoveCell {
+  protected readonly componentName = 'StableMoveCell'
+}
+@customElement('quote-up-move')
+export class UpMoveCell extends MoveCell {
+  protected readonly componentName = 'UpMoveCell'
+  protected direction = 'up' as const
+  protected indicator = '▲ '
+}
+@customElement('quote-down-move')
+export class DownMoveCell extends MoveCell {
+  protected readonly componentName = 'DownMoveCell'
+  protected direction = 'down' as const
+  protected indicator = '▼ '
 }
-@customElement('quote-stable-move') export class StableMoveCell extends MoveCell { protected readonly componentName = 'StableMoveCell' }
-@customElement('quote-up-move') export class UpMoveCell extends MoveCell { protected readonly componentName = 'UpMoveCell'; protected direction = 'up' as const; protected indicator = '▲ ' }
-@customElement('quote-down-move') export class DownMoveCell extends MoveCell { protected readonly componentName = 'DownMoveCell'; protected direction = 'down' as const; protected indicator = '▼ ' }
 
 @customElement('quote-percent-change')
 export class PercentChangeCell extends QuoteElement {
   protected readonly componentName = 'PercentChangeCell'
   @property({ type: Number }) value = 0
-  protected render() { this.recordRender(); return html`<span class="percent-change-cell ${this.value >= 0 ? 'quote-up' : 'quote-down'}">${signed(this.value)}%</span>` }
+  protected render() {
+    this.recordRender()
+    return html`<span
+      class="percent-change-cell ${this.value >= 0 ? 'quote-up' : 'quote-down'}"
+      >${signed(this.value)}%</span
+    >`
+  }
 }
 
 @customElement('quote-sparkline')
@@ -56,10 +128,21 @@ export class SparklineCell extends QuoteElement {
   protected render() {
     this.recordRender()
     const first = this.values[0] ?? 0
-    const range = this.values.reduce((current, value) => ({ min: Math.min(current.min, value), max: Math.max(current.max, value) }), { min: first, max: first })
+    const range = this.values.reduce(
+      (current, value) => ({
+        min: Math.min(current.min, value),
+        max: Math.max(current.max, value),
+      }),
+      { min: first, max: first },
+    )
     const height = range.max - range.min || 1
     const denominator = Math.max(1, this.values.length - 1)
-    const points = this.values.map((value, index) => `${((index / denominator) * 100).toFixed(1)},${(22 - ((value - range.min) / height) * 20).toFixed(1)}`).join(' ')
+    const points = this.values
+      .map(
+        (value, index) =>
+          `${((index / denominator) * 100).toFixed(1)},${(22 - ((value - range.min) / height) * 20).toFixed(1)}`,
+      )
+      .join(' ')
     const rising = (this.values.at(-1) ?? 0) >= first
     return svg`<svg class="sparkline ${rising ? 'quote-up' : 'quote-down'}" viewBox="0 0 100 24" preserveAspectRatio="none"><polyline points=${points}></polyline></svg>`
   }
diff --git a/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts b/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
index b1d01eca62..eec1162c62 100644
--- a/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
+++ b/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
@@ -5,8 +5,13 @@ import type { MarketQuote } from '../../feed/market-data'
 import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
 export type RendererMode = 'stable' | 'swap'
-export interface CoreTableState { sorting: Array<{ id: string; desc: boolean }>; columnFilters: Array<{ id: string; value: unknown }> }
-interface TradingCellContext { row: { original: MarketQuote } }
+export interface CoreTableState {
+  sorting: Array<{ id: string; desc: boolean }>
+  columnFilters: Array<{ id: string; value: unknown }>
+}
+interface TradingCellContext {
+  row: { original: MarketQuote }
+}
 interface TradingColumnDefinition {
   id: string
   header: string
@@ -18,50 +23,228 @@ interface TradingColumnDefinition {
   sortFn?: 'basic'
   cell?: (context: TradingCellContext) => unknown
 }
-const compact = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
+const compact = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
 
-export function createTradingColumns<TFeatures extends TableFeatures>(controller: TradingBenchmarkController): Array<ColumnDef<TFeatures, MarketQuote>> {
+export function createTradingColumns<TFeatures extends TableFeatures>(
+  controller: TradingBenchmarkController,
+): Array<ColumnDef<TFeatures, MarketQuote>> {
   const columns: Array<TradingColumnDefinition> = [
-    { id: 'instrument', header: 'Instrument', columns: [
-      { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', row.original.venue) },
-      { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', row.original.company) },
-      { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', row.original.symbol) },
-    ] },
-    { id: 'priceAndChange', header: 'Price & Change', columns: [
-      { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: ({ row }) => recordCellRender('Last', html`<quote-price-cell .price=${row.original.price} .move=${getDayChange(row.original)} .select=${() => controller.actions.selectSymbol(row.original.symbol)}></quote-price-cell>`) },
-      { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', renderMove(controller.renderAtoms.rendererMode.get(), getDayChange(row.original))) },
-      { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: ({ row }) => recordCellRender('ChangePercent', html`<quote-percent-change .value=${getDayChangePercent(row.original)}></quote-percent-change>`) },
-    ] },
-    { id: 'orderBook', header: 'Order Book', columns: [
-      { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
-      { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compact.format(row.original.bidSize)) },
-      { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
-      { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compact.format(row.original.askSize)) },
-    ] },
-    { id: 'session', header: 'Session', columns: [
-      { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
-      { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
-      { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
-    ] },
-    { id: 'chart', header: 'Chart', columns: [
-      { id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: ({ row }) => recordCellRender('Intraday', html`<quote-sparkline .values=${row.original.history}></quote-sparkline>`) },
-    ] },
+    {
+      id: 'instrument',
+      header: 'Instrument',
+      columns: [
+        {
+          id: 'market',
+          header: 'Market',
+          size: 72,
+          accessorFn: (row) => row.venue,
+          cell: ({ row }) => recordCellRender('Market', row.original.venue),
+        },
+        {
+          id: 'name',
+          header: 'Name',
+          size: 180,
+          accessorFn: (row) => row.company,
+          cell: ({ row }) => recordCellRender('Name', row.original.company),
+        },
+        {
+          id: 'symbol',
+          header: 'Symbol',
+          size: 92,
+          accessorFn: (row) => row.symbol,
+          filterFn: 'includesString',
+          cell: ({ row }) => recordCellRender('Symbol', row.original.symbol),
+        },
+      ],
+    },
+    {
+      id: 'priceAndChange',
+      header: 'Price & Change',
+      columns: [
+        {
+          id: 'price',
+          header: 'Price',
+          size: 96,
+          accessorFn: (row) => row.price,
+          sortFn: 'basic',
+          cell: ({ row }) =>
+            recordCellRender(
+              'Last',
+              html`<quote-price-cell
+                .price=${row.original.price}
+                .move=${getDayChange(row.original)}
+                .select=${() => controller.actions.selectSymbol(row.original.symbol)}
+              ></quote-price-cell>`,
+            ),
+        },
+        {
+          id: 'change',
+          header: 'Chg',
+          size: 94,
+          accessorFn: getDayChange,
+          cell: ({ row }) =>
+            recordCellRender(
+              'Change',
+              renderMove(
+                controller.renderAtoms.rendererMode.get(),
+                getDayChange(row.original),
+              ),
+            ),
+        },
+        {
+          id: 'changePercent',
+          header: 'Chg%',
+          size: 90,
+          accessorFn: getDayChangePercent,
+          cell: ({ row }) =>
+            recordCellRender(
+              'ChangePercent',
+              html`<quote-percent-change
+                .value=${getDayChangePercent(row.original)}
+              ></quote-percent-change>`,
+            ),
+        },
+      ],
+    },
+    {
+      id: 'orderBook',
+      header: 'Order Book',
+      columns: [
+        {
+          id: 'bid',
+          header: 'Bid',
+          size: 90,
+          accessorFn: (row) => row.bid,
+          cell: ({ row }) =>
+            recordCellRender('Bid', row.original.bid.toFixed(2)),
+        },
+        {
+          id: 'bidSize',
+          header: 'Bid Vol',
+          size: 100,
+          accessorFn: (row) => row.bidSize,
+          cell: ({ row }) =>
+            recordCellRender('BidVolume', compact.format(row.original.bidSize)),
+        },
+        {
+          id: 'ask',
+          header: 'Ask',
+          size: 90,
+          accessorFn: (row) => row.ask,
+          cell: ({ row }) =>
+            recordCellRender('Ask', row.original.ask.toFixed(2)),
+        },
+        {
+          id: 'askSize',
+          header: 'Ask Vol',
+          size: 100,
+          accessorFn: (row) => row.askSize,
+          cell: ({ row }) =>
+            recordCellRender('AskVolume', compact.format(row.original.askSize)),
+        },
+      ],
+    },
+    {
+      id: 'session',
+      header: 'Session',
+      columns: [
+        {
+          id: 'open',
+          header: 'Open',
+          size: 90,
+          accessorFn: (row) => row.open,
+          cell: ({ row }) =>
+            recordCellRender('Open', row.original.open.toFixed(2)),
+        },
+        {
+          id: 'high',
+          header: 'High',
+          size: 90,
+          accessorFn: (row) => row.high,
+          cell: ({ row }) =>
+            recordCellRender('High', row.original.high.toFixed(2)),
+        },
+        {
+          id: 'low',
+          header: 'Low',
+          size: 90,
+          accessorFn: (row) => row.low,
+          cell: ({ row }) =>
+            recordCellRender('Low', row.original.low.toFixed(2)),
+        },
+      ],
+    },
+    {
+      id: 'chart',
+      header: 'Chart',
+      columns: [
+        {
+          id: 'history',
+          header: 'Intraday',
+          size: 150,
+          enableSorting: false,
+          cell: ({ row }) =>
+            recordCellRender(
+              'Intraday',
+              html`<quote-sparkline
+                .values=${row.original.history}
+              ></quote-sparkline>`,
+            ),
+        },
+      ],
+    },
   ]
   return columns as unknown as Array<ColumnDef<TFeatures, MarketQuote>>
 }
 
 function renderMove(mode: RendererMode, move: number) {
-  if (mode === 'stable') return html`<quote-stable-move .move=${move}></quote-stable-move>`
-  return move >= 0 ? html`<quote-up-move .move=${move}></quote-up-move>` : html`<quote-down-move .move=${move}></quote-down-move>`
+  if (mode === 'stable')
+    return html`<quote-stable-move .move=${move}></quote-stable-move>`
+  return move >= 0
+    ? html`<quote-up-move .move=${move}></quote-up-move>`
+    : html`<quote-down-move .move=${move}></quote-down-move>`
 }
 
-export const rowModelDiagnostics = { hasMeasurement: false, calls: 0, totalDurationMs: 0, maxDurationMs: 0, lastRowCount: 0 }
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
 export const TRADING_COLUMN_COUNT = 14
 export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
-  const start = performance.now(); const rows = readRows(); const end = performance.now(); const duration = end - start
-  rowModelDiagnostics.calls++; rowModelDiagnostics.hasMeasurement = true; rowModelDiagnostics.totalDurationMs += duration; rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration); rowModelDiagnostics.lastRowCount = rows.length
-  try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* optional User Timing detail */ }
+  const start = performance.now()
+  const rows = readRows()
+  const end = performance.now()
+  const duration = end - start
+  rowModelDiagnostics.calls++
+  rowModelDiagnostics.hasMeasurement = true
+  rowModelDiagnostics.totalDurationMs += duration
+  rowModelDiagnostics.maxDurationMs = Math.max(
+    rowModelDiagnostics.maxDurationMs,
+    duration,
+  )
+  rowModelDiagnostics.lastRowCount = rows.length
+  try {
+    performance.measure('tanstack-row-model', {
+      start,
+      end,
+      detail: { rowCount: rows.length },
+    })
+  } catch {
+    /* optional User Timing detail */
+  }
   return rows
 }
-export function getDayChange(quote: MarketQuote): number { return quote.price - quote.previousClose }
-export function getDayChangePercent(quote: MarketQuote): number { return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100 }
+export function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+export function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/lit/realtime-trading/src/table/trading-table.ts b/examples/lit/realtime-trading/src/table/trading-table.ts
index 3b6ca3f800..77e4e6bee1 100644
--- a/examples/lit/realtime-trading/src/table/trading-table.ts
+++ b/examples/lit/realtime-trading/src/table/trading-table.ts
@@ -1,3 +1,9 @@
-export { TRADING_COLUMN_COUNT, rowModelDiagnostics } from './table-config/trading-columns'
-export type { CoreTableState, RendererMode } from './table-config/trading-columns'
+export {
+  TRADING_COLUMN_COUNT,
+  rowModelDiagnostics,
+} from './table-config/trading-columns'
+export type {
+  CoreTableState,
+  RendererMode,
+} from './table-config/trading-columns'
 export type { VirtualScrollMode } from './trading-row-virtualizer'
diff --git a/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts b/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
index cfc675f211..2e367befbc 100644
--- a/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
@@ -56,7 +56,9 @@ test('runs the Lit realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
diff --git a/examples/lit/realtime-trading/tsconfig.json b/examples/lit/realtime-trading/tsconfig.json
index 41e49a782c..91eacfe230 100644
--- a/examples/lit/realtime-trading/tsconfig.json
+++ b/examples/lit/realtime-trading/tsconfig.json
@@ -1,11 +1,20 @@
 {
   "compilerOptions": {
-    "target": "ES2022", "useDefineForClassFields": false, "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"], "skipLibCheck": true,
-    "moduleResolution": "bundler", "allowImportingTsExtensions": true,
-    "resolveJsonModule": true, "isolatedModules": true, "noEmit": true,
-    "experimentalDecorators": true, "strict": true, "noUnusedLocals": true,
-    "noUnusedParameters": true, "noFallthroughCasesInSwitch": true,
+    "target": "ES2022",
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
     "types": ["vite/client"]
   },
   "include": ["src", "tests/e2e", "vite.config.ts"]
diff --git a/examples/octane/realtime-trading/README.md b/examples/octane/realtime-trading/README.md
index b0b208c099..f138e71f0e 100644
--- a/examples/octane/realtime-trading/README.md
+++ b/examples/octane/realtime-trading/README.md
@@ -24,16 +24,16 @@ Use a production build for representative measurements.
 
 ## Structure and ownership
 
-| Path | Responsibility |
-| --- | --- |
-| `src/feed/` | Market model, instruments, feed config, immutable update helpers, and TanStack Store feed controller. |
-| `src/feed/worker/` | Typed protocol, deterministic engine, and module worker. |
-| `src/benchmark/` | Browser monitor, benchmark controller, table observer, and row-model timing. |
-| `src/shell/` | Separate TSRX header, metrics, configurator, diagnostics, selected-instrument, status, and shell components. |
-| `src/table/table-config/` | Grouped columns and custom TSRX quote components. |
-| `src/table/` | Octane Table view/setup, interactions, pointer hook, column layout, and Virtual Core hook. |
-| `src/use-store-value.ts` | Small Octane hooks that subscribe to a whole store or a compared selector slice. |
-| `src/main.tsrx` | Creates controllers and renders the shell composition root. |
+| Path                      | Responsibility                                                                                               |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `src/feed/`               | Market model, instruments, feed config, immutable update helpers, and TanStack Store feed controller.        |
+| `src/feed/worker/`        | Typed protocol, deterministic engine, and module worker.                                                     |
+| `src/benchmark/`          | Browser monitor, benchmark controller, table observer, and row-model timing.                                 |
+| `src/shell/`              | Separate TSRX header, metrics, configurator, diagnostics, selected-instrument, status, and shell components. |
+| `src/table/table-config/` | Grouped columns and custom TSRX quote components.                                                            |
+| `src/table/`              | Octane Table view/setup, interactions, pointer hook, column layout, and Virtual Core hook.                   |
+| `src/use-store-value.ts`  | Small Octane hooks that subscribe to a whole store or a compared selector slice.                             |
+| `src/main.tsrx`           | Creates controllers and renders the shell composition root.                                                  |
 
 `MarketFeedController` owns feed/worker state. `TradingBenchmarkController`
 observes it and owns diagnostic/view state. The shell receives stable controller
diff --git a/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts b/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
index 80a0564f4f..5e8190a2e9 100644
--- a/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
+++ b/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
@@ -28,8 +28,9 @@ export function useTradingGridPointer(
 
         lastPointerCell.current = target.element
         selectSymbol(target.cell.row.original.symbol)
-        target.cell
-          .getSelectionStartHandler(target.element.ownerDocument)(event)
+        target.cell.getSelectionStartHandler(target.element.ownerDocument)(
+          event,
+        )
       },
       onPointerOver(event) {
         if ((event.buttons & 1) === 0) {
diff --git a/examples/octane/realtime-trading/src/use-store-value.ts b/examples/octane/realtime-trading/src/use-store-value.ts
index 676e041910..eda913025e 100644
--- a/examples/octane/realtime-trading/src/use-store-value.ts
+++ b/examples/octane/realtime-trading/src/use-store-value.ts
@@ -24,9 +24,7 @@ export function useStoreSelector<T, TSelected>(
   useEffect(() => {
     const update = (value: T): void => {
       const next = selector(value)
-      setSelected((previous) =>
-        compare(previous, next) ? previous : next,
-      )
+      setSelected((previous) => (compare(previous, next) ? previous : next))
     }
 
     update(source.get())
@@ -53,8 +51,6 @@ export function shallowEqual<T>(previous: T, next: T): boolean {
   const nextKeys = Object.keys(nextRecord)
   return (
     previousKeys.length === nextKeys.length &&
-    previousKeys.every((key) =>
-      Object.is(previousRecord[key], nextRecord[key]),
-    )
+    previousKeys.every((key) => Object.is(previousRecord[key], nextRecord[key]))
   )
 }
diff --git a/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts b/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
index a0f33d97b7..29fecc12ab 100644
--- a/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
@@ -56,7 +56,9 @@ test('runs the Octane realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
diff --git a/examples/preact/realtime-trading/README.md b/examples/preact/realtime-trading/README.md
index e684ae0996..c890c5e425 100644
--- a/examples/preact/realtime-trading/README.md
+++ b/examples/preact/realtime-trading/README.md
@@ -25,15 +25,15 @@ absolute cost.
 
 ## Structure and ownership
 
-| Path | Responsibility |
-| --- | --- |
-| `src/feed/` | Market types, instruments, immutable update helpers, config, controller, and controller hook. |
-| `src/feed/worker/` | Worker protocol, deterministic market engine, and module worker. |
-| `src/benchmark/` | Feed/render timing, DOM/long-frame observers, row-model and component diagnostics. |
-| `src/shell/` | TanStack Store contexts, viewport shell, metrics, controls, selected instrument, and diagnostics. |
-| `src/table/table-config/` | Grouped columns, row/cell components, and render counters. |
-| `src/table/` | Preact Table instance, subscriptions, interactions, column layout, and Virtual Core hook. |
-| `src/App.tsx` | Creates the controllers and composes providers, shell, and table. |
+| Path                      | Responsibility                                                                                    |
+| ------------------------- | ------------------------------------------------------------------------------------------------- |
+| `src/feed/`               | Market types, instruments, immutable update helpers, config, controller, and controller hook.     |
+| `src/feed/worker/`        | Worker protocol, deterministic market engine, and module worker.                                  |
+| `src/benchmark/`          | Feed/render timing, DOM/long-frame observers, row-model and component diagnostics.                |
+| `src/shell/`              | TanStack Store contexts, viewport shell, metrics, controls, selected instrument, and diagnostics. |
+| `src/table/table-config/` | Grouped columns, row/cell components, and render counters.                                        |
+| `src/table/`              | Preact Table instance, subscriptions, interactions, column layout, and Virtual Core hook.         |
+| `src/App.tsx`             | Creates the controllers and composes providers, shell, and table.                                 |
 
 Feed state and benchmark state are different controllers. The feed does not
 depend on the monitor; the benchmark subscribes to feed lifecycle callbacks.
diff --git a/examples/preact/realtime-trading/src/App.tsx b/examples/preact/realtime-trading/src/App.tsx
index 8499a00486..3b702068d6 100644
--- a/examples/preact/realtime-trading/src/App.tsx
+++ b/examples/preact/realtime-trading/src/App.tsx
@@ -1,9 +1,7 @@
 import { useMarketFeedController } from './feed/use-market-feed-controller'
 import { useTradingBenchmarkController } from './benchmark/use-trading-benchmark-controller'
 import { TradingShell } from './shell/TradingShell'
-import {
-  TradingShellProvider,
-} from './shell/trading-shell-context'
+import { TradingShellProvider } from './shell/trading-shell-context'
 import { TradingTable } from './table/trading-table'
 
 export function App() {
diff --git a/examples/preact/realtime-trading/src/shell/TradingShell.tsx b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
index 2c87a9da98..f11fd20caa 100644
--- a/examples/preact/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
@@ -49,9 +49,7 @@ export function TradingShell(props: { children: ComponentChildren }) {
         {props.children}
       </section>
       <MarketStatusbar />
-      <div className="sidebar-slot">
-        {sidebarOpen && <Configurator />}
-      </div>
+      <div className="sidebar-slot">{sidebarOpen && <Configurator />}</div>
     </main>
   )
 }
@@ -166,11 +164,7 @@ function Configurator() {
     sparklineSampleIntervalMs,
   } = feedState
   const { requestedVirtualScrollMode } = benchmarkState
-  const {
-    setRendererMode,
-    setVirtualScrollEnabled,
-    resetMarket,
-  } = actions
+  const { setRendererMode, setVirtualScrollEnabled, resetMarket } = actions
   const {
     toggle,
     setInstrumentCount,
@@ -589,10 +583,7 @@ function SelectedInstrument() {
   const feed = useMarketFeedController()
   const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
   const quotes = useMarketFeedState((state) => state.quotes)
-  const selectedQuote = feed.getQuoteBySymbol(
-    quotes,
-    selectedSymbol,
-  )
+  const selectedQuote = feed.getQuoteBySymbol(quotes, selectedSymbol)
   return (
     <section
       className="config-section selected-instrument"
diff --git a/examples/preact/realtime-trading/src/table/trading-table.tsx b/examples/preact/realtime-trading/src/table/trading-table.tsx
index 347bb00ca7..e8cfb1b8ee 100644
--- a/examples/preact/realtime-trading/src/table/trading-table.tsx
+++ b/examples/preact/realtime-trading/src/table/trading-table.tsx
@@ -322,9 +322,7 @@ function TradingTableHeader(props: { table: TradingTableInstance }) {
                                   }`}
                                   role="separator"
                                   aria-orientation="vertical"
-                                  onDblClick={() =>
-                                    header.column.resetSize()
-                                  }
+                                  onDblClick={() => header.column.resetSize()}
                                   onMouseDown={header.getResizeHandler()}
                                   onTouchStart={header.getResizeHandler()}
                                 />
@@ -346,9 +344,7 @@ function TradingTableHeader(props: { table: TradingTableInstance }) {
   )
 }
 
-function useTradingTable(props: {
-  quotes: Array<MarketQuote>
-}) {
+function useTradingTable(props: { quotes: Array<MarketQuote> }) {
   return useTable(
     {
       key: 'preact-realtime-trading',
@@ -471,19 +467,13 @@ function TradingRows(props: {
       }
       data-source-row-count={props.sourceRowCount}
       onMouseDown={(event) =>
-        pointerInteractions.handleMouseDown(
-          props.table,
-          event,
-          selectSymbol,
-        )
+        pointerInteractions.handleMouseDown(props.table, event, selectSymbol)
       }
       onPointerOver={(event) =>
         pointerInteractions.handlePointerOver(props.table, event)
       }
       onMouseLeave={() => pointerInteractions.resetPointerCell()}
-      onClick={(event) =>
-        pointerInteractions.handleClick(props.table, event)
-      }
+      onClick={(event) => pointerInteractions.handleClick(props.table, event)}
     >
       {props.virtualScrollMode === 'tanstack'
         ? props.virtualRows.map((virtualRow) => {
@@ -498,11 +488,7 @@ function TradingRows(props: {
             )
           })
         : props.rows.map((row) => (
-            <TradingRowBoundary
-              key={row.id}
-              table={props.table}
-              row={row}
-            />
+            <TradingRowBoundary key={row.id} table={props.table} row={row} />
           ))}
     </tbody>
   )
diff --git a/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts b/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
index d34bc88a96..fa4c313e69 100644
--- a/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
@@ -56,7 +56,9 @@ test('runs the Preact realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
diff --git a/examples/react/realtime-trading/README.md b/examples/react/realtime-trading/README.md
index dd451131b8..cad136154e 100644
--- a/examples/react/realtime-trading/README.md
+++ b/examples/react/realtime-trading/README.md
@@ -40,15 +40,15 @@ available.
 
 ## Directory structure
 
-| Path | Responsibility |
-| --- | --- |
-| `src/feed/` | Market types, instruments, feed configuration, immutable update helpers, controller, and React lifecycle hook. |
-| `src/feed/worker/` | Worker protocol, deterministic market engine, and the module Web Worker. |
-| `src/benchmark/` | Browser monitor, benchmark controller, table observers, and React Profiler integration. |
-| `src/shell/` | Store contexts, full-viewport shell, metrics, configurator, diagnostics, selected instrument, and status bar. |
-| `src/table/table-config/` | Grouped columns, row boundary, custom cells, and render counters. |
-| `src/table/` | Table instance, subscription boundaries, interactions, pointer hook, initial fit, and virtualization. |
-| `src/App.tsx` | Composition root; creates controllers, providers, shell, table, and Profiler boundary. |
+| Path                      | Responsibility                                                                                                 |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `src/feed/`               | Market types, instruments, feed configuration, immutable update helpers, controller, and React lifecycle hook. |
+| `src/feed/worker/`        | Worker protocol, deterministic market engine, and the module Web Worker.                                       |
+| `src/benchmark/`          | Browser monitor, benchmark controller, table observers, and React Profiler integration.                        |
+| `src/shell/`              | Store contexts, full-viewport shell, metrics, configurator, diagnostics, selected instrument, and status bar.  |
+| `src/table/table-config/` | Grouped columns, row boundary, custom cells, and render counters.                                              |
+| `src/table/`              | Table instance, subscription boundaries, interactions, pointer hook, initial fit, and virtualization.          |
+| `src/App.tsx`             | Composition root; creates controllers, providers, shell, table, and Profiler boundary.                         |
 
 Feed state and benchmark state are intentionally separate. `MarketFeedController`
 can run without `TradingBenchmarkController`; the latter observes feed lifecycle
diff --git a/examples/react/realtime-trading/src/shell/TradingShell.tsx b/examples/react/realtime-trading/src/shell/TradingShell.tsx
index 7066464a3f..76550989ec 100644
--- a/examples/react/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/react/realtime-trading/src/shell/TradingShell.tsx
@@ -57,9 +57,7 @@ export function TradingShell(props: { children: ReactNode }) {
         {props.children}
       </section>
       <MarketStatusbar />
-      <div className="sidebar-slot">
-        {sidebarOpen && <Configurator />}
-      </div>
+      <div className="sidebar-slot">{sidebarOpen && <Configurator />}</div>
     </main>
   )
 }
@@ -174,11 +172,7 @@ function Configurator() {
     sparklineSampleIntervalMs,
   } = feedState
   const { requestedVirtualScrollMode } = benchmarkState
-  const {
-    setRendererMode,
-    setVirtualScrollEnabled,
-    resetMarket,
-  } = actions
+  const { setRendererMode, setVirtualScrollEnabled, resetMarket } = actions
   const {
     toggle,
     setInstrumentCount,
diff --git a/examples/react/realtime-trading/src/table/table-interactions.ts b/examples/react/realtime-trading/src/table/table-interactions.ts
index c0f0c9208b..a7458f73ff 100644
--- a/examples/react/realtime-trading/src/table/table-interactions.ts
+++ b/examples/react/realtime-trading/src/table/table-interactions.ts
@@ -1,7 +1,4 @@
-import type {
-  AriaAttributes,
-  KeyboardEvent as ReactKeyboardEvent,
-} from 'react'
+import type { AriaAttributes, KeyboardEvent as ReactKeyboardEvent } from 'react'
 
 export type CellDirection = 'up' | 'down' | 'left' | 'right'
 
diff --git a/examples/react/realtime-trading/src/table/trading-table.tsx b/examples/react/realtime-trading/src/table/trading-table.tsx
index 1d22599cde..486b7cd6c1 100644
--- a/examples/react/realtime-trading/src/table/trading-table.tsx
+++ b/examples/react/realtime-trading/src/table/trading-table.tsx
@@ -343,9 +343,7 @@ function TradingTableHeader(props: { table: TradingTableInstance }) {
   )
 }
 
-function useTradingTable(props: {
-  quotes: Array<MarketQuote>
-}) {
+function useTradingTable(props: { quotes: Array<MarketQuote> }) {
   return useTable(
     {
       key: 'react-realtime-trading',
@@ -480,11 +478,7 @@ function TradingRows(props: {
             )
           })
         : props.rows.map((row) => (
-            <TradingRowBoundary
-              key={row.id}
-              table={props.table}
-              row={row}
-            />
+            <TradingRowBoundary key={row.id} table={props.table} row={row} />
           ))}
     </tbody>
   )
diff --git a/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts b/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
index 64dbb62c74..274bfccaf0 100644
--- a/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
+++ b/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
@@ -39,8 +39,9 @@ export function useTradingGridPointer(
 
       lastPointerCell.current = target.element
       selectSymbol(target.cell.row.original.symbol)
-      target.cell
-        .getSelectionStartHandler(target.element.ownerDocument)(nativeEvent)
+      target.cell.getSelectionStartHandler(target.element.ownerDocument)(
+        nativeEvent,
+      )
     },
     onPointerOver(event) {
       const nativeEvent = event.nativeEvent
diff --git a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
index c5cfd68ec4..8dd1118b2f 100644
--- a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
@@ -65,7 +65,9 @@ test('runs the React realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
diff --git a/examples/realtime-trading-shared/sp500-instruments.js b/examples/realtime-trading-shared/sp500-instruments.js
index 2c4d6a91f0..4a47622a32 100644
--- a/examples/realtime-trading-shared/sp500-instruments.js
+++ b/examples/realtime-trading-shared/sp500-instruments.js
@@ -94,7 +94,7 @@ export const sp500Instruments = Object.freeze([
   ['CCL', 'Carnival Corporation', 'US'],
   ['CARR', 'Carrier Global', 'US'],
   ['CVNA', 'Carvana', 'US'],
-  ['CASY', 'Casey\'s', 'US'],
+  ['CASY', "Casey's", 'US'],
   ['CAT', 'Caterpillar Inc.', 'US'],
   ['CBOE', 'Cboe Global Markets', 'US'],
   ['CBRE', 'CBRE Group', 'US'],
@@ -159,7 +159,7 @@ export const sp500Instruments = Object.freeze([
   ['DG', 'Dollar General', 'US'],
   ['DLTR', 'Dollar Tree', 'US'],
   ['D', 'Dominion Energy', 'US'],
-  ['DPZ', 'Domino\'s', 'US'],
+  ['DPZ', "Domino's", 'US'],
   ['DASH', 'DoorDash', 'US'],
   ['DOV', 'Dover Corporation', 'US'],
   ['DOW', 'Dow Inc.', 'US'],
@@ -299,7 +299,7 @@ export const sp500Instruments = Object.freeze([
   ['LYV', 'Live Nation Entertainment', 'US'],
   ['LMT', 'Lockheed Martin', 'US'],
   ['L', 'Loews Corporation', 'US'],
-  ['LOW', 'Lowe\'s', 'US'],
+  ['LOW', "Lowe's", 'US'],
   ['LULU', 'Lululemon Athletica', 'US'],
   ['LITE', 'Lumentum', 'US'],
   ['LYB', 'LyondellBasell', 'US'],
@@ -312,7 +312,7 @@ export const sp500Instruments = Object.freeze([
   ['MAS', 'Masco', 'US'],
   ['MA', 'Mastercard', 'US'],
   ['MKC', 'McCormick & Company', 'US'],
-  ['MCD', 'McDonald\'s', 'US'],
+  ['MCD', "McDonald's", 'US'],
   ['MCK', 'McKesson Corporation', 'US'],
   ['MDT', 'Medtronic', 'US'],
   ['MRK', 'Merck & Co.', 'US'],
@@ -329,7 +329,7 @@ export const sp500Instruments = Object.freeze([
   ['MDLZ', 'Mondelez International', 'US'],
   ['MPWR', 'Monolithic Power Systems', 'US'],
   ['MNST', 'Monster Beverage', 'US'],
-  ['MCO', 'Moody\'s Corporation', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
   ['MS', 'Morgan Stanley', 'US'],
   ['MOS', 'Mosaic Company (The)', 'US'],
   ['MSI', 'Motorola Solutions', 'US'],
@@ -353,7 +353,7 @@ export const sp500Instruments = Object.freeze([
   ['NVDA', 'Nvidia', 'US'],
   ['NVR', 'NVR, Inc.', 'US'],
   ['NXPI', 'NXP Semiconductors', 'US'],
-  ['ORLY', 'O\'Reilly Automotive', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
   ['OXY', 'Occidental Petroleum', 'US'],
   ['ODFL', 'Old Dominion', 'US'],
   ['OMC', 'Omnicom Group', 'US'],
diff --git a/examples/solid/realtime-trading/README.md b/examples/solid/realtime-trading/README.md
index 4e051403f6..9c957073cb 100644
--- a/examples/solid/realtime-trading/README.md
+++ b/examples/solid/realtime-trading/README.md
@@ -25,15 +25,15 @@ absolute timings.
 
 ## Structure and ownership
 
-| Path | Responsibility |
-| --- | --- |
-| `src/feed/` | Market model, instrument universe, feed config, immutable update logic, and Solid feed controller. |
-| `src/feed/worker/` | Protocol, deterministic market engine, and module worker. |
-| `src/benchmark/` | Benchmark monitor and the controller that exposes benchmark signals/actions. |
-| `src/shell/` | Contexts, viewport shell, header, metrics, configurator, diagnostics, and selected instrument. |
-| `src/table/table-config/` | Grouped columns and custom quote components. |
-| `src/table/` | Solid Table instance, interactions, column layout, and Solid Virtual integration. |
-| `src/App.tsx` | Creates feed/benchmark controllers and composes their providers with the table. |
+| Path                      | Responsibility                                                                                     |
+| ------------------------- | -------------------------------------------------------------------------------------------------- |
+| `src/feed/`               | Market model, instrument universe, feed config, immutable update logic, and Solid feed controller. |
+| `src/feed/worker/`        | Protocol, deterministic market engine, and module worker.                                          |
+| `src/benchmark/`          | Benchmark monitor and the controller that exposes benchmark signals/actions.                       |
+| `src/shell/`              | Contexts, viewport shell, header, metrics, configurator, diagnostics, and selected instrument.     |
+| `src/table/table-config/` | Grouped columns and custom quote components.                                                       |
+| `src/table/`              | Solid Table instance, interactions, column layout, and Solid Virtual integration.                  |
+| `src/App.tsx`             | Creates feed/benchmark controllers and composes their providers with the table.                    |
 
 `createMarketFeedController` and `createTradingBenchmarkController` are
 separate. The feed owns worker state and quotes; the benchmark observes feed
diff --git a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index cbc6ef8564..12b3b4c40b 100644
--- a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -1,9 +1,4 @@
-import {
-  createMemo,
-  createSignal,
-  onCleanup,
-  onMount,
-} from 'solid-js'
+import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'
 import { TRADING_COLUMN_COUNT } from '../table/trading-table'
 import {
   FORCED_VIRTUALIZATION_ROW_COUNT,
diff --git a/examples/solid/realtime-trading/src/shell/TradingShell.tsx b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
index a74e4dadc1..711122860a 100644
--- a/examples/solid/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
@@ -127,11 +127,7 @@ function MarketStatusbar() {
 function Configurator() {
   const { state, actions } = useTradingShellController()
   const feed = useMarketFeedController()
-  const {
-    rendererMode,
-    virtualScrollForced,
-    virtualScrollMode,
-  } = state
+  const { rendererMode, virtualScrollForced, virtualScrollMode } = state
   const {
     running,
     instrumentCount,
diff --git a/examples/solid/realtime-trading/src/table/trading-table.tsx b/examples/solid/realtime-trading/src/table/trading-table.tsx
index 52e3c3a938..d20a2a70ac 100644
--- a/examples/solid/realtime-trading/src/table/trading-table.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table.tsx
@@ -185,28 +185,20 @@ export function TradingTable(props: TradingTableProps) {
     >
       <Index each={row().getVisibleCells()}>
         {(cell) => {
-          const selectionEdges = createMemo(() =>
-            cell().getSelectionEdges(),
-          )
+          const selectionEdges = createMemo(() => cell().getSelectionEdges())
           return (
             <td
               style={{
                 width: `calc(var(--col-${cell().column.id}-size) * 1px)`,
               }}
               data-column-id={cell().column.id}
-              data-cell-focused={
-                cell().getIsFocused() ? 'true' : undefined
-              }
+              data-cell-focused={cell().getIsFocused() ? 'true' : undefined}
               data-selection-top={selectionEdges().top ? 'true' : undefined}
-              data-selection-right={
-                selectionEdges().right ? 'true' : undefined
-              }
+              data-selection-right={selectionEdges().right ? 'true' : undefined}
               data-selection-bottom={
                 selectionEdges().bottom ? 'true' : undefined
               }
-              data-selection-left={
-                selectionEdges().left ? 'true' : undefined
-              }
+              data-selection-left={selectionEdges().left ? 'true' : undefined}
               aria-selected={cell().getIsSelected()}
               tabindex={cell().getTabIndex()}
             >
@@ -390,9 +382,7 @@ export function TradingTable(props: TradingTableProps) {
               pointerInteractions.handlePointerOver(table, event)
             }
             onMouseLeave={() => pointerInteractions.resetPointerCell()}
-            onClick={(event) =>
-              pointerInteractions.handleClick(table, event)
-            }
+            onClick={(event) => pointerInteractions.handleClick(table, event)}
           >
             <Show
               when={props.virtualScrollMode === 'tanstack'}
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
index f79a817496..ed848aaaf9 100644
--- a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -56,7 +56,9 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
diff --git a/examples/svelte/realtime-trading/README.md b/examples/svelte/realtime-trading/README.md
index 4e5298e393..5a6e0ca75f 100644
--- a/examples/svelte/realtime-trading/README.md
+++ b/examples/svelte/realtime-trading/README.md
@@ -24,15 +24,15 @@ Use a production build for performance recordings.
 
 ## Structure and ownership
 
-| Path | Responsibility |
-| --- | --- |
-| `src/feed/` | Market model, instrument universe, feed config, immutable updates, and feed controller. |
-| `src/feed/worker/` | Typed worker protocol, deterministic engine, and module worker. |
-| `src/benchmark/` | Browser monitor, benchmark controller, table observer, and row-model timing. |
-| `src/shell/` | Svelte context plus separate header, metrics, configurator, diagnostics, selected-instrument, and status components. |
-| `src/table/table-config/` | Grouped columns and dedicated Price/Move/Percent/Sparkline Svelte components. |
-| `src/table/` | Svelte Table setup, table view, delegated interactions, column layout, and Svelte Virtual integration. |
-| `src/App.svelte` | Creates/provides controllers and starts/stops them with the app lifecycle. |
+| Path                      | Responsibility                                                                                                       |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `src/feed/`               | Market model, instrument universe, feed config, immutable updates, and feed controller.                              |
+| `src/feed/worker/`        | Typed worker protocol, deterministic engine, and module worker.                                                      |
+| `src/benchmark/`          | Browser monitor, benchmark controller, table observer, and row-model timing.                                         |
+| `src/shell/`              | Svelte context plus separate header, metrics, configurator, diagnostics, selected-instrument, and status components. |
+| `src/table/table-config/` | Grouped columns and dedicated Price/Move/Percent/Sparkline Svelte components.                                        |
+| `src/table/`              | Svelte Table setup, table view, delegated interactions, column layout, and Svelte Virtual integration.               |
+| `src/App.svelte`          | Creates/provides controllers and starts/stops them with the app lifecycle.                                           |
 
 The feed and benchmark are separate controllers. The feed owns worker state and
 quotes; the benchmark registers observers and owns metrics/view controls.
diff --git a/examples/svelte/realtime-trading/index.html b/examples/svelte/realtime-trading/index.html
index a45ca3d04d..fa207c8adc 100644
--- a/examples/svelte/realtime-trading/index.html
+++ b/examples/svelte/realtime-trading/index.html
@@ -1,3 +1,2 @@
 <div id="app"></div>
 <script type="module" src="/src/main.ts"></script>
-
diff --git a/examples/svelte/realtime-trading/src/shell/trading-shell-context.ts b/examples/svelte/realtime-trading/src/shell/trading-shell-context.ts
index 434f512cd3..25ab35c22c 100644
--- a/examples/svelte/realtime-trading/src/shell/trading-shell-context.ts
+++ b/examples/svelte/realtime-trading/src/shell/trading-shell-context.ts
@@ -9,7 +9,9 @@ interface TradingControllers {
 
 const tradingControllersKey = Symbol('trading-controllers')
 
-export function provideTradingControllers(benchmark: TradingBenchmarkController): void {
+export function provideTradingControllers(
+  benchmark: TradingBenchmarkController,
+): void {
   setContext<TradingControllers>(tradingControllersKey, {
     benchmark,
     feed: benchmark.feed,
@@ -17,13 +19,17 @@ export function provideTradingControllers(benchmark: TradingBenchmarkController)
 }
 
 export function useTradingShellController(): TradingBenchmarkController {
-  const controllers = getContext<TradingControllers | undefined>(tradingControllersKey)
+  const controllers = getContext<TradingControllers | undefined>(
+    tradingControllersKey,
+  )
   if (!controllers) throw new Error('Missing trading controllers')
   return controllers.benchmark
 }
 
 export function useMarketFeedController(): MarketFeedController {
-  const controllers = getContext<TradingControllers | undefined>(tradingControllersKey)
+  const controllers = getContext<TradingControllers | undefined>(
+    tradingControllersKey,
+  )
   if (!controllers) throw new Error('Missing trading controllers')
   return controllers.feed
 }
diff --git a/examples/svelte/realtime-trading/src/table/table-config/quote-cells.ts b/examples/svelte/realtime-trading/src/table/table-config/quote-cells.ts
index 12eacc0847..ddc96e7296 100644
--- a/examples/svelte/realtime-trading/src/table/table-config/quote-cells.ts
+++ b/examples/svelte/realtime-trading/src/table/table-config/quote-cells.ts
@@ -1,13 +1,29 @@
 export const quoteCellLifecycle = { created: 0, destroyed: 0 }
 
 export const quoteCellRendererNames = [
-  'Market', 'Name', 'Symbol', 'Last', 'Change', 'ChangePercent', 'Bid',
-  'BidVolume', 'Ask', 'AskVolume', 'Open', 'High', 'Low', 'Intraday',
+  'Market',
+  'Name',
+  'Symbol',
+  'Last',
+  'Change',
+  'ChangePercent',
+  'Bid',
+  'BidVolume',
+  'Ask',
+  'AskVolume',
+  'Open',
+  'High',
+  'Low',
+  'Intraday',
 ] as const
 
 export const quoteComponentNames = [
-  'PriceCell', 'StableMoveCell', 'UpMoveCell', 'DownMoveCell',
-  'PercentChangeCell', 'SparklineCell',
+  'PriceCell',
+  'StableMoveCell',
+  'UpMoveCell',
+  'DownMoveCell',
+  'PercentChangeCell',
+  'SparklineCell',
 ] as const
 
 export type QuoteCellRendererName = (typeof quoteCellRendererNames)[number]
diff --git a/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts b/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
index d563f4e6c8..750f738782 100644
--- a/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
+++ b/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
@@ -12,7 +12,9 @@ export interface CoreTableState {
   columnFilters: Array<{ id: string; value: unknown }>
 }
 
-interface TradingCellContext { row: { original: MarketQuote } }
+interface TradingCellContext {
+  row: { original: MarketQuote }
+}
 
 export interface TradingColumnDefinition {
   id: string
@@ -27,37 +29,178 @@ export interface TradingColumnDefinition {
 }
 
 const compactFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact', maximumFractionDigits: 1,
+  notation: 'compact',
+  maximumFractionDigits: 1,
 })
 
 export const tradingColumns: Array<TradingColumnDefinition> = [
-  { id: 'instrument', header: 'Instrument', columns: [
-    { id: 'market', header: 'Market', size: 72, accessorFn: (row) => row.venue, cell: ({ row }) => recordCellRender('Market', row.original.venue) },
-    { id: 'name', header: 'Name', size: 180, accessorFn: (row) => row.company, cell: ({ row }) => recordCellRender('Name', row.original.company) },
-    { id: 'symbol', header: 'Symbol', size: 92, accessorFn: (row) => row.symbol, filterFn: 'includesString', cell: ({ row }) => recordCellRender('Symbol', row.original.symbol) },
-  ] },
-  { id: 'priceAndChange', header: 'Price & Change', columns: [
-    { id: 'price', header: 'Price', size: 96, accessorFn: (row) => row.price, sortFn: 'basic', cell: ({ row }) => recordCellRender('Last', renderComponent(LastPriceCell, { quote: row.original })) },
-    { id: 'change', header: 'Chg', size: 94, accessorFn: getDayChange, cell: ({ row }) => recordCellRender('Change', renderComponent(DayChangeCell, { quote: row.original })) },
-    { id: 'changePercent', header: 'Chg%', size: 90, accessorFn: getDayChangePercent, cell: ({ row }) => recordCellRender('ChangePercent', renderComponent(PercentChangeCell, { value: getDayChangePercent(row.original) })) },
-  ] },
-  { id: 'orderBook', header: 'Order Book', columns: [
-    { id: 'bid', header: 'Bid', size: 90, accessorFn: (row) => row.bid, cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)) },
-    { id: 'bidSize', header: 'Bid Vol', size: 100, accessorFn: (row) => row.bidSize, cell: ({ row }) => recordCellRender('BidVolume', compactFormatter.format(row.original.bidSize)) },
-    { id: 'ask', header: 'Ask', size: 90, accessorFn: (row) => row.ask, cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)) },
-    { id: 'askSize', header: 'Ask Vol', size: 100, accessorFn: (row) => row.askSize, cell: ({ row }) => recordCellRender('AskVolume', compactFormatter.format(row.original.askSize)) },
-  ] },
-  { id: 'session', header: 'Session', columns: [
-    { id: 'open', header: 'Open', size: 90, accessorFn: (row) => row.open, cell: ({ row }) => recordCellRender('Open', row.original.open.toFixed(2)) },
-    { id: 'high', header: 'High', size: 90, accessorFn: (row) => row.high, cell: ({ row }) => recordCellRender('High', row.original.high.toFixed(2)) },
-    { id: 'low', header: 'Low', size: 90, accessorFn: (row) => row.low, cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)) },
-  ] },
-  { id: 'chart', header: 'Chart', columns: [
-    { id: 'history', header: 'Intraday', size: 150, enableSorting: false, cell: ({ row }) => recordCellRender('Intraday', renderComponent(SparklineCell, { values: row.original.history })) },
-  ] },
+  {
+    id: 'instrument',
+    header: 'Instrument',
+    columns: [
+      {
+        id: 'market',
+        header: 'Market',
+        size: 72,
+        accessorFn: (row) => row.venue,
+        cell: ({ row }) => recordCellRender('Market', row.original.venue),
+      },
+      {
+        id: 'name',
+        header: 'Name',
+        size: 180,
+        accessorFn: (row) => row.company,
+        cell: ({ row }) => recordCellRender('Name', row.original.company),
+      },
+      {
+        id: 'symbol',
+        header: 'Symbol',
+        size: 92,
+        accessorFn: (row) => row.symbol,
+        filterFn: 'includesString',
+        cell: ({ row }) => recordCellRender('Symbol', row.original.symbol),
+      },
+    ],
+  },
+  {
+    id: 'priceAndChange',
+    header: 'Price & Change',
+    columns: [
+      {
+        id: 'price',
+        header: 'Price',
+        size: 96,
+        accessorFn: (row) => row.price,
+        sortFn: 'basic',
+        cell: ({ row }) =>
+          recordCellRender(
+            'Last',
+            renderComponent(LastPriceCell, { quote: row.original }),
+          ),
+      },
+      {
+        id: 'change',
+        header: 'Chg',
+        size: 94,
+        accessorFn: getDayChange,
+        cell: ({ row }) =>
+          recordCellRender(
+            'Change',
+            renderComponent(DayChangeCell, { quote: row.original }),
+          ),
+      },
+      {
+        id: 'changePercent',
+        header: 'Chg%',
+        size: 90,
+        accessorFn: getDayChangePercent,
+        cell: ({ row }) =>
+          recordCellRender(
+            'ChangePercent',
+            renderComponent(PercentChangeCell, {
+              value: getDayChangePercent(row.original),
+            }),
+          ),
+      },
+    ],
+  },
+  {
+    id: 'orderBook',
+    header: 'Order Book',
+    columns: [
+      {
+        id: 'bid',
+        header: 'Bid',
+        size: 90,
+        accessorFn: (row) => row.bid,
+        cell: ({ row }) => recordCellRender('Bid', row.original.bid.toFixed(2)),
+      },
+      {
+        id: 'bidSize',
+        header: 'Bid Vol',
+        size: 100,
+        accessorFn: (row) => row.bidSize,
+        cell: ({ row }) =>
+          recordCellRender(
+            'BidVolume',
+            compactFormatter.format(row.original.bidSize),
+          ),
+      },
+      {
+        id: 'ask',
+        header: 'Ask',
+        size: 90,
+        accessorFn: (row) => row.ask,
+        cell: ({ row }) => recordCellRender('Ask', row.original.ask.toFixed(2)),
+      },
+      {
+        id: 'askSize',
+        header: 'Ask Vol',
+        size: 100,
+        accessorFn: (row) => row.askSize,
+        cell: ({ row }) =>
+          recordCellRender(
+            'AskVolume',
+            compactFormatter.format(row.original.askSize),
+          ),
+      },
+    ],
+  },
+  {
+    id: 'session',
+    header: 'Session',
+    columns: [
+      {
+        id: 'open',
+        header: 'Open',
+        size: 90,
+        accessorFn: (row) => row.open,
+        cell: ({ row }) =>
+          recordCellRender('Open', row.original.open.toFixed(2)),
+      },
+      {
+        id: 'high',
+        header: 'High',
+        size: 90,
+        accessorFn: (row) => row.high,
+        cell: ({ row }) =>
+          recordCellRender('High', row.original.high.toFixed(2)),
+      },
+      {
+        id: 'low',
+        header: 'Low',
+        size: 90,
+        accessorFn: (row) => row.low,
+        cell: ({ row }) => recordCellRender('Low', row.original.low.toFixed(2)),
+      },
+    ],
+  },
+  {
+    id: 'chart',
+    header: 'Chart',
+    columns: [
+      {
+        id: 'history',
+        header: 'Intraday',
+        size: 150,
+        enableSorting: false,
+        cell: ({ row }) =>
+          recordCellRender(
+            'Intraday',
+            renderComponent(SparklineCell, { values: row.original.history }),
+          ),
+      },
+    ],
+  },
 ]
 
-export const rowModelDiagnostics = { hasMeasurement: false, calls: 0, totalDurationMs: 0, maxDurationMs: 0, lastRowCount: 0 }
+export const rowModelDiagnostics = {
+  hasMeasurement: false,
+  calls: 0,
+  totalDurationMs: 0,
+  maxDurationMs: 0,
+  lastRowCount: 0,
+}
 export const TRADING_COLUMN_COUNT = 14
 
 export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
@@ -68,11 +211,28 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
   rowModelDiagnostics.calls++
   rowModelDiagnostics.hasMeasurement = true
   rowModelDiagnostics.totalDurationMs += duration
-  rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration)
+  rowModelDiagnostics.maxDurationMs = Math.max(
+    rowModelDiagnostics.maxDurationMs,
+    duration,
+  )
   rowModelDiagnostics.lastRowCount = rows.length
-  try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* User Timing Level 3 is optional. */ }
+  try {
+    performance.measure('tanstack-row-model', {
+      start,
+      end,
+      detail: { rowCount: rows.length },
+    })
+  } catch {
+    /* User Timing Level 3 is optional. */
+  }
   return rows
 }
 
-export function getDayChange(quote: MarketQuote): number { return quote.price - quote.previousClose }
-export function getDayChangePercent(quote: MarketQuote): number { return quote.previousClose === 0 ? 0 : (getDayChange(quote) / quote.previousClose) * 100 }
+export function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+export function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/svelte/realtime-trading/src/table/trading-table.ts b/examples/svelte/realtime-trading/src/table/trading-table.ts
index 3b6ca3f800..77e4e6bee1 100644
--- a/examples/svelte/realtime-trading/src/table/trading-table.ts
+++ b/examples/svelte/realtime-trading/src/table/trading-table.ts
@@ -1,3 +1,9 @@
-export { TRADING_COLUMN_COUNT, rowModelDiagnostics } from './table-config/trading-columns'
-export type { CoreTableState, RendererMode } from './table-config/trading-columns'
+export {
+  TRADING_COLUMN_COUNT,
+  rowModelDiagnostics,
+} from './table-config/trading-columns'
+export type {
+  CoreTableState,
+  RendererMode,
+} from './table-config/trading-columns'
 export type { VirtualScrollMode } from './trading-row-virtualizer'
diff --git a/examples/svelte/realtime-trading/src/vite-env.d.ts b/examples/svelte/realtime-trading/src/vite-env.d.ts
index ed77210660..11f02fe2a0 100644
--- a/examples/svelte/realtime-trading/src/vite-env.d.ts
+++ b/examples/svelte/realtime-trading/src/vite-env.d.ts
@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-
diff --git a/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts b/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
index 51f19e03cd..f39eea0238 100644
--- a/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
@@ -56,7 +56,9 @@ test('runs the Vue realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )
diff --git a/examples/svelte/realtime-trading/tsconfig.json b/examples/svelte/realtime-trading/tsconfig.json
index 47c369bed0..f5abb31723 100644
--- a/examples/svelte/realtime-trading/tsconfig.json
+++ b/examples/svelte/realtime-trading/tsconfig.json
@@ -15,5 +15,11 @@
     "noFallthroughCasesInSwitch": true,
     "types": ["svelte", "vite/client"]
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte", "tests/**/*.ts", "vite.config.ts"]
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.svelte",
+    "tests/**/*.ts",
+    "vite.config.ts"
+  ]
 }
diff --git a/examples/vue/realtime-trading/README.md b/examples/vue/realtime-trading/README.md
index fc72a56d21..058e4a03bb 100644
--- a/examples/vue/realtime-trading/README.md
+++ b/examples/vue/realtime-trading/README.md
@@ -24,15 +24,15 @@ Use the production build for recordings; Vue development checks add overhead.
 
 ## Structure and ownership
 
-| Path | Responsibility |
-| --- | --- |
-| `src/feed/` | Market model, instrument universe, feed configuration, immutable updates, and feed controller. |
-| `src/feed/worker/` | Typed protocol, deterministic market engine, and module worker. |
-| `src/benchmark/` | Browser monitor, benchmark controller, table timing, lifecycle, and mutation observers. |
-| `src/shell/` | Controller injection, viewport shell, controls, metrics, selected instrument, and diagnostics. |
-| `src/table/table-config/` | Grouped columns and custom Vue quote cells. |
-| `src/table/` | Vue Table instance, delegated interactions, column layout, and Vue Virtual integration. |
-| `src/App.tsx` | Creates/starts controllers, provides them, and composes shell plus table. |
+| Path                      | Responsibility                                                                                 |
+| ------------------------- | ---------------------------------------------------------------------------------------------- |
+| `src/feed/`               | Market model, instrument universe, feed configuration, immutable updates, and feed controller. |
+| `src/feed/worker/`        | Typed protocol, deterministic market engine, and module worker.                                |
+| `src/benchmark/`          | Browser monitor, benchmark controller, table timing, lifecycle, and mutation observers.        |
+| `src/shell/`              | Controller injection, viewport shell, controls, metrics, selected instrument, and diagnostics. |
+| `src/table/table-config/` | Grouped columns and custom Vue quote cells.                                                    |
+| `src/table/`              | Vue Table instance, delegated interactions, column layout, and Vue Virtual integration.        |
+| `src/App.tsx`             | Creates/starts controllers, provides them, and composes shell plus table.                      |
 
 `MarketFeedController` owns worker/feed state; `TradingBenchmarkController`
 observes it and owns benchmark/view state. Vue `provide`/`inject` distributes
diff --git a/examples/vue/realtime-trading/src/App.tsx b/examples/vue/realtime-trading/src/App.tsx
index 554e0a5d63..d8346b2c66 100644
--- a/examples/vue/realtime-trading/src/App.tsx
+++ b/examples/vue/realtime-trading/src/App.tsx
@@ -20,9 +20,7 @@ export const App = defineComponent({
     })
 
     return () => (
-      <TradingShell>
-        {{ default: () => <TradingTable /> }}
-      </TradingShell>
+      <TradingShell>{{ default: () => <TradingTable /> }}</TradingShell>
     )
   },
 })
diff --git a/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
index 2d7399ad3a..2062e371ac 100644
--- a/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
+++ b/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -1,7 +1,9 @@
 import { onBeforeUnmount, onMounted } from 'vue'
 import type { TradingBenchmarkController } from './trading-benchmark-controller'
 
-export function useTableBenchmark(controller: TradingBenchmarkController): void {
+export function useTableBenchmark(
+  controller: TradingBenchmarkController,
+): void {
   const runtime = { mutationObserver: null as MutationObserver | null }
 
   onMounted(() => {
diff --git a/examples/vue/realtime-trading/src/shell/TradingShell.tsx b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
index ed28768958..85aa030154 100644
--- a/examples/vue/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
@@ -55,9 +55,7 @@ export const TradingShell = defineComponent({
           {slots.default?.()}
         </section>
         <MarketStatusbar />
-        <div class="sidebar-slot">
-          {sidebarOpen.value && <Configurator />}
-        </div>
+        <div class="sidebar-slot">{sidebarOpen.value && <Configurator />}</div>
       </main>
     )
   },
@@ -76,7 +74,9 @@ const AppHeader = defineComponent({
     }))
     return () => (
       <header class="app-bar">
-        <div class="brand"><strong>MARKET MONITOR</strong></div>
+        <div class="brand">
+          <strong>MARKET MONITOR</strong>
+        </div>
         <div class="header-actions">
           <span
             class={[
@@ -124,13 +124,46 @@ const MetricsStrip = defineComponent({
       const metrics = state.value.metrics
       return (
         <section class="metrics-strip" aria-label="Live performance metrics">
-          <Metric label="WORKER SAMPLES" value={formatRate(metrics.actualTicksPerSecond)} detail="generated samples/s" testId="actual-rate" />
-          <Metric label="ROW UPDATES" value={formatRate(metrics.rowUpdatesPerSecond)} detail="unique rows applied/s" testId="row-update-rate" />
-          <Metric label="MESSAGES" value={metrics.workerMessagesPerSecond.toFixed(1)} detail="worker messages/s" testId="message-rate" />
-          <Metric label="STATE APPLIES" value={metrics.stateApplicationsPerSecond.toFixed(1)} detail="quote snapshots/s" testId="state-apply-rate" />
-          <Metric label="TABLE COMMITS" value={metrics.tableRendersPerSecond.toFixed(1)} detail="completed renders/s" testId="table-render-rate" />
-          <Metric label="AVG RENDER" value={formatMs(metrics.averageRenderMs)} detail="mutation → render" />
-          <Metric label="P95 RENDER" value={formatMs(metrics.p95RenderMs)} detail={`max ${formatMs(metrics.maxRenderMs)}`} />
+          <Metric
+            label="WORKER SAMPLES"
+            value={formatRate(metrics.actualTicksPerSecond)}
+            detail="generated samples/s"
+            testId="actual-rate"
+          />
+          <Metric
+            label="ROW UPDATES"
+            value={formatRate(metrics.rowUpdatesPerSecond)}
+            detail="unique rows applied/s"
+            testId="row-update-rate"
+          />
+          <Metric
+            label="MESSAGES"
+            value={metrics.workerMessagesPerSecond.toFixed(1)}
+            detail="worker messages/s"
+            testId="message-rate"
+          />
+          <Metric
+            label="STATE APPLIES"
+            value={metrics.stateApplicationsPerSecond.toFixed(1)}
+            detail="quote snapshots/s"
+            testId="state-apply-rate"
+          />
+          <Metric
+            label="TABLE COMMITS"
+            value={metrics.tableRendersPerSecond.toFixed(1)}
+            detail="completed renders/s"
+            testId="table-render-rate"
+          />
+          <Metric
+            label="AVG RENDER"
+            value={formatMs(metrics.averageRenderMs)}
+            detail="mutation → render"
+          />
+          <Metric
+            label="P95 RENDER"
+            value={formatMs(metrics.p95RenderMs)}
+            detail={`max ${formatMs(metrics.maxRenderMs)}`}
+          />
           <Metric
             label="LONG FRAMES"
             value={
@@ -181,10 +214,21 @@ const MarketStatusbar = defineComponent({
     }))
     return () => (
       <footer class="market-statusbar">
-        <span>MESSAGE SAMPLES <strong>{formatInteger(state.value.lastBatchSize)}</strong></span>
-        <span>ROW UPDATES <strong>{formatInteger(state.value.lastUpdateCount)}</strong></span>
-        <span>HOSTS <strong>{formatInteger(state.value.mountedCells)}</strong></span>
-        <span>COMPONENTS <strong>{formatInteger(state.value.liveComponents)}</strong></span>
+        <span>
+          MESSAGE SAMPLES{' '}
+          <strong>{formatInteger(state.value.lastBatchSize)}</strong>
+        </span>
+        <span>
+          ROW UPDATES{' '}
+          <strong>{formatInteger(state.value.lastUpdateCount)}</strong>
+        </span>
+        <span>
+          HOSTS <strong>{formatInteger(state.value.mountedCells)}</strong>
+        </span>
+        <span>
+          COMPONENTS{' '}
+          <strong>{formatInteger(state.value.liveComponents)}</strong>
+        </span>
       </footer>
     )
   },
@@ -199,8 +243,7 @@ const Configurator = defineComponent({
     const benchmarkState = useTradingShellState((state) => state)
     const rendererMode = useSelector(controller.renderAtoms.rendererMode)
     const virtualScrollForced = computed(
-      () =>
-        feedState.value.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT,
+      () => feedState.value.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT,
     )
     const virtualScrollMode = computed(() =>
       resolveVirtualScrollMode(
@@ -215,7 +258,10 @@ const Configurator = defineComponent({
         class="configurator"
         aria-label="Benchmark configurator"
       >
-        <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+        <header>
+          <span>CONFIGURATOR</span>
+          <small>RUN PARAMETERS</small>
+        </header>
         <section class="config-section" aria-labelledby="feed-settings">
           <h2 id="feed-settings">FEED</h2>
           <button
@@ -254,9 +300,7 @@ const Configurator = defineComponent({
               step={1}
               value={feedSampleRateIndex(feedState.value.targetTicksPerSecond)}
               onChange={(event) =>
-                feed.actions.setTargetRate(
-                  feedSampleRateAt(numberValue(event)),
-                )
+                feed.actions.setTargetRate(feedSampleRateAt(numberValue(event)))
               }
             />
             <small>
@@ -310,7 +354,10 @@ const Configurator = defineComponent({
                 )
               }
             />
-            <span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span>
+            <span>
+              Swap Tick component A ↔ B
+              <small>destroy and recreate when direction changes</small>
+            </span>
           </label>
           <label class="toggle-field">
             <input
@@ -320,7 +367,10 @@ const Configurator = defineComponent({
                 feed.actions.setSparklineUpdates(checkedValue(event))
               }
             />
-            <span>Update intraday charts<small>sample rolling prices independently</small></span>
+            <span>
+              Update intraday charts
+              <small>sample rolling prices independently</small>
+            </span>
           </label>
           <label class="field">
             <span>Intraday chart sampling</span>
@@ -338,8 +388,12 @@ const Configurator = defineComponent({
         <section class="config-section" aria-labelledby="stress-actions">
           <h2 id="stress-actions">STRESS ACTIONS</h2>
           <div class="action-grid">
-            <button type="button" onClick={feed.actions.runBurst}>RUN 25K BURST</button>
-            <button type="button" onClick={controller.actions.resetMarket}>RESET SESSION</button>
+            <button type="button" onClick={feed.actions.runBurst}>
+              RUN 25K BURST
+            </button>
+            <button type="button" onClick={controller.actions.resetMarket}>
+              RESET SESSION
+            </button>
           </div>
         </section>
         <Diagnostics />
@@ -356,25 +410,90 @@ const Diagnostics = defineComponent({
     return () => {
       const { metrics } = state.value
       return (
-        <section class="config-section diagnostics" aria-labelledby="diagnostics">
+        <section
+          class="config-section diagnostics"
+          aria-labelledby="diagnostics"
+        >
           <h2 id="diagnostics">DIAGNOSTICS</h2>
           <dl>
-            <Diagnostic label="Mounted cells" value={formatInteger(state.value.mountedCells)} />
-            <Diagnostic label="Live components" value={formatInteger(state.value.liveComponents)} />
-            <Diagnostic label="Created / destroyed" value={`${formatInteger(metrics.componentsCreated)} / ${formatInteger(metrics.componentsDestroyed)}`} />
-            <Diagnostic label="Renderer callbacks / s" value={formatRate(metrics.cellRendererCallsPerSecond)} testId="cell-render-rate" />
-            <Diagnostic label="Component executions / s" value={formatRate(metrics.componentRenderCallsPerSecond)} testId="component-render-rate" />
-            <Diagnostic label="Executions by component / s" value={formatInvocationRates(metrics.componentRenderRates)} testId="component-render-breakdown" />
-            <Diagnostic label="Callbacks by column / s" value={formatInvocationRates(metrics.cellRendererRates)} testId="cell-render-breakdown" />
-            <Diagnostic label="DOM mutation records / s" value={formatRate(metrics.domMutationsPerSecond)} testId="dom-mutation-rate" />
-            <Diagnostic label="Core row model calls / s" value={metrics.rowModelCallsPerSecond.toFixed(1)} testId="row-model-call-rate" />
-            <Diagnostic label="Core row model avg / max" value={`${formatMs(metrics.rowModelAverageMs)} / ${formatMs(metrics.rowModelMaxMs)}`} testId="row-model-duration" />
-            <Diagnostic label="Visible rows" value={formatInteger(metrics.visibleRows)} testId="visible-row-count" />
-            <Diagnostic label="Worker messages" value={formatInteger(metrics.workerMessages)} testId="worker-messages" />
-            <Diagnostic label="Worker-coalesced updates / s" value={formatRate(metrics.supersededUpdatesPerSecond)} testId="superseded-update-rate" />
-            <Diagnostic label="Last samples / updated rows" value={`${formatInteger(metrics.lastBatchSize)} / ${formatInteger(metrics.lastUpdateCount)}`} />
-            <Diagnostic label="Renders > 16.7 ms" value={formatInteger(metrics.slowRenders)} />
-            <Diagnostic label="JS heap" value={metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`} />
+            <Diagnostic
+              label="Mounted cells"
+              value={formatInteger(state.value.mountedCells)}
+            />
+            <Diagnostic
+              label="Live components"
+              value={formatInteger(state.value.liveComponents)}
+            />
+            <Diagnostic
+              label="Created / destroyed"
+              value={`${formatInteger(metrics.componentsCreated)} / ${formatInteger(metrics.componentsDestroyed)}`}
+            />
+            <Diagnostic
+              label="Renderer callbacks / s"
+              value={formatRate(metrics.cellRendererCallsPerSecond)}
+              testId="cell-render-rate"
+            />
+            <Diagnostic
+              label="Component executions / s"
+              value={formatRate(metrics.componentRenderCallsPerSecond)}
+              testId="component-render-rate"
+            />
+            <Diagnostic
+              label="Executions by component / s"
+              value={formatInvocationRates(metrics.componentRenderRates)}
+              testId="component-render-breakdown"
+            />
+            <Diagnostic
+              label="Callbacks by column / s"
+              value={formatInvocationRates(metrics.cellRendererRates)}
+              testId="cell-render-breakdown"
+            />
+            <Diagnostic
+              label="DOM mutation records / s"
+              value={formatRate(metrics.domMutationsPerSecond)}
+              testId="dom-mutation-rate"
+            />
+            <Diagnostic
+              label="Core row model calls / s"
+              value={metrics.rowModelCallsPerSecond.toFixed(1)}
+              testId="row-model-call-rate"
+            />
+            <Diagnostic
+              label="Core row model avg / max"
+              value={`${formatMs(metrics.rowModelAverageMs)} / ${formatMs(metrics.rowModelMaxMs)}`}
+              testId="row-model-duration"
+            />
+            <Diagnostic
+              label="Visible rows"
+              value={formatInteger(metrics.visibleRows)}
+              testId="visible-row-count"
+            />
+            <Diagnostic
+              label="Worker messages"
+              value={formatInteger(metrics.workerMessages)}
+              testId="worker-messages"
+            />
+            <Diagnostic
+              label="Worker-coalesced updates / s"
+              value={formatRate(metrics.supersededUpdatesPerSecond)}
+              testId="superseded-update-rate"
+            />
+            <Diagnostic
+              label="Last samples / updated rows"
+              value={`${formatInteger(metrics.lastBatchSize)} / ${formatInteger(metrics.lastUpdateCount)}`}
+            />
+            <Diagnostic
+              label="Renders > 16.7 ms"
+              value={formatInteger(metrics.slowRenders)}
+            />
+            <Diagnostic
+              label="JS heap"
+              value={
+                metrics.heapMb === null
+                  ? 'N/A'
+                  : `${metrics.heapMb.toFixed(1)} MB`
+              }
+            />
           </dl>
         </section>
       )
@@ -391,7 +510,10 @@ const Diagnostic = defineComponent({
   },
   setup(props) {
     return () => (
-      <div><dt>{props.label}</dt><dd data-testid={props.testId}>{props.value}</dd></div>
+      <div>
+        <dt>{props.label}</dt>
+        <dd data-testid={props.testId}>{props.value}</dd>
+      </div>
     )
   },
 })
@@ -407,29 +529,54 @@ const SelectedInstrument = defineComponent({
       feed.getQuoteBySymbol(quotes.value, selectedSymbol.value),
     )
     return () => (
-      <section class="config-section selected-instrument" data-testid="selected-instrument">
+      <section
+        class="config-section selected-instrument"
+        data-testid="selected-instrument"
+      >
         <h2>SELECTED INSTRUMENT</h2>
         {selectedQuote.value ? (
           <>
             <div class="selection">
-              <div><strong>{selectedQuote.value.symbol}</strong><span>{selectedQuote.value.company}</span></div>
+              <div>
+                <strong>{selectedQuote.value.symbol}</strong>
+                <span>{selectedQuote.value.company}</span>
+              </div>
               <small>{selectedQuote.value.venue}</small>
             </div>
             <dl>
-              <div><dt>Last</dt><dd>{selectedQuote.value.price.toFixed(2)}</dd></div>
-              <div><dt>Bid / ask</dt><dd>{selectedQuote.value.bid.toFixed(2)} / {selectedQuote.value.ask.toFixed(2)}</dd></div>
+              <div>
+                <dt>Last</dt>
+                <dd>{selectedQuote.value.price.toFixed(2)}</dd>
+              </div>
+              <div>
+                <dt>Bid / ask</dt>
+                <dd>
+                  {selectedQuote.value.bid.toFixed(2)} /{' '}
+                  {selectedQuote.value.ask.toFixed(2)}
+                </dd>
+              </div>
             </dl>
           </>
         ) : (
-          <p>Click or begin a cell selection in any row to inspect its instrument.</p>
+          <p>
+            Click or begin a cell selection in any row to inspect its
+            instrument.
+          </p>
         )}
       </section>
     )
   },
 })
 
-function optionNode(option: { readonly label: string; readonly value: number | string }) {
-  return <option key={option.value} value={option.value}>{option.label}</option>
+function optionNode(option: {
+  readonly label: string
+  readonly value: number | string
+}) {
+  return (
+    <option key={option.value} value={option.value}>
+      {option.label}
+    </option>
+  )
 }
 
 function stringValue(event: Event): string {
diff --git a/examples/vue/realtime-trading/src/table/table-config/quote-cells.tsx b/examples/vue/realtime-trading/src/table/table-config/quote-cells.tsx
index e03118649d..810a7386bb 100644
--- a/examples/vue/realtime-trading/src/table/table-config/quote-cells.tsx
+++ b/examples/vue/realtime-trading/src/table/table-config/quote-cells.tsx
@@ -82,10 +82,7 @@ export const PriceCell = defineComponent({
       recordRender()
       return (
         <button
-          class={[
-            'price-button',
-            props.move >= 0 ? 'quote-up' : 'quote-down',
-          ]}
+          class={['price-button', props.move >= 0 ? 'quote-up' : 'quote-down']}
           onClick={props.onSelect}
         >
           {props.price.toFixed(2)}
@@ -158,8 +155,7 @@ export const SparklineCell = defineComponent({
     const recordRender = useLifecycleCounter('SparklineCell')
     return () => {
       recordRender()
-      const rising =
-        (props.values.at(-1) ?? 0) >= (props.values[0] ?? 0)
+      const rising = (props.values.at(-1) ?? 0) >= (props.values[0] ?? 0)
       const { min, max } = findRange(props.values)
       const range = max - min || 1
       const denominator = Math.max(1, props.values.length - 1)
diff --git a/examples/vue/realtime-trading/src/table/trading-table.tsx b/examples/vue/realtime-trading/src/table/trading-table.tsx
index 8a35e0bc81..1fd7a9891e 100644
--- a/examples/vue/realtime-trading/src/table/trading-table.tsx
+++ b/examples/vue/realtime-trading/src/table/trading-table.tsx
@@ -64,8 +64,12 @@ const features = tableFeatures({
   sortFns: { basic: sortFn_basic },
 })
 
-type TradingTableInstance = ReturnType<typeof useTable<typeof features, MarketQuote>>
-type TradingRow = ReturnType<TradingTableInstance['getRowModel']>['rows'][number]
+type TradingTableInstance = ReturnType<
+  typeof useTable<typeof features, MarketQuote>
+>
+type TradingRow = ReturnType<
+  TradingTableInstance['getRowModel']
+>['rows'][number]
 
 interface ColumnDragRuntime {
   columnId: string | null
@@ -114,9 +118,7 @@ export const TradingTable = defineComponent({
     const controller = useTradingShellController()
     const feed = useMarketFeedController()
     const quotes = useMarketFeedState((state) => state.quotes)
-    const instrumentCount = useMarketFeedState(
-      (state) => state.instrumentCount,
-    )
+    const instrumentCount = useMarketFeedState((state) => state.instrumentCount)
     const requestedVirtualScrollMode = useTradingShellState(
       (state) => state.requestedVirtualScrollMode,
     )
@@ -221,13 +223,16 @@ export const TradingTable = defineComponent({
       )
     }
     const resizeObserver = new ResizeObserver(fitAvailableWidth)
-    const sizingSubscription = table.atoms.columnSizing.subscribe(
-      writeColumnSizes,
+    const sizingSubscription =
+      table.atoms.columnSizing.subscribe(writeColumnSizes)
+    const orderSubscription =
+      table.atoms.columnOrder.subscribe(writeColumnSizes)
+    const resizingSubscription = table.atoms.columnResizing.subscribe(
+      (state) => {
+        if (state.isResizingColumn !== false)
+          layoutRuntime.manuallyResized = true
+      },
     )
-    const orderSubscription = table.atoms.columnOrder.subscribe(writeColumnSizes)
-    const resizingSubscription = table.atoms.columnResizing.subscribe((state) => {
-      if (state.isResizingColumn !== false) layoutRuntime.manuallyResized = true
-    })
     onMounted(() => {
       nextTick(() => {
         writeColumnSizes()
@@ -280,9 +285,7 @@ export const TradingTable = defineComponent({
                     width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
                   }}
                   data-column-id={cell.column.id}
-                  data-cell-focused={
-                    cell.getIsFocused() ? 'true' : undefined
-                  }
+                  data-cell-focused={cell.getIsFocused() ? 'true' : undefined}
                   data-selection-top={edges.top ? 'true' : undefined}
                   data-selection-right={edges.right ? 'true' : undefined}
                   data-selection-bottom={edges.bottom ? 'true' : undefined}
@@ -386,10 +389,9 @@ export const TradingTable = defineComponent({
                                     aria-label={`Move ${header.column.id} column`}
                                     onDragstart={(event) => {
                                       dragRuntime.columnId = header.column.id
-                                      dragRuntime.sourceElement =
-                                        (
-                                          event.currentTarget as HTMLElement
-                                        ).closest('th')
+                                      dragRuntime.sourceElement = (
+                                        event.currentTarget as HTMLElement
+                                      ).closest('th')
                                       dragRuntime.sourceElement?.classList.add(
                                         'is-column-dragging',
                                       )
@@ -408,12 +410,11 @@ export const TradingTable = defineComponent({
                                     type="button"
                                     class={[
                                       'sort-header-button',
-                                      header.column.getCanSort() && 'is-sortable',
+                                      header.column.getCanSort() &&
+                                        'is-sortable',
                                     ]}
                                     disabled={!header.column.getCanSort()}
-                                    onClick={
-                                      header.column.getToggleSortingHandler()
-                                    }
+                                    onClick={header.column.getToggleSortingHandler()}
                                   >
                                     <span class="header-label">
                                       <FlexRender header={header} />
diff --git a/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts b/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
index 51f19e03cd..f39eea0238 100644
--- a/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
@@ -56,7 +56,9 @@ test('runs the Vue realtime trading workload', async ({ page }) => {
     await instrumentCount.selectOption('1500')
     await expect(virtualScrollSelect).toHaveValue('tanstack')
     await expect(virtualScrollSelect).toBeDisabled()
-    await expect.poll(() => table.locator('tbody tr').count()).toBeLessThan(1500)
+    await expect
+      .poll(() => table.locator('tbody tr').count())
+      .toBeLessThan(1500)
     await expect(page.getByTestId('virtual-scroll-footer')).toContainText(
       'Total · 1500 rows · 14 columns',
     )

From d96337e39aae48db4f1ad7442b4bd71f830f5895 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Tue, 18 Aug 2026 13:04:38 +0200
Subject: [PATCH 12/23] rename

---
 ...0-instruments.ts => market-instruments.ts} |   4 +-
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 ...0-instruments.ts => market-instruments.ts} |   4 +-
 .../src/app/feed/worker/market-feed-engine.ts |   2 +-
 ...0-instruments.ts => market-instruments.ts} |   4 +-
 .../app/feed/worker/market-feed-engine.ts     |   2 +-
 ...0-instruments.ts => market-instruments.ts} |   4 +-
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 .../src/feed/market-instruments.ts            | 742 ++++++++++++++++++
 .../src/feed/sp500-instruments.ts             | 742 ------------------
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 .../src/feed/market-instruments.ts            | 742 ++++++++++++++++++
 .../src/feed/sp500-instruments.ts             | 742 ------------------
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 .../src/feed/market-instruments.ts            | 742 ++++++++++++++++++
 .../src/feed/sp500-instruments.ts             | 742 ------------------
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 .../sp500-instruments.d.ts                    |  27 -
 .../sp500-instruments.js                      | 718 -----------------
 .../src/feed/market-instruments.ts            | 742 ++++++++++++++++++
 .../src/feed/sp500-instruments.ts             | 742 ------------------
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 .../src/feed/market-instruments.ts            | 742 ++++++++++++++++++
 .../src/feed/sp500-instruments.ts             | 742 ------------------
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 .../src/feed/market-instruments.ts            | 742 ++++++++++++++++++
 .../src/feed/sp500-instruments.ts             | 742 ------------------
 .../src/feed/worker/market-feed-engine.ts     |   2 +-
 28 files changed, 4470 insertions(+), 5215 deletions(-)
 rename examples/alpine/realtime-trading/src/feed/{sp500-instruments.ts => market-instruments.ts} (99%)
 rename examples/angular/realtime-trading/src/app/feed/{sp500-instruments.ts => market-instruments.ts} (99%)
 rename examples/ember/realtime-trading/app/feed/{sp500-instruments.ts => market-instruments.ts} (99%)
 rename examples/lit/realtime-trading/src/feed/{sp500-instruments.ts => market-instruments.ts} (99%)
 create mode 100644 examples/octane/realtime-trading/src/feed/market-instruments.ts
 delete mode 100644 examples/octane/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/preact/realtime-trading/src/feed/market-instruments.ts
 delete mode 100644 examples/preact/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/react/realtime-trading/src/feed/market-instruments.ts
 delete mode 100644 examples/react/realtime-trading/src/feed/sp500-instruments.ts
 delete mode 100644 examples/realtime-trading-shared/sp500-instruments.d.ts
 delete mode 100644 examples/realtime-trading-shared/sp500-instruments.js
 create mode 100644 examples/solid/realtime-trading/src/feed/market-instruments.ts
 delete mode 100644 examples/solid/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/svelte/realtime-trading/src/feed/market-instruments.ts
 delete mode 100644 examples/svelte/realtime-trading/src/feed/sp500-instruments.ts
 create mode 100644 examples/vue/realtime-trading/src/feed/market-instruments.ts
 delete mode 100644 examples/vue/realtime-trading/src/feed/sp500-instruments.ts

diff --git a/examples/alpine/realtime-trading/src/feed/sp500-instruments.ts b/examples/alpine/realtime-trading/src/feed/market-instruments.ts
similarity index 99%
rename from examples/alpine/realtime-trading/src/feed/sp500-instruments.ts
rename to examples/alpine/realtime-trading/src/feed/market-instruments.ts
index c44eb5d152..ac18d14ea9 100644
--- a/examples/alpine/realtime-trading/src/feed/sp500-instruments.ts
+++ b/examples/alpine/realtime-trading/src/feed/market-instruments.ts
@@ -29,7 +29,7 @@ export type BaseInstrument = readonly [
  * Retrieved: 2026-08-15.
  * Multiple share classes are intentionally represented as separate instruments.
  */
-export const sp500Instruments = Object.freeze([
+export const marketInstruments = Object.freeze([
   ['MMM', '3M', 'US'],
   ['AOS', 'A. O. Smith', 'US'],
   ['ABT', 'Abbott Laboratories', 'US'],
@@ -729,7 +729,7 @@ const INTERNATIONAL_INSERTION_INTERVAL = 3
  * sizes exercise multiple symbol formats and market labels.
  */
 export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
+  marketInstruments.flatMap((instrument, index) => {
     const internationalInstrument =
       index % INTERNATIONAL_INSERTION_INTERVAL === 0
         ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
diff --git a/examples/alpine/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/alpine/realtime-trading/src/feed/worker/market-feed-engine.ts
index 557f7c30a8..fbd9c369c0 100644
--- a/examples/alpine/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/alpine/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/angular/realtime-trading/src/app/feed/sp500-instruments.ts b/examples/angular/realtime-trading/src/app/feed/market-instruments.ts
similarity index 99%
rename from examples/angular/realtime-trading/src/app/feed/sp500-instruments.ts
rename to examples/angular/realtime-trading/src/app/feed/market-instruments.ts
index c44eb5d152..ac18d14ea9 100644
--- a/examples/angular/realtime-trading/src/app/feed/sp500-instruments.ts
+++ b/examples/angular/realtime-trading/src/app/feed/market-instruments.ts
@@ -29,7 +29,7 @@ export type BaseInstrument = readonly [
  * Retrieved: 2026-08-15.
  * Multiple share classes are intentionally represented as separate instruments.
  */
-export const sp500Instruments = Object.freeze([
+export const marketInstruments = Object.freeze([
   ['MMM', '3M', 'US'],
   ['AOS', 'A. O. Smith', 'US'],
   ['ABT', 'Abbott Laboratories', 'US'],
@@ -729,7 +729,7 @@ const INTERNATIONAL_INSERTION_INTERVAL = 3
  * sizes exercise multiple symbol formats and market labels.
  */
 export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
+  marketInstruments.flatMap((instrument, index) => {
     const internationalInstrument =
       index % INTERNATIONAL_INSERTION_INTERVAL === 0
         ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
diff --git a/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts b/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
index 557f7c30a8..86a68e2f64 100644
--- a/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
+++ b/examples/angular/realtime-trading/src/app/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/ember/realtime-trading/app/feed/sp500-instruments.ts b/examples/ember/realtime-trading/app/feed/market-instruments.ts
similarity index 99%
rename from examples/ember/realtime-trading/app/feed/sp500-instruments.ts
rename to examples/ember/realtime-trading/app/feed/market-instruments.ts
index c44eb5d152..ac18d14ea9 100644
--- a/examples/ember/realtime-trading/app/feed/sp500-instruments.ts
+++ b/examples/ember/realtime-trading/app/feed/market-instruments.ts
@@ -29,7 +29,7 @@ export type BaseInstrument = readonly [
  * Retrieved: 2026-08-15.
  * Multiple share classes are intentionally represented as separate instruments.
  */
-export const sp500Instruments = Object.freeze([
+export const marketInstruments = Object.freeze([
   ['MMM', '3M', 'US'],
   ['AOS', 'A. O. Smith', 'US'],
   ['ABT', 'Abbott Laboratories', 'US'],
@@ -729,7 +729,7 @@ const INTERNATIONAL_INSERTION_INTERVAL = 3
  * sizes exercise multiple symbol formats and market labels.
  */
 export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
+  marketInstruments.flatMap((instrument, index) => {
     const internationalInstrument =
       index % INTERNATIONAL_INSERTION_INTERVAL === 0
         ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
diff --git a/examples/ember/realtime-trading/app/feed/worker/market-feed-engine.ts b/examples/ember/realtime-trading/app/feed/worker/market-feed-engine.ts
index 9541606f84..3e5818f4d7 100644
--- a/examples/ember/realtime-trading/app/feed/worker/market-feed-engine.ts
+++ b/examples/ember/realtime-trading/app/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/lit/realtime-trading/src/feed/sp500-instruments.ts b/examples/lit/realtime-trading/src/feed/market-instruments.ts
similarity index 99%
rename from examples/lit/realtime-trading/src/feed/sp500-instruments.ts
rename to examples/lit/realtime-trading/src/feed/market-instruments.ts
index c44eb5d152..ac18d14ea9 100644
--- a/examples/lit/realtime-trading/src/feed/sp500-instruments.ts
+++ b/examples/lit/realtime-trading/src/feed/market-instruments.ts
@@ -29,7 +29,7 @@ export type BaseInstrument = readonly [
  * Retrieved: 2026-08-15.
  * Multiple share classes are intentionally represented as separate instruments.
  */
-export const sp500Instruments = Object.freeze([
+export const marketInstruments = Object.freeze([
   ['MMM', '3M', 'US'],
   ['AOS', 'A. O. Smith', 'US'],
   ['ABT', 'Abbott Laboratories', 'US'],
@@ -729,7 +729,7 @@ const INTERNATIONAL_INSERTION_INTERVAL = 3
  * sizes exercise multiple symbol formats and market labels.
  */
 export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
+  marketInstruments.flatMap((instrument, index) => {
     const internationalInstrument =
       index % INTERNATIONAL_INSERTION_INTERVAL === 0
         ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
diff --git a/examples/lit/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/lit/realtime-trading/src/feed/worker/market-feed-engine.ts
index 557f7c30a8..fbd9c369c0 100644
--- a/examples/lit/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/lit/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/octane/realtime-trading/src/feed/market-instruments.ts b/examples/octane/realtime-trading/src/feed/market-instruments.ts
new file mode 100644
index 0000000000..ac18d14ea9
--- /dev/null
+++ b/examples/octane/realtime-trading/src/feed/market-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const marketInstruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  marketInstruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/octane/realtime-trading/src/feed/sp500-instruments.ts b/examples/octane/realtime-trading/src/feed/sp500-instruments.ts
deleted file mode 100644
index c44eb5d152..0000000000
--- a/examples/octane/realtime-trading/src/feed/sp500-instruments.ts
+++ /dev/null
@@ -1,742 +0,0 @@
-export type MarketCode =
-  | 'US'
-  | 'NL'
-  | 'DE'
-  | 'FR'
-  | 'IT'
-  | 'ES'
-  | 'CH'
-  | 'DK'
-  | 'SE'
-  | 'FI'
-  | 'GB'
-  | 'KR'
-  | 'JP'
-  | 'HK'
-  | 'CA'
-  | 'AU'
-
-export type BaseInstrument = readonly [
-  symbol: string,
-  company: string,
-  market: MarketCode,
-]
-
-/**
- * Current S&P 500 constituent universe used by the realtime trading examples.
- *
- * Source snapshot: https://github.com/datasets/s-and-p-500-companies
- * Retrieved: 2026-08-15.
- * Multiple share classes are intentionally represented as separate instruments.
- */
-export const sp500Instruments = Object.freeze([
-  ['MMM', '3M', 'US'],
-  ['AOS', 'A. O. Smith', 'US'],
-  ['ABT', 'Abbott Laboratories', 'US'],
-  ['ABBV', 'AbbVie', 'US'],
-  ['ACN', 'Accenture', 'US'],
-  ['ADBE', 'Adobe Inc.', 'US'],
-  ['AMD', 'Advanced Micro Devices', 'US'],
-  ['AES', 'AES Corporation', 'US'],
-  ['AFL', 'Aflac', 'US'],
-  ['A', 'Agilent Technologies', 'US'],
-  ['APD', 'Air Products', 'US'],
-  ['ABNB', 'Airbnb', 'US'],
-  ['AKAM', 'Akamai Technologies', 'US'],
-  ['ALB', 'Albemarle Corporation', 'US'],
-  ['ARE', 'Alexandria Real Estate Equities', 'US'],
-  ['ALGN', 'Align Technology', 'US'],
-  ['ALLE', 'Allegion', 'US'],
-  ['LNT', 'Alliant Energy', 'US'],
-  ['ALL', 'Allstate', 'US'],
-  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
-  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
-  ['MO', 'Altria', 'US'],
-  ['AMZN', 'Amazon', 'US'],
-  ['AMCR', 'Amcor', 'US'],
-  ['AEE', 'Ameren', 'US'],
-  ['AEP', 'American Electric Power', 'US'],
-  ['AXP', 'American Express', 'US'],
-  ['AIG', 'American International Group', 'US'],
-  ['AMT', 'American Tower', 'US'],
-  ['AWK', 'American Water Works', 'US'],
-  ['AMP', 'Ameriprise Financial', 'US'],
-  ['AME', 'Ametek', 'US'],
-  ['AMGN', 'Amgen', 'US'],
-  ['APH', 'Amphenol', 'US'],
-  ['ADI', 'Analog Devices', 'US'],
-  ['AON', 'Aon plc', 'US'],
-  ['APA', 'APA Corporation', 'US'],
-  ['APO', 'Apollo Global Management', 'US'],
-  ['AAPL', 'Apple Inc.', 'US'],
-  ['AMAT', 'Applied Materials', 'US'],
-  ['APP', 'AppLovin', 'US'],
-  ['APTV', 'Aptiv', 'US'],
-  ['ACGL', 'Arch Capital Group', 'US'],
-  ['ADM', 'Archer Daniels Midland', 'US'],
-  ['ARES', 'Ares Management', 'US'],
-  ['ANET', 'Arista Networks', 'US'],
-  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
-  ['AIZ', 'Assurant', 'US'],
-  ['T', 'AT&T', 'US'],
-  ['ATO', 'Atmos Energy', 'US'],
-  ['ADSK', 'Autodesk', 'US'],
-  ['ADP', 'Automatic Data Processing', 'US'],
-  ['AZO', 'AutoZone', 'US'],
-  ['AVB', 'AvalonBay Communities', 'US'],
-  ['AVY', 'Avery Dennison', 'US'],
-  ['AXON', 'Axon Enterprise', 'US'],
-  ['BKR', 'Baker Hughes', 'US'],
-  ['BALL', 'Ball Corporation', 'US'],
-  ['BAC', 'Bank of America', 'US'],
-  ['BAX', 'Baxter International', 'US'],
-  ['BDX', 'Becton Dickinson', 'US'],
-  ['BRK.B', 'Berkshire Hathaway', 'US'],
-  ['BBY', 'Best Buy', 'US'],
-  ['TECH', 'Bio-Techne', 'US'],
-  ['BIIB', 'Biogen', 'US'],
-  ['BLK', 'BlackRock', 'US'],
-  ['BX', 'Blackstone Inc.', 'US'],
-  ['XYZ', 'Block, Inc.', 'US'],
-  ['BNY', 'BNY Mellon', 'US'],
-  ['BA', 'Boeing', 'US'],
-  ['BKNG', 'Booking Holdings', 'US'],
-  ['BSX', 'Boston Scientific', 'US'],
-  ['BMY', 'Bristol Myers Squibb', 'US'],
-  ['AVGO', 'Broadcom', 'US'],
-  ['BR', 'Broadridge Financial Solutions', 'US'],
-  ['BRO', 'Brown & Brown', 'US'],
-  ['BF.B', 'Brown–Forman', 'US'],
-  ['BLDR', 'Builders FirstSource', 'US'],
-  ['BG', 'Bunge Global', 'US'],
-  ['BXP', 'BXP, Inc.', 'US'],
-  ['CHRW', 'C.H. Robinson', 'US'],
-  ['CDNS', 'Cadence Design Systems', 'US'],
-  ['CPT', 'Camden Property Trust', 'US'],
-  ['COF', 'Capital One', 'US'],
-  ['CAH', 'Cardinal Health', 'US'],
-  ['CCL', 'Carnival Corporation', 'US'],
-  ['CARR', 'Carrier Global', 'US'],
-  ['CVNA', 'Carvana', 'US'],
-  ['CASY', "Casey's", 'US'],
-  ['CAT', 'Caterpillar Inc.', 'US'],
-  ['CBOE', 'Cboe Global Markets', 'US'],
-  ['CBRE', 'CBRE Group', 'US'],
-  ['CDW', 'CDW Corporation', 'US'],
-  ['COR', 'Cencora', 'US'],
-  ['CNC', 'Centene Corporation', 'US'],
-  ['CNP', 'CenterPoint Energy', 'US'],
-  ['CF', 'CF Industries', 'US'],
-  ['CRL', 'Charles River Laboratories', 'US'],
-  ['SCHW', 'Charles Schwab Corporation', 'US'],
-  ['CHTR', 'Charter Communications', 'US'],
-  ['CVX', 'Chevron Corporation', 'US'],
-  ['CMG', 'Chipotle Mexican Grill', 'US'],
-  ['CB', 'Chubb Limited', 'US'],
-  ['CHD', 'Church & Dwight', 'US'],
-  ['CIEN', 'Ciena', 'US'],
-  ['CI', 'Cigna', 'US'],
-  ['CINF', 'Cincinnati Financial', 'US'],
-  ['CTAS', 'Cintas', 'US'],
-  ['CSCO', 'Cisco', 'US'],
-  ['C', 'Citigroup', 'US'],
-  ['CFG', 'Citizens Financial Group', 'US'],
-  ['CLX', 'Clorox', 'US'],
-  ['CME', 'CME Group', 'US'],
-  ['CMS', 'CMS Energy', 'US'],
-  ['KO', 'Coca-Cola Company (The)', 'US'],
-  ['CTSH', 'Cognizant', 'US'],
-  ['COHR', 'Coherent Corp.', 'US'],
-  ['COIN', 'Coinbase', 'US'],
-  ['CL', 'Colgate-Palmolive', 'US'],
-  ['CMCSA', 'Comcast', 'US'],
-  ['FIX', 'Comfort Systems USA', 'US'],
-  ['COP', 'ConocoPhillips', 'US'],
-  ['ED', 'Consolidated Edison', 'US'],
-  ['STZ', 'Constellation Brands', 'US'],
-  ['CEG', 'Constellation Energy', 'US'],
-  ['COO', 'Cooper Companies (The)', 'US'],
-  ['CPRT', 'Copart', 'US'],
-  ['GLW', 'Corning Inc.', 'US'],
-  ['CPAY', 'Corpay', 'US'],
-  ['CTVA', 'Corteva', 'US'],
-  ['CSGP', 'CoStar Group', 'US'],
-  ['COST', 'Costco', 'US'],
-  ['CRH', 'CRH plc', 'US'],
-  ['CRWD', 'CrowdStrike', 'US'],
-  ['CCI', 'Crown Castle', 'US'],
-  ['CSX', 'CSX Corporation', 'US'],
-  ['CMI', 'Cummins', 'US'],
-  ['CVS', 'CVS Health', 'US'],
-  ['DHR', 'Danaher Corporation', 'US'],
-  ['DRI', 'Darden Restaurants', 'US'],
-  ['DDOG', 'Datadog', 'US'],
-  ['DVA', 'DaVita', 'US'],
-  ['DECK', 'Deckers Brands', 'US'],
-  ['DE', 'Deere & Company', 'US'],
-  ['DELL', 'Dell Technologies', 'US'],
-  ['DAL', 'Delta Air Lines', 'US'],
-  ['DVN', 'Devon Energy', 'US'],
-  ['DXCM', 'Dexcom', 'US'],
-  ['FANG', 'Diamondback Energy', 'US'],
-  ['DLR', 'Digital Realty', 'US'],
-  ['DG', 'Dollar General', 'US'],
-  ['DLTR', 'Dollar Tree', 'US'],
-  ['D', 'Dominion Energy', 'US'],
-  ['DPZ', "Domino's", 'US'],
-  ['DASH', 'DoorDash', 'US'],
-  ['DOV', 'Dover Corporation', 'US'],
-  ['DOW', 'Dow Inc.', 'US'],
-  ['DHI', 'D. R. Horton', 'US'],
-  ['DTE', 'DTE Energy', 'US'],
-  ['DUK', 'Duke Energy', 'US'],
-  ['DD', 'DuPont', 'US'],
-  ['ETN', 'Eaton Corporation', 'US'],
-  ['EBAY', 'eBay Inc.', 'US'],
-  ['ECHO', 'EchoStar', 'US'],
-  ['ECL', 'Ecolab', 'US'],
-  ['EIX', 'Edison International', 'US'],
-  ['EW', 'Edwards Lifesciences', 'US'],
-  ['ELV', 'Elevance Health', 'US'],
-  ['EME', 'Emcor', 'US'],
-  ['EMR', 'Emerson Electric', 'US'],
-  ['ETR', 'Entergy', 'US'],
-  ['EOG', 'EOG Resources', 'US'],
-  ['EQT', 'EQT Corporation', 'US'],
-  ['EFX', 'Equifax', 'US'],
-  ['EQIX', 'Equinix', 'US'],
-  ['EQR', 'Equity Residential', 'US'],
-  ['ERIE', 'Erie Indemnity', 'US'],
-  ['ESS', 'Essex Property Trust', 'US'],
-  ['EL', 'Estée Lauder Companies (The)', 'US'],
-  ['EG', 'Everest Group', 'US'],
-  ['EVRG', 'Evergy', 'US'],
-  ['ES', 'Eversource Energy', 'US'],
-  ['EXC', 'Exelon', 'US'],
-  ['EXE', 'Expand Energy', 'US'],
-  ['EXPE', 'Expedia Group', 'US'],
-  ['EXPD', 'Expeditors International', 'US'],
-  ['EXR', 'Extra Space Storage', 'US'],
-  ['XOM', 'ExxonMobil', 'US'],
-  ['FFIV', 'F5, Inc.', 'US'],
-  ['FDS', 'FactSet', 'US'],
-  ['FICO', 'Fair Isaac', 'US'],
-  ['FAST', 'Fastenal', 'US'],
-  ['FRT', 'Federal Realty Investment Trust', 'US'],
-  ['FDX', 'FedEx', 'US'],
-  ['FDXF', 'FedEx Freight', 'US'],
-  ['FERG', 'Ferguson Enterprises', 'US'],
-  ['FIS', 'Fidelity National Information Services', 'US'],
-  ['FITB', 'Fifth Third Bancorp', 'US'],
-  ['FSLR', 'First Solar', 'US'],
-  ['FE', 'FirstEnergy', 'US'],
-  ['FISV', 'Fiserv', 'US'],
-  ['FLEX', 'Flex Ltd.', 'US'],
-  ['F', 'Ford Motor Company', 'US'],
-  ['FTNT', 'Fortinet', 'US'],
-  ['FTV', 'Fortive', 'US'],
-  ['FOXA', 'Fox Corporation (Class A)', 'US'],
-  ['FOX', 'Fox Corporation (Class B)', 'US'],
-  ['BEN', 'Franklin Resources', 'US'],
-  ['FCX', 'Freeport-McMoRan', 'US'],
-  ['GRMN', 'Garmin', 'US'],
-  ['IT', 'Gartner', 'US'],
-  ['GE', 'GE Aerospace', 'US'],
-  ['GEHC', 'GE HealthCare', 'US'],
-  ['GEV', 'GE Vernova', 'US'],
-  ['GEN', 'Gen Digital', 'US'],
-  ['GNRC', 'Generac', 'US'],
-  ['GD', 'General Dynamics', 'US'],
-  ['GIS', 'General Mills', 'US'],
-  ['GM', 'General Motors', 'US'],
-  ['GPC', 'Genuine Parts Company', 'US'],
-  ['GILD', 'Gilead Sciences', 'US'],
-  ['GPN', 'Global Payments', 'US'],
-  ['GL', 'Globe Life', 'US'],
-  ['GDDY', 'GoDaddy', 'US'],
-  ['GS', 'Goldman Sachs', 'US'],
-  ['HAL', 'Halliburton', 'US'],
-  ['HIG', 'Hartford (The)', 'US'],
-  ['HAS', 'Hasbro', 'US'],
-  ['HCA', 'HCA Healthcare', 'US'],
-  ['DOC', 'Healthpeak Properties', 'US'],
-  ['HSIC', 'Henry Schein', 'US'],
-  ['HSY', 'Hershey Company (The)', 'US'],
-  ['HPE', 'Hewlett Packard Enterprise', 'US'],
-  ['HLT', 'Hilton Worldwide', 'US'],
-  ['HD', 'Home Depot (The)', 'US'],
-  ['HONA', 'Honeywell Aerospace', 'US'],
-  ['HON', 'Honeywell Technologies', 'US'],
-  ['HRL', 'Hormel Foods', 'US'],
-  ['HST', 'Host Hotels & Resorts', 'US'],
-  ['HWM', 'Howmet Aerospace', 'US'],
-  ['HPQ', 'HP Inc.', 'US'],
-  ['HUBB', 'Hubbell Incorporated', 'US'],
-  ['HUM', 'Humana', 'US'],
-  ['HBAN', 'Huntington Bancshares', 'US'],
-  ['HII', 'Huntington Ingalls Industries', 'US'],
-  ['IBM', 'IBM', 'US'],
-  ['IEX', 'IDEX Corporation', 'US'],
-  ['IDXX', 'Idexx Laboratories', 'US'],
-  ['ITW', 'Illinois Tool Works', 'US'],
-  ['INCY', 'Incyte', 'US'],
-  ['IR', 'Ingersoll Rand', 'US'],
-  ['PODD', 'Insulet Corporation', 'US'],
-  ['INTC', 'Intel', 'US'],
-  ['IBKR', 'Interactive Brokers', 'US'],
-  ['ICE', 'Intercontinental Exchange', 'US'],
-  ['IFF', 'International Flavors & Fragrances', 'US'],
-  ['IP', 'International Paper', 'US'],
-  ['INTU', 'Intuit', 'US'],
-  ['ISRG', 'Intuitive Surgical', 'US'],
-  ['IVZ', 'Invesco', 'US'],
-  ['INVH', 'Invitation Homes', 'US'],
-  ['IQV', 'IQVIA', 'US'],
-  ['IRM', 'Iron Mountain', 'US'],
-  ['JBHT', 'J.B. Hunt', 'US'],
-  ['JBL', 'Jabil', 'US'],
-  ['JKHY', 'Jack Henry & Associates', 'US'],
-  ['J', 'Jacobs Solutions', 'US'],
-  ['JNJ', 'Johnson & Johnson', 'US'],
-  ['JCI', 'Johnson Controls', 'US'],
-  ['JPM', 'JPMorgan Chase', 'US'],
-  ['KVUE', 'Kenvue', 'US'],
-  ['KDP', 'Keurig Dr Pepper', 'US'],
-  ['KEY', 'KeyCorp', 'US'],
-  ['KEYS', 'Keysight Technologies', 'US'],
-  ['KMB', 'Kimberly-Clark', 'US'],
-  ['KIM', 'Kimco Realty', 'US'],
-  ['KMI', 'Kinder Morgan', 'US'],
-  ['KKR', 'KKR & Co.', 'US'],
-  ['KLAC', 'KLA Corporation', 'US'],
-  ['KHC', 'Kraft Heinz', 'US'],
-  ['KR', 'Kroger', 'US'],
-  ['LHX', 'L3Harris', 'US'],
-  ['LH', 'Labcorp', 'US'],
-  ['LRCX', 'Lam Research', 'US'],
-  ['LVS', 'Las Vegas Sands', 'US'],
-  ['LDOS', 'Leidos', 'US'],
-  ['LEN', 'Lennar', 'US'],
-  ['LII', 'Lennox International', 'US'],
-  ['LLY', 'Lilly (Eli)', 'US'],
-  ['LIN', 'Linde plc', 'US'],
-  ['LYV', 'Live Nation Entertainment', 'US'],
-  ['LMT', 'Lockheed Martin', 'US'],
-  ['L', 'Loews Corporation', 'US'],
-  ['LOW', "Lowe's", 'US'],
-  ['LULU', 'Lululemon Athletica', 'US'],
-  ['LITE', 'Lumentum', 'US'],
-  ['LYB', 'LyondellBasell', 'US'],
-  ['MTB', 'M&T Bank', 'US'],
-  ['MPC', 'Marathon Petroleum', 'US'],
-  ['MAR', 'Marriott International', 'US'],
-  ['MRSH', 'Marsh McLennan', 'US'],
-  ['MLM', 'Martin Marietta Materials', 'US'],
-  ['MRVL', 'Marvell Technology', 'US'],
-  ['MAS', 'Masco', 'US'],
-  ['MA', 'Mastercard', 'US'],
-  ['MKC', 'McCormick & Company', 'US'],
-  ['MCD', "McDonald's", 'US'],
-  ['MCK', 'McKesson Corporation', 'US'],
-  ['MDT', 'Medtronic', 'US'],
-  ['MRK', 'Merck & Co.', 'US'],
-  ['META', 'Meta Platforms', 'US'],
-  ['MET', 'MetLife', 'US'],
-  ['MTD', 'Mettler Toledo', 'US'],
-  ['MGM', 'MGM Resorts', 'US'],
-  ['MCHP', 'Microchip Technology', 'US'],
-  ['MU', 'Micron Technology', 'US'],
-  ['MSFT', 'Microsoft', 'US'],
-  ['MAA', 'Mid-America Apartment Communities', 'US'],
-  ['MRNA', 'Moderna', 'US'],
-  ['TAP', 'Molson Coors Beverage Company', 'US'],
-  ['MDLZ', 'Mondelez International', 'US'],
-  ['MPWR', 'Monolithic Power Systems', 'US'],
-  ['MNST', 'Monster Beverage', 'US'],
-  ['MCO', "Moody's Corporation", 'US'],
-  ['MS', 'Morgan Stanley', 'US'],
-  ['MOS', 'Mosaic Company (The)', 'US'],
-  ['MSI', 'Motorola Solutions', 'US'],
-  ['MSCI', 'MSCI', 'US'],
-  ['NDAQ', 'Nasdaq, Inc.', 'US'],
-  ['NTAP', 'NetApp', 'US'],
-  ['NFLX', 'Netflix', 'US'],
-  ['NEM', 'Newmont', 'US'],
-  ['NWSA', 'News Corp (Class A)', 'US'],
-  ['NWS', 'News Corp (Class B)', 'US'],
-  ['NEE', 'NextEra Energy', 'US'],
-  ['NKE', 'Nike, Inc.', 'US'],
-  ['NI', 'NiSource', 'US'],
-  ['NDSN', 'Nordson Corporation', 'US'],
-  ['NSC', 'Norfolk Southern', 'US'],
-  ['NTRS', 'Northern Trust', 'US'],
-  ['NOC', 'Northrop Grumman', 'US'],
-  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
-  ['NRG', 'NRG Energy', 'US'],
-  ['NUE', 'Nucor', 'US'],
-  ['NVDA', 'Nvidia', 'US'],
-  ['NVR', 'NVR, Inc.', 'US'],
-  ['NXPI', 'NXP Semiconductors', 'US'],
-  ['ORLY', "O'Reilly Automotive", 'US'],
-  ['OXY', 'Occidental Petroleum', 'US'],
-  ['ODFL', 'Old Dominion', 'US'],
-  ['OMC', 'Omnicom Group', 'US'],
-  ['ON', 'ON Semiconductor', 'US'],
-  ['OKE', 'Oneok', 'US'],
-  ['ORCL', 'Oracle Corporation', 'US'],
-  ['OTIS', 'Otis Worldwide', 'US'],
-  ['PCAR', 'Paccar', 'US'],
-  ['PKG', 'Packaging Corporation of America', 'US'],
-  ['PLTR', 'Palantir Technologies', 'US'],
-  ['PANW', 'Palo Alto Networks', 'US'],
-  ['PSKY', 'Paramount Skydance Corporation', 'US'],
-  ['PH', 'Parker Hannifin', 'US'],
-  ['PAYX', 'Paychex', 'US'],
-  ['PYPL', 'PayPal', 'US'],
-  ['PNR', 'Pentair', 'US'],
-  ['PEP', 'PepsiCo', 'US'],
-  ['PFE', 'Pfizer', 'US'],
-  ['PCG', 'PG&E Corporation', 'US'],
-  ['PM', 'Philip Morris International', 'US'],
-  ['PSX', 'Phillips 66', 'US'],
-  ['PNW', 'Pinnacle West Capital', 'US'],
-  ['PNC', 'PNC Financial Services', 'US'],
-  ['PPG', 'PPG Industries', 'US'],
-  ['PPL', 'PPL Corporation', 'US'],
-  ['PFG', 'Principal Financial Group', 'US'],
-  ['PG', 'Procter & Gamble', 'US'],
-  ['PGR', 'Progressive Corporation', 'US'],
-  ['PLD', 'Prologis', 'US'],
-  ['PRU', 'Prudential Financial', 'US'],
-  ['PEG', 'Public Service Enterprise Group', 'US'],
-  ['PTC', 'PTC Inc.', 'US'],
-  ['PSA', 'Public Storage', 'US'],
-  ['PHM', 'PulteGroup', 'US'],
-  ['PWR', 'Quanta Services', 'US'],
-  ['QCOM', 'Qualcomm', 'US'],
-  ['DGX', 'Quest Diagnostics', 'US'],
-  ['Q', 'Qnity Electronics', 'US'],
-  ['RL', 'Ralph Lauren Corporation', 'US'],
-  ['RJF', 'Raymond James Financial', 'US'],
-  ['RTX', 'RTX Corporation', 'US'],
-  ['O', 'Realty Income', 'US'],
-  ['REG', 'Regency Centers', 'US'],
-  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
-  ['RF', 'Regions Financial Corporation', 'US'],
-  ['RSG', 'Republic Services', 'US'],
-  ['RMD', 'ResMed|', 'US'],
-  ['RVTY', 'Revvity', 'US'],
-  ['HOOD', 'Robinhood Markets', 'US'],
-  ['ROK', 'Rockwell Automation', 'US'],
-  ['ROL', 'Rollins, Inc.', 'US'],
-  ['ROP', 'Roper Technologies', 'US'],
-  ['ROST', 'Ross Stores', 'US'],
-  ['RCL', 'Royal Caribbean Group', 'US'],
-  ['SPGI', 'S&P Global', 'US'],
-  ['CRM', 'Salesforce', 'US'],
-  ['SNDK', 'Sandisk', 'US'],
-  ['SBAC', 'SBA Communications', 'US'],
-  ['SLB', 'Schlumberger', 'US'],
-  ['STX', 'Seagate Technology', 'US'],
-  ['SRE', 'Sempra', 'US'],
-  ['NOW', 'ServiceNow', 'US'],
-  ['SHW', 'Sherwin-Williams', 'US'],
-  ['SPG', 'Simon Property Group', 'US'],
-  ['SWKS', 'Skyworks Solutions', 'US'],
-  ['SJM', 'J.M. Smucker Company (The)', 'US'],
-  ['SW', 'Smurfit Westrock', 'US'],
-  ['SNA', 'Snap-on', 'US'],
-  ['SOLV', 'Solventum', 'US'],
-  ['SO', 'Southern Company', 'US'],
-  ['LUV', 'Southwest Airlines', 'US'],
-  ['SWK', 'Stanley Black & Decker', 'US'],
-  ['SBUX', 'Starbucks', 'US'],
-  ['STT', 'State Street Corporation', 'US'],
-  ['STLD', 'Steel Dynamics', 'US'],
-  ['STE', 'Steris', 'US'],
-  ['SYK', 'Stryker Corporation', 'US'],
-  ['SMCI', 'Supermicro', 'US'],
-  ['SYF', 'Synchrony Financial', 'US'],
-  ['SNPS', 'Synopsys', 'US'],
-  ['SYY', 'Sysco', 'US'],
-  ['TMUS', 'T-Mobile US', 'US'],
-  ['TROW', 'T. Rowe Price', 'US'],
-  ['TTWO', 'Take-Two Interactive', 'US'],
-  ['TPR', 'Tapestry, Inc.', 'US'],
-  ['TRGP', 'Targa Resources', 'US'],
-  ['TGT', 'Target Corporation', 'US'],
-  ['TEL', 'TE Connectivity', 'US'],
-  ['TDY', 'Teledyne Technologies', 'US'],
-  ['TER', 'Teradyne', 'US'],
-  ['TSLA', 'Tesla, Inc.', 'US'],
-  ['TXN', 'Texas Instruments', 'US'],
-  ['TPL', 'Texas Pacific Land Corporation', 'US'],
-  ['TXT', 'Textron', 'US'],
-  ['TMO', 'Thermo Fisher Scientific', 'US'],
-  ['TJX', 'TJX Companies', 'US'],
-  ['TKO', 'TKO Group Holdings', 'US'],
-  ['TTD', 'Trade Desk (The)', 'US'],
-  ['TSCO', 'Tractor Supply', 'US'],
-  ['TT', 'Trane Technologies', 'US'],
-  ['TDG', 'TransDigm Group', 'US'],
-  ['TRV', 'Travelers Companies (The)', 'US'],
-  ['TRMB', 'Trimble Inc.', 'US'],
-  ['TFC', 'Truist Financial', 'US'],
-  ['TYL', 'Tyler Technologies', 'US'],
-  ['TSN', 'Tyson Foods', 'US'],
-  ['USB', 'U.S. Bancorp', 'US'],
-  ['UBER', 'Uber', 'US'],
-  ['UDR', 'UDR, Inc.', 'US'],
-  ['ULTA', 'Ulta Beauty', 'US'],
-  ['UNP', 'Union Pacific Corporation', 'US'],
-  ['UAL', 'United Airlines Holdings', 'US'],
-  ['UPS', 'United Parcel Service', 'US'],
-  ['URI', 'United Rentals', 'US'],
-  ['UNH', 'UnitedHealth Group', 'US'],
-  ['UHS', 'Universal Health Services', 'US'],
-  ['VLO', 'Valero Energy', 'US'],
-  ['VEEV', 'Veeva Systems', 'US'],
-  ['VTR', 'Ventas', 'US'],
-  ['VLTO', 'Veralto', 'US'],
-  ['VRSN', 'Verisign', 'US'],
-  ['VRSK', 'Verisk Analytics', 'US'],
-  ['VZ', 'Verizon', 'US'],
-  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
-  ['VRT', 'Vertiv', 'US'],
-  ['VTRS', 'Viatris', 'US'],
-  ['VICI', 'Vici Properties', 'US'],
-  ['V', 'Visa Inc.', 'US'],
-  ['VST', 'Vistra Corp.', 'US'],
-  ['VMC', 'Vulcan Materials Company', 'US'],
-  ['WRB', 'W. R. Berkley Corporation', 'US'],
-  ['GWW', 'W. W. Grainger', 'US'],
-  ['WAB', 'Wabtec', 'US'],
-  ['WMT', 'Walmart', 'US'],
-  ['DIS', 'Walt Disney Company (The)', 'US'],
-  ['WBD', 'Warner Bros. Discovery', 'US'],
-  ['WM', 'Waste Management', 'US'],
-  ['WAT', 'Waters Corporation', 'US'],
-  ['WEC', 'WEC Energy Group', 'US'],
-  ['WFC', 'Wells Fargo', 'US'],
-  ['WELL', 'Welltower', 'US'],
-  ['WST', 'West Pharmaceutical Services', 'US'],
-  ['WDC', 'Western Digital', 'US'],
-  ['WY', 'Weyerhaeuser', 'US'],
-  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
-  ['WMB', 'Williams Companies', 'US'],
-  ['WTW', 'Willis Towers Watson', 'US'],
-  ['WDAY', 'Workday, Inc.', 'US'],
-  ['WYNN', 'Wynn Resorts', 'US'],
-  ['XEL', 'Xcel Energy', 'US'],
-  ['XYL', 'Xylem Inc.', 'US'],
-  ['YUM', 'Yum! Brands', 'US'],
-  ['ZBRA', 'Zebra Technologies', 'US'],
-  ['ZBH', 'Zimmer Biomet', 'US'],
-  ['ZTS', 'Zoetis', 'US'],
-])
-
-/**
- * Representative liquid international listings used to diversify the fixture.
- * Symbols use their local-market form and the third tuple value is an ISO-style
- * country/market code, rather than a trading currency or exchange MIC.
- *
- * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
- * JPX TOPIX Core30, and HKEX index constituent materials.
- */
-const europeanInstruments = Object.freeze([
-  ['ASML', 'ASML Holding', 'NL'],
-  ['INGA', 'ING Group', 'NL'],
-  ['ADYEN', 'Adyen', 'NL'],
-  ['PHIA', 'Philips', 'NL'],
-  ['HEIA', 'Heineken', 'NL'],
-  ['SAP', 'SAP', 'DE'],
-  ['SIE', 'Siemens', 'DE'],
-  ['ALV', 'Allianz', 'DE'],
-  ['DTE', 'Deutsche Telekom', 'DE'],
-  ['MBG', 'Mercedes-Benz Group', 'DE'],
-  ['BMW', 'BMW', 'DE'],
-  ['BAS', 'BASF', 'DE'],
-  ['MUV2', 'Munich Re', 'DE'],
-  ['VOW3', 'Volkswagen Preference', 'DE'],
-  ['IFX', 'Infineon Technologies', 'DE'],
-  ['MC', 'LVMH', 'FR'],
-  ['OR', "L'Oréal", 'FR'],
-  ['AIR', 'Airbus', 'FR'],
-  ['SU', 'Schneider Electric', 'FR'],
-  ['TTE', 'TotalEnergies', 'FR'],
-  ['SAN', 'Sanofi', 'FR'],
-  ['BNP', 'BNP Paribas', 'FR'],
-  ['CS', 'AXA', 'FR'],
-  ['DG', 'Vinci', 'FR'],
-  ['ENEL', 'Enel', 'IT'],
-  ['ENI', 'Eni', 'IT'],
-  ['ISP', 'Intesa Sanpaolo', 'IT'],
-  ['UCG', 'UniCredit', 'IT'],
-  ['STLAM', 'Stellantis', 'IT'],
-  ['SAN', 'Banco Santander', 'ES'],
-  ['IBE', 'Iberdrola', 'ES'],
-  ['ITX', 'Inditex', 'ES'],
-  ['BBVA', 'BBVA', 'ES'],
-  ['NESN', 'Nestlé', 'CH'],
-  ['ROG', 'Roche Holding', 'CH'],
-  ['NOVN', 'Novartis', 'CH'],
-  ['UBSG', 'UBS Group', 'CH'],
-  ['NOVO-B', 'Novo Nordisk', 'DK'],
-  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
-  ['VOLV-B', 'Volvo', 'SE'],
-  ['ERIC-B', 'Ericsson', 'SE'],
-  ['NOKIA', 'Nokia', 'FI'],
-  ['SHEL', 'Shell', 'GB'],
-  ['AZN', 'AstraZeneca', 'GB'],
-  ['HSBA', 'HSBC Holdings', 'GB'],
-  ['ULVR', 'Unilever', 'GB'],
-  ['LSEG', 'London Stock Exchange Group', 'GB'],
-])
-
-const europeanMarketCodes = Object.freeze([
-  'NL',
-  'DE',
-  'FR',
-  'IT',
-  'ES',
-  'CH',
-  'DK',
-  'SE',
-  'FI',
-  'GB',
-])
-
-const europeanMarketGroups = Object.freeze(
-  europeanMarketCodes.map((market) =>
-    europeanInstruments.filter(([, , instrumentMarket]) =>
-      Object.is(instrumentMarket, market),
-    ),
-  ),
-)
-
-const interleavedEuropeanInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...europeanMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      europeanMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const southKoreanInstruments = Object.freeze([
-  ['005930', 'Samsung Electronics', 'KR'],
-  ['000660', 'SK hynix', 'KR'],
-  ['373220', 'LG Energy Solution', 'KR'],
-  ['207940', 'Samsung Biologics', 'KR'],
-  ['005380', 'Hyundai Motor', 'KR'],
-  ['000270', 'Kia', 'KR'],
-  ['068270', 'Celltrion', 'KR'],
-  ['105560', 'KB Financial Group', 'KR'],
-  ['055550', 'Shinhan Financial Group', 'KR'],
-  ['035420', 'NAVER', 'KR'],
-  ['035720', 'Kakao', 'KR'],
-  ['006400', 'Samsung SDI', 'KR'],
-  ['051910', 'LG Chem', 'KR'],
-  ['012330', 'Hyundai Mobis', 'KR'],
-  ['066570', 'LG Electronics', 'KR'],
-])
-
-const japaneseInstruments = Object.freeze([
-  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
-  ['7203', 'Toyota Motor', 'JP'],
-  ['6501', 'Hitachi', 'JP'],
-  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
-  ['6758', 'Sony Group', 'JP'],
-  ['8058', 'Mitsubishi Corporation', 'JP'],
-  ['9984', 'SoftBank Group', 'JP'],
-  ['8035', 'Tokyo Electron', 'JP'],
-  ['8411', 'Mizuho Financial Group', 'JP'],
-  ['8031', 'Mitsui & Co.', 'JP'],
-  ['6861', 'Keyence', 'JP'],
-  ['7974', 'Nintendo', 'JP'],
-  ['6098', 'Recruit Holdings', 'JP'],
-  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
-  ['4063', 'Shin-Etsu Chemical', 'JP'],
-])
-
-const hongKongInstruments = Object.freeze([
-  ['0700', 'Tencent Holdings', 'HK'],
-  ['9988', 'Alibaba Group', 'HK'],
-  ['1810', 'Xiaomi', 'HK'],
-  ['3690', 'Meituan', 'HK'],
-  ['0941', 'China Mobile', 'HK'],
-  ['1211', 'BYD Company', 'HK'],
-  ['1299', 'AIA Group', 'HK'],
-  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
-  ['0005', 'HSBC Holdings', 'HK'],
-  ['2318', 'Ping An Insurance', 'HK'],
-])
-
-const canadianInstruments = Object.freeze([
-  ['RY', 'Royal Bank of Canada', 'CA'],
-  ['TD', 'Toronto-Dominion Bank', 'CA'],
-  ['SHOP', 'Shopify', 'CA'],
-  ['ENB', 'Enbridge', 'CA'],
-  ['CNR', 'Canadian National Railway', 'CA'],
-  ['CP', 'Canadian Pacific Kansas City', 'CA'],
-  ['BMO', 'Bank of Montreal', 'CA'],
-  ['CSU', 'Constellation Software', 'CA'],
-])
-
-const australianInstruments = Object.freeze([
-  ['BHP', 'BHP Group', 'AU'],
-  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
-  ['CSL', 'CSL', 'AU'],
-  ['NAB', 'National Australia Bank', 'AU'],
-  ['WBC', 'Westpac Banking Corporation', 'AU'],
-  ['ANZ', 'ANZ Group Holdings', 'AU'],
-  ['WES', 'Wesfarmers', 'AU'],
-  ['MQG', 'Macquarie Group', 'AU'],
-])
-
-const internationalMarketGroups = Object.freeze([
-  interleavedEuropeanInstruments,
-  southKoreanInstruments,
-  japaneseInstruments,
-  hongKongInstruments,
-  canadianInstruments,
-  australianInstruments,
-])
-
-export const internationalInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...internationalMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      internationalMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const INTERNATIONAL_INSERTION_INTERVAL = 3
-
-/**
- * U.S. and international instruments are interleaved so ordinary benchmark
- * sizes exercise multiple symbol formats and market labels.
- */
-export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
-    const internationalInstrument =
-      index % INTERNATIONAL_INSERTION_INTERVAL === 0
-        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
-        : undefined
-
-    return internationalInstrument
-      ? [instrument, internationalInstrument]
-      : [instrument]
-  }),
-) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/octane/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/octane/realtime-trading/src/feed/worker/market-feed-engine.ts
index 557f7c30a8..fbd9c369c0 100644
--- a/examples/octane/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/octane/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/preact/realtime-trading/src/feed/market-instruments.ts b/examples/preact/realtime-trading/src/feed/market-instruments.ts
new file mode 100644
index 0000000000..ac18d14ea9
--- /dev/null
+++ b/examples/preact/realtime-trading/src/feed/market-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const marketInstruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  marketInstruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/preact/realtime-trading/src/feed/sp500-instruments.ts b/examples/preact/realtime-trading/src/feed/sp500-instruments.ts
deleted file mode 100644
index c44eb5d152..0000000000
--- a/examples/preact/realtime-trading/src/feed/sp500-instruments.ts
+++ /dev/null
@@ -1,742 +0,0 @@
-export type MarketCode =
-  | 'US'
-  | 'NL'
-  | 'DE'
-  | 'FR'
-  | 'IT'
-  | 'ES'
-  | 'CH'
-  | 'DK'
-  | 'SE'
-  | 'FI'
-  | 'GB'
-  | 'KR'
-  | 'JP'
-  | 'HK'
-  | 'CA'
-  | 'AU'
-
-export type BaseInstrument = readonly [
-  symbol: string,
-  company: string,
-  market: MarketCode,
-]
-
-/**
- * Current S&P 500 constituent universe used by the realtime trading examples.
- *
- * Source snapshot: https://github.com/datasets/s-and-p-500-companies
- * Retrieved: 2026-08-15.
- * Multiple share classes are intentionally represented as separate instruments.
- */
-export const sp500Instruments = Object.freeze([
-  ['MMM', '3M', 'US'],
-  ['AOS', 'A. O. Smith', 'US'],
-  ['ABT', 'Abbott Laboratories', 'US'],
-  ['ABBV', 'AbbVie', 'US'],
-  ['ACN', 'Accenture', 'US'],
-  ['ADBE', 'Adobe Inc.', 'US'],
-  ['AMD', 'Advanced Micro Devices', 'US'],
-  ['AES', 'AES Corporation', 'US'],
-  ['AFL', 'Aflac', 'US'],
-  ['A', 'Agilent Technologies', 'US'],
-  ['APD', 'Air Products', 'US'],
-  ['ABNB', 'Airbnb', 'US'],
-  ['AKAM', 'Akamai Technologies', 'US'],
-  ['ALB', 'Albemarle Corporation', 'US'],
-  ['ARE', 'Alexandria Real Estate Equities', 'US'],
-  ['ALGN', 'Align Technology', 'US'],
-  ['ALLE', 'Allegion', 'US'],
-  ['LNT', 'Alliant Energy', 'US'],
-  ['ALL', 'Allstate', 'US'],
-  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
-  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
-  ['MO', 'Altria', 'US'],
-  ['AMZN', 'Amazon', 'US'],
-  ['AMCR', 'Amcor', 'US'],
-  ['AEE', 'Ameren', 'US'],
-  ['AEP', 'American Electric Power', 'US'],
-  ['AXP', 'American Express', 'US'],
-  ['AIG', 'American International Group', 'US'],
-  ['AMT', 'American Tower', 'US'],
-  ['AWK', 'American Water Works', 'US'],
-  ['AMP', 'Ameriprise Financial', 'US'],
-  ['AME', 'Ametek', 'US'],
-  ['AMGN', 'Amgen', 'US'],
-  ['APH', 'Amphenol', 'US'],
-  ['ADI', 'Analog Devices', 'US'],
-  ['AON', 'Aon plc', 'US'],
-  ['APA', 'APA Corporation', 'US'],
-  ['APO', 'Apollo Global Management', 'US'],
-  ['AAPL', 'Apple Inc.', 'US'],
-  ['AMAT', 'Applied Materials', 'US'],
-  ['APP', 'AppLovin', 'US'],
-  ['APTV', 'Aptiv', 'US'],
-  ['ACGL', 'Arch Capital Group', 'US'],
-  ['ADM', 'Archer Daniels Midland', 'US'],
-  ['ARES', 'Ares Management', 'US'],
-  ['ANET', 'Arista Networks', 'US'],
-  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
-  ['AIZ', 'Assurant', 'US'],
-  ['T', 'AT&T', 'US'],
-  ['ATO', 'Atmos Energy', 'US'],
-  ['ADSK', 'Autodesk', 'US'],
-  ['ADP', 'Automatic Data Processing', 'US'],
-  ['AZO', 'AutoZone', 'US'],
-  ['AVB', 'AvalonBay Communities', 'US'],
-  ['AVY', 'Avery Dennison', 'US'],
-  ['AXON', 'Axon Enterprise', 'US'],
-  ['BKR', 'Baker Hughes', 'US'],
-  ['BALL', 'Ball Corporation', 'US'],
-  ['BAC', 'Bank of America', 'US'],
-  ['BAX', 'Baxter International', 'US'],
-  ['BDX', 'Becton Dickinson', 'US'],
-  ['BRK.B', 'Berkshire Hathaway', 'US'],
-  ['BBY', 'Best Buy', 'US'],
-  ['TECH', 'Bio-Techne', 'US'],
-  ['BIIB', 'Biogen', 'US'],
-  ['BLK', 'BlackRock', 'US'],
-  ['BX', 'Blackstone Inc.', 'US'],
-  ['XYZ', 'Block, Inc.', 'US'],
-  ['BNY', 'BNY Mellon', 'US'],
-  ['BA', 'Boeing', 'US'],
-  ['BKNG', 'Booking Holdings', 'US'],
-  ['BSX', 'Boston Scientific', 'US'],
-  ['BMY', 'Bristol Myers Squibb', 'US'],
-  ['AVGO', 'Broadcom', 'US'],
-  ['BR', 'Broadridge Financial Solutions', 'US'],
-  ['BRO', 'Brown & Brown', 'US'],
-  ['BF.B', 'Brown–Forman', 'US'],
-  ['BLDR', 'Builders FirstSource', 'US'],
-  ['BG', 'Bunge Global', 'US'],
-  ['BXP', 'BXP, Inc.', 'US'],
-  ['CHRW', 'C.H. Robinson', 'US'],
-  ['CDNS', 'Cadence Design Systems', 'US'],
-  ['CPT', 'Camden Property Trust', 'US'],
-  ['COF', 'Capital One', 'US'],
-  ['CAH', 'Cardinal Health', 'US'],
-  ['CCL', 'Carnival Corporation', 'US'],
-  ['CARR', 'Carrier Global', 'US'],
-  ['CVNA', 'Carvana', 'US'],
-  ['CASY', "Casey's", 'US'],
-  ['CAT', 'Caterpillar Inc.', 'US'],
-  ['CBOE', 'Cboe Global Markets', 'US'],
-  ['CBRE', 'CBRE Group', 'US'],
-  ['CDW', 'CDW Corporation', 'US'],
-  ['COR', 'Cencora', 'US'],
-  ['CNC', 'Centene Corporation', 'US'],
-  ['CNP', 'CenterPoint Energy', 'US'],
-  ['CF', 'CF Industries', 'US'],
-  ['CRL', 'Charles River Laboratories', 'US'],
-  ['SCHW', 'Charles Schwab Corporation', 'US'],
-  ['CHTR', 'Charter Communications', 'US'],
-  ['CVX', 'Chevron Corporation', 'US'],
-  ['CMG', 'Chipotle Mexican Grill', 'US'],
-  ['CB', 'Chubb Limited', 'US'],
-  ['CHD', 'Church & Dwight', 'US'],
-  ['CIEN', 'Ciena', 'US'],
-  ['CI', 'Cigna', 'US'],
-  ['CINF', 'Cincinnati Financial', 'US'],
-  ['CTAS', 'Cintas', 'US'],
-  ['CSCO', 'Cisco', 'US'],
-  ['C', 'Citigroup', 'US'],
-  ['CFG', 'Citizens Financial Group', 'US'],
-  ['CLX', 'Clorox', 'US'],
-  ['CME', 'CME Group', 'US'],
-  ['CMS', 'CMS Energy', 'US'],
-  ['KO', 'Coca-Cola Company (The)', 'US'],
-  ['CTSH', 'Cognizant', 'US'],
-  ['COHR', 'Coherent Corp.', 'US'],
-  ['COIN', 'Coinbase', 'US'],
-  ['CL', 'Colgate-Palmolive', 'US'],
-  ['CMCSA', 'Comcast', 'US'],
-  ['FIX', 'Comfort Systems USA', 'US'],
-  ['COP', 'ConocoPhillips', 'US'],
-  ['ED', 'Consolidated Edison', 'US'],
-  ['STZ', 'Constellation Brands', 'US'],
-  ['CEG', 'Constellation Energy', 'US'],
-  ['COO', 'Cooper Companies (The)', 'US'],
-  ['CPRT', 'Copart', 'US'],
-  ['GLW', 'Corning Inc.', 'US'],
-  ['CPAY', 'Corpay', 'US'],
-  ['CTVA', 'Corteva', 'US'],
-  ['CSGP', 'CoStar Group', 'US'],
-  ['COST', 'Costco', 'US'],
-  ['CRH', 'CRH plc', 'US'],
-  ['CRWD', 'CrowdStrike', 'US'],
-  ['CCI', 'Crown Castle', 'US'],
-  ['CSX', 'CSX Corporation', 'US'],
-  ['CMI', 'Cummins', 'US'],
-  ['CVS', 'CVS Health', 'US'],
-  ['DHR', 'Danaher Corporation', 'US'],
-  ['DRI', 'Darden Restaurants', 'US'],
-  ['DDOG', 'Datadog', 'US'],
-  ['DVA', 'DaVita', 'US'],
-  ['DECK', 'Deckers Brands', 'US'],
-  ['DE', 'Deere & Company', 'US'],
-  ['DELL', 'Dell Technologies', 'US'],
-  ['DAL', 'Delta Air Lines', 'US'],
-  ['DVN', 'Devon Energy', 'US'],
-  ['DXCM', 'Dexcom', 'US'],
-  ['FANG', 'Diamondback Energy', 'US'],
-  ['DLR', 'Digital Realty', 'US'],
-  ['DG', 'Dollar General', 'US'],
-  ['DLTR', 'Dollar Tree', 'US'],
-  ['D', 'Dominion Energy', 'US'],
-  ['DPZ', "Domino's", 'US'],
-  ['DASH', 'DoorDash', 'US'],
-  ['DOV', 'Dover Corporation', 'US'],
-  ['DOW', 'Dow Inc.', 'US'],
-  ['DHI', 'D. R. Horton', 'US'],
-  ['DTE', 'DTE Energy', 'US'],
-  ['DUK', 'Duke Energy', 'US'],
-  ['DD', 'DuPont', 'US'],
-  ['ETN', 'Eaton Corporation', 'US'],
-  ['EBAY', 'eBay Inc.', 'US'],
-  ['ECHO', 'EchoStar', 'US'],
-  ['ECL', 'Ecolab', 'US'],
-  ['EIX', 'Edison International', 'US'],
-  ['EW', 'Edwards Lifesciences', 'US'],
-  ['ELV', 'Elevance Health', 'US'],
-  ['EME', 'Emcor', 'US'],
-  ['EMR', 'Emerson Electric', 'US'],
-  ['ETR', 'Entergy', 'US'],
-  ['EOG', 'EOG Resources', 'US'],
-  ['EQT', 'EQT Corporation', 'US'],
-  ['EFX', 'Equifax', 'US'],
-  ['EQIX', 'Equinix', 'US'],
-  ['EQR', 'Equity Residential', 'US'],
-  ['ERIE', 'Erie Indemnity', 'US'],
-  ['ESS', 'Essex Property Trust', 'US'],
-  ['EL', 'Estée Lauder Companies (The)', 'US'],
-  ['EG', 'Everest Group', 'US'],
-  ['EVRG', 'Evergy', 'US'],
-  ['ES', 'Eversource Energy', 'US'],
-  ['EXC', 'Exelon', 'US'],
-  ['EXE', 'Expand Energy', 'US'],
-  ['EXPE', 'Expedia Group', 'US'],
-  ['EXPD', 'Expeditors International', 'US'],
-  ['EXR', 'Extra Space Storage', 'US'],
-  ['XOM', 'ExxonMobil', 'US'],
-  ['FFIV', 'F5, Inc.', 'US'],
-  ['FDS', 'FactSet', 'US'],
-  ['FICO', 'Fair Isaac', 'US'],
-  ['FAST', 'Fastenal', 'US'],
-  ['FRT', 'Federal Realty Investment Trust', 'US'],
-  ['FDX', 'FedEx', 'US'],
-  ['FDXF', 'FedEx Freight', 'US'],
-  ['FERG', 'Ferguson Enterprises', 'US'],
-  ['FIS', 'Fidelity National Information Services', 'US'],
-  ['FITB', 'Fifth Third Bancorp', 'US'],
-  ['FSLR', 'First Solar', 'US'],
-  ['FE', 'FirstEnergy', 'US'],
-  ['FISV', 'Fiserv', 'US'],
-  ['FLEX', 'Flex Ltd.', 'US'],
-  ['F', 'Ford Motor Company', 'US'],
-  ['FTNT', 'Fortinet', 'US'],
-  ['FTV', 'Fortive', 'US'],
-  ['FOXA', 'Fox Corporation (Class A)', 'US'],
-  ['FOX', 'Fox Corporation (Class B)', 'US'],
-  ['BEN', 'Franklin Resources', 'US'],
-  ['FCX', 'Freeport-McMoRan', 'US'],
-  ['GRMN', 'Garmin', 'US'],
-  ['IT', 'Gartner', 'US'],
-  ['GE', 'GE Aerospace', 'US'],
-  ['GEHC', 'GE HealthCare', 'US'],
-  ['GEV', 'GE Vernova', 'US'],
-  ['GEN', 'Gen Digital', 'US'],
-  ['GNRC', 'Generac', 'US'],
-  ['GD', 'General Dynamics', 'US'],
-  ['GIS', 'General Mills', 'US'],
-  ['GM', 'General Motors', 'US'],
-  ['GPC', 'Genuine Parts Company', 'US'],
-  ['GILD', 'Gilead Sciences', 'US'],
-  ['GPN', 'Global Payments', 'US'],
-  ['GL', 'Globe Life', 'US'],
-  ['GDDY', 'GoDaddy', 'US'],
-  ['GS', 'Goldman Sachs', 'US'],
-  ['HAL', 'Halliburton', 'US'],
-  ['HIG', 'Hartford (The)', 'US'],
-  ['HAS', 'Hasbro', 'US'],
-  ['HCA', 'HCA Healthcare', 'US'],
-  ['DOC', 'Healthpeak Properties', 'US'],
-  ['HSIC', 'Henry Schein', 'US'],
-  ['HSY', 'Hershey Company (The)', 'US'],
-  ['HPE', 'Hewlett Packard Enterprise', 'US'],
-  ['HLT', 'Hilton Worldwide', 'US'],
-  ['HD', 'Home Depot (The)', 'US'],
-  ['HONA', 'Honeywell Aerospace', 'US'],
-  ['HON', 'Honeywell Technologies', 'US'],
-  ['HRL', 'Hormel Foods', 'US'],
-  ['HST', 'Host Hotels & Resorts', 'US'],
-  ['HWM', 'Howmet Aerospace', 'US'],
-  ['HPQ', 'HP Inc.', 'US'],
-  ['HUBB', 'Hubbell Incorporated', 'US'],
-  ['HUM', 'Humana', 'US'],
-  ['HBAN', 'Huntington Bancshares', 'US'],
-  ['HII', 'Huntington Ingalls Industries', 'US'],
-  ['IBM', 'IBM', 'US'],
-  ['IEX', 'IDEX Corporation', 'US'],
-  ['IDXX', 'Idexx Laboratories', 'US'],
-  ['ITW', 'Illinois Tool Works', 'US'],
-  ['INCY', 'Incyte', 'US'],
-  ['IR', 'Ingersoll Rand', 'US'],
-  ['PODD', 'Insulet Corporation', 'US'],
-  ['INTC', 'Intel', 'US'],
-  ['IBKR', 'Interactive Brokers', 'US'],
-  ['ICE', 'Intercontinental Exchange', 'US'],
-  ['IFF', 'International Flavors & Fragrances', 'US'],
-  ['IP', 'International Paper', 'US'],
-  ['INTU', 'Intuit', 'US'],
-  ['ISRG', 'Intuitive Surgical', 'US'],
-  ['IVZ', 'Invesco', 'US'],
-  ['INVH', 'Invitation Homes', 'US'],
-  ['IQV', 'IQVIA', 'US'],
-  ['IRM', 'Iron Mountain', 'US'],
-  ['JBHT', 'J.B. Hunt', 'US'],
-  ['JBL', 'Jabil', 'US'],
-  ['JKHY', 'Jack Henry & Associates', 'US'],
-  ['J', 'Jacobs Solutions', 'US'],
-  ['JNJ', 'Johnson & Johnson', 'US'],
-  ['JCI', 'Johnson Controls', 'US'],
-  ['JPM', 'JPMorgan Chase', 'US'],
-  ['KVUE', 'Kenvue', 'US'],
-  ['KDP', 'Keurig Dr Pepper', 'US'],
-  ['KEY', 'KeyCorp', 'US'],
-  ['KEYS', 'Keysight Technologies', 'US'],
-  ['KMB', 'Kimberly-Clark', 'US'],
-  ['KIM', 'Kimco Realty', 'US'],
-  ['KMI', 'Kinder Morgan', 'US'],
-  ['KKR', 'KKR & Co.', 'US'],
-  ['KLAC', 'KLA Corporation', 'US'],
-  ['KHC', 'Kraft Heinz', 'US'],
-  ['KR', 'Kroger', 'US'],
-  ['LHX', 'L3Harris', 'US'],
-  ['LH', 'Labcorp', 'US'],
-  ['LRCX', 'Lam Research', 'US'],
-  ['LVS', 'Las Vegas Sands', 'US'],
-  ['LDOS', 'Leidos', 'US'],
-  ['LEN', 'Lennar', 'US'],
-  ['LII', 'Lennox International', 'US'],
-  ['LLY', 'Lilly (Eli)', 'US'],
-  ['LIN', 'Linde plc', 'US'],
-  ['LYV', 'Live Nation Entertainment', 'US'],
-  ['LMT', 'Lockheed Martin', 'US'],
-  ['L', 'Loews Corporation', 'US'],
-  ['LOW', "Lowe's", 'US'],
-  ['LULU', 'Lululemon Athletica', 'US'],
-  ['LITE', 'Lumentum', 'US'],
-  ['LYB', 'LyondellBasell', 'US'],
-  ['MTB', 'M&T Bank', 'US'],
-  ['MPC', 'Marathon Petroleum', 'US'],
-  ['MAR', 'Marriott International', 'US'],
-  ['MRSH', 'Marsh McLennan', 'US'],
-  ['MLM', 'Martin Marietta Materials', 'US'],
-  ['MRVL', 'Marvell Technology', 'US'],
-  ['MAS', 'Masco', 'US'],
-  ['MA', 'Mastercard', 'US'],
-  ['MKC', 'McCormick & Company', 'US'],
-  ['MCD', "McDonald's", 'US'],
-  ['MCK', 'McKesson Corporation', 'US'],
-  ['MDT', 'Medtronic', 'US'],
-  ['MRK', 'Merck & Co.', 'US'],
-  ['META', 'Meta Platforms', 'US'],
-  ['MET', 'MetLife', 'US'],
-  ['MTD', 'Mettler Toledo', 'US'],
-  ['MGM', 'MGM Resorts', 'US'],
-  ['MCHP', 'Microchip Technology', 'US'],
-  ['MU', 'Micron Technology', 'US'],
-  ['MSFT', 'Microsoft', 'US'],
-  ['MAA', 'Mid-America Apartment Communities', 'US'],
-  ['MRNA', 'Moderna', 'US'],
-  ['TAP', 'Molson Coors Beverage Company', 'US'],
-  ['MDLZ', 'Mondelez International', 'US'],
-  ['MPWR', 'Monolithic Power Systems', 'US'],
-  ['MNST', 'Monster Beverage', 'US'],
-  ['MCO', "Moody's Corporation", 'US'],
-  ['MS', 'Morgan Stanley', 'US'],
-  ['MOS', 'Mosaic Company (The)', 'US'],
-  ['MSI', 'Motorola Solutions', 'US'],
-  ['MSCI', 'MSCI', 'US'],
-  ['NDAQ', 'Nasdaq, Inc.', 'US'],
-  ['NTAP', 'NetApp', 'US'],
-  ['NFLX', 'Netflix', 'US'],
-  ['NEM', 'Newmont', 'US'],
-  ['NWSA', 'News Corp (Class A)', 'US'],
-  ['NWS', 'News Corp (Class B)', 'US'],
-  ['NEE', 'NextEra Energy', 'US'],
-  ['NKE', 'Nike, Inc.', 'US'],
-  ['NI', 'NiSource', 'US'],
-  ['NDSN', 'Nordson Corporation', 'US'],
-  ['NSC', 'Norfolk Southern', 'US'],
-  ['NTRS', 'Northern Trust', 'US'],
-  ['NOC', 'Northrop Grumman', 'US'],
-  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
-  ['NRG', 'NRG Energy', 'US'],
-  ['NUE', 'Nucor', 'US'],
-  ['NVDA', 'Nvidia', 'US'],
-  ['NVR', 'NVR, Inc.', 'US'],
-  ['NXPI', 'NXP Semiconductors', 'US'],
-  ['ORLY', "O'Reilly Automotive", 'US'],
-  ['OXY', 'Occidental Petroleum', 'US'],
-  ['ODFL', 'Old Dominion', 'US'],
-  ['OMC', 'Omnicom Group', 'US'],
-  ['ON', 'ON Semiconductor', 'US'],
-  ['OKE', 'Oneok', 'US'],
-  ['ORCL', 'Oracle Corporation', 'US'],
-  ['OTIS', 'Otis Worldwide', 'US'],
-  ['PCAR', 'Paccar', 'US'],
-  ['PKG', 'Packaging Corporation of America', 'US'],
-  ['PLTR', 'Palantir Technologies', 'US'],
-  ['PANW', 'Palo Alto Networks', 'US'],
-  ['PSKY', 'Paramount Skydance Corporation', 'US'],
-  ['PH', 'Parker Hannifin', 'US'],
-  ['PAYX', 'Paychex', 'US'],
-  ['PYPL', 'PayPal', 'US'],
-  ['PNR', 'Pentair', 'US'],
-  ['PEP', 'PepsiCo', 'US'],
-  ['PFE', 'Pfizer', 'US'],
-  ['PCG', 'PG&E Corporation', 'US'],
-  ['PM', 'Philip Morris International', 'US'],
-  ['PSX', 'Phillips 66', 'US'],
-  ['PNW', 'Pinnacle West Capital', 'US'],
-  ['PNC', 'PNC Financial Services', 'US'],
-  ['PPG', 'PPG Industries', 'US'],
-  ['PPL', 'PPL Corporation', 'US'],
-  ['PFG', 'Principal Financial Group', 'US'],
-  ['PG', 'Procter & Gamble', 'US'],
-  ['PGR', 'Progressive Corporation', 'US'],
-  ['PLD', 'Prologis', 'US'],
-  ['PRU', 'Prudential Financial', 'US'],
-  ['PEG', 'Public Service Enterprise Group', 'US'],
-  ['PTC', 'PTC Inc.', 'US'],
-  ['PSA', 'Public Storage', 'US'],
-  ['PHM', 'PulteGroup', 'US'],
-  ['PWR', 'Quanta Services', 'US'],
-  ['QCOM', 'Qualcomm', 'US'],
-  ['DGX', 'Quest Diagnostics', 'US'],
-  ['Q', 'Qnity Electronics', 'US'],
-  ['RL', 'Ralph Lauren Corporation', 'US'],
-  ['RJF', 'Raymond James Financial', 'US'],
-  ['RTX', 'RTX Corporation', 'US'],
-  ['O', 'Realty Income', 'US'],
-  ['REG', 'Regency Centers', 'US'],
-  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
-  ['RF', 'Regions Financial Corporation', 'US'],
-  ['RSG', 'Republic Services', 'US'],
-  ['RMD', 'ResMed|', 'US'],
-  ['RVTY', 'Revvity', 'US'],
-  ['HOOD', 'Robinhood Markets', 'US'],
-  ['ROK', 'Rockwell Automation', 'US'],
-  ['ROL', 'Rollins, Inc.', 'US'],
-  ['ROP', 'Roper Technologies', 'US'],
-  ['ROST', 'Ross Stores', 'US'],
-  ['RCL', 'Royal Caribbean Group', 'US'],
-  ['SPGI', 'S&P Global', 'US'],
-  ['CRM', 'Salesforce', 'US'],
-  ['SNDK', 'Sandisk', 'US'],
-  ['SBAC', 'SBA Communications', 'US'],
-  ['SLB', 'Schlumberger', 'US'],
-  ['STX', 'Seagate Technology', 'US'],
-  ['SRE', 'Sempra', 'US'],
-  ['NOW', 'ServiceNow', 'US'],
-  ['SHW', 'Sherwin-Williams', 'US'],
-  ['SPG', 'Simon Property Group', 'US'],
-  ['SWKS', 'Skyworks Solutions', 'US'],
-  ['SJM', 'J.M. Smucker Company (The)', 'US'],
-  ['SW', 'Smurfit Westrock', 'US'],
-  ['SNA', 'Snap-on', 'US'],
-  ['SOLV', 'Solventum', 'US'],
-  ['SO', 'Southern Company', 'US'],
-  ['LUV', 'Southwest Airlines', 'US'],
-  ['SWK', 'Stanley Black & Decker', 'US'],
-  ['SBUX', 'Starbucks', 'US'],
-  ['STT', 'State Street Corporation', 'US'],
-  ['STLD', 'Steel Dynamics', 'US'],
-  ['STE', 'Steris', 'US'],
-  ['SYK', 'Stryker Corporation', 'US'],
-  ['SMCI', 'Supermicro', 'US'],
-  ['SYF', 'Synchrony Financial', 'US'],
-  ['SNPS', 'Synopsys', 'US'],
-  ['SYY', 'Sysco', 'US'],
-  ['TMUS', 'T-Mobile US', 'US'],
-  ['TROW', 'T. Rowe Price', 'US'],
-  ['TTWO', 'Take-Two Interactive', 'US'],
-  ['TPR', 'Tapestry, Inc.', 'US'],
-  ['TRGP', 'Targa Resources', 'US'],
-  ['TGT', 'Target Corporation', 'US'],
-  ['TEL', 'TE Connectivity', 'US'],
-  ['TDY', 'Teledyne Technologies', 'US'],
-  ['TER', 'Teradyne', 'US'],
-  ['TSLA', 'Tesla, Inc.', 'US'],
-  ['TXN', 'Texas Instruments', 'US'],
-  ['TPL', 'Texas Pacific Land Corporation', 'US'],
-  ['TXT', 'Textron', 'US'],
-  ['TMO', 'Thermo Fisher Scientific', 'US'],
-  ['TJX', 'TJX Companies', 'US'],
-  ['TKO', 'TKO Group Holdings', 'US'],
-  ['TTD', 'Trade Desk (The)', 'US'],
-  ['TSCO', 'Tractor Supply', 'US'],
-  ['TT', 'Trane Technologies', 'US'],
-  ['TDG', 'TransDigm Group', 'US'],
-  ['TRV', 'Travelers Companies (The)', 'US'],
-  ['TRMB', 'Trimble Inc.', 'US'],
-  ['TFC', 'Truist Financial', 'US'],
-  ['TYL', 'Tyler Technologies', 'US'],
-  ['TSN', 'Tyson Foods', 'US'],
-  ['USB', 'U.S. Bancorp', 'US'],
-  ['UBER', 'Uber', 'US'],
-  ['UDR', 'UDR, Inc.', 'US'],
-  ['ULTA', 'Ulta Beauty', 'US'],
-  ['UNP', 'Union Pacific Corporation', 'US'],
-  ['UAL', 'United Airlines Holdings', 'US'],
-  ['UPS', 'United Parcel Service', 'US'],
-  ['URI', 'United Rentals', 'US'],
-  ['UNH', 'UnitedHealth Group', 'US'],
-  ['UHS', 'Universal Health Services', 'US'],
-  ['VLO', 'Valero Energy', 'US'],
-  ['VEEV', 'Veeva Systems', 'US'],
-  ['VTR', 'Ventas', 'US'],
-  ['VLTO', 'Veralto', 'US'],
-  ['VRSN', 'Verisign', 'US'],
-  ['VRSK', 'Verisk Analytics', 'US'],
-  ['VZ', 'Verizon', 'US'],
-  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
-  ['VRT', 'Vertiv', 'US'],
-  ['VTRS', 'Viatris', 'US'],
-  ['VICI', 'Vici Properties', 'US'],
-  ['V', 'Visa Inc.', 'US'],
-  ['VST', 'Vistra Corp.', 'US'],
-  ['VMC', 'Vulcan Materials Company', 'US'],
-  ['WRB', 'W. R. Berkley Corporation', 'US'],
-  ['GWW', 'W. W. Grainger', 'US'],
-  ['WAB', 'Wabtec', 'US'],
-  ['WMT', 'Walmart', 'US'],
-  ['DIS', 'Walt Disney Company (The)', 'US'],
-  ['WBD', 'Warner Bros. Discovery', 'US'],
-  ['WM', 'Waste Management', 'US'],
-  ['WAT', 'Waters Corporation', 'US'],
-  ['WEC', 'WEC Energy Group', 'US'],
-  ['WFC', 'Wells Fargo', 'US'],
-  ['WELL', 'Welltower', 'US'],
-  ['WST', 'West Pharmaceutical Services', 'US'],
-  ['WDC', 'Western Digital', 'US'],
-  ['WY', 'Weyerhaeuser', 'US'],
-  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
-  ['WMB', 'Williams Companies', 'US'],
-  ['WTW', 'Willis Towers Watson', 'US'],
-  ['WDAY', 'Workday, Inc.', 'US'],
-  ['WYNN', 'Wynn Resorts', 'US'],
-  ['XEL', 'Xcel Energy', 'US'],
-  ['XYL', 'Xylem Inc.', 'US'],
-  ['YUM', 'Yum! Brands', 'US'],
-  ['ZBRA', 'Zebra Technologies', 'US'],
-  ['ZBH', 'Zimmer Biomet', 'US'],
-  ['ZTS', 'Zoetis', 'US'],
-])
-
-/**
- * Representative liquid international listings used to diversify the fixture.
- * Symbols use their local-market form and the third tuple value is an ISO-style
- * country/market code, rather than a trading currency or exchange MIC.
- *
- * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
- * JPX TOPIX Core30, and HKEX index constituent materials.
- */
-const europeanInstruments = Object.freeze([
-  ['ASML', 'ASML Holding', 'NL'],
-  ['INGA', 'ING Group', 'NL'],
-  ['ADYEN', 'Adyen', 'NL'],
-  ['PHIA', 'Philips', 'NL'],
-  ['HEIA', 'Heineken', 'NL'],
-  ['SAP', 'SAP', 'DE'],
-  ['SIE', 'Siemens', 'DE'],
-  ['ALV', 'Allianz', 'DE'],
-  ['DTE', 'Deutsche Telekom', 'DE'],
-  ['MBG', 'Mercedes-Benz Group', 'DE'],
-  ['BMW', 'BMW', 'DE'],
-  ['BAS', 'BASF', 'DE'],
-  ['MUV2', 'Munich Re', 'DE'],
-  ['VOW3', 'Volkswagen Preference', 'DE'],
-  ['IFX', 'Infineon Technologies', 'DE'],
-  ['MC', 'LVMH', 'FR'],
-  ['OR', "L'Oréal", 'FR'],
-  ['AIR', 'Airbus', 'FR'],
-  ['SU', 'Schneider Electric', 'FR'],
-  ['TTE', 'TotalEnergies', 'FR'],
-  ['SAN', 'Sanofi', 'FR'],
-  ['BNP', 'BNP Paribas', 'FR'],
-  ['CS', 'AXA', 'FR'],
-  ['DG', 'Vinci', 'FR'],
-  ['ENEL', 'Enel', 'IT'],
-  ['ENI', 'Eni', 'IT'],
-  ['ISP', 'Intesa Sanpaolo', 'IT'],
-  ['UCG', 'UniCredit', 'IT'],
-  ['STLAM', 'Stellantis', 'IT'],
-  ['SAN', 'Banco Santander', 'ES'],
-  ['IBE', 'Iberdrola', 'ES'],
-  ['ITX', 'Inditex', 'ES'],
-  ['BBVA', 'BBVA', 'ES'],
-  ['NESN', 'Nestlé', 'CH'],
-  ['ROG', 'Roche Holding', 'CH'],
-  ['NOVN', 'Novartis', 'CH'],
-  ['UBSG', 'UBS Group', 'CH'],
-  ['NOVO-B', 'Novo Nordisk', 'DK'],
-  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
-  ['VOLV-B', 'Volvo', 'SE'],
-  ['ERIC-B', 'Ericsson', 'SE'],
-  ['NOKIA', 'Nokia', 'FI'],
-  ['SHEL', 'Shell', 'GB'],
-  ['AZN', 'AstraZeneca', 'GB'],
-  ['HSBA', 'HSBC Holdings', 'GB'],
-  ['ULVR', 'Unilever', 'GB'],
-  ['LSEG', 'London Stock Exchange Group', 'GB'],
-])
-
-const europeanMarketCodes = Object.freeze([
-  'NL',
-  'DE',
-  'FR',
-  'IT',
-  'ES',
-  'CH',
-  'DK',
-  'SE',
-  'FI',
-  'GB',
-])
-
-const europeanMarketGroups = Object.freeze(
-  europeanMarketCodes.map((market) =>
-    europeanInstruments.filter(([, , instrumentMarket]) =>
-      Object.is(instrumentMarket, market),
-    ),
-  ),
-)
-
-const interleavedEuropeanInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...europeanMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      europeanMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const southKoreanInstruments = Object.freeze([
-  ['005930', 'Samsung Electronics', 'KR'],
-  ['000660', 'SK hynix', 'KR'],
-  ['373220', 'LG Energy Solution', 'KR'],
-  ['207940', 'Samsung Biologics', 'KR'],
-  ['005380', 'Hyundai Motor', 'KR'],
-  ['000270', 'Kia', 'KR'],
-  ['068270', 'Celltrion', 'KR'],
-  ['105560', 'KB Financial Group', 'KR'],
-  ['055550', 'Shinhan Financial Group', 'KR'],
-  ['035420', 'NAVER', 'KR'],
-  ['035720', 'Kakao', 'KR'],
-  ['006400', 'Samsung SDI', 'KR'],
-  ['051910', 'LG Chem', 'KR'],
-  ['012330', 'Hyundai Mobis', 'KR'],
-  ['066570', 'LG Electronics', 'KR'],
-])
-
-const japaneseInstruments = Object.freeze([
-  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
-  ['7203', 'Toyota Motor', 'JP'],
-  ['6501', 'Hitachi', 'JP'],
-  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
-  ['6758', 'Sony Group', 'JP'],
-  ['8058', 'Mitsubishi Corporation', 'JP'],
-  ['9984', 'SoftBank Group', 'JP'],
-  ['8035', 'Tokyo Electron', 'JP'],
-  ['8411', 'Mizuho Financial Group', 'JP'],
-  ['8031', 'Mitsui & Co.', 'JP'],
-  ['6861', 'Keyence', 'JP'],
-  ['7974', 'Nintendo', 'JP'],
-  ['6098', 'Recruit Holdings', 'JP'],
-  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
-  ['4063', 'Shin-Etsu Chemical', 'JP'],
-])
-
-const hongKongInstruments = Object.freeze([
-  ['0700', 'Tencent Holdings', 'HK'],
-  ['9988', 'Alibaba Group', 'HK'],
-  ['1810', 'Xiaomi', 'HK'],
-  ['3690', 'Meituan', 'HK'],
-  ['0941', 'China Mobile', 'HK'],
-  ['1211', 'BYD Company', 'HK'],
-  ['1299', 'AIA Group', 'HK'],
-  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
-  ['0005', 'HSBC Holdings', 'HK'],
-  ['2318', 'Ping An Insurance', 'HK'],
-])
-
-const canadianInstruments = Object.freeze([
-  ['RY', 'Royal Bank of Canada', 'CA'],
-  ['TD', 'Toronto-Dominion Bank', 'CA'],
-  ['SHOP', 'Shopify', 'CA'],
-  ['ENB', 'Enbridge', 'CA'],
-  ['CNR', 'Canadian National Railway', 'CA'],
-  ['CP', 'Canadian Pacific Kansas City', 'CA'],
-  ['BMO', 'Bank of Montreal', 'CA'],
-  ['CSU', 'Constellation Software', 'CA'],
-])
-
-const australianInstruments = Object.freeze([
-  ['BHP', 'BHP Group', 'AU'],
-  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
-  ['CSL', 'CSL', 'AU'],
-  ['NAB', 'National Australia Bank', 'AU'],
-  ['WBC', 'Westpac Banking Corporation', 'AU'],
-  ['ANZ', 'ANZ Group Holdings', 'AU'],
-  ['WES', 'Wesfarmers', 'AU'],
-  ['MQG', 'Macquarie Group', 'AU'],
-])
-
-const internationalMarketGroups = Object.freeze([
-  interleavedEuropeanInstruments,
-  southKoreanInstruments,
-  japaneseInstruments,
-  hongKongInstruments,
-  canadianInstruments,
-  australianInstruments,
-])
-
-export const internationalInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...internationalMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      internationalMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const INTERNATIONAL_INSERTION_INTERVAL = 3
-
-/**
- * U.S. and international instruments are interleaved so ordinary benchmark
- * sizes exercise multiple symbol formats and market labels.
- */
-export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
-    const internationalInstrument =
-      index % INTERNATIONAL_INSERTION_INTERVAL === 0
-        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
-        : undefined
-
-    return internationalInstrument
-      ? [instrument, internationalInstrument]
-      : [instrument]
-  }),
-) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/preact/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/preact/realtime-trading/src/feed/worker/market-feed-engine.ts
index 557f7c30a8..fbd9c369c0 100644
--- a/examples/preact/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/preact/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/react/realtime-trading/src/feed/market-instruments.ts b/examples/react/realtime-trading/src/feed/market-instruments.ts
new file mode 100644
index 0000000000..ac18d14ea9
--- /dev/null
+++ b/examples/react/realtime-trading/src/feed/market-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const marketInstruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  marketInstruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/react/realtime-trading/src/feed/sp500-instruments.ts b/examples/react/realtime-trading/src/feed/sp500-instruments.ts
deleted file mode 100644
index c44eb5d152..0000000000
--- a/examples/react/realtime-trading/src/feed/sp500-instruments.ts
+++ /dev/null
@@ -1,742 +0,0 @@
-export type MarketCode =
-  | 'US'
-  | 'NL'
-  | 'DE'
-  | 'FR'
-  | 'IT'
-  | 'ES'
-  | 'CH'
-  | 'DK'
-  | 'SE'
-  | 'FI'
-  | 'GB'
-  | 'KR'
-  | 'JP'
-  | 'HK'
-  | 'CA'
-  | 'AU'
-
-export type BaseInstrument = readonly [
-  symbol: string,
-  company: string,
-  market: MarketCode,
-]
-
-/**
- * Current S&P 500 constituent universe used by the realtime trading examples.
- *
- * Source snapshot: https://github.com/datasets/s-and-p-500-companies
- * Retrieved: 2026-08-15.
- * Multiple share classes are intentionally represented as separate instruments.
- */
-export const sp500Instruments = Object.freeze([
-  ['MMM', '3M', 'US'],
-  ['AOS', 'A. O. Smith', 'US'],
-  ['ABT', 'Abbott Laboratories', 'US'],
-  ['ABBV', 'AbbVie', 'US'],
-  ['ACN', 'Accenture', 'US'],
-  ['ADBE', 'Adobe Inc.', 'US'],
-  ['AMD', 'Advanced Micro Devices', 'US'],
-  ['AES', 'AES Corporation', 'US'],
-  ['AFL', 'Aflac', 'US'],
-  ['A', 'Agilent Technologies', 'US'],
-  ['APD', 'Air Products', 'US'],
-  ['ABNB', 'Airbnb', 'US'],
-  ['AKAM', 'Akamai Technologies', 'US'],
-  ['ALB', 'Albemarle Corporation', 'US'],
-  ['ARE', 'Alexandria Real Estate Equities', 'US'],
-  ['ALGN', 'Align Technology', 'US'],
-  ['ALLE', 'Allegion', 'US'],
-  ['LNT', 'Alliant Energy', 'US'],
-  ['ALL', 'Allstate', 'US'],
-  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
-  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
-  ['MO', 'Altria', 'US'],
-  ['AMZN', 'Amazon', 'US'],
-  ['AMCR', 'Amcor', 'US'],
-  ['AEE', 'Ameren', 'US'],
-  ['AEP', 'American Electric Power', 'US'],
-  ['AXP', 'American Express', 'US'],
-  ['AIG', 'American International Group', 'US'],
-  ['AMT', 'American Tower', 'US'],
-  ['AWK', 'American Water Works', 'US'],
-  ['AMP', 'Ameriprise Financial', 'US'],
-  ['AME', 'Ametek', 'US'],
-  ['AMGN', 'Amgen', 'US'],
-  ['APH', 'Amphenol', 'US'],
-  ['ADI', 'Analog Devices', 'US'],
-  ['AON', 'Aon plc', 'US'],
-  ['APA', 'APA Corporation', 'US'],
-  ['APO', 'Apollo Global Management', 'US'],
-  ['AAPL', 'Apple Inc.', 'US'],
-  ['AMAT', 'Applied Materials', 'US'],
-  ['APP', 'AppLovin', 'US'],
-  ['APTV', 'Aptiv', 'US'],
-  ['ACGL', 'Arch Capital Group', 'US'],
-  ['ADM', 'Archer Daniels Midland', 'US'],
-  ['ARES', 'Ares Management', 'US'],
-  ['ANET', 'Arista Networks', 'US'],
-  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
-  ['AIZ', 'Assurant', 'US'],
-  ['T', 'AT&T', 'US'],
-  ['ATO', 'Atmos Energy', 'US'],
-  ['ADSK', 'Autodesk', 'US'],
-  ['ADP', 'Automatic Data Processing', 'US'],
-  ['AZO', 'AutoZone', 'US'],
-  ['AVB', 'AvalonBay Communities', 'US'],
-  ['AVY', 'Avery Dennison', 'US'],
-  ['AXON', 'Axon Enterprise', 'US'],
-  ['BKR', 'Baker Hughes', 'US'],
-  ['BALL', 'Ball Corporation', 'US'],
-  ['BAC', 'Bank of America', 'US'],
-  ['BAX', 'Baxter International', 'US'],
-  ['BDX', 'Becton Dickinson', 'US'],
-  ['BRK.B', 'Berkshire Hathaway', 'US'],
-  ['BBY', 'Best Buy', 'US'],
-  ['TECH', 'Bio-Techne', 'US'],
-  ['BIIB', 'Biogen', 'US'],
-  ['BLK', 'BlackRock', 'US'],
-  ['BX', 'Blackstone Inc.', 'US'],
-  ['XYZ', 'Block, Inc.', 'US'],
-  ['BNY', 'BNY Mellon', 'US'],
-  ['BA', 'Boeing', 'US'],
-  ['BKNG', 'Booking Holdings', 'US'],
-  ['BSX', 'Boston Scientific', 'US'],
-  ['BMY', 'Bristol Myers Squibb', 'US'],
-  ['AVGO', 'Broadcom', 'US'],
-  ['BR', 'Broadridge Financial Solutions', 'US'],
-  ['BRO', 'Brown & Brown', 'US'],
-  ['BF.B', 'Brown–Forman', 'US'],
-  ['BLDR', 'Builders FirstSource', 'US'],
-  ['BG', 'Bunge Global', 'US'],
-  ['BXP', 'BXP, Inc.', 'US'],
-  ['CHRW', 'C.H. Robinson', 'US'],
-  ['CDNS', 'Cadence Design Systems', 'US'],
-  ['CPT', 'Camden Property Trust', 'US'],
-  ['COF', 'Capital One', 'US'],
-  ['CAH', 'Cardinal Health', 'US'],
-  ['CCL', 'Carnival Corporation', 'US'],
-  ['CARR', 'Carrier Global', 'US'],
-  ['CVNA', 'Carvana', 'US'],
-  ['CASY', "Casey's", 'US'],
-  ['CAT', 'Caterpillar Inc.', 'US'],
-  ['CBOE', 'Cboe Global Markets', 'US'],
-  ['CBRE', 'CBRE Group', 'US'],
-  ['CDW', 'CDW Corporation', 'US'],
-  ['COR', 'Cencora', 'US'],
-  ['CNC', 'Centene Corporation', 'US'],
-  ['CNP', 'CenterPoint Energy', 'US'],
-  ['CF', 'CF Industries', 'US'],
-  ['CRL', 'Charles River Laboratories', 'US'],
-  ['SCHW', 'Charles Schwab Corporation', 'US'],
-  ['CHTR', 'Charter Communications', 'US'],
-  ['CVX', 'Chevron Corporation', 'US'],
-  ['CMG', 'Chipotle Mexican Grill', 'US'],
-  ['CB', 'Chubb Limited', 'US'],
-  ['CHD', 'Church & Dwight', 'US'],
-  ['CIEN', 'Ciena', 'US'],
-  ['CI', 'Cigna', 'US'],
-  ['CINF', 'Cincinnati Financial', 'US'],
-  ['CTAS', 'Cintas', 'US'],
-  ['CSCO', 'Cisco', 'US'],
-  ['C', 'Citigroup', 'US'],
-  ['CFG', 'Citizens Financial Group', 'US'],
-  ['CLX', 'Clorox', 'US'],
-  ['CME', 'CME Group', 'US'],
-  ['CMS', 'CMS Energy', 'US'],
-  ['KO', 'Coca-Cola Company (The)', 'US'],
-  ['CTSH', 'Cognizant', 'US'],
-  ['COHR', 'Coherent Corp.', 'US'],
-  ['COIN', 'Coinbase', 'US'],
-  ['CL', 'Colgate-Palmolive', 'US'],
-  ['CMCSA', 'Comcast', 'US'],
-  ['FIX', 'Comfort Systems USA', 'US'],
-  ['COP', 'ConocoPhillips', 'US'],
-  ['ED', 'Consolidated Edison', 'US'],
-  ['STZ', 'Constellation Brands', 'US'],
-  ['CEG', 'Constellation Energy', 'US'],
-  ['COO', 'Cooper Companies (The)', 'US'],
-  ['CPRT', 'Copart', 'US'],
-  ['GLW', 'Corning Inc.', 'US'],
-  ['CPAY', 'Corpay', 'US'],
-  ['CTVA', 'Corteva', 'US'],
-  ['CSGP', 'CoStar Group', 'US'],
-  ['COST', 'Costco', 'US'],
-  ['CRH', 'CRH plc', 'US'],
-  ['CRWD', 'CrowdStrike', 'US'],
-  ['CCI', 'Crown Castle', 'US'],
-  ['CSX', 'CSX Corporation', 'US'],
-  ['CMI', 'Cummins', 'US'],
-  ['CVS', 'CVS Health', 'US'],
-  ['DHR', 'Danaher Corporation', 'US'],
-  ['DRI', 'Darden Restaurants', 'US'],
-  ['DDOG', 'Datadog', 'US'],
-  ['DVA', 'DaVita', 'US'],
-  ['DECK', 'Deckers Brands', 'US'],
-  ['DE', 'Deere & Company', 'US'],
-  ['DELL', 'Dell Technologies', 'US'],
-  ['DAL', 'Delta Air Lines', 'US'],
-  ['DVN', 'Devon Energy', 'US'],
-  ['DXCM', 'Dexcom', 'US'],
-  ['FANG', 'Diamondback Energy', 'US'],
-  ['DLR', 'Digital Realty', 'US'],
-  ['DG', 'Dollar General', 'US'],
-  ['DLTR', 'Dollar Tree', 'US'],
-  ['D', 'Dominion Energy', 'US'],
-  ['DPZ', "Domino's", 'US'],
-  ['DASH', 'DoorDash', 'US'],
-  ['DOV', 'Dover Corporation', 'US'],
-  ['DOW', 'Dow Inc.', 'US'],
-  ['DHI', 'D. R. Horton', 'US'],
-  ['DTE', 'DTE Energy', 'US'],
-  ['DUK', 'Duke Energy', 'US'],
-  ['DD', 'DuPont', 'US'],
-  ['ETN', 'Eaton Corporation', 'US'],
-  ['EBAY', 'eBay Inc.', 'US'],
-  ['ECHO', 'EchoStar', 'US'],
-  ['ECL', 'Ecolab', 'US'],
-  ['EIX', 'Edison International', 'US'],
-  ['EW', 'Edwards Lifesciences', 'US'],
-  ['ELV', 'Elevance Health', 'US'],
-  ['EME', 'Emcor', 'US'],
-  ['EMR', 'Emerson Electric', 'US'],
-  ['ETR', 'Entergy', 'US'],
-  ['EOG', 'EOG Resources', 'US'],
-  ['EQT', 'EQT Corporation', 'US'],
-  ['EFX', 'Equifax', 'US'],
-  ['EQIX', 'Equinix', 'US'],
-  ['EQR', 'Equity Residential', 'US'],
-  ['ERIE', 'Erie Indemnity', 'US'],
-  ['ESS', 'Essex Property Trust', 'US'],
-  ['EL', 'Estée Lauder Companies (The)', 'US'],
-  ['EG', 'Everest Group', 'US'],
-  ['EVRG', 'Evergy', 'US'],
-  ['ES', 'Eversource Energy', 'US'],
-  ['EXC', 'Exelon', 'US'],
-  ['EXE', 'Expand Energy', 'US'],
-  ['EXPE', 'Expedia Group', 'US'],
-  ['EXPD', 'Expeditors International', 'US'],
-  ['EXR', 'Extra Space Storage', 'US'],
-  ['XOM', 'ExxonMobil', 'US'],
-  ['FFIV', 'F5, Inc.', 'US'],
-  ['FDS', 'FactSet', 'US'],
-  ['FICO', 'Fair Isaac', 'US'],
-  ['FAST', 'Fastenal', 'US'],
-  ['FRT', 'Federal Realty Investment Trust', 'US'],
-  ['FDX', 'FedEx', 'US'],
-  ['FDXF', 'FedEx Freight', 'US'],
-  ['FERG', 'Ferguson Enterprises', 'US'],
-  ['FIS', 'Fidelity National Information Services', 'US'],
-  ['FITB', 'Fifth Third Bancorp', 'US'],
-  ['FSLR', 'First Solar', 'US'],
-  ['FE', 'FirstEnergy', 'US'],
-  ['FISV', 'Fiserv', 'US'],
-  ['FLEX', 'Flex Ltd.', 'US'],
-  ['F', 'Ford Motor Company', 'US'],
-  ['FTNT', 'Fortinet', 'US'],
-  ['FTV', 'Fortive', 'US'],
-  ['FOXA', 'Fox Corporation (Class A)', 'US'],
-  ['FOX', 'Fox Corporation (Class B)', 'US'],
-  ['BEN', 'Franklin Resources', 'US'],
-  ['FCX', 'Freeport-McMoRan', 'US'],
-  ['GRMN', 'Garmin', 'US'],
-  ['IT', 'Gartner', 'US'],
-  ['GE', 'GE Aerospace', 'US'],
-  ['GEHC', 'GE HealthCare', 'US'],
-  ['GEV', 'GE Vernova', 'US'],
-  ['GEN', 'Gen Digital', 'US'],
-  ['GNRC', 'Generac', 'US'],
-  ['GD', 'General Dynamics', 'US'],
-  ['GIS', 'General Mills', 'US'],
-  ['GM', 'General Motors', 'US'],
-  ['GPC', 'Genuine Parts Company', 'US'],
-  ['GILD', 'Gilead Sciences', 'US'],
-  ['GPN', 'Global Payments', 'US'],
-  ['GL', 'Globe Life', 'US'],
-  ['GDDY', 'GoDaddy', 'US'],
-  ['GS', 'Goldman Sachs', 'US'],
-  ['HAL', 'Halliburton', 'US'],
-  ['HIG', 'Hartford (The)', 'US'],
-  ['HAS', 'Hasbro', 'US'],
-  ['HCA', 'HCA Healthcare', 'US'],
-  ['DOC', 'Healthpeak Properties', 'US'],
-  ['HSIC', 'Henry Schein', 'US'],
-  ['HSY', 'Hershey Company (The)', 'US'],
-  ['HPE', 'Hewlett Packard Enterprise', 'US'],
-  ['HLT', 'Hilton Worldwide', 'US'],
-  ['HD', 'Home Depot (The)', 'US'],
-  ['HONA', 'Honeywell Aerospace', 'US'],
-  ['HON', 'Honeywell Technologies', 'US'],
-  ['HRL', 'Hormel Foods', 'US'],
-  ['HST', 'Host Hotels & Resorts', 'US'],
-  ['HWM', 'Howmet Aerospace', 'US'],
-  ['HPQ', 'HP Inc.', 'US'],
-  ['HUBB', 'Hubbell Incorporated', 'US'],
-  ['HUM', 'Humana', 'US'],
-  ['HBAN', 'Huntington Bancshares', 'US'],
-  ['HII', 'Huntington Ingalls Industries', 'US'],
-  ['IBM', 'IBM', 'US'],
-  ['IEX', 'IDEX Corporation', 'US'],
-  ['IDXX', 'Idexx Laboratories', 'US'],
-  ['ITW', 'Illinois Tool Works', 'US'],
-  ['INCY', 'Incyte', 'US'],
-  ['IR', 'Ingersoll Rand', 'US'],
-  ['PODD', 'Insulet Corporation', 'US'],
-  ['INTC', 'Intel', 'US'],
-  ['IBKR', 'Interactive Brokers', 'US'],
-  ['ICE', 'Intercontinental Exchange', 'US'],
-  ['IFF', 'International Flavors & Fragrances', 'US'],
-  ['IP', 'International Paper', 'US'],
-  ['INTU', 'Intuit', 'US'],
-  ['ISRG', 'Intuitive Surgical', 'US'],
-  ['IVZ', 'Invesco', 'US'],
-  ['INVH', 'Invitation Homes', 'US'],
-  ['IQV', 'IQVIA', 'US'],
-  ['IRM', 'Iron Mountain', 'US'],
-  ['JBHT', 'J.B. Hunt', 'US'],
-  ['JBL', 'Jabil', 'US'],
-  ['JKHY', 'Jack Henry & Associates', 'US'],
-  ['J', 'Jacobs Solutions', 'US'],
-  ['JNJ', 'Johnson & Johnson', 'US'],
-  ['JCI', 'Johnson Controls', 'US'],
-  ['JPM', 'JPMorgan Chase', 'US'],
-  ['KVUE', 'Kenvue', 'US'],
-  ['KDP', 'Keurig Dr Pepper', 'US'],
-  ['KEY', 'KeyCorp', 'US'],
-  ['KEYS', 'Keysight Technologies', 'US'],
-  ['KMB', 'Kimberly-Clark', 'US'],
-  ['KIM', 'Kimco Realty', 'US'],
-  ['KMI', 'Kinder Morgan', 'US'],
-  ['KKR', 'KKR & Co.', 'US'],
-  ['KLAC', 'KLA Corporation', 'US'],
-  ['KHC', 'Kraft Heinz', 'US'],
-  ['KR', 'Kroger', 'US'],
-  ['LHX', 'L3Harris', 'US'],
-  ['LH', 'Labcorp', 'US'],
-  ['LRCX', 'Lam Research', 'US'],
-  ['LVS', 'Las Vegas Sands', 'US'],
-  ['LDOS', 'Leidos', 'US'],
-  ['LEN', 'Lennar', 'US'],
-  ['LII', 'Lennox International', 'US'],
-  ['LLY', 'Lilly (Eli)', 'US'],
-  ['LIN', 'Linde plc', 'US'],
-  ['LYV', 'Live Nation Entertainment', 'US'],
-  ['LMT', 'Lockheed Martin', 'US'],
-  ['L', 'Loews Corporation', 'US'],
-  ['LOW', "Lowe's", 'US'],
-  ['LULU', 'Lululemon Athletica', 'US'],
-  ['LITE', 'Lumentum', 'US'],
-  ['LYB', 'LyondellBasell', 'US'],
-  ['MTB', 'M&T Bank', 'US'],
-  ['MPC', 'Marathon Petroleum', 'US'],
-  ['MAR', 'Marriott International', 'US'],
-  ['MRSH', 'Marsh McLennan', 'US'],
-  ['MLM', 'Martin Marietta Materials', 'US'],
-  ['MRVL', 'Marvell Technology', 'US'],
-  ['MAS', 'Masco', 'US'],
-  ['MA', 'Mastercard', 'US'],
-  ['MKC', 'McCormick & Company', 'US'],
-  ['MCD', "McDonald's", 'US'],
-  ['MCK', 'McKesson Corporation', 'US'],
-  ['MDT', 'Medtronic', 'US'],
-  ['MRK', 'Merck & Co.', 'US'],
-  ['META', 'Meta Platforms', 'US'],
-  ['MET', 'MetLife', 'US'],
-  ['MTD', 'Mettler Toledo', 'US'],
-  ['MGM', 'MGM Resorts', 'US'],
-  ['MCHP', 'Microchip Technology', 'US'],
-  ['MU', 'Micron Technology', 'US'],
-  ['MSFT', 'Microsoft', 'US'],
-  ['MAA', 'Mid-America Apartment Communities', 'US'],
-  ['MRNA', 'Moderna', 'US'],
-  ['TAP', 'Molson Coors Beverage Company', 'US'],
-  ['MDLZ', 'Mondelez International', 'US'],
-  ['MPWR', 'Monolithic Power Systems', 'US'],
-  ['MNST', 'Monster Beverage', 'US'],
-  ['MCO', "Moody's Corporation", 'US'],
-  ['MS', 'Morgan Stanley', 'US'],
-  ['MOS', 'Mosaic Company (The)', 'US'],
-  ['MSI', 'Motorola Solutions', 'US'],
-  ['MSCI', 'MSCI', 'US'],
-  ['NDAQ', 'Nasdaq, Inc.', 'US'],
-  ['NTAP', 'NetApp', 'US'],
-  ['NFLX', 'Netflix', 'US'],
-  ['NEM', 'Newmont', 'US'],
-  ['NWSA', 'News Corp (Class A)', 'US'],
-  ['NWS', 'News Corp (Class B)', 'US'],
-  ['NEE', 'NextEra Energy', 'US'],
-  ['NKE', 'Nike, Inc.', 'US'],
-  ['NI', 'NiSource', 'US'],
-  ['NDSN', 'Nordson Corporation', 'US'],
-  ['NSC', 'Norfolk Southern', 'US'],
-  ['NTRS', 'Northern Trust', 'US'],
-  ['NOC', 'Northrop Grumman', 'US'],
-  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
-  ['NRG', 'NRG Energy', 'US'],
-  ['NUE', 'Nucor', 'US'],
-  ['NVDA', 'Nvidia', 'US'],
-  ['NVR', 'NVR, Inc.', 'US'],
-  ['NXPI', 'NXP Semiconductors', 'US'],
-  ['ORLY', "O'Reilly Automotive", 'US'],
-  ['OXY', 'Occidental Petroleum', 'US'],
-  ['ODFL', 'Old Dominion', 'US'],
-  ['OMC', 'Omnicom Group', 'US'],
-  ['ON', 'ON Semiconductor', 'US'],
-  ['OKE', 'Oneok', 'US'],
-  ['ORCL', 'Oracle Corporation', 'US'],
-  ['OTIS', 'Otis Worldwide', 'US'],
-  ['PCAR', 'Paccar', 'US'],
-  ['PKG', 'Packaging Corporation of America', 'US'],
-  ['PLTR', 'Palantir Technologies', 'US'],
-  ['PANW', 'Palo Alto Networks', 'US'],
-  ['PSKY', 'Paramount Skydance Corporation', 'US'],
-  ['PH', 'Parker Hannifin', 'US'],
-  ['PAYX', 'Paychex', 'US'],
-  ['PYPL', 'PayPal', 'US'],
-  ['PNR', 'Pentair', 'US'],
-  ['PEP', 'PepsiCo', 'US'],
-  ['PFE', 'Pfizer', 'US'],
-  ['PCG', 'PG&E Corporation', 'US'],
-  ['PM', 'Philip Morris International', 'US'],
-  ['PSX', 'Phillips 66', 'US'],
-  ['PNW', 'Pinnacle West Capital', 'US'],
-  ['PNC', 'PNC Financial Services', 'US'],
-  ['PPG', 'PPG Industries', 'US'],
-  ['PPL', 'PPL Corporation', 'US'],
-  ['PFG', 'Principal Financial Group', 'US'],
-  ['PG', 'Procter & Gamble', 'US'],
-  ['PGR', 'Progressive Corporation', 'US'],
-  ['PLD', 'Prologis', 'US'],
-  ['PRU', 'Prudential Financial', 'US'],
-  ['PEG', 'Public Service Enterprise Group', 'US'],
-  ['PTC', 'PTC Inc.', 'US'],
-  ['PSA', 'Public Storage', 'US'],
-  ['PHM', 'PulteGroup', 'US'],
-  ['PWR', 'Quanta Services', 'US'],
-  ['QCOM', 'Qualcomm', 'US'],
-  ['DGX', 'Quest Diagnostics', 'US'],
-  ['Q', 'Qnity Electronics', 'US'],
-  ['RL', 'Ralph Lauren Corporation', 'US'],
-  ['RJF', 'Raymond James Financial', 'US'],
-  ['RTX', 'RTX Corporation', 'US'],
-  ['O', 'Realty Income', 'US'],
-  ['REG', 'Regency Centers', 'US'],
-  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
-  ['RF', 'Regions Financial Corporation', 'US'],
-  ['RSG', 'Republic Services', 'US'],
-  ['RMD', 'ResMed|', 'US'],
-  ['RVTY', 'Revvity', 'US'],
-  ['HOOD', 'Robinhood Markets', 'US'],
-  ['ROK', 'Rockwell Automation', 'US'],
-  ['ROL', 'Rollins, Inc.', 'US'],
-  ['ROP', 'Roper Technologies', 'US'],
-  ['ROST', 'Ross Stores', 'US'],
-  ['RCL', 'Royal Caribbean Group', 'US'],
-  ['SPGI', 'S&P Global', 'US'],
-  ['CRM', 'Salesforce', 'US'],
-  ['SNDK', 'Sandisk', 'US'],
-  ['SBAC', 'SBA Communications', 'US'],
-  ['SLB', 'Schlumberger', 'US'],
-  ['STX', 'Seagate Technology', 'US'],
-  ['SRE', 'Sempra', 'US'],
-  ['NOW', 'ServiceNow', 'US'],
-  ['SHW', 'Sherwin-Williams', 'US'],
-  ['SPG', 'Simon Property Group', 'US'],
-  ['SWKS', 'Skyworks Solutions', 'US'],
-  ['SJM', 'J.M. Smucker Company (The)', 'US'],
-  ['SW', 'Smurfit Westrock', 'US'],
-  ['SNA', 'Snap-on', 'US'],
-  ['SOLV', 'Solventum', 'US'],
-  ['SO', 'Southern Company', 'US'],
-  ['LUV', 'Southwest Airlines', 'US'],
-  ['SWK', 'Stanley Black & Decker', 'US'],
-  ['SBUX', 'Starbucks', 'US'],
-  ['STT', 'State Street Corporation', 'US'],
-  ['STLD', 'Steel Dynamics', 'US'],
-  ['STE', 'Steris', 'US'],
-  ['SYK', 'Stryker Corporation', 'US'],
-  ['SMCI', 'Supermicro', 'US'],
-  ['SYF', 'Synchrony Financial', 'US'],
-  ['SNPS', 'Synopsys', 'US'],
-  ['SYY', 'Sysco', 'US'],
-  ['TMUS', 'T-Mobile US', 'US'],
-  ['TROW', 'T. Rowe Price', 'US'],
-  ['TTWO', 'Take-Two Interactive', 'US'],
-  ['TPR', 'Tapestry, Inc.', 'US'],
-  ['TRGP', 'Targa Resources', 'US'],
-  ['TGT', 'Target Corporation', 'US'],
-  ['TEL', 'TE Connectivity', 'US'],
-  ['TDY', 'Teledyne Technologies', 'US'],
-  ['TER', 'Teradyne', 'US'],
-  ['TSLA', 'Tesla, Inc.', 'US'],
-  ['TXN', 'Texas Instruments', 'US'],
-  ['TPL', 'Texas Pacific Land Corporation', 'US'],
-  ['TXT', 'Textron', 'US'],
-  ['TMO', 'Thermo Fisher Scientific', 'US'],
-  ['TJX', 'TJX Companies', 'US'],
-  ['TKO', 'TKO Group Holdings', 'US'],
-  ['TTD', 'Trade Desk (The)', 'US'],
-  ['TSCO', 'Tractor Supply', 'US'],
-  ['TT', 'Trane Technologies', 'US'],
-  ['TDG', 'TransDigm Group', 'US'],
-  ['TRV', 'Travelers Companies (The)', 'US'],
-  ['TRMB', 'Trimble Inc.', 'US'],
-  ['TFC', 'Truist Financial', 'US'],
-  ['TYL', 'Tyler Technologies', 'US'],
-  ['TSN', 'Tyson Foods', 'US'],
-  ['USB', 'U.S. Bancorp', 'US'],
-  ['UBER', 'Uber', 'US'],
-  ['UDR', 'UDR, Inc.', 'US'],
-  ['ULTA', 'Ulta Beauty', 'US'],
-  ['UNP', 'Union Pacific Corporation', 'US'],
-  ['UAL', 'United Airlines Holdings', 'US'],
-  ['UPS', 'United Parcel Service', 'US'],
-  ['URI', 'United Rentals', 'US'],
-  ['UNH', 'UnitedHealth Group', 'US'],
-  ['UHS', 'Universal Health Services', 'US'],
-  ['VLO', 'Valero Energy', 'US'],
-  ['VEEV', 'Veeva Systems', 'US'],
-  ['VTR', 'Ventas', 'US'],
-  ['VLTO', 'Veralto', 'US'],
-  ['VRSN', 'Verisign', 'US'],
-  ['VRSK', 'Verisk Analytics', 'US'],
-  ['VZ', 'Verizon', 'US'],
-  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
-  ['VRT', 'Vertiv', 'US'],
-  ['VTRS', 'Viatris', 'US'],
-  ['VICI', 'Vici Properties', 'US'],
-  ['V', 'Visa Inc.', 'US'],
-  ['VST', 'Vistra Corp.', 'US'],
-  ['VMC', 'Vulcan Materials Company', 'US'],
-  ['WRB', 'W. R. Berkley Corporation', 'US'],
-  ['GWW', 'W. W. Grainger', 'US'],
-  ['WAB', 'Wabtec', 'US'],
-  ['WMT', 'Walmart', 'US'],
-  ['DIS', 'Walt Disney Company (The)', 'US'],
-  ['WBD', 'Warner Bros. Discovery', 'US'],
-  ['WM', 'Waste Management', 'US'],
-  ['WAT', 'Waters Corporation', 'US'],
-  ['WEC', 'WEC Energy Group', 'US'],
-  ['WFC', 'Wells Fargo', 'US'],
-  ['WELL', 'Welltower', 'US'],
-  ['WST', 'West Pharmaceutical Services', 'US'],
-  ['WDC', 'Western Digital', 'US'],
-  ['WY', 'Weyerhaeuser', 'US'],
-  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
-  ['WMB', 'Williams Companies', 'US'],
-  ['WTW', 'Willis Towers Watson', 'US'],
-  ['WDAY', 'Workday, Inc.', 'US'],
-  ['WYNN', 'Wynn Resorts', 'US'],
-  ['XEL', 'Xcel Energy', 'US'],
-  ['XYL', 'Xylem Inc.', 'US'],
-  ['YUM', 'Yum! Brands', 'US'],
-  ['ZBRA', 'Zebra Technologies', 'US'],
-  ['ZBH', 'Zimmer Biomet', 'US'],
-  ['ZTS', 'Zoetis', 'US'],
-])
-
-/**
- * Representative liquid international listings used to diversify the fixture.
- * Symbols use their local-market form and the third tuple value is an ISO-style
- * country/market code, rather than a trading currency or exchange MIC.
- *
- * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
- * JPX TOPIX Core30, and HKEX index constituent materials.
- */
-const europeanInstruments = Object.freeze([
-  ['ASML', 'ASML Holding', 'NL'],
-  ['INGA', 'ING Group', 'NL'],
-  ['ADYEN', 'Adyen', 'NL'],
-  ['PHIA', 'Philips', 'NL'],
-  ['HEIA', 'Heineken', 'NL'],
-  ['SAP', 'SAP', 'DE'],
-  ['SIE', 'Siemens', 'DE'],
-  ['ALV', 'Allianz', 'DE'],
-  ['DTE', 'Deutsche Telekom', 'DE'],
-  ['MBG', 'Mercedes-Benz Group', 'DE'],
-  ['BMW', 'BMW', 'DE'],
-  ['BAS', 'BASF', 'DE'],
-  ['MUV2', 'Munich Re', 'DE'],
-  ['VOW3', 'Volkswagen Preference', 'DE'],
-  ['IFX', 'Infineon Technologies', 'DE'],
-  ['MC', 'LVMH', 'FR'],
-  ['OR', "L'Oréal", 'FR'],
-  ['AIR', 'Airbus', 'FR'],
-  ['SU', 'Schneider Electric', 'FR'],
-  ['TTE', 'TotalEnergies', 'FR'],
-  ['SAN', 'Sanofi', 'FR'],
-  ['BNP', 'BNP Paribas', 'FR'],
-  ['CS', 'AXA', 'FR'],
-  ['DG', 'Vinci', 'FR'],
-  ['ENEL', 'Enel', 'IT'],
-  ['ENI', 'Eni', 'IT'],
-  ['ISP', 'Intesa Sanpaolo', 'IT'],
-  ['UCG', 'UniCredit', 'IT'],
-  ['STLAM', 'Stellantis', 'IT'],
-  ['SAN', 'Banco Santander', 'ES'],
-  ['IBE', 'Iberdrola', 'ES'],
-  ['ITX', 'Inditex', 'ES'],
-  ['BBVA', 'BBVA', 'ES'],
-  ['NESN', 'Nestlé', 'CH'],
-  ['ROG', 'Roche Holding', 'CH'],
-  ['NOVN', 'Novartis', 'CH'],
-  ['UBSG', 'UBS Group', 'CH'],
-  ['NOVO-B', 'Novo Nordisk', 'DK'],
-  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
-  ['VOLV-B', 'Volvo', 'SE'],
-  ['ERIC-B', 'Ericsson', 'SE'],
-  ['NOKIA', 'Nokia', 'FI'],
-  ['SHEL', 'Shell', 'GB'],
-  ['AZN', 'AstraZeneca', 'GB'],
-  ['HSBA', 'HSBC Holdings', 'GB'],
-  ['ULVR', 'Unilever', 'GB'],
-  ['LSEG', 'London Stock Exchange Group', 'GB'],
-])
-
-const europeanMarketCodes = Object.freeze([
-  'NL',
-  'DE',
-  'FR',
-  'IT',
-  'ES',
-  'CH',
-  'DK',
-  'SE',
-  'FI',
-  'GB',
-])
-
-const europeanMarketGroups = Object.freeze(
-  europeanMarketCodes.map((market) =>
-    europeanInstruments.filter(([, , instrumentMarket]) =>
-      Object.is(instrumentMarket, market),
-    ),
-  ),
-)
-
-const interleavedEuropeanInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...europeanMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      europeanMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const southKoreanInstruments = Object.freeze([
-  ['005930', 'Samsung Electronics', 'KR'],
-  ['000660', 'SK hynix', 'KR'],
-  ['373220', 'LG Energy Solution', 'KR'],
-  ['207940', 'Samsung Biologics', 'KR'],
-  ['005380', 'Hyundai Motor', 'KR'],
-  ['000270', 'Kia', 'KR'],
-  ['068270', 'Celltrion', 'KR'],
-  ['105560', 'KB Financial Group', 'KR'],
-  ['055550', 'Shinhan Financial Group', 'KR'],
-  ['035420', 'NAVER', 'KR'],
-  ['035720', 'Kakao', 'KR'],
-  ['006400', 'Samsung SDI', 'KR'],
-  ['051910', 'LG Chem', 'KR'],
-  ['012330', 'Hyundai Mobis', 'KR'],
-  ['066570', 'LG Electronics', 'KR'],
-])
-
-const japaneseInstruments = Object.freeze([
-  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
-  ['7203', 'Toyota Motor', 'JP'],
-  ['6501', 'Hitachi', 'JP'],
-  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
-  ['6758', 'Sony Group', 'JP'],
-  ['8058', 'Mitsubishi Corporation', 'JP'],
-  ['9984', 'SoftBank Group', 'JP'],
-  ['8035', 'Tokyo Electron', 'JP'],
-  ['8411', 'Mizuho Financial Group', 'JP'],
-  ['8031', 'Mitsui & Co.', 'JP'],
-  ['6861', 'Keyence', 'JP'],
-  ['7974', 'Nintendo', 'JP'],
-  ['6098', 'Recruit Holdings', 'JP'],
-  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
-  ['4063', 'Shin-Etsu Chemical', 'JP'],
-])
-
-const hongKongInstruments = Object.freeze([
-  ['0700', 'Tencent Holdings', 'HK'],
-  ['9988', 'Alibaba Group', 'HK'],
-  ['1810', 'Xiaomi', 'HK'],
-  ['3690', 'Meituan', 'HK'],
-  ['0941', 'China Mobile', 'HK'],
-  ['1211', 'BYD Company', 'HK'],
-  ['1299', 'AIA Group', 'HK'],
-  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
-  ['0005', 'HSBC Holdings', 'HK'],
-  ['2318', 'Ping An Insurance', 'HK'],
-])
-
-const canadianInstruments = Object.freeze([
-  ['RY', 'Royal Bank of Canada', 'CA'],
-  ['TD', 'Toronto-Dominion Bank', 'CA'],
-  ['SHOP', 'Shopify', 'CA'],
-  ['ENB', 'Enbridge', 'CA'],
-  ['CNR', 'Canadian National Railway', 'CA'],
-  ['CP', 'Canadian Pacific Kansas City', 'CA'],
-  ['BMO', 'Bank of Montreal', 'CA'],
-  ['CSU', 'Constellation Software', 'CA'],
-])
-
-const australianInstruments = Object.freeze([
-  ['BHP', 'BHP Group', 'AU'],
-  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
-  ['CSL', 'CSL', 'AU'],
-  ['NAB', 'National Australia Bank', 'AU'],
-  ['WBC', 'Westpac Banking Corporation', 'AU'],
-  ['ANZ', 'ANZ Group Holdings', 'AU'],
-  ['WES', 'Wesfarmers', 'AU'],
-  ['MQG', 'Macquarie Group', 'AU'],
-])
-
-const internationalMarketGroups = Object.freeze([
-  interleavedEuropeanInstruments,
-  southKoreanInstruments,
-  japaneseInstruments,
-  hongKongInstruments,
-  canadianInstruments,
-  australianInstruments,
-])
-
-export const internationalInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...internationalMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      internationalMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const INTERNATIONAL_INSERTION_INTERVAL = 3
-
-/**
- * U.S. and international instruments are interleaved so ordinary benchmark
- * sizes exercise multiple symbol formats and market labels.
- */
-export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
-    const internationalInstrument =
-      index % INTERNATIONAL_INSERTION_INTERVAL === 0
-        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
-        : undefined
-
-    return internationalInstrument
-      ? [instrument, internationalInstrument]
-      : [instrument]
-  }),
-) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
index 557f7c30a8..fbd9c369c0 100644
--- a/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/react/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/realtime-trading-shared/sp500-instruments.d.ts b/examples/realtime-trading-shared/sp500-instruments.d.ts
deleted file mode 100644
index c3bb7740b9..0000000000
--- a/examples/realtime-trading-shared/sp500-instruments.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export type MarketCode =
-  | 'US'
-  | 'NL'
-  | 'DE'
-  | 'FR'
-  | 'IT'
-  | 'ES'
-  | 'CH'
-  | 'DK'
-  | 'SE'
-  | 'FI'
-  | 'GB'
-  | 'KR'
-  | 'JP'
-  | 'HK'
-  | 'CA'
-  | 'AU'
-
-export type BaseInstrument = readonly [
-  symbol: string,
-  company: string,
-  market: MarketCode,
-]
-
-export declare const sp500Instruments: ReadonlyArray<BaseInstrument>
-export declare const internationalInstruments: ReadonlyArray<BaseInstrument>
-export declare const globalInstruments: ReadonlyArray<BaseInstrument>
diff --git a/examples/realtime-trading-shared/sp500-instruments.js b/examples/realtime-trading-shared/sp500-instruments.js
deleted file mode 100644
index 4a47622a32..0000000000
--- a/examples/realtime-trading-shared/sp500-instruments.js
+++ /dev/null
@@ -1,718 +0,0 @@
-/**
- * Current S&P 500 constituent universe used by the realtime trading examples.
- *
- * Source snapshot: https://github.com/datasets/s-and-p-500-companies
- * Retrieved: 2026-08-15.
- * Multiple share classes are intentionally represented as separate instruments.
- */
-export const sp500Instruments = Object.freeze([
-  ['MMM', '3M', 'US'],
-  ['AOS', 'A. O. Smith', 'US'],
-  ['ABT', 'Abbott Laboratories', 'US'],
-  ['ABBV', 'AbbVie', 'US'],
-  ['ACN', 'Accenture', 'US'],
-  ['ADBE', 'Adobe Inc.', 'US'],
-  ['AMD', 'Advanced Micro Devices', 'US'],
-  ['AES', 'AES Corporation', 'US'],
-  ['AFL', 'Aflac', 'US'],
-  ['A', 'Agilent Technologies', 'US'],
-  ['APD', 'Air Products', 'US'],
-  ['ABNB', 'Airbnb', 'US'],
-  ['AKAM', 'Akamai Technologies', 'US'],
-  ['ALB', 'Albemarle Corporation', 'US'],
-  ['ARE', 'Alexandria Real Estate Equities', 'US'],
-  ['ALGN', 'Align Technology', 'US'],
-  ['ALLE', 'Allegion', 'US'],
-  ['LNT', 'Alliant Energy', 'US'],
-  ['ALL', 'Allstate', 'US'],
-  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
-  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
-  ['MO', 'Altria', 'US'],
-  ['AMZN', 'Amazon', 'US'],
-  ['AMCR', 'Amcor', 'US'],
-  ['AEE', 'Ameren', 'US'],
-  ['AEP', 'American Electric Power', 'US'],
-  ['AXP', 'American Express', 'US'],
-  ['AIG', 'American International Group', 'US'],
-  ['AMT', 'American Tower', 'US'],
-  ['AWK', 'American Water Works', 'US'],
-  ['AMP', 'Ameriprise Financial', 'US'],
-  ['AME', 'Ametek', 'US'],
-  ['AMGN', 'Amgen', 'US'],
-  ['APH', 'Amphenol', 'US'],
-  ['ADI', 'Analog Devices', 'US'],
-  ['AON', 'Aon plc', 'US'],
-  ['APA', 'APA Corporation', 'US'],
-  ['APO', 'Apollo Global Management', 'US'],
-  ['AAPL', 'Apple Inc.', 'US'],
-  ['AMAT', 'Applied Materials', 'US'],
-  ['APP', 'AppLovin', 'US'],
-  ['APTV', 'Aptiv', 'US'],
-  ['ACGL', 'Arch Capital Group', 'US'],
-  ['ADM', 'Archer Daniels Midland', 'US'],
-  ['ARES', 'Ares Management', 'US'],
-  ['ANET', 'Arista Networks', 'US'],
-  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
-  ['AIZ', 'Assurant', 'US'],
-  ['T', 'AT&T', 'US'],
-  ['ATO', 'Atmos Energy', 'US'],
-  ['ADSK', 'Autodesk', 'US'],
-  ['ADP', 'Automatic Data Processing', 'US'],
-  ['AZO', 'AutoZone', 'US'],
-  ['AVB', 'AvalonBay Communities', 'US'],
-  ['AVY', 'Avery Dennison', 'US'],
-  ['AXON', 'Axon Enterprise', 'US'],
-  ['BKR', 'Baker Hughes', 'US'],
-  ['BALL', 'Ball Corporation', 'US'],
-  ['BAC', 'Bank of America', 'US'],
-  ['BAX', 'Baxter International', 'US'],
-  ['BDX', 'Becton Dickinson', 'US'],
-  ['BRK.B', 'Berkshire Hathaway', 'US'],
-  ['BBY', 'Best Buy', 'US'],
-  ['TECH', 'Bio-Techne', 'US'],
-  ['BIIB', 'Biogen', 'US'],
-  ['BLK', 'BlackRock', 'US'],
-  ['BX', 'Blackstone Inc.', 'US'],
-  ['XYZ', 'Block, Inc.', 'US'],
-  ['BNY', 'BNY Mellon', 'US'],
-  ['BA', 'Boeing', 'US'],
-  ['BKNG', 'Booking Holdings', 'US'],
-  ['BSX', 'Boston Scientific', 'US'],
-  ['BMY', 'Bristol Myers Squibb', 'US'],
-  ['AVGO', 'Broadcom', 'US'],
-  ['BR', 'Broadridge Financial Solutions', 'US'],
-  ['BRO', 'Brown & Brown', 'US'],
-  ['BF.B', 'Brown–Forman', 'US'],
-  ['BLDR', 'Builders FirstSource', 'US'],
-  ['BG', 'Bunge Global', 'US'],
-  ['BXP', 'BXP, Inc.', 'US'],
-  ['CHRW', 'C.H. Robinson', 'US'],
-  ['CDNS', 'Cadence Design Systems', 'US'],
-  ['CPT', 'Camden Property Trust', 'US'],
-  ['COF', 'Capital One', 'US'],
-  ['CAH', 'Cardinal Health', 'US'],
-  ['CCL', 'Carnival Corporation', 'US'],
-  ['CARR', 'Carrier Global', 'US'],
-  ['CVNA', 'Carvana', 'US'],
-  ['CASY', "Casey's", 'US'],
-  ['CAT', 'Caterpillar Inc.', 'US'],
-  ['CBOE', 'Cboe Global Markets', 'US'],
-  ['CBRE', 'CBRE Group', 'US'],
-  ['CDW', 'CDW Corporation', 'US'],
-  ['COR', 'Cencora', 'US'],
-  ['CNC', 'Centene Corporation', 'US'],
-  ['CNP', 'CenterPoint Energy', 'US'],
-  ['CF', 'CF Industries', 'US'],
-  ['CRL', 'Charles River Laboratories', 'US'],
-  ['SCHW', 'Charles Schwab Corporation', 'US'],
-  ['CHTR', 'Charter Communications', 'US'],
-  ['CVX', 'Chevron Corporation', 'US'],
-  ['CMG', 'Chipotle Mexican Grill', 'US'],
-  ['CB', 'Chubb Limited', 'US'],
-  ['CHD', 'Church & Dwight', 'US'],
-  ['CIEN', 'Ciena', 'US'],
-  ['CI', 'Cigna', 'US'],
-  ['CINF', 'Cincinnati Financial', 'US'],
-  ['CTAS', 'Cintas', 'US'],
-  ['CSCO', 'Cisco', 'US'],
-  ['C', 'Citigroup', 'US'],
-  ['CFG', 'Citizens Financial Group', 'US'],
-  ['CLX', 'Clorox', 'US'],
-  ['CME', 'CME Group', 'US'],
-  ['CMS', 'CMS Energy', 'US'],
-  ['KO', 'Coca-Cola Company (The)', 'US'],
-  ['CTSH', 'Cognizant', 'US'],
-  ['COHR', 'Coherent Corp.', 'US'],
-  ['COIN', 'Coinbase', 'US'],
-  ['CL', 'Colgate-Palmolive', 'US'],
-  ['CMCSA', 'Comcast', 'US'],
-  ['FIX', 'Comfort Systems USA', 'US'],
-  ['COP', 'ConocoPhillips', 'US'],
-  ['ED', 'Consolidated Edison', 'US'],
-  ['STZ', 'Constellation Brands', 'US'],
-  ['CEG', 'Constellation Energy', 'US'],
-  ['COO', 'Cooper Companies (The)', 'US'],
-  ['CPRT', 'Copart', 'US'],
-  ['GLW', 'Corning Inc.', 'US'],
-  ['CPAY', 'Corpay', 'US'],
-  ['CTVA', 'Corteva', 'US'],
-  ['CSGP', 'CoStar Group', 'US'],
-  ['COST', 'Costco', 'US'],
-  ['CRH', 'CRH plc', 'US'],
-  ['CRWD', 'CrowdStrike', 'US'],
-  ['CCI', 'Crown Castle', 'US'],
-  ['CSX', 'CSX Corporation', 'US'],
-  ['CMI', 'Cummins', 'US'],
-  ['CVS', 'CVS Health', 'US'],
-  ['DHR', 'Danaher Corporation', 'US'],
-  ['DRI', 'Darden Restaurants', 'US'],
-  ['DDOG', 'Datadog', 'US'],
-  ['DVA', 'DaVita', 'US'],
-  ['DECK', 'Deckers Brands', 'US'],
-  ['DE', 'Deere & Company', 'US'],
-  ['DELL', 'Dell Technologies', 'US'],
-  ['DAL', 'Delta Air Lines', 'US'],
-  ['DVN', 'Devon Energy', 'US'],
-  ['DXCM', 'Dexcom', 'US'],
-  ['FANG', 'Diamondback Energy', 'US'],
-  ['DLR', 'Digital Realty', 'US'],
-  ['DG', 'Dollar General', 'US'],
-  ['DLTR', 'Dollar Tree', 'US'],
-  ['D', 'Dominion Energy', 'US'],
-  ['DPZ', "Domino's", 'US'],
-  ['DASH', 'DoorDash', 'US'],
-  ['DOV', 'Dover Corporation', 'US'],
-  ['DOW', 'Dow Inc.', 'US'],
-  ['DHI', 'D. R. Horton', 'US'],
-  ['DTE', 'DTE Energy', 'US'],
-  ['DUK', 'Duke Energy', 'US'],
-  ['DD', 'DuPont', 'US'],
-  ['ETN', 'Eaton Corporation', 'US'],
-  ['EBAY', 'eBay Inc.', 'US'],
-  ['ECHO', 'EchoStar', 'US'],
-  ['ECL', 'Ecolab', 'US'],
-  ['EIX', 'Edison International', 'US'],
-  ['EW', 'Edwards Lifesciences', 'US'],
-  ['ELV', 'Elevance Health', 'US'],
-  ['EME', 'Emcor', 'US'],
-  ['EMR', 'Emerson Electric', 'US'],
-  ['ETR', 'Entergy', 'US'],
-  ['EOG', 'EOG Resources', 'US'],
-  ['EQT', 'EQT Corporation', 'US'],
-  ['EFX', 'Equifax', 'US'],
-  ['EQIX', 'Equinix', 'US'],
-  ['EQR', 'Equity Residential', 'US'],
-  ['ERIE', 'Erie Indemnity', 'US'],
-  ['ESS', 'Essex Property Trust', 'US'],
-  ['EL', 'Estée Lauder Companies (The)', 'US'],
-  ['EG', 'Everest Group', 'US'],
-  ['EVRG', 'Evergy', 'US'],
-  ['ES', 'Eversource Energy', 'US'],
-  ['EXC', 'Exelon', 'US'],
-  ['EXE', 'Expand Energy', 'US'],
-  ['EXPE', 'Expedia Group', 'US'],
-  ['EXPD', 'Expeditors International', 'US'],
-  ['EXR', 'Extra Space Storage', 'US'],
-  ['XOM', 'ExxonMobil', 'US'],
-  ['FFIV', 'F5, Inc.', 'US'],
-  ['FDS', 'FactSet', 'US'],
-  ['FICO', 'Fair Isaac', 'US'],
-  ['FAST', 'Fastenal', 'US'],
-  ['FRT', 'Federal Realty Investment Trust', 'US'],
-  ['FDX', 'FedEx', 'US'],
-  ['FDXF', 'FedEx Freight', 'US'],
-  ['FERG', 'Ferguson Enterprises', 'US'],
-  ['FIS', 'Fidelity National Information Services', 'US'],
-  ['FITB', 'Fifth Third Bancorp', 'US'],
-  ['FSLR', 'First Solar', 'US'],
-  ['FE', 'FirstEnergy', 'US'],
-  ['FISV', 'Fiserv', 'US'],
-  ['FLEX', 'Flex Ltd.', 'US'],
-  ['F', 'Ford Motor Company', 'US'],
-  ['FTNT', 'Fortinet', 'US'],
-  ['FTV', 'Fortive', 'US'],
-  ['FOXA', 'Fox Corporation (Class A)', 'US'],
-  ['FOX', 'Fox Corporation (Class B)', 'US'],
-  ['BEN', 'Franklin Resources', 'US'],
-  ['FCX', 'Freeport-McMoRan', 'US'],
-  ['GRMN', 'Garmin', 'US'],
-  ['IT', 'Gartner', 'US'],
-  ['GE', 'GE Aerospace', 'US'],
-  ['GEHC', 'GE HealthCare', 'US'],
-  ['GEV', 'GE Vernova', 'US'],
-  ['GEN', 'Gen Digital', 'US'],
-  ['GNRC', 'Generac', 'US'],
-  ['GD', 'General Dynamics', 'US'],
-  ['GIS', 'General Mills', 'US'],
-  ['GM', 'General Motors', 'US'],
-  ['GPC', 'Genuine Parts Company', 'US'],
-  ['GILD', 'Gilead Sciences', 'US'],
-  ['GPN', 'Global Payments', 'US'],
-  ['GL', 'Globe Life', 'US'],
-  ['GDDY', 'GoDaddy', 'US'],
-  ['GS', 'Goldman Sachs', 'US'],
-  ['HAL', 'Halliburton', 'US'],
-  ['HIG', 'Hartford (The)', 'US'],
-  ['HAS', 'Hasbro', 'US'],
-  ['HCA', 'HCA Healthcare', 'US'],
-  ['DOC', 'Healthpeak Properties', 'US'],
-  ['HSIC', 'Henry Schein', 'US'],
-  ['HSY', 'Hershey Company (The)', 'US'],
-  ['HPE', 'Hewlett Packard Enterprise', 'US'],
-  ['HLT', 'Hilton Worldwide', 'US'],
-  ['HD', 'Home Depot (The)', 'US'],
-  ['HONA', 'Honeywell Aerospace', 'US'],
-  ['HON', 'Honeywell Technologies', 'US'],
-  ['HRL', 'Hormel Foods', 'US'],
-  ['HST', 'Host Hotels & Resorts', 'US'],
-  ['HWM', 'Howmet Aerospace', 'US'],
-  ['HPQ', 'HP Inc.', 'US'],
-  ['HUBB', 'Hubbell Incorporated', 'US'],
-  ['HUM', 'Humana', 'US'],
-  ['HBAN', 'Huntington Bancshares', 'US'],
-  ['HII', 'Huntington Ingalls Industries', 'US'],
-  ['IBM', 'IBM', 'US'],
-  ['IEX', 'IDEX Corporation', 'US'],
-  ['IDXX', 'Idexx Laboratories', 'US'],
-  ['ITW', 'Illinois Tool Works', 'US'],
-  ['INCY', 'Incyte', 'US'],
-  ['IR', 'Ingersoll Rand', 'US'],
-  ['PODD', 'Insulet Corporation', 'US'],
-  ['INTC', 'Intel', 'US'],
-  ['IBKR', 'Interactive Brokers', 'US'],
-  ['ICE', 'Intercontinental Exchange', 'US'],
-  ['IFF', 'International Flavors & Fragrances', 'US'],
-  ['IP', 'International Paper', 'US'],
-  ['INTU', 'Intuit', 'US'],
-  ['ISRG', 'Intuitive Surgical', 'US'],
-  ['IVZ', 'Invesco', 'US'],
-  ['INVH', 'Invitation Homes', 'US'],
-  ['IQV', 'IQVIA', 'US'],
-  ['IRM', 'Iron Mountain', 'US'],
-  ['JBHT', 'J.B. Hunt', 'US'],
-  ['JBL', 'Jabil', 'US'],
-  ['JKHY', 'Jack Henry & Associates', 'US'],
-  ['J', 'Jacobs Solutions', 'US'],
-  ['JNJ', 'Johnson & Johnson', 'US'],
-  ['JCI', 'Johnson Controls', 'US'],
-  ['JPM', 'JPMorgan Chase', 'US'],
-  ['KVUE', 'Kenvue', 'US'],
-  ['KDP', 'Keurig Dr Pepper', 'US'],
-  ['KEY', 'KeyCorp', 'US'],
-  ['KEYS', 'Keysight Technologies', 'US'],
-  ['KMB', 'Kimberly-Clark', 'US'],
-  ['KIM', 'Kimco Realty', 'US'],
-  ['KMI', 'Kinder Morgan', 'US'],
-  ['KKR', 'KKR & Co.', 'US'],
-  ['KLAC', 'KLA Corporation', 'US'],
-  ['KHC', 'Kraft Heinz', 'US'],
-  ['KR', 'Kroger', 'US'],
-  ['LHX', 'L3Harris', 'US'],
-  ['LH', 'Labcorp', 'US'],
-  ['LRCX', 'Lam Research', 'US'],
-  ['LVS', 'Las Vegas Sands', 'US'],
-  ['LDOS', 'Leidos', 'US'],
-  ['LEN', 'Lennar', 'US'],
-  ['LII', 'Lennox International', 'US'],
-  ['LLY', 'Lilly (Eli)', 'US'],
-  ['LIN', 'Linde plc', 'US'],
-  ['LYV', 'Live Nation Entertainment', 'US'],
-  ['LMT', 'Lockheed Martin', 'US'],
-  ['L', 'Loews Corporation', 'US'],
-  ['LOW', "Lowe's", 'US'],
-  ['LULU', 'Lululemon Athletica', 'US'],
-  ['LITE', 'Lumentum', 'US'],
-  ['LYB', 'LyondellBasell', 'US'],
-  ['MTB', 'M&T Bank', 'US'],
-  ['MPC', 'Marathon Petroleum', 'US'],
-  ['MAR', 'Marriott International', 'US'],
-  ['MRSH', 'Marsh McLennan', 'US'],
-  ['MLM', 'Martin Marietta Materials', 'US'],
-  ['MRVL', 'Marvell Technology', 'US'],
-  ['MAS', 'Masco', 'US'],
-  ['MA', 'Mastercard', 'US'],
-  ['MKC', 'McCormick & Company', 'US'],
-  ['MCD', "McDonald's", 'US'],
-  ['MCK', 'McKesson Corporation', 'US'],
-  ['MDT', 'Medtronic', 'US'],
-  ['MRK', 'Merck & Co.', 'US'],
-  ['META', 'Meta Platforms', 'US'],
-  ['MET', 'MetLife', 'US'],
-  ['MTD', 'Mettler Toledo', 'US'],
-  ['MGM', 'MGM Resorts', 'US'],
-  ['MCHP', 'Microchip Technology', 'US'],
-  ['MU', 'Micron Technology', 'US'],
-  ['MSFT', 'Microsoft', 'US'],
-  ['MAA', 'Mid-America Apartment Communities', 'US'],
-  ['MRNA', 'Moderna', 'US'],
-  ['TAP', 'Molson Coors Beverage Company', 'US'],
-  ['MDLZ', 'Mondelez International', 'US'],
-  ['MPWR', 'Monolithic Power Systems', 'US'],
-  ['MNST', 'Monster Beverage', 'US'],
-  ['MCO', "Moody's Corporation", 'US'],
-  ['MS', 'Morgan Stanley', 'US'],
-  ['MOS', 'Mosaic Company (The)', 'US'],
-  ['MSI', 'Motorola Solutions', 'US'],
-  ['MSCI', 'MSCI', 'US'],
-  ['NDAQ', 'Nasdaq, Inc.', 'US'],
-  ['NTAP', 'NetApp', 'US'],
-  ['NFLX', 'Netflix', 'US'],
-  ['NEM', 'Newmont', 'US'],
-  ['NWSA', 'News Corp (Class A)', 'US'],
-  ['NWS', 'News Corp (Class B)', 'US'],
-  ['NEE', 'NextEra Energy', 'US'],
-  ['NKE', 'Nike, Inc.', 'US'],
-  ['NI', 'NiSource', 'US'],
-  ['NDSN', 'Nordson Corporation', 'US'],
-  ['NSC', 'Norfolk Southern', 'US'],
-  ['NTRS', 'Northern Trust', 'US'],
-  ['NOC', 'Northrop Grumman', 'US'],
-  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
-  ['NRG', 'NRG Energy', 'US'],
-  ['NUE', 'Nucor', 'US'],
-  ['NVDA', 'Nvidia', 'US'],
-  ['NVR', 'NVR, Inc.', 'US'],
-  ['NXPI', 'NXP Semiconductors', 'US'],
-  ['ORLY', "O'Reilly Automotive", 'US'],
-  ['OXY', 'Occidental Petroleum', 'US'],
-  ['ODFL', 'Old Dominion', 'US'],
-  ['OMC', 'Omnicom Group', 'US'],
-  ['ON', 'ON Semiconductor', 'US'],
-  ['OKE', 'Oneok', 'US'],
-  ['ORCL', 'Oracle Corporation', 'US'],
-  ['OTIS', 'Otis Worldwide', 'US'],
-  ['PCAR', 'Paccar', 'US'],
-  ['PKG', 'Packaging Corporation of America', 'US'],
-  ['PLTR', 'Palantir Technologies', 'US'],
-  ['PANW', 'Palo Alto Networks', 'US'],
-  ['PSKY', 'Paramount Skydance Corporation', 'US'],
-  ['PH', 'Parker Hannifin', 'US'],
-  ['PAYX', 'Paychex', 'US'],
-  ['PYPL', 'PayPal', 'US'],
-  ['PNR', 'Pentair', 'US'],
-  ['PEP', 'PepsiCo', 'US'],
-  ['PFE', 'Pfizer', 'US'],
-  ['PCG', 'PG&E Corporation', 'US'],
-  ['PM', 'Philip Morris International', 'US'],
-  ['PSX', 'Phillips 66', 'US'],
-  ['PNW', 'Pinnacle West Capital', 'US'],
-  ['PNC', 'PNC Financial Services', 'US'],
-  ['PPG', 'PPG Industries', 'US'],
-  ['PPL', 'PPL Corporation', 'US'],
-  ['PFG', 'Principal Financial Group', 'US'],
-  ['PG', 'Procter & Gamble', 'US'],
-  ['PGR', 'Progressive Corporation', 'US'],
-  ['PLD', 'Prologis', 'US'],
-  ['PRU', 'Prudential Financial', 'US'],
-  ['PEG', 'Public Service Enterprise Group', 'US'],
-  ['PTC', 'PTC Inc.', 'US'],
-  ['PSA', 'Public Storage', 'US'],
-  ['PHM', 'PulteGroup', 'US'],
-  ['PWR', 'Quanta Services', 'US'],
-  ['QCOM', 'Qualcomm', 'US'],
-  ['DGX', 'Quest Diagnostics', 'US'],
-  ['Q', 'Qnity Electronics', 'US'],
-  ['RL', 'Ralph Lauren Corporation', 'US'],
-  ['RJF', 'Raymond James Financial', 'US'],
-  ['RTX', 'RTX Corporation', 'US'],
-  ['O', 'Realty Income', 'US'],
-  ['REG', 'Regency Centers', 'US'],
-  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
-  ['RF', 'Regions Financial Corporation', 'US'],
-  ['RSG', 'Republic Services', 'US'],
-  ['RMD', 'ResMed|', 'US'],
-  ['RVTY', 'Revvity', 'US'],
-  ['HOOD', 'Robinhood Markets', 'US'],
-  ['ROK', 'Rockwell Automation', 'US'],
-  ['ROL', 'Rollins, Inc.', 'US'],
-  ['ROP', 'Roper Technologies', 'US'],
-  ['ROST', 'Ross Stores', 'US'],
-  ['RCL', 'Royal Caribbean Group', 'US'],
-  ['SPGI', 'S&P Global', 'US'],
-  ['CRM', 'Salesforce', 'US'],
-  ['SNDK', 'Sandisk', 'US'],
-  ['SBAC', 'SBA Communications', 'US'],
-  ['SLB', 'Schlumberger', 'US'],
-  ['STX', 'Seagate Technology', 'US'],
-  ['SRE', 'Sempra', 'US'],
-  ['NOW', 'ServiceNow', 'US'],
-  ['SHW', 'Sherwin-Williams', 'US'],
-  ['SPG', 'Simon Property Group', 'US'],
-  ['SWKS', 'Skyworks Solutions', 'US'],
-  ['SJM', 'J.M. Smucker Company (The)', 'US'],
-  ['SW', 'Smurfit Westrock', 'US'],
-  ['SNA', 'Snap-on', 'US'],
-  ['SOLV', 'Solventum', 'US'],
-  ['SO', 'Southern Company', 'US'],
-  ['LUV', 'Southwest Airlines', 'US'],
-  ['SWK', 'Stanley Black & Decker', 'US'],
-  ['SBUX', 'Starbucks', 'US'],
-  ['STT', 'State Street Corporation', 'US'],
-  ['STLD', 'Steel Dynamics', 'US'],
-  ['STE', 'Steris', 'US'],
-  ['SYK', 'Stryker Corporation', 'US'],
-  ['SMCI', 'Supermicro', 'US'],
-  ['SYF', 'Synchrony Financial', 'US'],
-  ['SNPS', 'Synopsys', 'US'],
-  ['SYY', 'Sysco', 'US'],
-  ['TMUS', 'T-Mobile US', 'US'],
-  ['TROW', 'T. Rowe Price', 'US'],
-  ['TTWO', 'Take-Two Interactive', 'US'],
-  ['TPR', 'Tapestry, Inc.', 'US'],
-  ['TRGP', 'Targa Resources', 'US'],
-  ['TGT', 'Target Corporation', 'US'],
-  ['TEL', 'TE Connectivity', 'US'],
-  ['TDY', 'Teledyne Technologies', 'US'],
-  ['TER', 'Teradyne', 'US'],
-  ['TSLA', 'Tesla, Inc.', 'US'],
-  ['TXN', 'Texas Instruments', 'US'],
-  ['TPL', 'Texas Pacific Land Corporation', 'US'],
-  ['TXT', 'Textron', 'US'],
-  ['TMO', 'Thermo Fisher Scientific', 'US'],
-  ['TJX', 'TJX Companies', 'US'],
-  ['TKO', 'TKO Group Holdings', 'US'],
-  ['TTD', 'Trade Desk (The)', 'US'],
-  ['TSCO', 'Tractor Supply', 'US'],
-  ['TT', 'Trane Technologies', 'US'],
-  ['TDG', 'TransDigm Group', 'US'],
-  ['TRV', 'Travelers Companies (The)', 'US'],
-  ['TRMB', 'Trimble Inc.', 'US'],
-  ['TFC', 'Truist Financial', 'US'],
-  ['TYL', 'Tyler Technologies', 'US'],
-  ['TSN', 'Tyson Foods', 'US'],
-  ['USB', 'U.S. Bancorp', 'US'],
-  ['UBER', 'Uber', 'US'],
-  ['UDR', 'UDR, Inc.', 'US'],
-  ['ULTA', 'Ulta Beauty', 'US'],
-  ['UNP', 'Union Pacific Corporation', 'US'],
-  ['UAL', 'United Airlines Holdings', 'US'],
-  ['UPS', 'United Parcel Service', 'US'],
-  ['URI', 'United Rentals', 'US'],
-  ['UNH', 'UnitedHealth Group', 'US'],
-  ['UHS', 'Universal Health Services', 'US'],
-  ['VLO', 'Valero Energy', 'US'],
-  ['VEEV', 'Veeva Systems', 'US'],
-  ['VTR', 'Ventas', 'US'],
-  ['VLTO', 'Veralto', 'US'],
-  ['VRSN', 'Verisign', 'US'],
-  ['VRSK', 'Verisk Analytics', 'US'],
-  ['VZ', 'Verizon', 'US'],
-  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
-  ['VRT', 'Vertiv', 'US'],
-  ['VTRS', 'Viatris', 'US'],
-  ['VICI', 'Vici Properties', 'US'],
-  ['V', 'Visa Inc.', 'US'],
-  ['VST', 'Vistra Corp.', 'US'],
-  ['VMC', 'Vulcan Materials Company', 'US'],
-  ['WRB', 'W. R. Berkley Corporation', 'US'],
-  ['GWW', 'W. W. Grainger', 'US'],
-  ['WAB', 'Wabtec', 'US'],
-  ['WMT', 'Walmart', 'US'],
-  ['DIS', 'Walt Disney Company (The)', 'US'],
-  ['WBD', 'Warner Bros. Discovery', 'US'],
-  ['WM', 'Waste Management', 'US'],
-  ['WAT', 'Waters Corporation', 'US'],
-  ['WEC', 'WEC Energy Group', 'US'],
-  ['WFC', 'Wells Fargo', 'US'],
-  ['WELL', 'Welltower', 'US'],
-  ['WST', 'West Pharmaceutical Services', 'US'],
-  ['WDC', 'Western Digital', 'US'],
-  ['WY', 'Weyerhaeuser', 'US'],
-  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
-  ['WMB', 'Williams Companies', 'US'],
-  ['WTW', 'Willis Towers Watson', 'US'],
-  ['WDAY', 'Workday, Inc.', 'US'],
-  ['WYNN', 'Wynn Resorts', 'US'],
-  ['XEL', 'Xcel Energy', 'US'],
-  ['XYL', 'Xylem Inc.', 'US'],
-  ['YUM', 'Yum! Brands', 'US'],
-  ['ZBRA', 'Zebra Technologies', 'US'],
-  ['ZBH', 'Zimmer Biomet', 'US'],
-  ['ZTS', 'Zoetis', 'US'],
-])
-
-/**
- * Representative liquid international listings used to diversify the fixture.
- * Symbols use their local-market form and the third tuple value is an ISO-style
- * country/market code, rather than a trading currency or exchange MIC.
- *
- * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
- * JPX TOPIX Core30, and HKEX index constituent materials.
- */
-const europeanInstruments = Object.freeze([
-  ['ASML', 'ASML Holding', 'NL'],
-  ['INGA', 'ING Group', 'NL'],
-  ['ADYEN', 'Adyen', 'NL'],
-  ['PHIA', 'Philips', 'NL'],
-  ['HEIA', 'Heineken', 'NL'],
-  ['SAP', 'SAP', 'DE'],
-  ['SIE', 'Siemens', 'DE'],
-  ['ALV', 'Allianz', 'DE'],
-  ['DTE', 'Deutsche Telekom', 'DE'],
-  ['MBG', 'Mercedes-Benz Group', 'DE'],
-  ['BMW', 'BMW', 'DE'],
-  ['BAS', 'BASF', 'DE'],
-  ['MUV2', 'Munich Re', 'DE'],
-  ['VOW3', 'Volkswagen Preference', 'DE'],
-  ['IFX', 'Infineon Technologies', 'DE'],
-  ['MC', 'LVMH', 'FR'],
-  ['OR', "L'Oréal", 'FR'],
-  ['AIR', 'Airbus', 'FR'],
-  ['SU', 'Schneider Electric', 'FR'],
-  ['TTE', 'TotalEnergies', 'FR'],
-  ['SAN', 'Sanofi', 'FR'],
-  ['BNP', 'BNP Paribas', 'FR'],
-  ['CS', 'AXA', 'FR'],
-  ['DG', 'Vinci', 'FR'],
-  ['ENEL', 'Enel', 'IT'],
-  ['ENI', 'Eni', 'IT'],
-  ['ISP', 'Intesa Sanpaolo', 'IT'],
-  ['UCG', 'UniCredit', 'IT'],
-  ['STLAM', 'Stellantis', 'IT'],
-  ['SAN', 'Banco Santander', 'ES'],
-  ['IBE', 'Iberdrola', 'ES'],
-  ['ITX', 'Inditex', 'ES'],
-  ['BBVA', 'BBVA', 'ES'],
-  ['NESN', 'Nestlé', 'CH'],
-  ['ROG', 'Roche Holding', 'CH'],
-  ['NOVN', 'Novartis', 'CH'],
-  ['UBSG', 'UBS Group', 'CH'],
-  ['NOVO-B', 'Novo Nordisk', 'DK'],
-  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
-  ['VOLV-B', 'Volvo', 'SE'],
-  ['ERIC-B', 'Ericsson', 'SE'],
-  ['NOKIA', 'Nokia', 'FI'],
-  ['SHEL', 'Shell', 'GB'],
-  ['AZN', 'AstraZeneca', 'GB'],
-  ['HSBA', 'HSBC Holdings', 'GB'],
-  ['ULVR', 'Unilever', 'GB'],
-  ['LSEG', 'London Stock Exchange Group', 'GB'],
-])
-
-const europeanMarketCodes = Object.freeze([
-  'NL',
-  'DE',
-  'FR',
-  'IT',
-  'ES',
-  'CH',
-  'DK',
-  'SE',
-  'FI',
-  'GB',
-])
-
-const europeanMarketGroups = Object.freeze(
-  europeanMarketCodes.map((market) =>
-    europeanInstruments.filter(([, , instrumentMarket]) =>
-      Object.is(instrumentMarket, market),
-    ),
-  ),
-)
-
-const interleavedEuropeanInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...europeanMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      europeanMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const southKoreanInstruments = Object.freeze([
-  ['005930', 'Samsung Electronics', 'KR'],
-  ['000660', 'SK hynix', 'KR'],
-  ['373220', 'LG Energy Solution', 'KR'],
-  ['207940', 'Samsung Biologics', 'KR'],
-  ['005380', 'Hyundai Motor', 'KR'],
-  ['000270', 'Kia', 'KR'],
-  ['068270', 'Celltrion', 'KR'],
-  ['105560', 'KB Financial Group', 'KR'],
-  ['055550', 'Shinhan Financial Group', 'KR'],
-  ['035420', 'NAVER', 'KR'],
-  ['035720', 'Kakao', 'KR'],
-  ['006400', 'Samsung SDI', 'KR'],
-  ['051910', 'LG Chem', 'KR'],
-  ['012330', 'Hyundai Mobis', 'KR'],
-  ['066570', 'LG Electronics', 'KR'],
-])
-
-const japaneseInstruments = Object.freeze([
-  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
-  ['7203', 'Toyota Motor', 'JP'],
-  ['6501', 'Hitachi', 'JP'],
-  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
-  ['6758', 'Sony Group', 'JP'],
-  ['8058', 'Mitsubishi Corporation', 'JP'],
-  ['9984', 'SoftBank Group', 'JP'],
-  ['8035', 'Tokyo Electron', 'JP'],
-  ['8411', 'Mizuho Financial Group', 'JP'],
-  ['8031', 'Mitsui & Co.', 'JP'],
-  ['6861', 'Keyence', 'JP'],
-  ['7974', 'Nintendo', 'JP'],
-  ['6098', 'Recruit Holdings', 'JP'],
-  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
-  ['4063', 'Shin-Etsu Chemical', 'JP'],
-])
-
-const hongKongInstruments = Object.freeze([
-  ['0700', 'Tencent Holdings', 'HK'],
-  ['9988', 'Alibaba Group', 'HK'],
-  ['1810', 'Xiaomi', 'HK'],
-  ['3690', 'Meituan', 'HK'],
-  ['0941', 'China Mobile', 'HK'],
-  ['1211', 'BYD Company', 'HK'],
-  ['1299', 'AIA Group', 'HK'],
-  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
-  ['0005', 'HSBC Holdings', 'HK'],
-  ['2318', 'Ping An Insurance', 'HK'],
-])
-
-const canadianInstruments = Object.freeze([
-  ['RY', 'Royal Bank of Canada', 'CA'],
-  ['TD', 'Toronto-Dominion Bank', 'CA'],
-  ['SHOP', 'Shopify', 'CA'],
-  ['ENB', 'Enbridge', 'CA'],
-  ['CNR', 'Canadian National Railway', 'CA'],
-  ['CP', 'Canadian Pacific Kansas City', 'CA'],
-  ['BMO', 'Bank of Montreal', 'CA'],
-  ['CSU', 'Constellation Software', 'CA'],
-])
-
-const australianInstruments = Object.freeze([
-  ['BHP', 'BHP Group', 'AU'],
-  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
-  ['CSL', 'CSL', 'AU'],
-  ['NAB', 'National Australia Bank', 'AU'],
-  ['WBC', 'Westpac Banking Corporation', 'AU'],
-  ['ANZ', 'ANZ Group Holdings', 'AU'],
-  ['WES', 'Wesfarmers', 'AU'],
-  ['MQG', 'Macquarie Group', 'AU'],
-])
-
-const internationalMarketGroups = Object.freeze([
-  interleavedEuropeanInstruments,
-  southKoreanInstruments,
-  japaneseInstruments,
-  hongKongInstruments,
-  canadianInstruments,
-  australianInstruments,
-])
-
-export const internationalInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...internationalMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      internationalMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const INTERNATIONAL_INSERTION_INTERVAL = 3
-
-/**
- * U.S. and international instruments are interleaved so ordinary benchmark
- * sizes exercise multiple symbol formats and market labels.
- */
-export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
-    const internationalInstrument =
-      index % INTERNATIONAL_INSERTION_INTERVAL === 0
-        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
-        : undefined
-
-    return internationalInstrument
-      ? [instrument, internationalInstrument]
-      : [instrument]
-  }),
-)
diff --git a/examples/solid/realtime-trading/src/feed/market-instruments.ts b/examples/solid/realtime-trading/src/feed/market-instruments.ts
new file mode 100644
index 0000000000..ac18d14ea9
--- /dev/null
+++ b/examples/solid/realtime-trading/src/feed/market-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const marketInstruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  marketInstruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/solid/realtime-trading/src/feed/sp500-instruments.ts b/examples/solid/realtime-trading/src/feed/sp500-instruments.ts
deleted file mode 100644
index c44eb5d152..0000000000
--- a/examples/solid/realtime-trading/src/feed/sp500-instruments.ts
+++ /dev/null
@@ -1,742 +0,0 @@
-export type MarketCode =
-  | 'US'
-  | 'NL'
-  | 'DE'
-  | 'FR'
-  | 'IT'
-  | 'ES'
-  | 'CH'
-  | 'DK'
-  | 'SE'
-  | 'FI'
-  | 'GB'
-  | 'KR'
-  | 'JP'
-  | 'HK'
-  | 'CA'
-  | 'AU'
-
-export type BaseInstrument = readonly [
-  symbol: string,
-  company: string,
-  market: MarketCode,
-]
-
-/**
- * Current S&P 500 constituent universe used by the realtime trading examples.
- *
- * Source snapshot: https://github.com/datasets/s-and-p-500-companies
- * Retrieved: 2026-08-15.
- * Multiple share classes are intentionally represented as separate instruments.
- */
-export const sp500Instruments = Object.freeze([
-  ['MMM', '3M', 'US'],
-  ['AOS', 'A. O. Smith', 'US'],
-  ['ABT', 'Abbott Laboratories', 'US'],
-  ['ABBV', 'AbbVie', 'US'],
-  ['ACN', 'Accenture', 'US'],
-  ['ADBE', 'Adobe Inc.', 'US'],
-  ['AMD', 'Advanced Micro Devices', 'US'],
-  ['AES', 'AES Corporation', 'US'],
-  ['AFL', 'Aflac', 'US'],
-  ['A', 'Agilent Technologies', 'US'],
-  ['APD', 'Air Products', 'US'],
-  ['ABNB', 'Airbnb', 'US'],
-  ['AKAM', 'Akamai Technologies', 'US'],
-  ['ALB', 'Albemarle Corporation', 'US'],
-  ['ARE', 'Alexandria Real Estate Equities', 'US'],
-  ['ALGN', 'Align Technology', 'US'],
-  ['ALLE', 'Allegion', 'US'],
-  ['LNT', 'Alliant Energy', 'US'],
-  ['ALL', 'Allstate', 'US'],
-  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
-  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
-  ['MO', 'Altria', 'US'],
-  ['AMZN', 'Amazon', 'US'],
-  ['AMCR', 'Amcor', 'US'],
-  ['AEE', 'Ameren', 'US'],
-  ['AEP', 'American Electric Power', 'US'],
-  ['AXP', 'American Express', 'US'],
-  ['AIG', 'American International Group', 'US'],
-  ['AMT', 'American Tower', 'US'],
-  ['AWK', 'American Water Works', 'US'],
-  ['AMP', 'Ameriprise Financial', 'US'],
-  ['AME', 'Ametek', 'US'],
-  ['AMGN', 'Amgen', 'US'],
-  ['APH', 'Amphenol', 'US'],
-  ['ADI', 'Analog Devices', 'US'],
-  ['AON', 'Aon plc', 'US'],
-  ['APA', 'APA Corporation', 'US'],
-  ['APO', 'Apollo Global Management', 'US'],
-  ['AAPL', 'Apple Inc.', 'US'],
-  ['AMAT', 'Applied Materials', 'US'],
-  ['APP', 'AppLovin', 'US'],
-  ['APTV', 'Aptiv', 'US'],
-  ['ACGL', 'Arch Capital Group', 'US'],
-  ['ADM', 'Archer Daniels Midland', 'US'],
-  ['ARES', 'Ares Management', 'US'],
-  ['ANET', 'Arista Networks', 'US'],
-  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
-  ['AIZ', 'Assurant', 'US'],
-  ['T', 'AT&T', 'US'],
-  ['ATO', 'Atmos Energy', 'US'],
-  ['ADSK', 'Autodesk', 'US'],
-  ['ADP', 'Automatic Data Processing', 'US'],
-  ['AZO', 'AutoZone', 'US'],
-  ['AVB', 'AvalonBay Communities', 'US'],
-  ['AVY', 'Avery Dennison', 'US'],
-  ['AXON', 'Axon Enterprise', 'US'],
-  ['BKR', 'Baker Hughes', 'US'],
-  ['BALL', 'Ball Corporation', 'US'],
-  ['BAC', 'Bank of America', 'US'],
-  ['BAX', 'Baxter International', 'US'],
-  ['BDX', 'Becton Dickinson', 'US'],
-  ['BRK.B', 'Berkshire Hathaway', 'US'],
-  ['BBY', 'Best Buy', 'US'],
-  ['TECH', 'Bio-Techne', 'US'],
-  ['BIIB', 'Biogen', 'US'],
-  ['BLK', 'BlackRock', 'US'],
-  ['BX', 'Blackstone Inc.', 'US'],
-  ['XYZ', 'Block, Inc.', 'US'],
-  ['BNY', 'BNY Mellon', 'US'],
-  ['BA', 'Boeing', 'US'],
-  ['BKNG', 'Booking Holdings', 'US'],
-  ['BSX', 'Boston Scientific', 'US'],
-  ['BMY', 'Bristol Myers Squibb', 'US'],
-  ['AVGO', 'Broadcom', 'US'],
-  ['BR', 'Broadridge Financial Solutions', 'US'],
-  ['BRO', 'Brown & Brown', 'US'],
-  ['BF.B', 'Brown–Forman', 'US'],
-  ['BLDR', 'Builders FirstSource', 'US'],
-  ['BG', 'Bunge Global', 'US'],
-  ['BXP', 'BXP, Inc.', 'US'],
-  ['CHRW', 'C.H. Robinson', 'US'],
-  ['CDNS', 'Cadence Design Systems', 'US'],
-  ['CPT', 'Camden Property Trust', 'US'],
-  ['COF', 'Capital One', 'US'],
-  ['CAH', 'Cardinal Health', 'US'],
-  ['CCL', 'Carnival Corporation', 'US'],
-  ['CARR', 'Carrier Global', 'US'],
-  ['CVNA', 'Carvana', 'US'],
-  ['CASY', "Casey's", 'US'],
-  ['CAT', 'Caterpillar Inc.', 'US'],
-  ['CBOE', 'Cboe Global Markets', 'US'],
-  ['CBRE', 'CBRE Group', 'US'],
-  ['CDW', 'CDW Corporation', 'US'],
-  ['COR', 'Cencora', 'US'],
-  ['CNC', 'Centene Corporation', 'US'],
-  ['CNP', 'CenterPoint Energy', 'US'],
-  ['CF', 'CF Industries', 'US'],
-  ['CRL', 'Charles River Laboratories', 'US'],
-  ['SCHW', 'Charles Schwab Corporation', 'US'],
-  ['CHTR', 'Charter Communications', 'US'],
-  ['CVX', 'Chevron Corporation', 'US'],
-  ['CMG', 'Chipotle Mexican Grill', 'US'],
-  ['CB', 'Chubb Limited', 'US'],
-  ['CHD', 'Church & Dwight', 'US'],
-  ['CIEN', 'Ciena', 'US'],
-  ['CI', 'Cigna', 'US'],
-  ['CINF', 'Cincinnati Financial', 'US'],
-  ['CTAS', 'Cintas', 'US'],
-  ['CSCO', 'Cisco', 'US'],
-  ['C', 'Citigroup', 'US'],
-  ['CFG', 'Citizens Financial Group', 'US'],
-  ['CLX', 'Clorox', 'US'],
-  ['CME', 'CME Group', 'US'],
-  ['CMS', 'CMS Energy', 'US'],
-  ['KO', 'Coca-Cola Company (The)', 'US'],
-  ['CTSH', 'Cognizant', 'US'],
-  ['COHR', 'Coherent Corp.', 'US'],
-  ['COIN', 'Coinbase', 'US'],
-  ['CL', 'Colgate-Palmolive', 'US'],
-  ['CMCSA', 'Comcast', 'US'],
-  ['FIX', 'Comfort Systems USA', 'US'],
-  ['COP', 'ConocoPhillips', 'US'],
-  ['ED', 'Consolidated Edison', 'US'],
-  ['STZ', 'Constellation Brands', 'US'],
-  ['CEG', 'Constellation Energy', 'US'],
-  ['COO', 'Cooper Companies (The)', 'US'],
-  ['CPRT', 'Copart', 'US'],
-  ['GLW', 'Corning Inc.', 'US'],
-  ['CPAY', 'Corpay', 'US'],
-  ['CTVA', 'Corteva', 'US'],
-  ['CSGP', 'CoStar Group', 'US'],
-  ['COST', 'Costco', 'US'],
-  ['CRH', 'CRH plc', 'US'],
-  ['CRWD', 'CrowdStrike', 'US'],
-  ['CCI', 'Crown Castle', 'US'],
-  ['CSX', 'CSX Corporation', 'US'],
-  ['CMI', 'Cummins', 'US'],
-  ['CVS', 'CVS Health', 'US'],
-  ['DHR', 'Danaher Corporation', 'US'],
-  ['DRI', 'Darden Restaurants', 'US'],
-  ['DDOG', 'Datadog', 'US'],
-  ['DVA', 'DaVita', 'US'],
-  ['DECK', 'Deckers Brands', 'US'],
-  ['DE', 'Deere & Company', 'US'],
-  ['DELL', 'Dell Technologies', 'US'],
-  ['DAL', 'Delta Air Lines', 'US'],
-  ['DVN', 'Devon Energy', 'US'],
-  ['DXCM', 'Dexcom', 'US'],
-  ['FANG', 'Diamondback Energy', 'US'],
-  ['DLR', 'Digital Realty', 'US'],
-  ['DG', 'Dollar General', 'US'],
-  ['DLTR', 'Dollar Tree', 'US'],
-  ['D', 'Dominion Energy', 'US'],
-  ['DPZ', "Domino's", 'US'],
-  ['DASH', 'DoorDash', 'US'],
-  ['DOV', 'Dover Corporation', 'US'],
-  ['DOW', 'Dow Inc.', 'US'],
-  ['DHI', 'D. R. Horton', 'US'],
-  ['DTE', 'DTE Energy', 'US'],
-  ['DUK', 'Duke Energy', 'US'],
-  ['DD', 'DuPont', 'US'],
-  ['ETN', 'Eaton Corporation', 'US'],
-  ['EBAY', 'eBay Inc.', 'US'],
-  ['ECHO', 'EchoStar', 'US'],
-  ['ECL', 'Ecolab', 'US'],
-  ['EIX', 'Edison International', 'US'],
-  ['EW', 'Edwards Lifesciences', 'US'],
-  ['ELV', 'Elevance Health', 'US'],
-  ['EME', 'Emcor', 'US'],
-  ['EMR', 'Emerson Electric', 'US'],
-  ['ETR', 'Entergy', 'US'],
-  ['EOG', 'EOG Resources', 'US'],
-  ['EQT', 'EQT Corporation', 'US'],
-  ['EFX', 'Equifax', 'US'],
-  ['EQIX', 'Equinix', 'US'],
-  ['EQR', 'Equity Residential', 'US'],
-  ['ERIE', 'Erie Indemnity', 'US'],
-  ['ESS', 'Essex Property Trust', 'US'],
-  ['EL', 'Estée Lauder Companies (The)', 'US'],
-  ['EG', 'Everest Group', 'US'],
-  ['EVRG', 'Evergy', 'US'],
-  ['ES', 'Eversource Energy', 'US'],
-  ['EXC', 'Exelon', 'US'],
-  ['EXE', 'Expand Energy', 'US'],
-  ['EXPE', 'Expedia Group', 'US'],
-  ['EXPD', 'Expeditors International', 'US'],
-  ['EXR', 'Extra Space Storage', 'US'],
-  ['XOM', 'ExxonMobil', 'US'],
-  ['FFIV', 'F5, Inc.', 'US'],
-  ['FDS', 'FactSet', 'US'],
-  ['FICO', 'Fair Isaac', 'US'],
-  ['FAST', 'Fastenal', 'US'],
-  ['FRT', 'Federal Realty Investment Trust', 'US'],
-  ['FDX', 'FedEx', 'US'],
-  ['FDXF', 'FedEx Freight', 'US'],
-  ['FERG', 'Ferguson Enterprises', 'US'],
-  ['FIS', 'Fidelity National Information Services', 'US'],
-  ['FITB', 'Fifth Third Bancorp', 'US'],
-  ['FSLR', 'First Solar', 'US'],
-  ['FE', 'FirstEnergy', 'US'],
-  ['FISV', 'Fiserv', 'US'],
-  ['FLEX', 'Flex Ltd.', 'US'],
-  ['F', 'Ford Motor Company', 'US'],
-  ['FTNT', 'Fortinet', 'US'],
-  ['FTV', 'Fortive', 'US'],
-  ['FOXA', 'Fox Corporation (Class A)', 'US'],
-  ['FOX', 'Fox Corporation (Class B)', 'US'],
-  ['BEN', 'Franklin Resources', 'US'],
-  ['FCX', 'Freeport-McMoRan', 'US'],
-  ['GRMN', 'Garmin', 'US'],
-  ['IT', 'Gartner', 'US'],
-  ['GE', 'GE Aerospace', 'US'],
-  ['GEHC', 'GE HealthCare', 'US'],
-  ['GEV', 'GE Vernova', 'US'],
-  ['GEN', 'Gen Digital', 'US'],
-  ['GNRC', 'Generac', 'US'],
-  ['GD', 'General Dynamics', 'US'],
-  ['GIS', 'General Mills', 'US'],
-  ['GM', 'General Motors', 'US'],
-  ['GPC', 'Genuine Parts Company', 'US'],
-  ['GILD', 'Gilead Sciences', 'US'],
-  ['GPN', 'Global Payments', 'US'],
-  ['GL', 'Globe Life', 'US'],
-  ['GDDY', 'GoDaddy', 'US'],
-  ['GS', 'Goldman Sachs', 'US'],
-  ['HAL', 'Halliburton', 'US'],
-  ['HIG', 'Hartford (The)', 'US'],
-  ['HAS', 'Hasbro', 'US'],
-  ['HCA', 'HCA Healthcare', 'US'],
-  ['DOC', 'Healthpeak Properties', 'US'],
-  ['HSIC', 'Henry Schein', 'US'],
-  ['HSY', 'Hershey Company (The)', 'US'],
-  ['HPE', 'Hewlett Packard Enterprise', 'US'],
-  ['HLT', 'Hilton Worldwide', 'US'],
-  ['HD', 'Home Depot (The)', 'US'],
-  ['HONA', 'Honeywell Aerospace', 'US'],
-  ['HON', 'Honeywell Technologies', 'US'],
-  ['HRL', 'Hormel Foods', 'US'],
-  ['HST', 'Host Hotels & Resorts', 'US'],
-  ['HWM', 'Howmet Aerospace', 'US'],
-  ['HPQ', 'HP Inc.', 'US'],
-  ['HUBB', 'Hubbell Incorporated', 'US'],
-  ['HUM', 'Humana', 'US'],
-  ['HBAN', 'Huntington Bancshares', 'US'],
-  ['HII', 'Huntington Ingalls Industries', 'US'],
-  ['IBM', 'IBM', 'US'],
-  ['IEX', 'IDEX Corporation', 'US'],
-  ['IDXX', 'Idexx Laboratories', 'US'],
-  ['ITW', 'Illinois Tool Works', 'US'],
-  ['INCY', 'Incyte', 'US'],
-  ['IR', 'Ingersoll Rand', 'US'],
-  ['PODD', 'Insulet Corporation', 'US'],
-  ['INTC', 'Intel', 'US'],
-  ['IBKR', 'Interactive Brokers', 'US'],
-  ['ICE', 'Intercontinental Exchange', 'US'],
-  ['IFF', 'International Flavors & Fragrances', 'US'],
-  ['IP', 'International Paper', 'US'],
-  ['INTU', 'Intuit', 'US'],
-  ['ISRG', 'Intuitive Surgical', 'US'],
-  ['IVZ', 'Invesco', 'US'],
-  ['INVH', 'Invitation Homes', 'US'],
-  ['IQV', 'IQVIA', 'US'],
-  ['IRM', 'Iron Mountain', 'US'],
-  ['JBHT', 'J.B. Hunt', 'US'],
-  ['JBL', 'Jabil', 'US'],
-  ['JKHY', 'Jack Henry & Associates', 'US'],
-  ['J', 'Jacobs Solutions', 'US'],
-  ['JNJ', 'Johnson & Johnson', 'US'],
-  ['JCI', 'Johnson Controls', 'US'],
-  ['JPM', 'JPMorgan Chase', 'US'],
-  ['KVUE', 'Kenvue', 'US'],
-  ['KDP', 'Keurig Dr Pepper', 'US'],
-  ['KEY', 'KeyCorp', 'US'],
-  ['KEYS', 'Keysight Technologies', 'US'],
-  ['KMB', 'Kimberly-Clark', 'US'],
-  ['KIM', 'Kimco Realty', 'US'],
-  ['KMI', 'Kinder Morgan', 'US'],
-  ['KKR', 'KKR & Co.', 'US'],
-  ['KLAC', 'KLA Corporation', 'US'],
-  ['KHC', 'Kraft Heinz', 'US'],
-  ['KR', 'Kroger', 'US'],
-  ['LHX', 'L3Harris', 'US'],
-  ['LH', 'Labcorp', 'US'],
-  ['LRCX', 'Lam Research', 'US'],
-  ['LVS', 'Las Vegas Sands', 'US'],
-  ['LDOS', 'Leidos', 'US'],
-  ['LEN', 'Lennar', 'US'],
-  ['LII', 'Lennox International', 'US'],
-  ['LLY', 'Lilly (Eli)', 'US'],
-  ['LIN', 'Linde plc', 'US'],
-  ['LYV', 'Live Nation Entertainment', 'US'],
-  ['LMT', 'Lockheed Martin', 'US'],
-  ['L', 'Loews Corporation', 'US'],
-  ['LOW', "Lowe's", 'US'],
-  ['LULU', 'Lululemon Athletica', 'US'],
-  ['LITE', 'Lumentum', 'US'],
-  ['LYB', 'LyondellBasell', 'US'],
-  ['MTB', 'M&T Bank', 'US'],
-  ['MPC', 'Marathon Petroleum', 'US'],
-  ['MAR', 'Marriott International', 'US'],
-  ['MRSH', 'Marsh McLennan', 'US'],
-  ['MLM', 'Martin Marietta Materials', 'US'],
-  ['MRVL', 'Marvell Technology', 'US'],
-  ['MAS', 'Masco', 'US'],
-  ['MA', 'Mastercard', 'US'],
-  ['MKC', 'McCormick & Company', 'US'],
-  ['MCD', "McDonald's", 'US'],
-  ['MCK', 'McKesson Corporation', 'US'],
-  ['MDT', 'Medtronic', 'US'],
-  ['MRK', 'Merck & Co.', 'US'],
-  ['META', 'Meta Platforms', 'US'],
-  ['MET', 'MetLife', 'US'],
-  ['MTD', 'Mettler Toledo', 'US'],
-  ['MGM', 'MGM Resorts', 'US'],
-  ['MCHP', 'Microchip Technology', 'US'],
-  ['MU', 'Micron Technology', 'US'],
-  ['MSFT', 'Microsoft', 'US'],
-  ['MAA', 'Mid-America Apartment Communities', 'US'],
-  ['MRNA', 'Moderna', 'US'],
-  ['TAP', 'Molson Coors Beverage Company', 'US'],
-  ['MDLZ', 'Mondelez International', 'US'],
-  ['MPWR', 'Monolithic Power Systems', 'US'],
-  ['MNST', 'Monster Beverage', 'US'],
-  ['MCO', "Moody's Corporation", 'US'],
-  ['MS', 'Morgan Stanley', 'US'],
-  ['MOS', 'Mosaic Company (The)', 'US'],
-  ['MSI', 'Motorola Solutions', 'US'],
-  ['MSCI', 'MSCI', 'US'],
-  ['NDAQ', 'Nasdaq, Inc.', 'US'],
-  ['NTAP', 'NetApp', 'US'],
-  ['NFLX', 'Netflix', 'US'],
-  ['NEM', 'Newmont', 'US'],
-  ['NWSA', 'News Corp (Class A)', 'US'],
-  ['NWS', 'News Corp (Class B)', 'US'],
-  ['NEE', 'NextEra Energy', 'US'],
-  ['NKE', 'Nike, Inc.', 'US'],
-  ['NI', 'NiSource', 'US'],
-  ['NDSN', 'Nordson Corporation', 'US'],
-  ['NSC', 'Norfolk Southern', 'US'],
-  ['NTRS', 'Northern Trust', 'US'],
-  ['NOC', 'Northrop Grumman', 'US'],
-  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
-  ['NRG', 'NRG Energy', 'US'],
-  ['NUE', 'Nucor', 'US'],
-  ['NVDA', 'Nvidia', 'US'],
-  ['NVR', 'NVR, Inc.', 'US'],
-  ['NXPI', 'NXP Semiconductors', 'US'],
-  ['ORLY', "O'Reilly Automotive", 'US'],
-  ['OXY', 'Occidental Petroleum', 'US'],
-  ['ODFL', 'Old Dominion', 'US'],
-  ['OMC', 'Omnicom Group', 'US'],
-  ['ON', 'ON Semiconductor', 'US'],
-  ['OKE', 'Oneok', 'US'],
-  ['ORCL', 'Oracle Corporation', 'US'],
-  ['OTIS', 'Otis Worldwide', 'US'],
-  ['PCAR', 'Paccar', 'US'],
-  ['PKG', 'Packaging Corporation of America', 'US'],
-  ['PLTR', 'Palantir Technologies', 'US'],
-  ['PANW', 'Palo Alto Networks', 'US'],
-  ['PSKY', 'Paramount Skydance Corporation', 'US'],
-  ['PH', 'Parker Hannifin', 'US'],
-  ['PAYX', 'Paychex', 'US'],
-  ['PYPL', 'PayPal', 'US'],
-  ['PNR', 'Pentair', 'US'],
-  ['PEP', 'PepsiCo', 'US'],
-  ['PFE', 'Pfizer', 'US'],
-  ['PCG', 'PG&E Corporation', 'US'],
-  ['PM', 'Philip Morris International', 'US'],
-  ['PSX', 'Phillips 66', 'US'],
-  ['PNW', 'Pinnacle West Capital', 'US'],
-  ['PNC', 'PNC Financial Services', 'US'],
-  ['PPG', 'PPG Industries', 'US'],
-  ['PPL', 'PPL Corporation', 'US'],
-  ['PFG', 'Principal Financial Group', 'US'],
-  ['PG', 'Procter & Gamble', 'US'],
-  ['PGR', 'Progressive Corporation', 'US'],
-  ['PLD', 'Prologis', 'US'],
-  ['PRU', 'Prudential Financial', 'US'],
-  ['PEG', 'Public Service Enterprise Group', 'US'],
-  ['PTC', 'PTC Inc.', 'US'],
-  ['PSA', 'Public Storage', 'US'],
-  ['PHM', 'PulteGroup', 'US'],
-  ['PWR', 'Quanta Services', 'US'],
-  ['QCOM', 'Qualcomm', 'US'],
-  ['DGX', 'Quest Diagnostics', 'US'],
-  ['Q', 'Qnity Electronics', 'US'],
-  ['RL', 'Ralph Lauren Corporation', 'US'],
-  ['RJF', 'Raymond James Financial', 'US'],
-  ['RTX', 'RTX Corporation', 'US'],
-  ['O', 'Realty Income', 'US'],
-  ['REG', 'Regency Centers', 'US'],
-  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
-  ['RF', 'Regions Financial Corporation', 'US'],
-  ['RSG', 'Republic Services', 'US'],
-  ['RMD', 'ResMed|', 'US'],
-  ['RVTY', 'Revvity', 'US'],
-  ['HOOD', 'Robinhood Markets', 'US'],
-  ['ROK', 'Rockwell Automation', 'US'],
-  ['ROL', 'Rollins, Inc.', 'US'],
-  ['ROP', 'Roper Technologies', 'US'],
-  ['ROST', 'Ross Stores', 'US'],
-  ['RCL', 'Royal Caribbean Group', 'US'],
-  ['SPGI', 'S&P Global', 'US'],
-  ['CRM', 'Salesforce', 'US'],
-  ['SNDK', 'Sandisk', 'US'],
-  ['SBAC', 'SBA Communications', 'US'],
-  ['SLB', 'Schlumberger', 'US'],
-  ['STX', 'Seagate Technology', 'US'],
-  ['SRE', 'Sempra', 'US'],
-  ['NOW', 'ServiceNow', 'US'],
-  ['SHW', 'Sherwin-Williams', 'US'],
-  ['SPG', 'Simon Property Group', 'US'],
-  ['SWKS', 'Skyworks Solutions', 'US'],
-  ['SJM', 'J.M. Smucker Company (The)', 'US'],
-  ['SW', 'Smurfit Westrock', 'US'],
-  ['SNA', 'Snap-on', 'US'],
-  ['SOLV', 'Solventum', 'US'],
-  ['SO', 'Southern Company', 'US'],
-  ['LUV', 'Southwest Airlines', 'US'],
-  ['SWK', 'Stanley Black & Decker', 'US'],
-  ['SBUX', 'Starbucks', 'US'],
-  ['STT', 'State Street Corporation', 'US'],
-  ['STLD', 'Steel Dynamics', 'US'],
-  ['STE', 'Steris', 'US'],
-  ['SYK', 'Stryker Corporation', 'US'],
-  ['SMCI', 'Supermicro', 'US'],
-  ['SYF', 'Synchrony Financial', 'US'],
-  ['SNPS', 'Synopsys', 'US'],
-  ['SYY', 'Sysco', 'US'],
-  ['TMUS', 'T-Mobile US', 'US'],
-  ['TROW', 'T. Rowe Price', 'US'],
-  ['TTWO', 'Take-Two Interactive', 'US'],
-  ['TPR', 'Tapestry, Inc.', 'US'],
-  ['TRGP', 'Targa Resources', 'US'],
-  ['TGT', 'Target Corporation', 'US'],
-  ['TEL', 'TE Connectivity', 'US'],
-  ['TDY', 'Teledyne Technologies', 'US'],
-  ['TER', 'Teradyne', 'US'],
-  ['TSLA', 'Tesla, Inc.', 'US'],
-  ['TXN', 'Texas Instruments', 'US'],
-  ['TPL', 'Texas Pacific Land Corporation', 'US'],
-  ['TXT', 'Textron', 'US'],
-  ['TMO', 'Thermo Fisher Scientific', 'US'],
-  ['TJX', 'TJX Companies', 'US'],
-  ['TKO', 'TKO Group Holdings', 'US'],
-  ['TTD', 'Trade Desk (The)', 'US'],
-  ['TSCO', 'Tractor Supply', 'US'],
-  ['TT', 'Trane Technologies', 'US'],
-  ['TDG', 'TransDigm Group', 'US'],
-  ['TRV', 'Travelers Companies (The)', 'US'],
-  ['TRMB', 'Trimble Inc.', 'US'],
-  ['TFC', 'Truist Financial', 'US'],
-  ['TYL', 'Tyler Technologies', 'US'],
-  ['TSN', 'Tyson Foods', 'US'],
-  ['USB', 'U.S. Bancorp', 'US'],
-  ['UBER', 'Uber', 'US'],
-  ['UDR', 'UDR, Inc.', 'US'],
-  ['ULTA', 'Ulta Beauty', 'US'],
-  ['UNP', 'Union Pacific Corporation', 'US'],
-  ['UAL', 'United Airlines Holdings', 'US'],
-  ['UPS', 'United Parcel Service', 'US'],
-  ['URI', 'United Rentals', 'US'],
-  ['UNH', 'UnitedHealth Group', 'US'],
-  ['UHS', 'Universal Health Services', 'US'],
-  ['VLO', 'Valero Energy', 'US'],
-  ['VEEV', 'Veeva Systems', 'US'],
-  ['VTR', 'Ventas', 'US'],
-  ['VLTO', 'Veralto', 'US'],
-  ['VRSN', 'Verisign', 'US'],
-  ['VRSK', 'Verisk Analytics', 'US'],
-  ['VZ', 'Verizon', 'US'],
-  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
-  ['VRT', 'Vertiv', 'US'],
-  ['VTRS', 'Viatris', 'US'],
-  ['VICI', 'Vici Properties', 'US'],
-  ['V', 'Visa Inc.', 'US'],
-  ['VST', 'Vistra Corp.', 'US'],
-  ['VMC', 'Vulcan Materials Company', 'US'],
-  ['WRB', 'W. R. Berkley Corporation', 'US'],
-  ['GWW', 'W. W. Grainger', 'US'],
-  ['WAB', 'Wabtec', 'US'],
-  ['WMT', 'Walmart', 'US'],
-  ['DIS', 'Walt Disney Company (The)', 'US'],
-  ['WBD', 'Warner Bros. Discovery', 'US'],
-  ['WM', 'Waste Management', 'US'],
-  ['WAT', 'Waters Corporation', 'US'],
-  ['WEC', 'WEC Energy Group', 'US'],
-  ['WFC', 'Wells Fargo', 'US'],
-  ['WELL', 'Welltower', 'US'],
-  ['WST', 'West Pharmaceutical Services', 'US'],
-  ['WDC', 'Western Digital', 'US'],
-  ['WY', 'Weyerhaeuser', 'US'],
-  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
-  ['WMB', 'Williams Companies', 'US'],
-  ['WTW', 'Willis Towers Watson', 'US'],
-  ['WDAY', 'Workday, Inc.', 'US'],
-  ['WYNN', 'Wynn Resorts', 'US'],
-  ['XEL', 'Xcel Energy', 'US'],
-  ['XYL', 'Xylem Inc.', 'US'],
-  ['YUM', 'Yum! Brands', 'US'],
-  ['ZBRA', 'Zebra Technologies', 'US'],
-  ['ZBH', 'Zimmer Biomet', 'US'],
-  ['ZTS', 'Zoetis', 'US'],
-])
-
-/**
- * Representative liquid international listings used to diversify the fixture.
- * Symbols use their local-market form and the third tuple value is an ISO-style
- * country/market code, rather than a trading currency or exchange MIC.
- *
- * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
- * JPX TOPIX Core30, and HKEX index constituent materials.
- */
-const europeanInstruments = Object.freeze([
-  ['ASML', 'ASML Holding', 'NL'],
-  ['INGA', 'ING Group', 'NL'],
-  ['ADYEN', 'Adyen', 'NL'],
-  ['PHIA', 'Philips', 'NL'],
-  ['HEIA', 'Heineken', 'NL'],
-  ['SAP', 'SAP', 'DE'],
-  ['SIE', 'Siemens', 'DE'],
-  ['ALV', 'Allianz', 'DE'],
-  ['DTE', 'Deutsche Telekom', 'DE'],
-  ['MBG', 'Mercedes-Benz Group', 'DE'],
-  ['BMW', 'BMW', 'DE'],
-  ['BAS', 'BASF', 'DE'],
-  ['MUV2', 'Munich Re', 'DE'],
-  ['VOW3', 'Volkswagen Preference', 'DE'],
-  ['IFX', 'Infineon Technologies', 'DE'],
-  ['MC', 'LVMH', 'FR'],
-  ['OR', "L'Oréal", 'FR'],
-  ['AIR', 'Airbus', 'FR'],
-  ['SU', 'Schneider Electric', 'FR'],
-  ['TTE', 'TotalEnergies', 'FR'],
-  ['SAN', 'Sanofi', 'FR'],
-  ['BNP', 'BNP Paribas', 'FR'],
-  ['CS', 'AXA', 'FR'],
-  ['DG', 'Vinci', 'FR'],
-  ['ENEL', 'Enel', 'IT'],
-  ['ENI', 'Eni', 'IT'],
-  ['ISP', 'Intesa Sanpaolo', 'IT'],
-  ['UCG', 'UniCredit', 'IT'],
-  ['STLAM', 'Stellantis', 'IT'],
-  ['SAN', 'Banco Santander', 'ES'],
-  ['IBE', 'Iberdrola', 'ES'],
-  ['ITX', 'Inditex', 'ES'],
-  ['BBVA', 'BBVA', 'ES'],
-  ['NESN', 'Nestlé', 'CH'],
-  ['ROG', 'Roche Holding', 'CH'],
-  ['NOVN', 'Novartis', 'CH'],
-  ['UBSG', 'UBS Group', 'CH'],
-  ['NOVO-B', 'Novo Nordisk', 'DK'],
-  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
-  ['VOLV-B', 'Volvo', 'SE'],
-  ['ERIC-B', 'Ericsson', 'SE'],
-  ['NOKIA', 'Nokia', 'FI'],
-  ['SHEL', 'Shell', 'GB'],
-  ['AZN', 'AstraZeneca', 'GB'],
-  ['HSBA', 'HSBC Holdings', 'GB'],
-  ['ULVR', 'Unilever', 'GB'],
-  ['LSEG', 'London Stock Exchange Group', 'GB'],
-])
-
-const europeanMarketCodes = Object.freeze([
-  'NL',
-  'DE',
-  'FR',
-  'IT',
-  'ES',
-  'CH',
-  'DK',
-  'SE',
-  'FI',
-  'GB',
-])
-
-const europeanMarketGroups = Object.freeze(
-  europeanMarketCodes.map((market) =>
-    europeanInstruments.filter(([, , instrumentMarket]) =>
-      Object.is(instrumentMarket, market),
-    ),
-  ),
-)
-
-const interleavedEuropeanInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...europeanMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      europeanMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const southKoreanInstruments = Object.freeze([
-  ['005930', 'Samsung Electronics', 'KR'],
-  ['000660', 'SK hynix', 'KR'],
-  ['373220', 'LG Energy Solution', 'KR'],
-  ['207940', 'Samsung Biologics', 'KR'],
-  ['005380', 'Hyundai Motor', 'KR'],
-  ['000270', 'Kia', 'KR'],
-  ['068270', 'Celltrion', 'KR'],
-  ['105560', 'KB Financial Group', 'KR'],
-  ['055550', 'Shinhan Financial Group', 'KR'],
-  ['035420', 'NAVER', 'KR'],
-  ['035720', 'Kakao', 'KR'],
-  ['006400', 'Samsung SDI', 'KR'],
-  ['051910', 'LG Chem', 'KR'],
-  ['012330', 'Hyundai Mobis', 'KR'],
-  ['066570', 'LG Electronics', 'KR'],
-])
-
-const japaneseInstruments = Object.freeze([
-  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
-  ['7203', 'Toyota Motor', 'JP'],
-  ['6501', 'Hitachi', 'JP'],
-  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
-  ['6758', 'Sony Group', 'JP'],
-  ['8058', 'Mitsubishi Corporation', 'JP'],
-  ['9984', 'SoftBank Group', 'JP'],
-  ['8035', 'Tokyo Electron', 'JP'],
-  ['8411', 'Mizuho Financial Group', 'JP'],
-  ['8031', 'Mitsui & Co.', 'JP'],
-  ['6861', 'Keyence', 'JP'],
-  ['7974', 'Nintendo', 'JP'],
-  ['6098', 'Recruit Holdings', 'JP'],
-  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
-  ['4063', 'Shin-Etsu Chemical', 'JP'],
-])
-
-const hongKongInstruments = Object.freeze([
-  ['0700', 'Tencent Holdings', 'HK'],
-  ['9988', 'Alibaba Group', 'HK'],
-  ['1810', 'Xiaomi', 'HK'],
-  ['3690', 'Meituan', 'HK'],
-  ['0941', 'China Mobile', 'HK'],
-  ['1211', 'BYD Company', 'HK'],
-  ['1299', 'AIA Group', 'HK'],
-  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
-  ['0005', 'HSBC Holdings', 'HK'],
-  ['2318', 'Ping An Insurance', 'HK'],
-])
-
-const canadianInstruments = Object.freeze([
-  ['RY', 'Royal Bank of Canada', 'CA'],
-  ['TD', 'Toronto-Dominion Bank', 'CA'],
-  ['SHOP', 'Shopify', 'CA'],
-  ['ENB', 'Enbridge', 'CA'],
-  ['CNR', 'Canadian National Railway', 'CA'],
-  ['CP', 'Canadian Pacific Kansas City', 'CA'],
-  ['BMO', 'Bank of Montreal', 'CA'],
-  ['CSU', 'Constellation Software', 'CA'],
-])
-
-const australianInstruments = Object.freeze([
-  ['BHP', 'BHP Group', 'AU'],
-  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
-  ['CSL', 'CSL', 'AU'],
-  ['NAB', 'National Australia Bank', 'AU'],
-  ['WBC', 'Westpac Banking Corporation', 'AU'],
-  ['ANZ', 'ANZ Group Holdings', 'AU'],
-  ['WES', 'Wesfarmers', 'AU'],
-  ['MQG', 'Macquarie Group', 'AU'],
-])
-
-const internationalMarketGroups = Object.freeze([
-  interleavedEuropeanInstruments,
-  southKoreanInstruments,
-  japaneseInstruments,
-  hongKongInstruments,
-  canadianInstruments,
-  australianInstruments,
-])
-
-export const internationalInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...internationalMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      internationalMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const INTERNATIONAL_INSERTION_INTERVAL = 3
-
-/**
- * U.S. and international instruments are interleaved so ordinary benchmark
- * sizes exercise multiple symbol formats and market labels.
- */
-export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
-    const internationalInstrument =
-      index % INTERNATIONAL_INSERTION_INTERVAL === 0
-        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
-        : undefined
-
-    return internationalInstrument
-      ? [instrument, internationalInstrument]
-      : [instrument]
-  }),
-) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
index 557f7c30a8..fbd9c369c0 100644
--- a/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/solid/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/svelte/realtime-trading/src/feed/market-instruments.ts b/examples/svelte/realtime-trading/src/feed/market-instruments.ts
new file mode 100644
index 0000000000..ac18d14ea9
--- /dev/null
+++ b/examples/svelte/realtime-trading/src/feed/market-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const marketInstruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  marketInstruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/svelte/realtime-trading/src/feed/sp500-instruments.ts b/examples/svelte/realtime-trading/src/feed/sp500-instruments.ts
deleted file mode 100644
index c44eb5d152..0000000000
--- a/examples/svelte/realtime-trading/src/feed/sp500-instruments.ts
+++ /dev/null
@@ -1,742 +0,0 @@
-export type MarketCode =
-  | 'US'
-  | 'NL'
-  | 'DE'
-  | 'FR'
-  | 'IT'
-  | 'ES'
-  | 'CH'
-  | 'DK'
-  | 'SE'
-  | 'FI'
-  | 'GB'
-  | 'KR'
-  | 'JP'
-  | 'HK'
-  | 'CA'
-  | 'AU'
-
-export type BaseInstrument = readonly [
-  symbol: string,
-  company: string,
-  market: MarketCode,
-]
-
-/**
- * Current S&P 500 constituent universe used by the realtime trading examples.
- *
- * Source snapshot: https://github.com/datasets/s-and-p-500-companies
- * Retrieved: 2026-08-15.
- * Multiple share classes are intentionally represented as separate instruments.
- */
-export const sp500Instruments = Object.freeze([
-  ['MMM', '3M', 'US'],
-  ['AOS', 'A. O. Smith', 'US'],
-  ['ABT', 'Abbott Laboratories', 'US'],
-  ['ABBV', 'AbbVie', 'US'],
-  ['ACN', 'Accenture', 'US'],
-  ['ADBE', 'Adobe Inc.', 'US'],
-  ['AMD', 'Advanced Micro Devices', 'US'],
-  ['AES', 'AES Corporation', 'US'],
-  ['AFL', 'Aflac', 'US'],
-  ['A', 'Agilent Technologies', 'US'],
-  ['APD', 'Air Products', 'US'],
-  ['ABNB', 'Airbnb', 'US'],
-  ['AKAM', 'Akamai Technologies', 'US'],
-  ['ALB', 'Albemarle Corporation', 'US'],
-  ['ARE', 'Alexandria Real Estate Equities', 'US'],
-  ['ALGN', 'Align Technology', 'US'],
-  ['ALLE', 'Allegion', 'US'],
-  ['LNT', 'Alliant Energy', 'US'],
-  ['ALL', 'Allstate', 'US'],
-  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
-  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
-  ['MO', 'Altria', 'US'],
-  ['AMZN', 'Amazon', 'US'],
-  ['AMCR', 'Amcor', 'US'],
-  ['AEE', 'Ameren', 'US'],
-  ['AEP', 'American Electric Power', 'US'],
-  ['AXP', 'American Express', 'US'],
-  ['AIG', 'American International Group', 'US'],
-  ['AMT', 'American Tower', 'US'],
-  ['AWK', 'American Water Works', 'US'],
-  ['AMP', 'Ameriprise Financial', 'US'],
-  ['AME', 'Ametek', 'US'],
-  ['AMGN', 'Amgen', 'US'],
-  ['APH', 'Amphenol', 'US'],
-  ['ADI', 'Analog Devices', 'US'],
-  ['AON', 'Aon plc', 'US'],
-  ['APA', 'APA Corporation', 'US'],
-  ['APO', 'Apollo Global Management', 'US'],
-  ['AAPL', 'Apple Inc.', 'US'],
-  ['AMAT', 'Applied Materials', 'US'],
-  ['APP', 'AppLovin', 'US'],
-  ['APTV', 'Aptiv', 'US'],
-  ['ACGL', 'Arch Capital Group', 'US'],
-  ['ADM', 'Archer Daniels Midland', 'US'],
-  ['ARES', 'Ares Management', 'US'],
-  ['ANET', 'Arista Networks', 'US'],
-  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
-  ['AIZ', 'Assurant', 'US'],
-  ['T', 'AT&T', 'US'],
-  ['ATO', 'Atmos Energy', 'US'],
-  ['ADSK', 'Autodesk', 'US'],
-  ['ADP', 'Automatic Data Processing', 'US'],
-  ['AZO', 'AutoZone', 'US'],
-  ['AVB', 'AvalonBay Communities', 'US'],
-  ['AVY', 'Avery Dennison', 'US'],
-  ['AXON', 'Axon Enterprise', 'US'],
-  ['BKR', 'Baker Hughes', 'US'],
-  ['BALL', 'Ball Corporation', 'US'],
-  ['BAC', 'Bank of America', 'US'],
-  ['BAX', 'Baxter International', 'US'],
-  ['BDX', 'Becton Dickinson', 'US'],
-  ['BRK.B', 'Berkshire Hathaway', 'US'],
-  ['BBY', 'Best Buy', 'US'],
-  ['TECH', 'Bio-Techne', 'US'],
-  ['BIIB', 'Biogen', 'US'],
-  ['BLK', 'BlackRock', 'US'],
-  ['BX', 'Blackstone Inc.', 'US'],
-  ['XYZ', 'Block, Inc.', 'US'],
-  ['BNY', 'BNY Mellon', 'US'],
-  ['BA', 'Boeing', 'US'],
-  ['BKNG', 'Booking Holdings', 'US'],
-  ['BSX', 'Boston Scientific', 'US'],
-  ['BMY', 'Bristol Myers Squibb', 'US'],
-  ['AVGO', 'Broadcom', 'US'],
-  ['BR', 'Broadridge Financial Solutions', 'US'],
-  ['BRO', 'Brown & Brown', 'US'],
-  ['BF.B', 'Brown–Forman', 'US'],
-  ['BLDR', 'Builders FirstSource', 'US'],
-  ['BG', 'Bunge Global', 'US'],
-  ['BXP', 'BXP, Inc.', 'US'],
-  ['CHRW', 'C.H. Robinson', 'US'],
-  ['CDNS', 'Cadence Design Systems', 'US'],
-  ['CPT', 'Camden Property Trust', 'US'],
-  ['COF', 'Capital One', 'US'],
-  ['CAH', 'Cardinal Health', 'US'],
-  ['CCL', 'Carnival Corporation', 'US'],
-  ['CARR', 'Carrier Global', 'US'],
-  ['CVNA', 'Carvana', 'US'],
-  ['CASY', "Casey's", 'US'],
-  ['CAT', 'Caterpillar Inc.', 'US'],
-  ['CBOE', 'Cboe Global Markets', 'US'],
-  ['CBRE', 'CBRE Group', 'US'],
-  ['CDW', 'CDW Corporation', 'US'],
-  ['COR', 'Cencora', 'US'],
-  ['CNC', 'Centene Corporation', 'US'],
-  ['CNP', 'CenterPoint Energy', 'US'],
-  ['CF', 'CF Industries', 'US'],
-  ['CRL', 'Charles River Laboratories', 'US'],
-  ['SCHW', 'Charles Schwab Corporation', 'US'],
-  ['CHTR', 'Charter Communications', 'US'],
-  ['CVX', 'Chevron Corporation', 'US'],
-  ['CMG', 'Chipotle Mexican Grill', 'US'],
-  ['CB', 'Chubb Limited', 'US'],
-  ['CHD', 'Church & Dwight', 'US'],
-  ['CIEN', 'Ciena', 'US'],
-  ['CI', 'Cigna', 'US'],
-  ['CINF', 'Cincinnati Financial', 'US'],
-  ['CTAS', 'Cintas', 'US'],
-  ['CSCO', 'Cisco', 'US'],
-  ['C', 'Citigroup', 'US'],
-  ['CFG', 'Citizens Financial Group', 'US'],
-  ['CLX', 'Clorox', 'US'],
-  ['CME', 'CME Group', 'US'],
-  ['CMS', 'CMS Energy', 'US'],
-  ['KO', 'Coca-Cola Company (The)', 'US'],
-  ['CTSH', 'Cognizant', 'US'],
-  ['COHR', 'Coherent Corp.', 'US'],
-  ['COIN', 'Coinbase', 'US'],
-  ['CL', 'Colgate-Palmolive', 'US'],
-  ['CMCSA', 'Comcast', 'US'],
-  ['FIX', 'Comfort Systems USA', 'US'],
-  ['COP', 'ConocoPhillips', 'US'],
-  ['ED', 'Consolidated Edison', 'US'],
-  ['STZ', 'Constellation Brands', 'US'],
-  ['CEG', 'Constellation Energy', 'US'],
-  ['COO', 'Cooper Companies (The)', 'US'],
-  ['CPRT', 'Copart', 'US'],
-  ['GLW', 'Corning Inc.', 'US'],
-  ['CPAY', 'Corpay', 'US'],
-  ['CTVA', 'Corteva', 'US'],
-  ['CSGP', 'CoStar Group', 'US'],
-  ['COST', 'Costco', 'US'],
-  ['CRH', 'CRH plc', 'US'],
-  ['CRWD', 'CrowdStrike', 'US'],
-  ['CCI', 'Crown Castle', 'US'],
-  ['CSX', 'CSX Corporation', 'US'],
-  ['CMI', 'Cummins', 'US'],
-  ['CVS', 'CVS Health', 'US'],
-  ['DHR', 'Danaher Corporation', 'US'],
-  ['DRI', 'Darden Restaurants', 'US'],
-  ['DDOG', 'Datadog', 'US'],
-  ['DVA', 'DaVita', 'US'],
-  ['DECK', 'Deckers Brands', 'US'],
-  ['DE', 'Deere & Company', 'US'],
-  ['DELL', 'Dell Technologies', 'US'],
-  ['DAL', 'Delta Air Lines', 'US'],
-  ['DVN', 'Devon Energy', 'US'],
-  ['DXCM', 'Dexcom', 'US'],
-  ['FANG', 'Diamondback Energy', 'US'],
-  ['DLR', 'Digital Realty', 'US'],
-  ['DG', 'Dollar General', 'US'],
-  ['DLTR', 'Dollar Tree', 'US'],
-  ['D', 'Dominion Energy', 'US'],
-  ['DPZ', "Domino's", 'US'],
-  ['DASH', 'DoorDash', 'US'],
-  ['DOV', 'Dover Corporation', 'US'],
-  ['DOW', 'Dow Inc.', 'US'],
-  ['DHI', 'D. R. Horton', 'US'],
-  ['DTE', 'DTE Energy', 'US'],
-  ['DUK', 'Duke Energy', 'US'],
-  ['DD', 'DuPont', 'US'],
-  ['ETN', 'Eaton Corporation', 'US'],
-  ['EBAY', 'eBay Inc.', 'US'],
-  ['ECHO', 'EchoStar', 'US'],
-  ['ECL', 'Ecolab', 'US'],
-  ['EIX', 'Edison International', 'US'],
-  ['EW', 'Edwards Lifesciences', 'US'],
-  ['ELV', 'Elevance Health', 'US'],
-  ['EME', 'Emcor', 'US'],
-  ['EMR', 'Emerson Electric', 'US'],
-  ['ETR', 'Entergy', 'US'],
-  ['EOG', 'EOG Resources', 'US'],
-  ['EQT', 'EQT Corporation', 'US'],
-  ['EFX', 'Equifax', 'US'],
-  ['EQIX', 'Equinix', 'US'],
-  ['EQR', 'Equity Residential', 'US'],
-  ['ERIE', 'Erie Indemnity', 'US'],
-  ['ESS', 'Essex Property Trust', 'US'],
-  ['EL', 'Estée Lauder Companies (The)', 'US'],
-  ['EG', 'Everest Group', 'US'],
-  ['EVRG', 'Evergy', 'US'],
-  ['ES', 'Eversource Energy', 'US'],
-  ['EXC', 'Exelon', 'US'],
-  ['EXE', 'Expand Energy', 'US'],
-  ['EXPE', 'Expedia Group', 'US'],
-  ['EXPD', 'Expeditors International', 'US'],
-  ['EXR', 'Extra Space Storage', 'US'],
-  ['XOM', 'ExxonMobil', 'US'],
-  ['FFIV', 'F5, Inc.', 'US'],
-  ['FDS', 'FactSet', 'US'],
-  ['FICO', 'Fair Isaac', 'US'],
-  ['FAST', 'Fastenal', 'US'],
-  ['FRT', 'Federal Realty Investment Trust', 'US'],
-  ['FDX', 'FedEx', 'US'],
-  ['FDXF', 'FedEx Freight', 'US'],
-  ['FERG', 'Ferguson Enterprises', 'US'],
-  ['FIS', 'Fidelity National Information Services', 'US'],
-  ['FITB', 'Fifth Third Bancorp', 'US'],
-  ['FSLR', 'First Solar', 'US'],
-  ['FE', 'FirstEnergy', 'US'],
-  ['FISV', 'Fiserv', 'US'],
-  ['FLEX', 'Flex Ltd.', 'US'],
-  ['F', 'Ford Motor Company', 'US'],
-  ['FTNT', 'Fortinet', 'US'],
-  ['FTV', 'Fortive', 'US'],
-  ['FOXA', 'Fox Corporation (Class A)', 'US'],
-  ['FOX', 'Fox Corporation (Class B)', 'US'],
-  ['BEN', 'Franklin Resources', 'US'],
-  ['FCX', 'Freeport-McMoRan', 'US'],
-  ['GRMN', 'Garmin', 'US'],
-  ['IT', 'Gartner', 'US'],
-  ['GE', 'GE Aerospace', 'US'],
-  ['GEHC', 'GE HealthCare', 'US'],
-  ['GEV', 'GE Vernova', 'US'],
-  ['GEN', 'Gen Digital', 'US'],
-  ['GNRC', 'Generac', 'US'],
-  ['GD', 'General Dynamics', 'US'],
-  ['GIS', 'General Mills', 'US'],
-  ['GM', 'General Motors', 'US'],
-  ['GPC', 'Genuine Parts Company', 'US'],
-  ['GILD', 'Gilead Sciences', 'US'],
-  ['GPN', 'Global Payments', 'US'],
-  ['GL', 'Globe Life', 'US'],
-  ['GDDY', 'GoDaddy', 'US'],
-  ['GS', 'Goldman Sachs', 'US'],
-  ['HAL', 'Halliburton', 'US'],
-  ['HIG', 'Hartford (The)', 'US'],
-  ['HAS', 'Hasbro', 'US'],
-  ['HCA', 'HCA Healthcare', 'US'],
-  ['DOC', 'Healthpeak Properties', 'US'],
-  ['HSIC', 'Henry Schein', 'US'],
-  ['HSY', 'Hershey Company (The)', 'US'],
-  ['HPE', 'Hewlett Packard Enterprise', 'US'],
-  ['HLT', 'Hilton Worldwide', 'US'],
-  ['HD', 'Home Depot (The)', 'US'],
-  ['HONA', 'Honeywell Aerospace', 'US'],
-  ['HON', 'Honeywell Technologies', 'US'],
-  ['HRL', 'Hormel Foods', 'US'],
-  ['HST', 'Host Hotels & Resorts', 'US'],
-  ['HWM', 'Howmet Aerospace', 'US'],
-  ['HPQ', 'HP Inc.', 'US'],
-  ['HUBB', 'Hubbell Incorporated', 'US'],
-  ['HUM', 'Humana', 'US'],
-  ['HBAN', 'Huntington Bancshares', 'US'],
-  ['HII', 'Huntington Ingalls Industries', 'US'],
-  ['IBM', 'IBM', 'US'],
-  ['IEX', 'IDEX Corporation', 'US'],
-  ['IDXX', 'Idexx Laboratories', 'US'],
-  ['ITW', 'Illinois Tool Works', 'US'],
-  ['INCY', 'Incyte', 'US'],
-  ['IR', 'Ingersoll Rand', 'US'],
-  ['PODD', 'Insulet Corporation', 'US'],
-  ['INTC', 'Intel', 'US'],
-  ['IBKR', 'Interactive Brokers', 'US'],
-  ['ICE', 'Intercontinental Exchange', 'US'],
-  ['IFF', 'International Flavors & Fragrances', 'US'],
-  ['IP', 'International Paper', 'US'],
-  ['INTU', 'Intuit', 'US'],
-  ['ISRG', 'Intuitive Surgical', 'US'],
-  ['IVZ', 'Invesco', 'US'],
-  ['INVH', 'Invitation Homes', 'US'],
-  ['IQV', 'IQVIA', 'US'],
-  ['IRM', 'Iron Mountain', 'US'],
-  ['JBHT', 'J.B. Hunt', 'US'],
-  ['JBL', 'Jabil', 'US'],
-  ['JKHY', 'Jack Henry & Associates', 'US'],
-  ['J', 'Jacobs Solutions', 'US'],
-  ['JNJ', 'Johnson & Johnson', 'US'],
-  ['JCI', 'Johnson Controls', 'US'],
-  ['JPM', 'JPMorgan Chase', 'US'],
-  ['KVUE', 'Kenvue', 'US'],
-  ['KDP', 'Keurig Dr Pepper', 'US'],
-  ['KEY', 'KeyCorp', 'US'],
-  ['KEYS', 'Keysight Technologies', 'US'],
-  ['KMB', 'Kimberly-Clark', 'US'],
-  ['KIM', 'Kimco Realty', 'US'],
-  ['KMI', 'Kinder Morgan', 'US'],
-  ['KKR', 'KKR & Co.', 'US'],
-  ['KLAC', 'KLA Corporation', 'US'],
-  ['KHC', 'Kraft Heinz', 'US'],
-  ['KR', 'Kroger', 'US'],
-  ['LHX', 'L3Harris', 'US'],
-  ['LH', 'Labcorp', 'US'],
-  ['LRCX', 'Lam Research', 'US'],
-  ['LVS', 'Las Vegas Sands', 'US'],
-  ['LDOS', 'Leidos', 'US'],
-  ['LEN', 'Lennar', 'US'],
-  ['LII', 'Lennox International', 'US'],
-  ['LLY', 'Lilly (Eli)', 'US'],
-  ['LIN', 'Linde plc', 'US'],
-  ['LYV', 'Live Nation Entertainment', 'US'],
-  ['LMT', 'Lockheed Martin', 'US'],
-  ['L', 'Loews Corporation', 'US'],
-  ['LOW', "Lowe's", 'US'],
-  ['LULU', 'Lululemon Athletica', 'US'],
-  ['LITE', 'Lumentum', 'US'],
-  ['LYB', 'LyondellBasell', 'US'],
-  ['MTB', 'M&T Bank', 'US'],
-  ['MPC', 'Marathon Petroleum', 'US'],
-  ['MAR', 'Marriott International', 'US'],
-  ['MRSH', 'Marsh McLennan', 'US'],
-  ['MLM', 'Martin Marietta Materials', 'US'],
-  ['MRVL', 'Marvell Technology', 'US'],
-  ['MAS', 'Masco', 'US'],
-  ['MA', 'Mastercard', 'US'],
-  ['MKC', 'McCormick & Company', 'US'],
-  ['MCD', "McDonald's", 'US'],
-  ['MCK', 'McKesson Corporation', 'US'],
-  ['MDT', 'Medtronic', 'US'],
-  ['MRK', 'Merck & Co.', 'US'],
-  ['META', 'Meta Platforms', 'US'],
-  ['MET', 'MetLife', 'US'],
-  ['MTD', 'Mettler Toledo', 'US'],
-  ['MGM', 'MGM Resorts', 'US'],
-  ['MCHP', 'Microchip Technology', 'US'],
-  ['MU', 'Micron Technology', 'US'],
-  ['MSFT', 'Microsoft', 'US'],
-  ['MAA', 'Mid-America Apartment Communities', 'US'],
-  ['MRNA', 'Moderna', 'US'],
-  ['TAP', 'Molson Coors Beverage Company', 'US'],
-  ['MDLZ', 'Mondelez International', 'US'],
-  ['MPWR', 'Monolithic Power Systems', 'US'],
-  ['MNST', 'Monster Beverage', 'US'],
-  ['MCO', "Moody's Corporation", 'US'],
-  ['MS', 'Morgan Stanley', 'US'],
-  ['MOS', 'Mosaic Company (The)', 'US'],
-  ['MSI', 'Motorola Solutions', 'US'],
-  ['MSCI', 'MSCI', 'US'],
-  ['NDAQ', 'Nasdaq, Inc.', 'US'],
-  ['NTAP', 'NetApp', 'US'],
-  ['NFLX', 'Netflix', 'US'],
-  ['NEM', 'Newmont', 'US'],
-  ['NWSA', 'News Corp (Class A)', 'US'],
-  ['NWS', 'News Corp (Class B)', 'US'],
-  ['NEE', 'NextEra Energy', 'US'],
-  ['NKE', 'Nike, Inc.', 'US'],
-  ['NI', 'NiSource', 'US'],
-  ['NDSN', 'Nordson Corporation', 'US'],
-  ['NSC', 'Norfolk Southern', 'US'],
-  ['NTRS', 'Northern Trust', 'US'],
-  ['NOC', 'Northrop Grumman', 'US'],
-  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
-  ['NRG', 'NRG Energy', 'US'],
-  ['NUE', 'Nucor', 'US'],
-  ['NVDA', 'Nvidia', 'US'],
-  ['NVR', 'NVR, Inc.', 'US'],
-  ['NXPI', 'NXP Semiconductors', 'US'],
-  ['ORLY', "O'Reilly Automotive", 'US'],
-  ['OXY', 'Occidental Petroleum', 'US'],
-  ['ODFL', 'Old Dominion', 'US'],
-  ['OMC', 'Omnicom Group', 'US'],
-  ['ON', 'ON Semiconductor', 'US'],
-  ['OKE', 'Oneok', 'US'],
-  ['ORCL', 'Oracle Corporation', 'US'],
-  ['OTIS', 'Otis Worldwide', 'US'],
-  ['PCAR', 'Paccar', 'US'],
-  ['PKG', 'Packaging Corporation of America', 'US'],
-  ['PLTR', 'Palantir Technologies', 'US'],
-  ['PANW', 'Palo Alto Networks', 'US'],
-  ['PSKY', 'Paramount Skydance Corporation', 'US'],
-  ['PH', 'Parker Hannifin', 'US'],
-  ['PAYX', 'Paychex', 'US'],
-  ['PYPL', 'PayPal', 'US'],
-  ['PNR', 'Pentair', 'US'],
-  ['PEP', 'PepsiCo', 'US'],
-  ['PFE', 'Pfizer', 'US'],
-  ['PCG', 'PG&E Corporation', 'US'],
-  ['PM', 'Philip Morris International', 'US'],
-  ['PSX', 'Phillips 66', 'US'],
-  ['PNW', 'Pinnacle West Capital', 'US'],
-  ['PNC', 'PNC Financial Services', 'US'],
-  ['PPG', 'PPG Industries', 'US'],
-  ['PPL', 'PPL Corporation', 'US'],
-  ['PFG', 'Principal Financial Group', 'US'],
-  ['PG', 'Procter & Gamble', 'US'],
-  ['PGR', 'Progressive Corporation', 'US'],
-  ['PLD', 'Prologis', 'US'],
-  ['PRU', 'Prudential Financial', 'US'],
-  ['PEG', 'Public Service Enterprise Group', 'US'],
-  ['PTC', 'PTC Inc.', 'US'],
-  ['PSA', 'Public Storage', 'US'],
-  ['PHM', 'PulteGroup', 'US'],
-  ['PWR', 'Quanta Services', 'US'],
-  ['QCOM', 'Qualcomm', 'US'],
-  ['DGX', 'Quest Diagnostics', 'US'],
-  ['Q', 'Qnity Electronics', 'US'],
-  ['RL', 'Ralph Lauren Corporation', 'US'],
-  ['RJF', 'Raymond James Financial', 'US'],
-  ['RTX', 'RTX Corporation', 'US'],
-  ['O', 'Realty Income', 'US'],
-  ['REG', 'Regency Centers', 'US'],
-  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
-  ['RF', 'Regions Financial Corporation', 'US'],
-  ['RSG', 'Republic Services', 'US'],
-  ['RMD', 'ResMed|', 'US'],
-  ['RVTY', 'Revvity', 'US'],
-  ['HOOD', 'Robinhood Markets', 'US'],
-  ['ROK', 'Rockwell Automation', 'US'],
-  ['ROL', 'Rollins, Inc.', 'US'],
-  ['ROP', 'Roper Technologies', 'US'],
-  ['ROST', 'Ross Stores', 'US'],
-  ['RCL', 'Royal Caribbean Group', 'US'],
-  ['SPGI', 'S&P Global', 'US'],
-  ['CRM', 'Salesforce', 'US'],
-  ['SNDK', 'Sandisk', 'US'],
-  ['SBAC', 'SBA Communications', 'US'],
-  ['SLB', 'Schlumberger', 'US'],
-  ['STX', 'Seagate Technology', 'US'],
-  ['SRE', 'Sempra', 'US'],
-  ['NOW', 'ServiceNow', 'US'],
-  ['SHW', 'Sherwin-Williams', 'US'],
-  ['SPG', 'Simon Property Group', 'US'],
-  ['SWKS', 'Skyworks Solutions', 'US'],
-  ['SJM', 'J.M. Smucker Company (The)', 'US'],
-  ['SW', 'Smurfit Westrock', 'US'],
-  ['SNA', 'Snap-on', 'US'],
-  ['SOLV', 'Solventum', 'US'],
-  ['SO', 'Southern Company', 'US'],
-  ['LUV', 'Southwest Airlines', 'US'],
-  ['SWK', 'Stanley Black & Decker', 'US'],
-  ['SBUX', 'Starbucks', 'US'],
-  ['STT', 'State Street Corporation', 'US'],
-  ['STLD', 'Steel Dynamics', 'US'],
-  ['STE', 'Steris', 'US'],
-  ['SYK', 'Stryker Corporation', 'US'],
-  ['SMCI', 'Supermicro', 'US'],
-  ['SYF', 'Synchrony Financial', 'US'],
-  ['SNPS', 'Synopsys', 'US'],
-  ['SYY', 'Sysco', 'US'],
-  ['TMUS', 'T-Mobile US', 'US'],
-  ['TROW', 'T. Rowe Price', 'US'],
-  ['TTWO', 'Take-Two Interactive', 'US'],
-  ['TPR', 'Tapestry, Inc.', 'US'],
-  ['TRGP', 'Targa Resources', 'US'],
-  ['TGT', 'Target Corporation', 'US'],
-  ['TEL', 'TE Connectivity', 'US'],
-  ['TDY', 'Teledyne Technologies', 'US'],
-  ['TER', 'Teradyne', 'US'],
-  ['TSLA', 'Tesla, Inc.', 'US'],
-  ['TXN', 'Texas Instruments', 'US'],
-  ['TPL', 'Texas Pacific Land Corporation', 'US'],
-  ['TXT', 'Textron', 'US'],
-  ['TMO', 'Thermo Fisher Scientific', 'US'],
-  ['TJX', 'TJX Companies', 'US'],
-  ['TKO', 'TKO Group Holdings', 'US'],
-  ['TTD', 'Trade Desk (The)', 'US'],
-  ['TSCO', 'Tractor Supply', 'US'],
-  ['TT', 'Trane Technologies', 'US'],
-  ['TDG', 'TransDigm Group', 'US'],
-  ['TRV', 'Travelers Companies (The)', 'US'],
-  ['TRMB', 'Trimble Inc.', 'US'],
-  ['TFC', 'Truist Financial', 'US'],
-  ['TYL', 'Tyler Technologies', 'US'],
-  ['TSN', 'Tyson Foods', 'US'],
-  ['USB', 'U.S. Bancorp', 'US'],
-  ['UBER', 'Uber', 'US'],
-  ['UDR', 'UDR, Inc.', 'US'],
-  ['ULTA', 'Ulta Beauty', 'US'],
-  ['UNP', 'Union Pacific Corporation', 'US'],
-  ['UAL', 'United Airlines Holdings', 'US'],
-  ['UPS', 'United Parcel Service', 'US'],
-  ['URI', 'United Rentals', 'US'],
-  ['UNH', 'UnitedHealth Group', 'US'],
-  ['UHS', 'Universal Health Services', 'US'],
-  ['VLO', 'Valero Energy', 'US'],
-  ['VEEV', 'Veeva Systems', 'US'],
-  ['VTR', 'Ventas', 'US'],
-  ['VLTO', 'Veralto', 'US'],
-  ['VRSN', 'Verisign', 'US'],
-  ['VRSK', 'Verisk Analytics', 'US'],
-  ['VZ', 'Verizon', 'US'],
-  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
-  ['VRT', 'Vertiv', 'US'],
-  ['VTRS', 'Viatris', 'US'],
-  ['VICI', 'Vici Properties', 'US'],
-  ['V', 'Visa Inc.', 'US'],
-  ['VST', 'Vistra Corp.', 'US'],
-  ['VMC', 'Vulcan Materials Company', 'US'],
-  ['WRB', 'W. R. Berkley Corporation', 'US'],
-  ['GWW', 'W. W. Grainger', 'US'],
-  ['WAB', 'Wabtec', 'US'],
-  ['WMT', 'Walmart', 'US'],
-  ['DIS', 'Walt Disney Company (The)', 'US'],
-  ['WBD', 'Warner Bros. Discovery', 'US'],
-  ['WM', 'Waste Management', 'US'],
-  ['WAT', 'Waters Corporation', 'US'],
-  ['WEC', 'WEC Energy Group', 'US'],
-  ['WFC', 'Wells Fargo', 'US'],
-  ['WELL', 'Welltower', 'US'],
-  ['WST', 'West Pharmaceutical Services', 'US'],
-  ['WDC', 'Western Digital', 'US'],
-  ['WY', 'Weyerhaeuser', 'US'],
-  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
-  ['WMB', 'Williams Companies', 'US'],
-  ['WTW', 'Willis Towers Watson', 'US'],
-  ['WDAY', 'Workday, Inc.', 'US'],
-  ['WYNN', 'Wynn Resorts', 'US'],
-  ['XEL', 'Xcel Energy', 'US'],
-  ['XYL', 'Xylem Inc.', 'US'],
-  ['YUM', 'Yum! Brands', 'US'],
-  ['ZBRA', 'Zebra Technologies', 'US'],
-  ['ZBH', 'Zimmer Biomet', 'US'],
-  ['ZTS', 'Zoetis', 'US'],
-])
-
-/**
- * Representative liquid international listings used to diversify the fixture.
- * Symbols use their local-market form and the third tuple value is an ISO-style
- * country/market code, rather than a trading currency or exchange MIC.
- *
- * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
- * JPX TOPIX Core30, and HKEX index constituent materials.
- */
-const europeanInstruments = Object.freeze([
-  ['ASML', 'ASML Holding', 'NL'],
-  ['INGA', 'ING Group', 'NL'],
-  ['ADYEN', 'Adyen', 'NL'],
-  ['PHIA', 'Philips', 'NL'],
-  ['HEIA', 'Heineken', 'NL'],
-  ['SAP', 'SAP', 'DE'],
-  ['SIE', 'Siemens', 'DE'],
-  ['ALV', 'Allianz', 'DE'],
-  ['DTE', 'Deutsche Telekom', 'DE'],
-  ['MBG', 'Mercedes-Benz Group', 'DE'],
-  ['BMW', 'BMW', 'DE'],
-  ['BAS', 'BASF', 'DE'],
-  ['MUV2', 'Munich Re', 'DE'],
-  ['VOW3', 'Volkswagen Preference', 'DE'],
-  ['IFX', 'Infineon Technologies', 'DE'],
-  ['MC', 'LVMH', 'FR'],
-  ['OR', "L'Oréal", 'FR'],
-  ['AIR', 'Airbus', 'FR'],
-  ['SU', 'Schneider Electric', 'FR'],
-  ['TTE', 'TotalEnergies', 'FR'],
-  ['SAN', 'Sanofi', 'FR'],
-  ['BNP', 'BNP Paribas', 'FR'],
-  ['CS', 'AXA', 'FR'],
-  ['DG', 'Vinci', 'FR'],
-  ['ENEL', 'Enel', 'IT'],
-  ['ENI', 'Eni', 'IT'],
-  ['ISP', 'Intesa Sanpaolo', 'IT'],
-  ['UCG', 'UniCredit', 'IT'],
-  ['STLAM', 'Stellantis', 'IT'],
-  ['SAN', 'Banco Santander', 'ES'],
-  ['IBE', 'Iberdrola', 'ES'],
-  ['ITX', 'Inditex', 'ES'],
-  ['BBVA', 'BBVA', 'ES'],
-  ['NESN', 'Nestlé', 'CH'],
-  ['ROG', 'Roche Holding', 'CH'],
-  ['NOVN', 'Novartis', 'CH'],
-  ['UBSG', 'UBS Group', 'CH'],
-  ['NOVO-B', 'Novo Nordisk', 'DK'],
-  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
-  ['VOLV-B', 'Volvo', 'SE'],
-  ['ERIC-B', 'Ericsson', 'SE'],
-  ['NOKIA', 'Nokia', 'FI'],
-  ['SHEL', 'Shell', 'GB'],
-  ['AZN', 'AstraZeneca', 'GB'],
-  ['HSBA', 'HSBC Holdings', 'GB'],
-  ['ULVR', 'Unilever', 'GB'],
-  ['LSEG', 'London Stock Exchange Group', 'GB'],
-])
-
-const europeanMarketCodes = Object.freeze([
-  'NL',
-  'DE',
-  'FR',
-  'IT',
-  'ES',
-  'CH',
-  'DK',
-  'SE',
-  'FI',
-  'GB',
-])
-
-const europeanMarketGroups = Object.freeze(
-  europeanMarketCodes.map((market) =>
-    europeanInstruments.filter(([, , instrumentMarket]) =>
-      Object.is(instrumentMarket, market),
-    ),
-  ),
-)
-
-const interleavedEuropeanInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...europeanMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      europeanMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const southKoreanInstruments = Object.freeze([
-  ['005930', 'Samsung Electronics', 'KR'],
-  ['000660', 'SK hynix', 'KR'],
-  ['373220', 'LG Energy Solution', 'KR'],
-  ['207940', 'Samsung Biologics', 'KR'],
-  ['005380', 'Hyundai Motor', 'KR'],
-  ['000270', 'Kia', 'KR'],
-  ['068270', 'Celltrion', 'KR'],
-  ['105560', 'KB Financial Group', 'KR'],
-  ['055550', 'Shinhan Financial Group', 'KR'],
-  ['035420', 'NAVER', 'KR'],
-  ['035720', 'Kakao', 'KR'],
-  ['006400', 'Samsung SDI', 'KR'],
-  ['051910', 'LG Chem', 'KR'],
-  ['012330', 'Hyundai Mobis', 'KR'],
-  ['066570', 'LG Electronics', 'KR'],
-])
-
-const japaneseInstruments = Object.freeze([
-  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
-  ['7203', 'Toyota Motor', 'JP'],
-  ['6501', 'Hitachi', 'JP'],
-  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
-  ['6758', 'Sony Group', 'JP'],
-  ['8058', 'Mitsubishi Corporation', 'JP'],
-  ['9984', 'SoftBank Group', 'JP'],
-  ['8035', 'Tokyo Electron', 'JP'],
-  ['8411', 'Mizuho Financial Group', 'JP'],
-  ['8031', 'Mitsui & Co.', 'JP'],
-  ['6861', 'Keyence', 'JP'],
-  ['7974', 'Nintendo', 'JP'],
-  ['6098', 'Recruit Holdings', 'JP'],
-  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
-  ['4063', 'Shin-Etsu Chemical', 'JP'],
-])
-
-const hongKongInstruments = Object.freeze([
-  ['0700', 'Tencent Holdings', 'HK'],
-  ['9988', 'Alibaba Group', 'HK'],
-  ['1810', 'Xiaomi', 'HK'],
-  ['3690', 'Meituan', 'HK'],
-  ['0941', 'China Mobile', 'HK'],
-  ['1211', 'BYD Company', 'HK'],
-  ['1299', 'AIA Group', 'HK'],
-  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
-  ['0005', 'HSBC Holdings', 'HK'],
-  ['2318', 'Ping An Insurance', 'HK'],
-])
-
-const canadianInstruments = Object.freeze([
-  ['RY', 'Royal Bank of Canada', 'CA'],
-  ['TD', 'Toronto-Dominion Bank', 'CA'],
-  ['SHOP', 'Shopify', 'CA'],
-  ['ENB', 'Enbridge', 'CA'],
-  ['CNR', 'Canadian National Railway', 'CA'],
-  ['CP', 'Canadian Pacific Kansas City', 'CA'],
-  ['BMO', 'Bank of Montreal', 'CA'],
-  ['CSU', 'Constellation Software', 'CA'],
-])
-
-const australianInstruments = Object.freeze([
-  ['BHP', 'BHP Group', 'AU'],
-  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
-  ['CSL', 'CSL', 'AU'],
-  ['NAB', 'National Australia Bank', 'AU'],
-  ['WBC', 'Westpac Banking Corporation', 'AU'],
-  ['ANZ', 'ANZ Group Holdings', 'AU'],
-  ['WES', 'Wesfarmers', 'AU'],
-  ['MQG', 'Macquarie Group', 'AU'],
-])
-
-const internationalMarketGroups = Object.freeze([
-  interleavedEuropeanInstruments,
-  southKoreanInstruments,
-  japaneseInstruments,
-  hongKongInstruments,
-  canadianInstruments,
-  australianInstruments,
-])
-
-export const internationalInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...internationalMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      internationalMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const INTERNATIONAL_INSERTION_INTERVAL = 3
-
-/**
- * U.S. and international instruments are interleaved so ordinary benchmark
- * sizes exercise multiple symbol formats and market labels.
- */
-export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
-    const internationalInstrument =
-      index % INTERNATIONAL_INSERTION_INTERVAL === 0
-        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
-        : undefined
-
-    return internationalInstrument
-      ? [instrument, internationalInstrument]
-      : [instrument]
-  }),
-) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/svelte/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/svelte/realtime-trading/src/feed/worker/market-feed-engine.ts
index 557f7c30a8..fbd9c369c0 100644
--- a/examples/svelte/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/svelte/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,
diff --git a/examples/vue/realtime-trading/src/feed/market-instruments.ts b/examples/vue/realtime-trading/src/feed/market-instruments.ts
new file mode 100644
index 0000000000..ac18d14ea9
--- /dev/null
+++ b/examples/vue/realtime-trading/src/feed/market-instruments.ts
@@ -0,0 +1,742 @@
+export type MarketCode =
+  | 'US'
+  | 'NL'
+  | 'DE'
+  | 'FR'
+  | 'IT'
+  | 'ES'
+  | 'CH'
+  | 'DK'
+  | 'SE'
+  | 'FI'
+  | 'GB'
+  | 'KR'
+  | 'JP'
+  | 'HK'
+  | 'CA'
+  | 'AU'
+
+export type BaseInstrument = readonly [
+  symbol: string,
+  company: string,
+  market: MarketCode,
+]
+
+/**
+ * Current S&P 500 constituent universe used by the realtime trading examples.
+ *
+ * Source snapshot: https://github.com/datasets/s-and-p-500-companies
+ * Retrieved: 2026-08-15.
+ * Multiple share classes are intentionally represented as separate instruments.
+ */
+export const marketInstruments = Object.freeze([
+  ['MMM', '3M', 'US'],
+  ['AOS', 'A. O. Smith', 'US'],
+  ['ABT', 'Abbott Laboratories', 'US'],
+  ['ABBV', 'AbbVie', 'US'],
+  ['ACN', 'Accenture', 'US'],
+  ['ADBE', 'Adobe Inc.', 'US'],
+  ['AMD', 'Advanced Micro Devices', 'US'],
+  ['AES', 'AES Corporation', 'US'],
+  ['AFL', 'Aflac', 'US'],
+  ['A', 'Agilent Technologies', 'US'],
+  ['APD', 'Air Products', 'US'],
+  ['ABNB', 'Airbnb', 'US'],
+  ['AKAM', 'Akamai Technologies', 'US'],
+  ['ALB', 'Albemarle Corporation', 'US'],
+  ['ARE', 'Alexandria Real Estate Equities', 'US'],
+  ['ALGN', 'Align Technology', 'US'],
+  ['ALLE', 'Allegion', 'US'],
+  ['LNT', 'Alliant Energy', 'US'],
+  ['ALL', 'Allstate', 'US'],
+  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
+  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
+  ['MO', 'Altria', 'US'],
+  ['AMZN', 'Amazon', 'US'],
+  ['AMCR', 'Amcor', 'US'],
+  ['AEE', 'Ameren', 'US'],
+  ['AEP', 'American Electric Power', 'US'],
+  ['AXP', 'American Express', 'US'],
+  ['AIG', 'American International Group', 'US'],
+  ['AMT', 'American Tower', 'US'],
+  ['AWK', 'American Water Works', 'US'],
+  ['AMP', 'Ameriprise Financial', 'US'],
+  ['AME', 'Ametek', 'US'],
+  ['AMGN', 'Amgen', 'US'],
+  ['APH', 'Amphenol', 'US'],
+  ['ADI', 'Analog Devices', 'US'],
+  ['AON', 'Aon plc', 'US'],
+  ['APA', 'APA Corporation', 'US'],
+  ['APO', 'Apollo Global Management', 'US'],
+  ['AAPL', 'Apple Inc.', 'US'],
+  ['AMAT', 'Applied Materials', 'US'],
+  ['APP', 'AppLovin', 'US'],
+  ['APTV', 'Aptiv', 'US'],
+  ['ACGL', 'Arch Capital Group', 'US'],
+  ['ADM', 'Archer Daniels Midland', 'US'],
+  ['ARES', 'Ares Management', 'US'],
+  ['ANET', 'Arista Networks', 'US'],
+  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
+  ['AIZ', 'Assurant', 'US'],
+  ['T', 'AT&T', 'US'],
+  ['ATO', 'Atmos Energy', 'US'],
+  ['ADSK', 'Autodesk', 'US'],
+  ['ADP', 'Automatic Data Processing', 'US'],
+  ['AZO', 'AutoZone', 'US'],
+  ['AVB', 'AvalonBay Communities', 'US'],
+  ['AVY', 'Avery Dennison', 'US'],
+  ['AXON', 'Axon Enterprise', 'US'],
+  ['BKR', 'Baker Hughes', 'US'],
+  ['BALL', 'Ball Corporation', 'US'],
+  ['BAC', 'Bank of America', 'US'],
+  ['BAX', 'Baxter International', 'US'],
+  ['BDX', 'Becton Dickinson', 'US'],
+  ['BRK.B', 'Berkshire Hathaway', 'US'],
+  ['BBY', 'Best Buy', 'US'],
+  ['TECH', 'Bio-Techne', 'US'],
+  ['BIIB', 'Biogen', 'US'],
+  ['BLK', 'BlackRock', 'US'],
+  ['BX', 'Blackstone Inc.', 'US'],
+  ['XYZ', 'Block, Inc.', 'US'],
+  ['BNY', 'BNY Mellon', 'US'],
+  ['BA', 'Boeing', 'US'],
+  ['BKNG', 'Booking Holdings', 'US'],
+  ['BSX', 'Boston Scientific', 'US'],
+  ['BMY', 'Bristol Myers Squibb', 'US'],
+  ['AVGO', 'Broadcom', 'US'],
+  ['BR', 'Broadridge Financial Solutions', 'US'],
+  ['BRO', 'Brown & Brown', 'US'],
+  ['BF.B', 'Brown–Forman', 'US'],
+  ['BLDR', 'Builders FirstSource', 'US'],
+  ['BG', 'Bunge Global', 'US'],
+  ['BXP', 'BXP, Inc.', 'US'],
+  ['CHRW', 'C.H. Robinson', 'US'],
+  ['CDNS', 'Cadence Design Systems', 'US'],
+  ['CPT', 'Camden Property Trust', 'US'],
+  ['COF', 'Capital One', 'US'],
+  ['CAH', 'Cardinal Health', 'US'],
+  ['CCL', 'Carnival Corporation', 'US'],
+  ['CARR', 'Carrier Global', 'US'],
+  ['CVNA', 'Carvana', 'US'],
+  ['CASY', "Casey's", 'US'],
+  ['CAT', 'Caterpillar Inc.', 'US'],
+  ['CBOE', 'Cboe Global Markets', 'US'],
+  ['CBRE', 'CBRE Group', 'US'],
+  ['CDW', 'CDW Corporation', 'US'],
+  ['COR', 'Cencora', 'US'],
+  ['CNC', 'Centene Corporation', 'US'],
+  ['CNP', 'CenterPoint Energy', 'US'],
+  ['CF', 'CF Industries', 'US'],
+  ['CRL', 'Charles River Laboratories', 'US'],
+  ['SCHW', 'Charles Schwab Corporation', 'US'],
+  ['CHTR', 'Charter Communications', 'US'],
+  ['CVX', 'Chevron Corporation', 'US'],
+  ['CMG', 'Chipotle Mexican Grill', 'US'],
+  ['CB', 'Chubb Limited', 'US'],
+  ['CHD', 'Church & Dwight', 'US'],
+  ['CIEN', 'Ciena', 'US'],
+  ['CI', 'Cigna', 'US'],
+  ['CINF', 'Cincinnati Financial', 'US'],
+  ['CTAS', 'Cintas', 'US'],
+  ['CSCO', 'Cisco', 'US'],
+  ['C', 'Citigroup', 'US'],
+  ['CFG', 'Citizens Financial Group', 'US'],
+  ['CLX', 'Clorox', 'US'],
+  ['CME', 'CME Group', 'US'],
+  ['CMS', 'CMS Energy', 'US'],
+  ['KO', 'Coca-Cola Company (The)', 'US'],
+  ['CTSH', 'Cognizant', 'US'],
+  ['COHR', 'Coherent Corp.', 'US'],
+  ['COIN', 'Coinbase', 'US'],
+  ['CL', 'Colgate-Palmolive', 'US'],
+  ['CMCSA', 'Comcast', 'US'],
+  ['FIX', 'Comfort Systems USA', 'US'],
+  ['COP', 'ConocoPhillips', 'US'],
+  ['ED', 'Consolidated Edison', 'US'],
+  ['STZ', 'Constellation Brands', 'US'],
+  ['CEG', 'Constellation Energy', 'US'],
+  ['COO', 'Cooper Companies (The)', 'US'],
+  ['CPRT', 'Copart', 'US'],
+  ['GLW', 'Corning Inc.', 'US'],
+  ['CPAY', 'Corpay', 'US'],
+  ['CTVA', 'Corteva', 'US'],
+  ['CSGP', 'CoStar Group', 'US'],
+  ['COST', 'Costco', 'US'],
+  ['CRH', 'CRH plc', 'US'],
+  ['CRWD', 'CrowdStrike', 'US'],
+  ['CCI', 'Crown Castle', 'US'],
+  ['CSX', 'CSX Corporation', 'US'],
+  ['CMI', 'Cummins', 'US'],
+  ['CVS', 'CVS Health', 'US'],
+  ['DHR', 'Danaher Corporation', 'US'],
+  ['DRI', 'Darden Restaurants', 'US'],
+  ['DDOG', 'Datadog', 'US'],
+  ['DVA', 'DaVita', 'US'],
+  ['DECK', 'Deckers Brands', 'US'],
+  ['DE', 'Deere & Company', 'US'],
+  ['DELL', 'Dell Technologies', 'US'],
+  ['DAL', 'Delta Air Lines', 'US'],
+  ['DVN', 'Devon Energy', 'US'],
+  ['DXCM', 'Dexcom', 'US'],
+  ['FANG', 'Diamondback Energy', 'US'],
+  ['DLR', 'Digital Realty', 'US'],
+  ['DG', 'Dollar General', 'US'],
+  ['DLTR', 'Dollar Tree', 'US'],
+  ['D', 'Dominion Energy', 'US'],
+  ['DPZ', "Domino's", 'US'],
+  ['DASH', 'DoorDash', 'US'],
+  ['DOV', 'Dover Corporation', 'US'],
+  ['DOW', 'Dow Inc.', 'US'],
+  ['DHI', 'D. R. Horton', 'US'],
+  ['DTE', 'DTE Energy', 'US'],
+  ['DUK', 'Duke Energy', 'US'],
+  ['DD', 'DuPont', 'US'],
+  ['ETN', 'Eaton Corporation', 'US'],
+  ['EBAY', 'eBay Inc.', 'US'],
+  ['ECHO', 'EchoStar', 'US'],
+  ['ECL', 'Ecolab', 'US'],
+  ['EIX', 'Edison International', 'US'],
+  ['EW', 'Edwards Lifesciences', 'US'],
+  ['ELV', 'Elevance Health', 'US'],
+  ['EME', 'Emcor', 'US'],
+  ['EMR', 'Emerson Electric', 'US'],
+  ['ETR', 'Entergy', 'US'],
+  ['EOG', 'EOG Resources', 'US'],
+  ['EQT', 'EQT Corporation', 'US'],
+  ['EFX', 'Equifax', 'US'],
+  ['EQIX', 'Equinix', 'US'],
+  ['EQR', 'Equity Residential', 'US'],
+  ['ERIE', 'Erie Indemnity', 'US'],
+  ['ESS', 'Essex Property Trust', 'US'],
+  ['EL', 'Estée Lauder Companies (The)', 'US'],
+  ['EG', 'Everest Group', 'US'],
+  ['EVRG', 'Evergy', 'US'],
+  ['ES', 'Eversource Energy', 'US'],
+  ['EXC', 'Exelon', 'US'],
+  ['EXE', 'Expand Energy', 'US'],
+  ['EXPE', 'Expedia Group', 'US'],
+  ['EXPD', 'Expeditors International', 'US'],
+  ['EXR', 'Extra Space Storage', 'US'],
+  ['XOM', 'ExxonMobil', 'US'],
+  ['FFIV', 'F5, Inc.', 'US'],
+  ['FDS', 'FactSet', 'US'],
+  ['FICO', 'Fair Isaac', 'US'],
+  ['FAST', 'Fastenal', 'US'],
+  ['FRT', 'Federal Realty Investment Trust', 'US'],
+  ['FDX', 'FedEx', 'US'],
+  ['FDXF', 'FedEx Freight', 'US'],
+  ['FERG', 'Ferguson Enterprises', 'US'],
+  ['FIS', 'Fidelity National Information Services', 'US'],
+  ['FITB', 'Fifth Third Bancorp', 'US'],
+  ['FSLR', 'First Solar', 'US'],
+  ['FE', 'FirstEnergy', 'US'],
+  ['FISV', 'Fiserv', 'US'],
+  ['FLEX', 'Flex Ltd.', 'US'],
+  ['F', 'Ford Motor Company', 'US'],
+  ['FTNT', 'Fortinet', 'US'],
+  ['FTV', 'Fortive', 'US'],
+  ['FOXA', 'Fox Corporation (Class A)', 'US'],
+  ['FOX', 'Fox Corporation (Class B)', 'US'],
+  ['BEN', 'Franklin Resources', 'US'],
+  ['FCX', 'Freeport-McMoRan', 'US'],
+  ['GRMN', 'Garmin', 'US'],
+  ['IT', 'Gartner', 'US'],
+  ['GE', 'GE Aerospace', 'US'],
+  ['GEHC', 'GE HealthCare', 'US'],
+  ['GEV', 'GE Vernova', 'US'],
+  ['GEN', 'Gen Digital', 'US'],
+  ['GNRC', 'Generac', 'US'],
+  ['GD', 'General Dynamics', 'US'],
+  ['GIS', 'General Mills', 'US'],
+  ['GM', 'General Motors', 'US'],
+  ['GPC', 'Genuine Parts Company', 'US'],
+  ['GILD', 'Gilead Sciences', 'US'],
+  ['GPN', 'Global Payments', 'US'],
+  ['GL', 'Globe Life', 'US'],
+  ['GDDY', 'GoDaddy', 'US'],
+  ['GS', 'Goldman Sachs', 'US'],
+  ['HAL', 'Halliburton', 'US'],
+  ['HIG', 'Hartford (The)', 'US'],
+  ['HAS', 'Hasbro', 'US'],
+  ['HCA', 'HCA Healthcare', 'US'],
+  ['DOC', 'Healthpeak Properties', 'US'],
+  ['HSIC', 'Henry Schein', 'US'],
+  ['HSY', 'Hershey Company (The)', 'US'],
+  ['HPE', 'Hewlett Packard Enterprise', 'US'],
+  ['HLT', 'Hilton Worldwide', 'US'],
+  ['HD', 'Home Depot (The)', 'US'],
+  ['HONA', 'Honeywell Aerospace', 'US'],
+  ['HON', 'Honeywell Technologies', 'US'],
+  ['HRL', 'Hormel Foods', 'US'],
+  ['HST', 'Host Hotels & Resorts', 'US'],
+  ['HWM', 'Howmet Aerospace', 'US'],
+  ['HPQ', 'HP Inc.', 'US'],
+  ['HUBB', 'Hubbell Incorporated', 'US'],
+  ['HUM', 'Humana', 'US'],
+  ['HBAN', 'Huntington Bancshares', 'US'],
+  ['HII', 'Huntington Ingalls Industries', 'US'],
+  ['IBM', 'IBM', 'US'],
+  ['IEX', 'IDEX Corporation', 'US'],
+  ['IDXX', 'Idexx Laboratories', 'US'],
+  ['ITW', 'Illinois Tool Works', 'US'],
+  ['INCY', 'Incyte', 'US'],
+  ['IR', 'Ingersoll Rand', 'US'],
+  ['PODD', 'Insulet Corporation', 'US'],
+  ['INTC', 'Intel', 'US'],
+  ['IBKR', 'Interactive Brokers', 'US'],
+  ['ICE', 'Intercontinental Exchange', 'US'],
+  ['IFF', 'International Flavors & Fragrances', 'US'],
+  ['IP', 'International Paper', 'US'],
+  ['INTU', 'Intuit', 'US'],
+  ['ISRG', 'Intuitive Surgical', 'US'],
+  ['IVZ', 'Invesco', 'US'],
+  ['INVH', 'Invitation Homes', 'US'],
+  ['IQV', 'IQVIA', 'US'],
+  ['IRM', 'Iron Mountain', 'US'],
+  ['JBHT', 'J.B. Hunt', 'US'],
+  ['JBL', 'Jabil', 'US'],
+  ['JKHY', 'Jack Henry & Associates', 'US'],
+  ['J', 'Jacobs Solutions', 'US'],
+  ['JNJ', 'Johnson & Johnson', 'US'],
+  ['JCI', 'Johnson Controls', 'US'],
+  ['JPM', 'JPMorgan Chase', 'US'],
+  ['KVUE', 'Kenvue', 'US'],
+  ['KDP', 'Keurig Dr Pepper', 'US'],
+  ['KEY', 'KeyCorp', 'US'],
+  ['KEYS', 'Keysight Technologies', 'US'],
+  ['KMB', 'Kimberly-Clark', 'US'],
+  ['KIM', 'Kimco Realty', 'US'],
+  ['KMI', 'Kinder Morgan', 'US'],
+  ['KKR', 'KKR & Co.', 'US'],
+  ['KLAC', 'KLA Corporation', 'US'],
+  ['KHC', 'Kraft Heinz', 'US'],
+  ['KR', 'Kroger', 'US'],
+  ['LHX', 'L3Harris', 'US'],
+  ['LH', 'Labcorp', 'US'],
+  ['LRCX', 'Lam Research', 'US'],
+  ['LVS', 'Las Vegas Sands', 'US'],
+  ['LDOS', 'Leidos', 'US'],
+  ['LEN', 'Lennar', 'US'],
+  ['LII', 'Lennox International', 'US'],
+  ['LLY', 'Lilly (Eli)', 'US'],
+  ['LIN', 'Linde plc', 'US'],
+  ['LYV', 'Live Nation Entertainment', 'US'],
+  ['LMT', 'Lockheed Martin', 'US'],
+  ['L', 'Loews Corporation', 'US'],
+  ['LOW', "Lowe's", 'US'],
+  ['LULU', 'Lululemon Athletica', 'US'],
+  ['LITE', 'Lumentum', 'US'],
+  ['LYB', 'LyondellBasell', 'US'],
+  ['MTB', 'M&T Bank', 'US'],
+  ['MPC', 'Marathon Petroleum', 'US'],
+  ['MAR', 'Marriott International', 'US'],
+  ['MRSH', 'Marsh McLennan', 'US'],
+  ['MLM', 'Martin Marietta Materials', 'US'],
+  ['MRVL', 'Marvell Technology', 'US'],
+  ['MAS', 'Masco', 'US'],
+  ['MA', 'Mastercard', 'US'],
+  ['MKC', 'McCormick & Company', 'US'],
+  ['MCD', "McDonald's", 'US'],
+  ['MCK', 'McKesson Corporation', 'US'],
+  ['MDT', 'Medtronic', 'US'],
+  ['MRK', 'Merck & Co.', 'US'],
+  ['META', 'Meta Platforms', 'US'],
+  ['MET', 'MetLife', 'US'],
+  ['MTD', 'Mettler Toledo', 'US'],
+  ['MGM', 'MGM Resorts', 'US'],
+  ['MCHP', 'Microchip Technology', 'US'],
+  ['MU', 'Micron Technology', 'US'],
+  ['MSFT', 'Microsoft', 'US'],
+  ['MAA', 'Mid-America Apartment Communities', 'US'],
+  ['MRNA', 'Moderna', 'US'],
+  ['TAP', 'Molson Coors Beverage Company', 'US'],
+  ['MDLZ', 'Mondelez International', 'US'],
+  ['MPWR', 'Monolithic Power Systems', 'US'],
+  ['MNST', 'Monster Beverage', 'US'],
+  ['MCO', "Moody's Corporation", 'US'],
+  ['MS', 'Morgan Stanley', 'US'],
+  ['MOS', 'Mosaic Company (The)', 'US'],
+  ['MSI', 'Motorola Solutions', 'US'],
+  ['MSCI', 'MSCI', 'US'],
+  ['NDAQ', 'Nasdaq, Inc.', 'US'],
+  ['NTAP', 'NetApp', 'US'],
+  ['NFLX', 'Netflix', 'US'],
+  ['NEM', 'Newmont', 'US'],
+  ['NWSA', 'News Corp (Class A)', 'US'],
+  ['NWS', 'News Corp (Class B)', 'US'],
+  ['NEE', 'NextEra Energy', 'US'],
+  ['NKE', 'Nike, Inc.', 'US'],
+  ['NI', 'NiSource', 'US'],
+  ['NDSN', 'Nordson Corporation', 'US'],
+  ['NSC', 'Norfolk Southern', 'US'],
+  ['NTRS', 'Northern Trust', 'US'],
+  ['NOC', 'Northrop Grumman', 'US'],
+  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
+  ['NRG', 'NRG Energy', 'US'],
+  ['NUE', 'Nucor', 'US'],
+  ['NVDA', 'Nvidia', 'US'],
+  ['NVR', 'NVR, Inc.', 'US'],
+  ['NXPI', 'NXP Semiconductors', 'US'],
+  ['ORLY', "O'Reilly Automotive", 'US'],
+  ['OXY', 'Occidental Petroleum', 'US'],
+  ['ODFL', 'Old Dominion', 'US'],
+  ['OMC', 'Omnicom Group', 'US'],
+  ['ON', 'ON Semiconductor', 'US'],
+  ['OKE', 'Oneok', 'US'],
+  ['ORCL', 'Oracle Corporation', 'US'],
+  ['OTIS', 'Otis Worldwide', 'US'],
+  ['PCAR', 'Paccar', 'US'],
+  ['PKG', 'Packaging Corporation of America', 'US'],
+  ['PLTR', 'Palantir Technologies', 'US'],
+  ['PANW', 'Palo Alto Networks', 'US'],
+  ['PSKY', 'Paramount Skydance Corporation', 'US'],
+  ['PH', 'Parker Hannifin', 'US'],
+  ['PAYX', 'Paychex', 'US'],
+  ['PYPL', 'PayPal', 'US'],
+  ['PNR', 'Pentair', 'US'],
+  ['PEP', 'PepsiCo', 'US'],
+  ['PFE', 'Pfizer', 'US'],
+  ['PCG', 'PG&E Corporation', 'US'],
+  ['PM', 'Philip Morris International', 'US'],
+  ['PSX', 'Phillips 66', 'US'],
+  ['PNW', 'Pinnacle West Capital', 'US'],
+  ['PNC', 'PNC Financial Services', 'US'],
+  ['PPG', 'PPG Industries', 'US'],
+  ['PPL', 'PPL Corporation', 'US'],
+  ['PFG', 'Principal Financial Group', 'US'],
+  ['PG', 'Procter & Gamble', 'US'],
+  ['PGR', 'Progressive Corporation', 'US'],
+  ['PLD', 'Prologis', 'US'],
+  ['PRU', 'Prudential Financial', 'US'],
+  ['PEG', 'Public Service Enterprise Group', 'US'],
+  ['PTC', 'PTC Inc.', 'US'],
+  ['PSA', 'Public Storage', 'US'],
+  ['PHM', 'PulteGroup', 'US'],
+  ['PWR', 'Quanta Services', 'US'],
+  ['QCOM', 'Qualcomm', 'US'],
+  ['DGX', 'Quest Diagnostics', 'US'],
+  ['Q', 'Qnity Electronics', 'US'],
+  ['RL', 'Ralph Lauren Corporation', 'US'],
+  ['RJF', 'Raymond James Financial', 'US'],
+  ['RTX', 'RTX Corporation', 'US'],
+  ['O', 'Realty Income', 'US'],
+  ['REG', 'Regency Centers', 'US'],
+  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
+  ['RF', 'Regions Financial Corporation', 'US'],
+  ['RSG', 'Republic Services', 'US'],
+  ['RMD', 'ResMed|', 'US'],
+  ['RVTY', 'Revvity', 'US'],
+  ['HOOD', 'Robinhood Markets', 'US'],
+  ['ROK', 'Rockwell Automation', 'US'],
+  ['ROL', 'Rollins, Inc.', 'US'],
+  ['ROP', 'Roper Technologies', 'US'],
+  ['ROST', 'Ross Stores', 'US'],
+  ['RCL', 'Royal Caribbean Group', 'US'],
+  ['SPGI', 'S&P Global', 'US'],
+  ['CRM', 'Salesforce', 'US'],
+  ['SNDK', 'Sandisk', 'US'],
+  ['SBAC', 'SBA Communications', 'US'],
+  ['SLB', 'Schlumberger', 'US'],
+  ['STX', 'Seagate Technology', 'US'],
+  ['SRE', 'Sempra', 'US'],
+  ['NOW', 'ServiceNow', 'US'],
+  ['SHW', 'Sherwin-Williams', 'US'],
+  ['SPG', 'Simon Property Group', 'US'],
+  ['SWKS', 'Skyworks Solutions', 'US'],
+  ['SJM', 'J.M. Smucker Company (The)', 'US'],
+  ['SW', 'Smurfit Westrock', 'US'],
+  ['SNA', 'Snap-on', 'US'],
+  ['SOLV', 'Solventum', 'US'],
+  ['SO', 'Southern Company', 'US'],
+  ['LUV', 'Southwest Airlines', 'US'],
+  ['SWK', 'Stanley Black & Decker', 'US'],
+  ['SBUX', 'Starbucks', 'US'],
+  ['STT', 'State Street Corporation', 'US'],
+  ['STLD', 'Steel Dynamics', 'US'],
+  ['STE', 'Steris', 'US'],
+  ['SYK', 'Stryker Corporation', 'US'],
+  ['SMCI', 'Supermicro', 'US'],
+  ['SYF', 'Synchrony Financial', 'US'],
+  ['SNPS', 'Synopsys', 'US'],
+  ['SYY', 'Sysco', 'US'],
+  ['TMUS', 'T-Mobile US', 'US'],
+  ['TROW', 'T. Rowe Price', 'US'],
+  ['TTWO', 'Take-Two Interactive', 'US'],
+  ['TPR', 'Tapestry, Inc.', 'US'],
+  ['TRGP', 'Targa Resources', 'US'],
+  ['TGT', 'Target Corporation', 'US'],
+  ['TEL', 'TE Connectivity', 'US'],
+  ['TDY', 'Teledyne Technologies', 'US'],
+  ['TER', 'Teradyne', 'US'],
+  ['TSLA', 'Tesla, Inc.', 'US'],
+  ['TXN', 'Texas Instruments', 'US'],
+  ['TPL', 'Texas Pacific Land Corporation', 'US'],
+  ['TXT', 'Textron', 'US'],
+  ['TMO', 'Thermo Fisher Scientific', 'US'],
+  ['TJX', 'TJX Companies', 'US'],
+  ['TKO', 'TKO Group Holdings', 'US'],
+  ['TTD', 'Trade Desk (The)', 'US'],
+  ['TSCO', 'Tractor Supply', 'US'],
+  ['TT', 'Trane Technologies', 'US'],
+  ['TDG', 'TransDigm Group', 'US'],
+  ['TRV', 'Travelers Companies (The)', 'US'],
+  ['TRMB', 'Trimble Inc.', 'US'],
+  ['TFC', 'Truist Financial', 'US'],
+  ['TYL', 'Tyler Technologies', 'US'],
+  ['TSN', 'Tyson Foods', 'US'],
+  ['USB', 'U.S. Bancorp', 'US'],
+  ['UBER', 'Uber', 'US'],
+  ['UDR', 'UDR, Inc.', 'US'],
+  ['ULTA', 'Ulta Beauty', 'US'],
+  ['UNP', 'Union Pacific Corporation', 'US'],
+  ['UAL', 'United Airlines Holdings', 'US'],
+  ['UPS', 'United Parcel Service', 'US'],
+  ['URI', 'United Rentals', 'US'],
+  ['UNH', 'UnitedHealth Group', 'US'],
+  ['UHS', 'Universal Health Services', 'US'],
+  ['VLO', 'Valero Energy', 'US'],
+  ['VEEV', 'Veeva Systems', 'US'],
+  ['VTR', 'Ventas', 'US'],
+  ['VLTO', 'Veralto', 'US'],
+  ['VRSN', 'Verisign', 'US'],
+  ['VRSK', 'Verisk Analytics', 'US'],
+  ['VZ', 'Verizon', 'US'],
+  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
+  ['VRT', 'Vertiv', 'US'],
+  ['VTRS', 'Viatris', 'US'],
+  ['VICI', 'Vici Properties', 'US'],
+  ['V', 'Visa Inc.', 'US'],
+  ['VST', 'Vistra Corp.', 'US'],
+  ['VMC', 'Vulcan Materials Company', 'US'],
+  ['WRB', 'W. R. Berkley Corporation', 'US'],
+  ['GWW', 'W. W. Grainger', 'US'],
+  ['WAB', 'Wabtec', 'US'],
+  ['WMT', 'Walmart', 'US'],
+  ['DIS', 'Walt Disney Company (The)', 'US'],
+  ['WBD', 'Warner Bros. Discovery', 'US'],
+  ['WM', 'Waste Management', 'US'],
+  ['WAT', 'Waters Corporation', 'US'],
+  ['WEC', 'WEC Energy Group', 'US'],
+  ['WFC', 'Wells Fargo', 'US'],
+  ['WELL', 'Welltower', 'US'],
+  ['WST', 'West Pharmaceutical Services', 'US'],
+  ['WDC', 'Western Digital', 'US'],
+  ['WY', 'Weyerhaeuser', 'US'],
+  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
+  ['WMB', 'Williams Companies', 'US'],
+  ['WTW', 'Willis Towers Watson', 'US'],
+  ['WDAY', 'Workday, Inc.', 'US'],
+  ['WYNN', 'Wynn Resorts', 'US'],
+  ['XEL', 'Xcel Energy', 'US'],
+  ['XYL', 'Xylem Inc.', 'US'],
+  ['YUM', 'Yum! Brands', 'US'],
+  ['ZBRA', 'Zebra Technologies', 'US'],
+  ['ZBH', 'Zimmer Biomet', 'US'],
+  ['ZTS', 'Zoetis', 'US'],
+])
+
+/**
+ * Representative liquid international listings used to diversify the fixture.
+ * Symbols use their local-market form and the third tuple value is an ISO-style
+ * country/market code, rather than a trading currency or exchange MIC.
+ *
+ * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
+ * JPX TOPIX Core30, and HKEX index constituent materials.
+ */
+const europeanInstruments = Object.freeze([
+  ['ASML', 'ASML Holding', 'NL'],
+  ['INGA', 'ING Group', 'NL'],
+  ['ADYEN', 'Adyen', 'NL'],
+  ['PHIA', 'Philips', 'NL'],
+  ['HEIA', 'Heineken', 'NL'],
+  ['SAP', 'SAP', 'DE'],
+  ['SIE', 'Siemens', 'DE'],
+  ['ALV', 'Allianz', 'DE'],
+  ['DTE', 'Deutsche Telekom', 'DE'],
+  ['MBG', 'Mercedes-Benz Group', 'DE'],
+  ['BMW', 'BMW', 'DE'],
+  ['BAS', 'BASF', 'DE'],
+  ['MUV2', 'Munich Re', 'DE'],
+  ['VOW3', 'Volkswagen Preference', 'DE'],
+  ['IFX', 'Infineon Technologies', 'DE'],
+  ['MC', 'LVMH', 'FR'],
+  ['OR', "L'Oréal", 'FR'],
+  ['AIR', 'Airbus', 'FR'],
+  ['SU', 'Schneider Electric', 'FR'],
+  ['TTE', 'TotalEnergies', 'FR'],
+  ['SAN', 'Sanofi', 'FR'],
+  ['BNP', 'BNP Paribas', 'FR'],
+  ['CS', 'AXA', 'FR'],
+  ['DG', 'Vinci', 'FR'],
+  ['ENEL', 'Enel', 'IT'],
+  ['ENI', 'Eni', 'IT'],
+  ['ISP', 'Intesa Sanpaolo', 'IT'],
+  ['UCG', 'UniCredit', 'IT'],
+  ['STLAM', 'Stellantis', 'IT'],
+  ['SAN', 'Banco Santander', 'ES'],
+  ['IBE', 'Iberdrola', 'ES'],
+  ['ITX', 'Inditex', 'ES'],
+  ['BBVA', 'BBVA', 'ES'],
+  ['NESN', 'Nestlé', 'CH'],
+  ['ROG', 'Roche Holding', 'CH'],
+  ['NOVN', 'Novartis', 'CH'],
+  ['UBSG', 'UBS Group', 'CH'],
+  ['NOVO-B', 'Novo Nordisk', 'DK'],
+  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
+  ['VOLV-B', 'Volvo', 'SE'],
+  ['ERIC-B', 'Ericsson', 'SE'],
+  ['NOKIA', 'Nokia', 'FI'],
+  ['SHEL', 'Shell', 'GB'],
+  ['AZN', 'AstraZeneca', 'GB'],
+  ['HSBA', 'HSBC Holdings', 'GB'],
+  ['ULVR', 'Unilever', 'GB'],
+  ['LSEG', 'London Stock Exchange Group', 'GB'],
+])
+
+const europeanMarketCodes = Object.freeze([
+  'NL',
+  'DE',
+  'FR',
+  'IT',
+  'ES',
+  'CH',
+  'DK',
+  'SE',
+  'FI',
+  'GB',
+])
+
+const europeanMarketGroups = Object.freeze(
+  europeanMarketCodes.map((market) =>
+    europeanInstruments.filter(([, , instrumentMarket]) =>
+      Object.is(instrumentMarket, market),
+    ),
+  ),
+)
+
+const interleavedEuropeanInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...europeanMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      europeanMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const southKoreanInstruments = Object.freeze([
+  ['005930', 'Samsung Electronics', 'KR'],
+  ['000660', 'SK hynix', 'KR'],
+  ['373220', 'LG Energy Solution', 'KR'],
+  ['207940', 'Samsung Biologics', 'KR'],
+  ['005380', 'Hyundai Motor', 'KR'],
+  ['000270', 'Kia', 'KR'],
+  ['068270', 'Celltrion', 'KR'],
+  ['105560', 'KB Financial Group', 'KR'],
+  ['055550', 'Shinhan Financial Group', 'KR'],
+  ['035420', 'NAVER', 'KR'],
+  ['035720', 'Kakao', 'KR'],
+  ['006400', 'Samsung SDI', 'KR'],
+  ['051910', 'LG Chem', 'KR'],
+  ['012330', 'Hyundai Mobis', 'KR'],
+  ['066570', 'LG Electronics', 'KR'],
+])
+
+const japaneseInstruments = Object.freeze([
+  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
+  ['7203', 'Toyota Motor', 'JP'],
+  ['6501', 'Hitachi', 'JP'],
+  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
+  ['6758', 'Sony Group', 'JP'],
+  ['8058', 'Mitsubishi Corporation', 'JP'],
+  ['9984', 'SoftBank Group', 'JP'],
+  ['8035', 'Tokyo Electron', 'JP'],
+  ['8411', 'Mizuho Financial Group', 'JP'],
+  ['8031', 'Mitsui & Co.', 'JP'],
+  ['6861', 'Keyence', 'JP'],
+  ['7974', 'Nintendo', 'JP'],
+  ['6098', 'Recruit Holdings', 'JP'],
+  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
+  ['4063', 'Shin-Etsu Chemical', 'JP'],
+])
+
+const hongKongInstruments = Object.freeze([
+  ['0700', 'Tencent Holdings', 'HK'],
+  ['9988', 'Alibaba Group', 'HK'],
+  ['1810', 'Xiaomi', 'HK'],
+  ['3690', 'Meituan', 'HK'],
+  ['0941', 'China Mobile', 'HK'],
+  ['1211', 'BYD Company', 'HK'],
+  ['1299', 'AIA Group', 'HK'],
+  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
+  ['0005', 'HSBC Holdings', 'HK'],
+  ['2318', 'Ping An Insurance', 'HK'],
+])
+
+const canadianInstruments = Object.freeze([
+  ['RY', 'Royal Bank of Canada', 'CA'],
+  ['TD', 'Toronto-Dominion Bank', 'CA'],
+  ['SHOP', 'Shopify', 'CA'],
+  ['ENB', 'Enbridge', 'CA'],
+  ['CNR', 'Canadian National Railway', 'CA'],
+  ['CP', 'Canadian Pacific Kansas City', 'CA'],
+  ['BMO', 'Bank of Montreal', 'CA'],
+  ['CSU', 'Constellation Software', 'CA'],
+])
+
+const australianInstruments = Object.freeze([
+  ['BHP', 'BHP Group', 'AU'],
+  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
+  ['CSL', 'CSL', 'AU'],
+  ['NAB', 'National Australia Bank', 'AU'],
+  ['WBC', 'Westpac Banking Corporation', 'AU'],
+  ['ANZ', 'ANZ Group Holdings', 'AU'],
+  ['WES', 'Wesfarmers', 'AU'],
+  ['MQG', 'Macquarie Group', 'AU'],
+])
+
+const internationalMarketGroups = Object.freeze([
+  interleavedEuropeanInstruments,
+  southKoreanInstruments,
+  japaneseInstruments,
+  hongKongInstruments,
+  canadianInstruments,
+  australianInstruments,
+])
+
+export const internationalInstruments = Object.freeze(
+  Array.from(
+    {
+      length: Math.max(
+        ...internationalMarketGroups.map((instruments) => instruments.length),
+      ),
+    },
+    (_, index) =>
+      internationalMarketGroups
+        .map((instruments) => instruments[index])
+        .filter(Boolean),
+  ).flat(),
+)
+
+const INTERNATIONAL_INSERTION_INTERVAL = 3
+
+/**
+ * U.S. and international instruments are interleaved so ordinary benchmark
+ * sizes exercise multiple symbol formats and market labels.
+ */
+export const globalInstruments = Object.freeze(
+  marketInstruments.flatMap((instrument, index) => {
+    const internationalInstrument =
+      index % INTERNATIONAL_INSERTION_INTERVAL === 0
+        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
+        : undefined
+
+    return internationalInstrument
+      ? [instrument, internationalInstrument]
+      : [instrument]
+  }),
+) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/vue/realtime-trading/src/feed/sp500-instruments.ts b/examples/vue/realtime-trading/src/feed/sp500-instruments.ts
deleted file mode 100644
index c44eb5d152..0000000000
--- a/examples/vue/realtime-trading/src/feed/sp500-instruments.ts
+++ /dev/null
@@ -1,742 +0,0 @@
-export type MarketCode =
-  | 'US'
-  | 'NL'
-  | 'DE'
-  | 'FR'
-  | 'IT'
-  | 'ES'
-  | 'CH'
-  | 'DK'
-  | 'SE'
-  | 'FI'
-  | 'GB'
-  | 'KR'
-  | 'JP'
-  | 'HK'
-  | 'CA'
-  | 'AU'
-
-export type BaseInstrument = readonly [
-  symbol: string,
-  company: string,
-  market: MarketCode,
-]
-
-/**
- * Current S&P 500 constituent universe used by the realtime trading examples.
- *
- * Source snapshot: https://github.com/datasets/s-and-p-500-companies
- * Retrieved: 2026-08-15.
- * Multiple share classes are intentionally represented as separate instruments.
- */
-export const sp500Instruments = Object.freeze([
-  ['MMM', '3M', 'US'],
-  ['AOS', 'A. O. Smith', 'US'],
-  ['ABT', 'Abbott Laboratories', 'US'],
-  ['ABBV', 'AbbVie', 'US'],
-  ['ACN', 'Accenture', 'US'],
-  ['ADBE', 'Adobe Inc.', 'US'],
-  ['AMD', 'Advanced Micro Devices', 'US'],
-  ['AES', 'AES Corporation', 'US'],
-  ['AFL', 'Aflac', 'US'],
-  ['A', 'Agilent Technologies', 'US'],
-  ['APD', 'Air Products', 'US'],
-  ['ABNB', 'Airbnb', 'US'],
-  ['AKAM', 'Akamai Technologies', 'US'],
-  ['ALB', 'Albemarle Corporation', 'US'],
-  ['ARE', 'Alexandria Real Estate Equities', 'US'],
-  ['ALGN', 'Align Technology', 'US'],
-  ['ALLE', 'Allegion', 'US'],
-  ['LNT', 'Alliant Energy', 'US'],
-  ['ALL', 'Allstate', 'US'],
-  ['GOOGL', 'Alphabet Inc. (Class A)', 'US'],
-  ['GOOG', 'Alphabet Inc. (Class C)', 'US'],
-  ['MO', 'Altria', 'US'],
-  ['AMZN', 'Amazon', 'US'],
-  ['AMCR', 'Amcor', 'US'],
-  ['AEE', 'Ameren', 'US'],
-  ['AEP', 'American Electric Power', 'US'],
-  ['AXP', 'American Express', 'US'],
-  ['AIG', 'American International Group', 'US'],
-  ['AMT', 'American Tower', 'US'],
-  ['AWK', 'American Water Works', 'US'],
-  ['AMP', 'Ameriprise Financial', 'US'],
-  ['AME', 'Ametek', 'US'],
-  ['AMGN', 'Amgen', 'US'],
-  ['APH', 'Amphenol', 'US'],
-  ['ADI', 'Analog Devices', 'US'],
-  ['AON', 'Aon plc', 'US'],
-  ['APA', 'APA Corporation', 'US'],
-  ['APO', 'Apollo Global Management', 'US'],
-  ['AAPL', 'Apple Inc.', 'US'],
-  ['AMAT', 'Applied Materials', 'US'],
-  ['APP', 'AppLovin', 'US'],
-  ['APTV', 'Aptiv', 'US'],
-  ['ACGL', 'Arch Capital Group', 'US'],
-  ['ADM', 'Archer Daniels Midland', 'US'],
-  ['ARES', 'Ares Management', 'US'],
-  ['ANET', 'Arista Networks', 'US'],
-  ['AJG', 'Arthur J. Gallagher & Co.', 'US'],
-  ['AIZ', 'Assurant', 'US'],
-  ['T', 'AT&T', 'US'],
-  ['ATO', 'Atmos Energy', 'US'],
-  ['ADSK', 'Autodesk', 'US'],
-  ['ADP', 'Automatic Data Processing', 'US'],
-  ['AZO', 'AutoZone', 'US'],
-  ['AVB', 'AvalonBay Communities', 'US'],
-  ['AVY', 'Avery Dennison', 'US'],
-  ['AXON', 'Axon Enterprise', 'US'],
-  ['BKR', 'Baker Hughes', 'US'],
-  ['BALL', 'Ball Corporation', 'US'],
-  ['BAC', 'Bank of America', 'US'],
-  ['BAX', 'Baxter International', 'US'],
-  ['BDX', 'Becton Dickinson', 'US'],
-  ['BRK.B', 'Berkshire Hathaway', 'US'],
-  ['BBY', 'Best Buy', 'US'],
-  ['TECH', 'Bio-Techne', 'US'],
-  ['BIIB', 'Biogen', 'US'],
-  ['BLK', 'BlackRock', 'US'],
-  ['BX', 'Blackstone Inc.', 'US'],
-  ['XYZ', 'Block, Inc.', 'US'],
-  ['BNY', 'BNY Mellon', 'US'],
-  ['BA', 'Boeing', 'US'],
-  ['BKNG', 'Booking Holdings', 'US'],
-  ['BSX', 'Boston Scientific', 'US'],
-  ['BMY', 'Bristol Myers Squibb', 'US'],
-  ['AVGO', 'Broadcom', 'US'],
-  ['BR', 'Broadridge Financial Solutions', 'US'],
-  ['BRO', 'Brown & Brown', 'US'],
-  ['BF.B', 'Brown–Forman', 'US'],
-  ['BLDR', 'Builders FirstSource', 'US'],
-  ['BG', 'Bunge Global', 'US'],
-  ['BXP', 'BXP, Inc.', 'US'],
-  ['CHRW', 'C.H. Robinson', 'US'],
-  ['CDNS', 'Cadence Design Systems', 'US'],
-  ['CPT', 'Camden Property Trust', 'US'],
-  ['COF', 'Capital One', 'US'],
-  ['CAH', 'Cardinal Health', 'US'],
-  ['CCL', 'Carnival Corporation', 'US'],
-  ['CARR', 'Carrier Global', 'US'],
-  ['CVNA', 'Carvana', 'US'],
-  ['CASY', "Casey's", 'US'],
-  ['CAT', 'Caterpillar Inc.', 'US'],
-  ['CBOE', 'Cboe Global Markets', 'US'],
-  ['CBRE', 'CBRE Group', 'US'],
-  ['CDW', 'CDW Corporation', 'US'],
-  ['COR', 'Cencora', 'US'],
-  ['CNC', 'Centene Corporation', 'US'],
-  ['CNP', 'CenterPoint Energy', 'US'],
-  ['CF', 'CF Industries', 'US'],
-  ['CRL', 'Charles River Laboratories', 'US'],
-  ['SCHW', 'Charles Schwab Corporation', 'US'],
-  ['CHTR', 'Charter Communications', 'US'],
-  ['CVX', 'Chevron Corporation', 'US'],
-  ['CMG', 'Chipotle Mexican Grill', 'US'],
-  ['CB', 'Chubb Limited', 'US'],
-  ['CHD', 'Church & Dwight', 'US'],
-  ['CIEN', 'Ciena', 'US'],
-  ['CI', 'Cigna', 'US'],
-  ['CINF', 'Cincinnati Financial', 'US'],
-  ['CTAS', 'Cintas', 'US'],
-  ['CSCO', 'Cisco', 'US'],
-  ['C', 'Citigroup', 'US'],
-  ['CFG', 'Citizens Financial Group', 'US'],
-  ['CLX', 'Clorox', 'US'],
-  ['CME', 'CME Group', 'US'],
-  ['CMS', 'CMS Energy', 'US'],
-  ['KO', 'Coca-Cola Company (The)', 'US'],
-  ['CTSH', 'Cognizant', 'US'],
-  ['COHR', 'Coherent Corp.', 'US'],
-  ['COIN', 'Coinbase', 'US'],
-  ['CL', 'Colgate-Palmolive', 'US'],
-  ['CMCSA', 'Comcast', 'US'],
-  ['FIX', 'Comfort Systems USA', 'US'],
-  ['COP', 'ConocoPhillips', 'US'],
-  ['ED', 'Consolidated Edison', 'US'],
-  ['STZ', 'Constellation Brands', 'US'],
-  ['CEG', 'Constellation Energy', 'US'],
-  ['COO', 'Cooper Companies (The)', 'US'],
-  ['CPRT', 'Copart', 'US'],
-  ['GLW', 'Corning Inc.', 'US'],
-  ['CPAY', 'Corpay', 'US'],
-  ['CTVA', 'Corteva', 'US'],
-  ['CSGP', 'CoStar Group', 'US'],
-  ['COST', 'Costco', 'US'],
-  ['CRH', 'CRH plc', 'US'],
-  ['CRWD', 'CrowdStrike', 'US'],
-  ['CCI', 'Crown Castle', 'US'],
-  ['CSX', 'CSX Corporation', 'US'],
-  ['CMI', 'Cummins', 'US'],
-  ['CVS', 'CVS Health', 'US'],
-  ['DHR', 'Danaher Corporation', 'US'],
-  ['DRI', 'Darden Restaurants', 'US'],
-  ['DDOG', 'Datadog', 'US'],
-  ['DVA', 'DaVita', 'US'],
-  ['DECK', 'Deckers Brands', 'US'],
-  ['DE', 'Deere & Company', 'US'],
-  ['DELL', 'Dell Technologies', 'US'],
-  ['DAL', 'Delta Air Lines', 'US'],
-  ['DVN', 'Devon Energy', 'US'],
-  ['DXCM', 'Dexcom', 'US'],
-  ['FANG', 'Diamondback Energy', 'US'],
-  ['DLR', 'Digital Realty', 'US'],
-  ['DG', 'Dollar General', 'US'],
-  ['DLTR', 'Dollar Tree', 'US'],
-  ['D', 'Dominion Energy', 'US'],
-  ['DPZ', "Domino's", 'US'],
-  ['DASH', 'DoorDash', 'US'],
-  ['DOV', 'Dover Corporation', 'US'],
-  ['DOW', 'Dow Inc.', 'US'],
-  ['DHI', 'D. R. Horton', 'US'],
-  ['DTE', 'DTE Energy', 'US'],
-  ['DUK', 'Duke Energy', 'US'],
-  ['DD', 'DuPont', 'US'],
-  ['ETN', 'Eaton Corporation', 'US'],
-  ['EBAY', 'eBay Inc.', 'US'],
-  ['ECHO', 'EchoStar', 'US'],
-  ['ECL', 'Ecolab', 'US'],
-  ['EIX', 'Edison International', 'US'],
-  ['EW', 'Edwards Lifesciences', 'US'],
-  ['ELV', 'Elevance Health', 'US'],
-  ['EME', 'Emcor', 'US'],
-  ['EMR', 'Emerson Electric', 'US'],
-  ['ETR', 'Entergy', 'US'],
-  ['EOG', 'EOG Resources', 'US'],
-  ['EQT', 'EQT Corporation', 'US'],
-  ['EFX', 'Equifax', 'US'],
-  ['EQIX', 'Equinix', 'US'],
-  ['EQR', 'Equity Residential', 'US'],
-  ['ERIE', 'Erie Indemnity', 'US'],
-  ['ESS', 'Essex Property Trust', 'US'],
-  ['EL', 'Estée Lauder Companies (The)', 'US'],
-  ['EG', 'Everest Group', 'US'],
-  ['EVRG', 'Evergy', 'US'],
-  ['ES', 'Eversource Energy', 'US'],
-  ['EXC', 'Exelon', 'US'],
-  ['EXE', 'Expand Energy', 'US'],
-  ['EXPE', 'Expedia Group', 'US'],
-  ['EXPD', 'Expeditors International', 'US'],
-  ['EXR', 'Extra Space Storage', 'US'],
-  ['XOM', 'ExxonMobil', 'US'],
-  ['FFIV', 'F5, Inc.', 'US'],
-  ['FDS', 'FactSet', 'US'],
-  ['FICO', 'Fair Isaac', 'US'],
-  ['FAST', 'Fastenal', 'US'],
-  ['FRT', 'Federal Realty Investment Trust', 'US'],
-  ['FDX', 'FedEx', 'US'],
-  ['FDXF', 'FedEx Freight', 'US'],
-  ['FERG', 'Ferguson Enterprises', 'US'],
-  ['FIS', 'Fidelity National Information Services', 'US'],
-  ['FITB', 'Fifth Third Bancorp', 'US'],
-  ['FSLR', 'First Solar', 'US'],
-  ['FE', 'FirstEnergy', 'US'],
-  ['FISV', 'Fiserv', 'US'],
-  ['FLEX', 'Flex Ltd.', 'US'],
-  ['F', 'Ford Motor Company', 'US'],
-  ['FTNT', 'Fortinet', 'US'],
-  ['FTV', 'Fortive', 'US'],
-  ['FOXA', 'Fox Corporation (Class A)', 'US'],
-  ['FOX', 'Fox Corporation (Class B)', 'US'],
-  ['BEN', 'Franklin Resources', 'US'],
-  ['FCX', 'Freeport-McMoRan', 'US'],
-  ['GRMN', 'Garmin', 'US'],
-  ['IT', 'Gartner', 'US'],
-  ['GE', 'GE Aerospace', 'US'],
-  ['GEHC', 'GE HealthCare', 'US'],
-  ['GEV', 'GE Vernova', 'US'],
-  ['GEN', 'Gen Digital', 'US'],
-  ['GNRC', 'Generac', 'US'],
-  ['GD', 'General Dynamics', 'US'],
-  ['GIS', 'General Mills', 'US'],
-  ['GM', 'General Motors', 'US'],
-  ['GPC', 'Genuine Parts Company', 'US'],
-  ['GILD', 'Gilead Sciences', 'US'],
-  ['GPN', 'Global Payments', 'US'],
-  ['GL', 'Globe Life', 'US'],
-  ['GDDY', 'GoDaddy', 'US'],
-  ['GS', 'Goldman Sachs', 'US'],
-  ['HAL', 'Halliburton', 'US'],
-  ['HIG', 'Hartford (The)', 'US'],
-  ['HAS', 'Hasbro', 'US'],
-  ['HCA', 'HCA Healthcare', 'US'],
-  ['DOC', 'Healthpeak Properties', 'US'],
-  ['HSIC', 'Henry Schein', 'US'],
-  ['HSY', 'Hershey Company (The)', 'US'],
-  ['HPE', 'Hewlett Packard Enterprise', 'US'],
-  ['HLT', 'Hilton Worldwide', 'US'],
-  ['HD', 'Home Depot (The)', 'US'],
-  ['HONA', 'Honeywell Aerospace', 'US'],
-  ['HON', 'Honeywell Technologies', 'US'],
-  ['HRL', 'Hormel Foods', 'US'],
-  ['HST', 'Host Hotels & Resorts', 'US'],
-  ['HWM', 'Howmet Aerospace', 'US'],
-  ['HPQ', 'HP Inc.', 'US'],
-  ['HUBB', 'Hubbell Incorporated', 'US'],
-  ['HUM', 'Humana', 'US'],
-  ['HBAN', 'Huntington Bancshares', 'US'],
-  ['HII', 'Huntington Ingalls Industries', 'US'],
-  ['IBM', 'IBM', 'US'],
-  ['IEX', 'IDEX Corporation', 'US'],
-  ['IDXX', 'Idexx Laboratories', 'US'],
-  ['ITW', 'Illinois Tool Works', 'US'],
-  ['INCY', 'Incyte', 'US'],
-  ['IR', 'Ingersoll Rand', 'US'],
-  ['PODD', 'Insulet Corporation', 'US'],
-  ['INTC', 'Intel', 'US'],
-  ['IBKR', 'Interactive Brokers', 'US'],
-  ['ICE', 'Intercontinental Exchange', 'US'],
-  ['IFF', 'International Flavors & Fragrances', 'US'],
-  ['IP', 'International Paper', 'US'],
-  ['INTU', 'Intuit', 'US'],
-  ['ISRG', 'Intuitive Surgical', 'US'],
-  ['IVZ', 'Invesco', 'US'],
-  ['INVH', 'Invitation Homes', 'US'],
-  ['IQV', 'IQVIA', 'US'],
-  ['IRM', 'Iron Mountain', 'US'],
-  ['JBHT', 'J.B. Hunt', 'US'],
-  ['JBL', 'Jabil', 'US'],
-  ['JKHY', 'Jack Henry & Associates', 'US'],
-  ['J', 'Jacobs Solutions', 'US'],
-  ['JNJ', 'Johnson & Johnson', 'US'],
-  ['JCI', 'Johnson Controls', 'US'],
-  ['JPM', 'JPMorgan Chase', 'US'],
-  ['KVUE', 'Kenvue', 'US'],
-  ['KDP', 'Keurig Dr Pepper', 'US'],
-  ['KEY', 'KeyCorp', 'US'],
-  ['KEYS', 'Keysight Technologies', 'US'],
-  ['KMB', 'Kimberly-Clark', 'US'],
-  ['KIM', 'Kimco Realty', 'US'],
-  ['KMI', 'Kinder Morgan', 'US'],
-  ['KKR', 'KKR & Co.', 'US'],
-  ['KLAC', 'KLA Corporation', 'US'],
-  ['KHC', 'Kraft Heinz', 'US'],
-  ['KR', 'Kroger', 'US'],
-  ['LHX', 'L3Harris', 'US'],
-  ['LH', 'Labcorp', 'US'],
-  ['LRCX', 'Lam Research', 'US'],
-  ['LVS', 'Las Vegas Sands', 'US'],
-  ['LDOS', 'Leidos', 'US'],
-  ['LEN', 'Lennar', 'US'],
-  ['LII', 'Lennox International', 'US'],
-  ['LLY', 'Lilly (Eli)', 'US'],
-  ['LIN', 'Linde plc', 'US'],
-  ['LYV', 'Live Nation Entertainment', 'US'],
-  ['LMT', 'Lockheed Martin', 'US'],
-  ['L', 'Loews Corporation', 'US'],
-  ['LOW', "Lowe's", 'US'],
-  ['LULU', 'Lululemon Athletica', 'US'],
-  ['LITE', 'Lumentum', 'US'],
-  ['LYB', 'LyondellBasell', 'US'],
-  ['MTB', 'M&T Bank', 'US'],
-  ['MPC', 'Marathon Petroleum', 'US'],
-  ['MAR', 'Marriott International', 'US'],
-  ['MRSH', 'Marsh McLennan', 'US'],
-  ['MLM', 'Martin Marietta Materials', 'US'],
-  ['MRVL', 'Marvell Technology', 'US'],
-  ['MAS', 'Masco', 'US'],
-  ['MA', 'Mastercard', 'US'],
-  ['MKC', 'McCormick & Company', 'US'],
-  ['MCD', "McDonald's", 'US'],
-  ['MCK', 'McKesson Corporation', 'US'],
-  ['MDT', 'Medtronic', 'US'],
-  ['MRK', 'Merck & Co.', 'US'],
-  ['META', 'Meta Platforms', 'US'],
-  ['MET', 'MetLife', 'US'],
-  ['MTD', 'Mettler Toledo', 'US'],
-  ['MGM', 'MGM Resorts', 'US'],
-  ['MCHP', 'Microchip Technology', 'US'],
-  ['MU', 'Micron Technology', 'US'],
-  ['MSFT', 'Microsoft', 'US'],
-  ['MAA', 'Mid-America Apartment Communities', 'US'],
-  ['MRNA', 'Moderna', 'US'],
-  ['TAP', 'Molson Coors Beverage Company', 'US'],
-  ['MDLZ', 'Mondelez International', 'US'],
-  ['MPWR', 'Monolithic Power Systems', 'US'],
-  ['MNST', 'Monster Beverage', 'US'],
-  ['MCO', "Moody's Corporation", 'US'],
-  ['MS', 'Morgan Stanley', 'US'],
-  ['MOS', 'Mosaic Company (The)', 'US'],
-  ['MSI', 'Motorola Solutions', 'US'],
-  ['MSCI', 'MSCI', 'US'],
-  ['NDAQ', 'Nasdaq, Inc.', 'US'],
-  ['NTAP', 'NetApp', 'US'],
-  ['NFLX', 'Netflix', 'US'],
-  ['NEM', 'Newmont', 'US'],
-  ['NWSA', 'News Corp (Class A)', 'US'],
-  ['NWS', 'News Corp (Class B)', 'US'],
-  ['NEE', 'NextEra Energy', 'US'],
-  ['NKE', 'Nike, Inc.', 'US'],
-  ['NI', 'NiSource', 'US'],
-  ['NDSN', 'Nordson Corporation', 'US'],
-  ['NSC', 'Norfolk Southern', 'US'],
-  ['NTRS', 'Northern Trust', 'US'],
-  ['NOC', 'Northrop Grumman', 'US'],
-  ['NCLH', 'Norwegian Cruise Line Holdings', 'US'],
-  ['NRG', 'NRG Energy', 'US'],
-  ['NUE', 'Nucor', 'US'],
-  ['NVDA', 'Nvidia', 'US'],
-  ['NVR', 'NVR, Inc.', 'US'],
-  ['NXPI', 'NXP Semiconductors', 'US'],
-  ['ORLY', "O'Reilly Automotive", 'US'],
-  ['OXY', 'Occidental Petroleum', 'US'],
-  ['ODFL', 'Old Dominion', 'US'],
-  ['OMC', 'Omnicom Group', 'US'],
-  ['ON', 'ON Semiconductor', 'US'],
-  ['OKE', 'Oneok', 'US'],
-  ['ORCL', 'Oracle Corporation', 'US'],
-  ['OTIS', 'Otis Worldwide', 'US'],
-  ['PCAR', 'Paccar', 'US'],
-  ['PKG', 'Packaging Corporation of America', 'US'],
-  ['PLTR', 'Palantir Technologies', 'US'],
-  ['PANW', 'Palo Alto Networks', 'US'],
-  ['PSKY', 'Paramount Skydance Corporation', 'US'],
-  ['PH', 'Parker Hannifin', 'US'],
-  ['PAYX', 'Paychex', 'US'],
-  ['PYPL', 'PayPal', 'US'],
-  ['PNR', 'Pentair', 'US'],
-  ['PEP', 'PepsiCo', 'US'],
-  ['PFE', 'Pfizer', 'US'],
-  ['PCG', 'PG&E Corporation', 'US'],
-  ['PM', 'Philip Morris International', 'US'],
-  ['PSX', 'Phillips 66', 'US'],
-  ['PNW', 'Pinnacle West Capital', 'US'],
-  ['PNC', 'PNC Financial Services', 'US'],
-  ['PPG', 'PPG Industries', 'US'],
-  ['PPL', 'PPL Corporation', 'US'],
-  ['PFG', 'Principal Financial Group', 'US'],
-  ['PG', 'Procter & Gamble', 'US'],
-  ['PGR', 'Progressive Corporation', 'US'],
-  ['PLD', 'Prologis', 'US'],
-  ['PRU', 'Prudential Financial', 'US'],
-  ['PEG', 'Public Service Enterprise Group', 'US'],
-  ['PTC', 'PTC Inc.', 'US'],
-  ['PSA', 'Public Storage', 'US'],
-  ['PHM', 'PulteGroup', 'US'],
-  ['PWR', 'Quanta Services', 'US'],
-  ['QCOM', 'Qualcomm', 'US'],
-  ['DGX', 'Quest Diagnostics', 'US'],
-  ['Q', 'Qnity Electronics', 'US'],
-  ['RL', 'Ralph Lauren Corporation', 'US'],
-  ['RJF', 'Raymond James Financial', 'US'],
-  ['RTX', 'RTX Corporation', 'US'],
-  ['O', 'Realty Income', 'US'],
-  ['REG', 'Regency Centers', 'US'],
-  ['REGN', 'Regeneron Pharmaceuticals', 'US'],
-  ['RF', 'Regions Financial Corporation', 'US'],
-  ['RSG', 'Republic Services', 'US'],
-  ['RMD', 'ResMed|', 'US'],
-  ['RVTY', 'Revvity', 'US'],
-  ['HOOD', 'Robinhood Markets', 'US'],
-  ['ROK', 'Rockwell Automation', 'US'],
-  ['ROL', 'Rollins, Inc.', 'US'],
-  ['ROP', 'Roper Technologies', 'US'],
-  ['ROST', 'Ross Stores', 'US'],
-  ['RCL', 'Royal Caribbean Group', 'US'],
-  ['SPGI', 'S&P Global', 'US'],
-  ['CRM', 'Salesforce', 'US'],
-  ['SNDK', 'Sandisk', 'US'],
-  ['SBAC', 'SBA Communications', 'US'],
-  ['SLB', 'Schlumberger', 'US'],
-  ['STX', 'Seagate Technology', 'US'],
-  ['SRE', 'Sempra', 'US'],
-  ['NOW', 'ServiceNow', 'US'],
-  ['SHW', 'Sherwin-Williams', 'US'],
-  ['SPG', 'Simon Property Group', 'US'],
-  ['SWKS', 'Skyworks Solutions', 'US'],
-  ['SJM', 'J.M. Smucker Company (The)', 'US'],
-  ['SW', 'Smurfit Westrock', 'US'],
-  ['SNA', 'Snap-on', 'US'],
-  ['SOLV', 'Solventum', 'US'],
-  ['SO', 'Southern Company', 'US'],
-  ['LUV', 'Southwest Airlines', 'US'],
-  ['SWK', 'Stanley Black & Decker', 'US'],
-  ['SBUX', 'Starbucks', 'US'],
-  ['STT', 'State Street Corporation', 'US'],
-  ['STLD', 'Steel Dynamics', 'US'],
-  ['STE', 'Steris', 'US'],
-  ['SYK', 'Stryker Corporation', 'US'],
-  ['SMCI', 'Supermicro', 'US'],
-  ['SYF', 'Synchrony Financial', 'US'],
-  ['SNPS', 'Synopsys', 'US'],
-  ['SYY', 'Sysco', 'US'],
-  ['TMUS', 'T-Mobile US', 'US'],
-  ['TROW', 'T. Rowe Price', 'US'],
-  ['TTWO', 'Take-Two Interactive', 'US'],
-  ['TPR', 'Tapestry, Inc.', 'US'],
-  ['TRGP', 'Targa Resources', 'US'],
-  ['TGT', 'Target Corporation', 'US'],
-  ['TEL', 'TE Connectivity', 'US'],
-  ['TDY', 'Teledyne Technologies', 'US'],
-  ['TER', 'Teradyne', 'US'],
-  ['TSLA', 'Tesla, Inc.', 'US'],
-  ['TXN', 'Texas Instruments', 'US'],
-  ['TPL', 'Texas Pacific Land Corporation', 'US'],
-  ['TXT', 'Textron', 'US'],
-  ['TMO', 'Thermo Fisher Scientific', 'US'],
-  ['TJX', 'TJX Companies', 'US'],
-  ['TKO', 'TKO Group Holdings', 'US'],
-  ['TTD', 'Trade Desk (The)', 'US'],
-  ['TSCO', 'Tractor Supply', 'US'],
-  ['TT', 'Trane Technologies', 'US'],
-  ['TDG', 'TransDigm Group', 'US'],
-  ['TRV', 'Travelers Companies (The)', 'US'],
-  ['TRMB', 'Trimble Inc.', 'US'],
-  ['TFC', 'Truist Financial', 'US'],
-  ['TYL', 'Tyler Technologies', 'US'],
-  ['TSN', 'Tyson Foods', 'US'],
-  ['USB', 'U.S. Bancorp', 'US'],
-  ['UBER', 'Uber', 'US'],
-  ['UDR', 'UDR, Inc.', 'US'],
-  ['ULTA', 'Ulta Beauty', 'US'],
-  ['UNP', 'Union Pacific Corporation', 'US'],
-  ['UAL', 'United Airlines Holdings', 'US'],
-  ['UPS', 'United Parcel Service', 'US'],
-  ['URI', 'United Rentals', 'US'],
-  ['UNH', 'UnitedHealth Group', 'US'],
-  ['UHS', 'Universal Health Services', 'US'],
-  ['VLO', 'Valero Energy', 'US'],
-  ['VEEV', 'Veeva Systems', 'US'],
-  ['VTR', 'Ventas', 'US'],
-  ['VLTO', 'Veralto', 'US'],
-  ['VRSN', 'Verisign', 'US'],
-  ['VRSK', 'Verisk Analytics', 'US'],
-  ['VZ', 'Verizon', 'US'],
-  ['VRTX', 'Vertex Pharmaceuticals', 'US'],
-  ['VRT', 'Vertiv', 'US'],
-  ['VTRS', 'Viatris', 'US'],
-  ['VICI', 'Vici Properties', 'US'],
-  ['V', 'Visa Inc.', 'US'],
-  ['VST', 'Vistra Corp.', 'US'],
-  ['VMC', 'Vulcan Materials Company', 'US'],
-  ['WRB', 'W. R. Berkley Corporation', 'US'],
-  ['GWW', 'W. W. Grainger', 'US'],
-  ['WAB', 'Wabtec', 'US'],
-  ['WMT', 'Walmart', 'US'],
-  ['DIS', 'Walt Disney Company (The)', 'US'],
-  ['WBD', 'Warner Bros. Discovery', 'US'],
-  ['WM', 'Waste Management', 'US'],
-  ['WAT', 'Waters Corporation', 'US'],
-  ['WEC', 'WEC Energy Group', 'US'],
-  ['WFC', 'Wells Fargo', 'US'],
-  ['WELL', 'Welltower', 'US'],
-  ['WST', 'West Pharmaceutical Services', 'US'],
-  ['WDC', 'Western Digital', 'US'],
-  ['WY', 'Weyerhaeuser', 'US'],
-  ['WSM', 'Williams-Sonoma, Inc.', 'US'],
-  ['WMB', 'Williams Companies', 'US'],
-  ['WTW', 'Willis Towers Watson', 'US'],
-  ['WDAY', 'Workday, Inc.', 'US'],
-  ['WYNN', 'Wynn Resorts', 'US'],
-  ['XEL', 'Xcel Energy', 'US'],
-  ['XYL', 'Xylem Inc.', 'US'],
-  ['YUM', 'Yum! Brands', 'US'],
-  ['ZBRA', 'Zebra Technologies', 'US'],
-  ['ZBH', 'Zimmer Biomet', 'US'],
-  ['ZTS', 'Zoetis', 'US'],
-])
-
-/**
- * Representative liquid international listings used to diversify the fixture.
- * Symbols use their local-market form and the third tuple value is an ISO-style
- * country/market code, rather than a trading currency or exchange MIC.
- *
- * References checked 2026-08-15: STOXX Europe 50, KRX KOSPI market,
- * JPX TOPIX Core30, and HKEX index constituent materials.
- */
-const europeanInstruments = Object.freeze([
-  ['ASML', 'ASML Holding', 'NL'],
-  ['INGA', 'ING Group', 'NL'],
-  ['ADYEN', 'Adyen', 'NL'],
-  ['PHIA', 'Philips', 'NL'],
-  ['HEIA', 'Heineken', 'NL'],
-  ['SAP', 'SAP', 'DE'],
-  ['SIE', 'Siemens', 'DE'],
-  ['ALV', 'Allianz', 'DE'],
-  ['DTE', 'Deutsche Telekom', 'DE'],
-  ['MBG', 'Mercedes-Benz Group', 'DE'],
-  ['BMW', 'BMW', 'DE'],
-  ['BAS', 'BASF', 'DE'],
-  ['MUV2', 'Munich Re', 'DE'],
-  ['VOW3', 'Volkswagen Preference', 'DE'],
-  ['IFX', 'Infineon Technologies', 'DE'],
-  ['MC', 'LVMH', 'FR'],
-  ['OR', "L'Oréal", 'FR'],
-  ['AIR', 'Airbus', 'FR'],
-  ['SU', 'Schneider Electric', 'FR'],
-  ['TTE', 'TotalEnergies', 'FR'],
-  ['SAN', 'Sanofi', 'FR'],
-  ['BNP', 'BNP Paribas', 'FR'],
-  ['CS', 'AXA', 'FR'],
-  ['DG', 'Vinci', 'FR'],
-  ['ENEL', 'Enel', 'IT'],
-  ['ENI', 'Eni', 'IT'],
-  ['ISP', 'Intesa Sanpaolo', 'IT'],
-  ['UCG', 'UniCredit', 'IT'],
-  ['STLAM', 'Stellantis', 'IT'],
-  ['SAN', 'Banco Santander', 'ES'],
-  ['IBE', 'Iberdrola', 'ES'],
-  ['ITX', 'Inditex', 'ES'],
-  ['BBVA', 'BBVA', 'ES'],
-  ['NESN', 'Nestlé', 'CH'],
-  ['ROG', 'Roche Holding', 'CH'],
-  ['NOVN', 'Novartis', 'CH'],
-  ['UBSG', 'UBS Group', 'CH'],
-  ['NOVO-B', 'Novo Nordisk', 'DK'],
-  ['MAERSK-B', 'A.P. Moller - Maersk', 'DK'],
-  ['VOLV-B', 'Volvo', 'SE'],
-  ['ERIC-B', 'Ericsson', 'SE'],
-  ['NOKIA', 'Nokia', 'FI'],
-  ['SHEL', 'Shell', 'GB'],
-  ['AZN', 'AstraZeneca', 'GB'],
-  ['HSBA', 'HSBC Holdings', 'GB'],
-  ['ULVR', 'Unilever', 'GB'],
-  ['LSEG', 'London Stock Exchange Group', 'GB'],
-])
-
-const europeanMarketCodes = Object.freeze([
-  'NL',
-  'DE',
-  'FR',
-  'IT',
-  'ES',
-  'CH',
-  'DK',
-  'SE',
-  'FI',
-  'GB',
-])
-
-const europeanMarketGroups = Object.freeze(
-  europeanMarketCodes.map((market) =>
-    europeanInstruments.filter(([, , instrumentMarket]) =>
-      Object.is(instrumentMarket, market),
-    ),
-  ),
-)
-
-const interleavedEuropeanInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...europeanMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      europeanMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const southKoreanInstruments = Object.freeze([
-  ['005930', 'Samsung Electronics', 'KR'],
-  ['000660', 'SK hynix', 'KR'],
-  ['373220', 'LG Energy Solution', 'KR'],
-  ['207940', 'Samsung Biologics', 'KR'],
-  ['005380', 'Hyundai Motor', 'KR'],
-  ['000270', 'Kia', 'KR'],
-  ['068270', 'Celltrion', 'KR'],
-  ['105560', 'KB Financial Group', 'KR'],
-  ['055550', 'Shinhan Financial Group', 'KR'],
-  ['035420', 'NAVER', 'KR'],
-  ['035720', 'Kakao', 'KR'],
-  ['006400', 'Samsung SDI', 'KR'],
-  ['051910', 'LG Chem', 'KR'],
-  ['012330', 'Hyundai Mobis', 'KR'],
-  ['066570', 'LG Electronics', 'KR'],
-])
-
-const japaneseInstruments = Object.freeze([
-  ['8306', 'Mitsubishi UFJ Financial Group', 'JP'],
-  ['7203', 'Toyota Motor', 'JP'],
-  ['6501', 'Hitachi', 'JP'],
-  ['8316', 'Sumitomo Mitsui Financial Group', 'JP'],
-  ['6758', 'Sony Group', 'JP'],
-  ['8058', 'Mitsubishi Corporation', 'JP'],
-  ['9984', 'SoftBank Group', 'JP'],
-  ['8035', 'Tokyo Electron', 'JP'],
-  ['8411', 'Mizuho Financial Group', 'JP'],
-  ['8031', 'Mitsui & Co.', 'JP'],
-  ['6861', 'Keyence', 'JP'],
-  ['7974', 'Nintendo', 'JP'],
-  ['6098', 'Recruit Holdings', 'JP'],
-  ['9432', 'Nippon Telegraph and Telephone', 'JP'],
-  ['4063', 'Shin-Etsu Chemical', 'JP'],
-])
-
-const hongKongInstruments = Object.freeze([
-  ['0700', 'Tencent Holdings', 'HK'],
-  ['9988', 'Alibaba Group', 'HK'],
-  ['1810', 'Xiaomi', 'HK'],
-  ['3690', 'Meituan', 'HK'],
-  ['0941', 'China Mobile', 'HK'],
-  ['1211', 'BYD Company', 'HK'],
-  ['1299', 'AIA Group', 'HK'],
-  ['0388', 'Hong Kong Exchanges and Clearing', 'HK'],
-  ['0005', 'HSBC Holdings', 'HK'],
-  ['2318', 'Ping An Insurance', 'HK'],
-])
-
-const canadianInstruments = Object.freeze([
-  ['RY', 'Royal Bank of Canada', 'CA'],
-  ['TD', 'Toronto-Dominion Bank', 'CA'],
-  ['SHOP', 'Shopify', 'CA'],
-  ['ENB', 'Enbridge', 'CA'],
-  ['CNR', 'Canadian National Railway', 'CA'],
-  ['CP', 'Canadian Pacific Kansas City', 'CA'],
-  ['BMO', 'Bank of Montreal', 'CA'],
-  ['CSU', 'Constellation Software', 'CA'],
-])
-
-const australianInstruments = Object.freeze([
-  ['BHP', 'BHP Group', 'AU'],
-  ['CBA', 'Commonwealth Bank of Australia', 'AU'],
-  ['CSL', 'CSL', 'AU'],
-  ['NAB', 'National Australia Bank', 'AU'],
-  ['WBC', 'Westpac Banking Corporation', 'AU'],
-  ['ANZ', 'ANZ Group Holdings', 'AU'],
-  ['WES', 'Wesfarmers', 'AU'],
-  ['MQG', 'Macquarie Group', 'AU'],
-])
-
-const internationalMarketGroups = Object.freeze([
-  interleavedEuropeanInstruments,
-  southKoreanInstruments,
-  japaneseInstruments,
-  hongKongInstruments,
-  canadianInstruments,
-  australianInstruments,
-])
-
-export const internationalInstruments = Object.freeze(
-  Array.from(
-    {
-      length: Math.max(
-        ...internationalMarketGroups.map((instruments) => instruments.length),
-      ),
-    },
-    (_, index) =>
-      internationalMarketGroups
-        .map((instruments) => instruments[index])
-        .filter(Boolean),
-  ).flat(),
-)
-
-const INTERNATIONAL_INSERTION_INTERVAL = 3
-
-/**
- * U.S. and international instruments are interleaved so ordinary benchmark
- * sizes exercise multiple symbol formats and market labels.
- */
-export const globalInstruments = Object.freeze(
-  sp500Instruments.flatMap((instrument, index) => {
-    const internationalInstrument =
-      index % INTERNATIONAL_INSERTION_INTERVAL === 0
-        ? internationalInstruments[index / INTERNATIONAL_INSERTION_INTERVAL]
-        : undefined
-
-    return internationalInstrument
-      ? [instrument, internationalInstrument]
-      : [instrument]
-  }),
-) as unknown as ReadonlyArray<BaseInstrument>
diff --git a/examples/vue/realtime-trading/src/feed/worker/market-feed-engine.ts b/examples/vue/realtime-trading/src/feed/worker/market-feed-engine.ts
index 557f7c30a8..fbd9c369c0 100644
--- a/examples/vue/realtime-trading/src/feed/worker/market-feed-engine.ts
+++ b/examples/vue/realtime-trading/src/feed/worker/market-feed-engine.ts
@@ -1,4 +1,4 @@
-import { globalInstruments } from '../sp500-instruments'
+import { globalInstruments } from '../market-instruments.ts'
 import type {
   MarketQuoteSnapshot,
   MarketQuoteUpdate,

From 399d11e8590cf63b7f519355c5caca8280ed5b7e Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 18 Aug 2026 11:06:53 +0000
Subject: [PATCH 13/23] ci: apply automated fixes

---
 .../app/components/table/trading-table.gts    | 12 ++-
 .../src/shell/Configurator.ts                 |  6 +-
 .../src/shell/TradingShell.ts                 |  4 +-
 .../src/table/TradingTable.ts                 | 76 +++++++++----------
 4 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/examples/ember/realtime-trading/app/components/table/trading-table.gts b/examples/ember/realtime-trading/app/components/table/trading-table.gts
index 74cdd05eb9..b844f13343 100644
--- a/examples/ember/realtime-trading/app/components/table/trading-table.gts
+++ b/examples/ember/realtime-trading/app/components/table/trading-table.gts
@@ -168,13 +168,11 @@ export default class TradingTable extends Component<Signature> {
     this.syncVirtualizer(rows)
     const result =
       this.virtualMode === 'tanstack' && this.virtualizer
-        ? this.virtualizer
-            .getVirtualItems()
-            .map((item) => ({
-              row: rows[item.index]!,
-              cells: rows[item.index]!.getVisibleCells(),
-              virtual: item,
-            }))
+        ? this.virtualizer.getVirtualItems().map((item) => ({
+            row: rows[item.index]!,
+            cells: rows[item.index]!.getVisibleCells(),
+            virtual: item,
+          }))
         : rows.map((row) => ({
             row,
             cells: row.getVisibleCells(),
diff --git a/examples/lit/realtime-trading/src/shell/Configurator.ts b/examples/lit/realtime-trading/src/shell/Configurator.ts
index a0d111eb09..e91760fa4a 100644
--- a/examples/lit/realtime-trading/src/shell/Configurator.ts
+++ b/examples/lit/realtime-trading/src/shell/Configurator.ts
@@ -76,9 +76,9 @@ export class Configurator extends ControllerElement {
             data-testid="instrument-count-select"
             .value=${String(feedState.instrumentCount)}
             @change=${(event: Event) => {
-          this.controller.actions.resetViewState()
-          this.feed.actions.setInstrumentCount(number(event))
-        }}
+              this.controller.actions.resetViewState()
+              this.feed.actions.setInstrumentCount(number(event))
+            }}
           >
             ${options(configuratorOptions.instrumentCounts)}
           </select></label
diff --git a/examples/lit/realtime-trading/src/shell/TradingShell.ts b/examples/lit/realtime-trading/src/shell/TradingShell.ts
index 70d23587d9..174414b9b7 100644
--- a/examples/lit/realtime-trading/src/shell/TradingShell.ts
+++ b/examples/lit/realtime-trading/src/shell/TradingShell.ts
@@ -23,8 +23,8 @@ export class TradingShell extends ControllerElement {
           .feed=${this.feed}
           .sidebarOpen=${this.sidebarOpen}
           .toggleSidebar=${() => {
-        this.sidebarOpen = !this.sidebarOpen
-      }}
+            this.sidebarOpen = !this.sidebarOpen
+          }}
         ></trading-app-header
         >${import.meta.env.DEV ? html`<aside class="development-warning">DEV BUILD — use the production build before recording results.</aside>` : null}
       </div>
diff --git a/examples/lit/realtime-trading/src/table/TradingTable.ts b/examples/lit/realtime-trading/src/table/TradingTable.ts
index f1505e9303..af3c0d59dd 100644
--- a/examples/lit/realtime-trading/src/table/TradingTable.ts
+++ b/examples/lit/realtime-trading/src/table/TradingTable.ts
@@ -234,25 +234,25 @@ export class TradingTable extends ControllerElement {
         aria-selected=${row.getIsSelected()}
       >
         ${repeat(
-        row.getVisibleCells(),
-        (cell) => cell.id,
-        (cell) => {
-          const edges = cell.getSelectionEdges()
-          return html`<td
-            style="width:calc(var(--col-${cell.column.id}-size) * 1px)"
-            data-column-id=${cell.column.id}
-            data-cell-focused=${cell.getIsFocused() ? 'true' : undefined}
-            data-selection-top=${edges.top ? 'true' : undefined}
-            data-selection-right=${edges.right ? 'true' : undefined}
-            data-selection-bottom=${edges.bottom ? 'true' : undefined}
-            data-selection-left=${edges.left ? 'true' : undefined}
-            aria-selected=${cell.getIsSelected()}
-            tabindex=${cell.getTabIndex()}
-          >
-            ${FlexRender({ cell })}
-          </td>`
-        },
-      )}
+          row.getVisibleCells(),
+          (cell) => cell.id,
+          (cell) => {
+            const edges = cell.getSelectionEdges()
+            return html`<td
+              style="width:calc(var(--col-${cell.column.id}-size) * 1px)"
+              data-column-id=${cell.column.id}
+              data-cell-focused=${cell.getIsFocused() ? 'true' : undefined}
+              data-selection-top=${edges.top ? 'true' : undefined}
+              data-selection-right=${edges.right ? 'true' : undefined}
+              data-selection-bottom=${edges.bottom ? 'true' : undefined}
+              data-selection-left=${edges.left ? 'true' : undefined}
+              aria-selected=${cell.getIsSelected()}
+              tabindex=${cell.getTabIndex()}
+            >
+              ${FlexRender({ cell })}
+            </td>`
+          },
+        )}
       </tr>`
     return html`<div
         ${ref(this.#scrollRef)}
@@ -270,11 +270,11 @@ export class TradingTable extends ControllerElement {
         >
           <thead>
             ${repeat(
-          table.getHeaderGroups(),
-          (group) => group.id,
-          (group) =>
-            html`<tr>
-              ${repeat(
+              table.getHeaderGroups(),
+              (group) => group.id,
+              (group) =>
+                html`<tr>
+                  ${repeat(
                 group.headers,
                 (header) => header.id,
                 (header) => {
@@ -360,8 +360,8 @@ export class TradingTable extends ControllerElement {
                   </th>`
                 },
               )}
-            </tr>`,
-        )}
+                </tr>`,
+            )}
           </thead>
           <tbody
             class=${virtualMode === 'tanstack' ? 'virtual-table-body' : ''}
@@ -373,18 +373,18 @@ export class TradingTable extends ControllerElement {
             @click=${(event: MouseEvent) => this.#pointer.handleClick(table, event)}
           >
             ${
-          virtualMode === 'tanstack'
-            ? repeat(
-                virtualRows,
-                (item) => item.key,
-                (item) => renderRow(rows[item.index], item),
-              )
-            : repeat(
-                rows,
-                (row) => row.id,
-                (row) => renderRow(row),
-              )
-        }
+              virtualMode === 'tanstack'
+                ? repeat(
+                    virtualRows,
+                    (item) => item.key,
+                    (item) => renderRow(rows[item.index], item),
+                  )
+                : repeat(
+                    rows,
+                    (row) => row.id,
+                    (row) => renderRow(row),
+                  )
+            }
           </tbody>
         </table>
       </div>

From a6020bb6c75ef6392d91bfa54b72e49e9f32bb2f Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 18 Aug 2026 11:08:38 +0000
Subject: [PATCH 14/23] ci: apply automated fixes (attempt 2/3)

---
 .../src/table/TradingTable.ts                 | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/examples/lit/realtime-trading/src/table/TradingTable.ts b/examples/lit/realtime-trading/src/table/TradingTable.ts
index af3c0d59dd..fb873f9cb9 100644
--- a/examples/lit/realtime-trading/src/table/TradingTable.ts
+++ b/examples/lit/realtime-trading/src/table/TradingTable.ts
@@ -275,18 +275,18 @@ export class TradingTable extends ControllerElement {
               (group) =>
                 html`<tr>
                   ${repeat(
-                group.headers,
-                (header) => header.id,
-                (header) => {
-                  const leaf = header.subHeaders.length === 0
-                  const sorted = header.column.getIsSorted()
-                  return html`<th
-                    colspan=${header.colSpan}
-                    style="width:calc(var(--header-${header.id}-size) * 1px)"
-                    aria-sort=${leaf ? sortAriaValue(sorted) : undefined}
-                    class="${!leaf ? 'column-group-header' : ''} ${leaf && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}"
-                  >
-                    ${
+                    group.headers,
+                    (header) => header.id,
+                    (header) => {
+                      const leaf = header.subHeaders.length === 0
+                      const sorted = header.column.getIsSorted()
+                      return html`<th
+                        colspan=${header.colSpan}
+                        style="width:calc(var(--header-${header.id}-size) * 1px)"
+                        aria-sort=${leaf ? sortAriaValue(sorted) : undefined}
+                        class="${!leaf ? 'column-group-header' : ''} ${leaf && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}"
+                      >
+                        ${
                       !header.isPlaceholder
                         ? leaf
                           ? html`<div
@@ -357,9 +357,9 @@ export class TradingTable extends ControllerElement {
                           : FlexRender({ header })
                         : null
                     }
-                  </th>`
-                },
-              )}
+                      </th>`
+                    },
+                  )}
                 </tr>`,
             )}
           </thead>

From a1b017e65562ac042ffc3b63c7e88c28ec319bf6 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 18 Aug 2026 11:10:33 +0000
Subject: [PATCH 15/23] ci: apply automated fixes (attempt 3/3)

---
 .../src/table/TradingTable.ts                 | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/examples/lit/realtime-trading/src/table/TradingTable.ts b/examples/lit/realtime-trading/src/table/TradingTable.ts
index fb873f9cb9..9aef3c081f 100644
--- a/examples/lit/realtime-trading/src/table/TradingTable.ts
+++ b/examples/lit/realtime-trading/src/table/TradingTable.ts
@@ -287,11 +287,11 @@ export class TradingTable extends ControllerElement {
                         class="${!leaf ? 'column-group-header' : ''} ${leaf && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}"
                       >
                         ${
-                      !header.isPlaceholder
-                        ? leaf
-                          ? html`<div
-                                class="leaf-header-content"
-                                @dragover=${(event: DragEvent) => {
+                          !header.isPlaceholder
+                            ? leaf
+                              ? html`<div
+                                    class="leaf-header-content"
+                                    @dragover=${(event: DragEvent) => {
                                   event.preventDefault()
                                   this.#showDrop(
                                     header.column.id,
@@ -300,7 +300,7 @@ export class TradingTable extends ControllerElement {
                                     ).closest('th'),
                                   )
                                 }}
-                                @drop=${(event: DragEvent) => {
+                                    @drop=${(event: DragEvent) => {
                                   event.preventDefault()
                                   const source =
                                     event.dataTransfer?.getData('text/plain') ||
@@ -317,13 +317,13 @@ export class TradingTable extends ControllerElement {
                                     )
                                   this.#clearDrag()
                                 }}
-                              >
-                                <button
-                                  type="button"
-                                  class="column-drag-handle"
-                                  draggable="true"
-                                  aria-label="Move ${header.column.id} column"
-                                  @dragstart=${(event: DragEvent) => {
+                                  >
+                                    <button
+                                      type="button"
+                                      class="column-drag-handle"
+                                      draggable="true"
+                                      aria-label="Move ${header.column.id} column"
+                                      @dragstart=${(event: DragEvent) => {
                                     this.#drag.columnId = header.column.id
                                     this.#drag.source = (
                                       event.currentTarget as HTMLElement
@@ -339,24 +339,24 @@ export class TradingTable extends ControllerElement {
                                       )
                                     }
                                   }}
-                                  @dragend=${this.#clearDrag}
-                                >
-                                  ⋮⋮</button
-                                ><button
-                                  type="button"
-                                  class="sort-header-button ${header.column.getCanSort() ? 'is-sortable' : ''}"
-                                  ?disabled=${!header.column.getCanSort()}
-                                  @click=${header.column.getToggleSortingHandler()}
-                                >
-                                  <span class="header-label"
-                                    >${FlexRender({ header })}</span
-                                  >${header.column.getCanSort() ? html`<span class="sort-indicator ${sorted ? 'is-active' : ''}" aria-hidden="true">${sortIndicator(sorted)}</span>` : null}
-                                </button>
-                              </div>
-                              ${header.column.getCanResize() ? html`<div class="column-resize-handle ${header.column.getIsResizing() ? 'is-resizing' : ''}" role="separator" aria-orientation="vertical" @dblclick=${() => header.column.resetSize()} @mousedown=${header.getResizeHandler()} @touchstart=${header.getResizeHandler()}></div>` : null}`
-                          : FlexRender({ header })
-                        : null
-                    }
+                                      @dragend=${this.#clearDrag}
+                                    >
+                                      ⋮⋮</button
+                                    ><button
+                                      type="button"
+                                      class="sort-header-button ${header.column.getCanSort() ? 'is-sortable' : ''}"
+                                      ?disabled=${!header.column.getCanSort()}
+                                      @click=${header.column.getToggleSortingHandler()}
+                                    >
+                                      <span class="header-label"
+                                        >${FlexRender({ header })}</span
+                                      >${header.column.getCanSort() ? html`<span class="sort-indicator ${sorted ? 'is-active' : ''}" aria-hidden="true">${sortIndicator(sorted)}</span>` : null}
+                                    </button>
+                                  </div>
+                                  ${header.column.getCanResize() ? html`<div class="column-resize-handle ${header.column.getIsResizing() ? 'is-resizing' : ''}" role="separator" aria-orientation="vertical" @dblclick=${() => header.column.resetSize()} @mousedown=${header.getResizeHandler()} @touchstart=${header.getResizeHandler()}></div>` : null}`
+                              : FlexRender({ header })
+                            : null
+                        }
                       </th>`
                     },
                   )}

From abc7843a33542d41a40032c783778d22593a4ec4 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Tue, 18 Aug 2026 13:39:23 +0200
Subject: [PATCH 16/23] refactor: optimize input/output handling in flex render
 components

- Replace `for...in` loops with `Object.keys()` for better performance and clarity.
- Simplify the rendering logic by removing unnecessary checks and parameters.
- Ensure consistent handling of injectors across component rendering.
---
 .changeset/fancy-times-jog.md                 |  5 ++
 .../flex-render/flexRenderComponentFactory.ts | 13 ++--
 .../angular-table/src/flex-render/renderer.ts | 63 +++++++------------
 3 files changed, 32 insertions(+), 49 deletions(-)
 create mode 100644 .changeset/fancy-times-jog.md

diff --git a/.changeset/fancy-times-jog.md b/.changeset/fancy-times-jog.md
new file mode 100644
index 0000000000..add52e7044
--- /dev/null
+++ b/.changeset/fancy-times-jog.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/angular-table': patch
+---
+
+improve flexRender instance reuse and reduce adapter allocations
diff --git a/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts b/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
index 2764bc2d3b..2e1148f310 100644
--- a/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
+++ b/packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
@@ -7,7 +7,6 @@ import {
   OutputRefSubscription,
   ViewContainerRef,
 } from '@angular/core'
-import { hasOwn } from '@tanstack/table-core'
 import type { FlexRenderComponent } from './flexRenderComponent'
 
 /**
@@ -112,7 +111,7 @@ export class FlexRenderComponentRef<T> {
   }
 
   setInputs(inputs: Record<string, unknown>) {
-    for (const prop in inputs) {
+    for (const prop of Object.keys(inputs)) {
       this.setInput(prop, inputs[prop])
     }
   }
@@ -130,7 +129,7 @@ export class FlexRenderComponentRef<T> {
     >,
   ) {
     this.#outputRegistry.unsubscribeAll()
-    for (const prop in outputs) {
+    for (const prop of Object.keys(outputs)) {
       this.setOutput(prop, outputs[prop])
     }
   }
@@ -169,10 +168,8 @@ export class FlexRenderComponentRef<T> {
   #syncInputs(newInputs: Record<string, unknown>): void {
     // Inputs use patch semantics: omitted keys keep their current value, while
     // an explicitly provided `undefined` is forwarded to Angular.
-    for (const prop in newInputs) {
-      if (hasOwn(newInputs, prop)) {
-        this.setInput(prop, newInputs[prop])
-      }
+    for (const prop of Object.keys(newInputs)) {
+      this.setInput(prop, newInputs[prop])
     }
   }
 
@@ -190,7 +187,7 @@ export class FlexRenderComponentRef<T> {
         this.#outputRegistry.unsubscribe(key)
       }
     }
-    for (const prop in outputs) {
+    for (const prop of outputKeys) {
       this.setOutput(prop, outputs[prop])
     }
   }
diff --git a/packages/angular-table/src/flex-render/renderer.ts b/packages/angular-table/src/flex-render/renderer.ts
index 5853d3c2ea..205bb0a196 100644
--- a/packages/angular-table/src/flex-render/renderer.ts
+++ b/packages/angular-table/src/flex-render/renderer.ts
@@ -163,6 +163,11 @@ export class FlexViewRenderer<
 
         if (!(this.#renderFlags & FlexRenderFlags.ViewFirstRender)) {
           if (previousContent !== content) {
+            // A new content input may install a different render function (or
+            // stop rendering a function), so its dependency effect must be
+            // replaced. Incompatible values returned by the same function only
+            // recreate the view and keep the existing effect.
+            this.#destroyContentEffect()
             this.#renderFlags |= FlexRenderFlags.ContentChanged
           }
           if (previousProps !== props) {
@@ -224,30 +229,15 @@ export class FlexViewRenderer<
   }
 
   #render(): void {
-    // Recreating a view also recreates its render-function effect. Its first
-    // execution only records dependencies; later executions schedule updates.
-    if (this.#shouldRecreateEntireView()) {
-      this.#destroyContentEffect()
-    }
-
+    // Resolved content can require a new view without changing the render
+    // function. Preserve its effect and checked state across that replacement.
     this.#destroyView()
 
     this.#renderFlags &=
       FlexRenderFlags.ViewFirstRender | FlexRenderFlags.RenderEffectChecked
 
     const content = this.#getContentValue()
-    if (content.kind !== 'null') {
-      const injector = this.#injector()
-      const parentInjector =
-        content.kind === 'flexRenderComponent'
-          ? (content.content.injector ?? injector)
-          : injector
-      this.#renderView = this.#renderViewByContent(
-        content,
-        this.#props(),
-        parentInjector,
-      )
-    }
+    this.#renderView = this.#renderViewByContent(content)
 
     // Render functions can read signals. Keep their dependency tracking in a
     // dedicated effect so the outer effect remains responsible only for
@@ -274,13 +264,6 @@ export class FlexViewRenderer<
     }
   }
 
-  #shouldRecreateEntireView(): boolean {
-    return !!(
-      this.#renderFlags &
-      (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)
-    )
-  }
-
   #doCheck(latestContent: FlexRenderTypedContent): void {
     if (
       latestContent.kind === 'null' ||
@@ -303,18 +286,18 @@ export class FlexViewRenderer<
   }
 
   #renderViewByContent(
-    content: Exclude<FlexRenderTypedContent, { kind: 'null' }>,
-    props: TProps,
-    parentInjector: Injector,
+    content: FlexRenderTypedContent,
   ): FlexRenderView<FlexRenderViewAllowedType, FlexRenderTypedContent> | null {
     if (content.kind === 'primitive') {
       return this.#renderStringContent(content)
     } else if (content.kind === 'templateRef') {
-      return this.#renderTemplateRefContent(content, parentInjector)
+      return this.#renderTemplateRefContent(content)
     } else if (content.kind === 'flexRenderComponent') {
-      return this.#renderComponent(content, parentInjector)
+      return this.#renderComponent(content)
+    } else if (content.kind === 'component') {
+      return this.#renderCustomComponent(content)
     }
-    return this.#renderCustomComponent(content, props, parentInjector)
+    return null
   }
 
   #renderStringContent(
@@ -334,7 +317,6 @@ export class FlexViewRenderer<
 
   #renderTemplateRefContent(
     template: Extract<FlexRenderTypedContent, { kind: 'templateRef' }>,
-    parentInjector: Injector,
   ): FlexRenderTemplateView {
     const latestProps = () => untracked(this.#props)
     const view = this.#viewContainerRef.createEmbeddedView(
@@ -344,7 +326,7 @@ export class FlexViewRenderer<
           return latestProps()
         },
       },
-      { injector: this.#getInjector(parentInjector) },
+      { injector: this.#getInjector() },
     )
     return new FlexRenderTemplateView(template, view)
   }
@@ -354,9 +336,10 @@ export class FlexViewRenderer<
       FlexRenderTypedContent,
       { kind: 'flexRenderComponent' }
     >,
-    parentInjector: Injector,
   ): FlexRenderComponentView {
-    const componentInjector = this.#getInjector(parentInjector)
+    const componentInjector = this.#getInjector(
+      flexRenderComponent.content.injector,
+    )
     const view = this.#flexRenderComponentFactory.createComponent(
       flexRenderComponent.content,
       componentInjector,
@@ -366,13 +349,11 @@ export class FlexViewRenderer<
 
   #renderCustomComponent(
     component: Extract<FlexRenderTypedContent, { kind: 'component' }>,
-    props: TProps,
-    parentInjector: Injector,
   ): FlexRenderComponentView {
     const instance = flexRenderComponent(component.content, {
-      inputs: props,
+      inputs: this.#props(),
     })
-    const injector = this.#getInjector(parentInjector)
+    const injector = this.#getInjector(instance.injector)
     const view = this.#flexRenderComponentFactory.createComponent(
       instance,
       injector,
@@ -380,7 +361,7 @@ export class FlexViewRenderer<
     return new FlexRenderComponentView(component, view)
   }
 
-  #getInjector(parentInjector: Injector) {
+  #getInjector(parentInjector?: Injector) {
     const getContext = () => this.#props()
     const proxy = new Proxy(this.#props(), {
       get: (_, key) => getContext()[key as keyof typeof _],
@@ -407,7 +388,7 @@ export class FlexViewRenderer<
     }
 
     return Injector.create({
-      parent: parentInjector,
+      parent: parentInjector ?? this.#injector(),
       providers: [
         ...staticProviders,
         { provide: FlexRenderComponentProps, useValue: proxy },

From 456cd7d0285d5ec7f332d5bc18904ac36772fb85 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Tue, 18 Aug 2026 14:23:52 +0200
Subject: [PATCH 17/23] Refactor table implementation and update examples

---
 examples/alpine/realtime-trading/README.md    |  9 +-
 .../benchmark/trading-benchmark-controller.ts |  2 +-
 .../src/feed/market-feed-controller.ts        | 95 ++++++++-----------
 examples/alpine/realtime-trading/src/main.ts  | 36 ++++++-
 examples/ember/realtime-trading/README.md     | 11 ++-
 .../benchmark/trading-benchmark-controller.ts |  2 +-
 .../app/components/shell/app-header.gts       | 22 ++---
 .../app/components/shell/configurator.gts     | 52 ++++++----
 .../components/shell/selected-instrument.gts  | 15 +--
 .../app/components/table/trading-table.gts    | 26 ++---
 .../app/feed/market-feed-controller.ts        | 95 ++++++++-----------
 examples/lit/realtime-trading/README.md       |  8 +-
 .../benchmark/trading-benchmark-controller.ts |  2 +-
 .../src/feed/market-feed-controller.ts        | 95 ++++++++-----------
 .../realtime-trading/src/shell/AppHeader.ts   | 10 +-
 .../src/shell/Configurator.ts                 | 16 +++-
 .../src/shell/SelectedInstrument.ts           |  4 +-
 .../src/table/TradingTable.ts                 |  9 +-
 examples/octane/realtime-trading/README.md    | 11 ++-
 .../benchmark/trading-benchmark-controller.ts |  2 +-
 .../src/feed/market-feed-controller.ts        | 95 ++++++++-----------
 .../realtime-trading/src/shell/AppHeader.tsrx | 20 ++--
 .../src/shell/Configurator.tsrx               | 41 ++++----
 .../src/shell/SelectedInstrument.tsrx         |  4 +-
 .../src/table/TradingTable.tsrx               | 20 ++--
 examples/preact/realtime-trading/README.md    | 10 +-
 .../benchmark/trading-benchmark-controller.ts |  2 +-
 .../src/feed/market-feed-controller.ts        | 95 ++++++++-----------
 .../src/shell/TradingShell.tsx                | 40 +++-----
 .../src/shell/trading-shell-context.tsx       | 13 +--
 .../src/table/trading-table.tsx               |  6 +-
 examples/react/realtime-trading/README.md     | 10 +-
 .../benchmark/trading-benchmark-controller.ts |  2 +-
 .../src/feed/market-feed-controller.ts        | 95 ++++++++-----------
 .../src/shell/TradingShell.tsx                | 43 +++------
 .../src/shell/trading-shell-context.tsx       | 13 +--
 .../src/table/trading-table.tsx               |  6 +-
 examples/svelte/realtime-trading/README.md    |  7 +-
 .../benchmark/trading-benchmark-controller.ts |  2 +-
 .../src/feed/market-feed-controller.ts        | 95 ++++++++-----------
 .../src/shell/AppHeader.svelte                |  6 +-
 .../src/shell/Configurator.svelte             | 23 +++--
 .../src/shell/SelectedInstrument.svelte       |  2 +-
 .../src/table/TradingTable.svelte             | 13 +--
 examples/vue/realtime-trading/README.md       | 10 +-
 .../benchmark/trading-benchmark-controller.ts |  2 +-
 .../src/feed/market-feed-controller.ts        | 95 ++++++++-----------
 .../src/shell/TradingShell.tsx                | 33 +++++--
 .../src/shell/trading-shell-context.ts        | 11 +--
 .../src/table/trading-table.tsx               |  5 +-
 50 files changed, 612 insertions(+), 729 deletions(-)

diff --git a/examples/alpine/realtime-trading/README.md b/examples/alpine/realtime-trading/README.md
index 5e86616696..fb3ebcc177 100644
--- a/examples/alpine/realtime-trading/README.md
+++ b/examples/alpine/realtime-trading/README.md
@@ -26,7 +26,7 @@ Use a production build for performance recordings.
 
 | Path                                | Responsibility                                                                                                |
 | ----------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `src/feed/`                         | Market model, instrument universe, feed config, immutable update helpers, and Store-backed feed controller.   |
+| `src/feed/`                         | Market model, instrument universe, feed config, immutable update helpers, and direct TanStack atom controller. |
 | `src/feed/worker/`                  | Typed protocol, deterministic engine, and module worker.                                                      |
 | `src/benchmark/`                    | Browser monitor and benchmark controller.                                                                     |
 | `src/shell/configurator-options.ts` | Declarative select/range options used by the sidebar.                                                         |
@@ -37,10 +37,11 @@ Use a production build for performance recordings.
 
 Alpine keeps the markup declarative in `index.html`; `tradingApp` owns only the
 runtime coordination that cannot live in HTML. Feed and benchmark remain
-separate controllers. Their Store values are copied into one Alpine reactive
-view object by subscriptions, while selected symbol and renderer mode stay in
+separate controllers. Direct feed atoms are bridged into an Alpine reactive view
+object individually: the high-frequency `quotes` atom is independent from
+status and configuration atoms. Selected symbol and renderer mode are also
 dedicated atoms. Every subscription, observer, virtualizer mount, controller,
-and worker has an explicit cleanup registered by `init()`/`destroy()`.
+and worker has explicit cleanup registered by `init()`/`destroy()`.
 
 ## Feed and worker pipeline
 
diff --git a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 9f4361b3da..604d8efe42 100644
--- a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,7 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.store.get().instrumentCount >=
+          this.feed.instrumentCount.get() >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
diff --git a/examples/alpine/realtime-trading/src/feed/market-feed-controller.ts b/examples/alpine/realtime-trading/src/feed/market-feed-controller.ts
index 73716811be..40f523562d 100644
--- a/examples/alpine/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/alpine/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/store'
+import { batch, createAtom } from '@tanstack/store'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -8,17 +8,6 @@ import type {
 } from './worker/market-feed-protocol'
 import type { MarketQuote } from './market-data'
 
-export interface MarketFeedState {
-  workerReady: boolean
-  running: boolean
-  instrumentCount: number
-  targetTicksPerSecond: number
-  publishIntervalMs: number
-  updateSparklines: boolean
-  sparklineSampleIntervalMs: number
-  quotes: Array<MarketQuote>
-}
-
 export interface MarketFeedBatch {
   tickCount: number
   updateCount: number
@@ -43,19 +32,23 @@ export interface MarketFeedActions {
   reset: () => void
 }
 
-const initialState: MarketFeedState = {
-  workerReady: false,
-  running: true,
-  instrumentCount: initialMarketFeedConfig.instrumentCount,
-  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
-  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
-  updateSparklines: initialMarketFeedConfig.updateSparklines,
-  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
-  quotes: [],
-}
-
 export class MarketFeedController {
-  readonly store = createStore<MarketFeedState>(initialState)
+  readonly workerReady = createAtom(false)
+  readonly running = createAtom(true)
+  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = createAtom(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = createAtom(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  readonly updateSparklines = createAtom(
+    initialMarketFeedConfig.updateSparklines,
+  )
+  readonly sparklineSampleIntervalMs = createAtom(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
+  readonly quotes = createAtom<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -70,38 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.store.get().running
-        this.#patch({ running })
+        const running = !this.running.get()
+        this.running.set(running)
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.#patch({ instrumentCount: count })
+        this.instrumentCount.set(count)
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.#patch({
-          targetTicksPerSecond: sampleRate,
-        })
+        this.targetTicksPerSecond.set(sampleRate)
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.#patch({ publishIntervalMs })
+        this.publishIntervalMs.set(publishIntervalMs)
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
+        this.updateSparklines.set(enabled)
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.sparklineSampleIntervalMs.set(intervalMs)
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+      reset: () => this.#resetWorker(this.instrumentCount.get()),
     }
   }
 
@@ -113,15 +104,14 @@ export class MarketFeedController {
     this.#runtime.worker = worker
     worker.addEventListener('message', this.#handleWorkerMessage)
     worker.addEventListener('error', this.#handleWorkerError)
-    const state = this.store.get()
     this.#post({
       type: 'start',
-      rowCount: state.instrumentCount,
-      running: state.running,
-      ticksPerSecond: state.targetTicksPerSecond,
-      publishIntervalMs: state.publishIntervalMs,
-      updateSparklines: state.updateSparklines,
-      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+      rowCount: this.instrumentCount.get(),
+      running: this.running.get(),
+      ticksPerSecond: this.targetTicksPerSecond.get(),
+      publishIntervalMs: this.publishIntervalMs.get(),
+      updateSparklines: this.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
     })
     return () => this.stop()
   }
@@ -165,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.store.get().running })
+      this.#post({ type: 'set-running', running: this.running.get() })
     }
   }
 
@@ -183,10 +173,8 @@ export class MarketFeedController {
         quotes.map((quote, index) => [quote.symbol, index]),
       )
       batch(() => {
-        this.#patch({
-          quotes,
-          workerReady: true,
-        })
+        this.quotes.set(quotes)
+        this.workerReady.set(true)
       })
       return
     }
@@ -197,9 +185,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.#patch({
-      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
-    })
+    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -211,12 +197,15 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
+    batch(() => {
+      this.workerReady.set(false)
+      this.running.set(false)
+    })
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.#patch({ workerReady: false })
+    this.workerReady.set(false)
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
@@ -230,10 +219,6 @@ export class MarketFeedController {
     }
   }
 
-  #patch(patch: Partial<MarketFeedState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #post(command: MarketFeedCommand): void {
     this.#runtime.worker?.postMessage(command)
   }
diff --git a/examples/alpine/realtime-trading/src/main.ts b/examples/alpine/realtime-trading/src/main.ts
index 758bddcb8c..dc27b85c9d 100644
--- a/examples/alpine/realtime-trading/src/main.ts
+++ b/examples/alpine/realtime-trading/src/main.ts
@@ -64,7 +64,16 @@ Alpine.data('tradingApp', () => {
   const feed = new MarketFeedController()
   const controller = new TradingBenchmarkController(feed)
   const local = Alpine.reactive({
-    feed: feed.store.get(),
+    feed: {
+      workerReady: feed.workerReady.get(),
+      running: feed.running.get(),
+      instrumentCount: feed.instrumentCount.get(),
+      targetTicksPerSecond: feed.targetTicksPerSecond.get(),
+      publishIntervalMs: feed.publishIntervalMs.get(),
+      updateSparklines: feed.updateSparklines.get(),
+      sparklineSampleIntervalMs: feed.sparklineSampleIntervalMs.get(),
+      quotes: feed.quotes.get(),
+    },
     benchmark: controller.store.get(),
     selectedSymbol: controller.renderAtoms.selectedSymbol.get(),
     rendererMode: controller.renderAtoms.rendererMode.get(),
@@ -217,8 +226,29 @@ Alpine.data('tradingApp', () => {
         subtree: true,
       })
       const subscriptions = [
-        feed.store.subscribe((state) => {
-          local.feed = state
+        feed.workerReady.subscribe((value) => {
+          local.feed.workerReady = value
+        }),
+        feed.running.subscribe((value) => {
+          local.feed.running = value
+        }),
+        feed.instrumentCount.subscribe((value) => {
+          local.feed.instrumentCount = value
+        }),
+        feed.targetTicksPerSecond.subscribe((value) => {
+          local.feed.targetTicksPerSecond = value
+        }),
+        feed.publishIntervalMs.subscribe((value) => {
+          local.feed.publishIntervalMs = value
+        }),
+        feed.updateSparklines.subscribe((value) => {
+          local.feed.updateSparklines = value
+        }),
+        feed.sparklineSampleIntervalMs.subscribe((value) => {
+          local.feed.sparklineSampleIntervalMs = value
+        }),
+        feed.quotes.subscribe((quotes) => {
+          local.feed.quotes = quotes
           Alpine.nextTick(() => feed.completeRender())
         }),
         controller.store.subscribe((state) => {
diff --git a/examples/ember/realtime-trading/README.md b/examples/ember/realtime-trading/README.md
index 62e8a0f096..398b327b48 100644
--- a/examples/ember/realtime-trading/README.md
+++ b/examples/ember/realtime-trading/README.md
@@ -26,7 +26,7 @@ build for performance recordings.
 
 | Path                            | Responsibility                                                                                                |
 | ------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `app/feed/`                     | Market model, instrument universe, configuration, immutable update helpers, and Store-backed feed controller. |
+| `app/feed/`                     | Market model, instrument universe, configuration, immutable update helpers, and direct TanStack atom controller. |
 | `app/feed/worker/`              | Typed protocol, deterministic engine, and module worker.                                                      |
 | `app/benchmark/`                | Browser monitor and benchmark controller.                                                                     |
 | `app/components/shell/`         | GTS header, metrics, configurator, diagnostics, selected instrument, status bar, and shell layout.            |
@@ -39,9 +39,10 @@ build for performance recordings.
 `MarketFeedController` owns worker/feed state. `TradingBenchmarkController`
 observes feed lifecycle callbacks and owns diagnostic/view state. The
 application passes stable controllers to shell/table components; owner-bound
-subscription helpers bridge selected TanStack Store values into Glimmer and
-register destruction automatically. The root does not proxy every quote or
-metric as application state.
+subscription helpers bridge selected TanStack atoms or stores into tracked
+Glimmer fields and register destruction automatically. `quotes` is an isolated
+high-frequency atom; feed status and each configuration value are separate
+atoms. The root does not proxy every quote or metric as application state.
 
 ## Feed and worker pipeline
 
@@ -96,7 +97,7 @@ creates every Glimmer row/cell.
 
 - worker-side generation and pre-message coalescing;
 - immutable structural sharing for rows/history;
-- owner-bound, slice-oriented Store subscriptions;
+- owner-bound, source-specific atom/store subscriptions;
 - stable table and virtual row identity;
 - componentized GTS shell/table/cell boundaries;
 - delegated pointer input and CSS hover;
diff --git a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
index 9f4361b3da..604d8efe42 100644
--- a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
+++ b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
@@ -63,7 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.store.get().instrumentCount >=
+          this.feed.instrumentCount.get() >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
diff --git a/examples/ember/realtime-trading/app/components/shell/app-header.gts b/examples/ember/realtime-trading/app/components/shell/app-header.gts
index 9ffe6241ff..bcec132f31 100644
--- a/examples/ember/realtime-trading/app/components/shell/app-header.gts
+++ b/examples/ember/realtime-trading/app/components/shell/app-header.gts
@@ -3,10 +3,7 @@ import { tracked } from '@glimmer/tracking'
 import { on } from '@ember/modifier'
 import { observeValue } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
-import type {
-  MarketFeedController,
-  MarketFeedState,
-} from '../../feed/market-feed-controller'
+import type { MarketFeedController } from '../../feed/market-feed-controller'
 
 interface Signature {
   Args: {
@@ -17,18 +14,19 @@ interface Signature {
 }
 
 export default class AppHeader extends Component<Signature> {
-  @tracked feedState: MarketFeedState
+  @tracked workerReady: boolean
+  @tracked running: boolean
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
-    this.feedState = args.feed.store.get()
-    observeValue(this, args.feed.store, (state) => {
-      this.feedState = state
-    })
+    this.workerReady = args.feed.workerReady.get()
+    this.running = args.feed.running.get()
+    observeValue(this, args.feed.workerReady, (value) => { this.workerReady = value })
+    observeValue(this, args.feed.running, (value) => { this.running = value })
   }
   get status() {
-    return !this.feedState.workerReady
+    return !this.workerReady
       ? 'FEED CONNECTING'
-      : this.feedState.running
+      : this.running
         ? 'FEED LIVE'
         : 'FEED PAUSED'
   }
@@ -39,7 +37,7 @@ export default class AppHeader extends Component<Signature> {
         <span
           class='feed-status
             {{if
-              (and this.feedState.workerReady this.feedState.running)
+              (and this.workerReady this.running)
               "is-running"
             }}'
           data-testid='feed-status'
diff --git a/examples/ember/realtime-trading/app/components/shell/configurator.gts b/examples/ember/realtime-trading/app/components/shell/configurator.gts
index 3c19e4ff3c..3e0314c63e 100644
--- a/examples/ember/realtime-trading/app/components/shell/configurator.gts
+++ b/examples/ember/realtime-trading/app/components/shell/configurator.gts
@@ -15,10 +15,7 @@ import { configuratorOptions } from './configurator-options'
 import Diagnostics from './diagnostics.gts'
 import SelectedInstrument from './selected-instrument.gts'
 import type Owner from '@ember/owner'
-import type {
-  MarketFeedController,
-  MarketFeedState,
-} from '../../feed/market-feed-controller'
+import type { MarketFeedController } from '../../feed/market-feed-controller'
 import type {
   TradingBenchmarkController,
   TradingBenchmarkState,
@@ -36,18 +33,31 @@ const rate = new Intl.NumberFormat('en-US', {
 export default class Configurator extends Component<Signature> {
   readonly feedSampleRateOptions = feedSampleRateOptions
   readonly options = configuratorOptions
-  @tracked feedState: MarketFeedState
+  @tracked running: boolean
+  @tracked instrumentCount: number
+  @tracked targetTicksPerSecond: number
+  @tracked publishIntervalMs: number
+  @tracked updateSparklines: boolean
+  @tracked sparklineSampleIntervalMs: number
   @tracked benchmark: TradingBenchmarkState
   @tracked rendererMode: RendererMode
 
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
-    this.feedState = args.feed.store.get()
+    this.running = args.feed.running.get()
+    this.instrumentCount = args.feed.instrumentCount.get()
+    this.targetTicksPerSecond = args.feed.targetTicksPerSecond.get()
+    this.publishIntervalMs = args.feed.publishIntervalMs.get()
+    this.updateSparklines = args.feed.updateSparklines.get()
+    this.sparklineSampleIntervalMs = args.feed.sparklineSampleIntervalMs.get()
     this.benchmark = args.controller.store.get()
     this.rendererMode = args.controller.renderAtoms.rendererMode.get()
-    observeValue(this, args.feed.store, (state) => {
-      this.feedState = state
-    })
+    observeValue(this, args.feed.running, (value) => { this.running = value })
+    observeValue(this, args.feed.instrumentCount, (value) => { this.instrumentCount = value })
+    observeValue(this, args.feed.targetTicksPerSecond, (value) => { this.targetTicksPerSecond = value })
+    observeValue(this, args.feed.publishIntervalMs, (value) => { this.publishIntervalMs = value })
+    observeValue(this, args.feed.updateSparklines, (value) => { this.updateSparklines = value })
+    observeValue(this, args.feed.sparklineSampleIntervalMs, (value) => { this.sparklineSampleIntervalMs = value })
     observeValue(this, args.controller.store, (state) => {
       this.benchmark = state
     })
@@ -57,19 +67,19 @@ export default class Configurator extends Component<Signature> {
   }
 
   get virtualForced() {
-    return this.feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+    return this.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
   }
   get virtualMode() {
     return resolveVirtualScrollMode(
       this.benchmark.requestedVirtualScrollMode,
-      this.feedState.instrumentCount,
+      this.instrumentCount,
     )
   }
   get sampleRateIndex() {
-    return feedSampleRateIndex(this.feedState.targetTicksPerSecond)
+    return feedSampleRateIndex(this.targetTicksPerSecond)
   }
   get sampleRateLabel() {
-    return `${rate.format(this.feedState.targetTicksPerSecond)} samples/s`
+    return `${rate.format(this.targetTicksPerSecond)} samples/s`
   }
   get virtualDescription() {
     return this.virtualForced
@@ -118,18 +128,18 @@ export default class Configurator extends Component<Signature> {
           type='button'
           data-testid='feed-toggle'
           {{on 'click' @feed.actions.toggle}}
-        >{{if this.feedState.running 'PAUSE FEED' 'START FEED'}}</button>
+        >{{if this.running 'PAUSE FEED' 'START FEED'}}</button>
         <label class='field'><span>Instruments (rows)</span>
           <select
             data-testid='instrument-count-select'
-            value={{this.feedState.instrumentCount}}
+            value={{this.instrumentCount}}
             {{on 'change' this.setInstrumentCount}}
           >
             {{#each this.options.instrumentCounts as |item|}}<option
                 value={{optionValue item}}
                 selected={{eq
                   (optionValue item)
-                  this.feedState.instrumentCount
+                  this.instrumentCount
                 }}
               >{{optionLabel item}}</option>{{/each}}
           </select>
@@ -153,14 +163,14 @@ export default class Configurator extends Component<Signature> {
         <label class='field'><span>Worker delivery interval</span>
           <select
             data-testid='publish-interval-select'
-            value={{this.feedState.publishIntervalMs}}
+            value={{this.publishIntervalMs}}
             {{on 'change' this.setPublishInterval}}
           >
             {{#each this.options.workerDeliveryIntervals as |item|}}<option
                 value={{optionValue item}}
                 selected={{eq
                   (optionValue item)
-                  this.feedState.publishIntervalMs
+                  this.publishIntervalMs
                 }}
               >{{optionLabel item}}</option>{{/each}}
           </select>
@@ -191,21 +201,21 @@ export default class Configurator extends Component<Signature> {
               direction changes</small></span></label>
         <label class='toggle-field'><input
             type='checkbox'
-            checked={{this.feedState.updateSparklines}}
+            checked={{this.updateSparklines}}
             {{on 'change' this.setSparklineUpdates}}
           /><span>Update intraday charts<small>sample rolling prices
               independently</small></span></label>
         <label class='field'><span>Intraday chart sampling</span>
           <select
             data-testid='sparkline-sample-interval-select'
-            value={{this.feedState.sparklineSampleIntervalMs}}
+            value={{this.sparklineSampleIntervalMs}}
             {{on 'change' this.setSparklineInterval}}
           >
             {{#each this.options.intradaySamplingIntervals as |item|}}<option
                 value={{optionValue item}}
                 selected={{eq
                   (optionValue item)
-                  this.feedState.sparklineSampleIntervalMs
+                  this.sparklineSampleIntervalMs
                 }}
               >{{optionLabel item}}</option>{{/each}}
           </select>
diff --git a/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts b/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
index 240c960e06..620b0c0fe6 100644
--- a/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
+++ b/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
@@ -3,10 +3,7 @@ import { tracked } from '@glimmer/tracking'
 import { observeValue } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
 import type { MarketQuote } from '../../feed/market-data'
-import type {
-  MarketFeedController,
-  MarketFeedState,
-} from '../../feed/market-feed-controller'
+import type { MarketFeedController } from '../../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
 interface Signature {
@@ -14,21 +11,19 @@ interface Signature {
 }
 
 export default class SelectedInstrument extends Component<Signature> {
-  @tracked feedState: MarketFeedState
+  @tracked quotes: Array<MarketQuote>
   @tracked symbol: string | null
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
-    this.feedState = args.feed.store.get()
+    this.quotes = args.feed.quotes.get()
     this.symbol = args.controller.renderAtoms.selectedSymbol.get()
-    observeValue(this, args.feed.store, (state) => {
-      this.feedState = state
-    })
+    observeValue(this, args.feed.quotes, (quotes) => { this.quotes = quotes })
     observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => {
       this.symbol = symbol
     })
   }
   get quote(): MarketQuote | null {
-    return this.args.feed.getQuoteBySymbol(this.feedState.quotes, this.symbol)
+    return this.args.feed.getQuoteBySymbol(this.quotes, this.symbol)
   }
   <template>
     <section
diff --git a/examples/ember/realtime-trading/app/components/table/trading-table.gts b/examples/ember/realtime-trading/app/components/table/trading-table.gts
index b844f13343..f7785e1bd7 100644
--- a/examples/ember/realtime-trading/app/components/table/trading-table.gts
+++ b/examples/ember/realtime-trading/app/components/table/trading-table.gts
@@ -39,10 +39,7 @@ import {
 import { observeValue, registerCleanup } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
 import type { MarketQuote } from '../../feed/market-data'
-import type {
-  MarketFeedController,
-  MarketFeedState,
-} from '../../feed/market-feed-controller'
+import type { MarketFeedController } from '../../feed/market-feed-controller'
 import type {
   TradingBenchmarkController,
   TradingBenchmarkState,
@@ -70,7 +67,8 @@ const captureElement = modifier(
 )
 
 export default class TradingTable extends Component<Signature> {
-  @tracked feedState: MarketFeedState
+  @tracked quotes: Array<MarketQuote>
+  @tracked instrumentCount: number
   @tracked benchmark: TradingBenchmarkState
   @tracked rendererMode: RendererMode
   @tracked selectedSymbol: string | null
@@ -95,7 +93,8 @@ export default class TradingTable extends Component<Signature> {
 
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
-    this.feedState = args.feed.store.get()
+    this.quotes = args.feed.quotes.get()
+    this.instrumentCount = args.feed.instrumentCount.get()
     this.benchmark = args.controller.store.get()
     this.rendererMode = args.controller.renderAtoms.rendererMode.get()
     this.selectedSymbol = args.controller.renderAtoms.selectedSymbol.get()
@@ -103,17 +102,20 @@ export default class TradingTable extends Component<Signature> {
     this.table = useTable(this, () => ({
       features: tradingFeatures,
       columns: this.columns,
-      data: this.feedState.quotes,
+      data: this.quotes,
       getRowId: (row: MarketQuote) => row.id,
       columnResizeMode: 'onChange' as const,
       defaultColumn: { minSize: 56, maxSize: 800 },
       autoResetCellSelection: false,
     }))
-    observeValue(this, args.feed.store, (state) => {
-      this.feedState = state
-      this.table.setOptions((options) => ({ ...options, data: state.quotes }))
+    observeValue(this, args.feed.quotes, (quotes) => {
+      this.quotes = quotes
+      this.table.setOptions((options) => ({ ...options, data: quotes }))
       queueMicrotask(() => args.feed.completeRender())
     })
+    observeValue(this, args.feed.instrumentCount, (instrumentCount) => {
+      this.instrumentCount = instrumentCount
+    })
     observeValue(this, args.controller.store, (state) => {
       this.benchmark = state
     })
@@ -159,7 +161,7 @@ export default class TradingTable extends Component<Signature> {
   get virtualMode() {
     return resolveVirtualScrollMode(
       this.benchmark.requestedVirtualScrollMode,
-      this.feedState.instrumentCount,
+      this.instrumentCount,
     )
   }
   get renderedRows(): Array<RenderedRow> {
@@ -405,7 +407,7 @@ export default class TradingTable extends Component<Signature> {
         <tbody
           class={{if (eq this.virtualMode 'tanstack') 'virtual-table-body'}}
           style={{bodyStyle this.virtualMode this.totalVirtualHeight}}
-          data-source-row-count={{this.feedState.quotes.length}}
+          data-source-row-count={{this.quotes.length}}
           {{captureElement this.captureBody}}
           {{on 'mousedown' this.onBodyMouseDown}}
           {{on 'pointerover' this.onBodyPointerOver}}
diff --git a/examples/ember/realtime-trading/app/feed/market-feed-controller.ts b/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
index 73716811be..40f523562d 100644
--- a/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
+++ b/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/store'
+import { batch, createAtom } from '@tanstack/store'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -8,17 +8,6 @@ import type {
 } from './worker/market-feed-protocol'
 import type { MarketQuote } from './market-data'
 
-export interface MarketFeedState {
-  workerReady: boolean
-  running: boolean
-  instrumentCount: number
-  targetTicksPerSecond: number
-  publishIntervalMs: number
-  updateSparklines: boolean
-  sparklineSampleIntervalMs: number
-  quotes: Array<MarketQuote>
-}
-
 export interface MarketFeedBatch {
   tickCount: number
   updateCount: number
@@ -43,19 +32,23 @@ export interface MarketFeedActions {
   reset: () => void
 }
 
-const initialState: MarketFeedState = {
-  workerReady: false,
-  running: true,
-  instrumentCount: initialMarketFeedConfig.instrumentCount,
-  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
-  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
-  updateSparklines: initialMarketFeedConfig.updateSparklines,
-  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
-  quotes: [],
-}
-
 export class MarketFeedController {
-  readonly store = createStore<MarketFeedState>(initialState)
+  readonly workerReady = createAtom(false)
+  readonly running = createAtom(true)
+  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = createAtom(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = createAtom(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  readonly updateSparklines = createAtom(
+    initialMarketFeedConfig.updateSparklines,
+  )
+  readonly sparklineSampleIntervalMs = createAtom(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
+  readonly quotes = createAtom<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -70,38 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.store.get().running
-        this.#patch({ running })
+        const running = !this.running.get()
+        this.running.set(running)
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.#patch({ instrumentCount: count })
+        this.instrumentCount.set(count)
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.#patch({
-          targetTicksPerSecond: sampleRate,
-        })
+        this.targetTicksPerSecond.set(sampleRate)
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.#patch({ publishIntervalMs })
+        this.publishIntervalMs.set(publishIntervalMs)
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
+        this.updateSparklines.set(enabled)
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.sparklineSampleIntervalMs.set(intervalMs)
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+      reset: () => this.#resetWorker(this.instrumentCount.get()),
     }
   }
 
@@ -113,15 +104,14 @@ export class MarketFeedController {
     this.#runtime.worker = worker
     worker.addEventListener('message', this.#handleWorkerMessage)
     worker.addEventListener('error', this.#handleWorkerError)
-    const state = this.store.get()
     this.#post({
       type: 'start',
-      rowCount: state.instrumentCount,
-      running: state.running,
-      ticksPerSecond: state.targetTicksPerSecond,
-      publishIntervalMs: state.publishIntervalMs,
-      updateSparklines: state.updateSparklines,
-      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+      rowCount: this.instrumentCount.get(),
+      running: this.running.get(),
+      ticksPerSecond: this.targetTicksPerSecond.get(),
+      publishIntervalMs: this.publishIntervalMs.get(),
+      updateSparklines: this.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
     })
     return () => this.stop()
   }
@@ -165,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.store.get().running })
+      this.#post({ type: 'set-running', running: this.running.get() })
     }
   }
 
@@ -183,10 +173,8 @@ export class MarketFeedController {
         quotes.map((quote, index) => [quote.symbol, index]),
       )
       batch(() => {
-        this.#patch({
-          quotes,
-          workerReady: true,
-        })
+        this.quotes.set(quotes)
+        this.workerReady.set(true)
       })
       return
     }
@@ -197,9 +185,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.#patch({
-      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
-    })
+    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -211,12 +197,15 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
+    batch(() => {
+      this.workerReady.set(false)
+      this.running.set(false)
+    })
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.#patch({ workerReady: false })
+    this.workerReady.set(false)
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
@@ -230,10 +219,6 @@ export class MarketFeedController {
     }
   }
 
-  #patch(patch: Partial<MarketFeedState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #post(command: MarketFeedCommand): void {
     this.#runtime.worker?.postMessage(command)
   }
diff --git a/examples/lit/realtime-trading/README.md b/examples/lit/realtime-trading/README.md
index 7ddb4d630b..3e5be64551 100644
--- a/examples/lit/realtime-trading/README.md
+++ b/examples/lit/realtime-trading/README.md
@@ -26,7 +26,7 @@ Use the production build for measurements.
 
 | Path                              | Responsibility                                                                                       |
 | --------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `src/feed/`                       | Market types, instruments, configuration, immutable updates, and Store-backed feed controller.       |
+| `src/feed/`                       | Market types, instruments, configuration, immutable updates, and direct TanStack atom feed controller. |
 | `src/feed/worker/`                | Protocol, deterministic engine, and module worker.                                                   |
 | `src/benchmark/`                  | Browser monitor, benchmark controller, table timing, and row-model diagnostics.                      |
 | `src/shell/`                      | Custom elements for header, metrics, controls, diagnostics, selected instrument, status, and layout. |
@@ -37,7 +37,9 @@ Use the production build for measurements.
 
 The feed controller is independent from the benchmark controller. The root
 passes stable controller objects; each shell/table custom element observes the
-specific Store/atom sources it consumes. `ControllerElement` converts those
+specific atom/store sources it consumes. Quotes and every feed control/status
+value are independent direct atoms; the table observes only `quotes` and
+`instrumentCount`. `ControllerElement` converts those
 notifications into `requestUpdate()` and guarantees unsubscribe on disconnect,
 avoiding one broad application-level subscription.
 
@@ -94,7 +96,7 @@ all elements even when the browser skips some offscreen layout/paint.
 
 - worker-side generation and coalescing;
 - structural sharing for unchanged rows/history arrays;
-- source-specific Store subscriptions in custom elements;
+- source-specific atom/store subscriptions in custom elements;
 - stable keyed row/virtual identity;
 - lifecycle-safe controller element subscriptions;
 - delegated pointer input and CSS hover;
diff --git a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 9f4361b3da..604d8efe42 100644
--- a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,7 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.store.get().instrumentCount >=
+          this.feed.instrumentCount.get() >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
diff --git a/examples/lit/realtime-trading/src/feed/market-feed-controller.ts b/examples/lit/realtime-trading/src/feed/market-feed-controller.ts
index 73716811be..40f523562d 100644
--- a/examples/lit/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/lit/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/store'
+import { batch, createAtom } from '@tanstack/store'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -8,17 +8,6 @@ import type {
 } from './worker/market-feed-protocol'
 import type { MarketQuote } from './market-data'
 
-export interface MarketFeedState {
-  workerReady: boolean
-  running: boolean
-  instrumentCount: number
-  targetTicksPerSecond: number
-  publishIntervalMs: number
-  updateSparklines: boolean
-  sparklineSampleIntervalMs: number
-  quotes: Array<MarketQuote>
-}
-
 export interface MarketFeedBatch {
   tickCount: number
   updateCount: number
@@ -43,19 +32,23 @@ export interface MarketFeedActions {
   reset: () => void
 }
 
-const initialState: MarketFeedState = {
-  workerReady: false,
-  running: true,
-  instrumentCount: initialMarketFeedConfig.instrumentCount,
-  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
-  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
-  updateSparklines: initialMarketFeedConfig.updateSparklines,
-  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
-  quotes: [],
-}
-
 export class MarketFeedController {
-  readonly store = createStore<MarketFeedState>(initialState)
+  readonly workerReady = createAtom(false)
+  readonly running = createAtom(true)
+  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = createAtom(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = createAtom(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  readonly updateSparklines = createAtom(
+    initialMarketFeedConfig.updateSparklines,
+  )
+  readonly sparklineSampleIntervalMs = createAtom(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
+  readonly quotes = createAtom<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -70,38 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.store.get().running
-        this.#patch({ running })
+        const running = !this.running.get()
+        this.running.set(running)
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.#patch({ instrumentCount: count })
+        this.instrumentCount.set(count)
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.#patch({
-          targetTicksPerSecond: sampleRate,
-        })
+        this.targetTicksPerSecond.set(sampleRate)
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.#patch({ publishIntervalMs })
+        this.publishIntervalMs.set(publishIntervalMs)
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
+        this.updateSparklines.set(enabled)
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.sparklineSampleIntervalMs.set(intervalMs)
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+      reset: () => this.#resetWorker(this.instrumentCount.get()),
     }
   }
 
@@ -113,15 +104,14 @@ export class MarketFeedController {
     this.#runtime.worker = worker
     worker.addEventListener('message', this.#handleWorkerMessage)
     worker.addEventListener('error', this.#handleWorkerError)
-    const state = this.store.get()
     this.#post({
       type: 'start',
-      rowCount: state.instrumentCount,
-      running: state.running,
-      ticksPerSecond: state.targetTicksPerSecond,
-      publishIntervalMs: state.publishIntervalMs,
-      updateSparklines: state.updateSparklines,
-      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+      rowCount: this.instrumentCount.get(),
+      running: this.running.get(),
+      ticksPerSecond: this.targetTicksPerSecond.get(),
+      publishIntervalMs: this.publishIntervalMs.get(),
+      updateSparklines: this.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
     })
     return () => this.stop()
   }
@@ -165,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.store.get().running })
+      this.#post({ type: 'set-running', running: this.running.get() })
     }
   }
 
@@ -183,10 +173,8 @@ export class MarketFeedController {
         quotes.map((quote, index) => [quote.symbol, index]),
       )
       batch(() => {
-        this.#patch({
-          quotes,
-          workerReady: true,
-        })
+        this.quotes.set(quotes)
+        this.workerReady.set(true)
       })
       return
     }
@@ -197,9 +185,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.#patch({
-      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
-    })
+    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -211,12 +197,15 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
+    batch(() => {
+      this.workerReady.set(false)
+      this.running.set(false)
+    })
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.#patch({ workerReady: false })
+    this.workerReady.set(false)
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
@@ -230,10 +219,6 @@ export class MarketFeedController {
     }
   }
 
-  #patch(patch: Partial<MarketFeedState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #post(command: MarketFeedCommand): void {
     this.#runtime.worker?.postMessage(command)
   }
diff --git a/examples/lit/realtime-trading/src/shell/AppHeader.ts b/examples/lit/realtime-trading/src/shell/AppHeader.ts
index 553ec4f452..4b349bab9b 100644
--- a/examples/lit/realtime-trading/src/shell/AppHeader.ts
+++ b/examples/lit/realtime-trading/src/shell/AppHeader.ts
@@ -9,18 +9,20 @@ export class AppHeader extends ControllerElement {
   @property({ type: Boolean }) sidebarOpen = true
   @property({ attribute: false }) toggleSidebar: () => void = () => undefined
   protected firstUpdated() {
-    this.observe(this.feed.store)
+    this.observe(this.feed.workerReady)
+    this.observe(this.feed.running)
   }
   protected render() {
-    const state = this.feed.store.get()
+    const workerReady = this.feed.workerReady.get()
+    const running = this.feed.running.get()
     return html`<header class="app-bar">
       <div class="brand"><strong>MARKET MONITOR</strong></div>
       <div class="header-actions">
         <span
-          class="feed-status ${state.workerReady && state.running ? 'is-running' : ''}"
+          class="feed-status ${workerReady && running ? 'is-running' : ''}"
           data-testid="feed-status"
           ><span class="status-dot" aria-hidden="true"></span
-          >${!state.workerReady ? 'FEED CONNECTING' : state.running ? 'FEED LIVE' : 'FEED PAUSED'}</span
+          >${!workerReady ? 'FEED CONNECTING' : running ? 'FEED LIVE' : 'FEED PAUSED'}</span
         ><button
           class="sidebar-toggle"
           type="button"
diff --git a/examples/lit/realtime-trading/src/shell/Configurator.ts b/examples/lit/realtime-trading/src/shell/Configurator.ts
index e91760fa4a..a38128df81 100644
--- a/examples/lit/realtime-trading/src/shell/Configurator.ts
+++ b/examples/lit/realtime-trading/src/shell/Configurator.ts
@@ -44,10 +44,22 @@ export class Configurator extends ControllerElement {
   protected firstUpdated() {
     this.observe(this.controller.store)
     this.observe(this.controller.renderAtoms.rendererMode)
-    this.observe(this.feed.store)
+    this.observe(this.feed.running)
+    this.observe(this.feed.instrumentCount)
+    this.observe(this.feed.targetTicksPerSecond)
+    this.observe(this.feed.publishIntervalMs)
+    this.observe(this.feed.updateSparklines)
+    this.observe(this.feed.sparklineSampleIntervalMs)
   }
   protected render() {
-    const feedState = this.feed.store.get()
+    const feedState = {
+      running: this.feed.running.get(),
+      instrumentCount: this.feed.instrumentCount.get(),
+      targetTicksPerSecond: this.feed.targetTicksPerSecond.get(),
+      publishIntervalMs: this.feed.publishIntervalMs.get(),
+      updateSparklines: this.feed.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.feed.sparklineSampleIntervalMs.get(),
+    }
     const benchmark = this.controller.store.get()
     const forced = feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
     const virtualMode = resolveVirtualScrollMode(
diff --git a/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts b/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
index ac5e406294..4676a16fe5 100644
--- a/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
+++ b/examples/lit/realtime-trading/src/shell/SelectedInstrument.ts
@@ -10,11 +10,11 @@ export class SelectedInstrument extends ControllerElement {
   @property({ attribute: false }) feed!: MarketFeedController
   protected firstUpdated() {
     this.observe(this.controller.renderAtoms.selectedSymbol)
-    this.observe(this.feed.store)
+    this.observe(this.feed.quotes)
   }
   protected render() {
     const quote = this.feed.getQuoteBySymbol(
-      this.feed.store.get().quotes,
+      this.feed.quotes.get(),
       this.controller.renderAtoms.selectedSymbol.get(),
     )
     return html`<section
diff --git a/examples/lit/realtime-trading/src/table/TradingTable.ts b/examples/lit/realtime-trading/src/table/TradingTable.ts
index 9aef3c081f..a01d147a8a 100644
--- a/examples/lit/realtime-trading/src/table/TradingTable.ts
+++ b/examples/lit/realtime-trading/src/table/TradingTable.ts
@@ -88,7 +88,8 @@ export class TradingTable extends ControllerElement {
   #cleanup: Array<() => void> = []
 
   protected firstUpdated() {
-    this.observe(this.feed.store)
+    this.observe(this.feed.quotes)
+    this.observe(this.feed.instrumentCount)
     this.observe(this.controller.store)
     this.observe(this.controller.renderAtoms.rendererMode)
     this.observe(this.controller.renderAtoms.selectedSymbol)
@@ -179,7 +180,7 @@ export class TradingTable extends ControllerElement {
         key: 'lit-realtime-trading',
         features,
         columns: this.#columns,
-        data: this.feed.store.get().quotes,
+        data: this.feed.quotes.get(),
         getRowId: (row) => row.id,
         columnResizeMode: 'onChange',
         defaultColumn: { minSize: 56, maxSize: 800 },
@@ -198,7 +199,7 @@ export class TradingTable extends ControllerElement {
     const benchmark = this.controller.store.get()
     const virtualMode = resolveVirtualScrollMode(
       benchmark.requestedVirtualScrollMode,
-      this.feed.store.get().instrumentCount,
+      this.feed.instrumentCount.get(),
     )
     const virtualizer = this.#virtualizer.getVirtualizer()
     virtualizer.setOptions({
@@ -366,7 +367,7 @@ export class TradingTable extends ControllerElement {
           <tbody
             class=${virtualMode === 'tanstack' ? 'virtual-table-body' : ''}
             style=${virtualMode === 'tanstack' ? `height:${virtualizer.getTotalSize()}px` : ''}
-            data-source-row-count=${this.feed.store.get().quotes.length}
+            data-source-row-count=${this.feed.quotes.get().length}
             @mousedown=${(event: MouseEvent) => this.#pointer.handleMouseDown(table, event, this.controller.actions.selectSymbol)}
             @pointerover=${(event: MouseEvent) => this.#pointer.handlePointerOver(table, event)}
             @mouseleave=${() => this.#pointer.resetPointerCell()}
diff --git a/examples/octane/realtime-trading/README.md b/examples/octane/realtime-trading/README.md
index f138e71f0e..34f0aa820a 100644
--- a/examples/octane/realtime-trading/README.md
+++ b/examples/octane/realtime-trading/README.md
@@ -26,21 +26,22 @@ Use a production build for representative measurements.
 
 | Path                      | Responsibility                                                                                               |
 | ------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `src/feed/`               | Market model, instruments, feed config, immutable update helpers, and TanStack Store feed controller.        |
+| `src/feed/`               | Market model, instruments, feed config, immutable update helpers, and direct TanStack atom feed controller.  |
 | `src/feed/worker/`        | Typed protocol, deterministic engine, and module worker.                                                     |
 | `src/benchmark/`          | Browser monitor, benchmark controller, table observer, and row-model timing.                                 |
 | `src/shell/`              | Separate TSRX header, metrics, configurator, diagnostics, selected-instrument, status, and shell components. |
 | `src/table/table-config/` | Grouped columns and custom TSRX quote components.                                                            |
 | `src/table/`              | Octane Table view/setup, interactions, pointer hook, column layout, and Virtual Core hook.                   |
-| `src/use-store-value.ts`  | Small Octane hooks that subscribe to a whole store or a compared selector slice.                             |
+| `src/use-store-value.ts`  | Small Octane hooks that subscribe to an atom, a whole store, or a compared selector slice.                   |
 | `src/main.tsrx`           | Creates controllers and renders the shell composition root.                                                  |
 
 `MarketFeedController` owns feed/worker state. `TradingBenchmarkController`
 observes it and owns diagnostic/view state. The shell receives stable controller
 objects; individual components call `useStoreSelector` or `useStoreValue` for
-the values they need. Selector comparison retains the previous value when its
-slice is unchanged, preventing unrelated controller publications from
-invalidating that component.
+the values they need. Quotes, feed status, row count, workload, delivery, and
+chart controls are direct independent atoms. The table subscribes to `quotes`
+and `instrumentCount`, so a configurator/status update cannot invalidate table
+data. Benchmark metrics remain an aggregate snapshot store.
 
 ## Feed and worker pipeline
 
diff --git a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 9f4361b3da..604d8efe42 100644
--- a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,7 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.store.get().instrumentCount >=
+          this.feed.instrumentCount.get() >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
diff --git a/examples/octane/realtime-trading/src/feed/market-feed-controller.ts b/examples/octane/realtime-trading/src/feed/market-feed-controller.ts
index 73716811be..40f523562d 100644
--- a/examples/octane/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/octane/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/store'
+import { batch, createAtom } from '@tanstack/store'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -8,17 +8,6 @@ import type {
 } from './worker/market-feed-protocol'
 import type { MarketQuote } from './market-data'
 
-export interface MarketFeedState {
-  workerReady: boolean
-  running: boolean
-  instrumentCount: number
-  targetTicksPerSecond: number
-  publishIntervalMs: number
-  updateSparklines: boolean
-  sparklineSampleIntervalMs: number
-  quotes: Array<MarketQuote>
-}
-
 export interface MarketFeedBatch {
   tickCount: number
   updateCount: number
@@ -43,19 +32,23 @@ export interface MarketFeedActions {
   reset: () => void
 }
 
-const initialState: MarketFeedState = {
-  workerReady: false,
-  running: true,
-  instrumentCount: initialMarketFeedConfig.instrumentCount,
-  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
-  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
-  updateSparklines: initialMarketFeedConfig.updateSparklines,
-  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
-  quotes: [],
-}
-
 export class MarketFeedController {
-  readonly store = createStore<MarketFeedState>(initialState)
+  readonly workerReady = createAtom(false)
+  readonly running = createAtom(true)
+  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = createAtom(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = createAtom(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  readonly updateSparklines = createAtom(
+    initialMarketFeedConfig.updateSparklines,
+  )
+  readonly sparklineSampleIntervalMs = createAtom(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
+  readonly quotes = createAtom<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -70,38 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.store.get().running
-        this.#patch({ running })
+        const running = !this.running.get()
+        this.running.set(running)
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.#patch({ instrumentCount: count })
+        this.instrumentCount.set(count)
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.#patch({
-          targetTicksPerSecond: sampleRate,
-        })
+        this.targetTicksPerSecond.set(sampleRate)
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.#patch({ publishIntervalMs })
+        this.publishIntervalMs.set(publishIntervalMs)
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
+        this.updateSparklines.set(enabled)
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.sparklineSampleIntervalMs.set(intervalMs)
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+      reset: () => this.#resetWorker(this.instrumentCount.get()),
     }
   }
 
@@ -113,15 +104,14 @@ export class MarketFeedController {
     this.#runtime.worker = worker
     worker.addEventListener('message', this.#handleWorkerMessage)
     worker.addEventListener('error', this.#handleWorkerError)
-    const state = this.store.get()
     this.#post({
       type: 'start',
-      rowCount: state.instrumentCount,
-      running: state.running,
-      ticksPerSecond: state.targetTicksPerSecond,
-      publishIntervalMs: state.publishIntervalMs,
-      updateSparklines: state.updateSparklines,
-      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+      rowCount: this.instrumentCount.get(),
+      running: this.running.get(),
+      ticksPerSecond: this.targetTicksPerSecond.get(),
+      publishIntervalMs: this.publishIntervalMs.get(),
+      updateSparklines: this.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
     })
     return () => this.stop()
   }
@@ -165,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.store.get().running })
+      this.#post({ type: 'set-running', running: this.running.get() })
     }
   }
 
@@ -183,10 +173,8 @@ export class MarketFeedController {
         quotes.map((quote, index) => [quote.symbol, index]),
       )
       batch(() => {
-        this.#patch({
-          quotes,
-          workerReady: true,
-        })
+        this.quotes.set(quotes)
+        this.workerReady.set(true)
       })
       return
     }
@@ -197,9 +185,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.#patch({
-      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
-    })
+    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -211,12 +197,15 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
+    batch(() => {
+      this.workerReady.set(false)
+      this.running.set(false)
+    })
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.#patch({ workerReady: false })
+    this.workerReady.set(false)
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
@@ -230,10 +219,6 @@ export class MarketFeedController {
     }
   }
 
-  #patch(patch: Partial<MarketFeedState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #post(command: MarketFeedCommand): void {
     this.#runtime.worker?.postMessage(command)
   }
diff --git a/examples/octane/realtime-trading/src/shell/AppHeader.tsrx b/examples/octane/realtime-trading/src/shell/AppHeader.tsrx
index 5ac4e13537..d5bd0cdce6 100644
--- a/examples/octane/realtime-trading/src/shell/AppHeader.tsrx
+++ b/examples/octane/realtime-trading/src/shell/AppHeader.tsrx
@@ -1,26 +1,18 @@
-import { shallowEqual, useStoreSelector } from '../use-store-value'
-import type { MarketFeedController, MarketFeedState } from '../feed/market-feed-controller'
-
-const selectFeedStatus = (state: MarketFeedState) => ({
-  workerReady: state.workerReady,
-  running: state.running,
-})
+import { useStoreValue } from '../use-store-value'
+import type { MarketFeedController } from '../feed/market-feed-controller'
 
 export function AppHeader(props: {
   feed: MarketFeedController
   sidebarOpen: boolean
   toggleSidebar: () => void
 }) @{
-  const state = useStoreSelector(
-    props.feed.store,
-    selectFeedStatus,
-    shallowEqual,
-  )
-  const status = !state.workerReady ? 'FEED CONNECTING' : state.running ? 'FEED LIVE' : 'FEED PAUSED'
+  const workerReady = useStoreValue(props.feed.workerReady)
+  const running = useStoreValue(props.feed.running)
+  const status = !workerReady ? 'FEED CONNECTING' : running ? 'FEED LIVE' : 'FEED PAUSED'
   <header className="app-bar">
     <div className="brand"><strong>MARKET MONITOR</strong></div>
     <div className="header-actions">
-      <span className={`feed-status ${state.workerReady && state.running ? 'is-running' : ''}`} data-testid="feed-status">
+      <span className={`feed-status ${workerReady && running ? 'is-running' : ''}`} data-testid="feed-status">
         <span className="status-dot" aria-hidden="true" />{status}
       </span>
       <button
diff --git a/examples/octane/realtime-trading/src/shell/Configurator.tsrx b/examples/octane/realtime-trading/src/shell/Configurator.tsrx
index 9aba645780..3ebe3a0902 100644
--- a/examples/octane/realtime-trading/src/shell/Configurator.tsrx
+++ b/examples/octane/realtime-trading/src/shell/Configurator.tsrx
@@ -1,21 +1,13 @@
 import { feedSampleRateAt, feedSampleRateIndex, feedSampleRateOptions } from '../feed/feed-sample-rates'
 import { FORCED_VIRTUALIZATION_ROW_COUNT, resolveVirtualScrollMode } from '../table/trading-row-virtualizer'
-import { shallowEqual, useStoreSelector, useStoreValue } from '../use-store-value'
+import { useStoreSelector, useStoreValue } from '../use-store-value'
 import { configuratorOptions } from './configurator-options'
 import { Diagnostics } from './Diagnostics.tsrx'
 import { SelectedInstrument } from './SelectedInstrument.tsrx'
-import type { MarketFeedController, MarketFeedState } from '../feed/market-feed-controller'
+import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController, TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
 
 const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
-const selectConfiguratorFeedState = (state: MarketFeedState) => ({
-  running: state.running,
-  instrumentCount: state.instrumentCount,
-  targetTicksPerSecond: state.targetTicksPerSecond,
-  publishIntervalMs: state.publishIntervalMs,
-  updateSparklines: state.updateSparklines,
-  sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
-})
 const selectRequestedVirtualScrollMode = (state: TradingBenchmarkState) =>
   state.requestedVirtualScrollMode
 
@@ -23,10 +15,13 @@ export function Configurator(props: {
   controller: TradingBenchmarkController
   feed: MarketFeedController
 }) @{
-  const feedState = useStoreSelector(
-    props.feed.store,
-    selectConfiguratorFeedState,
-    shallowEqual,
+  const running = useStoreValue(props.feed.running)
+  const instrumentCount = useStoreValue(props.feed.instrumentCount)
+  const targetTicksPerSecond = useStoreValue(props.feed.targetTicksPerSecond)
+  const publishIntervalMs = useStoreValue(props.feed.publishIntervalMs)
+  const updateSparklines = useStoreValue(props.feed.updateSparklines)
+  const sparklineSampleIntervalMs = useStoreValue(
+    props.feed.sparklineSampleIntervalMs,
   )
   const requestedVirtualScrollMode = useStoreSelector(
     props.controller.store,
@@ -34,10 +29,10 @@ export function Configurator(props: {
     Object.is,
   )
   const rendererMode = useStoreValue(props.controller.renderAtoms.rendererMode)
-  const forced = feedState.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
+  const forced = instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
   const virtualMode = resolveVirtualScrollMode(
     requestedVirtualScrollMode,
-    feedState.instrumentCount,
+    instrumentCount,
   )
   const value = (event: Event): string => (event.target as HTMLInputElement | HTMLSelectElement).value
   const number = (event: Event): number => Number(value(event))
@@ -48,13 +43,13 @@ export function Configurator(props: {
     <section className="config-section" aria-labelledby="feed-settings">
       <h2 id="feed-settings">FEED</h2>
       <button className="primary-action" type="button" data-testid="feed-toggle" onClick={props.feed.actions.toggle}>
-        {feedState.running ? 'PAUSE FEED' : 'START FEED'}
+        {running ? 'PAUSE FEED' : 'START FEED'}
       </button>
       <label className="field">
         <span>Instruments (rows)</span>
         <select
           data-testid="instrument-count-select"
-          value={feedState.instrumentCount}
+          value={instrumentCount}
           onChange={(event) => {
             props.controller.actions.resetViewState()
             props.feed.actions.setInstrumentCount(number(event))
@@ -66,21 +61,21 @@ export function Configurator(props: {
         </select>
       </label>
       <label className="field rate-field">
-        <span>Synthetic quote workload <strong data-testid="target-sample-rate">{rate.format(feedState.targetTicksPerSecond)} samples/s</strong></span>
+        <span>Synthetic quote workload <strong data-testid="target-sample-rate">{rate.format(targetTicksPerSecond)} samples/s</strong></span>
         <input
           data-testid="target-rate-slider"
           type="range"
           min="0"
           max={feedSampleRateOptions.length - 1}
           step="1"
-          value={feedSampleRateIndex(feedState.targetTicksPerSecond)}
+          value={feedSampleRateIndex(targetTicksPerSecond)}
           onChange={(event) => props.feed.actions.setTargetRate(feedSampleRateAt(number(event)))}
         />
         <small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small>
       </label>
       <label className="field">
         <span>Worker delivery interval</span>
-        <select data-testid="publish-interval-select" value={feedState.publishIntervalMs} onChange={(event) => props.feed.actions.setPublishInterval(number(event))}>
+        <select data-testid="publish-interval-select" value={publishIntervalMs} onChange={(event) => props.feed.actions.setPublishInterval(number(event))}>
           @for (const option of configuratorOptions.workerDeliveryIntervals; key option.value) {
             <option value={option.value}>{option.label}</option>
           }
@@ -109,12 +104,12 @@ export function Configurator(props: {
         <span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span>
       </label>
       <label className="toggle-field">
-        <input type="checkbox" checked={feedState.updateSparklines} onChange={(event) => props.feed.actions.setSparklineUpdates(checked(event))} />
+        <input type="checkbox" checked={updateSparklines} onChange={(event) => props.feed.actions.setSparklineUpdates(checked(event))} />
         <span>Update intraday charts<small>sample rolling prices independently</small></span>
       </label>
       <label className="field">
         <span>Intraday chart sampling</span>
-        <select data-testid="sparkline-sample-interval-select" value={feedState.sparklineSampleIntervalMs} onChange={(event) => props.feed.actions.setSparklineSampleInterval(number(event))}>
+        <select data-testid="sparkline-sample-interval-select" value={sparklineSampleIntervalMs} onChange={(event) => props.feed.actions.setSparklineSampleInterval(number(event))}>
           @for (const option of configuratorOptions.intradaySamplingIntervals; key option.value) {
             <option value={option.value}>{option.label}</option>
           }
diff --git a/examples/octane/realtime-trading/src/shell/SelectedInstrument.tsrx b/examples/octane/realtime-trading/src/shell/SelectedInstrument.tsrx
index b108842cc0..63cfd83348 100644
--- a/examples/octane/realtime-trading/src/shell/SelectedInstrument.tsrx
+++ b/examples/octane/realtime-trading/src/shell/SelectedInstrument.tsrx
@@ -6,9 +6,9 @@ export function SelectedInstrument(props: {
   controller: TradingBenchmarkController
   feed: MarketFeedController
 }) @{
-  const feedState = useStoreValue(props.feed.store)
+  const quotes = useStoreValue(props.feed.quotes)
   const symbol = useStoreValue(props.controller.renderAtoms.selectedSymbol)
-  const quote = props.feed.getQuoteBySymbol(feedState.quotes, symbol)
+  const quote = props.feed.getQuoteBySymbol(quotes, symbol)
   <section className="config-section selected-instrument" data-testid="selected-instrument">
     <h2>SELECTED INSTRUMENT</h2>
     {quote ? <>
diff --git a/examples/octane/realtime-trading/src/table/TradingTable.tsrx b/examples/octane/realtime-trading/src/table/TradingTable.tsrx
index 8dd5356c4d..d4f194c795 100644
--- a/examples/octane/realtime-trading/src/table/TradingTable.tsrx
+++ b/examples/octane/realtime-trading/src/table/TradingTable.tsrx
@@ -9,7 +9,7 @@ import {
   useTable,
 } from '@tanstack/octane-table'
 import { startTableBenchmark } from '../benchmark/table-benchmark'
-import { shallowEqual, useStoreSelector, useStoreValue } from '../use-store-value'
+import { useStoreSelector, useStoreValue } from '../use-store-value'
 import { createTradingColumns, readMeasuredRows } from './table-config/trading-columns.tsrx'
 import { handleCellNavigation, reorderColumnIds, sortAriaValue, sortIndicator } from './table-interactions'
 import { TRADING_ROW_HEIGHT, TRADING_ROW_OVERSCAN, resolveVirtualScrollMode, useVirtualizer } from './trading-row-virtualizer'
@@ -17,7 +17,6 @@ import { useTradingGridPointer } from './use-trading-grid-pointer'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { MarketQuote } from '../feed/market-data'
 import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
-import type { MarketFeedState } from '../feed/market-feed-controller'
 import type { TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
 
 const features = tableFeatures({
@@ -28,10 +27,6 @@ const features = tableFeatures({
   sortFns: { basic: sortFn_basic },
 })
 
-const selectTableFeedState = (state: MarketFeedState) => ({
-  quotes: state.quotes,
-  instrumentCount: state.instrumentCount,
-})
 const selectRequestedVirtualScrollMode = (state: TradingBenchmarkState) =>
   state.requestedVirtualScrollMode
 
@@ -41,11 +36,8 @@ interface TradingTableProps {
 }
 
 export function TradingTable({ controller, feed }: TradingTableProps) @{
-  const feedState = useStoreSelector(
-    feed.store,
-    selectTableFeedState,
-    shallowEqual,
-  )
+  const quotes = useStoreValue(feed.quotes)
+  const instrumentCount = useStoreValue(feed.instrumentCount)
   const requestedVirtualScrollMode = useStoreSelector(
     controller.store,
     selectRequestedVirtualScrollMode,
@@ -61,7 +53,7 @@ export function TradingTable({ controller, feed }: TradingTableProps) @{
     {
       features,
       columns,
-      data: feedState.quotes,
+      data: quotes,
       getRowId: (row: MarketQuote) => row.id,
       columnResizeMode: 'onChange',
       defaultColumn: { minSize: 56, maxSize: 800 },
@@ -78,7 +70,7 @@ export function TradingTable({ controller, feed }: TradingTableProps) @{
   const rows = readMeasuredRows(() => table.getRowModel().rows)
   const virtualMode = resolveVirtualScrollMode(
     requestedVirtualScrollMode,
-    feedState.instrumentCount,
+    instrumentCount,
   )
   const scrollRef = useRef<HTMLDivElement | null>(null)
   const tableRef = useRef<HTMLTableElement | null>(null)
@@ -288,7 +280,7 @@ export function TradingTable({ controller, feed }: TradingTableProps) @{
           ref={bodyRef}
           className={virtualMode === 'tanstack' ? 'virtual-table-body' : undefined}
           style={virtualMode === 'tanstack' ? { height: `${virtualizer.getTotalSize()}px` } : undefined}
-          data-source-row-count={feedState.quotes.length}
+          data-source-row-count={quotes.length}
           onMouseDown={pointer.onMouseDown}
           onPointerOver={pointer.onPointerOver}
           onMouseLeave={pointer.onMouseLeave}
diff --git a/examples/preact/realtime-trading/README.md b/examples/preact/realtime-trading/README.md
index c890c5e425..983bac8e69 100644
--- a/examples/preact/realtime-trading/README.md
+++ b/examples/preact/realtime-trading/README.md
@@ -38,9 +38,11 @@ absolute cost.
 Feed state and benchmark state are different controllers. The feed does not
 depend on the monitor; the benchmark subscribes to feed lifecycle callbacks.
 TanStack Preact Store contexts pass stable controller objects, while components
-use selectors for the state slices they actually display. Renderer mode and
-selected symbol are separate atoms so their updates do not invalidate unrelated
-shell content.
+subscribe to direct feed atoms. `quotes` has an independent high-frequency atom;
+status, instrument count, workload, delivery, and chart settings each have their
+own atom and cannot notify the table data boundary. Renderer mode and selected
+symbol are also separate atoms so their updates do not invalidate unrelated
+shell content. Benchmark metrics remain an aggregate snapshot store.
 
 ## Feed and worker pipeline
 
@@ -105,7 +107,7 @@ avoid mounting every component in Full DOM mode.
 - worker-side generation and pre-message coalescing;
 - structural sharing for unchanged rows and histories;
 - stable table/virtualizer keys;
-- selector-based Preact Store subscriptions;
+- direct Preact Store atom subscriptions, including an isolated quote atom;
 - table/row/resize subscription boundaries;
 - one delegated grid interaction controller;
 - CSS variables for column sizing;
diff --git a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index ac2ccf0a4d..8ec69a1950 100644
--- a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,7 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.store.get().instrumentCount >=
+          this.feed.instrumentCount.get() >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
diff --git a/examples/preact/realtime-trading/src/feed/market-feed-controller.ts b/examples/preact/realtime-trading/src/feed/market-feed-controller.ts
index f59ff8afa0..df732bfbfb 100644
--- a/examples/preact/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/preact/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/preact-store'
+import { batch, createAtom } from '@tanstack/preact-store'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -8,17 +8,6 @@ import type {
 } from './worker/market-feed-protocol'
 import type { MarketQuote } from './market-data'
 
-export interface MarketFeedState {
-  workerReady: boolean
-  running: boolean
-  instrumentCount: number
-  targetTicksPerSecond: number
-  publishIntervalMs: number
-  updateSparklines: boolean
-  sparklineSampleIntervalMs: number
-  quotes: Array<MarketQuote>
-}
-
 export interface MarketFeedBatch {
   tickCount: number
   updateCount: number
@@ -43,19 +32,23 @@ export interface MarketFeedActions {
   reset: () => void
 }
 
-const initialState: MarketFeedState = {
-  workerReady: false,
-  running: true,
-  instrumentCount: initialMarketFeedConfig.instrumentCount,
-  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
-  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
-  updateSparklines: initialMarketFeedConfig.updateSparklines,
-  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
-  quotes: [],
-}
-
 export class MarketFeedController {
-  readonly store = createStore<MarketFeedState>(initialState)
+  readonly workerReady = createAtom(false)
+  readonly running = createAtom(true)
+  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = createAtom(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = createAtom(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  readonly updateSparklines = createAtom(
+    initialMarketFeedConfig.updateSparklines,
+  )
+  readonly sparklineSampleIntervalMs = createAtom(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
+  readonly quotes = createAtom<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -70,38 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.store.get().running
-        this.#patch({ running })
+        const running = !this.running.get()
+        this.running.set(running)
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.#patch({ instrumentCount: count })
+        this.instrumentCount.set(count)
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.#patch({
-          targetTicksPerSecond: sampleRate,
-        })
+        this.targetTicksPerSecond.set(sampleRate)
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.#patch({ publishIntervalMs })
+        this.publishIntervalMs.set(publishIntervalMs)
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
+        this.updateSparklines.set(enabled)
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.sparklineSampleIntervalMs.set(intervalMs)
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+      reset: () => this.#resetWorker(this.instrumentCount.get()),
     }
   }
 
@@ -113,15 +104,14 @@ export class MarketFeedController {
     this.#runtime.worker = worker
     worker.addEventListener('message', this.#handleWorkerMessage)
     worker.addEventListener('error', this.#handleWorkerError)
-    const state = this.store.get()
     this.#post({
       type: 'start',
-      rowCount: state.instrumentCount,
-      running: state.running,
-      ticksPerSecond: state.targetTicksPerSecond,
-      publishIntervalMs: state.publishIntervalMs,
-      updateSparklines: state.updateSparklines,
-      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+      rowCount: this.instrumentCount.get(),
+      running: this.running.get(),
+      ticksPerSecond: this.targetTicksPerSecond.get(),
+      publishIntervalMs: this.publishIntervalMs.get(),
+      updateSparklines: this.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
     })
     return () => this.stop()
   }
@@ -165,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.store.get().running })
+      this.#post({ type: 'set-running', running: this.running.get() })
     }
   }
 
@@ -183,10 +173,8 @@ export class MarketFeedController {
         quotes.map((quote, index) => [quote.symbol, index]),
       )
       batch(() => {
-        this.#patch({
-          quotes,
-          workerReady: true,
-        })
+        this.quotes.set(quotes)
+        this.workerReady.set(true)
       })
       return
     }
@@ -197,9 +185,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.#patch({
-      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
-    })
+    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -211,12 +197,15 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
+    batch(() => {
+      this.workerReady.set(false)
+      this.running.set(false)
+    })
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.#patch({ workerReady: false })
+    this.workerReady.set(false)
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
@@ -230,10 +219,6 @@ export class MarketFeedController {
     }
   }
 
-  #patch(patch: Partial<MarketFeedState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #post(command: MarketFeedCommand): void {
     this.#runtime.worker?.postMessage(command)
   }
diff --git a/examples/preact/realtime-trading/src/shell/TradingShell.tsx b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
index f11fd20caa..edc596b864 100644
--- a/examples/preact/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
@@ -11,7 +11,6 @@ import {
 } from '../table/trading-row-virtualizer'
 import {
   useMarketFeedController,
-  useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from './trading-shell-context'
@@ -58,13 +57,9 @@ function AppHeader(props: {
   sidebarOpen: boolean
   onSidebarToggle: () => void
 }) {
-  const { workerReady, running } = useMarketFeedState(
-    (state) => ({
-      workerReady: state.workerReady,
-      running: state.running,
-    }),
-    { compare: shallow },
-  )
+  const feed = useMarketFeedController()
+  const workerReady = useSelector(feed.workerReady)
+  const running = useSelector(feed.running)
   return (
     <header className="app-bar">
       <div className="brand">
@@ -133,17 +128,6 @@ function MarketStatusbar() {
 }
 
 function Configurator() {
-  const feedState = useMarketFeedState(
-    (storeState) => ({
-      running: storeState.running,
-      instrumentCount: storeState.instrumentCount,
-      targetTicksPerSecond: storeState.targetTicksPerSecond,
-      publishIntervalMs: storeState.publishIntervalMs,
-      updateSparklines: storeState.updateSparklines,
-      sparklineSampleIntervalMs: storeState.sparklineSampleIntervalMs,
-    }),
-    { compare: shallow },
-  )
   const benchmarkState = useTradingShellState(
     (storeState) => ({
       requestedVirtualScrollMode: storeState.requestedVirtualScrollMode,
@@ -152,17 +136,17 @@ function Configurator() {
   )
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
+  const running = useSelector(feed.running)
+  const instrumentCount = useSelector(feed.instrumentCount)
+  const targetTicksPerSecond = useSelector(feed.targetTicksPerSecond)
+  const publishIntervalMs = useSelector(feed.publishIntervalMs)
+  const updateSparklines = useSelector(feed.updateSparklines)
+  const sparklineSampleIntervalMs = useSelector(
+    feed.sparklineSampleIntervalMs,
+  )
   const rendererMode = useSelector(controller.renderAtoms.rendererMode)
   const { actions } = controller
   const feedActions = feed.actions
-  const {
-    running,
-    instrumentCount,
-    targetTicksPerSecond,
-    publishIntervalMs,
-    updateSparklines,
-    sparklineSampleIntervalMs,
-  } = feedState
   const { requestedVirtualScrollMode } = benchmarkState
   const { setRendererMode, setVirtualScrollEnabled, resetMarket } = actions
   const {
@@ -582,7 +566,7 @@ function SelectedInstrument() {
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
   const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
-  const quotes = useMarketFeedState((state) => state.quotes)
+  const quotes = useSelector(feed.quotes)
   const selectedQuote = feed.getQuoteBySymbol(quotes, selectedSymbol)
   return (
     <section
diff --git a/examples/preact/realtime-trading/src/shell/trading-shell-context.tsx b/examples/preact/realtime-trading/src/shell/trading-shell-context.tsx
index b4651a3d0f..8ad0654958 100644
--- a/examples/preact/realtime-trading/src/shell/trading-shell-context.tsx
+++ b/examples/preact/realtime-trading/src/shell/trading-shell-context.tsx
@@ -1,9 +1,6 @@
 import { createStoreContext, useSelector } from '@tanstack/preact-store'
 import type { ComponentChildren } from 'preact'
-import type {
-  MarketFeedController,
-  MarketFeedState,
-} from '../feed/market-feed-controller'
+import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../benchmark/use-trading-benchmark-controller'
 import type { TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
 import type { UseSelectorOptions } from '@tanstack/preact-store'
@@ -51,11 +48,3 @@ export function useTradingShellState<TSelected>(
   const controller = useTradingShellController()
   return useSelector(controller.store, selector, options)
 }
-
-export function useMarketFeedState<TSelected>(
-  selector: (state: MarketFeedState) => TSelected,
-  options?: UseSelectorOptions<TSelected>,
-): TSelected {
-  const controller = useMarketFeedController()
-  return useSelector(controller.store, selector, options)
-}
diff --git a/examples/preact/realtime-trading/src/table/trading-table.tsx b/examples/preact/realtime-trading/src/table/trading-table.tsx
index e8cfb1b8ee..fcbec5865a 100644
--- a/examples/preact/realtime-trading/src/table/trading-table.tsx
+++ b/examples/preact/realtime-trading/src/table/trading-table.tsx
@@ -8,11 +8,11 @@ import {
   tableFeatures,
   useTable,
 } from '@tanstack/preact-table'
+import { useSelector } from '@tanstack/preact-store'
 import { useLayoutEffect, useRef, useState } from 'preact/hooks'
 import { useTableBenchmark } from '../benchmark/use-table-benchmark'
 import {
   useMarketFeedController,
-  useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from '../shell/trading-shell-context'
@@ -64,11 +64,11 @@ const features = tableFeatures({
 export function TradingTable() {
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
-  const quotes = useMarketFeedState((state) => state.quotes)
+  const quotes = useSelector(feed.quotes)
   const requestedVirtualScrollMode = useTradingShellState(
     (state) => state.requestedVirtualScrollMode,
   )
-  const instrumentCount = useMarketFeedState((state) => state.instrumentCount)
+  const instrumentCount = useSelector(feed.instrumentCount)
   const virtualScrollMode = resolveVirtualScrollMode(
     requestedVirtualScrollMode,
     instrumentCount,
diff --git a/examples/react/realtime-trading/README.md b/examples/react/realtime-trading/README.md
index cad136154e..91bb7eb251 100644
--- a/examples/react/realtime-trading/README.md
+++ b/examples/react/realtime-trading/README.md
@@ -45,7 +45,7 @@ available.
 | `src/feed/`               | Market types, instruments, feed configuration, immutable update helpers, controller, and React lifecycle hook. |
 | `src/feed/worker/`        | Worker protocol, deterministic market engine, and the module Web Worker.                                       |
 | `src/benchmark/`          | Browser monitor, benchmark controller, table observers, and React Profiler integration.                        |
-| `src/shell/`              | Store contexts, full-viewport shell, metrics, configurator, diagnostics, selected instrument, and status bar.  |
+| `src/shell/`              | Controller contexts, full-viewport shell, metrics, configurator, diagnostics, selected instrument, and status bar. |
 | `src/table/table-config/` | Grouped columns, row boundary, custom cells, and render counters.                                              |
 | `src/table/`              | Table instance, subscription boundaries, interactions, pointer hook, initial fit, and virtualization.          |
 | `src/App.tsx`             | Composition root; creates controllers, providers, shell, table, and Profiler boundary.                         |
@@ -90,7 +90,13 @@ an upstream WebSocket/SSE producer but does not include network latency.
 
 ## React state and rendering architecture
 
-- Feed and benchmark controllers use TanStack Store.
+- `MarketFeedController` exposes each feed value as a direct TanStack atom:
+  `quotes`, status, row count, workload, delivery, and chart controls do not
+  share one aggregate `MarketFeedState` notification.
+- `quotes` is its own high-frequency atom. The table subscribes to it directly,
+  while the header/configurator subscribe only to their lower-frequency atoms.
+- Benchmark summary state remains a TanStack Store because its metrics are
+  published together as one coherent snapshot.
 - `createStoreContext` provides the controllers without making every consumer
   subscribe to the complete state object.
 - Shell components call `useSelector` with narrow slices and shallow comparison
diff --git a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 01879ef8c9..cb3f4abf70 100644
--- a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,7 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.store.get().instrumentCount >=
+          this.feed.instrumentCount.get() >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
diff --git a/examples/react/realtime-trading/src/feed/market-feed-controller.ts b/examples/react/realtime-trading/src/feed/market-feed-controller.ts
index 939f6b5b97..eb90009b83 100644
--- a/examples/react/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/react/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/react-store'
+import { batch, createAtom } from '@tanstack/react-store'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -8,17 +8,6 @@ import type {
 } from './worker/market-feed-protocol'
 import type { MarketQuote } from './market-data'
 
-export interface MarketFeedState {
-  workerReady: boolean
-  running: boolean
-  instrumentCount: number
-  targetTicksPerSecond: number
-  publishIntervalMs: number
-  updateSparklines: boolean
-  sparklineSampleIntervalMs: number
-  quotes: Array<MarketQuote>
-}
-
 export interface MarketFeedBatch {
   tickCount: number
   updateCount: number
@@ -43,19 +32,23 @@ export interface MarketFeedActions {
   reset: () => void
 }
 
-const initialState: MarketFeedState = {
-  workerReady: false,
-  running: true,
-  instrumentCount: initialMarketFeedConfig.instrumentCount,
-  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
-  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
-  updateSparklines: initialMarketFeedConfig.updateSparklines,
-  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
-  quotes: [],
-}
-
 export class MarketFeedController {
-  readonly store = createStore<MarketFeedState>(initialState)
+  readonly workerReady = createAtom(false)
+  readonly running = createAtom(true)
+  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = createAtom(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = createAtom(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  readonly updateSparklines = createAtom(
+    initialMarketFeedConfig.updateSparklines,
+  )
+  readonly sparklineSampleIntervalMs = createAtom(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
+  readonly quotes = createAtom<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -70,38 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.store.get().running
-        this.#patch({ running })
+        const running = !this.running.get()
+        this.running.set(running)
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.#patch({ instrumentCount: count })
+        this.instrumentCount.set(count)
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.#patch({
-          targetTicksPerSecond: sampleRate,
-        })
+        this.targetTicksPerSecond.set(sampleRate)
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.#patch({ publishIntervalMs })
+        this.publishIntervalMs.set(publishIntervalMs)
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
+        this.updateSparklines.set(enabled)
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.sparklineSampleIntervalMs.set(intervalMs)
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+      reset: () => this.#resetWorker(this.instrumentCount.get()),
     }
   }
 
@@ -113,15 +104,14 @@ export class MarketFeedController {
     this.#runtime.worker = worker
     worker.addEventListener('message', this.#handleWorkerMessage)
     worker.addEventListener('error', this.#handleWorkerError)
-    const state = this.store.get()
     this.#post({
       type: 'start',
-      rowCount: state.instrumentCount,
-      running: state.running,
-      ticksPerSecond: state.targetTicksPerSecond,
-      publishIntervalMs: state.publishIntervalMs,
-      updateSparklines: state.updateSparklines,
-      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+      rowCount: this.instrumentCount.get(),
+      running: this.running.get(),
+      ticksPerSecond: this.targetTicksPerSecond.get(),
+      publishIntervalMs: this.publishIntervalMs.get(),
+      updateSparklines: this.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
     })
     return () => this.stop()
   }
@@ -165,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.store.get().running })
+      this.#post({ type: 'set-running', running: this.running.get() })
     }
   }
 
@@ -183,10 +173,8 @@ export class MarketFeedController {
         quotes.map((quote, index) => [quote.symbol, index]),
       )
       batch(() => {
-        this.#patch({
-          quotes,
-          workerReady: true,
-        })
+        this.quotes.set(quotes)
+        this.workerReady.set(true)
       })
       return
     }
@@ -197,9 +185,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.#patch({
-      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
-    })
+    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -211,12 +197,15 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
+    batch(() => {
+      this.workerReady.set(false)
+      this.running.set(false)
+    })
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.#patch({ workerReady: false })
+    this.workerReady.set(false)
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
@@ -230,10 +219,6 @@ export class MarketFeedController {
     }
   }
 
-  #patch(patch: Partial<MarketFeedState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #post(command: MarketFeedCommand): void {
     this.#runtime.worker?.postMessage(command)
   }
diff --git a/examples/react/realtime-trading/src/shell/TradingShell.tsx b/examples/react/realtime-trading/src/shell/TradingShell.tsx
index 76550989ec..e554f6c7cb 100644
--- a/examples/react/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/react/realtime-trading/src/shell/TradingShell.tsx
@@ -11,7 +11,6 @@ import {
 } from '../table/trading-row-virtualizer'
 import {
   useMarketFeedController,
-  useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from './trading-shell-context'
@@ -66,13 +65,9 @@ function AppHeader(props: {
   sidebarOpen: boolean
   onSidebarToggle: () => void
 }) {
-  const { workerReady, running } = useMarketFeedState(
-    (state) => ({
-      workerReady: state.workerReady,
-      running: state.running,
-    }),
-    { compare: shallow },
-  )
+  const feed = useMarketFeedController()
+  const workerReady = useSelector(feed.workerReady)
+  const running = useSelector(feed.running)
   return (
     <header className="app-bar">
       <div className="brand">
@@ -141,17 +136,6 @@ function MarketStatusbar() {
 }
 
 function Configurator() {
-  const feedState = useMarketFeedState(
-    (storeState) => ({
-      running: storeState.running,
-      instrumentCount: storeState.instrumentCount,
-      targetTicksPerSecond: storeState.targetTicksPerSecond,
-      publishIntervalMs: storeState.publishIntervalMs,
-      updateSparklines: storeState.updateSparklines,
-      sparklineSampleIntervalMs: storeState.sparklineSampleIntervalMs,
-    }),
-    { compare: shallow },
-  )
   const benchmarkState = useTradingShellState(
     (storeState) => ({
       requestedVirtualScrollMode: storeState.requestedVirtualScrollMode,
@@ -160,17 +144,17 @@ function Configurator() {
   )
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
+  const running = useSelector(feed.running)
+  const instrumentCount = useSelector(feed.instrumentCount)
+  const targetTicksPerSecond = useSelector(feed.targetTicksPerSecond)
+  const publishIntervalMs = useSelector(feed.publishIntervalMs)
+  const updateSparklines = useSelector(feed.updateSparklines)
+  const sparklineSampleIntervalMs = useSelector(
+    feed.sparklineSampleIntervalMs,
+  )
   const rendererMode = useSelector(controller.renderAtoms.rendererMode)
   const { actions } = controller
   const feedActions = feed.actions
-  const {
-    running,
-    instrumentCount,
-    targetTicksPerSecond,
-    publishIntervalMs,
-    updateSparklines,
-    sparklineSampleIntervalMs,
-  } = feedState
   const { requestedVirtualScrollMode } = benchmarkState
   const { setRendererMode, setVirtualScrollEnabled, resetMarket } = actions
   const {
@@ -616,9 +600,8 @@ function SelectedInstrument() {
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
   const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
-  const selectedQuote = useMarketFeedState((state) =>
-    feed.getQuoteBySymbol(state.quotes, selectedSymbol),
-  )
+  const quotes = useSelector(feed.quotes)
+  const selectedQuote = feed.getQuoteBySymbol(quotes, selectedSymbol)
   return (
     <section
       className="config-section selected-instrument"
diff --git a/examples/react/realtime-trading/src/shell/trading-shell-context.tsx b/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
index 8b86801f38..1c876ec374 100644
--- a/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
+++ b/examples/react/realtime-trading/src/shell/trading-shell-context.tsx
@@ -1,9 +1,6 @@
 import { createStoreContext, useSelector } from '@tanstack/react-store'
 import type { ReactNode } from 'react'
-import type {
-  MarketFeedController,
-  MarketFeedState,
-} from '../feed/market-feed-controller'
+import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../benchmark/use-trading-benchmark-controller'
 import type { TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
 import type { UseSelectorOptions } from '@tanstack/react-store'
@@ -51,11 +48,3 @@ export function useTradingShellState<TSelected>(
   const controller = useTradingShellController()
   return useSelector(controller.store, selector, options)
 }
-
-export function useMarketFeedState<TSelected>(
-  selector: (state: MarketFeedState) => TSelected,
-  options?: UseSelectorOptions<TSelected>,
-): TSelected {
-  const controller = useMarketFeedController()
-  return useSelector(controller.store, selector, options)
-}
diff --git a/examples/react/realtime-trading/src/table/trading-table.tsx b/examples/react/realtime-trading/src/table/trading-table.tsx
index 486b7cd6c1..529205a9b2 100644
--- a/examples/react/realtime-trading/src/table/trading-table.tsx
+++ b/examples/react/realtime-trading/src/table/trading-table.tsx
@@ -9,11 +9,11 @@ import {
   useTable,
 } from '@tanstack/react-table'
 import { useVirtualizer } from '@tanstack/react-virtual'
+import { useSelector } from '@tanstack/react-store'
 import { useLayoutEffect, useRef } from 'react'
 import { useTableBenchmark } from '../benchmark/use-table-benchmark'
 import {
   useMarketFeedController,
-  useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from '../shell/trading-shell-context'
@@ -64,11 +64,11 @@ const features = tableFeatures({
 export function TradingTable() {
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
-  const quotes = useMarketFeedState((state) => state.quotes)
+  const quotes = useSelector(feed.quotes)
   const requestedVirtualScrollMode = useTradingShellState(
     (state) => state.requestedVirtualScrollMode,
   )
-  const instrumentCount = useMarketFeedState((state) => state.instrumentCount)
+  const instrumentCount = useSelector(feed.instrumentCount)
   const virtualScrollMode = resolveVirtualScrollMode(
     requestedVirtualScrollMode,
     instrumentCount,
diff --git a/examples/svelte/realtime-trading/README.md b/examples/svelte/realtime-trading/README.md
index 5a6e0ca75f..3635a25f68 100644
--- a/examples/svelte/realtime-trading/README.md
+++ b/examples/svelte/realtime-trading/README.md
@@ -37,7 +37,10 @@ Use a production build for performance recordings.
 The feed and benchmark are separate controllers. The feed owns worker state and
 quotes; the benchmark registers observers and owns metrics/view controls.
 Svelte context passes those controllers without routing the quote array through
-the root component. Shell pieces subscribe only to the stores they display.
+the root component. `quotes` is a dedicated high-frequency TanStack atom, and
+each feed status/configuration value is a separate atom. Shell pieces subscribe
+only to the atoms they display; benchmark metrics remain a coherent snapshot
+store.
 
 ## Feed and worker pipeline
 
@@ -97,7 +100,7 @@ Svelte row/cell even if the browser skips offscreen paint/layout work.
 - immutable structural sharing for unchanged rows/history;
 - controller context instead of root-level data prop drilling;
 - stable keyed row identity;
-- table/config/cell component boundaries with localized store reads;
+- table/config/cell component boundaries with localized atom/store reads;
 - delegated pointer selection and CSS hover;
 - CSS variables for column width propagation;
 - configurable chart frequency and opt-in component churn;
diff --git a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 9f4361b3da..604d8efe42 100644
--- a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,7 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.store.get().instrumentCount >=
+          this.feed.instrumentCount.get() >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
diff --git a/examples/svelte/realtime-trading/src/feed/market-feed-controller.ts b/examples/svelte/realtime-trading/src/feed/market-feed-controller.ts
index 73716811be..40f523562d 100644
--- a/examples/svelte/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/svelte/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/store'
+import { batch, createAtom } from '@tanstack/store'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -8,17 +8,6 @@ import type {
 } from './worker/market-feed-protocol'
 import type { MarketQuote } from './market-data'
 
-export interface MarketFeedState {
-  workerReady: boolean
-  running: boolean
-  instrumentCount: number
-  targetTicksPerSecond: number
-  publishIntervalMs: number
-  updateSparklines: boolean
-  sparklineSampleIntervalMs: number
-  quotes: Array<MarketQuote>
-}
-
 export interface MarketFeedBatch {
   tickCount: number
   updateCount: number
@@ -43,19 +32,23 @@ export interface MarketFeedActions {
   reset: () => void
 }
 
-const initialState: MarketFeedState = {
-  workerReady: false,
-  running: true,
-  instrumentCount: initialMarketFeedConfig.instrumentCount,
-  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
-  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
-  updateSparklines: initialMarketFeedConfig.updateSparklines,
-  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
-  quotes: [],
-}
-
 export class MarketFeedController {
-  readonly store = createStore<MarketFeedState>(initialState)
+  readonly workerReady = createAtom(false)
+  readonly running = createAtom(true)
+  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = createAtom(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = createAtom(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  readonly updateSparklines = createAtom(
+    initialMarketFeedConfig.updateSparklines,
+  )
+  readonly sparklineSampleIntervalMs = createAtom(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
+  readonly quotes = createAtom<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -70,38 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.store.get().running
-        this.#patch({ running })
+        const running = !this.running.get()
+        this.running.set(running)
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.#patch({ instrumentCount: count })
+        this.instrumentCount.set(count)
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.#patch({
-          targetTicksPerSecond: sampleRate,
-        })
+        this.targetTicksPerSecond.set(sampleRate)
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.#patch({ publishIntervalMs })
+        this.publishIntervalMs.set(publishIntervalMs)
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
+        this.updateSparklines.set(enabled)
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.sparklineSampleIntervalMs.set(intervalMs)
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+      reset: () => this.#resetWorker(this.instrumentCount.get()),
     }
   }
 
@@ -113,15 +104,14 @@ export class MarketFeedController {
     this.#runtime.worker = worker
     worker.addEventListener('message', this.#handleWorkerMessage)
     worker.addEventListener('error', this.#handleWorkerError)
-    const state = this.store.get()
     this.#post({
       type: 'start',
-      rowCount: state.instrumentCount,
-      running: state.running,
-      ticksPerSecond: state.targetTicksPerSecond,
-      publishIntervalMs: state.publishIntervalMs,
-      updateSparklines: state.updateSparklines,
-      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+      rowCount: this.instrumentCount.get(),
+      running: this.running.get(),
+      ticksPerSecond: this.targetTicksPerSecond.get(),
+      publishIntervalMs: this.publishIntervalMs.get(),
+      updateSparklines: this.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
     })
     return () => this.stop()
   }
@@ -165,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.store.get().running })
+      this.#post({ type: 'set-running', running: this.running.get() })
     }
   }
 
@@ -183,10 +173,8 @@ export class MarketFeedController {
         quotes.map((quote, index) => [quote.symbol, index]),
       )
       batch(() => {
-        this.#patch({
-          quotes,
-          workerReady: true,
-        })
+        this.quotes.set(quotes)
+        this.workerReady.set(true)
       })
       return
     }
@@ -197,9 +185,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.#patch({
-      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
-    })
+    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -211,12 +197,15 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
+    batch(() => {
+      this.workerReady.set(false)
+      this.running.set(false)
+    })
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.#patch({ workerReady: false })
+    this.workerReady.set(false)
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
@@ -230,10 +219,6 @@ export class MarketFeedController {
     }
   }
 
-  #patch(patch: Partial<MarketFeedState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #post(command: MarketFeedCommand): void {
     this.#runtime.worker?.postMessage(command)
   }
diff --git a/examples/svelte/realtime-trading/src/shell/AppHeader.svelte b/examples/svelte/realtime-trading/src/shell/AppHeader.svelte
index 559afc6434..1c8553316a 100644
--- a/examples/svelte/realtime-trading/src/shell/AppHeader.svelte
+++ b/examples/svelte/realtime-trading/src/shell/AppHeader.svelte
@@ -2,13 +2,15 @@
   import { useSelector } from '@tanstack/svelte-store'
   import { useMarketFeedController } from './trading-shell-context'
   const { sidebarOpen, onSidebarToggle }: { sidebarOpen: boolean; onSidebarToggle: () => void } = $props()
-  const state = useSelector(useMarketFeedController().store, ({ workerReady, running }) => ({ workerReady, running }))
+  const feed = useMarketFeedController()
+  const workerReady = useSelector(feed.workerReady)
+  const running = useSelector(feed.running)
 </script>
 
 <header class="app-bar">
   <div class="brand"><strong>MARKET MONITOR</strong></div>
   <div class="header-actions">
-    <span class:is-running={state.current.workerReady && state.current.running} class="feed-status" data-testid="feed-status"><span class="status-dot" aria-hidden="true"></span>{!state.current.workerReady ? 'FEED CONNECTING' : state.current.running ? 'FEED LIVE' : 'FEED PAUSED'}</span>
+    <span class:is-running={workerReady.current && running.current} class="feed-status" data-testid="feed-status"><span class="status-dot" aria-hidden="true"></span>{!workerReady.current ? 'FEED CONNECTING' : running.current ? 'FEED LIVE' : 'FEED PAUSED'}</span>
     <button class="sidebar-toggle" type="button" aria-expanded={sidebarOpen} aria-controls="benchmark-configurator" aria-label={sidebarOpen ? 'Close configurator' : 'Open configurator'} onclick={onSidebarToggle}>
       <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5"></rect><path d="M12.5 3v14"></path></svg>
     </button>
diff --git a/examples/svelte/realtime-trading/src/shell/Configurator.svelte b/examples/svelte/realtime-trading/src/shell/Configurator.svelte
index 0e7591a3ff..87a903fb9b 100644
--- a/examples/svelte/realtime-trading/src/shell/Configurator.svelte
+++ b/examples/svelte/realtime-trading/src/shell/Configurator.svelte
@@ -9,11 +9,16 @@
 
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
-  const feedState = useSelector(feed.store)
+  const running = useSelector(feed.running)
+  const instrumentCount = useSelector(feed.instrumentCount)
+  const targetTicksPerSecond = useSelector(feed.targetTicksPerSecond)
+  const publishIntervalMs = useSelector(feed.publishIntervalMs)
+  const updateSparklines = useSelector(feed.updateSparklines)
+  const sparklineSampleIntervalMs = useSelector(feed.sparklineSampleIntervalMs)
   const benchmarkState = useSelector(controller.store)
   const rendererMode = useSelector(controller.renderAtoms.rendererMode)
-  const virtualScrollForced = $derived(feedState.current.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT)
-  const virtualScrollMode = $derived(resolveVirtualScrollMode(benchmarkState.current.requestedVirtualScrollMode, feedState.current.instrumentCount))
+  const virtualScrollForced = $derived(instrumentCount.current >= FORCED_VIRTUALIZATION_ROW_COUNT)
+  const virtualScrollMode = $derived(resolveVirtualScrollMode(benchmarkState.current.requestedVirtualScrollMode, instrumentCount.current))
   const rate = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 })
   const numberValue = (event: Event) => Number((event.target as HTMLInputElement | HTMLSelectElement).value)
   const stringValue = (event: Event) => (event.target as HTMLInputElement | HTMLSelectElement).value
@@ -23,16 +28,16 @@
 <aside id="benchmark-configurator" class="configurator" aria-label="Benchmark configurator">
   <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
   <section class="config-section" aria-labelledby="feed-settings"><h2 id="feed-settings">FEED</h2>
-    <button class="primary-action" type="button" data-testid="feed-toggle" onclick={feed.actions.toggle}>{feedState.current.running ? 'PAUSE FEED' : 'START FEED'}</button>
-    <label class="field"><span>Instruments (rows)</span><select data-testid="instrument-count-select" value={feedState.current.instrumentCount} onchange={(event) => { controller.actions.resetViewState(); feed.actions.setInstrumentCount(numberValue(event)) }}>{#each configuratorOptions.instrumentCounts as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select></label>
-    <label class="field rate-field"><span>Synthetic quote workload <strong data-testid="target-sample-rate">{rate.format(feedState.current.targetTicksPerSecond)} samples/s</strong></span><input data-testid="target-rate-slider" type="range" min="0" max={feedSampleRateOptions.length - 1} step="1" value={feedSampleRateIndex(feedState.current.targetTicksPerSecond)} onchange={(event) => feed.actions.setTargetRate(feedSampleRateAt(numberValue(event)))} /><small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small></label>
-    <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" value={feedState.current.publishIntervalMs} onchange={(event) => feed.actions.setPublishInterval(numberValue(event))}>{#each configuratorOptions.workerDeliveryIntervals as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select><small>One coalesced worker message at this target cadence.</small></label>
+    <button class="primary-action" type="button" data-testid="feed-toggle" onclick={feed.actions.toggle}>{running.current ? 'PAUSE FEED' : 'START FEED'}</button>
+    <label class="field"><span>Instruments (rows)</span><select data-testid="instrument-count-select" value={instrumentCount.current} onchange={(event) => { controller.actions.resetViewState(); feed.actions.setInstrumentCount(numberValue(event)) }}>{#each configuratorOptions.instrumentCounts as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select></label>
+    <label class="field rate-field"><span>Synthetic quote workload <strong data-testid="target-sample-rate">{rate.format(targetTicksPerSecond.current)} samples/s</strong></span><input data-testid="target-rate-slider" type="range" min="0" max={feedSampleRateOptions.length - 1} step="1" value={feedSampleRateIndex(targetTicksPerSecond.current)} onchange={(event) => feed.actions.setTargetRate(feedSampleRateAt(numberValue(event)))} /><small>Fixed worker-side workload levels. Samples are coalesced; this is not the message delivery rate.</small></label>
+    <label class="field"><span>Worker delivery interval</span><select data-testid="publish-interval-select" value={publishIntervalMs.current} onchange={(event) => feed.actions.setPublishInterval(numberValue(event))}>{#each configuratorOptions.workerDeliveryIntervals as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select><small>One coalesced worker message at this target cadence.</small></label>
   </section>
   <section class="config-section" aria-labelledby="render-settings"><h2 id="render-settings">RENDER PATH</h2>
     <label class="field" data-testid="virtual-scroll-mode"><span>Row rendering</span><select data-testid="virtual-scroll-select" value={virtualScrollMode} disabled={virtualScrollForced} onchange={(event) => controller.actions.setVirtualScrollEnabled(stringValue(event) === 'tanstack')}>{#each configuratorOptions.rowRenderingModes as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select><small>{virtualScrollForced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}</small></label>
     <label class="toggle-field"><input type="checkbox" checked={rendererMode.current === 'swap'} onchange={(event) => controller.actions.setRendererMode(checkedValue(event) ? 'swap' : 'stable')} /><span>Swap Tick component A ↔ B<small>destroy and recreate when direction changes</small></span></label>
-    <label class="toggle-field"><input type="checkbox" checked={feedState.current.updateSparklines} onchange={(event) => feed.actions.setSparklineUpdates(checkedValue(event))} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
-    <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" value={feedState.current.sparklineSampleIntervalMs} onchange={(event) => feed.actions.setSparklineSampleInterval(numberValue(event))}>{#each configuratorOptions.intradaySamplingIntervals as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select></label>
+    <label class="toggle-field"><input type="checkbox" checked={updateSparklines.current} onchange={(event) => feed.actions.setSparklineUpdates(checkedValue(event))} /><span>Update intraday charts<small>sample rolling prices independently</small></span></label>
+    <label class="field"><span>Intraday chart sampling</span><select data-testid="sparkline-sample-interval-select" value={sparklineSampleIntervalMs.current} onchange={(event) => feed.actions.setSparklineSampleInterval(numberValue(event))}>{#each configuratorOptions.intradaySamplingIntervals as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select></label>
   </section>
   <section class="config-section" aria-labelledby="stress-actions"><h2 id="stress-actions">STRESS ACTIONS</h2>
     <div class="action-grid"><button type="button" onclick={feed.actions.runBurst}>RUN 25K BURST</button><button type="button" onclick={controller.actions.resetMarket}>RESET SESSION</button></div>
diff --git a/examples/svelte/realtime-trading/src/shell/SelectedInstrument.svelte b/examples/svelte/realtime-trading/src/shell/SelectedInstrument.svelte
index 69cddc2f60..dbf747480e 100644
--- a/examples/svelte/realtime-trading/src/shell/SelectedInstrument.svelte
+++ b/examples/svelte/realtime-trading/src/shell/SelectedInstrument.svelte
@@ -3,7 +3,7 @@
   import { useMarketFeedController, useTradingShellController } from './trading-shell-context'
   const feed = useMarketFeedController()
   const selectedSymbol = useSelector(useTradingShellController().renderAtoms.selectedSymbol)
-  const quotes = useSelector(feed.store, (state) => state.quotes)
+  const quotes = useSelector(feed.quotes)
   const selectedQuote = $derived(feed.getQuoteBySymbol(quotes.current, selectedSymbol.current))
 </script>
 
diff --git a/examples/svelte/realtime-trading/src/table/TradingTable.svelte b/examples/svelte/realtime-trading/src/table/TradingTable.svelte
index f469c1c29d..53fed2fa16 100644
--- a/examples/svelte/realtime-trading/src/table/TradingTable.svelte
+++ b/examples/svelte/realtime-trading/src/table/TradingTable.svelte
@@ -23,14 +23,15 @@
   })
   const controller = useTradingShellController()
   const feed = useMarketFeedController()
-  const feedState = useSelector(feed.store)
+  const quotes = useSelector(feed.quotes)
+  const instrumentCount = useSelector(feed.instrumentCount)
   const benchmarkState = useSelector(controller.store)
   const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
   const table = createTable({
     key: 'svelte-realtime-trading',
     features,
     columns: tradingColumns,
-    get data() { return feedState.current.quotes },
+    get data() { return quotes.current },
     getRowId: (row: MarketQuote) => row.id,
     columnResizeMode: 'onChange',
     defaultColumn: { minSize: 56, maxSize: 800 },
@@ -43,9 +44,9 @@
     rowSelection: state.rowSelection,
     cellSelection: state.cellSelection,
   }))
-  const virtualScrollMode = $derived(resolveVirtualScrollMode(benchmarkState.current.requestedVirtualScrollMode, feedState.current.instrumentCount))
+  const virtualScrollMode = $derived(resolveVirtualScrollMode(benchmarkState.current.requestedVirtualScrollMode, instrumentCount.current))
   const rows = $derived.by(() => {
-    void feedState.current.quotes
+    void quotes.current
     void tableState.current
     return readMeasuredRows(() => table.getRowModel().rows)
   })
@@ -81,7 +82,7 @@
     })
   })
   $effect(() => { controller.actions.setRenderedRowCount(virtualScrollMode === 'tanstack' ? virtualRows.length : rows.length) })
-  $effect(() => { void feedState.current.quotes; tick().then(() => feed.completeRender()) })
+  $effect(() => { void quotes.current; tick().then(() => feed.completeRender()) })
 
   const writeColumnSizes = (): void => {
     if (!refs.table) return
@@ -153,7 +154,7 @@
     <!-- Delegated table-grid pointer handling intentionally lives on one tbody. -->
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-    <tbody class:virtual-table-body={virtualScrollMode === 'tanstack'} style:height={virtualScrollMode === 'tanstack' ? `${rows.length * TRADING_ROW_HEIGHT}px` : undefined} data-source-row-count={feedState.current.quotes.length} onmousedown={(event) => pointerInteractions.handleMouseDown(table, event, controller.actions.selectSymbol)} onpointerover={(event) => pointerInteractions.handlePointerOver(table, event)} onmouseleave={() => pointerInteractions.resetPointerCell()} onclick={(event) => pointerInteractions.handleClick(table, event)}>
+    <tbody class:virtual-table-body={virtualScrollMode === 'tanstack'} style:height={virtualScrollMode === 'tanstack' ? `${rows.length * TRADING_ROW_HEIGHT}px` : undefined} data-source-row-count={quotes.current.length} onmousedown={(event) => pointerInteractions.handleMouseDown(table, event, controller.actions.selectSymbol)} onpointerover={(event) => pointerInteractions.handlePointerOver(table, event)} onmouseleave={() => pointerInteractions.resetPointerCell()} onclick={(event) => pointerInteractions.handleClick(table, event)}>
       {#if virtualScrollMode === 'tanstack'}
         {#each virtualRows as virtualRow (virtualRow.key)}{@render renderRow(rows[virtualRow.index], virtualRow)}{/each}
       {:else}
diff --git a/examples/vue/realtime-trading/README.md b/examples/vue/realtime-trading/README.md
index 058e4a03bb..f07a049f7e 100644
--- a/examples/vue/realtime-trading/README.md
+++ b/examples/vue/realtime-trading/README.md
@@ -37,8 +37,10 @@ Use the production build for recordings; Vue development checks add overhead.
 `MarketFeedController` owns worker/feed state; `TradingBenchmarkController`
 observes it and owns benchmark/view state. Vue `provide`/`inject` distributes
 stable controller objects. `@tanstack/vue-store` selectors expose narrow
-reactive slices instead of making the root consume the quotes and every metric.
-Cleanup stops both controllers on application unmount.
+reactive atoms instead of making the root consume the quotes and every metric.
+`quotes` is a dedicated high-frequency atom; feed status and each configuration
+value are independent atoms. Cleanup stops both controllers on application
+unmount.
 
 ## Feed and worker pipeline
 
@@ -71,7 +73,7 @@ double-click reset, drag ordering, CSS row hover, row selection, drag cell
 ranges, keyboard navigation, and component-based Price/Move/Percent/Sparkline
 cells.
 
-The table reads the selected quotes store value through a getter and uses the
+The table reads the dedicated quotes atom through a getter and uses the
 instrument ID for `getRowId`. Table state is selected independently from feed
 state; computed rows are invalidated only by the inputs relevant to the row
 model. Dedicated row views keep row markup and selected-instrument state below
@@ -99,7 +101,7 @@ can reduce browser rendering but cannot prevent Vue from creating all rows.
 
 - market generation/coalescing is moved off the main thread;
 - immutable structural sharing preserves untouched rows/histories;
-- store selectors and computed values narrow reactive invalidation;
+- direct atom selectors and computed values narrow reactive invalidation;
 - stable row and virtual item keys preserve identity;
 - row rendering is componentized without subscribing the app root to data;
 - pointer selection is delegated once;
diff --git a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 9f4361b3da..604d8efe42 100644
--- a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,7 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.store.get().instrumentCount >=
+          this.feed.instrumentCount.get() >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
diff --git a/examples/vue/realtime-trading/src/feed/market-feed-controller.ts b/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
index 73716811be..40f523562d 100644
--- a/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/store'
+import { batch, createAtom } from '@tanstack/store'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -8,17 +8,6 @@ import type {
 } from './worker/market-feed-protocol'
 import type { MarketQuote } from './market-data'
 
-export interface MarketFeedState {
-  workerReady: boolean
-  running: boolean
-  instrumentCount: number
-  targetTicksPerSecond: number
-  publishIntervalMs: number
-  updateSparklines: boolean
-  sparklineSampleIntervalMs: number
-  quotes: Array<MarketQuote>
-}
-
 export interface MarketFeedBatch {
   tickCount: number
   updateCount: number
@@ -43,19 +32,23 @@ export interface MarketFeedActions {
   reset: () => void
 }
 
-const initialState: MarketFeedState = {
-  workerReady: false,
-  running: true,
-  instrumentCount: initialMarketFeedConfig.instrumentCount,
-  targetTicksPerSecond: initialMarketFeedConfig.targetSamplesPerSecond,
-  publishIntervalMs: initialMarketFeedConfig.publishIntervalMs,
-  updateSparklines: initialMarketFeedConfig.updateSparklines,
-  sparklineSampleIntervalMs: initialMarketFeedConfig.sparklineSampleIntervalMs,
-  quotes: [],
-}
-
 export class MarketFeedController {
-  readonly store = createStore<MarketFeedState>(initialState)
+  readonly workerReady = createAtom(false)
+  readonly running = createAtom(true)
+  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = createAtom(
+    initialMarketFeedConfig.targetSamplesPerSecond,
+  )
+  readonly publishIntervalMs = createAtom(
+    initialMarketFeedConfig.publishIntervalMs,
+  )
+  readonly updateSparklines = createAtom(
+    initialMarketFeedConfig.updateSparklines,
+  )
+  readonly sparklineSampleIntervalMs = createAtom(
+    initialMarketFeedConfig.sparklineSampleIntervalMs,
+  )
+  readonly quotes = createAtom<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -70,38 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.store.get().running
-        this.#patch({ running })
+        const running = !this.running.get()
+        this.running.set(running)
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.#patch({ instrumentCount: count })
+        this.instrumentCount.set(count)
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.#patch({
-          targetTicksPerSecond: sampleRate,
-        })
+        this.targetTicksPerSecond.set(sampleRate)
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.#patch({ publishIntervalMs })
+        this.publishIntervalMs.set(publishIntervalMs)
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.#patch({ updateSparklines: enabled })
+        this.updateSparklines.set(enabled)
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.#patch({ sparklineSampleIntervalMs: intervalMs })
+        this.sparklineSampleIntervalMs.set(intervalMs)
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.store.get().instrumentCount),
+      reset: () => this.#resetWorker(this.instrumentCount.get()),
     }
   }
 
@@ -113,15 +104,14 @@ export class MarketFeedController {
     this.#runtime.worker = worker
     worker.addEventListener('message', this.#handleWorkerMessage)
     worker.addEventListener('error', this.#handleWorkerError)
-    const state = this.store.get()
     this.#post({
       type: 'start',
-      rowCount: state.instrumentCount,
-      running: state.running,
-      ticksPerSecond: state.targetTicksPerSecond,
-      publishIntervalMs: state.publishIntervalMs,
-      updateSparklines: state.updateSparklines,
-      sparklineSampleIntervalMs: state.sparklineSampleIntervalMs,
+      rowCount: this.instrumentCount.get(),
+      running: this.running.get(),
+      ticksPerSecond: this.targetTicksPerSecond.get(),
+      publishIntervalMs: this.publishIntervalMs.get(),
+      updateSparklines: this.updateSparklines.get(),
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
     })
     return () => this.stop()
   }
@@ -165,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.store.get().running })
+      this.#post({ type: 'set-running', running: this.running.get() })
     }
   }
 
@@ -183,10 +173,8 @@ export class MarketFeedController {
         quotes.map((quote, index) => [quote.symbol, index]),
       )
       batch(() => {
-        this.#patch({
-          quotes,
-          workerReady: true,
-        })
+        this.quotes.set(quotes)
+        this.workerReady.set(true)
       })
       return
     }
@@ -197,9 +185,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.#patch({
-      quotes: applyMarketUpdates(this.store.get().quotes, data.updates),
-    })
+    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -211,12 +197,15 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    this.#patch({ workerReady: false, running: false })
+    batch(() => {
+      this.workerReady.set(false)
+      this.running.set(false)
+    })
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.#patch({ workerReady: false })
+    this.workerReady.set(false)
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
@@ -230,10 +219,6 @@ export class MarketFeedController {
     }
   }
 
-  #patch(patch: Partial<MarketFeedState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #post(command: MarketFeedCommand): void {
     this.#runtime.worker?.postMessage(command)
   }
diff --git a/examples/vue/realtime-trading/src/shell/TradingShell.tsx b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
index 85aa030154..311d22f8df 100644
--- a/examples/vue/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
@@ -11,7 +11,6 @@ import {
 } from '../table/trading-row-virtualizer'
 import {
   useMarketFeedController,
-  useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from './trading-shell-context'
@@ -68,10 +67,9 @@ const AppHeader = defineComponent({
     onSidebarToggle: { type: Function, required: true },
   },
   setup(props) {
-    const state = useMarketFeedState((feedState) => ({
-      workerReady: feedState.workerReady,
-      running: feedState.running,
-    }))
+    const feed = useMarketFeedController()
+    const workerReady = useSelector(feed.workerReady)
+    const running = useSelector(feed.running)
     return () => (
       <header class="app-bar">
         <div class="brand">
@@ -81,14 +79,14 @@ const AppHeader = defineComponent({
           <span
             class={[
               'feed-status',
-              state.value.workerReady && state.value.running && 'is-running',
+              workerReady.value && running.value && 'is-running',
             ]}
             data-testid="feed-status"
           >
             <span class="status-dot" aria-hidden="true" />
-            {!state.value.workerReady
+            {!workerReady.value
               ? 'FEED CONNECTING'
-              : state.value.running
+              : running.value
                 ? 'FEED LIVE'
                 : 'FEED PAUSED'}
           </span>
@@ -239,7 +237,22 @@ const Configurator = defineComponent({
   setup() {
     const controller = useTradingShellController()
     const feed = useMarketFeedController()
-    const feedState = useMarketFeedState((state) => state)
+    const running = useSelector(feed.running)
+    const instrumentCount = useSelector(feed.instrumentCount)
+    const targetTicksPerSecond = useSelector(feed.targetTicksPerSecond)
+    const publishIntervalMs = useSelector(feed.publishIntervalMs)
+    const updateSparklines = useSelector(feed.updateSparklines)
+    const sparklineSampleIntervalMs = useSelector(
+      feed.sparklineSampleIntervalMs,
+    )
+    const feedState = computed(() => ({
+      running: running.value,
+      instrumentCount: instrumentCount.value,
+      targetTicksPerSecond: targetTicksPerSecond.value,
+      publishIntervalMs: publishIntervalMs.value,
+      updateSparklines: updateSparklines.value,
+      sparklineSampleIntervalMs: sparklineSampleIntervalMs.value,
+    }))
     const benchmarkState = useTradingShellState((state) => state)
     const rendererMode = useSelector(controller.renderAtoms.rendererMode)
     const virtualScrollForced = computed(
@@ -524,7 +537,7 @@ const SelectedInstrument = defineComponent({
     const controller = useTradingShellController()
     const feed = useMarketFeedController()
     const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
-    const quotes = useMarketFeedState((state) => state.quotes)
+    const quotes = useSelector(feed.quotes)
     const selectedQuote = computed(() =>
       feed.getQuoteBySymbol(quotes.value, selectedSymbol.value),
     )
diff --git a/examples/vue/realtime-trading/src/shell/trading-shell-context.ts b/examples/vue/realtime-trading/src/shell/trading-shell-context.ts
index 266cce4eab..161c1a45f3 100644
--- a/examples/vue/realtime-trading/src/shell/trading-shell-context.ts
+++ b/examples/vue/realtime-trading/src/shell/trading-shell-context.ts
@@ -1,10 +1,7 @@
 import { inject, provide } from 'vue'
 import { useSelector } from '@tanstack/vue-store'
 import type { InjectionKey } from 'vue'
-import type {
-  MarketFeedController,
-  MarketFeedState,
-} from '../feed/market-feed-controller'
+import type { MarketFeedController } from '../feed/market-feed-controller'
 import type {
   TradingBenchmarkController,
   TradingBenchmarkState,
@@ -42,9 +39,3 @@ export function useTradingShellState<TSelected>(
 ) {
   return useSelector(useTradingShellController().store, selector)
 }
-
-export function useMarketFeedState<TSelected>(
-  selector: (state: MarketFeedState) => TSelected,
-) {
-  return useSelector(useMarketFeedController().store, selector)
-}
diff --git a/examples/vue/realtime-trading/src/table/trading-table.tsx b/examples/vue/realtime-trading/src/table/trading-table.tsx
index 1fd7a9891e..3b6c521ba5 100644
--- a/examples/vue/realtime-trading/src/table/trading-table.tsx
+++ b/examples/vue/realtime-trading/src/table/trading-table.tsx
@@ -23,7 +23,6 @@ import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useTableBenchmark } from '../benchmark/use-table-benchmark'
 import {
   useMarketFeedController,
-  useMarketFeedState,
   useTradingShellController,
   useTradingShellState,
 } from '../shell/trading-shell-context'
@@ -117,8 +116,8 @@ export const TradingTable = defineComponent({
   setup() {
     const controller = useTradingShellController()
     const feed = useMarketFeedController()
-    const quotes = useMarketFeedState((state) => state.quotes)
-    const instrumentCount = useMarketFeedState((state) => state.instrumentCount)
+    const quotes = useSelector(feed.quotes)
+    const instrumentCount = useSelector(feed.instrumentCount)
     const requestedVirtualScrollMode = useTradingShellState(
       (state) => state.requestedVirtualScrollMode,
     )

From 88d56df1199aeeb982e88aca8eb8bec45f9d6575 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Tue, 18 Aug 2026 17:39:37 +0200
Subject: [PATCH 18/23] Refactor project structure and update related
 implementations

---
 examples/alpine/realtime-trading/README.md    |  31 +-
 examples/alpine/realtime-trading/index.html   |  22 +-
 .../src/benchmark/benchmark-monitor.ts        | 173 +++++--
 .../benchmark/trading-benchmark-controller.ts |   9 +-
 .../alpine/realtime-trading/src/index.css     |  23 +-
 examples/alpine/realtime-trading/src/main.ts  | 116 +++--
 .../src/table/table-config/trading-columns.ts |  20 +-
 examples/angular/realtime-trading/README.md   |  38 +-
 .../src/app/benchmark/benchmark-monitor.ts    |  82 ++-
 .../benchmark/trading-benchmark.controller.ts |  13 +-
 .../src/app/shell/configurator.html           |   2 +
 .../src/app/shell/configurator.ts             |   3 +-
 .../src/app/shell/diagnostics.ts              |  55 +-
 .../src/app/shell/market-statusbar.ts         |   2 +-
 .../src/app/shell/metrics-strip.ts            |  62 +--
 .../src/app/shell/trading-shell.html          |   1 -
 .../src/app/shell/trading-shell.ts            |   3 +-
 .../src/app/table/current-trading-table.ts    |   2 +
 .../src/app/table/table-v9.html               |   8 +-
 .../view/trading-table-benchmark.directive.ts |  25 +
 .../app/table/worker/worker-trading-table.ts  |   2 +
 .../angular/realtime-trading/src/styles.css   |  30 +-
 examples/ember/realtime-trading/README.md     |  59 ++-
 examples/ember/realtime-trading/app/app.css   |  30 +-
 .../app/benchmark/benchmark-monitor.ts        |  74 ++-
 .../benchmark/trading-benchmark-controller.ts |  79 +--
 .../app/components/shell/app-header.gts       |  16 +-
 .../app/components/shell/configurator.gts     |  64 +--
 .../app/components/shell/diagnostics.gts      |  65 ++-
 .../app/components/shell/market-statusbar.gts |  33 +-
 .../app/components/shell/metrics-strip.gts    |  74 +--
 .../components/shell/selected-instrument.gts  |  19 +-
 .../app/components/shell/trading-shell.gts    |   2 -
 .../app/components/table/trading-table.gts    | 172 +++---
 .../app/feed/market-feed-controller.ts        |  75 ++-
 .../table/table-config/trading-columns.gts    |   4 +
 .../app/utils/subscriptions.ts                |  17 -
 examples/lit/realtime-trading/README.md       |  33 +-
 .../src/benchmark/benchmark-monitor.ts        | 173 +++++--
 .../src/benchmark/table-benchmark.ts          |   1 +
 .../benchmark/trading-benchmark-controller.ts |   9 +-
 examples/lit/realtime-trading/src/index.css   |  27 +-
 .../src/shell/Configurator.ts                 |  30 +-
 .../realtime-trading/src/shell/Diagnostics.ts |  40 +-
 .../src/shell/MarketStatusbar.ts              |   2 +-
 .../src/shell/MetricsStrip.ts                 |  57 +-
 .../src/shell/TradingShell.ts                 |   6 +-
 .../src/table/TradingTable.ts                 |  15 +-
 .../src/table/table-config/trading-columns.ts |  20 +-
 examples/octane/realtime-trading/README.md    |  31 +-
 .../src/benchmark/benchmark-monitor.ts        |  74 ++-
 .../src/benchmark/table-benchmark.ts          |   1 +
 .../benchmark/trading-benchmark-controller.ts |   5 +-
 .../octane/realtime-trading/src/index.css     |  30 +-
 .../src/shell/Configurator.tsrx               |   2 +
 .../src/shell/Diagnostics.tsrx                |  17 +-
 .../src/shell/MarketStatusbar.tsrx            |   2 +-
 .../src/shell/MetricsStrip.tsrx               |  15 +-
 .../src/shell/TradingShell.tsrx               |   2 -
 .../table/table-config/trading-columns.tsrx   |   6 +-
 examples/preact/realtime-trading/README.md    |  43 +-
 .../src/benchmark/benchmark-monitor.ts        | 183 +++++--
 .../benchmark/trading-benchmark-controller.ts |  12 +-
 .../src/benchmark/use-table-benchmark.ts      |   1 +
 .../preact/realtime-trading/src/index.css     |  23 +-
 .../src/shell/TradingShell.tsx                | 119 +++--
 .../table-config/trading-table-config.tsx     |  22 +-
 examples/react/realtime-trading/README.md     |  59 ++-
 .../src/benchmark/benchmark-monitor.ts        | 183 +++++--
 .../benchmark/trading-benchmark-controller.ts |  12 +-
 .../src/benchmark/use-table-benchmark.ts      |   1 +
 examples/react/realtime-trading/src/index.css |  23 +-
 .../src/shell/TradingShell.tsx                | 119 +++--
 .../table-config/trading-table-config.tsx     |  22 +-
 examples/solid/realtime-trading/README.md     | 103 +++-
 examples/solid/realtime-trading/src/App.tsx   |  19 +-
 .../src/benchmark/benchmark-monitor.ts        | 173 +++++--
 .../benchmark/trading-benchmark-controller.ts |  14 +-
 examples/solid/realtime-trading/src/index.css |  23 +-
 .../src/shell/TradingShell.tsx                | 116 +++--
 .../src/table/create-column-drag.ts           |  66 +++
 .../src/table/create-trading-table-model.ts   |  60 +++
 .../src/table/jsx-attributes.ts               |   4 +
 .../table/table-config/market-quote-values.ts |  11 +
 .../table/table-config/quote-cell-props.ts    |  31 ++
 .../table-config/quote-cell-renderers.tsx     | 119 +++++
 .../src/table/table-config/quote-cells.tsx    |  31 +-
 .../table/table-config/trading-columns.tsx    | 134 ++---
 .../src/table/table-interactions.ts           | 121 +++--
 .../src/table/trading-grid-props.ts           |  41 ++
 .../src/table/trading-row-data-context.tsx    |  26 +
 .../src/table/trading-row-virtualizer.ts      |  60 +++
 .../src/table/trading-table-body.tsx          |  87 ++++
 .../src/table/trading-table-effects.ts        |  68 +++
 .../src/table/trading-table-features.ts       |  31 ++
 .../src/table/trading-table-footer.tsx        |  35 ++
 .../src/table/trading-table-header.tsx        | 175 +++++++
 .../src/table/trading-table-row.tsx           | 105 ++++
 .../src/table/trading-table.tsx               | 488 ++----------------
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  39 ++
 examples/svelte/realtime-trading/README.md    |  32 +-
 .../src/benchmark/benchmark-monitor.ts        | 169 ++++--
 .../src/benchmark/table-benchmark.ts          |   1 +
 .../benchmark/trading-benchmark-controller.ts |  12 +-
 .../svelte/realtime-trading/src/index.css     |  23 +-
 .../src/shell/Configurator.svelte             |   2 +
 .../src/shell/Diagnostics.svelte              |  12 +-
 .../src/shell/MarketStatusbar.svelte          |   2 +-
 .../src/shell/MetricsStrip.svelte             |  15 +-
 .../src/shell/TradingShell.svelte             |   3 +-
 .../src/table/table-config/trading-columns.ts |  21 +-
 examples/vue/realtime-trading/README.md       |  34 +-
 .../src/benchmark/benchmark-monitor.ts        | 169 ++++--
 .../benchmark/trading-benchmark-controller.ts |  12 +-
 .../src/benchmark/use-table-benchmark.ts      |   1 +
 examples/vue/realtime-trading/src/index.css   |  23 +-
 .../src/shell/TradingShell.tsx                | 102 ++--
 .../table/table-config/trading-columns.tsx    |  21 +-
 118 files changed, 3698 insertions(+), 2061 deletions(-)
 create mode 100644 examples/angular/realtime-trading/src/app/table/view/trading-table-benchmark.directive.ts
 create mode 100644 examples/solid/realtime-trading/src/table/create-column-drag.ts
 create mode 100644 examples/solid/realtime-trading/src/table/create-trading-table-model.ts
 create mode 100644 examples/solid/realtime-trading/src/table/jsx-attributes.ts
 create mode 100644 examples/solid/realtime-trading/src/table/table-config/market-quote-values.ts
 create mode 100644 examples/solid/realtime-trading/src/table/table-config/quote-cell-props.ts
 create mode 100644 examples/solid/realtime-trading/src/table/table-config/quote-cell-renderers.tsx
 create mode 100644 examples/solid/realtime-trading/src/table/trading-grid-props.ts
 create mode 100644 examples/solid/realtime-trading/src/table/trading-row-data-context.tsx
 create mode 100644 examples/solid/realtime-trading/src/table/trading-table-body.tsx
 create mode 100644 examples/solid/realtime-trading/src/table/trading-table-effects.ts
 create mode 100644 examples/solid/realtime-trading/src/table/trading-table-features.ts
 create mode 100644 examples/solid/realtime-trading/src/table/trading-table-footer.tsx
 create mode 100644 examples/solid/realtime-trading/src/table/trading-table-header.tsx
 create mode 100644 examples/solid/realtime-trading/src/table/trading-table-row.tsx

diff --git a/examples/alpine/realtime-trading/README.md b/examples/alpine/realtime-trading/README.md
index fb3ebcc177..2d82e563d8 100644
--- a/examples/alpine/realtime-trading/README.md
+++ b/examples/alpine/realtime-trading/README.md
@@ -115,14 +115,29 @@ cell work, but sorting/filtering can still require a fresh row-model pass.
 
 ## Diagnostics and interpretation
 
-The monitor reports generated samples, messages, unique row updates, state
-applies, table commits, average mutation-to-render latency, long animation
-frames, mounted cells, custom component lifecycle/execution, callbacks per
-column, DOM mutation records, core row-model timing, and optional heap data.
-
-Callback counts do not imply DOM changes. Temporary heap growth is not proof of
-a leak; verify post-GC retained objects. Compare identical production settings
-and use Chrome Performance together with the in-app counters.
+The sidebar keeps four cross-framework health signals prominent: estimated
+frame callbacks, average snapshot-to-DOM-commit latency, cumulative long
+animation frames, and changed-row/snapshot throughput. The remaining counters
+stay in Diagnostics so they do not look like equally important scores.
+
+`AVG COMMIT` is not the duration of an Alpine render function and it does not
+include the browser's later layout or paint. It starts when a new immutable
+snapshot is applied and ends in one coalesced `Alpine.nextTick()` callback,
+after Alpine has flushed the corresponding DOM work. The average uses a rolling
+3-second window; diagnostic p95/max use 10 seconds. If several worker
+messages arrive before one Alpine flush, they intentionally produce one commit
+sample from the earliest pending snapshot.
+
+The frame-rate estimate counts standard `requestAnimationFrame` callbacks over
+one second; it is refresh-rate dependent and is not GPU/compositor FPS.
+`Observed MutationRecords/s` is observer delivery count, not browser DOM
+operations. It tracks text, child-list, class, and style changes while excluding
+selection data attributes to reduce noise. The observer itself still adds work
+at very high mutation rates. Heap is Chrome-only, current and GC-sensitive;
+temporary growth is not proof of a leak without post-GC retention. React Scan is
+not part of these shared measurements. User Timing commit and row-model entries
+are sampled once every 20 candidates; the numeric counters remain exact, while
+the Performance timeline avoids one retained entry per hot-path execution.
 
 ## Standalone policy
 
diff --git a/examples/alpine/realtime-trading/index.html b/examples/alpine/realtime-trading/index.html
index 08ca958438..bb7d47afb5 100644
--- a/examples/alpine/realtime-trading/index.html
+++ b/examples/alpine/realtime-trading/index.html
@@ -43,14 +43,6 @@
         </aside>
       </div>
       <section class="market-panel" aria-label="Live synthetic quotes">
-        <section class="metrics-strip" aria-label="Live performance metrics">
-          <template x-for="item in metricItems()" :key="item[0]"
-            ><article>
-              <span x-text="item[0]"></span
-              ><strong :data-testid="item[3] || null" x-text="item[1]"></strong
-              ><small x-text="item[2]"></small></article
-          ></template>
-        </section>
         <div
           x-ref="scroll"
           class="table-scroll"
@@ -197,7 +189,7 @@
             x-text="formatInteger(local.benchmark.metrics.lastBatchSize)"
           ></strong></span
         ><span
-          >ROW UPDATES
+          >CHANGED ROWS
           <strong
             x-text="formatInteger(local.benchmark.metrics.lastUpdateCount)"
           ></strong></span
@@ -223,6 +215,18 @@
           <header>
             <span>CONFIGURATOR</span><small>RUN PARAMETERS</small>
           </header>
+          <section class="metrics-strip" aria-labelledby="live-health">
+            <h2 id="live-health">LIVE HEALTH</h2>
+            <template x-for="item in metricItems()" :key="item[0]"
+              ><article>
+                <span x-text="item[0]"></span
+                ><strong
+                  :data-testid="item[3] || null"
+                  x-text="item[1]"
+                ></strong
+                ><small x-text="item[2]"></small></article
+            ></template>
+          </section>
           <section class="config-section" aria-labelledby="feed-settings">
             <h2 id="feed-settings">FEED</h2>
             <button
diff --git a/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
index 9eea493fec..0776afae13 100644
--- a/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -9,6 +9,15 @@ export interface NamedInvocationRate {
   callsPerSecond: number
 }
 
+interface TimedLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const averageLatencyWindowMs = 3_000
+const percentileLatencyWindowMs = 10_000
+const frameRateWindowMs = 1_000
+
 export interface FeedMetrics {
   actualTicksPerSecond: number
   rowUpdatesPerSecond: number
@@ -17,12 +26,12 @@ export interface FeedMetrics {
   supersededUpdatesPerSecond: number
   totalTicks: number
   rafCallbacksPerSecond: number
-  tableRendersPerSecond: number
+  tableCommitsPerSecond: number
   lastBatchSize: number
-  averageRenderMs: number
-  p95RenderMs: number
-  maxRenderMs: number
-  slowRenders: number
+  averageCommitLatencyMs: number
+  p95CommitLatencyMs: number
+  maxCommitLatencyMs: number
+  slowCommits: number
   longAnimationFrames: number
   worstLongAnimationFrameMs: number
   heapMb: number | null
@@ -49,12 +58,12 @@ export const initialMetrics: FeedMetrics = {
   supersededUpdatesPerSecond: 0,
   totalTicks: 0,
   rafCallbacksPerSecond: 0,
-  tableRendersPerSecond: 0,
+  tableCommitsPerSecond: 0,
   lastBatchSize: 0,
-  averageRenderMs: 0,
-  p95RenderMs: 0,
-  maxRenderMs: 0,
-  slowRenders: 0,
+  averageCommitLatencyMs: 0,
+  p95CommitLatencyMs: 0,
+  maxCommitLatencyMs: 0,
+  slowCommits: 0,
   longAnimationFrames: 0,
   worstLongAnimationFrameMs: 0,
   heapMb: null,
@@ -73,7 +82,8 @@ export const initialMetrics: FeedMetrics = {
   visibleRows: 0,
 }
 
-const userTiming = { entryCount: 0 }
+const userTiming = { entryCount: 0, measureCandidateCount: 0 }
+const userTimingSamplingInterval = 20
 
 export function recordMeasure(
   name: string,
@@ -81,11 +91,14 @@ export function recordMeasure(
   end: number,
   detail: Record<string, unknown>,
 ): void {
+  userTiming.measureCandidateCount++
+  if (userTiming.measureCandidateCount % userTimingSamplingInterval !== 0)
+    return
   try {
     performance.measure(name, { start, end, detail })
     userTiming.entryCount++
     if (userTiming.entryCount % 1_000 === 0) {
-      performance.clearMeasures('market-update-to-layout-commit')
+      performance.clearMeasures('market-update-to-dom-commit')
     }
   } catch {
     // User Timing Level 3 options are not implemented in every browser.
@@ -110,8 +123,10 @@ export function markBenchmarkAction(
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
-    pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    sessionStartedAt: performance.now(),
+    pendingMutationStartedAt: null as number | null,
+    commitLatencySamples: [] as Array<TimedLatencySample>,
+    slowCommitCount: 0,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -121,8 +136,9 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
-    tableRendersInSample: 0,
+    frameTrackingStartedAt: performance.now(),
+    frameTimestamps: [] as Array<number>,
+    tableCommitsInSample: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -138,23 +154,28 @@ export class BenchmarkMonitor {
     previousRowModelDuration: 0,
   }
 
-  markRenderPending(): void {
-    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  markCommitPending(): void {
+    this.#runtime.pendingMutationStartedAt ??= performance.now()
   }
 
-  recordCompletedRender(): void {
+  recordDomCommit(): void {
     const runtime = this.#runtime
-    if (runtime.pendingRenderStartedAt !== null) {
-      const renderEndedAt = performance.now()
-      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+    if (runtime.pendingMutationStartedAt !== null) {
+      const commitEndedAt = performance.now()
+      const duration = commitEndedAt - runtime.pendingMutationStartedAt
+      runtime.commitLatencySamples.push({
+        recordedAt: commitEndedAt,
+        duration,
+      })
+      if (duration > 16.7) runtime.slowCommitCount++
       recordMeasure(
-        'market-update-to-layout-commit',
-        runtime.pendingRenderStartedAt,
-        renderEndedAt,
+        'market-update-to-dom-commit',
+        runtime.pendingMutationStartedAt,
+        commitEndedAt,
         {},
       )
-      runtime.pendingRenderStartedAt = null
-      runtime.tableRendersInSample++
+      runtime.pendingMutationStartedAt = null
+      runtime.tableCommitsInSample++
     }
   }
 
@@ -178,12 +199,15 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    const timestamps = this.#runtime.frameTimestamps
+    timestamps.push(now)
+    pruneFrameTimestamps(timestamps, now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -206,8 +230,17 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const renderSamples = runtime.renderSamples
-    const sortedRenderSamples = [...renderSamples].sort(
+    pruneLatencySamples(runtime.commitLatencySamples, now)
+    pruneFrameTimestamps(runtime.frameTimestamps, now)
+    const averageCommitLatencySamples = runtime.commitLatencySamples
+      .filter((sample) => sample.recordedAt >= now - averageLatencyWindowMs)
+      .map((sample) => sample.duration)
+    const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
+      (sample) => sample.duration,
+    )
+    const sortedCommitLatencySamples = [
+      ...percentileCommitLatencySamples,
+    ].sort(
       (left, right) => left - right,
     )
     const rowModelCalls =
@@ -230,14 +263,14 @@ export class BenchmarkMonitor {
       runtime.previousComponentRenderCallsByName,
       sampleDuration,
     )
-    const averageRenderMs =
-      renderSamples.length === 0
+    const averageCommitLatencyMs =
+      averageCommitLatencySamples.length === 0
         ? 0
-        : renderSamples.reduce((sum, value) => sum + value, 0) /
-          renderSamples.length
+        : averageCommitLatencySamples.reduce((sum, value) => sum + value, 0) /
+          averageCommitLatencySamples.length
     const p95Index = Math.max(
       0,
-      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+      Math.ceil(sortedCommitLatencySamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
       actualTicksPerSecond:
@@ -254,14 +287,18 @@ export class BenchmarkMonitor {
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
-      tableRendersPerSecond:
-        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+        calculateFrameRate(
+          runtime.frameTimestamps,
+          runtime.frameTrackingStartedAt,
+          now,
+        ),
+      tableCommitsPerSecond:
+        (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
-      averageRenderMs,
-      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
-      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      averageCommitLatencyMs,
+      p95CommitLatencyMs: sortedCommitLatencySamples[p95Index] ?? 0,
+      maxCommitLatencyMs: sortedCommitLatencySamples.at(-1) ?? 0,
+      slowCommits: runtime.slowCommitCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -301,17 +338,17 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.tableCommitsInSample = 0
     return metrics
   }
 
   reset(): void {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
-    runtime.pendingRenderStartedAt = null
-    runtime.renderSamples = []
+    runtime.sessionStartedAt = runtime.sampleStartedAt
+    runtime.pendingMutationStartedAt = null
+    runtime.commitLatencySamples = []
+    runtime.slowCommitCount = 0
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -321,8 +358,9 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
+    runtime.tableCommitsInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
@@ -366,3 +404,36 @@ function calculateInvocationRates(
         : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
   }))
 }
+
+function pruneLatencySamples(
+  samples: Array<TimedLatencySample>,
+  now: number,
+): void {
+  const cutoff = now - percentileLatencyWindowMs
+  const firstRetainedIndex = samples.findIndex(
+    (sample) => sample.recordedAt >= cutoff,
+  )
+  if (firstRetainedIndex > 0) samples.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) samples.length = 0
+}
+
+function pruneFrameTimestamps(timestamps: Array<number>, now: number): void {
+  const cutoff = now - frameRateWindowMs
+  const firstRetainedIndex = timestamps.findIndex(
+    (timestamp) => timestamp >= cutoff,
+  )
+  if (firstRetainedIndex > 0) timestamps.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) timestamps.length = 0
+}
+
+function calculateFrameRate(
+  timestamps: ReadonlyArray<number>,
+  trackingStartedAt: number,
+  now: number,
+): number {
+  const observedWindowMs = Math.min(
+    frameRateWindowMs,
+    Math.max(1, now - trackingStartedAt),
+  )
+  return (timestamps.length / observedWindowMs) * 1_000
+}
diff --git a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 604d8efe42..d2a2068f7a 100644
--- a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -101,7 +101,7 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
+            this.monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
           }
         })
       : null
@@ -109,14 +109,13 @@ export class TradingBenchmarkController {
     this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
     this.#runtime.stopObservingFeed = this.feed.observe({
       messageReceived: () => this.monitor.recordWorkerMessage(),
-      mutationStarted: () => this.monitor.markRenderPending(),
+      mutationStarted: () => this.monitor.markCommitPending(),
       batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
         this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
-      renderCommitted: () => this.monitor.recordCompletedRender(),
+      renderCommitted: () => this.monitor.recordDomCommit(),
     })
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
 
@@ -132,7 +131,7 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
+    this.monitor.recordAnimationFrame(now)
     if (this.monitor.shouldPublish(now)) {
       this.#publishMetrics(this.monitor.publish(now))
     }
diff --git a/examples/alpine/realtime-trading/src/index.css b/examples/alpine/realtime-trading/src/index.css
index 20264402de..69cba52fa7 100644
--- a/examples/alpine/realtime-trading/src/index.css
+++ b/examples/alpine/realtime-trading/src/index.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/examples/alpine/realtime-trading/src/main.ts b/examples/alpine/realtime-trading/src/main.ts
index dc27b85c9d..4b612dbc10 100644
--- a/examples/alpine/realtime-trading/src/main.ts
+++ b/examples/alpine/realtime-trading/src/main.ts
@@ -119,6 +119,8 @@ Alpine.data('tradingApp', () => {
     cachedRows: [] as ReturnType<Table['getRowModel']>['rows'],
     cachedFeed: null as Array<MarketQuote> | null,
     cachedTableVersion: -1,
+    lastRenderedRowCount: -1,
+    domCommitScheduled: false,
   }
   const rows = () => {
     if (
@@ -161,7 +163,12 @@ Alpine.data('tradingApp', () => {
             .getVirtualItems()
             .map((item) => ({ row: currentRows[item.index], virtual: item }))
         : currentRows.map((row) => ({ row, virtual: null }))
-    queueMicrotask(() => controller.actions.setRenderedRowCount(result.length))
+    if (runtime.lastRenderedRowCount !== result.length) {
+      runtime.lastRenderedRowCount = result.length
+      queueMicrotask(() =>
+        controller.actions.setRenderedRowCount(runtime.lastRenderedRowCount),
+      )
+    }
     return result
   }
   const writeSizes = (tableElement: HTMLTableElement) => {
@@ -177,6 +184,15 @@ Alpine.data('tradingApp', () => {
     }
     tableElement.style.width = `${table.getTotalSize()}px`
   }
+  const scheduleDomCommit = () => {
+    if (runtime.domCommitScheduled) return
+
+    runtime.domCommitScheduled = true
+    Alpine.nextTick(() => {
+      runtime.domCommitScheduled = false
+      feed.completeRender()
+    })
+  }
 
   return {
     table,
@@ -221,6 +237,7 @@ Alpine.data('tradingApp', () => {
       )
       mutationObserver.observe(tableElement.tBodies[0], {
         attributes: true,
+        attributeFilter: ['class', 'style'],
         characterData: true,
         childList: true,
         subtree: true,
@@ -249,7 +266,7 @@ Alpine.data('tradingApp', () => {
         }),
         feed.quotes.subscribe((quotes) => {
           local.feed.quotes = quotes
-          Alpine.nextTick(() => feed.completeRender())
+          scheduleDomCommit()
         }),
         controller.store.subscribe((state) => {
           local.benchmark = state
@@ -282,10 +299,8 @@ Alpine.data('tradingApp', () => {
           (subscription) => () => subscription.unsubscribe(),
         ),
       )
-      Alpine.nextTick(() => {
-        writeSizes(tableElement)
-        feed.completeRender()
-      })
+      Alpine.nextTick(() => writeSizes(tableElement))
+      scheduleDomCommit()
     },
     destroy() {
       for (const cleanup of runtime.cleanups) cleanup()
@@ -362,41 +377,16 @@ Alpine.data('tradingApp', () => {
       const metrics = local.benchmark.metrics
       return [
         [
-          'WORKER SAMPLES',
-          rate.format(metrics.actualTicksPerSecond),
-          'generated samples/s',
-          'actual-rate',
-        ],
-        [
-          'ROW UPDATES',
-          rate.format(metrics.rowUpdatesPerSecond),
-          'unique rows applied/s',
-          'row-update-rate',
-        ],
-        [
-          'MESSAGES',
-          metrics.workerMessagesPerSecond.toFixed(1),
-          'worker messages/s',
-          'message-rate',
+          'FRAME RATE (EST.)',
+          metrics.rafCallbacksPerSecond.toFixed(1),
+          'rAF callbacks/s · rolling 1 s',
+          'frame-rate',
         ],
         [
-          'STATE APPLIES',
-          metrics.stateApplicationsPerSecond.toFixed(1),
-          'quote snapshots/s',
-          'state-apply-rate',
-        ],
-        [
-          'TABLE COMMITS',
-          metrics.tableRendersPerSecond.toFixed(1),
-          'completed renders/s',
-          'table-render-rate',
-        ],
-        ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
-        [
-          'P95 RENDER',
-          ms(metrics.p95RenderMs),
-          `max ${ms(metrics.maxRenderMs)}`,
-          '',
+          'AVG COMMIT',
+          ms(metrics.averageCommitLatencyMs),
+          'snapshot → DOM · rolling 3 s',
+          'average-commit-latency',
         ],
         [
           'LONG FRAMES',
@@ -404,10 +394,16 @@ Alpine.data('tradingApp', () => {
             ? String(metrics.longAnimationFrames)
             : 'N/A',
           local.benchmark.longAnimationFramesSupported
-            ? `worst ${ms(metrics.worstLongAnimationFrameMs)}`
+            ? `since reset · worst ${ms(metrics.worstLongAnimationFrameMs)}`
             : 'unsupported',
           'long-frame-count',
         ],
+        [
+          'THROUGHPUT',
+          `${rate.format(metrics.rowUpdatesPerSecond)} rows/s`,
+          `${metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s · rows deduplicated per snapshot`,
+          'throughput-rate',
+        ],
       ]
     },
     diagnostics() {
@@ -421,6 +417,36 @@ Alpine.data('tradingApp', () => {
           : '—'
       }
       return [
+        [
+          'Worker-generated samples / s',
+          rate.format(metrics.actualTicksPerSecond),
+          'actual-rate',
+        ],
+        [
+          'Changed rows / s',
+          rate.format(metrics.rowUpdatesPerSecond),
+          'row-update-rate',
+        ],
+        [
+          'Worker messages / s',
+          metrics.workerMessagesPerSecond.toFixed(1),
+          'message-rate',
+        ],
+        [
+          'Snapshots applied / s',
+          metrics.stateApplicationsPerSecond.toFixed(1),
+          'state-apply-rate',
+        ],
+        [
+          'DOM commits / s',
+          metrics.tableCommitsPerSecond.toFixed(1),
+          'table-render-rate',
+        ],
+        [
+          'Commit latency p95 / max (10 s)',
+          `${ms(metrics.p95CommitLatencyMs)} / ${ms(metrics.maxCommitLatencyMs)}`,
+          '',
+        ],
         ['Mounted cells', integer.format(local.benchmark.mountedCells), ''],
         ['Live components', integer.format(local.benchmark.liveComponents), ''],
         [
@@ -449,7 +475,7 @@ Alpine.data('tradingApp', () => {
           'cell-render-breakdown',
         ],
         [
-          'DOM mutation records / s',
+          'Observed MutationRecords / s',
           rate.format(metrics.domMutationsPerSecond),
           'dom-mutation-rate',
         ],
@@ -483,9 +509,13 @@ Alpine.data('tradingApp', () => {
           `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`,
           '',
         ],
-        ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''],
         [
-          'JS heap',
+          'Commits > 16.7 ms (since reset)',
+          integer.format(metrics.slowCommits),
+          '',
+        ],
+        [
+          'JS heap (current, GC-sensitive)',
           metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`,
           '',
         ],
diff --git a/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts b/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
index fb503b8460..24c85591a1 100644
--- a/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
+++ b/examples/alpine/realtime-trading/src/table/table-config/trading-columns.ts
@@ -220,14 +220,18 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
     duration,
   )
   rowModelDiagnostics.lastRowCount = rows.length
-  try {
-    performance.measure('tanstack-row-model', {
-      start,
-      end,
-      detail: { rowCount: rows.length },
-    })
-  } catch {
-    /* optional */
+  if (rowModelDiagnostics.calls % 20 === 0) {
+    try {
+      performance.measure('tanstack-row-model', {
+        start,
+        end,
+        detail: { rowCount: rows.length },
+      })
+      if (rowModelDiagnostics.calls % 1_000 === 0)
+        performance.clearMeasures('tanstack-row-model')
+    } catch {
+      /* optional sampled User Timing detail */
+    }
   }
   return rows
 }
diff --git a/examples/angular/realtime-trading/README.md b/examples/angular/realtime-trading/README.md
index 54e1fb5e5a..35bae0169a 100644
--- a/examples/angular/realtime-trading/README.md
+++ b/examples/angular/realtime-trading/README.md
@@ -186,23 +186,45 @@ filtered row model when its data/state inputs require it.
 The benchmark layer observes the feed through callbacks, so it can be removed
 without changing feed semantics. It reports:
 
-- generated worker samples, unique row updates, received messages, and state
-  applies;
-- completed table renders and average mutation-to-render latency;
+- a compact **Live health** summary in the configurator: estimated frame
+  callbacks over a rolling 1-second window, average market-mutation-to-DOM-
+  commit latency over 3 seconds, cumulative long animation frames, and
+  throughput as changed rows plus applied snapshots per second;
+- generated worker samples, changed rows, received messages, state applies,
+  and completed DOM commits;
+- p95/maximum commit latency over a rolling 10-second window and commits over
+  16.7 ms accumulated since reset;
 - long animation frames and worst duration when the browser supports the Long
   Animation Frames API;
 - mounted cell hosts and live/created/destroyed dynamic components;
 - cell-render callbacks by column and component executions by type;
-- DOM mutation records from a `MutationObserver`;
+- DOM `MutationRecord` delivery rate from a `MutationObserver` limited to text,
+  child-list, and `class`/`style` attributes;
 - core row-model call rate and average/maximum duration;
 - heap information where the browser exposes it.
 
+The frame-rate value is an estimated `requestAnimationFrame` callback rate, not
+GPU-presented FPS; its healthy ceiling follows the display refresh rate. The
+latency starts at the first pending feed mutation and ends in Angular's
+`afterEveryRender` callback, after Angular has committed the DOM.
+
+`Changed rows/s` sums the update array lengths delivered by each snapshot.
+Symbols are deduplicated inside one worker message, but the same row can count
+again in the next snapshot; it is therefore applied row throughput, not the
+number of distinct instruments touched during the entire second.
+
 Renderer callback counts are not DOM mutation counts. A callback can execute
 and still reuse a component/view, while a component execution count records the
-framework component path itself. Heap growth during the swap stress mode is not
-automatically a leak: garbage collection is nondeterministic, so retained
-objects must be confirmed with repeated heap snapshots after GC and a stable
-workload.
+framework component path itself. `MutationObserver` reports delivered records,
+not a one-to-one count of browser DOM operations; record coalescing and custom
+component internals affect it, and observing a hot subtree has profiling
+overhead. The attribute filter excludes selection-oriented `data-*` changes to
+reduce noise. Heap is Chromium-only and GC-sensitive. Growth during swap mode is
+not automatically a leak: confirm retention with repeated post-GC snapshots.
+The rAF loop only appends a timestamp; rolling aggregation and heap reads run at
+the 500 ms metrics publication cadence. Mutation observation remains the most
+intrusive diagnostic because the browser must create records for the observed
+subtree.
 
 Use Chrome Performance/Angular DevTools for call stacks and frame analysis, and
 the in-app diagnostics for controlled comparisons. Keep row count, workload,
diff --git a/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts b/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
index 830c4100b5..03a22f74b0 100644
--- a/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
+++ b/examples/angular/realtime-trading/src/app/benchmark/benchmark-monitor.ts
@@ -21,6 +21,7 @@ export interface FeedMetrics {
   componentsDestroyed: number
   workerMessages: number
   lastUpdateCount: number
+  domMutationsPerSecond: number
 }
 
 export const initialMetrics: FeedMetrics = {
@@ -44,13 +45,26 @@ export const initialMetrics: FeedMetrics = {
   componentsDestroyed: 0,
   workerMessages: 0,
   lastUpdateCount: 0,
+  domMutationsPerSecond: 0,
 }
 
+interface CommitLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const AVERAGE_COMMIT_WINDOW_MS = 3_000
+const PERCENTILE_COMMIT_WINDOW_MS = 10_000
+const FRAME_RATE_WINDOW_MS = 1_000
+
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
+    sessionStartedAt: performance.now(),
+    frameTrackingStartedAt: performance.now(),
     pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    renderSamples: [] as Array<CommitLatencySample>,
+    frameTimestamps: [] as Array<number>,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -60,10 +74,11 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
     tableRendersInSample: 0,
+    slowRenderCount: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
+    domMutationsInSample: 0,
   }
 
   markRenderPending(): void {
@@ -73,9 +88,10 @@ export class BenchmarkMonitor {
   recordCompletedRender(): void {
     const runtime = this.#runtime
     if (runtime.pendingRenderStartedAt !== null) {
-      runtime.renderSamples.push(
-        performance.now() - runtime.pendingRenderStartedAt,
-      )
+      const renderEndedAt = performance.now()
+      const duration = renderEndedAt - runtime.pendingRenderStartedAt
+      runtime.renderSamples.push({ recordedAt: renderEndedAt, duration })
+      if (duration > 16.7) runtime.slowRenderCount++
       runtime.pendingRenderStartedAt = null
       runtime.tableRendersInSample++
     }
@@ -101,12 +117,13 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    this.#runtime.frameTimestamps.push(now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -114,6 +131,14 @@ export class BenchmarkMonitor {
     )
   }
 
+  recordDomMutations(count: number): void {
+    this.#runtime.domMutationsInSample += count
+  }
+
+  resetDomMutations(): void {
+    this.#runtime.domMutationsInSample = 0
+  }
+
   shouldPublish(now: number): boolean {
     return now - this.#runtime.sampleStartedAt >= 500
   }
@@ -121,14 +146,25 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const sortedRenderSamples = [...runtime.renderSamples].sort(
-      (left, right) => left - right,
+    runtime.renderSamples = runtime.renderSamples.filter(
+      (sample) => sample.recordedAt >= now - PERCENTILE_COMMIT_WINDOW_MS,
+    )
+    runtime.frameTimestamps = runtime.frameTimestamps.filter(
+      (timestamp) => timestamp >= now - FRAME_RATE_WINDOW_MS,
     )
+    const averageRenderSamples = runtime.renderSamples.filter(
+      (sample) => sample.recordedAt >= now - AVERAGE_COMMIT_WINDOW_MS,
+    )
+    const sortedRenderSamples = runtime.renderSamples
+      .map((sample) => sample.duration)
+      .sort((left, right) => left - right)
     const averageRenderMs =
-      runtime.renderSamples.length === 0
+      averageRenderSamples.length === 0
         ? 0
-        : runtime.renderSamples.reduce((sum, value) => sum + value, 0) /
-          runtime.renderSamples.length
+        : averageRenderSamples.reduce(
+            (sum, sample) => sum + sample.duration,
+            0,
+          ) / averageRenderSamples.length
     const p95Index = Math.max(
       0,
       Math.ceil(sortedRenderSamples.length * 0.95) - 1,
@@ -148,14 +184,19 @@ export class BenchmarkMonitor {
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+        (runtime.frameTimestamps.length /
+          Math.min(
+            FRAME_RATE_WINDOW_MS,
+            Math.max(1, now - runtime.frameTrackingStartedAt),
+          )) *
+        1_000,
       tableRendersPerSecond:
         (runtime.tableRendersInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
       averageRenderMs,
       p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
       maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: runtime.renderSamples.filter((value) => value > 16.7).length,
+      slowRenders: runtime.slowRenderCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -163,6 +204,8 @@ export class BenchmarkMonitor {
       componentsDestroyed: quoteCellLifecycle.destroyed,
       workerMessages: runtime.workerMessages,
       lastUpdateCount: runtime.lastUpdateCount,
+      domMutationsPerSecond:
+        (runtime.domMutationsInSample / sampleDuration) * 1_000,
     }
 
     runtime.sampleStartedAt = now
@@ -171,8 +214,7 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
+    runtime.domMutationsInSample = 0
     runtime.tableRendersInSample = 0
     return metrics
   }
@@ -180,8 +222,11 @@ export class BenchmarkMonitor {
   reset(): void {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
+    runtime.sessionStartedAt = runtime.sampleStartedAt
     runtime.pendingRenderStartedAt = null
     runtime.renderSamples = []
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -191,10 +236,11 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
     runtime.tableRendersInSample = 0
+    runtime.slowRenderCount = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
+    runtime.domMutationsInSample = 0
   }
 }
 
diff --git a/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts b/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
index 014d474a26..5f8e15bbef 100644
--- a/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
+++ b/examples/angular/realtime-trading/src/app/benchmark/trading-benchmark.controller.ts
@@ -79,7 +79,6 @@ export class TradingBenchmarkController {
       : null
     this.#longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
     this.#destroyRef.onDestroy(() => {
@@ -108,6 +107,14 @@ export class TradingBenchmarkController {
     this.renderedRowCount.set(count)
   }
 
+  recordDomMutations(count: number): void {
+    this.#monitor.recordDomMutations(count)
+  }
+
+  resetDomMutations(): void {
+    this.#monitor.resetDomMutations()
+  }
+
   resetViewState(): void {
     this.selectedSymbol.set(null)
   }
@@ -120,7 +127,7 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.#monitor.recordAnimationFrame()
+    this.#monitor.recordAnimationFrame(now)
     if (this.#monitor.shouldPublish(now)) {
       this.metrics.set(this.#monitor.publish(now))
     }
@@ -131,7 +138,7 @@ export class TradingBenchmarkController {
     entries: PerformanceObserverEntryList,
   ): void => {
     for (const entry of entries.getEntries()) {
-      this.#monitor.recordLongAnimationFrame(entry.duration)
+      this.#monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
     }
   }
 }
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.html b/examples/angular/realtime-trading/src/app/shell/configurator.html
index 028f67684d..3e3928d479 100644
--- a/examples/angular/realtime-trading/src/app/shell/configurator.html
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.html
@@ -4,6 +4,8 @@
     <small>RUN PARAMETERS</small>
   </header>
 
+  <app-metrics-strip />
+
   <section class="config-section" aria-labelledby="feed-settings">
     <h2 id="feed-settings">FEED</h2>
     <button class="primary-action" type="button" data-testid="feed-toggle" (click)="feed.toggle()">
diff --git a/examples/angular/realtime-trading/src/app/shell/configurator.ts b/examples/angular/realtime-trading/src/app/shell/configurator.ts
index e0e58f249e..83f8ab41b9 100644
--- a/examples/angular/realtime-trading/src/app/shell/configurator.ts
+++ b/examples/angular/realtime-trading/src/app/shell/configurator.ts
@@ -8,6 +8,7 @@ import {
 import { MarketFeedService } from '../feed/market-feed.service'
 import { configuratorOptions } from './configurator-options'
 import { Diagnostics } from './diagnostics'
+import { MetricsStrip } from './metrics-strip'
 import { SelectedInstrument } from './selected-instrument'
 import {
   formatRate,
@@ -18,7 +19,7 @@ import {
 
 @Component({
   selector: 'app-configurator',
-  imports: [Diagnostics, SelectedInstrument],
+  imports: [Diagnostics, MetricsStrip, SelectedInstrument],
   templateUrl: './configurator.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/examples/angular/realtime-trading/src/app/shell/diagnostics.ts b/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
index a92cda757a..0817db8c2b 100644
--- a/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
+++ b/examples/angular/realtime-trading/src/app/shell/diagnostics.ts
@@ -31,7 +31,44 @@ import { formatInteger, formatRate } from './shell-formatters'
           </dd>
         </div>
         <div>
-          <dt>Worker messages</dt>
+          <dt>Worker samples / s</dt>
+          <dd data-testid="actual-rate">
+            {{ formatRate(controller.metrics().actualTicksPerSecond) }}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages / s</dt>
+          <dd data-testid="message-rate">
+            {{ controller.metrics().workerMessagesPerSecond.toFixed(1) }}
+          </dd>
+        </div>
+        <div>
+          <dt>Changed rows / s</dt>
+          <dd data-testid="row-update-rate">
+            {{ formatRate(controller.metrics().rowUpdatesPerSecond) }}
+          </dd>
+        </div>
+        <div>
+          <dt>State snapshots / s</dt>
+          <dd data-testid="state-apply-rate">
+            {{ controller.metrics().stateApplicationsPerSecond.toFixed(1) }}
+          </dd>
+        </div>
+        <div>
+          <dt>Table DOM commits / s</dt>
+          <dd data-testid="table-render-rate">
+            {{ controller.metrics().tableRendersPerSecond.toFixed(1) }}
+          </dd>
+        </div>
+        <div>
+          <dt>P95 / max commit latency (rolling 10 s)</dt>
+          <dd>
+            {{ controller.metrics().p95RenderMs.toFixed(2) }} ms /
+            {{ controller.metrics().maxRenderMs.toFixed(2) }} ms
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages since reset</dt>
           <dd data-testid="worker-messages">
             {{ formatInteger(controller.metrics().workerMessages) }}
           </dd>
@@ -50,9 +87,15 @@ import { formatInteger, formatRate } from './shell-formatters'
           </dd>
         </div>
         <div>
-          <dt>Renders &gt; 16.7 ms</dt>
+          <dt>Commits &gt; 16.7 ms since reset</dt>
           <dd>{{ controller.metrics().slowRenders }}</dd>
         </div>
+        <div>
+          <dt>Observed MutationRecords / s</dt>
+          <dd data-testid="dom-mutation-rate">
+            {{ formatRate(controller.metrics().domMutationsPerSecond) }}
+          </dd>
+        </div>
         <div>
           <dt>Long animation frames</dt>
           <dd>
@@ -64,7 +107,7 @@ import { formatInteger, formatRate } from './shell-formatters'
           </dd>
         </div>
         <div>
-          <dt>JS heap</dt>
+          <dt>JS heap (GC-sensitive)</dt>
           <dd>
             {{
               controller.metrics().heapMb === null
@@ -74,6 +117,12 @@ import { formatInteger, formatRate } from './shell-formatters'
           </dd>
         </div>
       </dl>
+      <p class="diagnostic-note">
+        MutationObserver counts delivered records, not individual DOM
+        operations, and adds profiling overhead. Only class/style attributes,
+        text, and child-list changes are observed. Heap is a Chromium-only
+        point-in-time value and can move before garbage collection.
+      </p>
     </section>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts b/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
index 52480cc385..e092b39875 100644
--- a/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
+++ b/examples/angular/realtime-trading/src/app/shell/market-statusbar.ts
@@ -13,7 +13,7 @@ import { formatInteger } from './shell-formatters'
         </strong>
       </span>
       <span>
-        ROW UPDATES
+        CHANGED ROWS
         <strong>
           {{ formatInteger(controller.metrics().lastUpdateCount) }}
         </strong>
diff --git a/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts b/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
index 8c98b60d46..7e92dddac0 100644
--- a/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
+++ b/examples/angular/realtime-trading/src/app/shell/metrics-strip.ts
@@ -5,51 +5,21 @@ import { formatMs, formatRate } from './shell-formatters'
 @Component({
   selector: 'app-metrics-strip',
   template: `
-    <section class="metrics-strip" aria-label="Live performance metrics">
+    <section class="metrics-strip" aria-labelledby="live-health">
+      <h2 id="live-health">LIVE HEALTH</h2>
       <article>
-        <span>WORKER SAMPLES</span>
-        <strong data-testid="actual-rate">
-          {{ formatRate(controller.metrics().actualTicksPerSecond) }}
+        <span>FRAME RATE (EST.)</span>
+        <strong data-testid="frame-rate">
+          {{ controller.metrics().rafCallbacksPerSecond.toFixed(1) }}
         </strong>
-        <small>generated samples/s</small>
+        <small>rAF callbacks/s · rolling 1 s</small>
       </article>
       <article>
-        <span>ROW UPDATES</span>
-        <strong data-testid="row-update-rate">
-          {{ formatRate(controller.metrics().rowUpdatesPerSecond) }}
+        <span>AVG COMMIT</span>
+        <strong data-testid="average-commit-latency">
+          {{ formatMs(controller.metrics().averageRenderMs) }}
         </strong>
-        <small>unique rows applied/s</small>
-      </article>
-      <article>
-        <span>MESSAGES</span>
-        <strong data-testid="message-rate">
-          {{ controller.metrics().workerMessagesPerSecond.toFixed(1) }}
-        </strong>
-        <small>worker messages/s</small>
-      </article>
-      <article>
-        <span>STATE APPLIES</span>
-        <strong data-testid="state-apply-rate">
-          {{ controller.metrics().stateApplicationsPerSecond.toFixed(1) }}
-        </strong>
-        <small>quote snapshots/s</small>
-      </article>
-      <article>
-        <span>TABLE COMMITS</span>
-        <strong data-testid="table-render-rate">
-          {{ controller.metrics().tableRendersPerSecond.toFixed(1) }}
-        </strong>
-        <small>completed renders/s</small>
-      </article>
-      <article>
-        <span>AVG RENDER</span>
-        <strong>{{ formatMs(controller.metrics().averageRenderMs) }}</strong>
-        <small>mutation → render</small>
-      </article>
-      <article>
-        <span>P95 RENDER</span>
-        <strong>{{ formatMs(controller.metrics().p95RenderMs) }}</strong>
-        <small>max {{ formatMs(controller.metrics().maxRenderMs) }}</small>
+        <small>snapshot → DOM · rolling 3 s</small>
       </article>
       <article>
         <span>LONG FRAMES</span>
@@ -61,7 +31,7 @@ import { formatMs, formatRate } from './shell-formatters'
             {{ controller.metrics().longAnimationFrames }}
           </strong>
           <small>
-            worst
+            since reset · worst
             {{ formatMs(controller.metrics().worstLongAnimationFrameMs) }}
           </small>
         } @else {
@@ -69,6 +39,16 @@ import { formatMs, formatRate } from './shell-formatters'
           <small>unsupported</small>
         }
       </article>
+      <article>
+        <span>THROUGHPUT</span>
+        <strong data-testid="throughput-rate">
+          {{ formatRate(controller.metrics().rowUpdatesPerSecond) }} rows/s
+        </strong>
+        <small>
+          {{ controller.metrics().stateApplicationsPerSecond.toFixed(1) }}
+          snapshots/s · rows deduplicated per snapshot
+        </small>
+      </article>
     </section>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/examples/angular/realtime-trading/src/app/shell/trading-shell.html b/examples/angular/realtime-trading/src/app/shell/trading-shell.html
index b5c8d1345a..ddce4e567d 100644
--- a/examples/angular/realtime-trading/src/app/shell/trading-shell.html
+++ b/examples/angular/realtime-trading/src/app/shell/trading-shell.html
@@ -10,7 +10,6 @@
   </div>
 
   <section class="market-panel" aria-label="Live synthetic quotes">
-    <app-metrics-strip />
     <ng-content />
   </section>
 
diff --git a/examples/angular/realtime-trading/src/app/shell/trading-shell.ts b/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
index 45c7ea3e3f..02ffb4850f 100644
--- a/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
+++ b/examples/angular/realtime-trading/src/app/shell/trading-shell.ts
@@ -7,12 +7,11 @@ import {
 import { TradingBenchmarkController } from '../benchmark/trading-benchmark.controller'
 import { Configurator } from './configurator'
 import { MarketStatusbar } from './market-statusbar'
-import { MetricsStrip } from './metrics-strip'
 import { ShellHeader } from './shell-header'
 
 @Component({
   selector: 'app-trading-shell',
-  imports: [Configurator, MarketStatusbar, MetricsStrip, ShellHeader],
+  imports: [Configurator, MarketStatusbar, ShellHeader],
   templateUrl: './trading-shell.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/examples/angular/realtime-trading/src/app/table/current-trading-table.ts b/examples/angular/realtime-trading/src/app/table/current-trading-table.ts
index 7b8e6b7597..e026e7fcda 100644
--- a/examples/angular/realtime-trading/src/app/table/current-trading-table.ts
+++ b/examples/angular/realtime-trading/src/app/table/current-trading-table.ts
@@ -22,6 +22,7 @@ import { injectTradingTableInitialFit } from './trading-table-initial-fit'
 import { TradingGridCellDirective } from './view/trading-grid-cell.directive'
 import { TradingGridSelectionDirective } from './view/trading-grid-selection.directive'
 import { TradingHeaderCell } from './view/trading-header-cell'
+import { TradingTableBenchmarkDirective } from './view/trading-table-benchmark.directive'
 import {
   TRADING_ROW_HEIGHT,
   injectTradingRowVirtualizer,
@@ -43,6 +44,7 @@ const features = tableFeatures({
     TradingGridCellDirective,
     TradingGridSelectionDirective,
     TradingHeaderCell,
+    TradingTableBenchmarkDirective,
   ],
   templateUrl: './table-v9.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/examples/angular/realtime-trading/src/app/table/table-v9.html b/examples/angular/realtime-trading/src/app/table/table-v9.html
index ebd35691ee..18219c4a25 100644
--- a/examples/angular/realtime-trading/src/app/table/table-v9.html
+++ b/examples/angular/realtime-trading/src/app/table/table-v9.html
@@ -31,7 +31,11 @@
             </tr>
           }
         </thead>
-        <tbody class="virtual-table-body" [style.height.px]="tableHeight()">
+        <tbody
+          appTradingTableBenchmark
+          class="virtual-table-body"
+          [style.height.px]="tableHeight()"
+        >
           @for (virtualRow of virtualization.tanStackVirtualRows(); track virtualRow.key) {
             @if (rows()[virtualRow.index]; as row) {
               <tr
@@ -91,7 +95,7 @@
             </tr>
           }
         </thead>
-        <tbody>
+        <tbody appTradingTableBenchmark>
           @for (row of rows(); track row.id) {
             <tr
               [attr.data-symbol]="row.original.symbol"
diff --git a/examples/angular/realtime-trading/src/app/table/view/trading-table-benchmark.directive.ts b/examples/angular/realtime-trading/src/app/table/view/trading-table-benchmark.directive.ts
new file mode 100644
index 0000000000..75b3de8586
--- /dev/null
+++ b/examples/angular/realtime-trading/src/app/table/view/trading-table-benchmark.directive.ts
@@ -0,0 +1,25 @@
+import { DestroyRef, Directive, ElementRef, inject } from '@angular/core'
+import { TradingBenchmarkController } from '../../benchmark/trading-benchmark.controller'
+
+@Directive({
+  selector: 'tbody[appTradingTableBenchmark]',
+})
+export class TradingTableBenchmarkDirective {
+  readonly #controller = inject(TradingBenchmarkController)
+  readonly #element = inject<ElementRef<HTMLTableSectionElement>>(ElementRef)
+  readonly #observer = new MutationObserver((records) => {
+    this.#controller.recordDomMutations(records.length)
+  })
+
+  constructor() {
+    this.#controller.resetDomMutations()
+    this.#observer.observe(this.#element.nativeElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+    inject(DestroyRef).onDestroy(() => this.#observer.disconnect())
+  }
+}
diff --git a/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts b/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
index abcdc6cfa6..ddea2f63ae 100644
--- a/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
+++ b/examples/angular/realtime-trading/src/app/table/worker/worker-trading-table.ts
@@ -27,6 +27,7 @@ import { injectTradingTableInitialFit } from '../trading-table-initial-fit'
 import { TradingGridCellDirective } from '../view/trading-grid-cell.directive'
 import { TradingGridSelectionDirective } from '../view/trading-grid-selection.directive'
 import { TradingHeaderCell } from '../view/trading-header-cell'
+import { TradingTableBenchmarkDirective } from '../view/trading-table-benchmark.directive'
 import {
   TRADING_ROW_HEIGHT,
   injectTradingRowVirtualizer,
@@ -60,6 +61,7 @@ function createWorkerTableRuntime() {
     TradingGridCellDirective,
     TradingGridSelectionDirective,
     TradingHeaderCell,
+    TradingTableBenchmarkDirective,
   ],
   templateUrl: '../table-v9.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/examples/angular/realtime-trading/src/styles.css b/examples/angular/realtime-trading/src/styles.css
index 6157e9527d..f15e25c9d5 100644
--- a/examples/angular/realtime-trading/src/styles.css
+++ b/examples/angular/realtime-trading/src/styles.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -992,6 +997,13 @@ input[type='range'] {
   scrollbar-width: thin;
 }
 
+.diagnostic-note {
+  margin: 0.5rem 0 0;
+  color: var(--muted);
+  font-size: 0.56rem;
+  line-height: 1.45;
+}
+
 dt {
   color: var(--muted);
   font-size: 0.61rem;
diff --git a/examples/ember/realtime-trading/README.md b/examples/ember/realtime-trading/README.md
index 398b327b48..78704cb14e 100644
--- a/examples/ember/realtime-trading/README.md
+++ b/examples/ember/realtime-trading/README.md
@@ -26,23 +26,24 @@ build for performance recordings.
 
 | Path                            | Responsibility                                                                                                |
 | ------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `app/feed/`                     | Market model, instrument universe, configuration, immutable update helpers, and direct TanStack atom controller. |
+| `app/feed/`                     | Market model, instrument universe, configuration, immutable update helpers, and Ember-native tracked controller. |
 | `app/feed/worker/`              | Typed protocol, deterministic engine, and module worker.                                                      |
 | `app/benchmark/`                | Browser monitor and benchmark controller.                                                                     |
 | `app/components/shell/`         | GTS header, metrics, configurator, diagnostics, selected instrument, status bar, and shell layout.            |
 | `app/components/table/`         | Trading table Glimmer component.                                                                              |
 | `app/table/table-config/`       | Grouped columns and custom GTS quote components.                                                              |
 | `app/table/`                    | Table construction, features, delegated interactions, and Virtual Core integration.                           |
-| `app/utils/subscriptions.ts`    | Owner-bound Store subscription and cleanup helpers.                                                           |
+| `app/utils/subscriptions.ts`    | Owner-bound destruction cleanup helper.                                                                       |
 | `app/templates/application.gts` | Creates feed/benchmark controllers and composes the shell.                                                    |
 
 `MarketFeedController` owns worker/feed state. `TradingBenchmarkController`
 observes feed lifecycle callbacks and owns diagnostic/view state. The
-application passes stable controllers to shell/table components; owner-bound
-subscription helpers bridge selected TanStack atoms or stores into tracked
-Glimmer fields and register destruction automatically. `quotes` is an isolated
-high-frequency atom; feed status and each configuration value are separate
-atoms. The root does not proxy every quote or metric as application state.
+application passes stable controllers to shell/table components; Glimmer
+components read the controller's `@tracked` properties directly. `quotes` is
+its own high-frequency tracked property; feed status and each configuration
+value are separate tracked properties. Derived benchmark values use `@cached`.
+There is no foreign Store subscription or mirrored component state, and the
+root does not proxy every quote or metric as application state.
 
 ## Feed and worker pipeline
 
@@ -77,8 +78,11 @@ keyboard navigation, and Price/Move/Percent/Sparkline Glimmer components.
 back row identity. One table/body interaction path resolves cells through
 `event.composedPath()` and data attributes instead of allocating handlers on
 every cell. Column widths are CSS variables updated on sizing/order; a
-`ResizeObserver` performs initial fitting until manual resize. A/B move
-component swapping is an explicit lifecycle stress mode.
+`ResizeObserver` performs initial fitting until manual resize. The
+CSS-variable string is an `@cached` getter that reads Ember-reactive table
+sizing and order, so the first fit and later table updates reach the DOM
+without an imperative Store subscription. A/B move component swapping is an
+explicit lifecycle stress mode.
 
 ## Virtualization
 
@@ -97,7 +101,7 @@ creates every Glimmer row/cell.
 
 - worker-side generation and pre-message coalescing;
 - immutable structural sharing for rows/history;
-- owner-bound, source-specific atom/store subscriptions;
+- direct `@tracked` feed/view state and `@cached` derived state;
 - stable table and virtual row identity;
 - componentized GTS shell/table/cell boundaries;
 - delegated pointer input and CSS hover;
@@ -112,15 +116,32 @@ processing when data changes.
 
 ## Diagnostics and interpretation
 
-The benchmark records worker samples, messages, unique row updates, state
-applies, completed renders, average mutation-to-render latency, long animation
-frames, mounted hosts, component lifecycle/execution, callbacks by column, DOM
-mutation records, row-model timing, and optional heap information.
-
-Renderer callbacks and DOM mutations are different measurements. Temporary
-heap growth during component swapping is not a leak without post-GC retention.
-Compare identical production runs and use Chrome Performance with the in-app
-diagnostics.
+The compact **Live health** section lives in the configurator and reports the
+estimated frame callback rate over 1 second, average market-mutation-to-DOM-
+commit latency over 3 seconds, cumulative long animation frames, and throughput
+as changed rows plus applied snapshots per second. Detailed diagnostics retain
+worker samples/messages, state applies, DOM commits, rolling 10-second p95/max
+commit latency, cumulative slow commits, mounted hosts, component
+lifecycle/execution, row-model timing, DOM mutation records, and heap.
+
+The frame value counts `requestAnimationFrame` callbacks, not GPU-presented
+frames, so its ceiling follows the display refresh rate. Renderer callbacks and
+DOM mutations are different measurements. `MutationObserver` counts delivered
+records, not individual DOM operations, and has overhead on a hot subtree; it
+only observes text, child-list, and `class`/`style` changes to reduce selection
+noise. Heap is a Chromium-only, GC-sensitive point-in-time value. User Timing
+timeline measures are sampled 1-in-20 while the in-memory latency calculation
+keeps every commit, reducing profiler self-interference. Temporary heap growth
+during component swapping is not a leak without post-GC retention.
+The rAF loop only appends a timestamp; rolling aggregation and heap reads run at
+the 500 ms metrics publication cadence. Mutation observation remains the most
+intrusive diagnostic because the browser must create records for the observed
+subtree.
+
+`Changed rows/s` sums the update array lengths delivered by each snapshot.
+Symbols are deduplicated inside one message, but the same row can count again in
+the next snapshot; it is applied row throughput, not distinct instruments per
+second.
 
 ## Standalone policy
 
diff --git a/examples/ember/realtime-trading/app/app.css b/examples/ember/realtime-trading/app/app.css
index 20264402de..7cce7662eb 100644
--- a/examples/ember/realtime-trading/app/app.css
+++ b/examples/ember/realtime-trading/app/app.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -969,6 +974,13 @@ input[type='range'] {
   scrollbar-width: thin;
 }
 
+.diagnostic-note {
+  margin: 0.5rem 0 0;
+  color: var(--muted);
+  font-size: 0.56rem;
+  line-height: 1.45;
+}
+
 dt {
   color: var(--muted);
   font-size: 0.61rem;
diff --git a/examples/ember/realtime-trading/app/benchmark/benchmark-monitor.ts b/examples/ember/realtime-trading/app/benchmark/benchmark-monitor.ts
index 7f4ffe45fa..ee174bcd53 100644
--- a/examples/ember/realtime-trading/app/benchmark/benchmark-monitor.ts
+++ b/examples/ember/realtime-trading/app/benchmark/benchmark-monitor.ts
@@ -73,7 +73,17 @@ export const initialMetrics: FeedMetrics = {
   visibleRows: 0,
 }
 
-const userTiming = { entryCount: 0 }
+const userTiming = { entryCount: 0, measureCallCount: 0 }
+const USER_TIMING_SAMPLE_INTERVAL = 20
+
+interface CommitLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const AVERAGE_COMMIT_WINDOW_MS = 3_000
+const PERCENTILE_COMMIT_WINDOW_MS = 10_000
+const FRAME_RATE_WINDOW_MS = 1_000
 
 export function recordMeasure(
   name: string,
@@ -81,11 +91,13 @@ export function recordMeasure(
   end: number,
   detail: Record<string, unknown>,
 ): void {
+  userTiming.measureCallCount++
+  if (userTiming.measureCallCount % USER_TIMING_SAMPLE_INTERVAL !== 0) return
   try {
     performance.measure(name, { start, end, detail })
     userTiming.entryCount++
     if (userTiming.entryCount % 1_000 === 0) {
-      performance.clearMeasures('market-update-to-layout-commit')
+      performance.clearMeasures('market-update-to-dom-commit')
     }
   } catch {
     // User Timing Level 3 options are not implemented in every browser.
@@ -110,8 +122,11 @@ export function markBenchmarkAction(
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
+    sessionStartedAt: performance.now(),
+    frameTrackingStartedAt: performance.now(),
     pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    renderSamples: [] as Array<CommitLatencySample>,
+    frameTimestamps: [] as Array<number>,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -121,8 +136,8 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
     tableRendersInSample: 0,
+    slowRenderCount: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -146,9 +161,11 @@ export class BenchmarkMonitor {
     const runtime = this.#runtime
     if (runtime.pendingRenderStartedAt !== null) {
       const renderEndedAt = performance.now()
-      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      const duration = renderEndedAt - runtime.pendingRenderStartedAt
+      runtime.renderSamples.push({ recordedAt: renderEndedAt, duration })
+      if (duration > 16.7) runtime.slowRenderCount++
       recordMeasure(
-        'market-update-to-layout-commit',
+        'market-update-to-dom-commit',
         runtime.pendingRenderStartedAt,
         renderEndedAt,
         {},
@@ -178,12 +195,13 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    this.#runtime.frameTimestamps.push(now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -206,10 +224,18 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const renderSamples = runtime.renderSamples
-    const sortedRenderSamples = [...renderSamples].sort(
-      (left, right) => left - right,
+    runtime.renderSamples = runtime.renderSamples.filter(
+      (sample) => sample.recordedAt >= now - PERCENTILE_COMMIT_WINDOW_MS,
     )
+    runtime.frameTimestamps = runtime.frameTimestamps.filter(
+      (timestamp) => timestamp >= now - FRAME_RATE_WINDOW_MS,
+    )
+    const averageRenderSamples = runtime.renderSamples.filter(
+      (sample) => sample.recordedAt >= now - AVERAGE_COMMIT_WINDOW_MS,
+    )
+    const sortedRenderSamples = runtime.renderSamples
+      .map((sample) => sample.duration)
+      .sort((left, right) => left - right)
     const rowModelCalls =
       rowModelDiagnostics.calls - runtime.previousRowModelCalls
     const rowModelDuration =
@@ -231,10 +257,12 @@ export class BenchmarkMonitor {
       sampleDuration,
     )
     const averageRenderMs =
-      renderSamples.length === 0
+      averageRenderSamples.length === 0
         ? 0
-        : renderSamples.reduce((sum, value) => sum + value, 0) /
-          renderSamples.length
+        : averageRenderSamples.reduce(
+            (sum, sample) => sum + sample.duration,
+            0,
+          ) / averageRenderSamples.length
     const p95Index = Math.max(
       0,
       Math.ceil(sortedRenderSamples.length * 0.95) - 1,
@@ -254,14 +282,19 @@ export class BenchmarkMonitor {
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+        (runtime.frameTimestamps.length /
+          Math.min(
+            FRAME_RATE_WINDOW_MS,
+            Math.max(1, now - runtime.frameTrackingStartedAt),
+          )) *
+        1_000,
       tableRendersPerSecond:
         (runtime.tableRendersInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
       averageRenderMs,
       p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
       maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      slowRenders: runtime.slowRenderCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -301,8 +334,6 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
     runtime.tableRendersInSample = 0
     return metrics
   }
@@ -310,8 +341,11 @@ export class BenchmarkMonitor {
   reset(): void {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
+    runtime.sessionStartedAt = runtime.sampleStartedAt
     runtime.pendingRenderStartedAt = null
     runtime.renderSamples = []
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -321,8 +355,8 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
     runtime.tableRendersInSample = 0
+    runtime.slowRenderCount = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
diff --git a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
index 604d8efe42..48c46b6411 100644
--- a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
+++ b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createAtom, createStore } from '@tanstack/store'
+import { cached, tracked } from '@glimmer/tracking'
 import { TRADING_COLUMN_COUNT } from '../table/trading-table'
 import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
 import {
@@ -11,14 +11,6 @@ import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
 import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
-export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollPreference
-  metrics: FeedMetrics
-  mountedCells: number
-  liveComponents: number
-  longAnimationFramesSupported: boolean
-}
-
 export interface TradingBenchmarkActions {
   resetViewState: () => void
   setRendererMode: (mode: RendererMode) => void
@@ -28,20 +20,18 @@ export interface TradingBenchmarkActions {
   resetMarket: () => void
 }
 
-const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'auto',
-  metrics: initialMetrics,
-  mountedCells: 0,
-  liveComponents: 0,
-  longAnimationFramesSupported,
-}
-
 export class TradingBenchmarkController {
-  readonly store = createStore<TradingBenchmarkState>(initialState)
-  readonly renderAtoms = {
-    selectedSymbol: createAtom<string | null>(null),
-    rendererMode: createAtom<RendererMode>('stable'),
+  @tracked requestedVirtualScrollMode: VirtualScrollPreference = 'auto'
+  @tracked metrics: FeedMetrics = initialMetrics
+  @tracked mountedCells = 0
+  @tracked selectedSymbol: string | null = null
+  @tracked rendererMode: RendererMode = 'stable'
+  @cached
+  get liveComponents(): number {
+    const metrics = this.metrics
+    return metrics.componentsCreated - metrics.componentsDestroyed
   }
+  readonly longAnimationFramesSupported = longAnimationFramesSupported
   readonly monitor = new BenchmarkMonitor()
   readonly feed: MarketFeedController
   readonly actions: TradingBenchmarkActions
@@ -56,43 +46,34 @@ export class TradingBenchmarkController {
     this.feed = feed
     this.actions = {
       resetViewState: () => {
-        this.renderAtoms.selectedSymbol.set(null)
+        this.selectedSymbol = null
       },
       setRendererMode: (mode) => {
-        this.renderAtoms.rendererMode.set(mode)
+        this.rendererMode = mode
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
-        this.#patch({
-          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
-        })
+        this.requestedVirtualScrollMode = enabled ? 'tanstack' : 'none'
       },
       setRenderedRowCount: (count) => {
         const mountedCells = count * TRADING_COLUMN_COUNT
-        if (mountedCells !== this.store.get().mountedCells) {
-          this.#patch({ mountedCells })
+        if (mountedCells !== this.mountedCells) {
+          this.mountedCells = mountedCells
         }
       },
       selectSymbol: (symbol) => {
-        this.renderAtoms.selectedSymbol.set(symbol)
+        this.selectedSymbol = symbol
       },
       resetMarket: () => {
-        batch(() => {
-          this.monitor.reset()
-          this.store.setState((state) => ({
-            ...state,
-            metrics: { ...initialMetrics },
-            mountedCells: 0,
-            liveComponents: 0,
-          }))
-          this.renderAtoms.selectedSymbol.set(null)
-          this.feed.actions.reset()
-        })
+        this.monitor.reset()
+        this.metrics = { ...initialMetrics }
+        this.mountedCells = 0
+        this.selectedSymbol = null
+        this.feed.actions.reset()
       },
     }
   }
@@ -101,7 +82,7 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
+            this.monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
           }
         })
       : null
@@ -116,7 +97,6 @@ export class TradingBenchmarkController {
     })
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
 
@@ -132,21 +112,14 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
+    this.monitor.recordAnimationFrame(now)
     if (this.monitor.shouldPublish(now)) {
       this.#publishMetrics(this.monitor.publish(now))
     }
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
   }
 
-  #patch(patch: Partial<TradingBenchmarkState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #publishMetrics(metrics: FeedMetrics): void {
-    this.#patch({
-      metrics,
-      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
-    })
+    this.metrics = metrics
   }
 }
diff --git a/examples/ember/realtime-trading/app/components/shell/app-header.gts b/examples/ember/realtime-trading/app/components/shell/app-header.gts
index bcec132f31..63de0f3ab0 100644
--- a/examples/ember/realtime-trading/app/components/shell/app-header.gts
+++ b/examples/ember/realtime-trading/app/components/shell/app-header.gts
@@ -1,8 +1,5 @@
 import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
 import { on } from '@ember/modifier'
-import { observeValue } from '../../utils/subscriptions'
-import type Owner from '@ember/owner'
 import type { MarketFeedController } from '../../feed/market-feed-controller'
 
 interface Signature {
@@ -14,14 +11,11 @@ interface Signature {
 }
 
 export default class AppHeader extends Component<Signature> {
-  @tracked workerReady: boolean
-  @tracked running: boolean
-  constructor(owner: Owner, args: Signature['Args']) {
-    super(owner, args)
-    this.workerReady = args.feed.workerReady.get()
-    this.running = args.feed.running.get()
-    observeValue(this, args.feed.workerReady, (value) => { this.workerReady = value })
-    observeValue(this, args.feed.running, (value) => { this.running = value })
+  get workerReady() {
+    return this.args.feed.workerReady
+  }
+  get running() {
+    return this.args.feed.running
   }
   get status() {
     return !this.workerReady
diff --git a/examples/ember/realtime-trading/app/components/shell/configurator.gts b/examples/ember/realtime-trading/app/components/shell/configurator.gts
index 3e0314c63e..de5eac1ddb 100644
--- a/examples/ember/realtime-trading/app/components/shell/configurator.gts
+++ b/examples/ember/realtime-trading/app/components/shell/configurator.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
 import { on } from '@ember/modifier'
 import {
   feedSampleRateAt,
@@ -10,17 +9,12 @@ import {
   FORCED_VIRTUALIZATION_ROW_COUNT,
   resolveVirtualScrollMode,
 } from '../../table/trading-row-virtualizer'
-import { observeValue } from '../../utils/subscriptions'
 import { configuratorOptions } from './configurator-options'
 import Diagnostics from './diagnostics.gts'
+import MetricsStrip from './metrics-strip.gts'
 import SelectedInstrument from './selected-instrument.gts'
-import type Owner from '@ember/owner'
 import type { MarketFeedController } from '../../feed/market-feed-controller'
-import type {
-  TradingBenchmarkController,
-  TradingBenchmarkState,
-} from '../../benchmark/trading-benchmark-controller'
-import type { RendererMode } from '../../table/trading-table'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
 interface Signature {
   Args: { controller: TradingBenchmarkController; feed: MarketFeedController }
@@ -33,37 +27,26 @@ const rate = new Intl.NumberFormat('en-US', {
 export default class Configurator extends Component<Signature> {
   readonly feedSampleRateOptions = feedSampleRateOptions
   readonly options = configuratorOptions
-  @tracked running: boolean
-  @tracked instrumentCount: number
-  @tracked targetTicksPerSecond: number
-  @tracked publishIntervalMs: number
-  @tracked updateSparklines: boolean
-  @tracked sparklineSampleIntervalMs: number
-  @tracked benchmark: TradingBenchmarkState
-  @tracked rendererMode: RendererMode
-
-  constructor(owner: Owner, args: Signature['Args']) {
-    super(owner, args)
-    this.running = args.feed.running.get()
-    this.instrumentCount = args.feed.instrumentCount.get()
-    this.targetTicksPerSecond = args.feed.targetTicksPerSecond.get()
-    this.publishIntervalMs = args.feed.publishIntervalMs.get()
-    this.updateSparklines = args.feed.updateSparklines.get()
-    this.sparklineSampleIntervalMs = args.feed.sparklineSampleIntervalMs.get()
-    this.benchmark = args.controller.store.get()
-    this.rendererMode = args.controller.renderAtoms.rendererMode.get()
-    observeValue(this, args.feed.running, (value) => { this.running = value })
-    observeValue(this, args.feed.instrumentCount, (value) => { this.instrumentCount = value })
-    observeValue(this, args.feed.targetTicksPerSecond, (value) => { this.targetTicksPerSecond = value })
-    observeValue(this, args.feed.publishIntervalMs, (value) => { this.publishIntervalMs = value })
-    observeValue(this, args.feed.updateSparklines, (value) => { this.updateSparklines = value })
-    observeValue(this, args.feed.sparklineSampleIntervalMs, (value) => { this.sparklineSampleIntervalMs = value })
-    observeValue(this, args.controller.store, (state) => {
-      this.benchmark = state
-    })
-    observeValue(this, args.controller.renderAtoms.rendererMode, (mode) => {
-      this.rendererMode = mode
-    })
+  get running() {
+    return this.args.feed.running
+  }
+  get instrumentCount() {
+    return this.args.feed.instrumentCount
+  }
+  get targetTicksPerSecond() {
+    return this.args.feed.targetTicksPerSecond
+  }
+  get publishIntervalMs() {
+    return this.args.feed.publishIntervalMs
+  }
+  get updateSparklines() {
+    return this.args.feed.updateSparklines
+  }
+  get sparklineSampleIntervalMs() {
+    return this.args.feed.sparklineSampleIntervalMs
+  }
+  get rendererMode() {
+    return this.args.controller.rendererMode
   }
 
   get virtualForced() {
@@ -71,7 +54,7 @@ export default class Configurator extends Component<Signature> {
   }
   get virtualMode() {
     return resolveVirtualScrollMode(
-      this.benchmark.requestedVirtualScrollMode,
+      this.args.controller.requestedVirtualScrollMode,
       this.instrumentCount,
     )
   }
@@ -121,6 +104,7 @@ export default class Configurator extends Component<Signature> {
       aria-label='Benchmark configurator'
     >
       <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+      <MetricsStrip @controller={{@controller}} />
       <section class='config-section' aria-labelledby='feed-settings'>
         <h2 id='feed-settings'>FEED</h2>
         <button
diff --git a/examples/ember/realtime-trading/app/components/shell/diagnostics.gts b/examples/ember/realtime-trading/app/components/shell/diagnostics.gts
index de55a836bf..8c6f3e2600 100644
--- a/examples/ember/realtime-trading/app/components/shell/diagnostics.gts
+++ b/examples/ember/realtime-trading/app/components/shell/diagnostics.gts
@@ -1,12 +1,6 @@
 import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
-import { observeValue } from '../../utils/subscriptions'
-import type Owner from '@ember/owner'
 import type { NamedInvocationRate } from '../../benchmark/benchmark-monitor'
-import type {
-  TradingBenchmarkController,
-  TradingBenchmarkState,
-} from '../../benchmark/trading-benchmark-controller'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
 interface Signature {
   Args: { controller: TradingBenchmarkController }
@@ -27,25 +21,17 @@ const invocations = (values: ReadonlyArray<NamedInvocationRate>): string => {
 }
 
 export default class Diagnostics extends Component<Signature> {
-  @tracked state: TradingBenchmarkState
-  constructor(owner: Owner, args: Signature['Args']) {
-    super(owner, args)
-    this.state = args.controller.store.get()
-    observeValue(this, args.controller.store, (state) => {
-      this.state = state
-    })
-  }
   get items() {
-    const metrics = this.state.metrics
+    const metrics = this.args.controller.metrics
     return [
       {
         label: 'Mounted cells',
-        value: integer.format(this.state.mountedCells),
+        value: integer.format(this.args.controller.mountedCells),
         testId: '',
       },
       {
         label: 'Live components',
-        value: integer.format(this.state.liveComponents),
+        value: integer.format(this.args.controller.liveComponents),
         testId: '',
       },
       {
@@ -74,10 +60,40 @@ export default class Diagnostics extends Component<Signature> {
         testId: 'cell-render-breakdown',
       },
       {
-        label: 'DOM mutation records / s',
+        label: 'Observed MutationRecords / s',
         value: rate.format(metrics.domMutationsPerSecond),
         testId: 'dom-mutation-rate',
       },
+      {
+        label: 'Worker samples / s',
+        value: rate.format(metrics.actualTicksPerSecond),
+        testId: 'actual-rate',
+      },
+      {
+        label: 'Worker messages / s',
+        value: metrics.workerMessagesPerSecond.toFixed(1),
+        testId: 'message-rate',
+      },
+      {
+        label: 'Changed rows / s',
+        value: rate.format(metrics.rowUpdatesPerSecond),
+        testId: 'row-update-rate',
+      },
+      {
+        label: 'State snapshots / s',
+        value: metrics.stateApplicationsPerSecond.toFixed(1),
+        testId: 'state-apply-rate',
+      },
+      {
+        label: 'Table DOM commits / s',
+        value: metrics.tableRendersPerSecond.toFixed(1),
+        testId: 'table-render-rate',
+      },
+      {
+        label: 'P95 / max commit latency (rolling 10 s)',
+        value: `${ms(metrics.p95RenderMs)} / ${ms(metrics.maxRenderMs)}`,
+        testId: '',
+      },
       {
         label: 'Core row model calls / s',
         value: metrics.rowModelCallsPerSecond.toFixed(1),
@@ -94,7 +110,7 @@ export default class Diagnostics extends Component<Signature> {
         testId: 'visible-row-count',
       },
       {
-        label: 'Worker messages',
+        label: 'Worker messages since reset',
         value: integer.format(metrics.workerMessages),
         testId: 'worker-messages',
       },
@@ -109,12 +125,12 @@ export default class Diagnostics extends Component<Signature> {
         testId: '',
       },
       {
-        label: 'Renders > 16.7 ms',
+        label: 'Commits > 16.7 ms since reset',
         value: integer.format(metrics.slowRenders),
         testId: '',
       },
       {
-        label: 'JS heap',
+        label: 'JS heap (GC-sensitive)',
         value:
           metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`,
         testId: '',
@@ -127,6 +143,11 @@ export default class Diagnostics extends Component<Signature> {
       <dl>{{#each this.items as |item|}}<div><dt>{{item.label}}</dt><dd
               data-testid={{or item.testId undefined}}
             >{{item.value}}</dd></div>{{/each}}</dl>
+      <p class='diagnostic-note'>MutationObserver counts delivered records, not
+        individual DOM operations, and adds profiling overhead. Only class/style
+        attributes, text, and child-list changes are observed. Heap is a
+        Chromium-only point-in-time value and can move before garbage
+        collection.</p>
     </section>
   </template>
 }
diff --git a/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts b/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
index b2921e51b9..ba6a5d31f0 100644
--- a/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
+++ b/examples/ember/realtime-trading/app/components/shell/market-statusbar.gts
@@ -1,11 +1,5 @@
 import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
-import { observeValue } from '../../utils/subscriptions'
-import type Owner from '@ember/owner'
-import type {
-  TradingBenchmarkController,
-  TradingBenchmarkState,
-} from '../../benchmark/trading-benchmark-controller'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
 interface Signature {
   Args: { controller: TradingBenchmarkController }
@@ -13,23 +7,24 @@ interface Signature {
 const integer = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
 
 export default class MarketStatusbar extends Component<Signature> {
-  @tracked state: TradingBenchmarkState
-  constructor(owner: Owner, args: Signature['Args']) {
-    super(owner, args)
-    this.state = args.controller.store.get()
-    observeValue(this, args.controller.store, (state) => {
-      this.state = state
-    })
+  get metrics() {
+    return this.args.controller.metrics
+  }
+  get mountedCells() {
+    return this.args.controller.mountedCells
+  }
+  get liveComponents() {
+    return this.args.controller.liveComponents
   }
   <template>
     <footer class='market-statusbar'>
       <span>MESSAGE SAMPLES
-        <strong>{{format this.state.metrics.lastBatchSize}}</strong></span>
-      <span>ROW UPDATES
-        <strong>{{format this.state.metrics.lastUpdateCount}}</strong></span>
-      <span>HOSTS <strong>{{format this.state.mountedCells}}</strong></span>
+        <strong>{{format this.metrics.lastBatchSize}}</strong></span>
+      <span>CHANGED ROWS
+        <strong>{{format this.metrics.lastUpdateCount}}</strong></span>
+      <span>HOSTS <strong>{{format this.mountedCells}}</strong></span>
       <span>COMPONENTS
-        <strong>{{format this.state.liveComponents}}</strong></span>
+        <strong>{{format this.liveComponents}}</strong></span>
     </footer>
   </template>
 }
diff --git a/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts b/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
index 9f0ef5fd66..70b7d6f7bd 100644
--- a/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
+++ b/examples/ember/realtime-trading/app/components/shell/metrics-strip.gts
@@ -1,11 +1,5 @@
 import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
-import { observeValue } from '../../utils/subscriptions'
-import type Owner from '@ember/owner'
-import type {
-  TradingBenchmarkController,
-  TradingBenchmarkState,
-} from '../../benchmark/trading-benchmark-controller'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
 interface Signature {
   Args: { controller: TradingBenchmarkController }
@@ -17,68 +11,42 @@ const rate = new Intl.NumberFormat('en-US', {
 const ms = (value: number): string => `${value.toFixed(2)} ms`
 
 export default class MetricsStrip extends Component<Signature> {
-  @tracked state: TradingBenchmarkState
-  constructor(owner: Owner, args: Signature['Args']) {
-    super(owner, args)
-    this.state = args.controller.store.get()
-    observeValue(this, args.controller.store, (state) => {
-      this.state = state
-    })
-  }
   get items() {
-    const metrics = this.state.metrics
+    const metrics = this.args.controller.metrics
     return [
       [
-        'WORKER SAMPLES',
-        rate.format(metrics.actualTicksPerSecond),
-        'generated samples/s',
-        'actual-rate',
-      ],
-      [
-        'ROW UPDATES',
-        rate.format(metrics.rowUpdatesPerSecond),
-        'unique rows applied/s',
-        'row-update-rate',
+        'FRAME RATE (EST.)',
+        metrics.rafCallbacksPerSecond.toFixed(1),
+        'rAF callbacks/s · rolling 1 s',
+        'frame-rate',
       ],
       [
-        'MESSAGES',
-        metrics.workerMessagesPerSecond.toFixed(1),
-        'worker messages/s',
-        'message-rate',
-      ],
-      [
-        'STATE APPLIES',
-        metrics.stateApplicationsPerSecond.toFixed(1),
-        'quote snapshots/s',
-        'state-apply-rate',
-      ],
-      [
-        'TABLE COMMITS',
-        metrics.tableRendersPerSecond.toFixed(1),
-        'completed renders/s',
-        'table-render-rate',
-      ],
-      ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
-      [
-        'P95 RENDER',
-        ms(metrics.p95RenderMs),
-        `max ${ms(metrics.maxRenderMs)}`,
-        '',
+        'AVG COMMIT',
+        ms(metrics.averageRenderMs),
+        'snapshot → DOM · rolling 3 s',
+        'average-commit-latency',
       ],
       [
         'LONG FRAMES',
-        this.state.longAnimationFramesSupported
+        this.args.controller.longAnimationFramesSupported
           ? String(metrics.longAnimationFrames)
           : 'N/A',
-        this.state.longAnimationFramesSupported
-          ? `worst ${ms(metrics.worstLongAnimationFrameMs)}`
+        this.args.controller.longAnimationFramesSupported
+          ? `since reset · worst ${ms(metrics.worstLongAnimationFrameMs)}`
           : 'unsupported',
         'long-frame-count',
       ],
+      [
+        'THROUGHPUT',
+        `${rate.format(metrics.rowUpdatesPerSecond)} rows/s`,
+        `${metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s · rows deduplicated per snapshot`,
+        'throughput-rate',
+      ],
     ] as const
   }
   <template>
-    <section class='metrics-strip' aria-label='Live performance metrics'>
+    <section class='metrics-strip' aria-labelledby='live-health'>
+      <h2 id='live-health'>LIVE HEALTH</h2>
       {{#each this.items as |item|}}
         <article><span>{{item.[0]}}</span><strong
             data-testid={{or item.[3] undefined}}
diff --git a/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts b/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
index 620b0c0fe6..55d6ce99ae 100644
--- a/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
+++ b/examples/ember/realtime-trading/app/components/shell/selected-instrument.gts
@@ -1,7 +1,4 @@
 import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
-import { observeValue } from '../../utils/subscriptions'
-import type Owner from '@ember/owner'
 import type { MarketQuote } from '../../feed/market-data'
 import type { MarketFeedController } from '../../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
@@ -11,19 +8,11 @@ interface Signature {
 }
 
 export default class SelectedInstrument extends Component<Signature> {
-  @tracked quotes: Array<MarketQuote>
-  @tracked symbol: string | null
-  constructor(owner: Owner, args: Signature['Args']) {
-    super(owner, args)
-    this.quotes = args.feed.quotes.get()
-    this.symbol = args.controller.renderAtoms.selectedSymbol.get()
-    observeValue(this, args.feed.quotes, (quotes) => { this.quotes = quotes })
-    observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => {
-      this.symbol = symbol
-    })
-  }
   get quote(): MarketQuote | null {
-    return this.args.feed.getQuoteBySymbol(this.quotes, this.symbol)
+    return this.args.feed.getQuoteBySymbol(
+      this.args.feed.quotes,
+      this.args.controller.selectedSymbol,
+    )
   }
   <template>
     <section
diff --git a/examples/ember/realtime-trading/app/components/shell/trading-shell.gts b/examples/ember/realtime-trading/app/components/shell/trading-shell.gts
index 4138df1440..829c484257 100644
--- a/examples/ember/realtime-trading/app/components/shell/trading-shell.gts
+++ b/examples/ember/realtime-trading/app/components/shell/trading-shell.gts
@@ -4,7 +4,6 @@ import { on } from '@ember/modifier'
 import AppHeader from './app-header.gts'
 import Configurator from './configurator.gts'
 import MarketStatusbar from './market-statusbar.gts'
-import MetricsStrip from './metrics-strip.gts'
 import TradingTable from '../table/trading-table.gts'
 import type { MarketFeedController } from '../../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
@@ -33,7 +32,6 @@ export default class TradingShell extends Component<Signature> {
             the production build before recording results.</aside>{{/if}}
       </div>
       <section class='market-panel' aria-label='Live synthetic quotes'>
-        <MetricsStrip @controller={{@controller}} />
         <TradingTable @controller={{@controller}} @feed={{@feed}} />
       </section>
       <MarketStatusbar @controller={{@controller}} />
diff --git a/examples/ember/realtime-trading/app/components/table/trading-table.gts b/examples/ember/realtime-trading/app/components/table/trading-table.gts
index f7785e1bd7..4483176749 100644
--- a/examples/ember/realtime-trading/app/components/table/trading-table.gts
+++ b/examples/ember/realtime-trading/app/components/table/trading-table.gts
@@ -1,5 +1,5 @@
 import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
+import { cached, tracked } from '@glimmer/tracking'
 import { on } from '@ember/modifier'
 import { htmlSafe } from '@ember/template'
 import { modifier } from 'ember-modifier'
@@ -36,14 +36,11 @@ import {
   TRADING_ROW_OVERSCAN,
   resolveVirtualScrollMode,
 } from '../../table/trading-row-virtualizer'
-import { observeValue, registerCleanup } from '../../utils/subscriptions'
+import { registerCleanup } from '../../utils/subscriptions'
 import type Owner from '@ember/owner'
 import type { MarketQuote } from '../../feed/market-data'
 import type { MarketFeedController } from '../../feed/market-feed-controller'
-import type {
-  TradingBenchmarkController,
-  TradingBenchmarkState,
-} from '../../benchmark/trading-benchmark-controller'
+import type { TradingBenchmarkController } from '../../benchmark/trading-benchmark-controller'
 
 interface Signature {
   Args: { controller: TradingBenchmarkController; feed: MarketFeedController }
@@ -66,12 +63,17 @@ const captureElement = modifier(
   },
 )
 
+const markRenderCommitted = modifier(
+  (
+    _element: HTMLElement,
+    [feed, quotes]: [MarketFeedController, Array<MarketQuote>],
+  ) => {
+    void quotes
+    queueMicrotask(() => feed.completeRender())
+  },
+)
+
 export default class TradingTable extends Component<Signature> {
-  @tracked quotes: Array<MarketQuote>
-  @tracked instrumentCount: number
-  @tracked benchmark: TradingBenchmarkState
-  @tracked rendererMode: RendererMode
-  @tracked selectedSymbol: string | null
   @tracked virtualVersion = 0
   readonly pointer = new TradingGridPointerController()
   readonly layout = { manuallyResized: false }
@@ -80,76 +82,51 @@ export default class TradingTable extends Component<Signature> {
     source: null as HTMLTableCellElement | null,
     target: null as HTMLTableCellElement | null,
   }
-  @tracked columns: ReturnType<typeof createTradingColumns>
   scrollElement: HTMLDivElement | null = null
-  tableElement: HTMLTableElement | null = null
   bodyElement: HTMLTableSectionElement | null = null
   virtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement> | null = null
   stopVirtualizer: (() => void) | null = null
   resizeObserver: ResizeObserver | null = null
   mutationObserver: MutationObserver | null = null
 
-  table: Table<typeof tradingFeatures, MarketQuote>
+  table: Table<typeof tradingFeatures, MarketQuote> = useTable(this, () => ({
+    features: tradingFeatures,
+    columns: this.columns,
+    data: this.data,
+    getRowId: (row: MarketQuote) => row.id,
+    columnResizeMode: 'onChange' as const,
+    defaultColumn: { minSize: 56, maxSize: 800 },
+    autoResetCellSelection: false,
+  }))
 
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args)
-    this.quotes = args.feed.quotes.get()
-    this.instrumentCount = args.feed.instrumentCount.get()
-    this.benchmark = args.controller.store.get()
-    this.rendererMode = args.controller.renderAtoms.rendererMode.get()
-    this.selectedSymbol = args.controller.renderAtoms.selectedSymbol.get()
-    this.columns = createTradingColumns(args.controller, this.rendererMode)
-    this.table = useTable(this, () => ({
-      features: tradingFeatures,
-      columns: this.columns,
-      data: this.quotes,
-      getRowId: (row: MarketQuote) => row.id,
-      columnResizeMode: 'onChange' as const,
-      defaultColumn: { minSize: 56, maxSize: 800 },
-      autoResetCellSelection: false,
-    }))
-    observeValue(this, args.feed.quotes, (quotes) => {
-      this.quotes = quotes
-      this.table.setOptions((options) => ({ ...options, data: quotes }))
-      queueMicrotask(() => args.feed.completeRender())
-    })
-    observeValue(this, args.feed.instrumentCount, (instrumentCount) => {
-      this.instrumentCount = instrumentCount
-    })
-    observeValue(this, args.controller.store, (state) => {
-      this.benchmark = state
-    })
-    observeValue(this, args.controller.renderAtoms.selectedSymbol, (symbol) => {
-      this.selectedSymbol = symbol
-    })
-    observeValue(this, args.controller.renderAtoms.rendererMode, (mode) => {
-      this.rendererMode = mode
-      this.columns = createTradingColumns(args.controller, mode)
-      this.table.setOptions((options) => ({
-        ...options,
-        columns: this.columns,
-      }))
-    })
-    const sizing = this.table.atoms.columnSizing.subscribe(() =>
-      this.writeColumnSizes(),
-    )
-    const order = this.table.atoms.columnOrder.subscribe(() =>
-      this.writeColumnSizes(),
-    )
-    const resizing = this.table.atoms.columnResizing.subscribe((state) => {
-      if (state.isResizingColumn !== false) this.layout.manuallyResized = true
-    })
     registerCleanup(this, () => {
-      sizing.unsubscribe()
-      order.unsubscribe()
-      resizing.unsubscribe()
       this.stopVirtualizer?.()
       this.resizeObserver?.disconnect()
       this.mutationObserver?.disconnect()
     })
   }
 
+  @cached
+  get columns(): ReturnType<typeof createTradingColumns> {
+    return createTradingColumns(
+      this.args.controller,
+      this.args.controller.rendererMode,
+    )
+  }
+  get data(): Array<MarketQuote> {
+    return this.args.feed.quotes
+  }
+  get selectedSymbol() {
+    return this.args.controller.selectedSymbol
+  }
+
   get rows(): Array<TradingRow> {
+    // The table-core memo compares `table.options.data` internally. Consume the
+    // Ember source explicitly as well so this template getter owns the Glimmer
+    // tag that schedules the row-block update for an external worker message.
+    void this.data
     return readMeasuredRows(() => this.table.getRowModel().rows)
   }
   get headerGroups() {
@@ -158,10 +135,13 @@ export default class TradingTable extends Component<Signature> {
   get visibleLeafColumnCount() {
     return this.table.getVisibleLeafColumns().length
   }
+  get sourceRowCount() {
+    return this.args.feed.quotes.length
+  }
   get virtualMode() {
     return resolveVirtualScrollMode(
-      this.benchmark.requestedVirtualScrollMode,
-      this.instrumentCount,
+      this.args.controller.requestedVirtualScrollMode,
+      this.args.feed.instrumentCount,
     )
   }
   get renderedRows(): Array<RenderedRow> {
@@ -201,6 +181,10 @@ export default class TradingTable extends Component<Signature> {
   }
 
   captureScroll = (element: HTMLElement | null) => {
+    this.stopVirtualizer?.()
+    this.resizeObserver?.disconnect()
+    this.stopVirtualizer = null
+    this.resizeObserver = null
     this.scrollElement = element as HTMLDivElement | null
     if (!this.scrollElement) return
     this.virtualizer = new Virtualizer({
@@ -219,15 +203,10 @@ export default class TradingTable extends Component<Signature> {
     this.resizeObserver = new ResizeObserver(() => this.fitAvailableWidth())
     this.resizeObserver.observe(this.scrollElement)
     queueMicrotask(() => {
-      this.writeColumnSizes()
       this.fitAvailableWidth()
       this.virtualVersion++
     })
   }
-  captureTable = (element: HTMLElement | null) => {
-    this.tableElement = element as HTMLTableElement | null
-    if (this.tableElement) queueMicrotask(() => this.writeColumnSizes())
-  }
   captureBody = (element: HTMLElement | null) => {
     this.mutationObserver?.disconnect()
     this.bodyElement = element as HTMLTableSectionElement | null
@@ -238,6 +217,7 @@ export default class TradingTable extends Component<Signature> {
     )
     this.mutationObserver.observe(this.bodyElement, {
       attributes: true,
+      attributeFilter: ['class', 'style'],
       characterData: true,
       childList: true,
       subtree: true,
@@ -254,19 +234,22 @@ export default class TradingTable extends Component<Signature> {
     })
     this.virtualizer._willUpdate()
   }
-  writeColumnSizes() {
-    if (!this.tableElement) return
-    for (const header of this.table.getFlatHeaders()) {
-      this.tableElement.style.setProperty(
-        `--header-${header.id}-size`,
-        String(header.getSize()),
-      )
-      this.tableElement.style.setProperty(
-        `--col-${header.column.id}-size`,
-        String(header.column.getSize()),
-      )
-    }
-    this.tableElement.style.width = `${this.table.getTotalSize()}px`
+  @cached
+  get columnSizeVars(): string {
+    void this.table.store.state.columnSizing
+    void this.table.store.state.columnOrder
+    return this.table
+      .getFlatHeaders()
+      .flatMap((header) => [
+        `--header-${header.id}-size:${header.getSize()}`,
+        `--col-${header.column.id}-size:${header.column.getSize()}`,
+      ])
+      .join(';')
+  }
+  get tableStyle() {
+    return htmlSafe(
+      `${this.columnSizeVars};width:${this.table.getTotalSize()}px`,
+    )
   }
   fitAvailableWidth() {
     if (!this.scrollElement || this.layout.manuallyResized) return
@@ -282,6 +265,15 @@ export default class TradingTable extends Component<Signature> {
     )
   }
 
+  resizeColumn = (header: TradingHeader) => (event: Event) => {
+    this.layout.manuallyResized = true
+    header.getResizeHandler()?.(event)
+  }
+  resetColumnSize = (header: TradingHeader) => () => {
+    this.layout.manuallyResized = true
+    header.column.resetSize()
+  }
+
   onGridKeyDown = (event: KeyboardEvent) =>
     handleCellNavigation(this.table, event)
   onBodyMouseDown = (event: MouseEvent) =>
@@ -350,7 +342,7 @@ export default class TradingTable extends Component<Signature> {
         role='grid'
         aria-multiselectable='true'
         tabindex='0'
-        {{captureElement this.captureTable}}
+        style={{this.tableStyle}}
         {{on 'keydown' this.onGridKeyDown}}
       >
         <thead>
@@ -395,9 +387,9 @@ export default class TradingTable extends Component<Signature> {
                             {{if (isResizing header) "is-resizing"}}'
                           role='separator'
                           aria-orientation='vertical'
-                          {{on 'dblclick' (resetSize header)}}
-                          {{on 'mousedown' (resizeHandler header)}}
-                          {{on 'touchstart' (resizeHandler header)}}
+                          {{on 'dblclick' (this.resetColumnSize header)}}
+                          {{on 'mousedown' (this.resizeColumn header)}}
+                          {{on 'touchstart' (this.resizeColumn header)}}
                         ></div>{{/if}}
                     {{else}}<FlexRenderHeader @header={{header}} />{{/if}}
                   {{/unless}}
@@ -407,8 +399,9 @@ export default class TradingTable extends Component<Signature> {
         <tbody
           class={{if (eq this.virtualMode 'tanstack') 'virtual-table-body'}}
           style={{bodyStyle this.virtualMode this.totalVirtualHeight}}
-          data-source-row-count={{this.quotes.length}}
+          data-source-row-count={{this.sourceRowCount}}
           {{captureElement this.captureBody}}
+          {{markRenderCommitted @feed @feed.quotes}}
           {{on 'mousedown' this.onBodyMouseDown}}
           {{on 'pointerover' this.onBodyPointerOver}}
           {{on 'mouseleave' this.resetPointer}}
@@ -468,9 +461,6 @@ const isResizing = (header: TradingHeader): boolean =>
   header.column.getIsResizing()
 const toggleSort = (header: TradingHeader) =>
   header.column.getToggleSortingHandler() ?? (() => undefined)
-const resetSize = (header: TradingHeader) => () => header.column.resetSize()
-const resizeHandler = (header: TradingHeader) => (event: Event) =>
-  header.getResizeHandler()?.(event)
 const indicator = (header: TradingHeader): string =>
   sortIndicator(header.column.getIsSorted())
 const sortAria = (header: TradingHeader) =>
diff --git a/examples/ember/realtime-trading/app/feed/market-feed-controller.ts b/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
index 40f523562d..6c5ee890c3 100644
--- a/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
+++ b/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createAtom } from '@tanstack/store'
+import { tracked } from '@glimmer/tracking'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -33,22 +33,16 @@ export interface MarketFeedActions {
 }
 
 export class MarketFeedController {
-  readonly workerReady = createAtom(false)
-  readonly running = createAtom(true)
-  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
-  readonly targetTicksPerSecond = createAtom(
-    initialMarketFeedConfig.targetSamplesPerSecond,
-  )
-  readonly publishIntervalMs = createAtom(
-    initialMarketFeedConfig.publishIntervalMs,
-  )
-  readonly updateSparklines = createAtom(
-    initialMarketFeedConfig.updateSparklines,
-  )
-  readonly sparklineSampleIntervalMs = createAtom(
-    initialMarketFeedConfig.sparklineSampleIntervalMs,
-  )
-  readonly quotes = createAtom<Array<MarketQuote>>([])
+  @tracked workerReady = false
+  @tracked running = true
+  @tracked instrumentCount = initialMarketFeedConfig.instrumentCount
+  @tracked targetTicksPerSecond =
+    initialMarketFeedConfig.targetSamplesPerSecond
+  @tracked publishIntervalMs = initialMarketFeedConfig.publishIntervalMs
+  @tracked updateSparklines = initialMarketFeedConfig.updateSparklines
+  @tracked sparklineSampleIntervalMs =
+    initialMarketFeedConfig.sparklineSampleIntervalMs
+  @tracked quotes: Array<MarketQuote> = []
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -63,36 +57,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.running.get()
-        this.running.set(running)
+        const running = !this.running
+        this.running = running
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.instrumentCount.set(count)
+        this.instrumentCount = count
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.targetTicksPerSecond.set(sampleRate)
+        this.targetTicksPerSecond = sampleRate
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.publishIntervalMs.set(publishIntervalMs)
+        this.publishIntervalMs = publishIntervalMs
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.updateSparklines.set(enabled)
+        this.updateSparklines = enabled
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.sparklineSampleIntervalMs.set(intervalMs)
+        this.sparklineSampleIntervalMs = intervalMs
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.instrumentCount.get()),
+      reset: () => this.#resetWorker(this.instrumentCount),
     }
   }
 
@@ -106,12 +100,12 @@ export class MarketFeedController {
     worker.addEventListener('error', this.#handleWorkerError)
     this.#post({
       type: 'start',
-      rowCount: this.instrumentCount.get(),
-      running: this.running.get(),
-      ticksPerSecond: this.targetTicksPerSecond.get(),
-      publishIntervalMs: this.publishIntervalMs.get(),
-      updateSparklines: this.updateSparklines.get(),
-      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
+      rowCount: this.instrumentCount,
+      running: this.running,
+      ticksPerSecond: this.targetTicksPerSecond,
+      publishIntervalMs: this.publishIntervalMs,
+      updateSparklines: this.updateSparklines,
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs,
     })
     return () => this.stop()
   }
@@ -155,7 +149,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.running.get() })
+      this.#post({ type: 'set-running', running: this.running })
     }
   }
 
@@ -172,10 +166,8 @@ export class MarketFeedController {
       this.#runtime.quoteIndexBySymbol = new Map(
         quotes.map((quote, index) => [quote.symbol, index]),
       )
-      batch(() => {
-        this.quotes.set(quotes)
-        this.workerReady.set(true)
-      })
+      this.quotes = quotes
+      this.workerReady = true
       return
     }
 
@@ -185,7 +177,8 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
+    const quotes = applyMarketUpdates(this.quotes, data.updates)
+    this.quotes = quotes
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -197,15 +190,13 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    batch(() => {
-      this.workerReady.set(false)
-      this.running.set(false)
-    })
+    this.workerReady = false
+    this.running = false
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.workerReady.set(false)
+    this.workerReady = false
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
diff --git a/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts b/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
index 7196530a38..d4ca99a40f 100644
--- a/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
+++ b/examples/ember/realtime-trading/app/table/table-config/trading-columns.gts
@@ -210,12 +210,16 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
     duration,
   )
   rowModelDiagnostics.lastRowCount = rows.length
+  if (rowModelDiagnostics.calls % 20 !== 0) return rows
   try {
     performance.measure('tanstack-row-model', {
       start,
       end,
       detail: { rowCount: rows.length },
     })
+    if (rowModelDiagnostics.calls % 20_000 === 0) {
+      performance.clearMeasures('tanstack-row-model')
+    }
   } catch {
     /* optional User Timing detail */
   }
diff --git a/examples/ember/realtime-trading/app/utils/subscriptions.ts b/examples/ember/realtime-trading/app/utils/subscriptions.ts
index 83ef1b151a..7d6ea1eaeb 100644
--- a/examples/ember/realtime-trading/app/utils/subscriptions.ts
+++ b/examples/ember/realtime-trading/app/utils/subscriptions.ts
@@ -1,22 +1,5 @@
 import { registerDestructor } from '@ember/destroyable'
 
-interface Subscription {
-  unsubscribe: () => void
-}
-interface Subscribable<T> {
-  get: () => T
-  subscribe: (listener: (value: T) => void) => Subscription
-}
-
-export function observeValue<T>(
-  owner: object,
-  source: Subscribable<T>,
-  update: (value: T) => void,
-): void {
-  const subscription = source.subscribe(update)
-  registerDestructor(owner, () => subscription.unsubscribe())
-}
-
 export function registerCleanup(owner: object, cleanup: () => void): void {
   registerDestructor(owner, cleanup)
 }
diff --git a/examples/lit/realtime-trading/README.md b/examples/lit/realtime-trading/README.md
index 3e5be64551..7d802ba276 100644
--- a/examples/lit/realtime-trading/README.md
+++ b/examples/lit/realtime-trading/README.md
@@ -111,14 +111,31 @@ data changes.
 
 ## Diagnostics and interpretation
 
-The monitor records generated samples, messages, unique row updates, state
-applies, completed renders, average mutation-to-render latency, long animation
-frames, mounted hosts, component lifecycle/execution, callbacks per column, DOM
-mutation records, row-model timing, and optional heap data.
-
-Callback counts and DOM mutations describe different layers. Heap growth during
-component swapping is not a leak without post-GC retention. Compare identical
-production settings and use Chrome Performance with the in-app diagnostics.
+The sidebar keeps four cross-framework health signals prominent: estimated
+frame callbacks, average snapshot-to-DOM-commit latency, cumulative long
+animation frames, and changed-row/snapshot throughput. The remaining counters
+stay in Diagnostics so they do not look like equally important scores.
+
+`AVG COMMIT` is not the duration of `render()` and it does not include the
+browser's later layout or paint. It starts when a new immutable snapshot is
+applied and ends in a guarded microtask queued from `updated()`. That extra
+microtask lets nested quote-cell custom elements finish their Lit updates
+before the sample closes. The average uses a rolling 3-second window; diagnostic
+p95/max use 10 seconds. The frame-rate estimate counts standard
+`requestAnimationFrame` callbacks over one second. It is refresh-rate dependent
+and is not a GPU/compositor FPS measurement.
+
+Callback counts and DOM mutations describe different layers.
+`Observed MutationRecords/s` is the number delivered by a `MutationObserver`
+on the table body, not the number of browser DOM operations. The observer tracks
+text, child-list, class, and style changes; it excludes selection data
+attributes to reduce noise. Registering an observer still adds work at very high
+mutation rates, so confirm close results with a Performance recording without
+treating this counter as a score. Heap is Chrome-only, current and GC-sensitive;
+growth is not a leak without post-GC retention. React Scan is not part of these
+shared measurements. User Timing commit and row-model entries are sampled once
+every 20 candidates; the numeric counters remain exact, while the Performance
+timeline avoids one retained entry per hot-path execution.
 
 ## Standalone policy
 
diff --git a/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
index 9eea493fec..0776afae13 100644
--- a/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -9,6 +9,15 @@ export interface NamedInvocationRate {
   callsPerSecond: number
 }
 
+interface TimedLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const averageLatencyWindowMs = 3_000
+const percentileLatencyWindowMs = 10_000
+const frameRateWindowMs = 1_000
+
 export interface FeedMetrics {
   actualTicksPerSecond: number
   rowUpdatesPerSecond: number
@@ -17,12 +26,12 @@ export interface FeedMetrics {
   supersededUpdatesPerSecond: number
   totalTicks: number
   rafCallbacksPerSecond: number
-  tableRendersPerSecond: number
+  tableCommitsPerSecond: number
   lastBatchSize: number
-  averageRenderMs: number
-  p95RenderMs: number
-  maxRenderMs: number
-  slowRenders: number
+  averageCommitLatencyMs: number
+  p95CommitLatencyMs: number
+  maxCommitLatencyMs: number
+  slowCommits: number
   longAnimationFrames: number
   worstLongAnimationFrameMs: number
   heapMb: number | null
@@ -49,12 +58,12 @@ export const initialMetrics: FeedMetrics = {
   supersededUpdatesPerSecond: 0,
   totalTicks: 0,
   rafCallbacksPerSecond: 0,
-  tableRendersPerSecond: 0,
+  tableCommitsPerSecond: 0,
   lastBatchSize: 0,
-  averageRenderMs: 0,
-  p95RenderMs: 0,
-  maxRenderMs: 0,
-  slowRenders: 0,
+  averageCommitLatencyMs: 0,
+  p95CommitLatencyMs: 0,
+  maxCommitLatencyMs: 0,
+  slowCommits: 0,
   longAnimationFrames: 0,
   worstLongAnimationFrameMs: 0,
   heapMb: null,
@@ -73,7 +82,8 @@ export const initialMetrics: FeedMetrics = {
   visibleRows: 0,
 }
 
-const userTiming = { entryCount: 0 }
+const userTiming = { entryCount: 0, measureCandidateCount: 0 }
+const userTimingSamplingInterval = 20
 
 export function recordMeasure(
   name: string,
@@ -81,11 +91,14 @@ export function recordMeasure(
   end: number,
   detail: Record<string, unknown>,
 ): void {
+  userTiming.measureCandidateCount++
+  if (userTiming.measureCandidateCount % userTimingSamplingInterval !== 0)
+    return
   try {
     performance.measure(name, { start, end, detail })
     userTiming.entryCount++
     if (userTiming.entryCount % 1_000 === 0) {
-      performance.clearMeasures('market-update-to-layout-commit')
+      performance.clearMeasures('market-update-to-dom-commit')
     }
   } catch {
     // User Timing Level 3 options are not implemented in every browser.
@@ -110,8 +123,10 @@ export function markBenchmarkAction(
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
-    pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    sessionStartedAt: performance.now(),
+    pendingMutationStartedAt: null as number | null,
+    commitLatencySamples: [] as Array<TimedLatencySample>,
+    slowCommitCount: 0,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -121,8 +136,9 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
-    tableRendersInSample: 0,
+    frameTrackingStartedAt: performance.now(),
+    frameTimestamps: [] as Array<number>,
+    tableCommitsInSample: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -138,23 +154,28 @@ export class BenchmarkMonitor {
     previousRowModelDuration: 0,
   }
 
-  markRenderPending(): void {
-    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  markCommitPending(): void {
+    this.#runtime.pendingMutationStartedAt ??= performance.now()
   }
 
-  recordCompletedRender(): void {
+  recordDomCommit(): void {
     const runtime = this.#runtime
-    if (runtime.pendingRenderStartedAt !== null) {
-      const renderEndedAt = performance.now()
-      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+    if (runtime.pendingMutationStartedAt !== null) {
+      const commitEndedAt = performance.now()
+      const duration = commitEndedAt - runtime.pendingMutationStartedAt
+      runtime.commitLatencySamples.push({
+        recordedAt: commitEndedAt,
+        duration,
+      })
+      if (duration > 16.7) runtime.slowCommitCount++
       recordMeasure(
-        'market-update-to-layout-commit',
-        runtime.pendingRenderStartedAt,
-        renderEndedAt,
+        'market-update-to-dom-commit',
+        runtime.pendingMutationStartedAt,
+        commitEndedAt,
         {},
       )
-      runtime.pendingRenderStartedAt = null
-      runtime.tableRendersInSample++
+      runtime.pendingMutationStartedAt = null
+      runtime.tableCommitsInSample++
     }
   }
 
@@ -178,12 +199,15 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    const timestamps = this.#runtime.frameTimestamps
+    timestamps.push(now)
+    pruneFrameTimestamps(timestamps, now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -206,8 +230,17 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const renderSamples = runtime.renderSamples
-    const sortedRenderSamples = [...renderSamples].sort(
+    pruneLatencySamples(runtime.commitLatencySamples, now)
+    pruneFrameTimestamps(runtime.frameTimestamps, now)
+    const averageCommitLatencySamples = runtime.commitLatencySamples
+      .filter((sample) => sample.recordedAt >= now - averageLatencyWindowMs)
+      .map((sample) => sample.duration)
+    const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
+      (sample) => sample.duration,
+    )
+    const sortedCommitLatencySamples = [
+      ...percentileCommitLatencySamples,
+    ].sort(
       (left, right) => left - right,
     )
     const rowModelCalls =
@@ -230,14 +263,14 @@ export class BenchmarkMonitor {
       runtime.previousComponentRenderCallsByName,
       sampleDuration,
     )
-    const averageRenderMs =
-      renderSamples.length === 0
+    const averageCommitLatencyMs =
+      averageCommitLatencySamples.length === 0
         ? 0
-        : renderSamples.reduce((sum, value) => sum + value, 0) /
-          renderSamples.length
+        : averageCommitLatencySamples.reduce((sum, value) => sum + value, 0) /
+          averageCommitLatencySamples.length
     const p95Index = Math.max(
       0,
-      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+      Math.ceil(sortedCommitLatencySamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
       actualTicksPerSecond:
@@ -254,14 +287,18 @@ export class BenchmarkMonitor {
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
-      tableRendersPerSecond:
-        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+        calculateFrameRate(
+          runtime.frameTimestamps,
+          runtime.frameTrackingStartedAt,
+          now,
+        ),
+      tableCommitsPerSecond:
+        (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
-      averageRenderMs,
-      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
-      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      averageCommitLatencyMs,
+      p95CommitLatencyMs: sortedCommitLatencySamples[p95Index] ?? 0,
+      maxCommitLatencyMs: sortedCommitLatencySamples.at(-1) ?? 0,
+      slowCommits: runtime.slowCommitCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -301,17 +338,17 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.tableCommitsInSample = 0
     return metrics
   }
 
   reset(): void {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
-    runtime.pendingRenderStartedAt = null
-    runtime.renderSamples = []
+    runtime.sessionStartedAt = runtime.sampleStartedAt
+    runtime.pendingMutationStartedAt = null
+    runtime.commitLatencySamples = []
+    runtime.slowCommitCount = 0
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -321,8 +358,9 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
+    runtime.tableCommitsInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
@@ -366,3 +404,36 @@ function calculateInvocationRates(
         : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
   }))
 }
+
+function pruneLatencySamples(
+  samples: Array<TimedLatencySample>,
+  now: number,
+): void {
+  const cutoff = now - percentileLatencyWindowMs
+  const firstRetainedIndex = samples.findIndex(
+    (sample) => sample.recordedAt >= cutoff,
+  )
+  if (firstRetainedIndex > 0) samples.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) samples.length = 0
+}
+
+function pruneFrameTimestamps(timestamps: Array<number>, now: number): void {
+  const cutoff = now - frameRateWindowMs
+  const firstRetainedIndex = timestamps.findIndex(
+    (timestamp) => timestamp >= cutoff,
+  )
+  if (firstRetainedIndex > 0) timestamps.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) timestamps.length = 0
+}
+
+function calculateFrameRate(
+  timestamps: ReadonlyArray<number>,
+  trackingStartedAt: number,
+  now: number,
+): number {
+  const observedWindowMs = Math.min(
+    frameRateWindowMs,
+    Math.max(1, now - trackingStartedAt),
+  )
+  return (timestamps.length / observedWindowMs) * 1_000
+}
diff --git a/examples/lit/realtime-trading/src/benchmark/table-benchmark.ts b/examples/lit/realtime-trading/src/benchmark/table-benchmark.ts
index 7115e9e7bb..346a6cdc0c 100644
--- a/examples/lit/realtime-trading/src/benchmark/table-benchmark.ts
+++ b/examples/lit/realtime-trading/src/benchmark/table-benchmark.ts
@@ -14,6 +14,7 @@ export function startTableBenchmark(
   })
   observer.observe(tableBody, {
     attributes: true,
+    attributeFilter: ['class', 'style'],
     characterData: true,
     childList: true,
     subtree: true,
diff --git a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 604d8efe42..d2a2068f7a 100644
--- a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -101,7 +101,7 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
+            this.monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
           }
         })
       : null
@@ -109,14 +109,13 @@ export class TradingBenchmarkController {
     this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
     this.#runtime.stopObservingFeed = this.feed.observe({
       messageReceived: () => this.monitor.recordWorkerMessage(),
-      mutationStarted: () => this.monitor.markRenderPending(),
+      mutationStarted: () => this.monitor.markCommitPending(),
       batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
         this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
-      renderCommitted: () => this.monitor.recordCompletedRender(),
+      renderCommitted: () => this.monitor.recordDomCommit(),
     })
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
 
@@ -132,7 +131,7 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
+    this.monitor.recordAnimationFrame(now)
     if (this.monitor.shouldPublish(now)) {
       this.#publishMetrics(this.monitor.publish(now))
     }
diff --git a/examples/lit/realtime-trading/src/index.css b/examples/lit/realtime-trading/src/index.css
index 20264402de..9ccb219ab8 100644
--- a/examples/lit/realtime-trading/src/index.css
+++ b/examples/lit/realtime-trading/src/index.css
@@ -226,40 +226,49 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
+trading-metrics-strip {
+  display: block;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/examples/lit/realtime-trading/src/shell/Configurator.ts b/examples/lit/realtime-trading/src/shell/Configurator.ts
index a38128df81..2275e2d605 100644
--- a/examples/lit/realtime-trading/src/shell/Configurator.ts
+++ b/examples/lit/realtime-trading/src/shell/Configurator.ts
@@ -13,6 +13,7 @@ import {
 import { configuratorOptions } from './configurator-options'
 import { ControllerElement } from './controller-element'
 import './Diagnostics'
+import './MetricsStrip'
 import './SelectedInstrument'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
@@ -30,11 +31,18 @@ const options = (
     readonly label: string
     readonly value: number | string
   }>,
+  selectedValue: number | string,
 ) =>
   repeat(
     items,
     (item) => item.value,
-    (item) => html`<option value=${item.value}>${item.label}</option>`,
+    (item) =>
+      html`<option
+        value=${item.value}
+        ?selected=${String(item.value) === String(selectedValue)}
+      >
+        ${item.label}
+      </option>`,
   )
 
 @customElement('trading-configurator')
@@ -72,6 +80,9 @@ export class Configurator extends ControllerElement {
       aria-label="Benchmark configurator"
     >
       <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+      <trading-metrics-strip
+        .controller=${this.controller}
+      ></trading-metrics-strip>
       <section class="config-section" aria-labelledby="feed-settings">
         <h2 id="feed-settings">FEED</h2>
         <button
@@ -92,7 +103,10 @@ export class Configurator extends ControllerElement {
               this.feed.actions.setInstrumentCount(number(event))
             }}
           >
-            ${options(configuratorOptions.instrumentCounts)}
+            ${options(
+              configuratorOptions.instrumentCounts,
+              feedState.instrumentCount,
+            )}
           </select></label
         >
         <label class="field rate-field"
@@ -121,7 +135,10 @@ export class Configurator extends ControllerElement {
             .value=${String(feedState.publishIntervalMs)}
             @change=${(event: Event) => this.feed.actions.setPublishInterval(number(event))}
           >
-            ${options(configuratorOptions.workerDeliveryIntervals)}</select
+            ${options(
+              configuratorOptions.workerDeliveryIntervals,
+              feedState.publishIntervalMs,
+            )}</select
           ><small
             >One coalesced worker message at this target cadence.</small
           ></label
@@ -137,7 +154,7 @@ export class Configurator extends ControllerElement {
             ?disabled=${forced}
             @change=${(event: Event) => this.controller.actions.setVirtualScrollEnabled(value(event) === 'tanstack')}
           >
-            ${options(configuratorOptions.rowRenderingModes)}</select
+            ${options(configuratorOptions.rowRenderingModes, virtualMode)}</select
           ><small
             >${forced ? 'TanStack Virtual is required and locked at 1,500 or more rows.' : 'Full DOM is the default below 200 rows; TanStack Virtual is the default from 200 rows and remains selectable.'}</small
           ></label
@@ -171,7 +188,10 @@ export class Configurator extends ControllerElement {
             .value=${String(feedState.sparklineSampleIntervalMs)}
             @change=${(event: Event) => this.feed.actions.setSparklineSampleInterval(number(event))}
           >
-            ${options(configuratorOptions.intradaySamplingIntervals)}
+            ${options(
+              configuratorOptions.intradaySamplingIntervals,
+              feedState.sparklineSampleIntervalMs,
+            )}
           </select></label
         >
       </section>
diff --git a/examples/lit/realtime-trading/src/shell/Diagnostics.ts b/examples/lit/realtime-trading/src/shell/Diagnostics.ts
index f4257f9696..2d78db9cd8 100644
--- a/examples/lit/realtime-trading/src/shell/Diagnostics.ts
+++ b/examples/lit/realtime-trading/src/shell/Diagnostics.ts
@@ -29,6 +29,36 @@ export class Diagnostics extends ControllerElement {
     const state = this.controller.store.get()
     const metrics = state.metrics
     const items = [
+      [
+        'Worker-generated samples / s',
+        rate.format(metrics.actualTicksPerSecond),
+        'actual-rate',
+      ],
+      [
+        'Changed rows / s',
+        rate.format(metrics.rowUpdatesPerSecond),
+        'row-update-rate',
+      ],
+      [
+        'Worker messages / s',
+        metrics.workerMessagesPerSecond.toFixed(1),
+        'message-rate',
+      ],
+      [
+        'Snapshots applied / s',
+        metrics.stateApplicationsPerSecond.toFixed(1),
+        'state-apply-rate',
+      ],
+      [
+        'DOM commits / s',
+        metrics.tableCommitsPerSecond.toFixed(1),
+        'table-render-rate',
+      ],
+      [
+        'Commit latency p95 / max (10 s)',
+        `${ms(metrics.p95CommitLatencyMs)} / ${ms(metrics.maxCommitLatencyMs)}`,
+        '',
+      ],
       ['Mounted cells', integer.format(state.mountedCells), ''],
       ['Live components', integer.format(state.liveComponents), ''],
       [
@@ -57,7 +87,7 @@ export class Diagnostics extends ControllerElement {
         'cell-render-breakdown',
       ],
       [
-        'DOM mutation records / s',
+        'Observed MutationRecords / s',
         rate.format(metrics.domMutationsPerSecond),
         'dom-mutation-rate',
       ],
@@ -91,9 +121,13 @@ export class Diagnostics extends ControllerElement {
         `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`,
         '',
       ],
-      ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''],
       [
-        'JS heap',
+        'Commits > 16.7 ms (since reset)',
+        integer.format(metrics.slowCommits),
+        '',
+      ],
+      [
+        'JS heap (current, GC-sensitive)',
         metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`,
         '',
       ],
diff --git a/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts b/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
index 3a1b24ce05..8c6a569c09 100644
--- a/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
+++ b/examples/lit/realtime-trading/src/shell/MarketStatusbar.ts
@@ -17,7 +17,7 @@ export class MarketStatusbar extends ControllerElement {
         >MESSAGE SAMPLES
         <strong>${integer.format(state.metrics.lastBatchSize)}</strong></span
       ><span
-        >ROW UPDATES
+        >CHANGED ROWS
         <strong>${integer.format(state.metrics.lastUpdateCount)}</strong></span
       ><span>HOSTS <strong>${integer.format(state.mountedCells)}</strong></span
       ><span
diff --git a/examples/lit/realtime-trading/src/shell/MetricsStrip.ts b/examples/lit/realtime-trading/src/shell/MetricsStrip.ts
index 442fa6ac04..6dcb4bb849 100644
--- a/examples/lit/realtime-trading/src/shell/MetricsStrip.ts
+++ b/examples/lit/realtime-trading/src/shell/MetricsStrip.ts
@@ -20,41 +20,16 @@ export class MetricsStrip extends ControllerElement {
     const metrics = state.metrics
     const items = [
       [
-        'WORKER SAMPLES',
-        rate.format(metrics.actualTicksPerSecond),
-        'generated samples/s',
-        'actual-rate',
+        'FRAME RATE (EST.)',
+        metrics.rafCallbacksPerSecond.toFixed(1),
+        'rAF callbacks/s · rolling 1 s',
+        'frame-rate',
       ],
       [
-        'ROW UPDATES',
-        rate.format(metrics.rowUpdatesPerSecond),
-        'unique rows applied/s',
-        'row-update-rate',
-      ],
-      [
-        'MESSAGES',
-        metrics.workerMessagesPerSecond.toFixed(1),
-        'worker messages/s',
-        'message-rate',
-      ],
-      [
-        'STATE APPLIES',
-        metrics.stateApplicationsPerSecond.toFixed(1),
-        'quote snapshots/s',
-        'state-apply-rate',
-      ],
-      [
-        'TABLE COMMITS',
-        metrics.tableRendersPerSecond.toFixed(1),
-        'completed renders/s',
-        'table-render-rate',
-      ],
-      ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
-      [
-        'P95 RENDER',
-        ms(metrics.p95RenderMs),
-        `max ${ms(metrics.maxRenderMs)}`,
-        '',
+        'AVG COMMIT',
+        ms(metrics.averageCommitLatencyMs),
+        'snapshot → DOM · rolling 3 s',
+        'average-commit-latency',
       ],
       [
         'LONG FRAMES',
@@ -62,22 +37,26 @@ export class MetricsStrip extends ControllerElement {
           ? String(metrics.longAnimationFrames)
           : 'N/A',
         state.longAnimationFramesSupported
-          ? `worst ${ms(metrics.worstLongAnimationFrameMs)}`
+          ? `since reset · worst ${ms(metrics.worstLongAnimationFrameMs)}`
           : 'unsupported',
         'long-frame-count',
       ],
+      [
+        'THROUGHPUT',
+        `${rate.format(metrics.rowUpdatesPerSecond)} rows/s`,
+        `${metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s · rows deduplicated per snapshot`,
+        'throughput-rate',
+      ],
     ] as const
-    return html`<section
-      class="metrics-strip"
-      aria-label="Live performance metrics"
-    >
+    return html`<section class="metrics-strip" aria-labelledby="live-health">
+      <h2 id="live-health">LIVE HEALTH</h2>
       ${repeat(
         items,
         (item) => item[0],
         (item) =>
           html`<article>
             <span>${item[0]}</span
-            ><strong data-testid=${item[3] || undefined}>${item[1]}</strong
+            ><strong data-testid=${item[3]}>${item[1]}</strong
             ><small>${item[2]}</small>
           </article>`,
       )}
diff --git a/examples/lit/realtime-trading/src/shell/TradingShell.ts b/examples/lit/realtime-trading/src/shell/TradingShell.ts
index 174414b9b7..dc34079d74 100644
--- a/examples/lit/realtime-trading/src/shell/TradingShell.ts
+++ b/examples/lit/realtime-trading/src/shell/TradingShell.ts
@@ -4,7 +4,6 @@ import { ControllerElement } from './controller-element'
 import './AppHeader'
 import './Configurator'
 import './MarketStatusbar'
-import './MetricsStrip'
 import '../table/TradingTable'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
@@ -29,10 +28,7 @@ export class TradingShell extends ControllerElement {
         >${import.meta.env.DEV ? html`<aside class="development-warning">DEV BUILD — use the production build before recording results.</aside>` : null}
       </div>
       <section class="market-panel" aria-label="Live synthetic quotes">
-        <trading-metrics-strip
-          .controller=${this.controller}
-        ></trading-metrics-strip
-        ><trading-data-table
+        <trading-data-table
           .controller=${this.controller}
           .feed=${this.feed}
         ></trading-data-table>
diff --git a/examples/lit/realtime-trading/src/table/TradingTable.ts b/examples/lit/realtime-trading/src/table/TradingTable.ts
index a01d147a8a..cadfe819c2 100644
--- a/examples/lit/realtime-trading/src/table/TradingTable.ts
+++ b/examples/lit/realtime-trading/src/table/TradingTable.ts
@@ -86,6 +86,7 @@ export class TradingTable extends ControllerElement {
   #table?: TradingTableInstance
   #columns?: ReturnType<typeof createTradingColumns<typeof features>>
   #cleanup: Array<() => void> = []
+  #domCommitScheduled = false
 
   protected firstUpdated() {
     this.observe(this.feed.quotes)
@@ -115,11 +116,11 @@ export class TradingTable extends ControllerElement {
     )
     this.#writeColumnSizes()
     this.#fitAvailableWidth()
-    this.feed.completeRender()
+    this.#scheduleDomCommit()
   }
   protected updated() {
     this.#writeColumnSizes()
-    this.feed.completeRender()
+    this.#scheduleDomCommit()
   }
   disconnectedCallback() {
     for (const cleanup of this.#cleanup) cleanup()
@@ -143,6 +144,16 @@ export class TradingTable extends ControllerElement {
     }
     element.style.width = `${table.getTotalSize()}px`
   }
+
+  #scheduleDomCommit() {
+    if (this.#domCommitScheduled) return
+
+    this.#domCommitScheduled = true
+    queueMicrotask(() => {
+      this.#domCommitScheduled = false
+      if (this.isConnected) this.feed.completeRender()
+    })
+  }
   #fitAvailableWidth() {
     const container = this.#scrollRef.value
     const table = this.#table
diff --git a/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts b/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
index eec1162c62..7b72798b74 100644
--- a/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
+++ b/examples/lit/realtime-trading/src/table/table-config/trading-columns.ts
@@ -229,14 +229,18 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
     duration,
   )
   rowModelDiagnostics.lastRowCount = rows.length
-  try {
-    performance.measure('tanstack-row-model', {
-      start,
-      end,
-      detail: { rowCount: rows.length },
-    })
-  } catch {
-    /* optional User Timing detail */
+  if (rowModelDiagnostics.calls % 20 === 0) {
+    try {
+      performance.measure('tanstack-row-model', {
+        start,
+        end,
+        detail: { rowCount: rows.length },
+      })
+      if (rowModelDiagnostics.calls % 1_000 === 0)
+        performance.clearMeasures('tanstack-row-model')
+    } catch {
+      /* optional sampled User Timing detail */
+    }
   }
   return rows
 }
diff --git a/examples/octane/realtime-trading/README.md b/examples/octane/realtime-trading/README.md
index 34f0aa820a..c73c9bc2e9 100644
--- a/examples/octane/realtime-trading/README.md
+++ b/examples/octane/realtime-trading/README.md
@@ -119,16 +119,33 @@ when the data input changes.
 
 ## Diagnostics and interpretation
 
-The monitor records worker samples, messages, unique row updates, state applies,
-completed renders, average mutation-to-render latency, long animation frames,
-mounted cells, component lifecycle/execution, callbacks by column, DOM mutation
-records, row-model timing, and optional heap information.
+The compact **Live health** section lives in the configurator and reports the
+estimated frame callback rate over 1 second, average market-mutation-to-DOM-
+commit latency over 3 seconds, cumulative long animation frames, and throughput
+as changed rows plus applied snapshots per second. Detailed diagnostics retain
+worker samples/messages, state applies, DOM commits, rolling 10-second p95/max
+commit latency, cumulative slow commits, mounted cells, component
+lifecycle/execution, row-model timing, DOM mutation records, and heap.
 
 Octane's completed-render measurement is connected to the feed mutation and
 the table's committed layout lifecycle; it should be compared using the same
-build and settings. Callback execution does not equal DOM mutation, and heap
-growth is not a confirmed leak without post-GC retention. Use Chrome
-Performance alongside the in-app diagnostics.
+build and settings. The frame value counts `requestAnimationFrame` callbacks,
+not GPU-presented frames. `MutationObserver` reports delivered records, not
+individual DOM operations, and adds overhead on a hot subtree; it is limited to
+text, child-list, and `class`/`style` changes. Heap is Chromium-only and
+GC-sensitive. User Timing timeline measures are sampled 1-in-20 while the
+in-memory latency calculation keeps every commit. Callback execution does not
+equal DOM mutation, and heap growth is not a confirmed leak without post-GC
+retention.
+The rAF loop only appends a timestamp; rolling aggregation and heap reads run at
+the 500 ms metrics publication cadence. Mutation observation remains the most
+intrusive diagnostic because the browser must create records for the observed
+subtree.
+
+`Changed rows/s` sums the update array lengths delivered by each snapshot.
+Symbols are deduplicated inside one message, but the same row can count again in
+the next snapshot; it is applied row throughput, not distinct instruments per
+second.
 
 ## Standalone policy
 
diff --git a/examples/octane/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/octane/realtime-trading/src/benchmark/benchmark-monitor.ts
index 81f91d758e..36ea2ddc50 100644
--- a/examples/octane/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/octane/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -73,7 +73,17 @@ export const initialMetrics: FeedMetrics = {
   visibleRows: 0,
 }
 
-const userTiming = { entryCount: 0 }
+const userTiming = { entryCount: 0, measureCallCount: 0 }
+const USER_TIMING_SAMPLE_INTERVAL = 20
+
+interface CommitLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const AVERAGE_COMMIT_WINDOW_MS = 3_000
+const PERCENTILE_COMMIT_WINDOW_MS = 10_000
+const FRAME_RATE_WINDOW_MS = 1_000
 
 export function recordMeasure(
   name: string,
@@ -81,11 +91,13 @@ export function recordMeasure(
   end: number,
   detail: Record<string, unknown>,
 ): void {
+  userTiming.measureCallCount++
+  if (userTiming.measureCallCount % USER_TIMING_SAMPLE_INTERVAL !== 0) return
   try {
     performance.measure(name, { start, end, detail })
     userTiming.entryCount++
     if (userTiming.entryCount % 1_000 === 0) {
-      performance.clearMeasures('market-update-to-layout-commit')
+      performance.clearMeasures('market-update-to-dom-commit')
     }
   } catch {
     // User Timing Level 3 options are not implemented in every browser.
@@ -110,8 +122,11 @@ export function markBenchmarkAction(
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
+    sessionStartedAt: performance.now(),
+    frameTrackingStartedAt: performance.now(),
     pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    renderSamples: [] as Array<CommitLatencySample>,
+    frameTimestamps: [] as Array<number>,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -121,8 +136,8 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
     tableRendersInSample: 0,
+    slowRenderCount: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -146,9 +161,11 @@ export class BenchmarkMonitor {
     const runtime = this.#runtime
     if (runtime.pendingRenderStartedAt !== null) {
       const renderEndedAt = performance.now()
-      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+      const duration = renderEndedAt - runtime.pendingRenderStartedAt
+      runtime.renderSamples.push({ recordedAt: renderEndedAt, duration })
+      if (duration > 16.7) runtime.slowRenderCount++
       recordMeasure(
-        'market-update-to-layout-commit',
+        'market-update-to-dom-commit',
         runtime.pendingRenderStartedAt,
         renderEndedAt,
         {},
@@ -178,12 +195,13 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    this.#runtime.frameTimestamps.push(now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -206,10 +224,18 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const renderSamples = runtime.renderSamples
-    const sortedRenderSamples = [...renderSamples].sort(
-      (left, right) => left - right,
+    runtime.renderSamples = runtime.renderSamples.filter(
+      (sample) => sample.recordedAt >= now - PERCENTILE_COMMIT_WINDOW_MS,
     )
+    runtime.frameTimestamps = runtime.frameTimestamps.filter(
+      (timestamp) => timestamp >= now - FRAME_RATE_WINDOW_MS,
+    )
+    const averageRenderSamples = runtime.renderSamples.filter(
+      (sample) => sample.recordedAt >= now - AVERAGE_COMMIT_WINDOW_MS,
+    )
+    const sortedRenderSamples = runtime.renderSamples
+      .map((sample) => sample.duration)
+      .sort((left, right) => left - right)
     const rowModelCalls =
       rowModelDiagnostics.calls - runtime.previousRowModelCalls
     const rowModelDuration =
@@ -231,10 +257,12 @@ export class BenchmarkMonitor {
       sampleDuration,
     )
     const averageRenderMs =
-      renderSamples.length === 0
+      averageRenderSamples.length === 0
         ? 0
-        : renderSamples.reduce((sum, value) => sum + value, 0) /
-          renderSamples.length
+        : averageRenderSamples.reduce(
+            (sum, sample) => sum + sample.duration,
+            0,
+          ) / averageRenderSamples.length
     const p95Index = Math.max(
       0,
       Math.ceil(sortedRenderSamples.length * 0.95) - 1,
@@ -254,14 +282,19 @@ export class BenchmarkMonitor {
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
+        (runtime.frameTimestamps.length /
+          Math.min(
+            FRAME_RATE_WINDOW_MS,
+            Math.max(1, now - runtime.frameTrackingStartedAt),
+          )) *
+        1_000,
       tableRendersPerSecond:
         (runtime.tableRendersInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
       averageRenderMs,
       p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
       maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      slowRenders: runtime.slowRenderCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -301,8 +334,6 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
     runtime.tableRendersInSample = 0
     return metrics
   }
@@ -310,8 +341,11 @@ export class BenchmarkMonitor {
   reset(): void {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
+    runtime.sessionStartedAt = runtime.sampleStartedAt
     runtime.pendingRenderStartedAt = null
     runtime.renderSamples = []
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -321,8 +355,8 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
     runtime.tableRendersInSample = 0
+    runtime.slowRenderCount = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
diff --git a/examples/octane/realtime-trading/src/benchmark/table-benchmark.ts b/examples/octane/realtime-trading/src/benchmark/table-benchmark.ts
index ebeb1f89b8..ee076b605f 100644
--- a/examples/octane/realtime-trading/src/benchmark/table-benchmark.ts
+++ b/examples/octane/realtime-trading/src/benchmark/table-benchmark.ts
@@ -11,6 +11,7 @@ export function startTableBenchmark(
   })
   observer.observe(tableBody, {
     attributes: true,
+    attributeFilter: ['class', 'style'],
     characterData: true,
     childList: true,
     subtree: true,
diff --git a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 604d8efe42..a110a70a8f 100644
--- a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -101,7 +101,7 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
+            this.monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
           }
         })
       : null
@@ -116,7 +116,6 @@ export class TradingBenchmarkController {
     })
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
 
@@ -132,7 +131,7 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
+    this.monitor.recordAnimationFrame(now)
     if (this.monitor.shouldPublish(now)) {
       this.#publishMetrics(this.monitor.publish(now))
     }
diff --git a/examples/octane/realtime-trading/src/index.css b/examples/octane/realtime-trading/src/index.css
index 20264402de..7cce7662eb 100644
--- a/examples/octane/realtime-trading/src/index.css
+++ b/examples/octane/realtime-trading/src/index.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -969,6 +974,13 @@ input[type='range'] {
   scrollbar-width: thin;
 }
 
+.diagnostic-note {
+  margin: 0.5rem 0 0;
+  color: var(--muted);
+  font-size: 0.56rem;
+  line-height: 1.45;
+}
+
 dt {
   color: var(--muted);
   font-size: 0.61rem;
diff --git a/examples/octane/realtime-trading/src/shell/Configurator.tsrx b/examples/octane/realtime-trading/src/shell/Configurator.tsrx
index 3ebe3a0902..7ecc319378 100644
--- a/examples/octane/realtime-trading/src/shell/Configurator.tsrx
+++ b/examples/octane/realtime-trading/src/shell/Configurator.tsrx
@@ -3,6 +3,7 @@ import { FORCED_VIRTUALIZATION_ROW_COUNT, resolveVirtualScrollMode } from '../ta
 import { useStoreSelector, useStoreValue } from '../use-store-value'
 import { configuratorOptions } from './configurator-options'
 import { Diagnostics } from './Diagnostics.tsrx'
+import { MetricsStrip } from './MetricsStrip.tsrx'
 import { SelectedInstrument } from './SelectedInstrument.tsrx'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController, TradingBenchmarkState } from '../benchmark/trading-benchmark-controller'
@@ -40,6 +41,7 @@ export function Configurator(props: {
 
   <aside id="benchmark-configurator" className="configurator" aria-label="Benchmark configurator">
     <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+    <MetricsStrip controller={props.controller} />
     <section className="config-section" aria-labelledby="feed-settings">
       <h2 id="feed-settings">FEED</h2>
       <button className="primary-action" type="button" data-testid="feed-toggle" onClick={props.feed.actions.toggle}>
diff --git a/examples/octane/realtime-trading/src/shell/Diagnostics.tsrx b/examples/octane/realtime-trading/src/shell/Diagnostics.tsrx
index 86997841c1..eed46206fe 100644
--- a/examples/octane/realtime-trading/src/shell/Diagnostics.tsrx
+++ b/examples/octane/realtime-trading/src/shell/Diagnostics.tsrx
@@ -21,15 +21,21 @@ export function Diagnostics({ controller }: { controller: TradingBenchmarkContro
     ['Component executions / s', rate.format(metrics.componentRenderCallsPerSecond), 'component-render-rate'],
     ['Executions by component / s', invocations(metrics.componentRenderRates), 'component-render-breakdown'],
     ['Callbacks by column / s', invocations(metrics.cellRendererRates), 'cell-render-breakdown'],
-    ['DOM mutation records / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'],
+    ['Observed MutationRecords / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'],
+    ['Worker samples / s', rate.format(metrics.actualTicksPerSecond), 'actual-rate'],
+    ['Worker messages / s', metrics.workerMessagesPerSecond.toFixed(1), 'message-rate'],
+    ['Changed rows / s', rate.format(metrics.rowUpdatesPerSecond), 'row-update-rate'],
+    ['State snapshots / s', metrics.stateApplicationsPerSecond.toFixed(1), 'state-apply-rate'],
+    ['Table DOM commits / s', metrics.tableRendersPerSecond.toFixed(1), 'table-render-rate'],
+    ['P95 / max commit latency (rolling 10 s)', `${ms(metrics.p95RenderMs)} / ${ms(metrics.maxRenderMs)}`, ''],
     ['Core row model calls / s', metrics.rowModelCallsPerSecond.toFixed(1), 'row-model-call-rate'],
     ['Core row model avg / max', `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, 'row-model-duration'],
     ['Visible rows', integer.format(metrics.visibleRows), 'visible-row-count'],
-    ['Worker messages', integer.format(metrics.workerMessages), 'worker-messages'],
+    ['Worker messages since reset', integer.format(metrics.workerMessages), 'worker-messages'],
     ['Worker-coalesced updates / s', rate.format(metrics.supersededUpdatesPerSecond), 'superseded-update-rate'],
     ['Last samples / updated rows', `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`, ''],
-    ['Renders > 16.7 ms', integer.format(metrics.slowRenders), ''],
-    ['JS heap', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, ''],
+    ['Commits > 16.7 ms since reset', integer.format(metrics.slowRenders), ''],
+    ['JS heap (GC-sensitive)', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`, ''],
   ] as const
   <section className="config-section diagnostics" aria-labelledby="diagnostics">
     <h2 id="diagnostics">DIAGNOSTICS</h2>
@@ -38,5 +44,8 @@ export function Diagnostics({ controller }: { controller: TradingBenchmarkContro
         <div><dt>{item[0]}</dt><dd data-testid={item[2] || undefined}>{item[1]}</dd></div>
       }
     </dl>
+    <p className="diagnostic-note">
+      MutationObserver counts delivered records, not individual DOM operations, and adds profiling overhead. Only class/style attributes, text, and child-list changes are observed. Heap is a Chromium-only point-in-time value and can move before garbage collection.
+    </p>
   </section>
 }
diff --git a/examples/octane/realtime-trading/src/shell/MarketStatusbar.tsrx b/examples/octane/realtime-trading/src/shell/MarketStatusbar.tsrx
index 0aeb3d3761..ccda1d9fd9 100644
--- a/examples/octane/realtime-trading/src/shell/MarketStatusbar.tsrx
+++ b/examples/octane/realtime-trading/src/shell/MarketStatusbar.tsrx
@@ -17,7 +17,7 @@ export function MarketStatusbar({ controller }: { controller: TradingBenchmarkCo
   )
   <footer className="market-statusbar">
     <span>MESSAGE SAMPLES <strong>{integer.format(state.lastBatchSize)}</strong></span>
-    <span>ROW UPDATES <strong>{integer.format(state.lastUpdateCount)}</strong></span>
+    <span>CHANGED ROWS <strong>{integer.format(state.lastUpdateCount)}</strong></span>
     <span>HOSTS <strong>{integer.format(state.mountedCells)}</strong></span>
     <span>COMPONENTS <strong>{integer.format(state.liveComponents)}</strong></span>
   </footer>
diff --git a/examples/octane/realtime-trading/src/shell/MetricsStrip.tsrx b/examples/octane/realtime-trading/src/shell/MetricsStrip.tsrx
index 8fe83ee98e..f9be39923a 100644
--- a/examples/octane/realtime-trading/src/shell/MetricsStrip.tsrx
+++ b/examples/octane/realtime-trading/src/shell/MetricsStrip.tsrx
@@ -8,16 +8,13 @@ export function MetricsStrip({ controller }: { controller: TradingBenchmarkContr
   const state = useStoreValue(controller.store)
   const metrics = state.metrics
   const items = [
-    ['WORKER SAMPLES', rate.format(metrics.actualTicksPerSecond), 'generated samples/s', 'actual-rate'],
-    ['ROW UPDATES', rate.format(metrics.rowUpdatesPerSecond), 'unique rows applied/s', 'row-update-rate'],
-    ['MESSAGES', metrics.workerMessagesPerSecond.toFixed(1), 'worker messages/s', 'message-rate'],
-    ['STATE APPLIES', metrics.stateApplicationsPerSecond.toFixed(1), 'quote snapshots/s', 'state-apply-rate'],
-    ['TABLE COMMITS', metrics.tableRendersPerSecond.toFixed(1), 'completed renders/s', 'table-render-rate'],
-    ['AVG RENDER', ms(metrics.averageRenderMs), 'mutation → render', ''],
-    ['P95 RENDER', ms(metrics.p95RenderMs), `max ${ms(metrics.maxRenderMs)}`, ''],
-    ['LONG FRAMES', state.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', state.longAnimationFramesSupported ? `worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
+    ['FRAME RATE (EST.)', metrics.rafCallbacksPerSecond.toFixed(1), 'rAF callbacks/s · rolling 1 s', 'frame-rate'],
+    ['AVG COMMIT', ms(metrics.averageRenderMs), 'snapshot → DOM · rolling 3 s', 'average-commit-latency'],
+    ['LONG FRAMES', state.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', state.longAnimationFramesSupported ? `since reset · worst ${ms(metrics.worstLongAnimationFrameMs)}` : 'unsupported', 'long-frame-count'],
+    ['THROUGHPUT', `${rate.format(metrics.rowUpdatesPerSecond)} rows/s`, `${metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s · rows deduplicated per snapshot`, 'throughput-rate'],
   ] as const
-  <section className="metrics-strip" aria-label="Live performance metrics">
+  <section className="metrics-strip" aria-labelledby="live-health">
+    <h2 id="live-health">LIVE HEALTH</h2>
     @for (const item of items; key item[0]) {
       <article><span>{item[0]}</span><strong data-testid={item[3] || undefined}>{item[1]}</strong><small>{item[2]}</small></article>
     }
diff --git a/examples/octane/realtime-trading/src/shell/TradingShell.tsrx b/examples/octane/realtime-trading/src/shell/TradingShell.tsrx
index 4a2d994019..d0cec4fa46 100644
--- a/examples/octane/realtime-trading/src/shell/TradingShell.tsrx
+++ b/examples/octane/realtime-trading/src/shell/TradingShell.tsrx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'octane'
 import { AppHeader } from './AppHeader.tsrx'
 import { Configurator } from './Configurator.tsrx'
 import { MarketStatusbar } from './MarketStatusbar.tsrx'
-import { MetricsStrip } from './MetricsStrip.tsrx'
 import { TradingTable } from '../table/TradingTable.tsrx'
 import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
@@ -27,7 +26,6 @@ export function TradingShell(props: {
       {import.meta.env.DEV && <aside className="development-warning">DEV BUILD — use the production build before recording results.</aside>}
     </div>
     <section className="market-panel" aria-label="Live synthetic quotes">
-      <MetricsStrip controller={props.controller} />
       <TradingTable controller={props.controller} feed={props.feed} />
     </section>
     <MarketStatusbar controller={props.controller} />
diff --git a/examples/octane/realtime-trading/src/table/table-config/trading-columns.tsrx b/examples/octane/realtime-trading/src/table/table-config/trading-columns.tsrx
index 296ef21c6f..5b88f96e53 100644
--- a/examples/octane/realtime-trading/src/table/table-config/trading-columns.tsrx
+++ b/examples/octane/realtime-trading/src/table/table-config/trading-columns.tsrx
@@ -93,7 +93,11 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
   rowModelDiagnostics.totalDurationMs += duration
   rowModelDiagnostics.maxDurationMs = Math.max(rowModelDiagnostics.maxDurationMs, duration)
   rowModelDiagnostics.lastRowCount = rows.length
-  try { performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } }) } catch { /* optional User Timing detail */ }
+  if (rowModelDiagnostics.calls % 20 !== 0) return rows
+  try {
+    performance.measure('tanstack-row-model', { start, end, detail: { rowCount: rows.length } })
+    if (rowModelDiagnostics.calls % 20_000 === 0) performance.clearMeasures('tanstack-row-model')
+  } catch { /* optional User Timing detail */ }
   return rows
 }
 
diff --git a/examples/preact/realtime-trading/README.md b/examples/preact/realtime-trading/README.md
index 983bac8e69..3f13cd3f31 100644
--- a/examples/preact/realtime-trading/README.md
+++ b/examples/preact/realtime-trading/README.md
@@ -61,7 +61,9 @@ IDs reject stale messages after reset or row-count changes.
   is not pointer events, renders, or messages.
 - **Worker delivery interval** controls coalesced `postMessage` cadence; 20 ms
   targets about 50 messages/s.
-- **Row updates** counts unique row snapshots applied on the main thread.
+- **Changed rows** counts row snapshots applied on the main thread. Rows are
+  deduplicated within one snapshot, but the same row can be counted again in a
+  later snapshot, so it is throughput rather than a global distinct-row count.
 - **Message samples** shows how much generated work the latest message contains.
 
 The 25K burst deliberately creates and flushes one expensive batch. The worker
@@ -121,11 +123,40 @@ row-model pass when data changes.
 
 ## Diagnostics and interpretation
 
-Diagnostics cover worker samples, messages, unique row updates, state applies,
-completed renders, average mutation-to-render latency, long animation frames,
-mounted hosts, component creation/destruction, cell callbacks by column,
-component executions by type, DOM mutation records, row-model timing, and heap
-data where supported.
+The compact **Live health** block lives in the configurator sidebar and shows
+four cross-framework signals:
+
+- **Frame rate (est.)** counts `requestAnimationFrame` callbacks over a rolling
+  one-second window. It is capped by display refresh and is not a measurement of
+  GPU-presented frames.
+- **Average commit latency** is a rolling three-second average from the first
+  pending market mutation to the table's DOM commit. It includes scheduling,
+  Preact work, and the commit; it is not component render duration.
+- **Long frames** comes from the Long Animation Frames API and is cumulative
+  since reset, with the worst observed duration when supported.
+- **Throughput** pairs changed rows/s with applied snapshots/s; changed rows are
+  deduplicated per snapshot, not across the complete reporting window.
+
+Detailed diagnostics retain worker samples, messages, state applies, table DOM
+commits, a 10-second commit-latency p95/max, cumulative slow commits, mounted
+hosts, component creation/destruction, cell callbacks by column, component
+executions by type, DOM `MutationRecord` rate, row-model timing, and heap data
+where supported.
+
+The in-memory latency and row-model aggregates inspect every call, while the
+Performance timeline writes only one User Timing measure per 20 calls to keep
+instrumentation from dominating a hot run. The `MutationObserver` watches the
+table body for text/children and only `class`/`style` attribute changes. Its
+rate counts browser records rather than DOM operations: records can be
+coalesced, equivalent UIs can produce different patterns, and creating records
+has real overhead. Heap is Chrome-only `usedJSHeapSize`, is sensitive to
+garbage-collection timing, and should be read as a trend rather than proof of a
+leak.
+
+The monitor itself adds one lightweight `requestAnimationFrame` callback and
+publishes the sidebar snapshot every 500 ms. That subscription is independent
+from the quote atom and table data boundary, but it remains instrumentation
+overhead and must stay enabled on both sides of an A/B comparison.
 
 Callback execution does not imply a DOM mutation, and temporary heap growth is
 not by itself a leak. Compare identical production configurations and confirm
diff --git a/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
index 9eea493fec..a01cfc38d0 100644
--- a/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -9,6 +9,15 @@ export interface NamedInvocationRate {
   callsPerSecond: number
 }
 
+interface TimedLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const averageLatencyWindowMs = 3_000
+const percentileLatencyWindowMs = 10_000
+const frameRateWindowMs = 1_000
+
 export interface FeedMetrics {
   actualTicksPerSecond: number
   rowUpdatesPerSecond: number
@@ -16,13 +25,13 @@ export interface FeedMetrics {
   stateApplicationsPerSecond: number
   supersededUpdatesPerSecond: number
   totalTicks: number
-  rafCallbacksPerSecond: number
-  tableRendersPerSecond: number
+  estimatedFrameRate: number
+  tableCommitsPerSecond: number
   lastBatchSize: number
-  averageRenderMs: number
-  p95RenderMs: number
-  maxRenderMs: number
-  slowRenders: number
+  averageCommitLatencyMs: number
+  p95CommitLatencyMs: number
+  maxCommitLatencyMs: number
+  slowCommits: number
   longAnimationFrames: number
   worstLongAnimationFrameMs: number
   heapMb: number | null
@@ -48,13 +57,13 @@ export const initialMetrics: FeedMetrics = {
   stateApplicationsPerSecond: 0,
   supersededUpdatesPerSecond: 0,
   totalTicks: 0,
-  rafCallbacksPerSecond: 0,
-  tableRendersPerSecond: 0,
+  estimatedFrameRate: 0,
+  tableCommitsPerSecond: 0,
   lastBatchSize: 0,
-  averageRenderMs: 0,
-  p95RenderMs: 0,
-  maxRenderMs: 0,
-  slowRenders: 0,
+  averageCommitLatencyMs: 0,
+  p95CommitLatencyMs: 0,
+  maxCommitLatencyMs: 0,
+  slowCommits: 0,
   longAnimationFrames: 0,
   worstLongAnimationFrameMs: 0,
   heapMb: null,
@@ -73,7 +82,10 @@ export const initialMetrics: FeedMetrics = {
   visibleRows: 0,
 }
 
-const userTiming = { entryCount: 0 }
+const userTiming = {
+  entryCount: 0,
+  measureCallsByName: {} as Record<string, number>,
+}
 
 export function recordMeasure(
   name: string,
@@ -81,11 +93,15 @@ export function recordMeasure(
   end: number,
   detail: Record<string, unknown>,
 ): void {
+  const measureCall = (userTiming.measureCallsByName[name] ?? 0) + 1
+  userTiming.measureCallsByName[name] = measureCall
+  if ((measureCall - 1) % 20 !== 0) return
+
   try {
     performance.measure(name, { start, end, detail })
     userTiming.entryCount++
     if (userTiming.entryCount % 1_000 === 0) {
-      performance.clearMeasures('market-update-to-layout-commit')
+      performance.clearMeasures('market-update-to-dom-commit')
     }
   } catch {
     // User Timing Level 3 options are not implemented in every browser.
@@ -109,9 +125,11 @@ export function markBenchmarkAction(
 
 export class BenchmarkMonitor {
   readonly #runtime = {
+    sessionStartedAt: performance.now(),
     sampleStartedAt: performance.now(),
-    pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    pendingCommitStartedAt: null as number | null,
+    commitLatencySamples: [] as Array<TimedLatencySample>,
+    slowCommitCount: 0,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -121,8 +139,9 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
-    tableRendersInSample: 0,
+    frameTrackingStartedAt: performance.now(),
+    frameTimestamps: [] as Array<number>,
+    tableCommitsInSample: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -138,23 +157,28 @@ export class BenchmarkMonitor {
     previousRowModelDuration: 0,
   }
 
-  markRenderPending(): void {
-    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  markCommitPending(): void {
+    this.#runtime.pendingCommitStartedAt ??= performance.now()
   }
 
-  recordCompletedRender(): void {
+  recordDomCommit(): void {
     const runtime = this.#runtime
-    if (runtime.pendingRenderStartedAt !== null) {
-      const renderEndedAt = performance.now()
-      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+    if (runtime.pendingCommitStartedAt !== null) {
+      const commitEndedAt = performance.now()
+      const duration = commitEndedAt - runtime.pendingCommitStartedAt
+      runtime.commitLatencySamples.push({
+        recordedAt: commitEndedAt,
+        duration,
+      })
+      if (duration > 16.7) runtime.slowCommitCount++
       recordMeasure(
-        'market-update-to-layout-commit',
-        runtime.pendingRenderStartedAt,
-        renderEndedAt,
+        'market-update-to-dom-commit',
+        runtime.pendingCommitStartedAt,
+        commitEndedAt,
         {},
       )
-      runtime.pendingRenderStartedAt = null
-      runtime.tableRendersInSample++
+      runtime.pendingCommitStartedAt = null
+      runtime.tableCommitsInSample++
     }
   }
 
@@ -178,12 +202,16 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    const timestamps = this.#runtime.frameTimestamps
+    timestamps.push(now)
+    pruneFrameTimestamps(timestamps, now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
+
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -206,8 +234,15 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const renderSamples = runtime.renderSamples
-    const sortedRenderSamples = [...renderSamples].sort(
+    pruneLatencySamples(runtime.commitLatencySamples, now)
+    pruneFrameTimestamps(runtime.frameTimestamps, now)
+    const averageCommitLatencySamples = runtime.commitLatencySamples
+      .filter((sample) => sample.recordedAt >= now - averageLatencyWindowMs)
+      .map((sample) => sample.duration)
+    const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
+      (sample) => sample.duration,
+    )
+    const sortedCommitLatencySamples = [...percentileCommitLatencySamples].sort(
       (left, right) => left - right,
     )
     const rowModelCalls =
@@ -230,14 +265,14 @@ export class BenchmarkMonitor {
       runtime.previousComponentRenderCallsByName,
       sampleDuration,
     )
-    const averageRenderMs =
-      renderSamples.length === 0
+    const averageCommitLatencyMs =
+      averageCommitLatencySamples.length === 0
         ? 0
-        : renderSamples.reduce((sum, value) => sum + value, 0) /
-          renderSamples.length
+        : averageCommitLatencySamples.reduce((sum, value) => sum + value, 0) /
+          averageCommitLatencySamples.length
     const p95Index = Math.max(
       0,
-      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+      Math.ceil(sortedCommitLatencySamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
       actualTicksPerSecond:
@@ -253,15 +288,19 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
-      tableRendersPerSecond:
-        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      estimatedFrameRate:
+        calculateFrameRate(
+          runtime.frameTimestamps,
+          runtime.frameTrackingStartedAt,
+          now,
+        ),
+      tableCommitsPerSecond:
+        (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
-      averageRenderMs,
-      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
-      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      averageCommitLatencyMs,
+      p95CommitLatencyMs: sortedCommitLatencySamples[p95Index] ?? 0,
+      maxCommitLatencyMs: sortedCommitLatencySamples.at(-1) ?? 0,
+      slowCommits: runtime.slowCommitCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -301,17 +340,17 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.tableCommitsInSample = 0
     return metrics
   }
 
   reset(): void {
     const runtime = this.#runtime
-    runtime.sampleStartedAt = performance.now()
-    runtime.pendingRenderStartedAt = null
-    runtime.renderSamples = []
+    runtime.sessionStartedAt = performance.now()
+    runtime.sampleStartedAt = runtime.sessionStartedAt
+    runtime.pendingCommitStartedAt = null
+    runtime.commitLatencySamples = []
+    runtime.slowCommitCount = 0
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -321,8 +360,9 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
+    runtime.tableCommitsInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
@@ -366,3 +406,36 @@ function calculateInvocationRates(
         : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
   }))
 }
+
+function pruneLatencySamples(
+  samples: Array<TimedLatencySample>,
+  now: number,
+): void {
+  const cutoff = now - percentileLatencyWindowMs
+  const firstRetainedIndex = samples.findIndex(
+    (sample) => sample.recordedAt >= cutoff,
+  )
+  if (firstRetainedIndex > 0) samples.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) samples.length = 0
+}
+
+function pruneFrameTimestamps(timestamps: Array<number>, now: number): void {
+  const cutoff = now - frameRateWindowMs
+  const firstRetainedIndex = timestamps.findIndex(
+    (timestamp) => timestamp >= cutoff,
+  )
+  if (firstRetainedIndex > 0) timestamps.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) timestamps.length = 0
+}
+
+function calculateFrameRate(
+  timestamps: ReadonlyArray<number>,
+  trackingStartedAt: number,
+  now: number,
+): number {
+  const observedWindowMs = Math.min(
+    frameRateWindowMs,
+    Math.max(1, now - trackingStartedAt),
+  )
+  return (timestamps.length / observedWindowMs) * 1_000
+}
diff --git a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 8ec69a1950..9d2cacc575 100644
--- a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -101,7 +101,10 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
+            this.monitor.recordLongAnimationFrame(
+              entry.duration,
+              entry.startTime,
+            )
           }
         })
       : null
@@ -109,14 +112,13 @@ export class TradingBenchmarkController {
     this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
     this.#runtime.stopObservingFeed = this.feed.observe({
       messageReceived: () => this.monitor.recordWorkerMessage(),
-      mutationStarted: () => this.monitor.markRenderPending(),
+      mutationStarted: () => this.monitor.markCommitPending(),
       batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
         this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
-      renderCommitted: () => this.monitor.recordCompletedRender(),
+      renderCommitted: () => this.monitor.recordDomCommit(),
     })
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
 
@@ -132,7 +134,7 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
+    this.monitor.recordAnimationFrame(now)
     if (this.monitor.shouldPublish(now)) {
       this.#publishMetrics(this.monitor.publish(now))
     }
diff --git a/examples/preact/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/preact/realtime-trading/src/benchmark/use-table-benchmark.ts
index 8aafed01dd..de40f98f9f 100644
--- a/examples/preact/realtime-trading/src/benchmark/use-table-benchmark.ts
+++ b/examples/preact/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -18,6 +18,7 @@ export function useTableBenchmark(
     })
     observer.observe(tableBody, {
       attributes: true,
+      attributeFilter: ['class', 'style'],
       characterData: true,
       childList: true,
       subtree: true,
diff --git a/examples/preact/realtime-trading/src/index.css b/examples/preact/realtime-trading/src/index.css
index 20264402de..69cba52fa7 100644
--- a/examples/preact/realtime-trading/src/index.css
+++ b/examples/preact/realtime-trading/src/index.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/examples/preact/realtime-trading/src/shell/TradingShell.tsx b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
index edc596b864..a6e4098dc0 100644
--- a/examples/preact/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
@@ -44,7 +44,6 @@ export function TradingShell(props: { children: ComponentChildren }) {
       </div>
 
       <section className="market-panel" aria-label="Live synthetic quotes">
-        <MetricsStrip />
         {props.children}
       </section>
       <MarketStatusbar />
@@ -115,7 +114,7 @@ function MarketStatusbar() {
         MESSAGE SAMPLES <strong>{formatInteger(lastBatchSize)}</strong>
       </span>
       <span>
-        ROW UPDATES <strong>{formatInteger(lastUpdateCount)}</strong>
+        CHANGED ROWS <strong>{formatInteger(lastUpdateCount)}</strong>
       </span>
       <span>
         HOSTS <strong>{formatInteger(mountedCells)}</strong>
@@ -175,6 +174,8 @@ function Configurator() {
         <small>RUN PARAMETERS</small>
       </header>
 
+      <LiveHealth />
+
       <section className="config-section" aria-labelledby="feed-settings">
         <h2 id="feed-settings">FEED</h2>
         <button
@@ -354,7 +355,7 @@ function Configurator() {
   )
 }
 
-function MetricsStrip() {
+function LiveHealth() {
   const { metrics, longAnimationFramesSupported } = useTradingShellState(
     (state) => ({
       metrics: state.metrics,
@@ -363,51 +364,21 @@ function MetricsStrip() {
     { compare: shallow },
   )
   return (
-    <section className="metrics-strip" aria-label="Live performance metrics">
-      <article>
-        <span>WORKER SAMPLES</span>
-        <strong data-testid="actual-rate">
-          {formatRate(metrics.actualTicksPerSecond)}
-        </strong>
-        <small>generated samples/s</small>
-      </article>
-      <article>
-        <span>ROW UPDATES</span>
-        <strong data-testid="row-update-rate">
-          {formatRate(metrics.rowUpdatesPerSecond)}
-        </strong>
-        <small>unique rows applied/s</small>
-      </article>
-      <article>
-        <span>MESSAGES</span>
-        <strong data-testid="message-rate">
-          {metrics.workerMessagesPerSecond.toFixed(1)}
-        </strong>
-        <small>worker messages/s</small>
-      </article>
+    <section className="metrics-strip" aria-labelledby="live-health">
+      <h2 id="live-health">LIVE HEALTH</h2>
       <article>
-        <span>STATE APPLIES</span>
-        <strong data-testid="state-apply-rate">
-          {metrics.stateApplicationsPerSecond.toFixed(1)}
+        <span>FRAME RATE (EST.)</span>
+        <strong data-testid="frame-rate">
+          {metrics.estimatedFrameRate.toFixed(1)}
         </strong>
-        <small>quote snapshots/s</small>
+        <small>rAF callbacks/s · rolling 1 s</small>
       </article>
       <article>
-        <span>TABLE COMMITS</span>
-        <strong data-testid="table-render-rate">
-          {metrics.tableRendersPerSecond.toFixed(1)}
+        <span>AVG COMMIT</span>
+        <strong data-testid="average-commit-latency">
+          {formatMs(metrics.averageCommitLatencyMs)}
         </strong>
-        <small>completed renders/s</small>
-      </article>
-      <article>
-        <span>AVG RENDER</span>
-        <strong>{formatMs(metrics.averageRenderMs)}</strong>
-        <small>mutation → render</small>
-      </article>
-      <article>
-        <span>P95 RENDER</span>
-        <strong>{formatMs(metrics.p95RenderMs)}</strong>
-        <small>max {formatMs(metrics.maxRenderMs)}</small>
+        <small>snapshot → DOM · rolling 3 s</small>
       </article>
       <article>
         <span>LONG FRAMES</span>
@@ -419,7 +390,10 @@ function MetricsStrip() {
             >
               {metrics.longAnimationFrames}
             </strong>
-            <small>worst {formatMs(metrics.worstLongAnimationFrameMs)}</small>
+            <small>
+              since reset · worst{' '}
+              {formatMs(metrics.worstLongAnimationFrameMs)}
+            </small>
           </>
         ) : (
           <>
@@ -428,6 +402,16 @@ function MetricsStrip() {
           </>
         )}
       </article>
+      <article>
+        <span>THROUGHPUT</span>
+        <strong data-testid="throughput-rate">
+          {formatRate(metrics.rowUpdatesPerSecond)} rows/s
+        </strong>
+        <small>
+          {metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s · rows
+          deduplicated per snapshot
+        </small>
+      </article>
     </section>
   )
 }
@@ -454,6 +438,43 @@ function Diagnostics() {
     >
       <h2 id="diagnostics">DIAGNOSTICS</h2>
       <dl>
+        <div>
+          <dt>Worker samples / s</dt>
+          <dd data-testid="actual-rate">
+            {formatRate(metrics.actualTicksPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Changed rows / s</dt>
+          <dd data-testid="row-update-rate">
+            {formatRate(metrics.rowUpdatesPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages / s</dt>
+          <dd data-testid="message-rate">
+            {metrics.workerMessagesPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>State applies / s</dt>
+          <dd data-testid="state-apply-rate">
+            {metrics.stateApplicationsPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>Table DOM commits / s</dt>
+          <dd data-testid="table-render-rate">
+            {metrics.tableCommitsPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>Commit latency p95 / max</dt>
+          <dd>
+            {formatMs(metrics.p95CommitLatencyMs)} /{' '}
+            {formatMs(metrics.maxCommitLatencyMs)}
+          </dd>
+        </div>
         <div>
           <dt>Mounted cells</dt>
           <dd>{formatInteger(mountedCells)}</dd>
@@ -494,7 +515,7 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>DOM mutation records / s</dt>
+          <dt>Observed MutationRecords / s</dt>
           <dd data-testid="dom-mutation-rate">
             {formatRate(metrics.domMutationsPerSecond)}
           </dd>
@@ -538,8 +559,8 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>Renders &gt; 16.7 ms</dt>
-          <dd>{metrics.slowRenders}</dd>
+          <dt>Commits &gt; 16.7 ms since reset</dt>
+          <dd>{metrics.slowCommits}</dd>
         </div>
         <div>
           <dt>Long animation frames</dt>
@@ -550,7 +571,9 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>JS heap</dt>
+          <dt title="Current used JS heap; Chrome-only and sensitive to garbage collection timing">
+            JS heap (GC-sensitive)
+          </dt>
           <dd>
             {metrics.heapMb === null
               ? 'N/A'
diff --git a/examples/preact/realtime-trading/src/table/table-config/trading-table-config.tsx b/examples/preact/realtime-trading/src/table/table-config/trading-table-config.tsx
index 43cb9cdf15..7e1e1a6fbd 100644
--- a/examples/preact/realtime-trading/src/table/table-config/trading-table-config.tsx
+++ b/examples/preact/realtime-trading/src/table/table-config/trading-table-config.tsx
@@ -216,17 +216,19 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
   )
   rowModelDiagnostics.lastRowCount = rows.length
 
-  try {
-    performance.measure('tanstack-row-model', {
-      start,
-      end,
-      detail: { rowCount: rows.length },
-    })
-    if (rowModelDiagnostics.calls % 1_000 === 0) {
-      performance.clearMeasures('tanstack-row-model')
+  if (rowModelDiagnostics.calls % 1_000 === 0) {
+    performance.clearMeasures('tanstack-row-model')
+  }
+  if ((rowModelDiagnostics.calls - 1) % 20 === 0) {
+    try {
+      performance.measure('tanstack-row-model', {
+        start,
+        end,
+        detail: { rowCount: rows.length },
+      })
+    } catch {
+      // User Timing Level 3 detail is not implemented in every browser.
     }
-  } catch {
-    // User Timing Level 3 detail is not implemented in every browser.
   }
 
   return rows
diff --git a/examples/react/realtime-trading/README.md b/examples/react/realtime-trading/README.md
index 91bb7eb251..6630ba63f8 100644
--- a/examples/react/realtime-trading/README.md
+++ b/examples/react/realtime-trading/README.md
@@ -80,8 +80,10 @@ UI terminology:
   worker, not browser events, React renders, or messages.
 - **Worker delivery interval** is the target coalesced-message cadence; 20 ms
   targets approximately 50 messages per second.
-- **Row updates** counts unique immutable row objects applied on the main
-  thread, often fewer than generated samples.
+- **Changed rows** counts immutable row objects applied on the main thread.
+  Rows are deduplicated within one snapshot, but the same row can be counted
+  again in a later snapshot, so this is intentionally a throughput rate rather
+  than a count of distinct instruments over the whole second.
 - **Message samples** is the generated work represented by the latest message.
 
 Intraday history sampling is independent of the quote workload, and the 25K
@@ -179,15 +181,49 @@ all processing when its data input changes.
 
 ## Diagnostics
 
-The benchmark monitor reports generated samples, unique row updates, messages,
-state applies, completed commits, average mutation-to-render latency, long
-animation frames, mounted hosts, component lifecycle counts, callbacks by
-column, executions by component type, DOM mutation records, core row-model
-timing, and optional heap information.
+The compact **Live health** block lives in the configurator sidebar and keeps
+four cross-framework signals visible:
+
+- **Frame rate (est.)** counts `requestAnimationFrame` callbacks over a rolling
+  one-second window. It is a main-thread scheduling signal capped by the
+  display refresh rate, not proof of GPU-presented frames or a React Scan FPS
+  value.
+- **Average commit latency** is the rolling three-second average from the first
+  pending market mutation to the table's DOM commit. Several snapshots may be
+  coalesced behind one commit, so this includes scheduling, React work, and DOM
+  commit latency; it is not component render duration.
+- **Long frames** comes from the browser Long Animation Frames API and is
+  cumulative since reset. The worst duration is shown when supported.
+- **Throughput** pairs changed rows/s with applied snapshots/s. Changed rows are
+  deduplicated per snapshot, not across the full reporting window.
+
+The detailed section retains generated worker samples, messages, state applies,
+table DOM commits, a 10-second commit-latency p95/max, cumulative slow commits,
+mounted hosts, component lifecycle counts, callbacks by column, executions by
+component type, DOM `MutationRecord` rate, core row-model timing, and optional
+heap information.
 
 The React Profiler additionally records actual/base duration and commit counts
-when using development or the profiling build. User Timing marks connect a feed
-mutation to its completed render; old measures are periodically pruned.
+when using development or the profiling build. The in-memory latency, Profiler,
+and row-model aggregates inspect every call, but the Performance timeline emits
+only one User Timing measure per 20 calls to avoid making instrumentation a
+significant part of a hot run. Old measures are periodically pruned.
+
+The `MutationObserver` watches the table body for text/children and only
+`class`/`style` attribute changes. Its value is browser `MutationRecord`s per
+second, not DOM operations: a record can represent a coalesced change, and
+framework write patterns can produce different record counts for equivalent
+screens. Creating records also has real overhead at high rates, so treat it as
+a diagnostic and confirm important comparisons with a Performance recording.
+Heap is Chrome-only `usedJSHeapSize`, changes with garbage-collection timing,
+and is useful as a trend rather than a leak verdict.
+
+The monitor itself schedules one lightweight `requestAnimationFrame` callback
+and publishes its sidebar snapshot every 500 ms. The sidebar subscribes to that
+snapshot independently, so publishing diagnostics does not update the quotes
+atom or table data boundary, but it is still instrumentation overhead and must
+remain enabled in both sides of an A/B comparison. React Profiler and React
+DevTools also add overhead by design.
 
 Callback counts are not DOM mutation counts. A cell callback can execute while
 React reuses the existing component and DOM. Likewise, a rising heap during the
@@ -198,6 +234,11 @@ Use Chrome Performance and React DevTools for call stacks/flamegraphs, and keep
 the instrument count, workload, delivery interval, renderer mode, build mode,
 and virtualization mode fixed between comparisons.
 
+React Scan remains an optional development-only aid in this example. It is not
+used by any canonical counter because the other adapter examples cannot share
+it, and its instrumentation can alter a recording. Use the profiling production
+build without React Scan for cross-framework comparisons.
+
 ## Standalone example policy
 
 This directory owns its instrument list, feed engine, worker, diagnostics,
diff --git a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
index c60eac85bd..a92ae243f1 100644
--- a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -10,6 +10,15 @@ export interface NamedInvocationRate {
   callsPerSecond: number
 }
 
+interface TimedLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const averageLatencyWindowMs = 3_000
+const percentileLatencyWindowMs = 10_000
+const frameRateWindowMs = 1_000
+
 export interface FeedMetrics {
   actualTicksPerSecond: number
   rowUpdatesPerSecond: number
@@ -17,13 +26,13 @@ export interface FeedMetrics {
   stateApplicationsPerSecond: number
   supersededUpdatesPerSecond: number
   totalTicks: number
-  rafCallbacksPerSecond: number
-  tableRendersPerSecond: number
+  estimatedFrameRate: number
+  tableCommitsPerSecond: number
   lastBatchSize: number
-  averageRenderMs: number
-  p95RenderMs: number
-  maxRenderMs: number
-  slowRenders: number
+  averageCommitLatencyMs: number
+  p95CommitLatencyMs: number
+  maxCommitLatencyMs: number
+  slowCommits: number
   longAnimationFrames: number
   worstLongAnimationFrameMs: number
   heapMb: number | null
@@ -53,13 +62,13 @@ export const initialMetrics: FeedMetrics = {
   stateApplicationsPerSecond: 0,
   supersededUpdatesPerSecond: 0,
   totalTicks: 0,
-  rafCallbacksPerSecond: 0,
-  tableRendersPerSecond: 0,
+  estimatedFrameRate: 0,
+  tableCommitsPerSecond: 0,
   lastBatchSize: 0,
-  averageRenderMs: 0,
-  p95RenderMs: 0,
-  maxRenderMs: 0,
-  slowRenders: 0,
+  averageCommitLatencyMs: 0,
+  p95CommitLatencyMs: 0,
+  maxCommitLatencyMs: 0,
+  slowCommits: 0,
   longAnimationFrames: 0,
   worstLongAnimationFrameMs: 0,
   heapMb: null,
@@ -82,7 +91,10 @@ export const initialMetrics: FeedMetrics = {
   visibleRows: 0,
 }
 
-const userTiming = { entryCount: 0 }
+const userTiming = {
+  entryCount: 0,
+  measureCallsByName: {} as Record<string, number>,
+}
 
 export function recordMeasure(
   name: string,
@@ -90,12 +102,16 @@ export function recordMeasure(
   end: number,
   detail: Record<string, unknown>,
 ): void {
+  const measureCall = (userTiming.measureCallsByName[name] ?? 0) + 1
+  userTiming.measureCallsByName[name] = measureCall
+  if ((measureCall - 1) % 20 !== 0) return
+
   try {
     performance.measure(name, { start, end, detail })
     userTiming.entryCount++
     if (userTiming.entryCount % 1_000 === 0) {
       performance.clearMeasures('react-profiler-commit')
-      performance.clearMeasures('market-update-to-layout-commit')
+      performance.clearMeasures('market-update-to-dom-commit')
     }
   } catch {
     // User Timing Level 3 options are not implemented in every browser.
@@ -124,9 +140,11 @@ interface ProfilerSample {
 
 export class BenchmarkMonitor {
   readonly #runtime = {
+    sessionStartedAt: performance.now(),
     sampleStartedAt: performance.now(),
-    pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    pendingCommitStartedAt: null as number | null,
+    commitLatencySamples: [] as Array<TimedLatencySample>,
+    slowCommitCount: 0,
     profilerSamples: [] as Array<ProfilerSample>,
     totalTicks: 0,
     ticksInSample: 0,
@@ -137,8 +155,9 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
-    tableRendersInSample: 0,
+    frameTrackingStartedAt: performance.now(),
+    frameTimestamps: [] as Array<number>,
+    tableCommitsInSample: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -171,23 +190,28 @@ export class BenchmarkMonitor {
     })
   }
 
-  markRenderPending(): void {
-    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  markCommitPending(): void {
+    this.#runtime.pendingCommitStartedAt ??= performance.now()
   }
 
-  recordCompletedRender(): void {
+  recordDomCommit(): void {
     const runtime = this.#runtime
-    if (runtime.pendingRenderStartedAt !== null) {
-      const renderEndedAt = performance.now()
-      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+    if (runtime.pendingCommitStartedAt !== null) {
+      const commitEndedAt = performance.now()
+      const duration = commitEndedAt - runtime.pendingCommitStartedAt
+      runtime.commitLatencySamples.push({
+        recordedAt: commitEndedAt,
+        duration,
+      })
+      if (duration > 16.7) runtime.slowCommitCount++
       recordMeasure(
-        'market-update-to-layout-commit',
-        runtime.pendingRenderStartedAt,
-        renderEndedAt,
+        'market-update-to-dom-commit',
+        runtime.pendingCommitStartedAt,
+        commitEndedAt,
         {},
       )
-      runtime.pendingRenderStartedAt = null
-      runtime.tableRendersInSample++
+      runtime.pendingCommitStartedAt = null
+      runtime.tableCommitsInSample++
     }
   }
 
@@ -211,12 +235,16 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    const timestamps = this.#runtime.frameTimestamps
+    timestamps.push(now)
+    pruneFrameTimestamps(timestamps, now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
+
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -239,8 +267,15 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const renderSamples = runtime.renderSamples
-    const sortedRenderSamples = [...renderSamples].sort(
+    pruneLatencySamples(runtime.commitLatencySamples, now)
+    pruneFrameTimestamps(runtime.frameTimestamps, now)
+    const averageCommitLatencySamples = runtime.commitLatencySamples
+      .filter((sample) => sample.recordedAt >= now - averageLatencyWindowMs)
+      .map((sample) => sample.duration)
+    const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
+      (sample) => sample.duration,
+    )
+    const sortedCommitLatencySamples = [...percentileCommitLatencySamples].sort(
       (left, right) => left - right,
     )
     const profilerSamples = runtime.profilerSamples
@@ -267,14 +302,14 @@ export class BenchmarkMonitor {
       runtime.previousComponentRenderCallsByName,
       sampleDuration,
     )
-    const averageRenderMs =
-      renderSamples.length === 0
+    const averageCommitLatencyMs =
+      averageCommitLatencySamples.length === 0
         ? 0
-        : renderSamples.reduce((sum, value) => sum + value, 0) /
-          renderSamples.length
+        : averageCommitLatencySamples.reduce((sum, value) => sum + value, 0) /
+          averageCommitLatencySamples.length
     const p95Index = Math.max(
       0,
-      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+      Math.ceil(sortedCommitLatencySamples.length * 0.95) - 1,
     )
     const profilerP95Index = Math.max(
       0,
@@ -294,15 +329,19 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
-      tableRendersPerSecond:
-        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+      estimatedFrameRate:
+        calculateFrameRate(
+          runtime.frameTimestamps,
+          runtime.frameTrackingStartedAt,
+          now,
+        ),
+      tableCommitsPerSecond:
+        (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
-      averageRenderMs,
-      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
-      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      averageCommitLatencyMs,
+      p95CommitLatencyMs: sortedCommitLatencySamples[p95Index] ?? 0,
+      maxCommitLatencyMs: sortedCommitLatencySamples.at(-1) ?? 0,
+      slowCommits: runtime.slowCommitCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -360,17 +399,17 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.tableCommitsInSample = 0
     return metrics
   }
 
   reset(): void {
     const runtime = this.#runtime
-    runtime.sampleStartedAt = performance.now()
-    runtime.pendingRenderStartedAt = null
-    runtime.renderSamples = []
+    runtime.sessionStartedAt = performance.now()
+    runtime.sampleStartedAt = runtime.sessionStartedAt
+    runtime.pendingCommitStartedAt = null
+    runtime.commitLatencySamples = []
+    runtime.slowCommitCount = 0
     runtime.profilerSamples = []
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
@@ -381,8 +420,9 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
+    runtime.tableCommitsInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
@@ -426,3 +466,36 @@ function calculateInvocationRates(
         : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
   }))
 }
+
+function pruneLatencySamples(
+  samples: Array<TimedLatencySample>,
+  now: number,
+): void {
+  const cutoff = now - percentileLatencyWindowMs
+  const firstRetainedIndex = samples.findIndex(
+    (sample) => sample.recordedAt >= cutoff,
+  )
+  if (firstRetainedIndex > 0) samples.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) samples.length = 0
+}
+
+function pruneFrameTimestamps(timestamps: Array<number>, now: number): void {
+  const cutoff = now - frameRateWindowMs
+  const firstRetainedIndex = timestamps.findIndex(
+    (timestamp) => timestamp >= cutoff,
+  )
+  if (firstRetainedIndex > 0) timestamps.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) timestamps.length = 0
+}
+
+function calculateFrameRate(
+  timestamps: ReadonlyArray<number>,
+  trackingStartedAt: number,
+  now: number,
+): number {
+  const observedWindowMs = Math.min(
+    frameRateWindowMs,
+    Math.max(1, now - trackingStartedAt),
+  )
+  return (timestamps.length / observedWindowMs) * 1_000
+}
diff --git a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index cb3f4abf70..56dac5b665 100644
--- a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -101,7 +101,10 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
+            this.monitor.recordLongAnimationFrame(
+              entry.duration,
+              entry.startTime,
+            )
           }
         })
       : null
@@ -109,14 +112,13 @@ export class TradingBenchmarkController {
     this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
     this.#runtime.stopObservingFeed = this.feed.observe({
       messageReceived: () => this.monitor.recordWorkerMessage(),
-      mutationStarted: () => this.monitor.markRenderPending(),
+      mutationStarted: () => this.monitor.markCommitPending(),
       batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
         this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
-      renderCommitted: () => this.monitor.recordCompletedRender(),
+      renderCommitted: () => this.monitor.recordDomCommit(),
     })
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
 
@@ -132,7 +134,7 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
+    this.monitor.recordAnimationFrame(now)
     if (this.monitor.shouldPublish(now)) {
       this.#publishMetrics(this.monitor.publish(now))
     }
diff --git a/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
index 6768999620..bc335d2477 100644
--- a/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
+++ b/examples/react/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -18,6 +18,7 @@ export function useTableBenchmark(
     })
     observer.observe(tableBody, {
       attributes: true,
+      attributeFilter: ['class', 'style'],
       characterData: true,
       childList: true,
       subtree: true,
diff --git a/examples/react/realtime-trading/src/index.css b/examples/react/realtime-trading/src/index.css
index 20264402de..69cba52fa7 100644
--- a/examples/react/realtime-trading/src/index.css
+++ b/examples/react/realtime-trading/src/index.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/examples/react/realtime-trading/src/shell/TradingShell.tsx b/examples/react/realtime-trading/src/shell/TradingShell.tsx
index e554f6c7cb..5a66c3961e 100644
--- a/examples/react/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/react/realtime-trading/src/shell/TradingShell.tsx
@@ -52,7 +52,6 @@ export function TradingShell(props: { children: ReactNode }) {
       </div>
 
       <section className="market-panel" aria-label="Live synthetic quotes">
-        <MetricsStrip />
         {props.children}
       </section>
       <MarketStatusbar />
@@ -123,7 +122,7 @@ function MarketStatusbar() {
         MESSAGE SAMPLES <strong>{formatInteger(lastBatchSize)}</strong>
       </span>
       <span>
-        ROW UPDATES <strong>{formatInteger(lastUpdateCount)}</strong>
+        CHANGED ROWS <strong>{formatInteger(lastUpdateCount)}</strong>
       </span>
       <span>
         HOSTS <strong>{formatInteger(mountedCells)}</strong>
@@ -183,6 +182,8 @@ function Configurator() {
         <small>RUN PARAMETERS</small>
       </header>
 
+      <LiveHealth />
+
       <section className="config-section" aria-labelledby="feed-settings">
         <h2 id="feed-settings">FEED</h2>
         <button
@@ -362,7 +363,7 @@ function Configurator() {
   )
 }
 
-function MetricsStrip() {
+function LiveHealth() {
   const { metrics, longAnimationFramesSupported } = useTradingShellState(
     (state) => ({
       metrics: state.metrics,
@@ -371,51 +372,21 @@ function MetricsStrip() {
     { compare: shallow },
   )
   return (
-    <section className="metrics-strip" aria-label="Live performance metrics">
-      <article>
-        <span>WORKER SAMPLES</span>
-        <strong data-testid="actual-rate">
-          {formatRate(metrics.actualTicksPerSecond)}
-        </strong>
-        <small>generated samples/s</small>
-      </article>
-      <article>
-        <span>ROW UPDATES</span>
-        <strong data-testid="row-update-rate">
-          {formatRate(metrics.rowUpdatesPerSecond)}
-        </strong>
-        <small>unique rows applied/s</small>
-      </article>
-      <article>
-        <span>MESSAGES</span>
-        <strong data-testid="message-rate">
-          {metrics.workerMessagesPerSecond.toFixed(1)}
-        </strong>
-        <small>worker messages/s</small>
-      </article>
+    <section className="metrics-strip" aria-labelledby="live-health">
+      <h2 id="live-health">LIVE HEALTH</h2>
       <article>
-        <span>STATE APPLIES</span>
-        <strong data-testid="state-apply-rate">
-          {metrics.stateApplicationsPerSecond.toFixed(1)}
+        <span>FRAME RATE (EST.)</span>
+        <strong data-testid="frame-rate">
+          {metrics.estimatedFrameRate.toFixed(1)}
         </strong>
-        <small>quote snapshots/s</small>
+        <small>rAF callbacks/s · rolling 1 s</small>
       </article>
       <article>
-        <span>TABLE COMMITS</span>
-        <strong data-testid="table-render-rate">
-          {metrics.tableRendersPerSecond.toFixed(1)}
+        <span>AVG COMMIT</span>
+        <strong data-testid="average-commit-latency">
+          {formatMs(metrics.averageCommitLatencyMs)}
         </strong>
-        <small>completed renders/s</small>
-      </article>
-      <article>
-        <span>AVG RENDER</span>
-        <strong>{formatMs(metrics.averageRenderMs)}</strong>
-        <small>mutation → render</small>
-      </article>
-      <article>
-        <span>P95 RENDER</span>
-        <strong>{formatMs(metrics.p95RenderMs)}</strong>
-        <small>max {formatMs(metrics.maxRenderMs)}</small>
+        <small>snapshot → DOM · rolling 3 s</small>
       </article>
       <article>
         <span>LONG FRAMES</span>
@@ -427,7 +398,10 @@ function MetricsStrip() {
             >
               {metrics.longAnimationFrames}
             </strong>
-            <small>worst {formatMs(metrics.worstLongAnimationFrameMs)}</small>
+            <small>
+              since reset · worst{' '}
+              {formatMs(metrics.worstLongAnimationFrameMs)}
+            </small>
           </>
         ) : (
           <>
@@ -436,6 +410,16 @@ function MetricsStrip() {
           </>
         )}
       </article>
+      <article>
+        <span>THROUGHPUT</span>
+        <strong data-testid="throughput-rate">
+          {formatRate(metrics.rowUpdatesPerSecond)} rows/s
+        </strong>
+        <small>
+          {metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s · rows
+          deduplicated per snapshot
+        </small>
+      </article>
     </section>
   )
 }
@@ -464,6 +448,43 @@ function Diagnostics() {
     >
       <h2 id="diagnostics">DIAGNOSTICS</h2>
       <dl>
+        <div>
+          <dt>Worker samples / s</dt>
+          <dd data-testid="actual-rate">
+            {formatRate(metrics.actualTicksPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Changed rows / s</dt>
+          <dd data-testid="row-update-rate">
+            {formatRate(metrics.rowUpdatesPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages / s</dt>
+          <dd data-testid="message-rate">
+            {metrics.workerMessagesPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>State applies / s</dt>
+          <dd data-testid="state-apply-rate">
+            {metrics.stateApplicationsPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>Table DOM commits / s</dt>
+          <dd data-testid="table-render-rate">
+            {metrics.tableCommitsPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>Commit latency p95 / max</dt>
+          <dd>
+            {formatMs(metrics.p95CommitLatencyMs)} /{' '}
+            {formatMs(metrics.maxCommitLatencyMs)}
+          </dd>
+        </div>
         <div>
           <dt>Mounted cells</dt>
           <dd>{formatInteger(mountedCells)}</dd>
@@ -504,7 +525,7 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>DOM mutation records / s</dt>
+          <dt>Observed MutationRecords / s</dt>
           <dd data-testid="dom-mutation-rate">
             {formatRate(metrics.domMutationsPerSecond)}
           </dd>
@@ -572,8 +593,8 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>Renders &gt; 16.7 ms</dt>
-          <dd>{metrics.slowRenders}</dd>
+          <dt>Commits &gt; 16.7 ms since reset</dt>
+          <dd>{metrics.slowCommits}</dd>
         </div>
         <div>
           <dt>Long animation frames</dt>
@@ -584,7 +605,9 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>JS heap</dt>
+          <dt title="Current used JS heap; Chrome-only and sensitive to garbage collection timing">
+            JS heap (GC-sensitive)
+          </dt>
           <dd>
             {metrics.heapMb === null
               ? 'N/A'
diff --git a/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx b/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
index c82558d6ef..2ccc8a01f8 100644
--- a/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
+++ b/examples/react/realtime-trading/src/table/table-config/trading-table-config.tsx
@@ -216,17 +216,19 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
   )
   rowModelDiagnostics.lastRowCount = rows.length
 
-  try {
-    performance.measure('tanstack-row-model', {
-      start,
-      end,
-      detail: { rowCount: rows.length },
-    })
-    if (rowModelDiagnostics.calls % 1_000 === 0) {
-      performance.clearMeasures('tanstack-row-model')
+  if (rowModelDiagnostics.calls % 1_000 === 0) {
+    performance.clearMeasures('tanstack-row-model')
+  }
+  if ((rowModelDiagnostics.calls - 1) % 20 === 0) {
+    try {
+      performance.measure('tanstack-row-model', {
+        start,
+        end,
+        detail: { rowCount: rows.length },
+      })
+    } catch {
+      // User Timing Level 3 detail is not implemented in every browser.
     }
-  } catch {
-    // User Timing Level 3 detail is not implemented in every browser.
   }
 
   return rows
diff --git a/examples/solid/realtime-trading/README.md b/examples/solid/realtime-trading/README.md
index 9c957073cb..a046d2d8bb 100644
--- a/examples/solid/realtime-trading/README.md
+++ b/examples/solid/realtime-trading/README.md
@@ -31,8 +31,8 @@ absolute timings.
 | `src/feed/worker/`        | Protocol, deterministic market engine, and module worker.                                          |
 | `src/benchmark/`          | Benchmark monitor and the controller that exposes benchmark signals/actions.                       |
 | `src/shell/`              | Contexts, viewport shell, header, metrics, configurator, diagnostics, and selected instrument.     |
-| `src/table/table-config/` | Grouped columns and custom quote components.                                                       |
-| `src/table/`              | Solid Table instance, interactions, column layout, and Solid Virtual integration.                  |
+| `src/table/table-config/` | Declarative columns, named cell renderers, component props, and quote value calculations.          |
+| `src/table/`              | Table model primitive, view components, interactions, layout, and virtualization.                    |
 | `src/App.tsx`             | Creates feed/benchmark controllers and composes their providers with the table.                    |
 
 `createMarketFeedController` and `createTradingBenchmarkController` are
@@ -71,15 +71,47 @@ Book, Session, and Chart. It supports sorting/filtering, on-change resizing,
 double-click reset, drag ordering, row selection, drag cell ranges, keyboard
 navigation, and component-based Price/Move/Percent/Sparkline cells.
 
-The table reads the feed's quote accessor directly. Stable instrument IDs back
-`getRowId`. Solid's fine-grained accessors and `<For>` keep updates local to the
-expressions/components that consume changed values. The renderer-mode stress
-control can switch the Move component type by direction, intentionally testing
-mount/unmount churn.
-
-One `TradingGridPointerController` handles delegated body events and resolves
-cells from `composedPath()` plus data attributes. No pointer listener is added
-per cell, and hover remains CSS-only. Column dimensions live in CSS variables
+The table reads the feed's quote accessor directly from context; `App` does not
+subscribe to or forward quote snapshots. `TradingTable` is only the composition
+root for `createTradingTableModel`, row virtualization, layout and commit
+effects, plus `TradingTableHeader`, `TradingTableBody`, and
+`TradingTableFooter`. Stable instrument IDs back `getRowId`. Full-DOM rows use
+Solid's position-owned `<Index>` scopes and a dedicated `TradingTableRow`
+boundary. Each position receives the current TanStack `Row`. One row-level memo
+keeps its render cells while the row ID, column configuration, and cell order
+are unchanged. A small Solid context exposes an `Accessor<MarketQuote>` for that
+row, so named renderers and their component props update without replacing the
+mounted `FlexRender`. It is a normal accessor, not a proxy or mutable registry.
+
+Row and cell DOM attributes are written directly in JSX. Every cell slot also
+receives the current row-model cell at the same visible-column index; selection
+edges, focus, selected state, and roving tabindex are computed from that current
+cell. This avoids stale selection geometry without `getAllCellsByColumnId()` or
+per-cell row/column ID memos. Grid-level pointer interaction remains delegated
+to the table body.
+
+`<For>` is intentionally not used for the immutable TanStack row model. Solid
+keys `<For>` by item identity, while TanStack creates new `Row` objects after a
+new data array. Stable `getRowId` values preserve table state, but do not change
+Solid's identity comparison; `<For>` would therefore treat every new row object
+as a replacement. `<Index>` keeps the DOM/component slot mounted while replacing
+the current `Row` and selection `Cell` props at that position. The separate
+render-cell memo changes only for a new row ID, column definition/order, or row
+moving into the slot, so quote snapshots update component props without
+remounting `FlexRender`. Sorting updates the affected positions as expected.
+
+The column configuration is memoized by renderer mode. Changing Stable to A/B
+therefore refreshes the column definition once, while normal quote batches do
+not rebuild columns. `trading-columns.tsx` contains only the declarative schema;
+named renderers, component prop interfaces, and market calculations live in
+focused colocated modules. In A/B mode the Move renderer selects the direction
+component when that row changes, intentionally testing mount/unmount churn.
+
+`createTradingGridSelectionHandlers` creates one delegated body handler object
+and resolves cells from `composedPath()` plus identity data attributes. No
+pointer listener is added per cell, and hover remains CSS-only. Header drag,
+grid attributes, and body attributes use focused reusable prop factories; the
+hot row/cell path stays as direct JSX. Column dimensions live in CSS variables
 and update only for column sizing/order; a `ResizeObserver` performs the initial
 fit until the user resizes manually.
 
@@ -99,8 +131,9 @@ some browser rendering but does not avoid creating every Solid row/cell.
 
 - market work and coalescing happen before crossing to the main thread;
 - immutable snapshots preserve unchanged row/history references;
-- fine-grained signals avoid broad shell invalidation;
-- stable IDs preserve keyed row identity through updates and sorting;
+- fine-grained signals avoid broad shell or root invalidation;
+- position-owned rows/cells preserve DOM slots and render-cell identity while
+  an accessor updates the current immutable quote;
 - delegated grid interaction avoids per-cell handlers;
 - CSS variables isolate width changes from quote updates;
 - dynamic component churn and sparkline frequency are explicit controls;
@@ -113,15 +146,43 @@ the data accessor changes.
 
 ## Diagnostics and interpretation
 
-The monitor records generated samples, received messages, unique row updates,
-state applies, completed renders, average mutation-to-render latency, long
-animation frames, mounted cells, component lifecycle/execution rates, callbacks
-by column, DOM mutations, core row-model timing, and optional heap information.
-
-Renderer callbacks are not equivalent to DOM mutations. A rising heap during
+The sidebar starts with four cross-framework health signals: estimated rAF
+callbacks/s over one second, average snapshot-to-DOM-commit latency over three
+seconds, long animation frames accumulated since reset, and throughput as
+changed rows/s plus applied snapshots/s. “Changed rows” is deduplicated within
+each snapshot; the same instrument can count again in a later snapshot. The
+advanced diagnostics retain worker samples/messages, DOM commits, a rolling
+10-second p95/max commit latency, slow commits, lifecycle/execution rates, DOM
+mutation records, and optional heap information.
+
+The frame figure is deliberately labeled estimated: it counts this page's rAF
+callbacks, is capped by the display refresh rate, and falls when a tab is
+throttled. It is a portable responsiveness signal, not compositor-presented
+FPS.
+
+Solid applies reactive DOM writes synchronously, but the quote-tracking effect
+queues one coalesced microtask before closing a pending commit measurement. This
+prevents an effect scheduled early in the reactive graph from reporting a
+commit before child bindings have settled. User Timing timeline entries are
+sampled at one in 20 commits; the in-memory latency calculation still records
+every commit.
+
+Renderer callbacks are not equivalent to DOM mutations. With this example's
+immutable outer array, TanStack can produce new row/cell instances, but the
+row-ID equality boundary keeps `FlexRender` stable across quote snapshots.
+Column mode/order changes, sorting, and virtual-slot reuse replace the relevant
+render cell. A/B mode additionally replaces the direction component when the
+sign changes. A rising heap during
 component swapping is not proof of a leak without stable post-GC retention.
-Use a production build, identical controls, Chrome Performance, and Solid
-DevTools for meaningful comparisons.
+The heap value is Chromium-only, represents the current GC-sensitive JS heap,
+and is not a retained-size measurement. The DOM rate counts `MutationRecord`
+objects, not individual browser operations; records may be coalesced. Its
+observer watches text/child changes and only `class`/`style` attributes to
+reduce, but not eliminate, observer overhead. Non-feed text/child changes and
+interaction-driven `class`/`style` changes (including virtual scrolling) are
+included, so do not interpret the rate as feed-only work. Use a production
+build, identical controls, Chrome Performance, and Solid DevTools for meaningful
+comparisons.
 
 ## Standalone policy
 
diff --git a/examples/solid/realtime-trading/src/App.tsx b/examples/solid/realtime-trading/src/App.tsx
index c7bae11144..0b2f4b5dca 100644
--- a/examples/solid/realtime-trading/src/App.tsx
+++ b/examples/solid/realtime-trading/src/App.tsx
@@ -3,8 +3,6 @@ import { createMarketFeedController } from './feed/market-feed-controller'
 import { TradingShell } from './shell/TradingShell'
 import {
   TradingShellProvider,
-  useMarketFeedController,
-  useTradingShellController,
 } from './shell/trading-shell-context'
 import { TradingTable } from './table/trading-table'
 
@@ -14,23 +12,8 @@ export default function App() {
   return (
     <TradingShellProvider controller={controller}>
       <TradingShell>
-        <TradingTableOutlet />
+        <TradingTable />
       </TradingShell>
     </TradingShellProvider>
   )
 }
-
-function TradingTableOutlet() {
-  const { state, actions } = useTradingShellController()
-  const feed = useMarketFeedController()
-  return (
-    <TradingTable
-      quotes={feed.state.quotes()}
-      rendererMode={state.rendererMode()}
-      selectedSymbol={state.selectedSymbol()}
-      virtualScrollMode={state.virtualScrollMode()}
-      onSelectSymbol={actions.selectSymbol}
-      onRenderedRowCount={actions.setRenderedRowCount}
-    />
-  )
-}
diff --git a/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
index 6bcb301e6b..2227c51803 100644
--- a/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -8,6 +8,15 @@ export interface NamedInvocationRate {
   callsPerSecond: number
 }
 
+interface TimedLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const averageLatencyWindowMs = 3_000
+const percentileLatencyWindowMs = 10_000
+const frameRateWindowMs = 1_000
+
 export interface FeedMetrics {
   actualTicksPerSecond: number
   rowUpdatesPerSecond: number
@@ -16,12 +25,12 @@ export interface FeedMetrics {
   supersededUpdatesPerSecond: number
   totalTicks: number
   rafCallbacksPerSecond: number
-  tableRendersPerSecond: number
+  tableCommitsPerSecond: number
   lastBatchSize: number
-  averageRenderMs: number
-  p95RenderMs: number
-  maxRenderMs: number
-  slowRenders: number
+  averageCommitLatencyMs: number
+  p95CommitLatencyMs: number
+  maxCommitLatencyMs: number
+  slowCommits: number
   longAnimationFrames: number
   worstLongAnimationFrameMs: number
   heapMb: number | null
@@ -44,12 +53,12 @@ export const initialMetrics: FeedMetrics = {
   supersededUpdatesPerSecond: 0,
   totalTicks: 0,
   rafCallbacksPerSecond: 0,
-  tableRendersPerSecond: 0,
+  tableCommitsPerSecond: 0,
   lastBatchSize: 0,
-  averageRenderMs: 0,
-  p95RenderMs: 0,
-  maxRenderMs: 0,
-  slowRenders: 0,
+  averageCommitLatencyMs: 0,
+  p95CommitLatencyMs: 0,
+  maxCommitLatencyMs: 0,
+  slowCommits: 0,
   longAnimationFrames: 0,
   worstLongAnimationFrameMs: 0,
   heapMb: null,
@@ -64,11 +73,29 @@ export const initialMetrics: FeedMetrics = {
   domMutationsPerSecond: 0,
 }
 
+const userTiming = { entryCount: 0, measureCalls: 0 }
+
+function recordCommitMeasure(start: number, end: number): void {
+  userTiming.measureCalls++
+  if (userTiming.measureCalls % 20 !== 0) return
+  try {
+    performance.measure('market-update-to-dom-commit', { start, end })
+    userTiming.entryCount++
+    if (userTiming.entryCount % 1_000 === 0) {
+      performance.clearMeasures('market-update-to-dom-commit')
+    }
+  } catch {
+    // User Timing Level 3 options are not implemented in every browser.
+  }
+}
+
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
-    pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    sessionStartedAt: performance.now(),
+    pendingMutationStartedAt: null as number | null,
+    commitLatencySamples: [] as Array<TimedLatencySample>,
+    slowCommitCount: 0,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -78,8 +105,9 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
-    tableRendersInSample: 0,
+    frameTrackingStartedAt: performance.now(),
+    frameTimestamps: [] as Array<number>,
+    tableCommitsInSample: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -93,18 +121,20 @@ export class BenchmarkMonitor {
     domMutationsInSample: 0,
   }
 
-  markRenderPending(): void {
-    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  markCommitPending(): void {
+    this.#runtime.pendingMutationStartedAt ??= performance.now()
   }
 
-  recordCompletedRender(): void {
+  recordDomCommit(): void {
     const runtime = this.#runtime
-    if (runtime.pendingRenderStartedAt !== null) {
-      runtime.renderSamples.push(
-        performance.now() - runtime.pendingRenderStartedAt,
-      )
-      runtime.pendingRenderStartedAt = null
-      runtime.tableRendersInSample++
+    if (runtime.pendingMutationStartedAt !== null) {
+      const commitEndedAt = performance.now()
+      const duration = commitEndedAt - runtime.pendingMutationStartedAt
+      runtime.commitLatencySamples.push({ recordedAt: commitEndedAt, duration })
+      if (duration > 16.7) runtime.slowCommitCount++
+      recordCommitMeasure(runtime.pendingMutationStartedAt, commitEndedAt)
+      runtime.pendingMutationStartedAt = null
+      runtime.tableCommitsInSample++
     }
   }
 
@@ -128,12 +158,15 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    const timestamps = this.#runtime.frameTimestamps
+    timestamps.push(now)
+    pruneFrameTimestamps(timestamps, now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -172,17 +205,25 @@ export class BenchmarkMonitor {
       runtime.previousComponentRenderCallsByName,
       sampleDuration,
     )
-    const sortedRenderSamples = [...runtime.renderSamples].sort(
+    pruneLatencySamples(runtime.commitLatencySamples, now)
+    pruneFrameTimestamps(runtime.frameTimestamps, now)
+    const averageCommitLatencySamples = runtime.commitLatencySamples
+      .filter((sample) => sample.recordedAt >= now - averageLatencyWindowMs)
+      .map((sample) => sample.duration)
+    const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
+      (sample) => sample.duration,
+    )
+    const sortedCommitLatencySamples = [...percentileCommitLatencySamples].sort(
       (left, right) => left - right,
     )
-    const averageRenderMs =
-      runtime.renderSamples.length === 0
+    const averageCommitLatencyMs =
+      averageCommitLatencySamples.length === 0
         ? 0
-        : runtime.renderSamples.reduce((sum, value) => sum + value, 0) /
-          runtime.renderSamples.length
+        : averageCommitLatencySamples.reduce((sum, value) => sum + value, 0) /
+          averageCommitLatencySamples.length
     const p95Index = Math.max(
       0,
-      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+      Math.ceil(sortedCommitLatencySamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
       actualTicksPerSecond:
@@ -199,18 +240,20 @@ export class BenchmarkMonitor {
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
+        calculateFrameRate(
+          runtime.frameTimestamps,
+          runtime.frameTrackingStartedAt,
+          now,
+        ),
+      tableCommitsPerSecond:
         sampleDuration === 0
           ? 0
-          : (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
-      tableRendersPerSecond:
-        sampleDuration === 0
-          ? 0
-          : (runtime.tableRendersInSample / sampleDuration) * 1_000,
+          : (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
-      averageRenderMs,
-      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
-      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: runtime.renderSamples.filter((value) => value > 16.7).length,
+      averageCommitLatencyMs,
+      p95CommitLatencyMs: sortedCommitLatencySamples[p95Index] ?? 0,
+      maxCommitLatencyMs: sortedCommitLatencySamples.at(-1) ?? 0,
+      slowCommits: runtime.slowCommitCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -243,17 +286,17 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.tableCommitsInSample = 0
     return metrics
   }
 
   reset(): void {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
-    runtime.pendingRenderStartedAt = null
-    runtime.renderSamples = []
+    runtime.sessionStartedAt = runtime.sampleStartedAt
+    runtime.pendingMutationStartedAt = null
+    runtime.commitLatencySamples = []
+    runtime.slowCommitCount = 0
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -263,8 +306,9 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
+    runtime.tableCommitsInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
@@ -305,3 +349,36 @@ function calculateInvocationRates(
         : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
   }))
 }
+
+function pruneLatencySamples(
+  samples: Array<TimedLatencySample>,
+  now: number,
+): void {
+  const cutoff = now - percentileLatencyWindowMs
+  const firstRetainedIndex = samples.findIndex(
+    (sample) => sample.recordedAt >= cutoff,
+  )
+  if (firstRetainedIndex > 0) samples.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) samples.length = 0
+}
+
+function pruneFrameTimestamps(timestamps: Array<number>, now: number): void {
+  const cutoff = now - frameRateWindowMs
+  const firstRetainedIndex = timestamps.findIndex(
+    (timestamp) => timestamp >= cutoff,
+  )
+  if (firstRetainedIndex > 0) timestamps.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) timestamps.length = 0
+}
+
+function calculateFrameRate(
+  timestamps: ReadonlyArray<number>,
+  trackingStartedAt: number,
+  now: number,
+): number {
+  const observedWindowMs = Math.min(
+    frameRateWindowMs,
+    Math.max(1, now - trackingStartedAt),
+  )
+  return (timestamps.length / observedWindowMs) * 1_000
+}
diff --git a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 12b3b4c40b..32a8664822 100644
--- a/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/solid/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -1,5 +1,5 @@
 import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'
-import { TRADING_COLUMN_COUNT } from '../table/trading-table'
+import { TRADING_COLUMN_COUNT } from '../table/table-config/trading-columns'
 import {
   FORCED_VIRTUALIZATION_ROW_COUNT,
   resolveVirtualScrollMode,
@@ -10,7 +10,7 @@ import {
   longAnimationFramesSupported,
 } from './benchmark-monitor'
 import type { MarketFeedController } from '../feed/market-feed-controller'
-import type { RendererMode } from '../table/trading-table'
+import type { RendererMode } from '../table/table-config/trading-columns'
 import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
 export function createTradingBenchmarkController(feed: MarketFeedController) {
@@ -29,10 +29,10 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
 
   const stopObservingFeed = feed.observe({
     messageReceived: () => monitor.recordWorkerMessage(),
-    mutationStarted: () => monitor.markRenderPending(),
+    mutationStarted: () => monitor.markCommitPending(),
     batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
       monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
-    renderCommitted: () => monitor.recordCompletedRender(),
+    renderCommitted: () => monitor.recordDomCommit(),
   })
 
   const observeTableMutations = (): void => {
@@ -47,6 +47,7 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
     })
     runtime.mutationObserver.observe(tableBody, {
       attributes: true,
+      attributeFilter: ['class', 'style'],
       characterData: true,
       childList: true,
       subtree: true,
@@ -54,7 +55,7 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
   }
 
   const benchmarkFrame = (now: number): void => {
-    monitor.recordAnimationFrame()
+    monitor.recordAnimationFrame(now)
     if (monitor.shouldPublish(now)) {
       setMetrics(monitor.publish(now))
     }
@@ -67,13 +68,12 @@ export function createTradingBenchmarkController(feed: MarketFeedController) {
       runtime.longAnimationFrameObserver = new PerformanceObserver(
         (entries) => {
           for (const entry of entries.getEntries()) {
-            monitor.recordLongAnimationFrame(entry.duration)
+            monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
           }
         },
       )
       runtime.longAnimationFrameObserver.observe({
         type: 'long-animation-frame',
-        buffered: true,
       })
     }
     runtime.animationFrameId = requestAnimationFrame(benchmarkFrame)
diff --git a/examples/solid/realtime-trading/src/index.css b/examples/solid/realtime-trading/src/index.css
index 20264402de..69cba52fa7 100644
--- a/examples/solid/realtime-trading/src/index.css
+++ b/examples/solid/realtime-trading/src/index.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/examples/solid/realtime-trading/src/shell/TradingShell.tsx b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
index 711122860a..8fdf1b60a9 100644
--- a/examples/solid/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/solid/realtime-trading/src/shell/TradingShell.tsx
@@ -45,7 +45,6 @@ export function TradingShell(props: { children: JSX.Element }) {
       </div>
 
       <section class="market-panel" aria-label="Live synthetic quotes">
-        <MetricsStrip />
         {props.children}
       </section>
       <MarketStatusbar />
@@ -112,7 +111,7 @@ function MarketStatusbar() {
         <strong>{formatInteger(metrics().lastBatchSize)}</strong>
       </span>
       <span>
-        ROW UPDATES <strong>{formatInteger(metrics().lastUpdateCount)}</strong>
+        CHANGED ROWS <strong>{formatInteger(metrics().lastUpdateCount)}</strong>
       </span>
       <span>
         HOSTS <strong>{formatInteger(mountedCells())}</strong>
@@ -162,6 +161,8 @@ function Configurator() {
         <small>RUN PARAMETERS</small>
       </header>
 
+      <MetricsStrip />
+
       <section class="config-section" aria-labelledby="feed-settings">
         <h2 id="feed-settings">FEED</h2>
         <button
@@ -338,51 +339,21 @@ function Configurator() {
 function MetricsStrip() {
   const { metrics } = useTradingShellController().state
   return (
-    <section class="metrics-strip" aria-label="Live performance metrics">
-      <article>
-        <span>WORKER SAMPLES</span>
-        <strong data-testid="actual-rate">
-          {formatRate(metrics().actualTicksPerSecond)}
-        </strong>
-        <small>generated samples/s</small>
-      </article>
-      <article>
-        <span>ROW UPDATES</span>
-        <strong data-testid="row-update-rate">
-          {formatRate(metrics().rowUpdatesPerSecond)}
-        </strong>
-        <small>unique rows applied/s</small>
-      </article>
-      <article>
-        <span>MESSAGES</span>
-        <strong data-testid="message-rate">
-          {metrics().workerMessagesPerSecond.toFixed(1)}
-        </strong>
-        <small>worker messages/s</small>
-      </article>
+    <section class="metrics-strip" aria-labelledby="live-health">
+      <h2 id="live-health">LIVE HEALTH</h2>
       <article>
-        <span>STATE APPLIES</span>
-        <strong data-testid="state-apply-rate">
-          {metrics().stateApplicationsPerSecond.toFixed(1)}
+        <span>FRAME RATE (EST.)</span>
+        <strong data-testid="frame-rate">
+          {metrics().rafCallbacksPerSecond.toFixed(1)}
         </strong>
-        <small>quote snapshots/s</small>
+        <small>rAF callbacks/s · rolling 1 s</small>
       </article>
       <article>
-        <span>TABLE COMMITS</span>
-        <strong data-testid="table-render-rate">
-          {metrics().tableRendersPerSecond.toFixed(1)}
+        <span>AVG COMMIT</span>
+        <strong data-testid="average-commit-latency">
+          {formatMs(metrics().averageCommitLatencyMs)}
         </strong>
-        <small>completed renders/s</small>
-      </article>
-      <article>
-        <span>AVG RENDER</span>
-        <strong>{formatMs(metrics().averageRenderMs)}</strong>
-        <small>mutation → render</small>
-      </article>
-      <article>
-        <span>P95 RENDER</span>
-        <strong>{formatMs(metrics().p95RenderMs)}</strong>
-        <small>max {formatMs(metrics().maxRenderMs)}</small>
+        <small>snapshot → DOM · rolling 3 s</small>
       </article>
       <article>
         <span>LONG FRAMES</span>
@@ -391,7 +362,7 @@ function MetricsStrip() {
           fallback={
             <>
               <strong data-testid="long-frame-count">N/A</strong>
-              <small>unsupported</small>
+              <small>unsupported by this browser</small>
             </>
           }
         >
@@ -403,9 +374,21 @@ function MetricsStrip() {
           >
             {metrics().longAnimationFrames}
           </strong>
-          <small>worst {formatMs(metrics().worstLongAnimationFrameMs)}</small>
+          <small>
+            since reset · worst {formatMs(metrics().worstLongAnimationFrameMs)}
+          </small>
         </Show>
       </article>
+      <article>
+        <span>THROUGHPUT</span>
+        <strong data-testid="throughput-rate">
+          {formatRate(metrics().rowUpdatesPerSecond)} rows/s
+        </strong>
+        <small>
+          {metrics().stateApplicationsPerSecond.toFixed(1)}
+          snapshots/s · rows deduplicated per snapshot
+        </small>
+      </article>
     </section>
   )
 }
@@ -417,6 +400,43 @@ function Diagnostics() {
     <section class="config-section diagnostics" aria-labelledby="diagnostics">
       <h2 id="diagnostics">DIAGNOSTICS</h2>
       <dl>
+        <div>
+          <dt>Worker samples / s</dt>
+          <dd data-testid="actual-rate">
+            {formatRate(metrics().actualTicksPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Worker messages / s</dt>
+          <dd data-testid="message-rate">
+            {metrics().workerMessagesPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>Changed rows / s</dt>
+          <dd data-testid="row-update-rate">
+            {formatRate(metrics().rowUpdatesPerSecond)}
+          </dd>
+        </div>
+        <div>
+          <dt>Snapshots applied / s</dt>
+          <dd data-testid="state-apply-rate">
+            {metrics().stateApplicationsPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>DOM commits / s</dt>
+          <dd data-testid="table-render-rate">
+            {metrics().tableCommitsPerSecond.toFixed(1)}
+          </dd>
+        </div>
+        <div>
+          <dt>P95 / max commit latency</dt>
+          <dd>
+            {formatMs(metrics().p95CommitLatencyMs)} /{' '}
+            {formatMs(metrics().maxCommitLatencyMs)}
+          </dd>
+        </div>
         <div>
           <dt>Mounted cells</dt>
           <dd>{formatInteger(mountedCells())}</dd>
@@ -457,7 +477,7 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>DOM mutation records / s</dt>
+          <dt>Observed MutationRecords / s</dt>
           <dd data-testid="dom-mutation-rate">
             {formatRate(metrics().domMutationsPerSecond)}
           </dd>
@@ -482,8 +502,8 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>Renders &gt; 16.7 ms</dt>
-          <dd>{metrics().slowRenders}</dd>
+          <dt>Commits &gt; 16.7 ms</dt>
+          <dd>{metrics().slowCommits}</dd>
         </div>
         <div>
           <dt>Long animation frames</dt>
@@ -494,7 +514,7 @@ function Diagnostics() {
           </dd>
         </div>
         <div>
-          <dt>JS heap</dt>
+          <dt>JS heap (GC-sensitive)</dt>
           <dd>
             {metrics().heapMb === null
               ? 'N/A'
diff --git a/examples/solid/realtime-trading/src/table/create-column-drag.ts b/examples/solid/realtime-trading/src/table/create-column-drag.ts
new file mode 100644
index 0000000000..2acf3b96ba
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/create-column-drag.ts
@@ -0,0 +1,66 @@
+import { createSignal } from 'solid-js'
+import { reorderColumnIds } from './table-interactions'
+import type { JSX } from 'solid-js'
+import type { TradingTableInstance } from './trading-table-features'
+
+export function createColumnDrag(table: TradingTableInstance) {
+  const [sourceColumnId, setSourceColumnId] = createSignal<string | null>(null)
+  const [targetColumnId, setTargetColumnId] = createSignal<string | null>(null)
+
+  const clear = (): void => {
+    setSourceColumnId(null)
+    setTargetColumnId(null)
+  }
+
+  const createDropZoneProps = (
+    columnId: string,
+  ): Pick<JSX.IntrinsicElements['div'], 'onDragOver' | 'onDrop'> => ({
+    onDragOver(event) {
+      event.preventDefault()
+      setTargetColumnId(sourceColumnId() === columnId ? null : columnId)
+    },
+    onDrop(event) {
+      event.preventDefault()
+      const sourceId =
+        event.dataTransfer?.getData('text/plain') || sourceColumnId()
+      if (sourceId) {
+        table.setColumnOrder(
+          reorderColumnIds(
+            table.getVisibleLeafColumns().map((column) => column.id),
+            sourceId,
+            columnId,
+          ),
+        )
+      }
+      clear()
+    },
+  })
+
+  const createHandleProps = (
+    columnId: string,
+  ): Pick<
+    JSX.IntrinsicElements['button'],
+    'draggable' | 'aria-label' | 'onDragStart' | 'onDragEnd'
+  > => ({
+    draggable: true,
+    'aria-label': `Move ${columnId} column`,
+    onDragStart(event) {
+      setSourceColumnId(columnId)
+      const dataTransfer = event.dataTransfer
+      if (!dataTransfer) return
+
+      dataTransfer.effectAllowed = 'move'
+      dataTransfer.setData('text/plain', columnId)
+    },
+    onDragEnd: clear,
+  })
+
+  return {
+    createDropZoneProps,
+    createHandleProps,
+    isDragging: (columnId: string) => sourceColumnId() === columnId,
+    isDropTarget: (columnId: string) => targetColumnId() === columnId,
+  }
+}
+
+export type ColumnDrag = ReturnType<typeof createColumnDrag>
diff --git a/examples/solid/realtime-trading/src/table/create-trading-table-model.ts b/examples/solid/realtime-trading/src/table/create-trading-table-model.ts
new file mode 100644
index 0000000000..0c890ae800
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/create-trading-table-model.ts
@@ -0,0 +1,60 @@
+import { createTable } from '@tanstack/solid-table'
+import { createMemo } from 'solid-js'
+import { createTradingColumns } from './table-config/trading-columns'
+import { tradingTableFeatures } from './trading-table-features'
+import type { Accessor } from 'solid-js'
+import type { MarketQuote } from '../feed/market-data'
+import type { RendererMode } from './table-config/trading-columns'
+
+export interface CreateTradingTableModelOptions {
+  quotes: Accessor<Array<MarketQuote>>
+  rendererMode: Accessor<RendererMode>
+  onSelectSymbol: (symbol: string) => void
+}
+
+/**
+ * Owns the TanStack Table model and the computations derived from table atoms.
+ * Consumers can subscribe to rows, columns, or layout independently.
+ */
+export function createTradingTableModel(
+  options: CreateTradingTableModelOptions,
+) {
+  const columns = createMemo(() =>
+    createTradingColumns({
+      rendererMode: options.rendererMode(),
+      onSelectSymbol: options.onSelectSymbol,
+    }),
+  )
+  const table = createTable({
+    key: 'solid-realtime-trading',
+    features: tradingTableFeatures,
+    columnResizeMode: 'onChange',
+    defaultColumn: { minSize: 56, maxSize: 800 },
+    autoResetCellSelection: false,
+    get columns() {
+      return columns()
+    },
+    get data() {
+      return options.quotes()
+    },
+    getRowId: (row) => row.id,
+  })
+  const rows = createMemo(() => table.getRowModel().rows)
+  const tableStyle = createMemo(() => {
+    void table.atoms.columnSizing.get()
+    void table.atoms.columnOrder.get()
+
+    const style: Record<string, string> = {
+      width: `${table.getTotalSize()}px`,
+    }
+    for (const header of table.getFlatHeaders()) {
+      style[`--header-${header.id}-size`] = `${header.getSize()}`
+      style[`--col-${header.column.id}-size`] = `${header.column.getSize()}`
+    }
+    return style
+  })
+
+  return { columns, rows, table, tableStyle }
+}
+
+export type TradingTableModel = ReturnType<typeof createTradingTableModel>
diff --git a/examples/solid/realtime-trading/src/table/jsx-attributes.ts b/examples/solid/realtime-trading/src/table/jsx-attributes.ts
new file mode 100644
index 0000000000..b67d9c7ad2
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/jsx-attributes.ts
@@ -0,0 +1,4 @@
+/** Solid's intrinsic element types intentionally omit open-ended data-* keys. */
+export type WithDataAttributes<Attributes> = Attributes & {
+  [attribute: `data-${string}`]: string | number | boolean | undefined
+}
diff --git a/examples/solid/realtime-trading/src/table/table-config/market-quote-values.ts b/examples/solid/realtime-trading/src/table/table-config/market-quote-values.ts
new file mode 100644
index 0000000000..4e2b5a21b1
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/table-config/market-quote-values.ts
@@ -0,0 +1,11 @@
+import type { MarketQuote } from '../../feed/market-data'
+
+export function getDayChange(quote: MarketQuote): number {
+  return quote.price - quote.previousClose
+}
+
+export function getDayChangePercent(quote: MarketQuote): number {
+  return quote.previousClose === 0
+    ? 0
+    : (getDayChange(quote) / quote.previousClose) * 100
+}
diff --git a/examples/solid/realtime-trading/src/table/table-config/quote-cell-props.ts b/examples/solid/realtime-trading/src/table/table-config/quote-cell-props.ts
new file mode 100644
index 0000000000..eb0e12d911
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/table-config/quote-cell-props.ts
@@ -0,0 +1,31 @@
+export interface PriceCellProps {
+  price: number
+  move: number
+  onSelect: () => void
+}
+
+export interface MoveCellProps {
+  move: number
+}
+
+export interface PercentChangeCellProps {
+  value: number
+}
+
+export interface SpreadCellProps {
+  bid: number
+  ask: number
+}
+
+export interface DepthCellProps {
+  bidSize: number
+  askSize: number
+}
+
+export interface QuoteAgeCellProps {
+  ageMs: number
+}
+
+export interface SparklineCellProps {
+  values: ReadonlyArray<number>
+}
diff --git a/examples/solid/realtime-trading/src/table/table-config/quote-cell-renderers.tsx b/examples/solid/realtime-trading/src/table/table-config/quote-cell-renderers.tsx
new file mode 100644
index 0000000000..c83c2bf561
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/table-config/quote-cell-renderers.tsx
@@ -0,0 +1,119 @@
+import { Show } from 'solid-js'
+import { useTradingRowData } from '../trading-row-data-context'
+import {
+  DownMoveCell,
+  PercentChangeCell,
+  PriceCell,
+  SparklineCell,
+  StableMoveCell,
+  UpMoveCell,
+  recordCellRender,
+} from './quote-cells'
+import { getDayChange, getDayChangePercent } from './market-quote-values'
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+export function createPriceCellRenderer(
+  onSelectSymbol: (symbol: string) => void,
+) {
+  return function PriceCellRenderer() {
+    const quote = useTradingRowData()
+    return recordCellRender('Last', () => (
+      <PriceCell
+        price={quote().price}
+        move={getDayChange(quote())}
+        onSelect={() => onSelectSymbol(quote().symbol)}
+      />
+    ))
+  }
+}
+
+export function StableMoveCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Change', () => (
+    <StableMoveCell move={getDayChange(quote())} />
+  ))
+}
+
+export function SwappingMoveCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Change', () => (
+    <Show
+      when={getDayChange(quote()) >= 0}
+      fallback={<DownMoveCell move={getDayChange(quote())} />}
+    >
+      <UpMoveCell move={getDayChange(quote())} />
+    </Show>
+  ))
+}
+
+export function PercentChangeCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('ChangePercent', () => (
+    <PercentChangeCell value={getDayChangePercent(quote())} />
+  ))
+}
+
+export function SparklineCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Intraday', () => (
+    <SparklineCell values={quote().history} />
+  ))
+}
+
+export function MarketCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Market', () => <>{quote().venue}</>)
+}
+
+export function NameCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Name', () => <>{quote().company}</>)
+}
+
+export function SymbolCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Symbol', () => <>{quote().symbol}</>)
+}
+
+export function BidCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Bid', () => <>{quote().bid.toFixed(2)}</>)
+}
+
+export function BidVolumeCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('BidVolume', () => (
+    <>{compactFormatter.format(quote().bidSize)}</>
+  ))
+}
+
+export function AskCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Ask', () => <>{quote().ask.toFixed(2)}</>)
+}
+
+export function AskVolumeCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('AskVolume', () => (
+    <>{compactFormatter.format(quote().askSize)}</>
+  ))
+}
+
+export function OpenCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Open', () => <>{quote().open.toFixed(2)}</>)
+}
+
+export function HighCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('High', () => <>{quote().high.toFixed(2)}</>)
+}
+
+export function LowCellRenderer() {
+  const quote = useTradingRowData()
+  return recordCellRender('Low', () => <>{quote().low.toFixed(2)}</>)
+}
diff --git a/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx b/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
index e75f43ee5c..510246103b 100644
--- a/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
+++ b/examples/solid/realtime-trading/src/table/table-config/quote-cells.tsx
@@ -1,4 +1,13 @@
 import { createMemo, onCleanup, onMount } from 'solid-js'
+import type {
+  DepthCellProps,
+  MoveCellProps,
+  PercentChangeCellProps,
+  PriceCellProps,
+  QuoteAgeCellProps,
+  SparklineCellProps,
+  SpreadCellProps,
+} from './quote-cell-props'
 
 const compactNumber = new Intl.NumberFormat('en-US', {
   notation: 'compact',
@@ -74,11 +83,7 @@ function trackLifecycle(componentName: QuoteComponentName): void {
   })
 }
 
-export function PriceCell(props: {
-  price: number
-  move: number
-  onSelect: () => void
-}) {
+export function PriceCell(props: PriceCellProps) {
   trackLifecycle('PriceCell')
   return (
     <button
@@ -94,7 +99,7 @@ export function PriceCell(props: {
   )
 }
 
-export function StableMoveCell(props: { move: number }) {
+export function StableMoveCell(props: MoveCellProps) {
   trackLifecycle('StableMoveCell')
   return (
     <span
@@ -109,17 +114,17 @@ export function StableMoveCell(props: { move: number }) {
   )
 }
 
-export function UpMoveCell(props: { move: number }) {
+export function UpMoveCell(props: MoveCellProps) {
   trackLifecycle('UpMoveCell')
   return <span class="move-cell quote-up">▲ {formatSigned(props.move)}</span>
 }
 
-export function DownMoveCell(props: { move: number }) {
+export function DownMoveCell(props: MoveCellProps) {
   trackLifecycle('DownMoveCell')
   return <span class="move-cell quote-down">▼ {formatSigned(props.move)}</span>
 }
 
-export function PercentChangeCell(props: { value: number }) {
+export function PercentChangeCell(props: PercentChangeCellProps) {
   trackLifecycle('PercentChangeCell')
   return (
     <span
@@ -135,7 +140,7 @@ export function PercentChangeCell(props: { value: number }) {
   )
 }
 
-export function SpreadCell(props: { bid: number; ask: number }) {
+export function SpreadCell(props: SpreadCellProps) {
   trackLifecycle('SpreadCell')
   const spread = createMemo(() => Math.max(0, props.ask - props.bid))
   const basisPoints = createMemo(() => {
@@ -151,7 +156,7 @@ export function SpreadCell(props: { bid: number; ask: number }) {
   )
 }
 
-export function DepthCell(props: { bidSize: number; askSize: number }) {
+export function DepthCell(props: DepthCellProps) {
   trackLifecycle('DepthCell')
   const bidShare = createMemo(() => {
     const total = props.bidSize + props.askSize
@@ -173,7 +178,7 @@ export function DepthCell(props: { bidSize: number; askSize: number }) {
   )
 }
 
-export function QuoteAgeCell(props: { ageMs: number }) {
+export function QuoteAgeCell(props: QuoteAgeCellProps) {
   trackLifecycle('QuoteAgeCell')
   return (
     <span
@@ -190,7 +195,7 @@ export function QuoteAgeCell(props: { ageMs: number }) {
   )
 }
 
-export function SparklineCell(props: { values: ReadonlyArray<number> }) {
+export function SparklineCell(props: SparklineCellProps) {
   trackLifecycle('SparklineCell')
   const rising = createMemo(
     () => (props.values.at(-1) ?? 0) >= (props.values[0] ?? 0),
diff --git a/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx b/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
index 3811536ead..9146575115 100644
--- a/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
+++ b/examples/solid/realtime-trading/src/table/table-config/trading-columns.tsx
@@ -1,32 +1,33 @@
 import {
-  DownMoveCell,
-  PercentChangeCell,
-  PriceCell,
-  SparklineCell,
-  StableMoveCell,
-  UpMoveCell,
-  recordCellRender,
-} from './quote-cells'
+  AskCellRenderer,
+  AskVolumeCellRenderer,
+  BidCellRenderer,
+  BidVolumeCellRenderer,
+  HighCellRenderer,
+  LowCellRenderer,
+  MarketCellRenderer,
+  NameCellRenderer,
+  OpenCellRenderer,
+  PercentChangeCellRenderer,
+  SparklineCellRenderer,
+  StableMoveCellRenderer,
+  SwappingMoveCellRenderer,
+  SymbolCellRenderer,
+  createPriceCellRenderer,
+} from './quote-cell-renderers'
+import { getDayChange, getDayChangePercent } from './market-quote-values'
 import type { JSX } from 'solid-js'
 import type { MarketQuote } from '../../feed/market-data'
-import type { VirtualScrollMode } from '../trading-row-virtualizer'
+import type { TradingCellContext } from '../trading-table-features'
 
 export type RendererMode = 'stable' | 'swap'
 
-export interface TradingTableProps {
-  quotes: Array<MarketQuote>
+export interface TradingColumnOptions {
   rendererMode: RendererMode
-  selectedSymbol: string | null
-  virtualScrollMode: VirtualScrollMode
   onSelectSymbol: (symbol: string) => void
-  onRenderedRowCount: (count: number) => void
 }
 
-interface TradingCellContext {
-  row: { original: MarketQuote }
-}
-
-interface TradingColumnDefinition {
+export interface TradingColumnDefinition {
   id: string
   header: string
   size?: number
@@ -36,13 +37,17 @@ interface TradingColumnDefinition {
   cell?: (context: TradingCellContext) => JSX.Element
 }
 
-const compactFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-})
+export type TradingColumnSet = Array<TradingColumnDefinition>
+
 export function createTradingColumns(
-  props: TradingTableProps,
-): Array<TradingColumnDefinition> {
+  options: TradingColumnOptions,
+): TradingColumnSet {
+  const priceCell = createPriceCellRenderer(options.onSelectSymbol)
+  const changeCell =
+    options.rendererMode === 'stable'
+      ? StableMoveCellRenderer
+      : SwappingMoveCellRenderer
+
   return [
     {
       id: 'instrument',
@@ -53,24 +58,21 @@ export function createTradingColumns(
           header: 'Market',
           size: 72,
           accessorFn: (row) => row.venue,
-          cell: ({ row }) =>
-            recordCellRender('Market', () => row.original.venue),
+          cell: MarketCellRenderer,
         },
         {
           id: 'name',
           header: 'Name',
           size: 180,
           accessorFn: (row) => row.company,
-          cell: ({ row }) =>
-            recordCellRender('Name', () => row.original.company),
+          cell: NameCellRenderer,
         },
         {
           id: 'symbol',
           header: 'Symbol',
           size: 92,
           accessorFn: (row) => row.symbol,
-          cell: ({ row }) =>
-            recordCellRender('Symbol', () => row.original.symbol),
+          cell: SymbolCellRenderer,
         },
       ],
     },
@@ -83,45 +85,21 @@ export function createTradingColumns(
           header: 'Price',
           size: 96,
           accessorFn: (row) => row.price,
-          cell: ({ row }) =>
-            recordCellRender('Last', () => {
-              const change = getDayChange(row.original)
-              return (
-                <PriceCell
-                  price={row.original.price}
-                  move={change}
-                  onSelect={() => props.onSelectSymbol(row.original.symbol)}
-                />
-              )
-            }),
+          cell: priceCell,
         },
         {
           id: 'change',
           header: 'Chg',
           size: 94,
           accessorFn: (row) => getDayChange(row),
-          cell: ({ row }) =>
-            recordCellRender('Change', () => {
-              const move = getDayChange(row.original)
-              if (props.rendererMode === 'stable') {
-                return <StableMoveCell move={move} />
-              }
-              return move >= 0 ? (
-                <UpMoveCell move={move} />
-              ) : (
-                <DownMoveCell move={move} />
-              )
-            }),
+          cell: changeCell,
         },
         {
           id: 'changePercent',
           header: 'Chg%',
           size: 90,
           accessorFn: (row) => getDayChangePercent(row),
-          cell: ({ row }) =>
-            recordCellRender('ChangePercent', () => (
-              <PercentChangeCell value={getDayChangePercent(row.original)} />
-            )),
+          cell: PercentChangeCellRenderer,
         },
       ],
     },
@@ -134,36 +112,28 @@ export function createTradingColumns(
           header: 'Bid',
           size: 90,
           accessorFn: (row) => row.bid,
-          cell: ({ row }) =>
-            recordCellRender('Bid', () => row.original.bid.toFixed(2)),
+          cell: BidCellRenderer,
         },
         {
           id: 'bidSize',
           header: 'Bid Vol',
           size: 100,
           accessorFn: (row) => row.bidSize,
-          cell: ({ row }) =>
-            recordCellRender('BidVolume', () =>
-              compactFormatter.format(row.original.bidSize),
-            ),
+          cell: BidVolumeCellRenderer,
         },
         {
           id: 'ask',
           header: 'Ask',
           size: 90,
           accessorFn: (row) => row.ask,
-          cell: ({ row }) =>
-            recordCellRender('Ask', () => row.original.ask.toFixed(2)),
+          cell: AskCellRenderer,
         },
         {
           id: 'askSize',
           header: 'Ask Vol',
           size: 100,
           accessorFn: (row) => row.askSize,
-          cell: ({ row }) =>
-            recordCellRender('AskVolume', () =>
-              compactFormatter.format(row.original.askSize),
-            ),
+          cell: AskVolumeCellRenderer,
         },
       ],
     },
@@ -176,24 +146,21 @@ export function createTradingColumns(
           header: 'Open',
           size: 90,
           accessorFn: (row) => row.open,
-          cell: ({ row }) =>
-            recordCellRender('Open', () => row.original.open.toFixed(2)),
+          cell: OpenCellRenderer,
         },
         {
           id: 'high',
           header: 'High',
           size: 90,
           accessorFn: (row) => row.high,
-          cell: ({ row }) =>
-            recordCellRender('High', () => row.original.high.toFixed(2)),
+          cell: HighCellRenderer,
         },
         {
           id: 'low',
           header: 'Low',
           size: 90,
           accessorFn: (row) => row.low,
-          cell: ({ row }) =>
-            recordCellRender('Low', () => row.original.low.toFixed(2)),
+          cell: LowCellRenderer,
         },
       ],
     },
@@ -206,24 +173,11 @@ export function createTradingColumns(
           header: 'Intraday',
           size: 150,
           enableSorting: false,
-          cell: ({ row }) =>
-            recordCellRender('Intraday', () => (
-              <SparklineCell values={row.original.history} />
-            )),
+          cell: SparklineCellRenderer,
         },
       ],
     },
   ]
 }
 
-function getDayChange(quote: MarketQuote): number {
-  return quote.price - quote.previousClose
-}
-
-function getDayChangePercent(quote: MarketQuote): number {
-  return quote.previousClose === 0
-    ? 0
-    : (getDayChange(quote) / quote.previousClose) * 100
-}
-
 export const TRADING_COLUMN_COUNT = 14
diff --git a/examples/solid/realtime-trading/src/table/table-interactions.ts b/examples/solid/realtime-trading/src/table/table-interactions.ts
index 1df83b2484..2848fab70c 100644
--- a/examples/solid/realtime-trading/src/table/table-interactions.ts
+++ b/examples/solid/realtime-trading/src/table/table-interactions.ts
@@ -1,3 +1,5 @@
+import type { JSX } from 'solid-js'
+
 export type CellDirection = 'up' | 'down' | 'left' | 'right'
 
 interface RowSelectionTable {
@@ -85,66 +87,71 @@ export function selectRowFromPointer(
   })
 }
 
-export class TradingGridPointerController {
-  #lastPointerCell: HTMLTableCellElement | null = null
-
-  handleMouseDown(
-    table: TradingGridTable,
-    event: MouseEvent,
-    selectSymbol: (symbol: string) => void,
-  ): void {
-    if (event.button !== 0) return
-
-    const target = this.#findCellTarget(table, event.composedPath())
-    if (!target) return
-
-    this.#lastPointerCell = target.element
-    selectSymbol(target.cell.row.original.symbol)
-    target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
-  }
-
-  handlePointerOver(table: TradingGridTable, event: MouseEvent): void {
-    if ((event.buttons & 1) === 0) {
-      this.resetPointerCell()
-      return
-    }
-
-    const target = this.#findCellTarget(table, event.composedPath())
-    if (!target || target.element === this.#lastPointerCell) return
-
-    this.#lastPointerCell = target.element
-    target.cell.getSelectionExtendHandler()(event)
-  }
-
-  handleClick(table: TradingGridTable, event: MouseEvent): void {
-    const target = this.#findCellTarget(table, event.composedPath())
-    if (!target) return
-    selectRowFromPointer(table, target.cell.row, event)
-  }
+/**
+ * Creates the only pointer listeners used by the table body. Cells expose just
+ * identity data; delegated events resolve the current TanStack cell on demand.
+ */
+export function createTradingGridSelectionHandlers(
+  table: TradingGridTable,
+  selectSymbol: (symbol: string) => void,
+) {
+  const runtime = { lastCell: null as HTMLTableCellElement | null }
+
+  return {
+    onMouseDown(event) {
+      if (event.button !== 0) return
+
+      const target = findCellTarget(table, event.composedPath())
+      if (!target) return
+
+      runtime.lastCell = target.element
+      selectSymbol(target.cell.row.original.symbol)
+      target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
+    },
+    onMouseOver(event) {
+      if ((event.buttons & 1) === 0) {
+        runtime.lastCell = null
+        return
+      }
+
+      const target = findCellTarget(table, event.composedPath())
+      if (!target || target.element === runtime.lastCell) return
+
+      runtime.lastCell = target.element
+      target.cell.getSelectionExtendHandler()(event)
+    },
+    onMouseLeave() {
+      runtime.lastCell = null
+    },
+    onClick(event) {
+      const target = findCellTarget(table, event.composedPath())
+      if (!target) return
+      selectRowFromPointer(table, target.cell.row, event)
+    },
+  } satisfies Pick<
+    JSX.IntrinsicElements['tbody'],
+    'onMouseDown' | 'onMouseOver' | 'onMouseLeave' | 'onClick'
+  >
+}
 
-  resetPointerCell(): void {
-    this.#lastPointerCell = null
+function findCellTarget(
+  table: TradingGridTable,
+  path: Array<EventTarget>,
+): SelectionCellTarget | null {
+  for (const target of path) {
+    if (!(target instanceof HTMLTableCellElement)) continue
+
+    const columnId = target.dataset['columnId']
+    const rowId =
+      target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
+    if (!columnId || !rowId) return null
+
+    const row = table.getRowModel().rowsById[rowId]
+    const cell = row.getAllCellsByColumnId()[columnId]
+    return { element: target, cell }
   }
 
-  #findCellTarget(
-    table: TradingGridTable,
-    path: Array<EventTarget>,
-  ): SelectionCellTarget | null {
-    for (const target of path) {
-      if (!(target instanceof HTMLTableCellElement)) continue
-
-      const columnId = target.dataset['columnId']
-      const rowId =
-        target.closest<HTMLTableRowElement>('tr[data-row-id]')?.dataset['rowId']
-      if (!columnId || !rowId) return null
-
-      const row = table.getRowModel().rowsById[rowId]
-      const cell = row.getAllCellsByColumnId()[columnId]
-      return { element: target, cell }
-    }
-
-    return null
-  }
+  return null
 }
 
 export function handleCellNavigation(
diff --git a/examples/solid/realtime-trading/src/table/trading-grid-props.ts b/examples/solid/realtime-trading/src/table/trading-grid-props.ts
new file mode 100644
index 0000000000..b4cac193e0
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-grid-props.ts
@@ -0,0 +1,41 @@
+import { handleCellNavigation } from './table-interactions'
+import type { Accessor, JSX } from 'solid-js'
+import type { WithDataAttributes } from './jsx-attributes'
+import type { TradingTableInstance } from './trading-table-features'
+
+export interface TradingGridPropsOptions {
+  table: TradingTableInstance
+  virtualized: Accessor<boolean>
+}
+
+export function createTradingGridProps(
+  options: TradingGridPropsOptions,
+): WithDataAttributes<JSX.IntrinsicElements['div']> {
+  return {
+    class: 'table-scroll',
+    get classList() {
+      return { 'is-virtualized': options.virtualized() }
+    },
+    'data-trading-table': true,
+    tabindex: 0,
+    onKeyDown: (event) => handleCellNavigation(options.table, event),
+  }
+}
+
+export function createTradingTableElementProps(
+  options: TradingGridPropsOptions,
+  style: Accessor<Record<string, string>>,
+): WithDataAttributes<JSX.IntrinsicElements['table']> {
+  return {
+    class: 'trading-data-grid',
+    get classList() {
+      return { 'virtual-table': options.virtualized() }
+    },
+    'data-testid': 'trading-table',
+    role: 'grid',
+    'aria-multiselectable': true,
+    get style() {
+      return style()
+    },
+  }
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-row-data-context.tsx b/examples/solid/realtime-trading/src/table/trading-row-data-context.tsx
new file mode 100644
index 0000000000..593c084a93
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-row-data-context.tsx
@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
+import type { MarketQuote } from '../feed/market-data'
+
+export interface TradingRowDataProviderProps {
+  quote: Accessor<MarketQuote>
+  children?: JSX.Element
+}
+
+const TradingRowDataContext = createContext<Accessor<MarketQuote>>()
+
+export function TradingRowDataProvider(props: TradingRowDataProviderProps) {
+  return (
+    <TradingRowDataContext.Provider value={props.quote}>
+      {props.children}
+    </TradingRowDataContext.Provider>
+  )
+}
+
+export function useTradingRowData(): Accessor<MarketQuote> {
+  const quote = useContext(TradingRowDataContext)
+  if (!quote) {
+    throw new Error('Trading cell renderers require TradingRowDataProvider')
+  }
+  return quote
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts b/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
index bc4b34b528..85ec4ec247 100644
--- a/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
+++ b/examples/solid/realtime-trading/src/table/trading-row-virtualizer.ts
@@ -1,3 +1,8 @@
+import { createVirtualizer } from '@tanstack/solid-virtual'
+import { createEffect, createMemo } from 'solid-js'
+import type { Accessor } from 'solid-js'
+import type { TradingRow } from './trading-table-features'
+
 export const TRADING_ROW_HEIGHT = 32
 export const TRADING_ROW_OVERSCAN = 10
 export const DEFAULT_VIRTUALIZATION_ROW_COUNT = 200
@@ -6,6 +11,61 @@ export const FORCED_VIRTUALIZATION_ROW_COUNT = 1_500
 export type VirtualScrollMode = 'tanstack' | 'none'
 export type VirtualScrollPreference = VirtualScrollMode | 'auto'
 
+export interface TradingRowVirtualizationOptions {
+  rows: Accessor<Array<TradingRow>>
+  scrollElement: Accessor<HTMLDivElement | null>
+  enabled: Accessor<boolean>
+  onRenderedRowCount: (count: number) => void
+}
+
+export function createTradingRowVirtualization(
+  options: TradingRowVirtualizationOptions,
+) {
+  const virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+    get count() {
+      return options.rows().length
+    },
+    estimateSize: () => TRADING_ROW_HEIGHT,
+    getScrollElement: options.scrollElement,
+    getItemKey: (index) => options.rows()[index]?.id ?? index,
+    overscan: TRADING_ROW_OVERSCAN,
+    get enabled() {
+      return options.enabled()
+    },
+  })
+  const virtualRows = virtualizer.getVirtualItems
+  const visibleRange = createMemo(() => {
+    void virtualRows()
+    const rowCount = options.rows().length
+    const range = virtualizer.range
+    if (!options.enabled() || rowCount === 0 || range === null) return null
+
+    const lastRowIndex = rowCount - 1
+    const start = Math.min(range.startIndex, lastRowIndex)
+    return {
+      start,
+      end: Math.min(Math.max(start, range.endIndex), lastRowIndex),
+    }
+  })
+  const bodyHeight = createMemo(() =>
+    options.enabled()
+      ? `${options.rows().length * TRADING_ROW_HEIGHT}px`
+      : undefined,
+  )
+
+  createEffect(() => {
+    options.onRenderedRowCount(
+      options.enabled() ? virtualRows().length : options.rows().length,
+    )
+  })
+
+  return { bodyHeight, virtualizer, virtualRows, visibleRange }
+}
+
+export type TradingRowVirtualization = ReturnType<
+  typeof createTradingRowVirtualization
+>
+
 export function resolveVirtualScrollMode(
   requestedMode: VirtualScrollPreference,
   instrumentCount: number,
diff --git a/examples/solid/realtime-trading/src/table/trading-table-body.tsx b/examples/solid/realtime-trading/src/table/trading-table-body.tsx
new file mode 100644
index 0000000000..6601b76267
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-table-body.tsx
@@ -0,0 +1,87 @@
+import { Index, Show, createMemo } from 'solid-js'
+import { createTradingGridSelectionHandlers } from './table-interactions'
+import { TradingTableRow } from './trading-table-row'
+import type { Accessor, JSX } from 'solid-js'
+import type { TradingColumnSet } from './table-config/trading-columns'
+import type { TradingRowVirtualization } from './trading-row-virtualizer'
+import type {
+  TradingRow,
+  TradingTableInstance,
+} from './trading-table-features'
+
+export interface TradingTableBodyProps {
+  table: TradingTableInstance
+  rows: Accessor<Array<TradingRow>>
+  columnVersion: Accessor<TradingColumnSet>
+  selectedSymbol: Accessor<string | null>
+  virtualized: Accessor<boolean>
+  virtualization: TradingRowVirtualization
+  selectSymbol: (symbol: string) => void
+}
+
+export function TradingTableBody(props: TradingTableBodyProps) {
+  const bodyProps = createTradingTableBodyProps(props)
+
+  return (
+    <tbody {...bodyProps}>
+      <Show
+        when={props.virtualized()}
+        fallback={<FullTableRows {...props} />}
+      >
+        <VirtualTableRows {...props} />
+      </Show>
+    </tbody>
+  )
+}
+
+function FullTableRows(props: TradingTableBodyProps) {
+  return (
+    <Index each={props.rows()}>
+      {(row) => (
+        <TradingTableRow
+          row={row()}
+          columnVersion={props.columnVersion()}
+          selectedSymbol={props.selectedSymbol()}
+        />
+      )}
+    </Index>
+  )
+}
+
+function VirtualTableRows(props: TradingTableBodyProps) {
+  return (
+    <Index each={props.virtualization.virtualRows()}>
+      {(virtualRow) => {
+        const row = createMemo(() => props.rows()[virtualRow().index])
+        return (
+          <TradingTableRow
+            row={row()}
+            columnVersion={props.columnVersion()}
+            selectedSymbol={props.selectedSymbol()}
+            virtualItem={virtualRow()}
+          />
+        )
+      }}
+    </Index>
+  )
+}
+
+function createTradingTableBodyProps(
+  options: TradingTableBodyProps,
+): JSX.IntrinsicElements['tbody'] {
+  const selectionHandlers = createTradingGridSelectionHandlers(
+    options.table,
+    options.selectSymbol,
+  )
+
+  return {
+    ...selectionHandlers,
+    get classList() {
+      return { 'virtual-table-body': options.virtualized() }
+    },
+    get style() {
+      const height = options.virtualization.bodyHeight()
+      return height === undefined ? undefined : { height }
+    },
+  }
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-table-effects.ts b/examples/solid/realtime-trading/src/table/trading-table-effects.ts
new file mode 100644
index 0000000000..d106818ba1
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-table-effects.ts
@@ -0,0 +1,68 @@
+import { createEffect, onCleanup, onMount } from 'solid-js'
+import type { Accessor } from 'solid-js'
+import type { TradingTableInstance } from './trading-table-features'
+
+export function createFeedCommitTracking(
+  quotes: Accessor<unknown>,
+  completeCommit: () => void,
+): void {
+  const runtime = { queued: false, disposed: false }
+
+  createEffect(() => {
+    quotes()
+    if (runtime.queued) return
+
+    runtime.queued = true
+    queueMicrotask(() => {
+      runtime.queued = false
+      if (!runtime.disposed) completeCommit()
+    })
+  })
+
+  onCleanup(() => {
+    runtime.disposed = true
+  })
+}
+
+export function createTableAutoFit(
+  table: TradingTableInstance,
+  scrollElement: Accessor<HTMLDivElement | null>,
+): void {
+  const runtime = { manuallyResized: false }
+
+  onMount(() => {
+    const fitAvailableWidth = (): void => {
+      const element = scrollElement()
+      if (!element || runtime.manuallyResized) return
+
+      const currentWidth = table.getTotalSize()
+      const availableWidth = element.clientWidth
+      if (availableWidth <= currentWidth + 1 || currentWidth <= 0) return
+
+      const ratio = availableWidth / currentWidth
+      table.setColumnSizing(
+        Object.fromEntries(
+          table
+            .getVisibleLeafColumns()
+            .map((column) => [column.id, column.getSize() * ratio]),
+        ),
+      )
+    }
+    const resizeObserver = new ResizeObserver(fitAvailableWidth)
+    const resizingSubscription = table.atoms.columnResizing.subscribe(
+      (state) => {
+        if (state.isResizingColumn !== false) {
+          runtime.manuallyResized = true
+        }
+      },
+    )
+    const element = scrollElement()
+    if (element) resizeObserver.observe(element)
+    fitAvailableWidth()
+
+    onCleanup(() => {
+      resizeObserver.disconnect()
+      resizingSubscription.unsubscribe()
+    })
+  })
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-table-features.ts b/examples/solid/realtime-trading/src/table/trading-table-features.ts
new file mode 100644
index 0000000000..e8d518a9a2
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-table-features.ts
@@ -0,0 +1,31 @@
+import {
+  createSortedRowModel,
+  stockFeatures,
+  tableFeatures,
+} from '@tanstack/solid-table'
+import type {
+  Cell,
+  Header,
+  Row,
+  SolidTable,
+} from '@tanstack/solid-table'
+import type { MarketQuote } from '../feed/market-data'
+
+export const tradingTableFeatures = tableFeatures({
+  ...stockFeatures,
+  sortedRowModel: createSortedRowModel(),
+})
+
+export type TradingTableFeatures = typeof tradingTableFeatures
+export type TradingTableInstance = SolidTable<
+  TradingTableFeatures,
+  MarketQuote
+>
+export type TradingRow = Row<TradingTableFeatures, MarketQuote>
+export type TradingCell = Cell<TradingTableFeatures, MarketQuote, unknown>
+export type TradingCellContext = ReturnType<TradingCell['getContext']>
+export type TradingHeader = Header<
+  TradingTableFeatures,
+  MarketQuote,
+  unknown
+>
diff --git a/examples/solid/realtime-trading/src/table/trading-table-footer.tsx b/examples/solid/realtime-trading/src/table/trading-table-footer.tsx
new file mode 100644
index 0000000000..db47ff1b27
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-table-footer.tsx
@@ -0,0 +1,35 @@
+import { Show } from 'solid-js'
+import type { Accessor } from 'solid-js'
+import type { TradingRowVirtualization } from './trading-row-virtualizer'
+import type { TradingRow, TradingTableInstance } from './trading-table-features'
+
+export interface TradingTableFooterProps {
+  table: TradingTableInstance
+  rows: Accessor<Array<TradingRow>>
+  virtualized: Accessor<boolean>
+  virtualization: TradingRowVirtualization
+}
+
+export function TradingTableFooter(props: TradingTableFooterProps) {
+  return (
+    <Show when={props.virtualized()}>
+      <footer
+        class="virtual-scroll-footer"
+        data-testid="virtual-scroll-footer"
+      >
+        <span>
+          TanStack · Total · {props.rows().length} rows ·{' '}
+          {props.table.getVisibleLeafColumns().length} columns
+        </span>
+        <span data-testid="visible-row-range">
+          <Show
+            when={props.virtualization.visibleRange()}
+            fallback={'Current · rows —'}
+          >
+            {(range) => `Current · rows ${range().start}..${range().end}`}
+          </Show>
+        </span>
+      </footer>
+    </Show>
+  )
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-table-header.tsx b/examples/solid/realtime-trading/src/table/trading-table-header.tsx
new file mode 100644
index 0000000000..d3b3946dc1
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-table-header.tsx
@@ -0,0 +1,175 @@
+import { FlexRender } from '@tanstack/solid-table'
+import { For, Show } from 'solid-js'
+import { createColumnDrag } from './create-column-drag'
+import { sortAriaValue, sortIndicator } from './table-interactions'
+import type { JSX } from 'solid-js'
+import type { ColumnDrag } from './create-column-drag'
+import type {
+  TradingHeader,
+  TradingTableInstance,
+} from './trading-table-features'
+
+export interface TradingTableHeaderProps {
+  table: TradingTableInstance
+}
+
+export function TradingTableHeader(props: TradingTableHeaderProps) {
+  const columnDrag = createColumnDrag(props.table)
+
+  return (
+    <thead>
+      <For each={props.table.getHeaderGroups()}>
+        {(headerGroup) => (
+          <tr>
+            <For each={headerGroup.headers}>
+              {(header) => (
+                <TradingHeaderCell header={header} columnDrag={columnDrag} />
+              )}
+            </For>
+          </tr>
+        )}
+      </For>
+    </thead>
+  )
+}
+
+interface TradingHeaderCellProps {
+  header: TradingHeader
+  columnDrag: ColumnDrag
+}
+
+function TradingHeaderCell(props: TradingHeaderCellProps) {
+  const isLeaf = () => props.header.subHeaders.length === 0
+  const headerCellProps = createHeaderCellProps(
+    () => props.header,
+    isLeaf,
+    props.columnDrag,
+  )
+
+  return (
+    <th {...headerCellProps}>
+      <Show when={!props.header.isPlaceholder}>
+        <Show
+          when={isLeaf()}
+          fallback={<FlexRender header={props.header} />}
+        >
+          <TradingLeafHeader
+            header={props.header}
+            columnDrag={props.columnDrag}
+          />
+        </Show>
+      </Show>
+    </th>
+  )
+}
+
+function TradingLeafHeader(props: TradingHeaderCellProps) {
+  const dropZoneProps = props.columnDrag.createDropZoneProps(
+    props.header.column.id,
+  )
+  const dragHandleProps = props.columnDrag.createHandleProps(
+    props.header.column.id,
+  )
+  const sortButtonProps = createSortButtonProps(() => props.header)
+  const resizeHandleProps = createResizeHandleProps(() => props.header)
+
+  return (
+    <>
+      <div class="leaf-header-content" {...dropZoneProps}>
+        <button
+          type="button"
+          class="column-drag-handle"
+          {...dragHandleProps}
+        >
+          ⋮⋮
+        </button>
+        <button {...sortButtonProps}>
+          <span class="header-label">
+            <FlexRender header={props.header} />
+          </span>
+          <Show when={props.header.column.getCanSort()}>
+            <span
+              class="sort-indicator"
+              classList={{
+                'is-active': !!props.header.column.getIsSorted(),
+              }}
+              aria-hidden="true"
+            >
+              {sortIndicator(props.header.column.getIsSorted())}
+            </span>
+          </Show>
+        </button>
+      </div>
+      <Show when={props.header.column.getCanResize()}>
+        <div {...resizeHandleProps} />
+      </Show>
+    </>
+  )
+}
+
+function createHeaderCellProps(
+  header: () => TradingHeader,
+  isLeaf: () => boolean,
+  columnDrag: ColumnDrag,
+): JSX.IntrinsicElements['th'] {
+  return {
+    get colSpan() {
+      return header().colSpan
+    },
+    get style() {
+      return {
+        width: `calc(var(--header-${header().id}-size) * 1px)`,
+      }
+    },
+    get ['aria-sort']() {
+      return isLeaf()
+        ? sortAriaValue(header().column.getIsSorted())
+        : undefined
+    },
+    get classList() {
+      const columnId = header().column.id
+      return {
+        'column-group-header': !isLeaf(),
+        'numeric-header': isLeaf() && !isTextColumn(columnId),
+        'is-column-dragging': columnDrag.isDragging(columnId),
+        'is-column-drop-target': columnDrag.isDropTarget(columnId),
+      }
+    },
+  }
+}
+
+function createSortButtonProps(
+  header: () => TradingHeader,
+): JSX.IntrinsicElements['button'] {
+  return {
+    type: 'button',
+    class: 'sort-header-button',
+    get classList() {
+      return { 'is-sortable': header().column.getCanSort() }
+    },
+    get disabled() {
+      return !header().column.getCanSort()
+    },
+    onClick: header().column.getToggleSortingHandler(),
+  }
+}
+
+function createResizeHandleProps(
+  header: () => TradingHeader,
+): JSX.IntrinsicElements['div'] {
+  return {
+    class: 'column-resize-handle',
+    get classList() {
+      return { 'is-resizing': header().column.getIsResizing() }
+    },
+    role: 'separator',
+    'aria-orientation': 'vertical',
+    onDblClick: () => header().column.resetSize(),
+    onMouseDown: header().getResizeHandler(),
+    onTouchStart: header().getResizeHandler(),
+  }
+}
+
+function isTextColumn(columnId: string): boolean {
+  return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-table-row.tsx b/examples/solid/realtime-trading/src/table/trading-table-row.tsx
new file mode 100644
index 0000000000..6d25d8258a
--- /dev/null
+++ b/examples/solid/realtime-trading/src/table/trading-table-row.tsx
@@ -0,0 +1,105 @@
+import { FlexRender } from '@tanstack/solid-table'
+import { Index, createMemo } from 'solid-js'
+import { TradingRowDataProvider } from './trading-row-data-context'
+import type { VirtualItem } from '@tanstack/solid-virtual'
+import type { TradingColumnSet } from './table-config/trading-columns'
+import type { TradingCell, TradingRow } from './trading-table-features'
+
+export interface TradingTableRowProps {
+  row: TradingRow
+  columnVersion: TradingColumnSet
+  selectedSymbol: string | null
+  virtualItem?: VirtualItem
+}
+
+interface TradingTableCellProps {
+  cell: TradingCell
+  renderCell: TradingCell
+}
+
+export function TradingTableRow(props: TradingTableRowProps) {
+  const currentCells = createMemo(() => props.row.getVisibleCells())
+  const renderState = createMemo(
+    () => ({
+      rowId: props.row.id,
+      columns: props.columnVersion,
+      cells: currentCells(),
+    }),
+    undefined,
+    {
+      equals: (previous, next) =>
+        previous.rowId === next.rowId &&
+        previous.columns === next.columns &&
+        haveSameCellOrder(previous.cells, next.cells),
+    },
+  )
+
+  return (
+    <TradingRowDataProvider quote={() => props.row.original}>
+      <tr
+        classList={{ 'virtual-table-row': props.virtualItem !== undefined }}
+        style={
+          props.virtualItem
+            ? { transform: `translateY(${props.virtualItem.start}px)` }
+            : undefined
+        }
+        data-virtual-index={props.virtualItem?.index}
+        data-symbol={props.row.original.symbol}
+        data-row-id={props.row.id}
+        data-symbol-selected={
+          props.selectedSymbol === props.row.original.symbol
+            ? 'true'
+            : undefined
+        }
+        title={props.virtualItem ? undefined : props.row.original.company}
+        aria-selected={props.row.getIsSelected()}
+      >
+        <Index each={currentCells()}>
+          {(cell, index) => (
+            <TradingTableCell
+              cell={cell()}
+              renderCell={renderState().cells[index]}
+            />
+          )}
+        </Index>
+      </tr>
+    </TradingRowDataProvider>
+  )
+}
+
+function TradingTableCell(props: TradingTableCellProps) {
+  const selection = createMemo(() => ({
+    edges: props.cell.getSelectionEdges(),
+    focused: props.cell.getIsFocused(),
+    selected: props.cell.getIsSelected(),
+    tabIndex: props.cell.getTabIndex(),
+  }))
+
+  return (
+    <td
+      style={{
+        width: `calc(var(--col-${props.cell.column.id}-size) * 1px)`,
+      }}
+      data-column-id={props.cell.column.id}
+      data-cell-focused={selection().focused ? 'true' : undefined}
+      data-selection-top={selection().edges.top ? 'true' : undefined}
+      data-selection-right={selection().edges.right ? 'true' : undefined}
+      data-selection-bottom={selection().edges.bottom ? 'true' : undefined}
+      data-selection-left={selection().edges.left ? 'true' : undefined}
+      aria-selected={selection().selected}
+      tabindex={selection().tabIndex}
+    >
+      <FlexRender cell={props.renderCell} />
+    </td>
+  )
+}
+
+function haveSameCellOrder(
+  previous: ReadonlyArray<TradingCell>,
+  next: ReadonlyArray<TradingCell>,
+): boolean {
+  return (
+    previous.length === next.length &&
+    previous.every((cell, index) => cell.column.id === next[index]?.column.id)
+  )
+}
diff --git a/examples/solid/realtime-trading/src/table/trading-table.tsx b/examples/solid/realtime-trading/src/table/trading-table.tsx
index d20a2a70ac..fdc5f533dd 100644
--- a/examples/solid/realtime-trading/src/table/trading-table.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table.tsx
@@ -1,454 +1,76 @@
+import { createSignal } from 'solid-js'
 import {
-  FlexRender,
-  createSortedRowModel,
-  createTable,
-  stockFeatures,
-  tableFeatures,
-} from '@tanstack/solid-table'
-import { createVirtualizer } from '@tanstack/solid-virtual'
+  useMarketFeedController,
+  useTradingShellController,
+} from '../shell/trading-shell-context'
+import { createTradingTableModel } from './create-trading-table-model'
 import {
-  For,
-  Index,
-  Show,
-  createEffect,
-  createMemo,
-  onCleanup,
-  onMount,
-} from 'solid-js'
-import { useMarketFeedController } from '../shell/trading-shell-context'
-import { createTradingColumns } from './table-config/trading-columns'
+  createTradingGridProps,
+  createTradingTableElementProps,
+} from './trading-grid-props'
 import {
-  TradingGridPointerController,
-  handleCellNavigation,
-  reorderColumnIds,
-  sortAriaValue,
-  sortIndicator,
-} from './table-interactions'
-import {
-  TRADING_ROW_HEIGHT,
-  TRADING_ROW_OVERSCAN,
-} from './trading-row-virtualizer'
-import type { VirtualItem } from '@tanstack/solid-virtual'
-import type { Accessor } from 'solid-js'
-import type { TradingTableProps } from './table-config/trading-columns'
-
-const features = tableFeatures({
-  ...stockFeatures,
-  sortedRowModel: createSortedRowModel(),
-})
-
-export { TRADING_COLUMN_COUNT } from './table-config/trading-columns'
-export type {
-  RendererMode,
-  TradingTableProps,
-} from './table-config/trading-columns'
+  createFeedCommitTracking,
+  createTableAutoFit,
+} from './trading-table-effects'
+import { createTradingRowVirtualization } from './trading-row-virtualizer'
+import { TradingTableBody } from './trading-table-body'
+import { TradingTableFooter } from './trading-table-footer'
+import { TradingTableHeader } from './trading-table-header'
 
-export function TradingTable(props: TradingTableProps) {
+export function TradingTable() {
   const feed = useMarketFeedController()
-  const pointerInteractions = new TradingGridPointerController()
-  const columns = createTradingColumns(props)
-  const dragRuntime: ColumnDragRuntime = {
-    columnId: null,
-    sourceElement: null,
-    targetElement: null,
-  }
-  const layoutRuntime: TableLayoutRuntime = {
-    manuallyResized: false,
-    scrollElement: null,
-  }
-  const table = createTable({
-    key: 'solid-realtime-trading',
-    features,
-    columnResizeMode: 'onChange',
-    defaultColumn: { minSize: 56, maxSize: 800 },
-    autoResetCellSelection: false,
-    columns,
-    get data() {
-      return props.quotes
-    },
-    getRowId: (row) => row.id,
+  const { state, actions } = useTradingShellController()
+  const [scrollElement, setScrollElement] =
+    createSignal<HTMLDivElement | null>(null)
+  const virtualized = () => state.virtualScrollMode() === 'tanstack'
+  const model = createTradingTableModel({
+    quotes: feed.state.quotes,
+    rendererMode: state.rendererMode,
+    onSelectSymbol: actions.selectSymbol,
   })
-  type TradingRow = ReturnType<typeof table.getRowModel>['rows'][number]
-  const tableStyle = createMemo(() => {
-    void table.atoms.columnSizing.get()
-    void table.atoms.columnOrder.get()
-    const styles: Record<string, string> = {
-      width: `${table.getTotalSize()}px`,
-    }
-    for (const header of table.getFlatHeaders()) {
-      styles[`--header-${header.id}-size`] = `${header.getSize()}`
-      styles[`--col-${header.column.id}-size`] = `${header.column.getSize()}`
-    }
-    return styles
+  const virtualization = createTradingRowVirtualization({
+    rows: model.rows,
+    scrollElement,
+    enabled: virtualized,
+    onRenderedRowCount: actions.setRenderedRowCount,
   })
-  const rows = createMemo(() => table.getRowModel().rows)
-  const rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>(
-    {
-      get count() {
-        return rows().length
-      },
-      estimateSize: () => TRADING_ROW_HEIGHT,
-      getScrollElement: () => layoutRuntime.scrollElement,
-      getItemKey: (index) => rows()[index]?.id ?? index,
-      overscan: TRADING_ROW_OVERSCAN,
-      get enabled() {
-        return props.virtualScrollMode === 'tanstack'
-      },
-    },
+  const elementOptions = { table: model.table, virtualized }
+  const gridProps = createTradingGridProps(elementOptions)
+  const tableProps = createTradingTableElementProps(
+    elementOptions,
+    model.tableStyle,
   )
-  const virtualRows = rowVirtualizer.getVirtualItems
-  const visibleRange = createMemo(() => {
-    void virtualRows()
-    const rowCount = rows().length
-    const range = rowVirtualizer.range
-    if (
-      props.virtualScrollMode !== 'tanstack' ||
-      rowCount === 0 ||
-      range === null
-    ) {
-      return null
-    }
 
-    const lastRowIndex = rowCount - 1
-    const start = Math.min(range.startIndex, lastRowIndex)
-    return {
-      start,
-      end: Math.min(Math.max(start, range.endIndex), lastRowIndex),
-    }
-  })
-  createEffect(() => {
-    props.quotes
-    feed.completeRender()
-  })
-  createEffect(() => {
-    props.onRenderedRowCount(
-      props.virtualScrollMode === 'tanstack'
-        ? virtualRows().length
-        : rows().length,
-    )
-  })
-  onMount(() => {
-    const fitAvailableWidth = () => {
-      const scrollElement = layoutRuntime.scrollElement
-      if (!scrollElement || layoutRuntime.manuallyResized) return
-      const currentWidth = table.getTotalSize()
-      const availableWidth = scrollElement.clientWidth
-      if (availableWidth <= currentWidth + 1 || currentWidth <= 0) return
-
-      const ratio = availableWidth / currentWidth
-      table.setColumnSizing(
-        Object.fromEntries(
-          table
-            .getVisibleLeafColumns()
-            .map((column) => [column.id, column.getSize() * ratio]),
-        ),
-      )
-    }
-    const resizeObserver = new ResizeObserver(fitAvailableWidth)
-    const resizingSubscription = table.atoms.columnResizing.subscribe(
-      (state) => {
-        if (state.isResizingColumn !== false) {
-          layoutRuntime.manuallyResized = true
-        }
-      },
-    )
-    if (layoutRuntime.scrollElement) {
-      resizeObserver.observe(layoutRuntime.scrollElement)
-    }
-    fitAvailableWidth()
-
-    onCleanup(() => {
-      resizeObserver.disconnect()
-      resizingSubscription.unsubscribe()
-    })
-  })
-
-  const renderRow = (
-    row: Accessor<TradingRow>,
-    virtualRow?: Accessor<VirtualItem>,
-  ) => (
-    <tr
-      classList={{ 'virtual-table-row': virtualRow !== undefined }}
-      style={
-        virtualRow
-          ? { transform: `translateY(${virtualRow().start}px)` }
-          : undefined
-      }
-      data-virtual-index={virtualRow?.().index}
-      data-symbol={row().original.symbol}
-      data-row-id={row().original.id}
-      data-symbol-selected={
-        props.selectedSymbol === row().original.symbol ? 'true' : undefined
-      }
-      title={virtualRow ? undefined : row().original.company}
-      aria-selected={row().getIsSelected()}
-    >
-      <Index each={row().getVisibleCells()}>
-        {(cell) => {
-          const selectionEdges = createMemo(() => cell().getSelectionEdges())
-          return (
-            <td
-              style={{
-                width: `calc(var(--col-${cell().column.id}-size) * 1px)`,
-              }}
-              data-column-id={cell().column.id}
-              data-cell-focused={cell().getIsFocused() ? 'true' : undefined}
-              data-selection-top={selectionEdges().top ? 'true' : undefined}
-              data-selection-right={selectionEdges().right ? 'true' : undefined}
-              data-selection-bottom={
-                selectionEdges().bottom ? 'true' : undefined
-              }
-              data-selection-left={selectionEdges().left ? 'true' : undefined}
-              aria-selected={cell().getIsSelected()}
-              tabindex={cell().getTabIndex()}
-            >
-              <FlexRender cell={cell()} />
-            </td>
-          )
-        }}
-      </Index>
-    </tr>
-  )
+  createFeedCommitTracking(feed.state.quotes, feed.completeRender)
+  createTableAutoFit(model.table, scrollElement)
 
   return (
     <>
       <div
+        {...gridProps}
         ref={(element) => {
-          layoutRuntime.scrollElement = element
+          setScrollElement(element)
         }}
-        class="table-scroll"
-        classList={{ 'is-virtualized': props.virtualScrollMode === 'tanstack' }}
-        data-trading-table
-        tabindex={0}
-        onKeyDown={(event) => handleCellNavigation(table, event)}
       >
-        <table
-          class="trading-data-grid"
-          classList={{
-            'virtual-table': props.virtualScrollMode === 'tanstack',
-          }}
-          data-testid="trading-table"
-          role="grid"
-          aria-multiselectable="true"
-          style={tableStyle()}
-        >
-          <thead>
-            <For each={table.getHeaderGroups()}>
-              {(headerGroup) => (
-                <tr>
-                  <For each={headerGroup.headers}>
-                    {(header) => {
-                      const isLeaf = () => header.subHeaders.length === 0
-                      const sorted = () => header.column.getIsSorted()
-                      return (
-                        <th
-                          colSpan={header.colSpan}
-                          style={{
-                            width: `calc(var(--header-${header.id}-size) * 1px)`,
-                          }}
-                          aria-sort={
-                            isLeaf() ? sortAriaValue(sorted()) : undefined
-                          }
-                          classList={{
-                            'column-group-header': !isLeaf(),
-                            'numeric-header':
-                              isLeaf() && !isTextColumn(header.column.id),
-                          }}
-                        >
-                          <Show when={!header.isPlaceholder}>
-                            <Show
-                              when={isLeaf()}
-                              fallback={<FlexRender header={header} />}
-                            >
-                              <div
-                                class="leaf-header-content"
-                                onDragOver={(event) => {
-                                  event.preventDefault()
-                                  showColumnDropTarget(
-                                    dragRuntime,
-                                    header.column.id,
-                                    event.currentTarget.closest('th'),
-                                  )
-                                }}
-                                onDrop={(event) => {
-                                  event.preventDefault()
-                                  const sourceId =
-                                    event.dataTransfer?.getData('text/plain') ||
-                                    dragRuntime.columnId
-                                  if (sourceId) {
-                                    table.setColumnOrder(
-                                      reorderColumnIds(
-                                        table
-                                          .getVisibleLeafColumns()
-                                          .map((column) => column.id),
-                                        sourceId,
-                                        header.column.id,
-                                      ),
-                                    )
-                                  }
-                                  clearColumnDrag(dragRuntime)
-                                }}
-                              >
-                                <button
-                                  type="button"
-                                  class="column-drag-handle"
-                                  draggable={true}
-                                  aria-label={`Move ${header.column.id} column`}
-                                  onDragStart={(event) => {
-                                    dragRuntime.columnId = header.column.id
-                                    dragRuntime.sourceElement =
-                                      event.currentTarget.closest('th')
-                                    dragRuntime.sourceElement?.classList.add(
-                                      'is-column-dragging',
-                                    )
-                                    const dataTransfer = event.dataTransfer
-                                    if (!dataTransfer) return
-                                    dataTransfer.effectAllowed = 'move'
-                                    dataTransfer.setData(
-                                      'text/plain',
-                                      header.column.id,
-                                    )
-                                  }}
-                                  onDragEnd={() => {
-                                    clearColumnDrag(dragRuntime)
-                                  }}
-                                >
-                                  ⋮⋮
-                                </button>
-                                <button
-                                  type="button"
-                                  class="sort-header-button"
-                                  classList={{
-                                    'is-sortable': header.column.getCanSort(),
-                                  }}
-                                  disabled={!header.column.getCanSort()}
-                                  onClick={header.column.getToggleSortingHandler()}
-                                >
-                                  <span class="header-label">
-                                    <FlexRender header={header} />
-                                  </span>
-                                  <Show when={header.column.getCanSort()}>
-                                    <span
-                                      class="sort-indicator"
-                                      classList={{ 'is-active': !!sorted() }}
-                                      aria-hidden="true"
-                                    >
-                                      {sortIndicator(sorted())}
-                                    </span>
-                                  </Show>
-                                </button>
-                              </div>
-                              <Show when={header.column.getCanResize()}>
-                                <div
-                                  class="column-resize-handle"
-                                  classList={{
-                                    'is-resizing':
-                                      header.column.getIsResizing(),
-                                  }}
-                                  role="separator"
-                                  aria-orientation="vertical"
-                                  onDblClick={() => header.column.resetSize()}
-                                  onMouseDown={header.getResizeHandler()}
-                                  onTouchStart={header.getResizeHandler()}
-                                />
-                              </Show>
-                            </Show>
-                          </Show>
-                        </th>
-                      )
-                    }}
-                  </For>
-                </tr>
-              )}
-            </For>
-          </thead>
-          <tbody
-            classList={{
-              'virtual-table-body': props.virtualScrollMode === 'tanstack',
-            }}
-            style={
-              props.virtualScrollMode === 'tanstack'
-                ? { height: `${rows().length * TRADING_ROW_HEIGHT}px` }
-                : undefined
-            }
-            onMouseDown={(event) =>
-              pointerInteractions.handleMouseDown(
-                table,
-                event,
-                props.onSelectSymbol,
-              )
-            }
-            onPointerOver={(event) =>
-              pointerInteractions.handlePointerOver(table, event)
-            }
-            onMouseLeave={() => pointerInteractions.resetPointerCell()}
-            onClick={(event) => pointerInteractions.handleClick(table, event)}
-          >
-            <Show
-              when={props.virtualScrollMode === 'tanstack'}
-              fallback={<Index each={rows()}>{(row) => renderRow(row)}</Index>}
-            >
-              <Index each={virtualRows()}>
-                {(virtualRow) => {
-                  const row = createMemo(() => rows()[virtualRow().index])
-                  return renderRow(row, virtualRow)
-                }}
-              </Index>
-            </Show>
-          </tbody>
+        <table {...tableProps}>
+          <TradingTableHeader table={model.table} />
+          <TradingTableBody
+            table={model.table}
+            rows={model.rows}
+            columnVersion={model.columns}
+            selectedSymbol={state.selectedSymbol}
+            virtualized={virtualized}
+            virtualization={virtualization}
+            selectSymbol={actions.selectSymbol}
+          />
         </table>
       </div>
-      <Show when={props.virtualScrollMode === 'tanstack'}>
-        <footer
-          class="virtual-scroll-footer"
-          data-testid="virtual-scroll-footer"
-        >
-          <span>
-            TanStack · Total · {rows().length} rows ·{' '}
-            {table.getVisibleLeafColumns().length} columns
-          </span>
-          <span data-testid="visible-row-range">
-            <Show when={visibleRange()} fallback={'Current · rows —'}>
-              {(range) => `Current · rows ${range().start}..${range().end}`}
-            </Show>
-          </span>
-        </footer>
-      </Show>
+      <TradingTableFooter
+        table={model.table}
+        rows={model.rows}
+        virtualized={virtualized}
+        virtualization={virtualization}
+      />
     </>
   )
 }
-
-interface ColumnDragRuntime {
-  columnId: string | null
-  sourceElement: HTMLTableCellElement | null
-  targetElement: HTMLTableCellElement | null
-}
-
-interface TableLayoutRuntime {
-  manuallyResized: boolean
-  scrollElement: HTMLDivElement | null
-}
-
-function clearColumnDrag(runtime: ColumnDragRuntime): void {
-  runtime.sourceElement?.classList.remove('is-column-dragging')
-  runtime.targetElement?.classList.remove('is-column-drop-target')
-  runtime.columnId = null
-  runtime.sourceElement = null
-  runtime.targetElement = null
-}
-
-function showColumnDropTarget(
-  runtime: ColumnDragRuntime,
-  targetColumnId: string,
-  targetElement: HTMLTableCellElement | null,
-): void {
-  runtime.targetElement?.classList.remove('is-column-drop-target')
-  runtime.targetElement = null
-  if (runtime.columnId === targetColumnId || !targetElement) return
-  targetElement.classList.add('is-column-drop-target')
-  runtime.targetElement = targetElement
-}
-
-function isTextColumn(columnId: string): boolean {
-  return columnId === 'market' || columnId === 'name' || columnId === 'symbol'
-}
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
index ed848aaaf9..055a88087d 100644
--- a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,6 +30,11 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    const livePrice = table.locator('tbody tr').first().locator('td').nth(3)
+    const initialPrice = await livePrice.textContent()
+    await expect
+      .poll(() => livePrice.textContent())
+      .not.toBe(initialPrice)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
@@ -100,6 +105,40 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
     await expect(page.getByTestId('selected-instrument')).toContainText(
       selectedSymbol ?? '',
     )
+
+    await page.getByTestId('feed-toggle').click()
+    await expect(page.getByTestId('feed-toggle')).toHaveText('START FEED')
+    const dragStart = table.locator('tbody tr').nth(0).locator('td').nth(1)
+    const dragEnd = table.locator('tbody tr').nth(2).locator('td').nth(4)
+    const dragStartBox = await dragStart.boundingBox()
+    const dragEndBox = await dragEnd.boundingBox()
+    expect(dragStartBox).not.toBeNull()
+    expect(dragEndBox).not.toBeNull()
+    if (dragStartBox && dragEndBox) {
+      await page.mouse.move(
+        dragStartBox.x + dragStartBox.width / 2,
+        dragStartBox.y + dragStartBox.height / 2,
+      )
+      await page.mouse.down()
+      await page.mouse.move(
+        dragEndBox.x + dragEndBox.width / 2,
+        dragEndBox.y + dragEndBox.height / 2,
+        { steps: 12 },
+      )
+      await page.mouse.up()
+    }
+    await expect(table.locator('td[aria-selected="true"]')).toHaveCount(12)
+    await expect(table.locator('td[data-cell-focused="true"]')).toHaveCount(1)
+    await expect(table.locator('td[data-selection-top="true"]')).toHaveCount(4)
+    await expect(table.locator('td[data-selection-right="true"]')).toHaveCount(
+      3,
+    )
+    await expect(table.locator('td[data-selection-bottom="true"]')).toHaveCount(
+      4,
+    )
+    await expect(table.locator('td[data-selection-left="true"]')).toHaveCount(3)
+    await page.getByTestId('feed-toggle').click()
+
     await expect(page.getByTestId('feed-status')).toHaveText('FEED LIVE')
     await expect(instrumentCount.locator('option[value="150"]')).toHaveCount(1)
     await expect(instrumentCount.locator('option[value="350"]')).toHaveCount(1)
diff --git a/examples/svelte/realtime-trading/README.md b/examples/svelte/realtime-trading/README.md
index 3635a25f68..78c75b34c2 100644
--- a/examples/svelte/realtime-trading/README.md
+++ b/examples/svelte/realtime-trading/README.md
@@ -113,15 +113,33 @@ new table row-model pass.
 
 ## Diagnostics and interpretation
 
-The benchmark reports generated samples, worker messages, unique row updates,
-state applies, table commits, average mutation-to-render latency, long animation
-frames, mounted hosts, component lifecycle/execution rates, callbacks by
-column, DOM mutation records, row-model timing, and optional heap information.
+The sidebar starts with four cross-framework health signals: estimated rAF
+callbacks/s over one second, average snapshot-to-DOM-commit latency over three
+seconds, long animation frames accumulated since reset, and throughput as
+changed rows/s plus applied snapshots/s. “Changed rows” is deduplicated within
+each snapshot; the same instrument can count again in a later snapshot. The
+advanced diagnostics retain worker samples/messages, DOM commits, a rolling
+10-second p95/max commit latency, slow commits, lifecycle/execution rates,
+row-model timing, DOM mutation records, and optional heap information.
+
+The frame figure is deliberately labeled estimated: it counts this page's rAF
+callbacks, is capped by the display refresh rate, and falls when a tab is
+throttled. It is a portable responsiveness signal, not compositor-presented
+FPS.
+
+Svelte waits for `tick()` before closing a pending DOM-commit measurement. User
+Timing entries for commits and row-model work are sampled at one in 20 calls;
+the in-memory counters and latency windows still measure every call.
 
 Renderer callbacks and DOM mutations measure different layers. Heap growth is
-not automatically a leak; verify retained objects after GC. Use identical
-production settings, Chrome Performance, and Svelte DevTools when comparing
-runs.
+not automatically a leak; verify retained objects after GC. The heap value is
+Chromium-only and GC-sensitive, not retained size. The DOM rate counts
+`MutationRecord` objects rather than browser operations, and records may be
+coalesced; the observer watches text/child changes plus only `class`/`style`
+attributes to reduce its own overhead. Non-feed text/child changes and
+interaction-driven `class`/`style` changes (including virtual scrolling) are
+included, so this is not a feed-only rate. Use identical production settings,
+Chrome Performance, and Svelte DevTools when comparing runs.
 
 ## Standalone policy
 
diff --git a/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
index 9eea493fec..61cf012542 100644
--- a/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -9,6 +9,15 @@ export interface NamedInvocationRate {
   callsPerSecond: number
 }
 
+interface TimedLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const averageLatencyWindowMs = 3_000
+const percentileLatencyWindowMs = 10_000
+const frameRateWindowMs = 1_000
+
 export interface FeedMetrics {
   actualTicksPerSecond: number
   rowUpdatesPerSecond: number
@@ -17,12 +26,12 @@ export interface FeedMetrics {
   supersededUpdatesPerSecond: number
   totalTicks: number
   rafCallbacksPerSecond: number
-  tableRendersPerSecond: number
+  tableCommitsPerSecond: number
   lastBatchSize: number
-  averageRenderMs: number
-  p95RenderMs: number
-  maxRenderMs: number
-  slowRenders: number
+  averageCommitLatencyMs: number
+  p95CommitLatencyMs: number
+  maxCommitLatencyMs: number
+  slowCommits: number
   longAnimationFrames: number
   worstLongAnimationFrameMs: number
   heapMb: number | null
@@ -49,12 +58,12 @@ export const initialMetrics: FeedMetrics = {
   supersededUpdatesPerSecond: 0,
   totalTicks: 0,
   rafCallbacksPerSecond: 0,
-  tableRendersPerSecond: 0,
+  tableCommitsPerSecond: 0,
   lastBatchSize: 0,
-  averageRenderMs: 0,
-  p95RenderMs: 0,
-  maxRenderMs: 0,
-  slowRenders: 0,
+  averageCommitLatencyMs: 0,
+  p95CommitLatencyMs: 0,
+  maxCommitLatencyMs: 0,
+  slowCommits: 0,
   longAnimationFrames: 0,
   worstLongAnimationFrameMs: 0,
   heapMb: null,
@@ -73,7 +82,7 @@ export const initialMetrics: FeedMetrics = {
   visibleRows: 0,
 }
 
-const userTiming = { entryCount: 0 }
+const userTiming = { entryCount: 0, measureCalls: 0 }
 
 export function recordMeasure(
   name: string,
@@ -81,11 +90,13 @@ export function recordMeasure(
   end: number,
   detail: Record<string, unknown>,
 ): void {
+  userTiming.measureCalls++
+  if (userTiming.measureCalls % 20 !== 0) return
   try {
     performance.measure(name, { start, end, detail })
     userTiming.entryCount++
     if (userTiming.entryCount % 1_000 === 0) {
-      performance.clearMeasures('market-update-to-layout-commit')
+      performance.clearMeasures('market-update-to-dom-commit')
     }
   } catch {
     // User Timing Level 3 options are not implemented in every browser.
@@ -110,8 +121,10 @@ export function markBenchmarkAction(
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
-    pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    sessionStartedAt: performance.now(),
+    pendingMutationStartedAt: null as number | null,
+    commitLatencySamples: [] as Array<TimedLatencySample>,
+    slowCommitCount: 0,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -121,8 +134,9 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
-    tableRendersInSample: 0,
+    frameTrackingStartedAt: performance.now(),
+    frameTimestamps: [] as Array<number>,
+    tableCommitsInSample: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -138,23 +152,28 @@ export class BenchmarkMonitor {
     previousRowModelDuration: 0,
   }
 
-  markRenderPending(): void {
-    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  markCommitPending(): void {
+    this.#runtime.pendingMutationStartedAt ??= performance.now()
   }
 
-  recordCompletedRender(): void {
+  recordDomCommit(): void {
     const runtime = this.#runtime
-    if (runtime.pendingRenderStartedAt !== null) {
-      const renderEndedAt = performance.now()
-      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+    if (runtime.pendingMutationStartedAt !== null) {
+      const commitEndedAt = performance.now()
+      const duration = commitEndedAt - runtime.pendingMutationStartedAt
+      runtime.commitLatencySamples.push({
+        recordedAt: commitEndedAt,
+        duration,
+      })
+      if (duration > 16.7) runtime.slowCommitCount++
       recordMeasure(
-        'market-update-to-layout-commit',
-        runtime.pendingRenderStartedAt,
-        renderEndedAt,
+        'market-update-to-dom-commit',
+        runtime.pendingMutationStartedAt,
+        commitEndedAt,
         {},
       )
-      runtime.pendingRenderStartedAt = null
-      runtime.tableRendersInSample++
+      runtime.pendingMutationStartedAt = null
+      runtime.tableCommitsInSample++
     }
   }
 
@@ -178,12 +197,15 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    const timestamps = this.#runtime.frameTimestamps
+    timestamps.push(now)
+    pruneFrameTimestamps(timestamps, now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -206,8 +228,15 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const renderSamples = runtime.renderSamples
-    const sortedRenderSamples = [...renderSamples].sort(
+    pruneLatencySamples(runtime.commitLatencySamples, now)
+    pruneFrameTimestamps(runtime.frameTimestamps, now)
+    const averageCommitLatencySamples = runtime.commitLatencySamples
+      .filter((sample) => sample.recordedAt >= now - averageLatencyWindowMs)
+      .map((sample) => sample.duration)
+    const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
+      (sample) => sample.duration,
+    )
+    const sortedCommitLatencySamples = [...percentileCommitLatencySamples].sort(
       (left, right) => left - right,
     )
     const rowModelCalls =
@@ -230,14 +259,14 @@ export class BenchmarkMonitor {
       runtime.previousComponentRenderCallsByName,
       sampleDuration,
     )
-    const averageRenderMs =
-      renderSamples.length === 0
+    const averageCommitLatencyMs =
+      averageCommitLatencySamples.length === 0
         ? 0
-        : renderSamples.reduce((sum, value) => sum + value, 0) /
-          renderSamples.length
+        : averageCommitLatencySamples.reduce((sum, value) => sum + value, 0) /
+          averageCommitLatencySamples.length
     const p95Index = Math.max(
       0,
-      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+      Math.ceil(sortedCommitLatencySamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
       actualTicksPerSecond:
@@ -254,14 +283,18 @@ export class BenchmarkMonitor {
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
-      tableRendersPerSecond:
-        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+        calculateFrameRate(
+          runtime.frameTimestamps,
+          runtime.frameTrackingStartedAt,
+          now,
+        ),
+      tableCommitsPerSecond:
+        (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
-      averageRenderMs,
-      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
-      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      averageCommitLatencyMs,
+      p95CommitLatencyMs: sortedCommitLatencySamples[p95Index] ?? 0,
+      maxCommitLatencyMs: sortedCommitLatencySamples.at(-1) ?? 0,
+      slowCommits: runtime.slowCommitCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -301,17 +334,17 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.tableCommitsInSample = 0
     return metrics
   }
 
   reset(): void {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
-    runtime.pendingRenderStartedAt = null
-    runtime.renderSamples = []
+    runtime.sessionStartedAt = runtime.sampleStartedAt
+    runtime.pendingMutationStartedAt = null
+    runtime.commitLatencySamples = []
+    runtime.slowCommitCount = 0
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -321,8 +354,9 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
+    runtime.tableCommitsInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
@@ -366,3 +400,36 @@ function calculateInvocationRates(
         : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
   }))
 }
+
+function pruneLatencySamples(
+  samples: Array<TimedLatencySample>,
+  now: number,
+): void {
+  const cutoff = now - percentileLatencyWindowMs
+  const firstRetainedIndex = samples.findIndex(
+    (sample) => sample.recordedAt >= cutoff,
+  )
+  if (firstRetainedIndex > 0) samples.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) samples.length = 0
+}
+
+function pruneFrameTimestamps(timestamps: Array<number>, now: number): void {
+  const cutoff = now - frameRateWindowMs
+  const firstRetainedIndex = timestamps.findIndex(
+    (timestamp) => timestamp >= cutoff,
+  )
+  if (firstRetainedIndex > 0) timestamps.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) timestamps.length = 0
+}
+
+function calculateFrameRate(
+  timestamps: ReadonlyArray<number>,
+  trackingStartedAt: number,
+  now: number,
+): number {
+  const observedWindowMs = Math.min(
+    frameRateWindowMs,
+    Math.max(1, now - trackingStartedAt),
+  )
+  return (timestamps.length / observedWindowMs) * 1_000
+}
diff --git a/examples/svelte/realtime-trading/src/benchmark/table-benchmark.ts b/examples/svelte/realtime-trading/src/benchmark/table-benchmark.ts
index 7115e9e7bb..346a6cdc0c 100644
--- a/examples/svelte/realtime-trading/src/benchmark/table-benchmark.ts
+++ b/examples/svelte/realtime-trading/src/benchmark/table-benchmark.ts
@@ -14,6 +14,7 @@ export function startTableBenchmark(
   })
   observer.observe(tableBody, {
     attributes: true,
+    attributeFilter: ['class', 'style'],
     characterData: true,
     childList: true,
     subtree: true,
diff --git a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 604d8efe42..f1ea4ab5bc 100644
--- a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -101,7 +101,10 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
+            this.monitor.recordLongAnimationFrame(
+              entry.duration,
+              entry.startTime,
+            )
           }
         })
       : null
@@ -109,14 +112,13 @@ export class TradingBenchmarkController {
     this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
     this.#runtime.stopObservingFeed = this.feed.observe({
       messageReceived: () => this.monitor.recordWorkerMessage(),
-      mutationStarted: () => this.monitor.markRenderPending(),
+      mutationStarted: () => this.monitor.markCommitPending(),
       batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
         this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
-      renderCommitted: () => this.monitor.recordCompletedRender(),
+      renderCommitted: () => this.monitor.recordDomCommit(),
     })
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
 
@@ -132,7 +134,7 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
+    this.monitor.recordAnimationFrame(now)
     if (this.monitor.shouldPublish(now)) {
       this.#publishMetrics(this.monitor.publish(now))
     }
diff --git a/examples/svelte/realtime-trading/src/index.css b/examples/svelte/realtime-trading/src/index.css
index 20264402de..69cba52fa7 100644
--- a/examples/svelte/realtime-trading/src/index.css
+++ b/examples/svelte/realtime-trading/src/index.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/examples/svelte/realtime-trading/src/shell/Configurator.svelte b/examples/svelte/realtime-trading/src/shell/Configurator.svelte
index 87a903fb9b..806cf4fa06 100644
--- a/examples/svelte/realtime-trading/src/shell/Configurator.svelte
+++ b/examples/svelte/realtime-trading/src/shell/Configurator.svelte
@@ -5,6 +5,7 @@
   import { configuratorOptions } from './configurator-options'
   import { useMarketFeedController, useTradingShellController } from './trading-shell-context'
   import Diagnostics from './Diagnostics.svelte'
+  import MetricsStrip from './MetricsStrip.svelte'
   import SelectedInstrument from './SelectedInstrument.svelte'
 
   const controller = useTradingShellController()
@@ -27,6 +28,7 @@
 
 <aside id="benchmark-configurator" class="configurator" aria-label="Benchmark configurator">
   <header><span>CONFIGURATOR</span><small>RUN PARAMETERS</small></header>
+  <MetricsStrip />
   <section class="config-section" aria-labelledby="feed-settings"><h2 id="feed-settings">FEED</h2>
     <button class="primary-action" type="button" data-testid="feed-toggle" onclick={feed.actions.toggle}>{running.current ? 'PAUSE FEED' : 'START FEED'}</button>
     <label class="field"><span>Instruments (rows)</span><select data-testid="instrument-count-select" value={instrumentCount.current} onchange={(event) => { controller.actions.resetViewState(); feed.actions.setInstrumentCount(numberValue(event)) }}>{#each configuratorOptions.instrumentCounts as option (option.value)}<option value={option.value}>{option.label}</option>{/each}</select></label>
diff --git a/examples/svelte/realtime-trading/src/shell/Diagnostics.svelte b/examples/svelte/realtime-trading/src/shell/Diagnostics.svelte
index dcfe131286..8faf513bd6 100644
--- a/examples/svelte/realtime-trading/src/shell/Diagnostics.svelte
+++ b/examples/svelte/realtime-trading/src/shell/Diagnostics.svelte
@@ -13,6 +13,12 @@
   }
   const metrics = $derived(state.current.metrics)
   const items = $derived([
+    ['Worker samples / s', rate.format(metrics.actualTicksPerSecond), 'actual-rate'],
+    ['Worker messages / s', metrics.workerMessagesPerSecond.toFixed(1), 'message-rate'],
+    ['Changed rows / s', rate.format(metrics.rowUpdatesPerSecond), 'row-update-rate'],
+    ['Snapshots applied / s', metrics.stateApplicationsPerSecond.toFixed(1), 'state-apply-rate'],
+    ['DOM commits / s', metrics.tableCommitsPerSecond.toFixed(1), 'table-render-rate'],
+    ['P95 / max commit latency', `${ms(metrics.p95CommitLatencyMs)} / ${ms(metrics.maxCommitLatencyMs)}`],
     ['Mounted cells', integer.format(state.current.mountedCells)],
     ['Live components', integer.format(state.current.liveComponents)],
     ['Created / destroyed', `${integer.format(metrics.componentsCreated)} / ${integer.format(metrics.componentsDestroyed)}`],
@@ -20,15 +26,15 @@
     ['Component executions / s', rate.format(metrics.componentRenderCallsPerSecond), 'component-render-rate'],
     ['Executions by component / s', invocationRates(metrics.componentRenderRates), 'component-render-breakdown'],
     ['Callbacks by column / s', invocationRates(metrics.cellRendererRates), 'cell-render-breakdown'],
-    ['DOM mutation records / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'],
+    ['Observed MutationRecords / s', rate.format(metrics.domMutationsPerSecond), 'dom-mutation-rate'],
     ['Core row model calls / s', metrics.rowModelCallsPerSecond.toFixed(1), 'row-model-call-rate'],
     ['Core row model avg / max', `${ms(metrics.rowModelAverageMs)} / ${ms(metrics.rowModelMaxMs)}`, 'row-model-duration'],
     ['Visible rows', integer.format(metrics.visibleRows), 'visible-row-count'],
     ['Worker messages', integer.format(metrics.workerMessages), 'worker-messages'],
     ['Worker-coalesced updates / s', rate.format(metrics.supersededUpdatesPerSecond), 'superseded-update-rate'],
     ['Last samples / updated rows', `${integer.format(metrics.lastBatchSize)} / ${integer.format(metrics.lastUpdateCount)}`],
-    ['Renders > 16.7 ms', integer.format(metrics.slowRenders)],
-    ['JS heap', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`],
+    ['Commits > 16.7 ms', integer.format(metrics.slowCommits)],
+    ['JS heap (GC-sensitive)', metrics.heapMb === null ? 'N/A' : `${metrics.heapMb.toFixed(1)} MB`],
   ] as const)
 </script>
 
diff --git a/examples/svelte/realtime-trading/src/shell/MarketStatusbar.svelte b/examples/svelte/realtime-trading/src/shell/MarketStatusbar.svelte
index 01cbf5e1b6..21032c6d14 100644
--- a/examples/svelte/realtime-trading/src/shell/MarketStatusbar.svelte
+++ b/examples/svelte/realtime-trading/src/shell/MarketStatusbar.svelte
@@ -7,7 +7,7 @@
 
 <footer class="market-statusbar">
   <span>MESSAGE SAMPLES <strong>{integer.format(state.current.metrics.lastBatchSize)}</strong></span>
-  <span>ROW UPDATES <strong>{integer.format(state.current.metrics.lastUpdateCount)}</strong></span>
+  <span>CHANGED ROWS <strong>{integer.format(state.current.metrics.lastUpdateCount)}</strong></span>
   <span>HOSTS <strong>{integer.format(state.current.mountedCells)}</strong></span>
   <span>COMPONENTS <strong>{integer.format(state.current.liveComponents)}</strong></span>
 </footer>
diff --git a/examples/svelte/realtime-trading/src/shell/MetricsStrip.svelte b/examples/svelte/realtime-trading/src/shell/MetricsStrip.svelte
index 822bd621a9..3ab0f30117 100644
--- a/examples/svelte/realtime-trading/src/shell/MetricsStrip.svelte
+++ b/examples/svelte/realtime-trading/src/shell/MetricsStrip.svelte
@@ -6,17 +6,14 @@
   const formatMs = (value: number) => `${value.toFixed(2)} ms`
   const metrics = $derived(state.current.metrics)
   const items = $derived([
-    { label: 'WORKER SAMPLES', value: rate.format(metrics.actualTicksPerSecond), detail: 'generated samples/s', testId: 'actual-rate' },
-    { label: 'ROW UPDATES', value: rate.format(metrics.rowUpdatesPerSecond), detail: 'unique rows applied/s', testId: 'row-update-rate' },
-    { label: 'MESSAGES', value: metrics.workerMessagesPerSecond.toFixed(1), detail: 'worker messages/s', testId: 'message-rate' },
-    { label: 'STATE APPLIES', value: metrics.stateApplicationsPerSecond.toFixed(1), detail: 'quote snapshots/s', testId: 'state-apply-rate' },
-    { label: 'TABLE COMMITS', value: metrics.tableRendersPerSecond.toFixed(1), detail: 'completed renders/s', testId: 'table-render-rate' },
-    { label: 'AVG RENDER', value: formatMs(metrics.averageRenderMs), detail: 'mutation → render' },
-    { label: 'P95 RENDER', value: formatMs(metrics.p95RenderMs), detail: `max ${formatMs(metrics.maxRenderMs)}` },
-    { label: 'LONG FRAMES', value: state.current.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', detail: state.current.longAnimationFramesSupported ? `worst ${formatMs(metrics.worstLongAnimationFrameMs)}` : 'unsupported', testId: 'long-frame-count' },
+    { label: 'FRAME RATE (EST.)', value: metrics.rafCallbacksPerSecond.toFixed(1), detail: 'rAF callbacks/s · rolling 1 s', testId: 'frame-rate' },
+    { label: 'AVG COMMIT', value: formatMs(metrics.averageCommitLatencyMs), detail: 'snapshot → DOM · rolling 3 s', testId: 'average-commit-latency' },
+    { label: 'LONG FRAMES', value: state.current.longAnimationFramesSupported ? String(metrics.longAnimationFrames) : 'N/A', detail: state.current.longAnimationFramesSupported ? `since reset · worst ${formatMs(metrics.worstLongAnimationFrameMs)}` : 'unsupported by this browser', testId: 'long-frame-count' },
   ])
 </script>
 
-<section class="metrics-strip" aria-label="Live performance metrics">
+<section class="metrics-strip" aria-labelledby="live-health">
+  <h2 id="live-health">LIVE HEALTH</h2>
   {#each items as item (item.label)}<article><span>{item.label}</span><strong data-testid={item.testId}>{item.value}</strong><small>{item.detail}</small></article>{/each}
+  <article><span>THROUGHPUT</span><strong data-testid="throughput-rate">{rate.format(metrics.rowUpdatesPerSecond)} rows/s</strong><small>{metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s · rows deduplicated per snapshot</small></article>
 </section>
diff --git a/examples/svelte/realtime-trading/src/shell/TradingShell.svelte b/examples/svelte/realtime-trading/src/shell/TradingShell.svelte
index 3706e48085..6406fa8b71 100644
--- a/examples/svelte/realtime-trading/src/shell/TradingShell.svelte
+++ b/examples/svelte/realtime-trading/src/shell/TradingShell.svelte
@@ -3,14 +3,13 @@
   import AppHeader from './AppHeader.svelte'
   import Configurator from './Configurator.svelte'
   import MarketStatusbar from './MarketStatusbar.svelte'
-  import MetricsStrip from './MetricsStrip.svelte'
   const { children }: { children: Snippet } = $props()
   const layout = $state({ sidebarOpen: true })
 </script>
 
 <main class:is-sidebar-collapsed={!layout.sidebarOpen} class="trading-terminal">
   <div class="shell-header"><AppHeader sidebarOpen={layout.sidebarOpen} onSidebarToggle={() => { layout.sidebarOpen = !layout.sidebarOpen }} />{#if import.meta.env.DEV}<aside class="development-warning">DEV BUILD — use the production build before recording results.</aside>{/if}</div>
-  <section class="market-panel" aria-label="Live synthetic quotes"><MetricsStrip />{@render children()}</section>
+  <section class="market-panel" aria-label="Live synthetic quotes">{@render children()}</section>
   <MarketStatusbar />
   <div class="sidebar-slot">{#if layout.sidebarOpen}<Configurator />{/if}</div>
 </main>
diff --git a/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts b/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
index 750f738782..9163e9022f 100644
--- a/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
+++ b/examples/svelte/realtime-trading/src/table/table-config/trading-columns.ts
@@ -216,14 +216,19 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
     duration,
   )
   rowModelDiagnostics.lastRowCount = rows.length
-  try {
-    performance.measure('tanstack-row-model', {
-      start,
-      end,
-      detail: { rowCount: rows.length },
-    })
-  } catch {
-    /* User Timing Level 3 is optional. */
+  if (rowModelDiagnostics.calls % 20 === 0) {
+    try {
+      performance.measure('tanstack-row-model', {
+        start,
+        end,
+        detail: { rowCount: rows.length },
+      })
+      if (rowModelDiagnostics.calls % 20_000 === 0) {
+        performance.clearMeasures('tanstack-row-model')
+      }
+    } catch {
+      /* User Timing Level 3 is optional. */
+    }
   }
   return rows
 }
diff --git a/examples/vue/realtime-trading/README.md b/examples/vue/realtime-trading/README.md
index f07a049f7e..4a60a3e072 100644
--- a/examples/vue/realtime-trading/README.md
+++ b/examples/vue/realtime-trading/README.md
@@ -116,16 +116,34 @@ changes.
 
 ## Diagnostics and interpretation
 
-The monitor records generated samples, worker messages, unique row updates,
-state applies, table commits, average mutation-to-render latency, long animation
-frames, mounted hosts, component creation/destruction and execution, cell
-callbacks by column, DOM mutation records, core row-model timing, and optional
-heap data.
+The sidebar starts with four cross-framework health signals: estimated rAF
+callbacks/s over one second, average snapshot-to-DOM-commit latency over three
+seconds, long animation frames accumulated since reset, and throughput as
+changed rows/s plus applied snapshots/s. “Changed rows” is deduplicated within
+each snapshot; the same instrument can count again in a later snapshot. The
+advanced diagnostics retain worker samples/messages, DOM commits, a rolling
+10-second p95/max commit latency, slow commits, lifecycle/execution rates,
+row-model timing, DOM mutation records, and optional heap data.
+
+The frame figure is deliberately labeled estimated: it counts this page's rAF
+callbacks, is capped by the display refresh rate, and falls when a tab is
+throttled. It is a portable responsiveness signal, not compositor-presented
+FPS.
+
+Vue closes the pending measurement from the table's mounted/updated commit
+hooks. User Timing entries for commits and row-model work are sampled at one in
+20 calls; the in-memory counters and latency windows still measure every call.
 
 Callback counts are not DOM mutation counts. Temporary heap growth during the
-swap workload is not a leak unless post-GC snapshots retain instances. Compare
-identical production configurations and use Chrome Performance plus Vue
-DevTools for call stacks and component detail.
+swap workload is not a leak unless post-GC snapshots retain instances. The heap
+value is Chromium-only and GC-sensitive, not retained size. The DOM rate counts
+`MutationRecord` objects rather than browser operations, and records may be
+coalesced; the observer watches text/child changes plus only `class`/`style`
+attributes to limit its own overhead. Non-feed text/child changes and
+interaction-driven `class`/`style` changes (including virtual scrolling) are
+included, so this is not a feed-only rate. Compare identical production
+configurations and use Chrome Performance plus Vue DevTools for call stacks and
+component detail.
 
 ## Standalone policy
 
diff --git a/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
index 9eea493fec..61cf012542 100644
--- a/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -9,6 +9,15 @@ export interface NamedInvocationRate {
   callsPerSecond: number
 }
 
+interface TimedLatencySample {
+  recordedAt: number
+  duration: number
+}
+
+const averageLatencyWindowMs = 3_000
+const percentileLatencyWindowMs = 10_000
+const frameRateWindowMs = 1_000
+
 export interface FeedMetrics {
   actualTicksPerSecond: number
   rowUpdatesPerSecond: number
@@ -17,12 +26,12 @@ export interface FeedMetrics {
   supersededUpdatesPerSecond: number
   totalTicks: number
   rafCallbacksPerSecond: number
-  tableRendersPerSecond: number
+  tableCommitsPerSecond: number
   lastBatchSize: number
-  averageRenderMs: number
-  p95RenderMs: number
-  maxRenderMs: number
-  slowRenders: number
+  averageCommitLatencyMs: number
+  p95CommitLatencyMs: number
+  maxCommitLatencyMs: number
+  slowCommits: number
   longAnimationFrames: number
   worstLongAnimationFrameMs: number
   heapMb: number | null
@@ -49,12 +58,12 @@ export const initialMetrics: FeedMetrics = {
   supersededUpdatesPerSecond: 0,
   totalTicks: 0,
   rafCallbacksPerSecond: 0,
-  tableRendersPerSecond: 0,
+  tableCommitsPerSecond: 0,
   lastBatchSize: 0,
-  averageRenderMs: 0,
-  p95RenderMs: 0,
-  maxRenderMs: 0,
-  slowRenders: 0,
+  averageCommitLatencyMs: 0,
+  p95CommitLatencyMs: 0,
+  maxCommitLatencyMs: 0,
+  slowCommits: 0,
   longAnimationFrames: 0,
   worstLongAnimationFrameMs: 0,
   heapMb: null,
@@ -73,7 +82,7 @@ export const initialMetrics: FeedMetrics = {
   visibleRows: 0,
 }
 
-const userTiming = { entryCount: 0 }
+const userTiming = { entryCount: 0, measureCalls: 0 }
 
 export function recordMeasure(
   name: string,
@@ -81,11 +90,13 @@ export function recordMeasure(
   end: number,
   detail: Record<string, unknown>,
 ): void {
+  userTiming.measureCalls++
+  if (userTiming.measureCalls % 20 !== 0) return
   try {
     performance.measure(name, { start, end, detail })
     userTiming.entryCount++
     if (userTiming.entryCount % 1_000 === 0) {
-      performance.clearMeasures('market-update-to-layout-commit')
+      performance.clearMeasures('market-update-to-dom-commit')
     }
   } catch {
     // User Timing Level 3 options are not implemented in every browser.
@@ -110,8 +121,10 @@ export function markBenchmarkAction(
 export class BenchmarkMonitor {
   readonly #runtime = {
     sampleStartedAt: performance.now(),
-    pendingRenderStartedAt: null as number | null,
-    renderSamples: [] as Array<number>,
+    sessionStartedAt: performance.now(),
+    pendingMutationStartedAt: null as number | null,
+    commitLatencySamples: [] as Array<TimedLatencySample>,
+    slowCommitCount: 0,
     totalTicks: 0,
     ticksInSample: 0,
     rowUpdatesInSample: 0,
@@ -121,8 +134,9 @@ export class BenchmarkMonitor {
     lastBatchSize: 0,
     lastUpdateCount: 0,
     workerMessages: 0,
-    rafCallbacksInSample: 0,
-    tableRendersInSample: 0,
+    frameTrackingStartedAt: performance.now(),
+    frameTimestamps: [] as Array<number>,
+    tableCommitsInSample: 0,
     longAnimationFrameCount: 0,
     worstLongAnimationFrameMs: 0,
     previousCellRendererCalls: 0,
@@ -138,23 +152,28 @@ export class BenchmarkMonitor {
     previousRowModelDuration: 0,
   }
 
-  markRenderPending(): void {
-    this.#runtime.pendingRenderStartedAt ??= performance.now()
+  markCommitPending(): void {
+    this.#runtime.pendingMutationStartedAt ??= performance.now()
   }
 
-  recordCompletedRender(): void {
+  recordDomCommit(): void {
     const runtime = this.#runtime
-    if (runtime.pendingRenderStartedAt !== null) {
-      const renderEndedAt = performance.now()
-      runtime.renderSamples.push(renderEndedAt - runtime.pendingRenderStartedAt)
+    if (runtime.pendingMutationStartedAt !== null) {
+      const commitEndedAt = performance.now()
+      const duration = commitEndedAt - runtime.pendingMutationStartedAt
+      runtime.commitLatencySamples.push({
+        recordedAt: commitEndedAt,
+        duration,
+      })
+      if (duration > 16.7) runtime.slowCommitCount++
       recordMeasure(
-        'market-update-to-layout-commit',
-        runtime.pendingRenderStartedAt,
-        renderEndedAt,
+        'market-update-to-dom-commit',
+        runtime.pendingMutationStartedAt,
+        commitEndedAt,
         {},
       )
-      runtime.pendingRenderStartedAt = null
-      runtime.tableRendersInSample++
+      runtime.pendingMutationStartedAt = null
+      runtime.tableCommitsInSample++
     }
   }
 
@@ -178,12 +197,15 @@ export class BenchmarkMonitor {
     runtime.supersededUpdatesInSample += supersededUpdateCount
   }
 
-  recordAnimationFrame(): void {
-    this.#runtime.rafCallbacksInSample++
+  recordAnimationFrame(now: number): void {
+    const timestamps = this.#runtime.frameTimestamps
+    timestamps.push(now)
+    pruneFrameTimestamps(timestamps, now)
   }
 
-  recordLongAnimationFrame(duration: number): void {
+  recordLongAnimationFrame(duration: number, startTime: number): void {
     const runtime = this.#runtime
+    if (startTime < runtime.sessionStartedAt) return
     runtime.longAnimationFrameCount++
     runtime.worstLongAnimationFrameMs = Math.max(
       runtime.worstLongAnimationFrameMs,
@@ -206,8 +228,15 @@ export class BenchmarkMonitor {
   publish(now: number): FeedMetrics {
     const runtime = this.#runtime
     const sampleDuration = now - runtime.sampleStartedAt
-    const renderSamples = runtime.renderSamples
-    const sortedRenderSamples = [...renderSamples].sort(
+    pruneLatencySamples(runtime.commitLatencySamples, now)
+    pruneFrameTimestamps(runtime.frameTimestamps, now)
+    const averageCommitLatencySamples = runtime.commitLatencySamples
+      .filter((sample) => sample.recordedAt >= now - averageLatencyWindowMs)
+      .map((sample) => sample.duration)
+    const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
+      (sample) => sample.duration,
+    )
+    const sortedCommitLatencySamples = [...percentileCommitLatencySamples].sort(
       (left, right) => left - right,
     )
     const rowModelCalls =
@@ -230,14 +259,14 @@ export class BenchmarkMonitor {
       runtime.previousComponentRenderCallsByName,
       sampleDuration,
     )
-    const averageRenderMs =
-      renderSamples.length === 0
+    const averageCommitLatencyMs =
+      averageCommitLatencySamples.length === 0
         ? 0
-        : renderSamples.reduce((sum, value) => sum + value, 0) /
-          renderSamples.length
+        : averageCommitLatencySamples.reduce((sum, value) => sum + value, 0) /
+          averageCommitLatencySamples.length
     const p95Index = Math.max(
       0,
-      Math.ceil(sortedRenderSamples.length * 0.95) - 1,
+      Math.ceil(sortedCommitLatencySamples.length * 0.95) - 1,
     )
     const metrics: FeedMetrics = {
       actualTicksPerSecond:
@@ -254,14 +283,18 @@ export class BenchmarkMonitor {
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
       rafCallbacksPerSecond:
-        (runtime.rafCallbacksInSample / sampleDuration) * 1_000,
-      tableRendersPerSecond:
-        (runtime.tableRendersInSample / sampleDuration) * 1_000,
+        calculateFrameRate(
+          runtime.frameTimestamps,
+          runtime.frameTrackingStartedAt,
+          now,
+        ),
+      tableCommitsPerSecond:
+        (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
-      averageRenderMs,
-      p95RenderMs: sortedRenderSamples[p95Index] ?? 0,
-      maxRenderMs: sortedRenderSamples.at(-1) ?? 0,
-      slowRenders: renderSamples.filter((value) => value > 16.7).length,
+      averageCommitLatencyMs,
+      p95CommitLatencyMs: sortedCommitLatencySamples[p95Index] ?? 0,
+      maxCommitLatencyMs: sortedCommitLatencySamples.at(-1) ?? 0,
+      slowCommits: runtime.slowCommitCount,
       longAnimationFrames: runtime.longAnimationFrameCount,
       worstLongAnimationFrameMs: runtime.worstLongAnimationFrameMs,
       heapMb: readHeapSizeMb(),
@@ -301,17 +334,17 @@ export class BenchmarkMonitor {
     runtime.workerMessagesInSample = 0
     runtime.stateApplicationsInSample = 0
     runtime.supersededUpdatesInSample = 0
-    runtime.renderSamples = []
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.tableCommitsInSample = 0
     return metrics
   }
 
   reset(): void {
     const runtime = this.#runtime
     runtime.sampleStartedAt = performance.now()
-    runtime.pendingRenderStartedAt = null
-    runtime.renderSamples = []
+    runtime.sessionStartedAt = runtime.sampleStartedAt
+    runtime.pendingMutationStartedAt = null
+    runtime.commitLatencySamples = []
+    runtime.slowCommitCount = 0
     runtime.totalTicks = 0
     runtime.ticksInSample = 0
     runtime.rowUpdatesInSample = 0
@@ -321,8 +354,9 @@ export class BenchmarkMonitor {
     runtime.lastBatchSize = 0
     runtime.lastUpdateCount = 0
     runtime.workerMessages = 0
-    runtime.rafCallbacksInSample = 0
-    runtime.tableRendersInSample = 0
+    runtime.frameTrackingStartedAt = runtime.sampleStartedAt
+    runtime.frameTimestamps = []
+    runtime.tableCommitsInSample = 0
     runtime.longAnimationFrameCount = 0
     runtime.worstLongAnimationFrameMs = 0
     runtime.previousCellRendererCalls = quoteRenderDiagnostics.cellRendererCalls
@@ -366,3 +400,36 @@ function calculateInvocationRates(
         : ((calls - (previous[name] ?? 0)) / sampleDuration) * 1_000,
   }))
 }
+
+function pruneLatencySamples(
+  samples: Array<TimedLatencySample>,
+  now: number,
+): void {
+  const cutoff = now - percentileLatencyWindowMs
+  const firstRetainedIndex = samples.findIndex(
+    (sample) => sample.recordedAt >= cutoff,
+  )
+  if (firstRetainedIndex > 0) samples.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) samples.length = 0
+}
+
+function pruneFrameTimestamps(timestamps: Array<number>, now: number): void {
+  const cutoff = now - frameRateWindowMs
+  const firstRetainedIndex = timestamps.findIndex(
+    (timestamp) => timestamp >= cutoff,
+  )
+  if (firstRetainedIndex > 0) timestamps.splice(0, firstRetainedIndex)
+  else if (firstRetainedIndex === -1) timestamps.length = 0
+}
+
+function calculateFrameRate(
+  timestamps: ReadonlyArray<number>,
+  trackingStartedAt: number,
+  now: number,
+): number {
+  const observedWindowMs = Math.min(
+    frameRateWindowMs,
+    Math.max(1, now - trackingStartedAt),
+  )
+  return (timestamps.length / observedWindowMs) * 1_000
+}
diff --git a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 604d8efe42..f1ea4ab5bc 100644
--- a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -101,7 +101,10 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration)
+            this.monitor.recordLongAnimationFrame(
+              entry.duration,
+              entry.startTime,
+            )
           }
         })
       : null
@@ -109,14 +112,13 @@ export class TradingBenchmarkController {
     this.#runtime.longAnimationFrameObserver = longAnimationFrameObserver
     this.#runtime.stopObservingFeed = this.feed.observe({
       messageReceived: () => this.monitor.recordWorkerMessage(),
-      mutationStarted: () => this.monitor.markRenderPending(),
+      mutationStarted: () => this.monitor.markCommitPending(),
       batchApplied: ({ tickCount, updateCount, supersededUpdateCount }) =>
         this.monitor.recordBatch(tickCount, updateCount, supersededUpdateCount),
-      renderCommitted: () => this.monitor.recordCompletedRender(),
+      renderCommitted: () => this.monitor.recordDomCommit(),
     })
     longAnimationFrameObserver?.observe({
       type: 'long-animation-frame',
-      buffered: true,
     })
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
 
@@ -132,7 +134,7 @@ export class TradingBenchmarkController {
   }
 
   readonly #benchmarkFrame = (now: number): void => {
-    this.monitor.recordAnimationFrame()
+    this.monitor.recordAnimationFrame(now)
     if (this.monitor.shouldPublish(now)) {
       this.#publishMetrics(this.monitor.publish(now))
     }
diff --git a/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts b/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
index 2062e371ac..2b8a862c06 100644
--- a/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
+++ b/examples/vue/realtime-trading/src/benchmark/use-table-benchmark.ts
@@ -18,6 +18,7 @@ export function useTableBenchmark(
     })
     runtime.mutationObserver.observe(tableBody, {
       attributes: true,
+      attributeFilter: ['class', 'style'],
       characterData: true,
       childList: true,
       subtree: true,
diff --git a/examples/vue/realtime-trading/src/index.css b/examples/vue/realtime-trading/src/index.css
index 20264402de..69cba52fa7 100644
--- a/examples/vue/realtime-trading/src/index.css
+++ b/examples/vue/realtime-trading/src/index.css
@@ -226,40 +226,45 @@ select {
 
 .metrics-strip {
   display: grid;
-  flex: 0 0 var(--metrics-height);
-  grid-template-columns: repeat(8, minmax(8.25rem, 1fr));
-  overflow-x: auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   background: var(--border);
   border-bottom: 1px solid var(--border);
   gap: 1px;
 }
 
+.metrics-strip h2 {
+  margin: 0;
+  padding: 0.65rem var(--shell-inline-padding) 0.45rem;
+  color: var(--muted);
+  background: var(--surface-table);
+  font-size: 0.58rem;
+  grid-column: 1 / -1;
+  letter-spacing: 0.075em;
+}
+
 .metrics-strip article {
   min-width: 0;
-  padding: 0.4rem 0.55rem;
+  min-height: 4.25rem;
+  padding: 0.5rem var(--shell-inline-padding);
   background: var(--surface-bar);
 }
 
 .metrics-strip span,
 .metrics-strip small {
   display: block;
-  overflow: hidden;
   color: var(--muted);
   font-size: 0.56rem;
   letter-spacing: 0.045em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.35;
 }
 
 .metrics-strip strong {
   display: block;
   margin: 0.12rem 0 0.08rem;
-  overflow: hidden;
   color: var(--text-strong);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/examples/vue/realtime-trading/src/shell/TradingShell.tsx b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
index 311d22f8df..1457098b1d 100644
--- a/examples/vue/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
@@ -50,7 +50,6 @@ export const TradingShell = defineComponent({
           )}
         </div>
         <section class="market-panel" aria-label="Live synthetic quotes">
-          <MetricsStrip />
           {slots.default?.()}
         </section>
         <MarketStatusbar />
@@ -121,46 +120,19 @@ const MetricsStrip = defineComponent({
     return () => {
       const metrics = state.value.metrics
       return (
-        <section class="metrics-strip" aria-label="Live performance metrics">
+        <section class="metrics-strip" aria-labelledby="live-health">
+          <h2 id="live-health">LIVE HEALTH</h2>
           <Metric
-            label="WORKER SAMPLES"
-            value={formatRate(metrics.actualTicksPerSecond)}
-            detail="generated samples/s"
-            testId="actual-rate"
+            label="FRAME RATE (EST.)"
+            value={metrics.rafCallbacksPerSecond.toFixed(1)}
+            detail="rAF callbacks/s · rolling 1 s"
+            testId="frame-rate"
           />
           <Metric
-            label="ROW UPDATES"
-            value={formatRate(metrics.rowUpdatesPerSecond)}
-            detail="unique rows applied/s"
-            testId="row-update-rate"
-          />
-          <Metric
-            label="MESSAGES"
-            value={metrics.workerMessagesPerSecond.toFixed(1)}
-            detail="worker messages/s"
-            testId="message-rate"
-          />
-          <Metric
-            label="STATE APPLIES"
-            value={metrics.stateApplicationsPerSecond.toFixed(1)}
-            detail="quote snapshots/s"
-            testId="state-apply-rate"
-          />
-          <Metric
-            label="TABLE COMMITS"
-            value={metrics.tableRendersPerSecond.toFixed(1)}
-            detail="completed renders/s"
-            testId="table-render-rate"
-          />
-          <Metric
-            label="AVG RENDER"
-            value={formatMs(metrics.averageRenderMs)}
-            detail="mutation → render"
-          />
-          <Metric
-            label="P95 RENDER"
-            value={formatMs(metrics.p95RenderMs)}
-            detail={`max ${formatMs(metrics.maxRenderMs)}`}
+            label="AVG COMMIT"
+            value={formatMs(metrics.averageCommitLatencyMs)}
+            detail="snapshot → DOM · rolling 3 s"
+            testId="average-commit-latency"
           />
           <Metric
             label="LONG FRAMES"
@@ -171,11 +143,21 @@ const MetricsStrip = defineComponent({
             }
             detail={
               state.value.longAnimationFramesSupported
-                ? `worst ${formatMs(metrics.worstLongAnimationFrameMs)}`
-                : 'unsupported'
+                ? `since reset · worst ${formatMs(metrics.worstLongAnimationFrameMs)}`
+                : 'unsupported by this browser'
             }
             testId="long-frame-count"
           />
+          <article>
+            <span>THROUGHPUT</span>
+            <strong data-testid="throughput-rate">
+              {formatRate(metrics.rowUpdatesPerSecond)} rows/s
+            </strong>
+            <small>
+              {metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s ·
+              rows deduplicated per snapshot
+            </small>
+          </article>
         </section>
       )
     }
@@ -217,7 +199,7 @@ const MarketStatusbar = defineComponent({
           <strong>{formatInteger(state.value.lastBatchSize)}</strong>
         </span>
         <span>
-          ROW UPDATES{' '}
+          CHANGED ROWS{' '}
           <strong>{formatInteger(state.value.lastUpdateCount)}</strong>
         </span>
         <span>
@@ -275,6 +257,7 @@ const Configurator = defineComponent({
           <span>CONFIGURATOR</span>
           <small>RUN PARAMETERS</small>
         </header>
+        <MetricsStrip />
         <section class="config-section" aria-labelledby="feed-settings">
           <h2 id="feed-settings">FEED</h2>
           <button
@@ -429,6 +412,35 @@ const Diagnostics = defineComponent({
         >
           <h2 id="diagnostics">DIAGNOSTICS</h2>
           <dl>
+            <Diagnostic
+              label="Worker samples / s"
+              value={formatRate(metrics.actualTicksPerSecond)}
+              testId="actual-rate"
+            />
+            <Diagnostic
+              label="Worker messages / s"
+              value={metrics.workerMessagesPerSecond.toFixed(1)}
+              testId="message-rate"
+            />
+            <Diagnostic
+              label="Changed rows / s"
+              value={formatRate(metrics.rowUpdatesPerSecond)}
+              testId="row-update-rate"
+            />
+            <Diagnostic
+              label="Snapshots applied / s"
+              value={metrics.stateApplicationsPerSecond.toFixed(1)}
+              testId="state-apply-rate"
+            />
+            <Diagnostic
+              label="DOM commits / s"
+              value={metrics.tableCommitsPerSecond.toFixed(1)}
+              testId="table-render-rate"
+            />
+            <Diagnostic
+              label="P95 / max commit latency"
+              value={`${formatMs(metrics.p95CommitLatencyMs)} / ${formatMs(metrics.maxCommitLatencyMs)}`}
+            />
             <Diagnostic
               label="Mounted cells"
               value={formatInteger(state.value.mountedCells)}
@@ -462,7 +474,7 @@ const Diagnostics = defineComponent({
               testId="cell-render-breakdown"
             />
             <Diagnostic
-              label="DOM mutation records / s"
+              label="Observed MutationRecords / s"
               value={formatRate(metrics.domMutationsPerSecond)}
               testId="dom-mutation-rate"
             />
@@ -496,11 +508,11 @@ const Diagnostics = defineComponent({
               value={`${formatInteger(metrics.lastBatchSize)} / ${formatInteger(metrics.lastUpdateCount)}`}
             />
             <Diagnostic
-              label="Renders > 16.7 ms"
-              value={formatInteger(metrics.slowRenders)}
+              label="Commits > 16.7 ms"
+              value={formatInteger(metrics.slowCommits)}
             />
             <Diagnostic
-              label="JS heap"
+              label="JS heap (GC-sensitive)"
               value={
                 metrics.heapMb === null
                   ? 'N/A'
diff --git a/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx b/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
index 781ee6e079..69151e7992 100644
--- a/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
+++ b/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
@@ -216,14 +216,19 @@ export function readMeasuredRows<Row>(readRows: () => Array<Row>): Array<Row> {
     duration,
   )
   rowModelDiagnostics.lastRowCount = rows.length
-  try {
-    performance.measure('tanstack-row-model', {
-      start,
-      end,
-      detail: { rowCount: rows.length },
-    })
-  } catch {
-    // User Timing Level 3 options are not implemented in every browser.
+  if (rowModelDiagnostics.calls % 20 === 0) {
+    try {
+      performance.measure('tanstack-row-model', {
+        start,
+        end,
+        detail: { rowCount: rows.length },
+      })
+      if (rowModelDiagnostics.calls % 20_000 === 0) {
+        performance.clearMeasures('tanstack-row-model')
+      }
+    } catch {
+      // User Timing Level 3 options are not implemented in every browser.
+    }
   }
   return rows
 }

From 4c5b472ab633551b3c07da589b78daeed103d7be Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 18 Aug 2026 15:59:52 +0000
Subject: [PATCH 19/23] ci: apply automated fixes

---
 examples/alpine/realtime-trading/README.md    | 18 ++---
 .../src/benchmark/benchmark-monitor.ts        | 15 ++--
 .../benchmark/trading-benchmark-controller.ts |  8 +-
 examples/ember/realtime-trading/README.md     | 20 ++---
 .../benchmark/trading-benchmark-controller.ts |  9 ++-
 .../app/components/shell/app-header.gts       |  5 +-
 .../app/components/shell/configurator.gts     | 10 +--
 .../app/feed/market-feed-controller.ts        |  3 +-
 examples/lit/realtime-trading/README.md       | 18 ++---
 .../src/benchmark/benchmark-monitor.ts        | 15 ++--
 .../benchmark/trading-benchmark-controller.ts |  8 +-
 .../src/table/TradingTable.ts                 | 80 ++++++++++---------
 .../benchmark/trading-benchmark-controller.ts |  8 +-
 .../src/benchmark/benchmark-monitor.ts        | 11 ++-
 .../benchmark/trading-benchmark-controller.ts |  3 +-
 .../src/shell/TradingShell.tsx                |  7 +-
 examples/react/realtime-trading/README.md     | 16 ++--
 .../src/benchmark/benchmark-monitor.ts        | 11 ++-
 .../benchmark/trading-benchmark-controller.ts |  3 +-
 .../src/shell/TradingShell.tsx                |  7 +-
 examples/solid/realtime-trading/README.md     |  2 +-
 examples/solid/realtime-trading/src/App.tsx   |  4 +-
 .../src/benchmark/benchmark-monitor.ts        | 11 ++-
 .../src/table/trading-table-body.tsx          | 10 +--
 .../src/table/trading-table-features.ts       | 18 +----
 .../src/table/trading-table-footer.tsx        |  5 +-
 .../src/table/trading-table-header.tsx        | 15 +---
 .../src/table/trading-table.tsx               |  5 +-
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  4 +-
 .../src/benchmark/benchmark-monitor.ts        | 11 ++-
 .../benchmark/trading-benchmark-controller.ts |  3 +-
 .../src/benchmark/benchmark-monitor.ts        | 11 ++-
 .../benchmark/trading-benchmark-controller.ts |  3 +-
 .../src/shell/TradingShell.tsx                |  4 +-
 .../angular-table/src/flex-render/renderer.ts |  2 +-
 35 files changed, 164 insertions(+), 219 deletions(-)

diff --git a/examples/alpine/realtime-trading/README.md b/examples/alpine/realtime-trading/README.md
index 2d82e563d8..1fcc1bb50f 100644
--- a/examples/alpine/realtime-trading/README.md
+++ b/examples/alpine/realtime-trading/README.md
@@ -24,16 +24,16 @@ Use a production build for performance recordings.
 
 ## Structure and ownership
 
-| Path                                | Responsibility                                                                                                |
-| ----------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| Path                                | Responsibility                                                                                                 |
+| ----------------------------------- | -------------------------------------------------------------------------------------------------------------- |
 | `src/feed/`                         | Market model, instrument universe, feed config, immutable update helpers, and direct TanStack atom controller. |
-| `src/feed/worker/`                  | Typed protocol, deterministic engine, and module worker.                                                      |
-| `src/benchmark/`                    | Browser monitor and benchmark controller.                                                                     |
-| `src/shell/configurator-options.ts` | Declarative select/range options used by the sidebar.                                                         |
-| `src/table/table-config/`           | Grouped columns and custom quote elements.                                                                    |
-| `src/table/`                        | Shared interaction helpers and virtualization constants.                                                      |
-| `src/main.ts`                       | Alpine component factory and the imperative bridges to Store, Table, Virtual Core, observers, and DOM layout. |
-| `index.html`                        | Declarative full-viewport shell, table template, controls, diagnostics, and status bar.                       |
+| `src/feed/worker/`                  | Typed protocol, deterministic engine, and module worker.                                                       |
+| `src/benchmark/`                    | Browser monitor and benchmark controller.                                                                      |
+| `src/shell/configurator-options.ts` | Declarative select/range options used by the sidebar.                                                          |
+| `src/table/table-config/`           | Grouped columns and custom quote elements.                                                                     |
+| `src/table/`                        | Shared interaction helpers and virtualization constants.                                                       |
+| `src/main.ts`                       | Alpine component factory and the imperative bridges to Store, Table, Virtual Core, observers, and DOM layout.  |
+| `index.html`                        | Declarative full-viewport shell, table template, controls, diagnostics, and status bar.                        |
 
 Alpine keeps the markup declarative in `index.html`; `tradingApp` owns only the
 runtime coordination that cannot live in HTML. Feed and benchmark remain
diff --git a/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
index 0776afae13..1bf9cdbc8c 100644
--- a/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/alpine/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -238,9 +238,7 @@ export class BenchmarkMonitor {
     const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
       (sample) => sample.duration,
     )
-    const sortedCommitLatencySamples = [
-      ...percentileCommitLatencySamples,
-    ].sort(
+    const sortedCommitLatencySamples = [...percentileCommitLatencySamples].sort(
       (left, right) => left - right,
     )
     const rowModelCalls =
@@ -286,12 +284,11 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      rafCallbacksPerSecond:
-        calculateFrameRate(
-          runtime.frameTimestamps,
-          runtime.frameTrackingStartedAt,
-          now,
-        ),
+      rafCallbacksPerSecond: calculateFrameRate(
+        runtime.frameTimestamps,
+        runtime.frameTrackingStartedAt,
+        now,
+      ),
       tableCommitsPerSecond:
         (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
diff --git a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index d2a2068f7a..12e65e30ea 100644
--- a/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/alpine/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,8 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount.get() >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
@@ -101,7 +100,10 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
+            this.monitor.recordLongAnimationFrame(
+              entry.duration,
+              entry.startTime,
+            )
           }
         })
       : null
diff --git a/examples/ember/realtime-trading/README.md b/examples/ember/realtime-trading/README.md
index 78704cb14e..bca583ee1d 100644
--- a/examples/ember/realtime-trading/README.md
+++ b/examples/ember/realtime-trading/README.md
@@ -24,17 +24,17 @@ build for performance recordings.
 
 ## Structure and ownership
 
-| Path                            | Responsibility                                                                                                |
-| ------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| Path                            | Responsibility                                                                                                   |
+| ------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
 | `app/feed/`                     | Market model, instrument universe, configuration, immutable update helpers, and Ember-native tracked controller. |
-| `app/feed/worker/`              | Typed protocol, deterministic engine, and module worker.                                                      |
-| `app/benchmark/`                | Browser monitor and benchmark controller.                                                                     |
-| `app/components/shell/`         | GTS header, metrics, configurator, diagnostics, selected instrument, status bar, and shell layout.            |
-| `app/components/table/`         | Trading table Glimmer component.                                                                              |
-| `app/table/table-config/`       | Grouped columns and custom GTS quote components.                                                              |
-| `app/table/`                    | Table construction, features, delegated interactions, and Virtual Core integration.                           |
-| `app/utils/subscriptions.ts`    | Owner-bound destruction cleanup helper.                                                                       |
-| `app/templates/application.gts` | Creates feed/benchmark controllers and composes the shell.                                                    |
+| `app/feed/worker/`              | Typed protocol, deterministic engine, and module worker.                                                         |
+| `app/benchmark/`                | Browser monitor and benchmark controller.                                                                        |
+| `app/components/shell/`         | GTS header, metrics, configurator, diagnostics, selected instrument, status bar, and shell layout.               |
+| `app/components/table/`         | Trading table Glimmer component.                                                                                 |
+| `app/table/table-config/`       | Grouped columns and custom GTS quote components.                                                                 |
+| `app/table/`                    | Table construction, features, delegated interactions, and Virtual Core integration.                              |
+| `app/utils/subscriptions.ts`    | Owner-bound destruction cleanup helper.                                                                          |
+| `app/templates/application.gts` | Creates feed/benchmark controllers and composes the shell.                                                       |
 
 `MarketFeedController` owns worker/feed state. `TradingBenchmarkController`
 observes feed lifecycle callbacks and owns diagnostic/view state. The
diff --git a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
index 48c46b6411..a5bbf0dd0a 100644
--- a/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
+++ b/examples/ember/realtime-trading/app/benchmark/trading-benchmark-controller.ts
@@ -52,9 +52,7 @@ export class TradingBenchmarkController {
         this.rendererMode = mode
       },
       setVirtualScrollEnabled: (enabled) => {
-        if (
-          this.feed.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT
-        ) {
+        if (this.feed.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT) {
           return
         }
         this.requestedVirtualScrollMode = enabled ? 'tanstack' : 'none'
@@ -82,7 +80,10 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
+            this.monitor.recordLongAnimationFrame(
+              entry.duration,
+              entry.startTime,
+            )
           }
         })
       : null
diff --git a/examples/ember/realtime-trading/app/components/shell/app-header.gts b/examples/ember/realtime-trading/app/components/shell/app-header.gts
index 63de0f3ab0..017ccddfe6 100644
--- a/examples/ember/realtime-trading/app/components/shell/app-header.gts
+++ b/examples/ember/realtime-trading/app/components/shell/app-header.gts
@@ -30,10 +30,7 @@ export default class AppHeader extends Component<Signature> {
       <div class='header-actions'>
         <span
           class='feed-status
-            {{if
-              (and this.workerReady this.running)
-              "is-running"
-            }}'
+            {{if (and this.workerReady this.running) "is-running"}}'
           data-testid='feed-status'
         >
           <span class='status-dot' aria-hidden='true'></span>{{this.status}}
diff --git a/examples/ember/realtime-trading/app/components/shell/configurator.gts b/examples/ember/realtime-trading/app/components/shell/configurator.gts
index de5eac1ddb..8e3c229341 100644
--- a/examples/ember/realtime-trading/app/components/shell/configurator.gts
+++ b/examples/ember/realtime-trading/app/components/shell/configurator.gts
@@ -121,10 +121,7 @@ export default class Configurator extends Component<Signature> {
           >
             {{#each this.options.instrumentCounts as |item|}}<option
                 value={{optionValue item}}
-                selected={{eq
-                  (optionValue item)
-                  this.instrumentCount
-                }}
+                selected={{eq (optionValue item) this.instrumentCount}}
               >{{optionLabel item}}</option>{{/each}}
           </select>
         </label>
@@ -152,10 +149,7 @@ export default class Configurator extends Component<Signature> {
           >
             {{#each this.options.workerDeliveryIntervals as |item|}}<option
                 value={{optionValue item}}
-                selected={{eq
-                  (optionValue item)
-                  this.publishIntervalMs
-                }}
+                selected={{eq (optionValue item) this.publishIntervalMs}}
               >{{optionLabel item}}</option>{{/each}}
           </select>
           <small>One coalesced worker message at this target cadence.</small>
diff --git a/examples/ember/realtime-trading/app/feed/market-feed-controller.ts b/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
index 6c5ee890c3..5dff4f0cb2 100644
--- a/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
+++ b/examples/ember/realtime-trading/app/feed/market-feed-controller.ts
@@ -36,8 +36,7 @@ export class MarketFeedController {
   @tracked workerReady = false
   @tracked running = true
   @tracked instrumentCount = initialMarketFeedConfig.instrumentCount
-  @tracked targetTicksPerSecond =
-    initialMarketFeedConfig.targetSamplesPerSecond
+  @tracked targetTicksPerSecond = initialMarketFeedConfig.targetSamplesPerSecond
   @tracked publishIntervalMs = initialMarketFeedConfig.publishIntervalMs
   @tracked updateSparklines = initialMarketFeedConfig.updateSparklines
   @tracked sparklineSampleIntervalMs =
diff --git a/examples/lit/realtime-trading/README.md b/examples/lit/realtime-trading/README.md
index 7d802ba276..f43f3728c3 100644
--- a/examples/lit/realtime-trading/README.md
+++ b/examples/lit/realtime-trading/README.md
@@ -24,16 +24,16 @@ Use the production build for measurements.
 
 ## Structure and ownership
 
-| Path                              | Responsibility                                                                                       |
-| --------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| Path                              | Responsibility                                                                                         |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------ |
 | `src/feed/`                       | Market types, instruments, configuration, immutable updates, and direct TanStack atom feed controller. |
-| `src/feed/worker/`                | Protocol, deterministic engine, and module worker.                                                   |
-| `src/benchmark/`                  | Browser monitor, benchmark controller, table timing, and row-model diagnostics.                      |
-| `src/shell/`                      | Custom elements for header, metrics, controls, diagnostics, selected instrument, status, and layout. |
-| `src/shell/controller-element.ts` | Base element that subscribes to controller sources and releases subscriptions on disconnect.         |
-| `src/table/table-config/`         | Grouped columns and custom quote cell elements.                                                      |
-| `src/table/`                      | Lit Table element, delegated interactions, column layout, and Lit Virtual integration.               |
-| `src/main.ts`                     | Root custom element that creates, starts, stops, and passes the controllers.                         |
+| `src/feed/worker/`                | Protocol, deterministic engine, and module worker.                                                     |
+| `src/benchmark/`                  | Browser monitor, benchmark controller, table timing, and row-model diagnostics.                        |
+| `src/shell/`                      | Custom elements for header, metrics, controls, diagnostics, selected instrument, status, and layout.   |
+| `src/shell/controller-element.ts` | Base element that subscribes to controller sources and releases subscriptions on disconnect.           |
+| `src/table/table-config/`         | Grouped columns and custom quote cell elements.                                                        |
+| `src/table/`                      | Lit Table element, delegated interactions, column layout, and Lit Virtual integration.                 |
+| `src/main.ts`                     | Root custom element that creates, starts, stops, and passes the controllers.                           |
 
 The feed controller is independent from the benchmark controller. The root
 passes stable controller objects; each shell/table custom element observes the
diff --git a/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
index 0776afae13..1bf9cdbc8c 100644
--- a/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/lit/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -238,9 +238,7 @@ export class BenchmarkMonitor {
     const percentileCommitLatencySamples = runtime.commitLatencySamples.map(
       (sample) => sample.duration,
     )
-    const sortedCommitLatencySamples = [
-      ...percentileCommitLatencySamples,
-    ].sort(
+    const sortedCommitLatencySamples = [...percentileCommitLatencySamples].sort(
       (left, right) => left - right,
     )
     const rowModelCalls =
@@ -286,12 +284,11 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      rafCallbacksPerSecond:
-        calculateFrameRate(
-          runtime.frameTimestamps,
-          runtime.frameTrackingStartedAt,
-          now,
-        ),
+      rafCallbacksPerSecond: calculateFrameRate(
+        runtime.frameTimestamps,
+        runtime.frameTrackingStartedAt,
+        now,
+      ),
       tableCommitsPerSecond:
         (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
diff --git a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index d2a2068f7a..12e65e30ea 100644
--- a/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/lit/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,8 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount.get() >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
@@ -101,7 +100,10 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
+            this.monitor.recordLongAnimationFrame(
+              entry.duration,
+              entry.startTime,
+            )
           }
         })
       : null
diff --git a/examples/lit/realtime-trading/src/table/TradingTable.ts b/examples/lit/realtime-trading/src/table/TradingTable.ts
index cadfe819c2..01fbbe65d9 100644
--- a/examples/lit/realtime-trading/src/table/TradingTable.ts
+++ b/examples/lit/realtime-trading/src/table/TradingTable.ts
@@ -304,31 +304,32 @@ export class TradingTable extends ControllerElement {
                               ? html`<div
                                     class="leaf-header-content"
                                     @dragover=${(event: DragEvent) => {
-                                  event.preventDefault()
-                                  this.#showDrop(
-                                    header.column.id,
-                                    (
-                                      event.currentTarget as HTMLElement
-                                    ).closest('th'),
-                                  )
-                                }}
-                                    @drop=${(event: DragEvent) => {
-                                  event.preventDefault()
-                                  const source =
-                                    event.dataTransfer?.getData('text/plain') ||
-                                    this.#drag.columnId
-                                  if (source)
-                                    table.setColumnOrder(
-                                      reorderColumnIds(
-                                        table
-                                          .getVisibleLeafColumns()
-                                          .map((column) => column.id),
-                                        source,
+                                      event.preventDefault()
+                                      this.#showDrop(
                                         header.column.id,
-                                      ),
-                                    )
-                                  this.#clearDrag()
-                                }}
+                                        (
+                                          event.currentTarget as HTMLElement
+                                        ).closest('th'),
+                                      )
+                                    }}
+                                    @drop=${(event: DragEvent) => {
+                                      event.preventDefault()
+                                      const source =
+                                        event.dataTransfer?.getData(
+                                          'text/plain',
+                                        ) || this.#drag.columnId
+                                      if (source)
+                                        table.setColumnOrder(
+                                          reorderColumnIds(
+                                            table
+                                              .getVisibleLeafColumns()
+                                              .map((column) => column.id),
+                                            source,
+                                            header.column.id,
+                                          ),
+                                        )
+                                      this.#clearDrag()
+                                    }}
                                   >
                                     <button
                                       type="button"
@@ -336,21 +337,22 @@ export class TradingTable extends ControllerElement {
                                       draggable="true"
                                       aria-label="Move ${header.column.id} column"
                                       @dragstart=${(event: DragEvent) => {
-                                    this.#drag.columnId = header.column.id
-                                    this.#drag.source = (
-                                      event.currentTarget as HTMLElement
-                                    ).closest('th')
-                                    this.#drag.source?.classList.add(
-                                      'is-column-dragging',
-                                    )
-                                    if (event.dataTransfer) {
-                                      event.dataTransfer.effectAllowed = 'move'
-                                      event.dataTransfer.setData(
-                                        'text/plain',
-                                        header.column.id,
-                                      )
-                                    }
-                                  }}
+                                        this.#drag.columnId = header.column.id
+                                        this.#drag.source = (
+                                          event.currentTarget as HTMLElement
+                                        ).closest('th')
+                                        this.#drag.source?.classList.add(
+                                          'is-column-dragging',
+                                        )
+                                        if (event.dataTransfer) {
+                                          event.dataTransfer.effectAllowed =
+                                            'move'
+                                          event.dataTransfer.setData(
+                                            'text/plain',
+                                            header.column.id,
+                                          )
+                                        }
+                                      }}
                                       @dragend=${this.#clearDrag}
                                     >
                                       ⋮⋮</button
diff --git a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index a110a70a8f..c3d1db616b 100644
--- a/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/octane/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,8 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount.get() >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
@@ -101,7 +100,10 @@ export class TradingBenchmarkController {
     const longAnimationFrameObserver = longAnimationFramesSupported
       ? new PerformanceObserver((entries) => {
           for (const entry of entries.getEntries()) {
-            this.monitor.recordLongAnimationFrame(entry.duration, entry.startTime)
+            this.monitor.recordLongAnimationFrame(
+              entry.duration,
+              entry.startTime,
+            )
           }
         })
       : null
diff --git a/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
index a01cfc38d0..f072634bbc 100644
--- a/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/preact/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -288,12 +288,11 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      estimatedFrameRate:
-        calculateFrameRate(
-          runtime.frameTimestamps,
-          runtime.frameTrackingStartedAt,
-          now,
-        ),
+      estimatedFrameRate: calculateFrameRate(
+        runtime.frameTimestamps,
+        runtime.frameTrackingStartedAt,
+        now,
+      ),
       tableCommitsPerSecond:
         (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
diff --git a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 9d2cacc575..1844541924 100644
--- a/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/preact/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,8 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount.get() >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
diff --git a/examples/preact/realtime-trading/src/shell/TradingShell.tsx b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
index a6e4098dc0..d3a22399ee 100644
--- a/examples/preact/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/preact/realtime-trading/src/shell/TradingShell.tsx
@@ -140,9 +140,7 @@ function Configurator() {
   const targetTicksPerSecond = useSelector(feed.targetTicksPerSecond)
   const publishIntervalMs = useSelector(feed.publishIntervalMs)
   const updateSparklines = useSelector(feed.updateSparklines)
-  const sparklineSampleIntervalMs = useSelector(
-    feed.sparklineSampleIntervalMs,
-  )
+  const sparklineSampleIntervalMs = useSelector(feed.sparklineSampleIntervalMs)
   const rendererMode = useSelector(controller.renderAtoms.rendererMode)
   const { actions } = controller
   const feedActions = feed.actions
@@ -391,8 +389,7 @@ function LiveHealth() {
               {metrics.longAnimationFrames}
             </strong>
             <small>
-              since reset · worst{' '}
-              {formatMs(metrics.worstLongAnimationFrameMs)}
+              since reset · worst {formatMs(metrics.worstLongAnimationFrameMs)}
             </small>
           </>
         ) : (
diff --git a/examples/react/realtime-trading/README.md b/examples/react/realtime-trading/README.md
index 6630ba63f8..e9faaa0a40 100644
--- a/examples/react/realtime-trading/README.md
+++ b/examples/react/realtime-trading/README.md
@@ -40,15 +40,15 @@ available.
 
 ## Directory structure
 
-| Path                      | Responsibility                                                                                                 |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `src/feed/`               | Market types, instruments, feed configuration, immutable update helpers, controller, and React lifecycle hook. |
-| `src/feed/worker/`        | Worker protocol, deterministic market engine, and the module Web Worker.                                       |
-| `src/benchmark/`          | Browser monitor, benchmark controller, table observers, and React Profiler integration.                        |
+| Path                      | Responsibility                                                                                                     |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `src/feed/`               | Market types, instruments, feed configuration, immutable update helpers, controller, and React lifecycle hook.     |
+| `src/feed/worker/`        | Worker protocol, deterministic market engine, and the module Web Worker.                                           |
+| `src/benchmark/`          | Browser monitor, benchmark controller, table observers, and React Profiler integration.                            |
 | `src/shell/`              | Controller contexts, full-viewport shell, metrics, configurator, diagnostics, selected instrument, and status bar. |
-| `src/table/table-config/` | Grouped columns, row boundary, custom cells, and render counters.                                              |
-| `src/table/`              | Table instance, subscription boundaries, interactions, pointer hook, initial fit, and virtualization.          |
-| `src/App.tsx`             | Composition root; creates controllers, providers, shell, table, and Profiler boundary.                         |
+| `src/table/table-config/` | Grouped columns, row boundary, custom cells, and render counters.                                                  |
+| `src/table/`              | Table instance, subscription boundaries, interactions, pointer hook, initial fit, and virtualization.              |
+| `src/App.tsx`             | Composition root; creates controllers, providers, shell, table, and Profiler boundary.                             |
 
 Feed state and benchmark state are intentionally separate. `MarketFeedController`
 can run without `TradingBenchmarkController`; the latter observes feed lifecycle
diff --git a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
index a92ae243f1..7d37abb354 100644
--- a/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/react/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -329,12 +329,11 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      estimatedFrameRate:
-        calculateFrameRate(
-          runtime.frameTimestamps,
-          runtime.frameTrackingStartedAt,
-          now,
-        ),
+      estimatedFrameRate: calculateFrameRate(
+        runtime.frameTimestamps,
+        runtime.frameTrackingStartedAt,
+        now,
+      ),
       tableCommitsPerSecond:
         (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
diff --git a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index 56dac5b665..625ceffcb5 100644
--- a/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/react/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,8 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount.get() >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
diff --git a/examples/react/realtime-trading/src/shell/TradingShell.tsx b/examples/react/realtime-trading/src/shell/TradingShell.tsx
index 5a66c3961e..b5c2e12da5 100644
--- a/examples/react/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/react/realtime-trading/src/shell/TradingShell.tsx
@@ -148,9 +148,7 @@ function Configurator() {
   const targetTicksPerSecond = useSelector(feed.targetTicksPerSecond)
   const publishIntervalMs = useSelector(feed.publishIntervalMs)
   const updateSparklines = useSelector(feed.updateSparklines)
-  const sparklineSampleIntervalMs = useSelector(
-    feed.sparklineSampleIntervalMs,
-  )
+  const sparklineSampleIntervalMs = useSelector(feed.sparklineSampleIntervalMs)
   const rendererMode = useSelector(controller.renderAtoms.rendererMode)
   const { actions } = controller
   const feedActions = feed.actions
@@ -399,8 +397,7 @@ function LiveHealth() {
               {metrics.longAnimationFrames}
             </strong>
             <small>
-              since reset · worst{' '}
-              {formatMs(metrics.worstLongAnimationFrameMs)}
+              since reset · worst {formatMs(metrics.worstLongAnimationFrameMs)}
             </small>
           </>
         ) : (
diff --git a/examples/solid/realtime-trading/README.md b/examples/solid/realtime-trading/README.md
index a046d2d8bb..5a3008e60f 100644
--- a/examples/solid/realtime-trading/README.md
+++ b/examples/solid/realtime-trading/README.md
@@ -32,7 +32,7 @@ absolute timings.
 | `src/benchmark/`          | Benchmark monitor and the controller that exposes benchmark signals/actions.                       |
 | `src/shell/`              | Contexts, viewport shell, header, metrics, configurator, diagnostics, and selected instrument.     |
 | `src/table/table-config/` | Declarative columns, named cell renderers, component props, and quote value calculations.          |
-| `src/table/`              | Table model primitive, view components, interactions, layout, and virtualization.                    |
+| `src/table/`              | Table model primitive, view components, interactions, layout, and virtualization.                  |
 | `src/App.tsx`             | Creates feed/benchmark controllers and composes their providers with the table.                    |
 
 `createMarketFeedController` and `createTradingBenchmarkController` are
diff --git a/examples/solid/realtime-trading/src/App.tsx b/examples/solid/realtime-trading/src/App.tsx
index 0b2f4b5dca..1dfc26f920 100644
--- a/examples/solid/realtime-trading/src/App.tsx
+++ b/examples/solid/realtime-trading/src/App.tsx
@@ -1,9 +1,7 @@
 import { createTradingBenchmarkController } from './benchmark/trading-benchmark-controller'
 import { createMarketFeedController } from './feed/market-feed-controller'
 import { TradingShell } from './shell/TradingShell'
-import {
-  TradingShellProvider,
-} from './shell/trading-shell-context'
+import { TradingShellProvider } from './shell/trading-shell-context'
 import { TradingTable } from './table/trading-table'
 
 export default function App() {
diff --git a/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
index 2227c51803..02925f3da5 100644
--- a/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/solid/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -239,12 +239,11 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      rafCallbacksPerSecond:
-        calculateFrameRate(
-          runtime.frameTimestamps,
-          runtime.frameTrackingStartedAt,
-          now,
-        ),
+      rafCallbacksPerSecond: calculateFrameRate(
+        runtime.frameTimestamps,
+        runtime.frameTrackingStartedAt,
+        now,
+      ),
       tableCommitsPerSecond:
         sampleDuration === 0
           ? 0
diff --git a/examples/solid/realtime-trading/src/table/trading-table-body.tsx b/examples/solid/realtime-trading/src/table/trading-table-body.tsx
index 6601b76267..3a074634b3 100644
--- a/examples/solid/realtime-trading/src/table/trading-table-body.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table-body.tsx
@@ -4,10 +4,7 @@ import { TradingTableRow } from './trading-table-row'
 import type { Accessor, JSX } from 'solid-js'
 import type { TradingColumnSet } from './table-config/trading-columns'
 import type { TradingRowVirtualization } from './trading-row-virtualizer'
-import type {
-  TradingRow,
-  TradingTableInstance,
-} from './trading-table-features'
+import type { TradingRow, TradingTableInstance } from './trading-table-features'
 
 export interface TradingTableBodyProps {
   table: TradingTableInstance
@@ -24,10 +21,7 @@ export function TradingTableBody(props: TradingTableBodyProps) {
 
   return (
     <tbody {...bodyProps}>
-      <Show
-        when={props.virtualized()}
-        fallback={<FullTableRows {...props} />}
-      >
+      <Show when={props.virtualized()} fallback={<FullTableRows {...props} />}>
         <VirtualTableRows {...props} />
       </Show>
     </tbody>
diff --git a/examples/solid/realtime-trading/src/table/trading-table-features.ts b/examples/solid/realtime-trading/src/table/trading-table-features.ts
index e8d518a9a2..0af9b8983b 100644
--- a/examples/solid/realtime-trading/src/table/trading-table-features.ts
+++ b/examples/solid/realtime-trading/src/table/trading-table-features.ts
@@ -3,12 +3,7 @@ import {
   stockFeatures,
   tableFeatures,
 } from '@tanstack/solid-table'
-import type {
-  Cell,
-  Header,
-  Row,
-  SolidTable,
-} from '@tanstack/solid-table'
+import type { Cell, Header, Row, SolidTable } from '@tanstack/solid-table'
 import type { MarketQuote } from '../feed/market-data'
 
 export const tradingTableFeatures = tableFeatures({
@@ -17,15 +12,8 @@ export const tradingTableFeatures = tableFeatures({
 })
 
 export type TradingTableFeatures = typeof tradingTableFeatures
-export type TradingTableInstance = SolidTable<
-  TradingTableFeatures,
-  MarketQuote
->
+export type TradingTableInstance = SolidTable<TradingTableFeatures, MarketQuote>
 export type TradingRow = Row<TradingTableFeatures, MarketQuote>
 export type TradingCell = Cell<TradingTableFeatures, MarketQuote, unknown>
 export type TradingCellContext = ReturnType<TradingCell['getContext']>
-export type TradingHeader = Header<
-  TradingTableFeatures,
-  MarketQuote,
-  unknown
->
+export type TradingHeader = Header<TradingTableFeatures, MarketQuote, unknown>
diff --git a/examples/solid/realtime-trading/src/table/trading-table-footer.tsx b/examples/solid/realtime-trading/src/table/trading-table-footer.tsx
index db47ff1b27..a664a1bb73 100644
--- a/examples/solid/realtime-trading/src/table/trading-table-footer.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table-footer.tsx
@@ -13,10 +13,7 @@ export interface TradingTableFooterProps {
 export function TradingTableFooter(props: TradingTableFooterProps) {
   return (
     <Show when={props.virtualized()}>
-      <footer
-        class="virtual-scroll-footer"
-        data-testid="virtual-scroll-footer"
-      >
+      <footer class="virtual-scroll-footer" data-testid="virtual-scroll-footer">
         <span>
           TanStack · Total · {props.rows().length} rows ·{' '}
           {props.table.getVisibleLeafColumns().length} columns
diff --git a/examples/solid/realtime-trading/src/table/trading-table-header.tsx b/examples/solid/realtime-trading/src/table/trading-table-header.tsx
index d3b3946dc1..6a0f1ae86c 100644
--- a/examples/solid/realtime-trading/src/table/trading-table-header.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table-header.tsx
@@ -49,10 +49,7 @@ function TradingHeaderCell(props: TradingHeaderCellProps) {
   return (
     <th {...headerCellProps}>
       <Show when={!props.header.isPlaceholder}>
-        <Show
-          when={isLeaf()}
-          fallback={<FlexRender header={props.header} />}
-        >
+        <Show when={isLeaf()} fallback={<FlexRender header={props.header} />}>
           <TradingLeafHeader
             header={props.header}
             columnDrag={props.columnDrag}
@@ -76,11 +73,7 @@ function TradingLeafHeader(props: TradingHeaderCellProps) {
   return (
     <>
       <div class="leaf-header-content" {...dropZoneProps}>
-        <button
-          type="button"
-          class="column-drag-handle"
-          {...dragHandleProps}
-        >
+        <button type="button" class="column-drag-handle" {...dragHandleProps}>
           ⋮⋮
         </button>
         <button {...sortButtonProps}>
@@ -122,9 +115,7 @@ function createHeaderCellProps(
       }
     },
     get ['aria-sort']() {
-      return isLeaf()
-        ? sortAriaValue(header().column.getIsSorted())
-        : undefined
+      return isLeaf() ? sortAriaValue(header().column.getIsSorted()) : undefined
     },
     get classList() {
       const columnId = header().column.id
diff --git a/examples/solid/realtime-trading/src/table/trading-table.tsx b/examples/solid/realtime-trading/src/table/trading-table.tsx
index fdc5f533dd..6c19ecfbeb 100644
--- a/examples/solid/realtime-trading/src/table/trading-table.tsx
+++ b/examples/solid/realtime-trading/src/table/trading-table.tsx
@@ -20,8 +20,9 @@ import { TradingTableHeader } from './trading-table-header'
 export function TradingTable() {
   const feed = useMarketFeedController()
   const { state, actions } = useTradingShellController()
-  const [scrollElement, setScrollElement] =
-    createSignal<HTMLDivElement | null>(null)
+  const [scrollElement, setScrollElement] = createSignal<HTMLDivElement | null>(
+    null,
+  )
   const virtualized = () => state.virtualScrollMode() === 'tanstack'
   const model = createTradingTableModel({
     quotes: feed.state.quotes,
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
index 055a88087d..2904a7fd14 100644
--- a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -32,9 +32,7 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
     await expect(table.locator('tbody tr')).toHaveCount(100)
     const livePrice = table.locator('tbody tr').first().locator('td').nth(3)
     const initialPrice = await livePrice.textContent()
-    await expect
-      .poll(() => livePrice.textContent())
-      .not.toBe(initialPrice)
+    await expect.poll(() => livePrice.textContent()).not.toBe(initialPrice)
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
index 61cf012542..8c3fb49821 100644
--- a/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/svelte/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -282,12 +282,11 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      rafCallbacksPerSecond:
-        calculateFrameRate(
-          runtime.frameTimestamps,
-          runtime.frameTrackingStartedAt,
-          now,
-        ),
+      rafCallbacksPerSecond: calculateFrameRate(
+        runtime.frameTimestamps,
+        runtime.frameTrackingStartedAt,
+        now,
+      ),
       tableCommitsPerSecond:
         (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
diff --git a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index f1ea4ab5bc..12e65e30ea 100644
--- a/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/svelte/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,8 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount.get() >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
diff --git a/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts b/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
index 61cf012542..8c3fb49821 100644
--- a/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
+++ b/examples/vue/realtime-trading/src/benchmark/benchmark-monitor.ts
@@ -282,12 +282,11 @@ export class BenchmarkMonitor {
       supersededUpdatesPerSecond:
         (runtime.supersededUpdatesInSample / sampleDuration) * 1_000,
       totalTicks: runtime.totalTicks,
-      rafCallbacksPerSecond:
-        calculateFrameRate(
-          runtime.frameTimestamps,
-          runtime.frameTrackingStartedAt,
-          now,
-        ),
+      rafCallbacksPerSecond: calculateFrameRate(
+        runtime.frameTimestamps,
+        runtime.frameTrackingStartedAt,
+        now,
+      ),
       tableCommitsPerSecond:
         (runtime.tableCommitsInSample / sampleDuration) * 1_000,
       lastBatchSize: runtime.lastBatchSize,
diff --git a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index f1ea4ab5bc..12e65e30ea 100644
--- a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -63,8 +63,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount.get() >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
diff --git a/examples/vue/realtime-trading/src/shell/TradingShell.tsx b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
index 1457098b1d..2a65404680 100644
--- a/examples/vue/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
@@ -154,8 +154,8 @@ const MetricsStrip = defineComponent({
               {formatRate(metrics.rowUpdatesPerSecond)} rows/s
             </strong>
             <small>
-              {metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s ·
-              rows deduplicated per snapshot
+              {metrics.stateApplicationsPerSecond.toFixed(1)} snapshots/s · rows
+              deduplicated per snapshot
             </small>
           </article>
         </section>
diff --git a/packages/angular-table/src/flex-render/renderer.ts b/packages/angular-table/src/flex-render/renderer.ts
index 41ce59fc1f..205bb0a196 100644
--- a/packages/angular-table/src/flex-render/renderer.ts
+++ b/packages/angular-table/src/flex-render/renderer.ts
@@ -105,7 +105,7 @@ export class FlexViewRenderer<
   TRowData extends RowData,
   TValue extends CellData,
   TProps extends
-      | NonNullable<unknown>
+    | NonNullable<unknown>
     | CellContext<TFeatures, TRowData, TValue>
     | HeaderContext<TFeatures, TRowData, TValue>,
 > {

From ddcc06aa46718f7b7b08495e7605b7096a5c1561 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Tue, 18 Aug 2026 20:49:33 +0200
Subject: [PATCH 20/23] Replace TanStack store atoms with native Vue refs

---
 examples/vue/realtime-trading/README.md       | 22 ++---
 examples/vue/realtime-trading/package.json    |  2 -
 .../benchmark/trading-benchmark-controller.ts | 74 +++++----------
 .../src/feed/market-feed-controller.ts        | 64 ++++++-------
 .../src/shell/TradingShell.tsx                | 95 +++++++------------
 .../src/shell/trading-shell-context.ts        | 12 +--
 .../table/table-config/trading-columns.tsx    |  5 +-
 .../src/table/trading-table.tsx               | 61 +++++-------
 pnpm-lock.yaml                                |  6 --
 9 files changed, 124 insertions(+), 217 deletions(-)

diff --git a/examples/vue/realtime-trading/README.md b/examples/vue/realtime-trading/README.md
index 4a60a3e072..2a1b4303df 100644
--- a/examples/vue/realtime-trading/README.md
+++ b/examples/vue/realtime-trading/README.md
@@ -36,11 +36,11 @@ Use the production build for recordings; Vue development checks add overhead.
 
 `MarketFeedController` owns worker/feed state; `TradingBenchmarkController`
 observes it and owns benchmark/view state. Vue `provide`/`inject` distributes
-stable controller objects. `@tanstack/vue-store` selectors expose narrow
-reactive atoms instead of making the root consume the quotes and every metric.
-`quotes` is a dedicated high-frequency atom; feed status and each configuration
-value are independent atoms. Cleanup stops both controllers on application
-unmount.
+stable controller objects. The controllers use Vue primitives directly:
+`quotes` and metrics are independent `shallowRef` values, while feed status,
+configuration, selection, and view state use focused `ref` values. Consumers
+read only the refs they need, and the root never consumes the quote stream.
+Cleanup stops both controllers on application unmount.
 
 ## Feed and worker pipeline
 
@@ -73,11 +73,11 @@ double-click reset, drag ordering, CSS row hover, row selection, drag cell
 ranges, keyboard navigation, and component-based Price/Move/Percent/Sparkline
 cells.
 
-The table reads the dedicated quotes atom through a getter and uses the
-instrument ID for `getRowId`. Table state is selected independently from feed
-state; computed rows are invalidated only by the inputs relevant to the row
-model. Dedicated row views keep row markup and selected-instrument state below
-the whole-table boundary.
+The table accepts the dedicated quotes `shallowRef` directly and uses the
+instrument ID for `getRowId`. TanStack Vue Table's state atoms are Vue-backed,
+so row-model computations and layout watchers read only the required atoms from
+native `computed`/`watch` boundaries. Dedicated row views keep row markup and
+selected-instrument state below the whole-table boundary.
 
 A single `TradingGridPointerController` handles body pointer events. It maps
 `event.composedPath()` and data attributes back to the TanStack cell, avoiding
@@ -101,7 +101,7 @@ can reduce browser rendering but cannot prevent Vue from creating all rows.
 
 - market generation/coalescing is moved off the main thread;
 - immutable structural sharing preserves untouched rows/histories;
-- direct atom selectors and computed values narrow reactive invalidation;
+- focused Vue refs and computed values narrow reactive invalidation;
 - stable row and virtual item keys preserve identity;
 - row rendering is componentized without subscribing the app root to data;
 - pointer selection is delegated once;
diff --git a/examples/vue/realtime-trading/package.json b/examples/vue/realtime-trading/package.json
index d6064cde1c..e61953cb18 100644
--- a/examples/vue/realtime-trading/package.json
+++ b/examples/vue/realtime-trading/package.json
@@ -12,8 +12,6 @@
     "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts"
   },
   "dependencies": {
-    "@tanstack/store": "^0.11.0",
-    "@tanstack/vue-store": "^0.11.0",
     "@tanstack/vue-table": "9.1.2",
     "@tanstack/vue-virtual": "^3.13.35",
     "vue": "^3.5.40"
diff --git a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index f1ea4ab5bc..a1592aee28 100644
--- a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createAtom, createStore } from '@tanstack/store'
+import { ref, shallowRef } from 'vue'
 import { TRADING_COLUMN_COUNT } from '../table/trading-table'
 import { FORCED_VIRTUALIZATION_ROW_COUNT } from '../table/trading-row-virtualizer'
 import {
@@ -11,14 +11,6 @@ import type { MarketFeedController } from '../feed/market-feed-controller'
 import type { RendererMode } from '../table/trading-table'
 import type { VirtualScrollPreference } from '../table/trading-row-virtualizer'
 
-export interface TradingBenchmarkState {
-  requestedVirtualScrollMode: VirtualScrollPreference
-  metrics: FeedMetrics
-  mountedCells: number
-  liveComponents: number
-  longAnimationFramesSupported: boolean
-}
-
 export interface TradingBenchmarkActions {
   resetViewState: () => void
   setRendererMode: (mode: RendererMode) => void
@@ -28,20 +20,14 @@ export interface TradingBenchmarkActions {
   resetMarket: () => void
 }
 
-const initialState: TradingBenchmarkState = {
-  requestedVirtualScrollMode: 'auto',
-  metrics: initialMetrics,
-  mountedCells: 0,
-  liveComponents: 0,
-  longAnimationFramesSupported,
-}
-
 export class TradingBenchmarkController {
-  readonly store = createStore<TradingBenchmarkState>(initialState)
-  readonly renderAtoms = {
-    selectedSymbol: createAtom<string | null>(null),
-    rendererMode: createAtom<RendererMode>('stable'),
-  }
+  readonly requestedVirtualScrollMode = ref<VirtualScrollPreference>('auto')
+  readonly metrics = shallowRef<FeedMetrics>(initialMetrics)
+  readonly mountedCells = ref(0)
+  readonly liveComponents = ref(0)
+  readonly selectedSymbol = ref<string | null>(null)
+  readonly rendererMode = ref<RendererMode>('stable')
+  readonly longAnimationFramesSupported = longAnimationFramesSupported
   readonly monitor = new BenchmarkMonitor()
   readonly feed: MarketFeedController
   readonly actions: TradingBenchmarkActions
@@ -56,43 +42,36 @@ export class TradingBenchmarkController {
     this.feed = feed
     this.actions = {
       resetViewState: () => {
-        this.renderAtoms.selectedSymbol.set(null)
+        this.selectedSymbol.value = null
       },
       setRendererMode: (mode) => {
-        this.renderAtoms.rendererMode.set(mode)
+        this.rendererMode.value = mode
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.get() >=
+          this.feed.instrumentCount.value >=
           FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
-        this.#patch({
-          requestedVirtualScrollMode: enabled ? 'tanstack' : 'none',
-        })
+        this.requestedVirtualScrollMode.value = enabled ? 'tanstack' : 'none'
       },
       setRenderedRowCount: (count) => {
         const mountedCells = count * TRADING_COLUMN_COUNT
-        if (mountedCells !== this.store.get().mountedCells) {
-          this.#patch({ mountedCells })
+        if (mountedCells !== this.mountedCells.value) {
+          this.mountedCells.value = mountedCells
         }
       },
       selectSymbol: (symbol) => {
-        this.renderAtoms.selectedSymbol.set(symbol)
+        this.selectedSymbol.value = symbol
       },
       resetMarket: () => {
-        batch(() => {
-          this.monitor.reset()
-          this.store.setState((state) => ({
-            ...state,
-            metrics: { ...initialMetrics },
-            mountedCells: 0,
-            liveComponents: 0,
-          }))
-          this.renderAtoms.selectedSymbol.set(null)
-          this.feed.actions.reset()
-        })
+        this.monitor.reset()
+        this.metrics.value = { ...initialMetrics }
+        this.mountedCells.value = 0
+        this.liveComponents.value = 0
+        this.selectedSymbol.value = null
+        this.feed.actions.reset()
       },
     }
   }
@@ -141,14 +120,9 @@ export class TradingBenchmarkController {
     this.#runtime.animationFrameId = requestAnimationFrame(this.#benchmarkFrame)
   }
 
-  #patch(patch: Partial<TradingBenchmarkState>): void {
-    this.store.setState((state) => ({ ...state, ...patch }))
-  }
-
   #publishMetrics(metrics: FeedMetrics): void {
-    this.#patch({
-      metrics,
-      liveComponents: metrics.componentsCreated - metrics.componentsDestroyed,
-    })
+    this.metrics.value = metrics
+    this.liveComponents.value =
+      metrics.componentsCreated - metrics.componentsDestroyed
   }
 }
diff --git a/examples/vue/realtime-trading/src/feed/market-feed-controller.ts b/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
index 40f523562d..1da3121709 100644
--- a/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
@@ -1,4 +1,4 @@
-import { batch, createAtom } from '@tanstack/store'
+import { ref, shallowRef } from 'vue'
 import { normalizeFeedSampleRate } from './feed-sample-rates'
 import { initialMarketFeedConfig } from './market-feed-config'
 import { applyMarketUpdates, hydrateMarketQuotes } from './market-data'
@@ -33,22 +33,22 @@ export interface MarketFeedActions {
 }
 
 export class MarketFeedController {
-  readonly workerReady = createAtom(false)
-  readonly running = createAtom(true)
-  readonly instrumentCount = createAtom(initialMarketFeedConfig.instrumentCount)
-  readonly targetTicksPerSecond = createAtom(
+  readonly workerReady = ref(false)
+  readonly running = ref(true)
+  readonly instrumentCount = ref(initialMarketFeedConfig.instrumentCount)
+  readonly targetTicksPerSecond = ref(
     initialMarketFeedConfig.targetSamplesPerSecond,
   )
-  readonly publishIntervalMs = createAtom(
+  readonly publishIntervalMs = ref(
     initialMarketFeedConfig.publishIntervalMs,
   )
-  readonly updateSparklines = createAtom(
+  readonly updateSparklines = ref(
     initialMarketFeedConfig.updateSparklines,
   )
-  readonly sparklineSampleIntervalMs = createAtom(
+  readonly sparklineSampleIntervalMs = ref(
     initialMarketFeedConfig.sparklineSampleIntervalMs,
   )
-  readonly quotes = createAtom<Array<MarketQuote>>([])
+  readonly quotes = shallowRef<Array<MarketQuote>>([])
   readonly actions: MarketFeedActions
   readonly #observers = new Set<MarketFeedObserver>()
   readonly #runtime = {
@@ -63,36 +63,36 @@ export class MarketFeedController {
   constructor() {
     this.actions = {
       toggle: () => {
-        const running = !this.running.get()
-        this.running.set(running)
+        const running = !this.running.value
+        this.running.value = running
         this.#post({ type: 'set-running', running })
       },
       setInstrumentCount: (count) => {
-        this.instrumentCount.set(count)
+        this.instrumentCount.value = count
         this.#resetWorker(count)
       },
       setTargetRate: (rate) => {
         const sampleRate = normalizeFeedSampleRate(rate)
-        this.targetTicksPerSecond.set(sampleRate)
+        this.targetTicksPerSecond.value = sampleRate
         this.#post({ type: 'set-rate', ticksPerSecond: sampleRate })
       },
       setPublishInterval: (publishIntervalMs) => {
-        this.publishIntervalMs.set(publishIntervalMs)
+        this.publishIntervalMs.value = publishIntervalMs
         this.#post({
           type: 'set-publish-interval',
           intervalMs: publishIntervalMs,
         })
       },
       setSparklineUpdates: (enabled) => {
-        this.updateSparklines.set(enabled)
+        this.updateSparklines.value = enabled
         this.#post({ type: 'set-sparklines', enabled })
       },
       setSparklineSampleInterval: (intervalMs) => {
-        this.sparklineSampleIntervalMs.set(intervalMs)
+        this.sparklineSampleIntervalMs.value = intervalMs
         this.#post({ type: 'set-sparkline-interval', intervalMs })
       },
       runBurst: () => this.#post({ type: 'burst', tickCount: 25_000 }),
-      reset: () => this.#resetWorker(this.instrumentCount.get()),
+      reset: () => this.#resetWorker(this.instrumentCount.value),
     }
   }
 
@@ -106,12 +106,12 @@ export class MarketFeedController {
     worker.addEventListener('error', this.#handleWorkerError)
     this.#post({
       type: 'start',
-      rowCount: this.instrumentCount.get(),
-      running: this.running.get(),
-      ticksPerSecond: this.targetTicksPerSecond.get(),
-      publishIntervalMs: this.publishIntervalMs.get(),
-      updateSparklines: this.updateSparklines.get(),
-      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.get(),
+      rowCount: this.instrumentCount.value,
+      running: this.running.value,
+      ticksPerSecond: this.targetTicksPerSecond.value,
+      publishIntervalMs: this.publishIntervalMs.value,
+      updateSparklines: this.updateSparklines.value,
+      sparklineSampleIntervalMs: this.sparklineSampleIntervalMs.value,
     })
     return () => this.stop()
   }
@@ -155,7 +155,7 @@ export class MarketFeedController {
     ) {
       this.#runtime.resetWaitingForCommit = false
       this.#runtime.resetSnapshotReady = false
-      this.#post({ type: 'set-running', running: this.running.get() })
+      this.#post({ type: 'set-running', running: this.running.value })
     }
   }
 
@@ -172,10 +172,8 @@ export class MarketFeedController {
       this.#runtime.quoteIndexBySymbol = new Map(
         quotes.map((quote, index) => [quote.symbol, index]),
       )
-      batch(() => {
-        this.quotes.set(quotes)
-        this.workerReady.set(true)
-      })
+      this.quotes.value = quotes
+      this.workerReady.value = true
       return
     }
 
@@ -185,7 +183,7 @@ export class MarketFeedController {
       observer.messageReceived?.()
     }
     this.#startMutation()
-    this.quotes.set(applyMarketUpdates(this.quotes.get(), data.updates))
+    this.quotes.value = applyMarketUpdates(this.quotes.value, data.updates)
     const feedBatch = {
       tickCount: data.tickCount,
       updateCount: data.updates.length,
@@ -197,15 +195,13 @@ export class MarketFeedController {
   }
 
   readonly #handleWorkerError = (error: ErrorEvent): void => {
-    batch(() => {
-      this.workerReady.set(false)
-      this.running.set(false)
-    })
+    this.workerReady.value = false
+    this.running.value = false
     console.error('Market feed worker failed', error)
   }
 
   #resetWorker(rowCount: number): void {
-    this.workerReady.set(false)
+    this.workerReady.value = false
     this.#runtime.resetWaitingForCommit = true
     this.#runtime.resetSnapshotReady = false
     this.#post({ type: 'set-running', running: false })
diff --git a/examples/vue/realtime-trading/src/shell/TradingShell.tsx b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
index 1457098b1d..62eef57671 100644
--- a/examples/vue/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
@@ -1,5 +1,4 @@
 import { computed, defineComponent, ref } from 'vue'
-import { useSelector } from '@tanstack/vue-store'
 import {
   feedSampleRateAt,
   feedSampleRateIndex,
@@ -12,7 +11,6 @@ import {
 import {
   useMarketFeedController,
   useTradingShellController,
-  useTradingShellState,
 } from './trading-shell-context'
 import { configuratorOptions } from './configurator-options'
 import type { FeedMetrics } from '../benchmark/benchmark-monitor'
@@ -67,8 +65,6 @@ const AppHeader = defineComponent({
   },
   setup(props) {
     const feed = useMarketFeedController()
-    const workerReady = useSelector(feed.workerReady)
-    const running = useSelector(feed.running)
     return () => (
       <header class="app-bar">
         <div class="brand">
@@ -78,14 +74,14 @@ const AppHeader = defineComponent({
           <span
             class={[
               'feed-status',
-              workerReady.value && running.value && 'is-running',
+              feed.workerReady.value && feed.running.value && 'is-running',
             ]}
             data-testid="feed-status"
           >
             <span class="status-dot" aria-hidden="true" />
-            {!workerReady.value
+            {!feed.workerReady.value
               ? 'FEED CONNECTING'
-              : running.value
+              : feed.running.value
                 ? 'FEED LIVE'
                 : 'FEED PAUSED'}
           </span>
@@ -113,12 +109,9 @@ const AppHeader = defineComponent({
 const MetricsStrip = defineComponent({
   name: 'MetricsStrip',
   setup() {
-    const state = useTradingShellState((benchmark) => ({
-      metrics: benchmark.metrics,
-      longAnimationFramesSupported: benchmark.longAnimationFramesSupported,
-    }))
+    const controller = useTradingShellController()
     return () => {
-      const metrics = state.value.metrics
+      const metrics = controller.metrics.value
       return (
         <section class="metrics-strip" aria-labelledby="live-health">
           <h2 id="live-health">LIVE HEALTH</h2>
@@ -137,12 +130,12 @@ const MetricsStrip = defineComponent({
           <Metric
             label="LONG FRAMES"
             value={
-              state.value.longAnimationFramesSupported
+              controller.longAnimationFramesSupported
                 ? String(metrics.longAnimationFrames)
                 : 'N/A'
             }
             detail={
-              state.value.longAnimationFramesSupported
+              controller.longAnimationFramesSupported
                 ? `since reset · worst ${formatMs(metrics.worstLongAnimationFrameMs)}`
                 : 'unsupported by this browser'
             }
@@ -186,31 +179,27 @@ const Metric = defineComponent({
 const MarketStatusbar = defineComponent({
   name: 'MarketStatusbar',
   setup() {
-    const state = useTradingShellState((benchmark) => ({
-      lastBatchSize: benchmark.metrics.lastBatchSize,
-      lastUpdateCount: benchmark.metrics.lastUpdateCount,
-      mountedCells: benchmark.mountedCells,
-      liveComponents: benchmark.liveComponents,
-    }))
-    return () => (
-      <footer class="market-statusbar">
+    const controller = useTradingShellController()
+    return () => {
+      const metrics = controller.metrics.value
+      return <footer class="market-statusbar">
         <span>
           MESSAGE SAMPLES{' '}
-          <strong>{formatInteger(state.value.lastBatchSize)}</strong>
+          <strong>{formatInteger(metrics.lastBatchSize)}</strong>
         </span>
         <span>
           CHANGED ROWS{' '}
-          <strong>{formatInteger(state.value.lastUpdateCount)}</strong>
+          <strong>{formatInteger(metrics.lastUpdateCount)}</strong>
         </span>
         <span>
-          HOSTS <strong>{formatInteger(state.value.mountedCells)}</strong>
+          HOSTS <strong>{formatInteger(controller.mountedCells.value)}</strong>
         </span>
         <span>
           COMPONENTS{' '}
-          <strong>{formatInteger(state.value.liveComponents)}</strong>
+          <strong>{formatInteger(controller.liveComponents.value)}</strong>
         </span>
       </footer>
-    )
+    }
   },
 })
 
@@ -219,31 +208,13 @@ const Configurator = defineComponent({
   setup() {
     const controller = useTradingShellController()
     const feed = useMarketFeedController()
-    const running = useSelector(feed.running)
-    const instrumentCount = useSelector(feed.instrumentCount)
-    const targetTicksPerSecond = useSelector(feed.targetTicksPerSecond)
-    const publishIntervalMs = useSelector(feed.publishIntervalMs)
-    const updateSparklines = useSelector(feed.updateSparklines)
-    const sparklineSampleIntervalMs = useSelector(
-      feed.sparklineSampleIntervalMs,
-    )
-    const feedState = computed(() => ({
-      running: running.value,
-      instrumentCount: instrumentCount.value,
-      targetTicksPerSecond: targetTicksPerSecond.value,
-      publishIntervalMs: publishIntervalMs.value,
-      updateSparklines: updateSparklines.value,
-      sparklineSampleIntervalMs: sparklineSampleIntervalMs.value,
-    }))
-    const benchmarkState = useTradingShellState((state) => state)
-    const rendererMode = useSelector(controller.renderAtoms.rendererMode)
     const virtualScrollForced = computed(
-      () => feedState.value.instrumentCount >= FORCED_VIRTUALIZATION_ROW_COUNT,
+      () => feed.instrumentCount.value >= FORCED_VIRTUALIZATION_ROW_COUNT,
     )
     const virtualScrollMode = computed(() =>
       resolveVirtualScrollMode(
-        benchmarkState.value.requestedVirtualScrollMode,
-        feedState.value.instrumentCount,
+        controller.requestedVirtualScrollMode.value,
+        feed.instrumentCount.value,
       ),
     )
 
@@ -266,13 +237,13 @@ const Configurator = defineComponent({
             data-testid="feed-toggle"
             onClick={feed.actions.toggle}
           >
-            {feedState.value.running ? 'PAUSE FEED' : 'START FEED'}
+            {feed.running.value ? 'PAUSE FEED' : 'START FEED'}
           </button>
           <label class="field">
             <span>Instruments (rows)</span>
             <select
               data-testid="instrument-count-select"
-              value={feedState.value.instrumentCount}
+              value={feed.instrumentCount.value}
               onChange={(event) => {
                 controller.actions.resetViewState()
                 feed.actions.setInstrumentCount(numberValue(event))
@@ -285,7 +256,7 @@ const Configurator = defineComponent({
             <span>
               Synthetic quote workload
               <strong data-testid="target-sample-rate">
-                {formatRate(feedState.value.targetTicksPerSecond)} samples/s
+                {formatRate(feed.targetTicksPerSecond.value)} samples/s
               </strong>
             </span>
             <input
@@ -294,7 +265,7 @@ const Configurator = defineComponent({
               min={0}
               max={feedSampleRateOptions.length - 1}
               step={1}
-              value={feedSampleRateIndex(feedState.value.targetTicksPerSecond)}
+              value={feedSampleRateIndex(feed.targetTicksPerSecond.value)}
               onChange={(event) =>
                 feed.actions.setTargetRate(feedSampleRateAt(numberValue(event)))
               }
@@ -308,7 +279,7 @@ const Configurator = defineComponent({
             <span>Worker delivery interval</span>
             <select
               data-testid="publish-interval-select"
-              value={feedState.value.publishIntervalMs}
+              value={feed.publishIntervalMs.value}
               onChange={(event) =>
                 feed.actions.setPublishInterval(numberValue(event))
               }
@@ -343,7 +314,7 @@ const Configurator = defineComponent({
           <label class="toggle-field">
             <input
               type="checkbox"
-              checked={rendererMode.value === 'swap'}
+              checked={controller.rendererMode.value === 'swap'}
               onChange={(event) =>
                 controller.actions.setRendererMode(
                   checkedValue(event) ? 'swap' : 'stable',
@@ -358,7 +329,7 @@ const Configurator = defineComponent({
           <label class="toggle-field">
             <input
               type="checkbox"
-              checked={feedState.value.updateSparklines}
+              checked={feed.updateSparklines.value}
               onChange={(event) =>
                 feed.actions.setSparklineUpdates(checkedValue(event))
               }
@@ -372,7 +343,7 @@ const Configurator = defineComponent({
             <span>Intraday chart sampling</span>
             <select
               data-testid="sparkline-sample-interval-select"
-              value={feedState.value.sparklineSampleIntervalMs}
+              value={feed.sparklineSampleIntervalMs.value}
               onChange={(event) =>
                 feed.actions.setSparklineSampleInterval(numberValue(event))
               }
@@ -402,9 +373,9 @@ const Configurator = defineComponent({
 const Diagnostics = defineComponent({
   name: 'Diagnostics',
   setup() {
-    const state = useTradingShellState((benchmark) => benchmark)
+    const controller = useTradingShellController()
     return () => {
-      const { metrics } = state.value
+      const metrics = controller.metrics.value
       return (
         <section
           class="config-section diagnostics"
@@ -443,11 +414,11 @@ const Diagnostics = defineComponent({
             />
             <Diagnostic
               label="Mounted cells"
-              value={formatInteger(state.value.mountedCells)}
+              value={formatInteger(controller.mountedCells.value)}
             />
             <Diagnostic
               label="Live components"
-              value={formatInteger(state.value.liveComponents)}
+              value={formatInteger(controller.liveComponents.value)}
             />
             <Diagnostic
               label="Created / destroyed"
@@ -548,10 +519,8 @@ const SelectedInstrument = defineComponent({
   setup() {
     const controller = useTradingShellController()
     const feed = useMarketFeedController()
-    const selectedSymbol = useSelector(controller.renderAtoms.selectedSymbol)
-    const quotes = useSelector(feed.quotes)
     const selectedQuote = computed(() =>
-      feed.getQuoteBySymbol(quotes.value, selectedSymbol.value),
+      feed.getQuoteBySymbol(feed.quotes.value, controller.selectedSymbol.value),
     )
     return () => (
       <section
diff --git a/examples/vue/realtime-trading/src/shell/trading-shell-context.ts b/examples/vue/realtime-trading/src/shell/trading-shell-context.ts
index 161c1a45f3..0a08f021bd 100644
--- a/examples/vue/realtime-trading/src/shell/trading-shell-context.ts
+++ b/examples/vue/realtime-trading/src/shell/trading-shell-context.ts
@@ -1,11 +1,7 @@
 import { inject, provide } from 'vue'
-import { useSelector } from '@tanstack/vue-store'
 import type { InjectionKey } from 'vue'
 import type { MarketFeedController } from '../feed/market-feed-controller'
-import type {
-  TradingBenchmarkController,
-  TradingBenchmarkState,
-} from '../benchmark/trading-benchmark-controller'
+import type { TradingBenchmarkController } from '../benchmark/trading-benchmark-controller'
 
 interface TradingControllers {
   benchmark: TradingBenchmarkController
@@ -33,9 +29,3 @@ export function useMarketFeedController(): MarketFeedController {
   if (!controllers) throw new Error('Missing trading controllers')
   return controllers.feed
 }
-
-export function useTradingShellState<TSelected>(
-  selector: (state: TradingBenchmarkState) => TSelected,
-) {
-  return useSelector(useTradingShellController().store, selector)
-}
diff --git a/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx b/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
index 69151e7992..233a0eab37 100644
--- a/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
+++ b/examples/vue/realtime-trading/src/table/table-config/trading-columns.tsx
@@ -1,5 +1,4 @@
 import { defineComponent } from 'vue'
-import { useSelector } from '@tanstack/vue-store'
 import { useTradingShellController } from '../../shell/trading-shell-context'
 import {
   DownMoveCell,
@@ -256,9 +255,7 @@ const DayChangeCell = defineComponent({
     quote: { type: Object as PropType<MarketQuote>, required: true },
   },
   setup(props) {
-    const mode = useSelector(
-      useTradingShellController().renderAtoms.rendererMode,
-    )
+    const mode = useTradingShellController().rendererMode
     return () => {
       const change = getDayChange(props.quote)
       if (mode.value === 'stable') return <StableMoveCell move={change} />
diff --git a/examples/vue/realtime-trading/src/table/trading-table.tsx b/examples/vue/realtime-trading/src/table/trading-table.tsx
index 3b6c521ba5..a7954c8e85 100644
--- a/examples/vue/realtime-trading/src/table/trading-table.tsx
+++ b/examples/vue/realtime-trading/src/table/trading-table.tsx
@@ -6,9 +6,9 @@ import {
   onMounted,
   onUpdated,
   ref,
+  watch,
   watchEffect,
 } from 'vue'
-import { useSelector } from '@tanstack/vue-store'
 import {
   FlexRender,
   createFilteredRowModel,
@@ -24,7 +24,6 @@ import { useTableBenchmark } from '../benchmark/use-table-benchmark'
 import {
   useMarketFeedController,
   useTradingShellController,
-  useTradingShellState,
 } from '../shell/trading-shell-context'
 import {
   TRADING_COLUMN_COUNT,
@@ -83,9 +82,7 @@ const TradingRowView = defineComponent({
     virtualRow: Object as PropType<VirtualItem>,
   },
   setup(props, { slots }) {
-    const selectedSymbol = useSelector(
-      useTradingShellController().renderAtoms.selectedSymbol,
-    )
+    const selectedSymbol = useTradingShellController().selectedSymbol
     return () => (
       <tr
         class={props.virtualRow ? 'virtual-table-row' : undefined}
@@ -116,39 +113,27 @@ export const TradingTable = defineComponent({
   setup() {
     const controller = useTradingShellController()
     const feed = useMarketFeedController()
-    const quotes = useSelector(feed.quotes)
-    const instrumentCount = useSelector(feed.instrumentCount)
-    const requestedVirtualScrollMode = useTradingShellState(
-      (state) => state.requestedVirtualScrollMode,
-    )
     const virtualScrollMode = computed(() =>
       resolveVirtualScrollMode(
-        requestedVirtualScrollMode.value,
-        instrumentCount.value,
+        controller.requestedVirtualScrollMode.value,
+        feed.instrumentCount.value,
       ),
     )
     const table = useTable({
       key: 'vue-realtime-trading',
       features,
       columns: tradingColumns,
-      get data() {
-        return quotes.value
-      },
+      data: feed.quotes,
       getRowId: (row: MarketQuote) => row.id,
       columnResizeMode: 'onChange',
       defaultColumn: { minSize: 56, maxSize: 800 },
       autoResetCellSelection: false,
     })
-    const tableState = useSelector(table.store, (state) => ({
-      sorting: state.sorting,
-      columnFilters: state.columnFilters,
-      columnOrder: state.columnOrder,
-      rowSelection: state.rowSelection,
-      cellSelection: state.cellSelection,
-    }))
     const rows = computed(() => {
-      void quotes.value
-      tableState.value
+      void feed.quotes.value
+      void table.atoms.sorting.get()
+      void table.atoms.columnFilters.get()
+      void table.atoms.columnOrder.get()
       return readMeasuredRows(() => table.getRowModel().rows)
     })
     const scrollElement = ref<HTMLDivElement | null>(null)
@@ -222,15 +207,21 @@ export const TradingTable = defineComponent({
       )
     }
     const resizeObserver = new ResizeObserver(fitAvailableWidth)
-    const sizingSubscription =
-      table.atoms.columnSizing.subscribe(writeColumnSizes)
-    const orderSubscription =
-      table.atoms.columnOrder.subscribe(writeColumnSizes)
-    const resizingSubscription = table.atoms.columnResizing.subscribe(
-      (state) => {
-        if (state.isResizingColumn !== false)
+    const stopLayoutWatch = watch(
+      [
+        () => table.atoms.columnSizing.get(),
+        () => table.atoms.columnOrder.get(),
+      ],
+      writeColumnSizes,
+      { flush: 'post' },
+    )
+    const stopResizingWatch = watch(
+      () => table.atoms.columnResizing.get().isResizingColumn,
+      (resizingColumn) => {
+        if (resizingColumn !== false)
           layoutRuntime.manuallyResized = true
       },
+      { flush: 'sync' },
     )
     onMounted(() => {
       nextTick(() => {
@@ -240,9 +231,8 @@ export const TradingTable = defineComponent({
       })
     })
     onBeforeUnmount(() => {
-      sizingSubscription.unsubscribe()
-      orderSubscription.unsubscribe()
-      resizingSubscription.unsubscribe()
+      stopLayoutWatch()
+      stopResizingWatch()
       resizeObserver.disconnect()
     })
     watchEffect(() => {
@@ -301,7 +291,6 @@ export const TradingTable = defineComponent({
     )
 
     return () => {
-      tableState.value
       const currentRows = rows.value
       const activeVirtualRows = virtualRows.value
       return (
@@ -466,7 +455,7 @@ export const TradingTable = defineComponent({
                     ? { height: `${currentRows.length * TRADING_ROW_HEIGHT}px` }
                     : undefined
                 }
-                data-source-row-count={quotes.value.length}
+                data-source-row-count={feed.quotes.value.length}
                 onMousedown={(event) =>
                   pointerInteractions.handleMouseDown(
                     table,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ac66f99ef8..c2476c732d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14703,12 +14703,6 @@ importers:
 
   examples/vue/realtime-trading:
     dependencies:
-      '@tanstack/store':
-        specifier: ^0.11.0
-        version: 0.11.1
-      '@tanstack/vue-store':
-        specifier: ^0.11.0
-        version: 0.11.1(vue@3.5.41(typescript@6.0.3))
       '@tanstack/vue-table':
         specifier: workspace:*
         version: link:../../../packages/vue-table

From 8bba4902a66e0d2fdff28b0785ceb64d222306c9 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 18 Aug 2026 18:52:15 +0000
Subject: [PATCH 21/23] ci: apply automated fixes

---
 .../benchmark/trading-benchmark-controller.ts |  3 +-
 .../src/feed/market-feed-controller.ts        |  8 +---
 .../src/shell/TradingShell.tsx                | 37 ++++++++++---------
 .../src/table/trading-table.tsx               |  3 +-
 4 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
index a1592aee28..21b68447ef 100644
--- a/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
+++ b/examples/vue/realtime-trading/src/benchmark/trading-benchmark-controller.ts
@@ -49,8 +49,7 @@ export class TradingBenchmarkController {
       },
       setVirtualScrollEnabled: (enabled) => {
         if (
-          this.feed.instrumentCount.value >=
-          FORCED_VIRTUALIZATION_ROW_COUNT
+          this.feed.instrumentCount.value >= FORCED_VIRTUALIZATION_ROW_COUNT
         ) {
           return
         }
diff --git a/examples/vue/realtime-trading/src/feed/market-feed-controller.ts b/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
index 1da3121709..27e2a8493b 100644
--- a/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
+++ b/examples/vue/realtime-trading/src/feed/market-feed-controller.ts
@@ -39,12 +39,8 @@ export class MarketFeedController {
   readonly targetTicksPerSecond = ref(
     initialMarketFeedConfig.targetSamplesPerSecond,
   )
-  readonly publishIntervalMs = ref(
-    initialMarketFeedConfig.publishIntervalMs,
-  )
-  readonly updateSparklines = ref(
-    initialMarketFeedConfig.updateSparklines,
-  )
+  readonly publishIntervalMs = ref(initialMarketFeedConfig.publishIntervalMs)
+  readonly updateSparklines = ref(initialMarketFeedConfig.updateSparklines)
   readonly sparklineSampleIntervalMs = ref(
     initialMarketFeedConfig.sparklineSampleIntervalMs,
   )
diff --git a/examples/vue/realtime-trading/src/shell/TradingShell.tsx b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
index 4136bce387..26fd235f2d 100644
--- a/examples/vue/realtime-trading/src/shell/TradingShell.tsx
+++ b/examples/vue/realtime-trading/src/shell/TradingShell.tsx
@@ -182,23 +182,26 @@ const MarketStatusbar = defineComponent({
     const controller = useTradingShellController()
     return () => {
       const metrics = controller.metrics.value
-      return <footer class="market-statusbar">
-        <span>
-          MESSAGE SAMPLES{' '}
-          <strong>{formatInteger(metrics.lastBatchSize)}</strong>
-        </span>
-        <span>
-          CHANGED ROWS{' '}
-          <strong>{formatInteger(metrics.lastUpdateCount)}</strong>
-        </span>
-        <span>
-          HOSTS <strong>{formatInteger(controller.mountedCells.value)}</strong>
-        </span>
-        <span>
-          COMPONENTS{' '}
-          <strong>{formatInteger(controller.liveComponents.value)}</strong>
-        </span>
-      </footer>
+      return (
+        <footer class="market-statusbar">
+          <span>
+            MESSAGE SAMPLES{' '}
+            <strong>{formatInteger(metrics.lastBatchSize)}</strong>
+          </span>
+          <span>
+            CHANGED ROWS{' '}
+            <strong>{formatInteger(metrics.lastUpdateCount)}</strong>
+          </span>
+          <span>
+            HOSTS{' '}
+            <strong>{formatInteger(controller.mountedCells.value)}</strong>
+          </span>
+          <span>
+            COMPONENTS{' '}
+            <strong>{formatInteger(controller.liveComponents.value)}</strong>
+          </span>
+        </footer>
+      )
     }
   },
 })
diff --git a/examples/vue/realtime-trading/src/table/trading-table.tsx b/examples/vue/realtime-trading/src/table/trading-table.tsx
index a7954c8e85..7bb46fff0d 100644
--- a/examples/vue/realtime-trading/src/table/trading-table.tsx
+++ b/examples/vue/realtime-trading/src/table/trading-table.tsx
@@ -218,8 +218,7 @@ export const TradingTable = defineComponent({
     const stopResizingWatch = watch(
       () => table.atoms.columnResizing.get().isResizingColumn,
       (resizingColumn) => {
-        if (resizingColumn !== false)
-          layoutRuntime.manuallyResized = true
+        if (resizingColumn !== false) layoutRuntime.manuallyResized = true
       },
       { flush: 'sync' },
     )

From f8a501c20bb1a675c2a6ebbaace643f8f7ecb0c4 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Tue, 18 Aug 2026 21:10:36 +0200
Subject: [PATCH 22/23] Prevent text selection in realtime trading grids

---
 .../alpine/realtime-trading/src/index.css     |  5 +++
 .../src/table/table-interactions.ts           |  1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 .../angular/realtime-trading/src/styles.css   |  5 +++
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 examples/ember/realtime-trading/app/app.css   |  5 +++
 .../app/table/table-interactions.ts           |  1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 examples/lit/realtime-trading/src/index.css   |  5 +++
 .../src/table/table-interactions.ts           |  1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 .../octane/realtime-trading/src/index.css     |  5 +++
 .../src/table/use-trading-grid-pointer.ts     |  1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 .../preact/realtime-trading/src/index.css     |  5 +++
 .../src/table/table-interactions.ts           |  1 +
 .../src/table/trading-table.tsx               | 33 +++++++++++--------
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 examples/react/realtime-trading/src/index.css |  5 +++
 .../src/table/trading-table.tsx               | 33 +++++++++++--------
 .../src/table/use-trading-grid-pointer.ts     |  1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 examples/solid/realtime-trading/src/index.css |  5 +++
 .../src/table/table-interactions.ts           |  1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 .../svelte/realtime-trading/src/index.css     |  5 +++
 .../src/table/table-interactions.ts           |  1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  3 +-
 examples/vue/realtime-trading/src/index.css   |  5 +++
 .../src/table/table-interactions.ts           |  1 +
 .../realtime-trading/tests/e2e/smoke.spec.ts  |  1 +
 31 files changed, 108 insertions(+), 29 deletions(-)

diff --git a/examples/alpine/realtime-trading/src/index.css b/examples/alpine/realtime-trading/src/index.css
index 69cba52fa7..397c86fc54 100644
--- a/examples/alpine/realtime-trading/src/index.css
+++ b/examples/alpine/realtime-trading/src/index.css
@@ -347,6 +347,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/alpine/realtime-trading/src/table/table-interactions.ts b/examples/alpine/realtime-trading/src/table/table-interactions.ts
index 1df83b2484..99649a40bd 100644
--- a/examples/alpine/realtime-trading/src/table/table-interactions.ts
+++ b/examples/alpine/realtime-trading/src/table/table-interactions.ts
@@ -98,6 +98,7 @@ export class TradingGridPointerController {
     const target = this.#findCellTarget(table, event.composedPath())
     if (!target) return
 
+    event.preventDefault()
     this.#lastPointerCell = target.element
     selectSymbol(target.cell.row.original.symbol)
     target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
diff --git a/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts b/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
index ccbd8fedc5..9ed2b833bc 100644
--- a/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/alpine/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,6 +30,7 @@ test('runs the Alpine realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/angular/realtime-trading/src/styles.css b/examples/angular/realtime-trading/src/styles.css
index f15e25c9d5..113476ec65 100644
--- a/examples/angular/realtime-trading/src/styles.css
+++ b/examples/angular/realtime-trading/src/styles.css
@@ -356,6 +356,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
index 00392e14d6..d107f906fa 100644
--- a/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/angular/realtime-trading/tests/e2e/smoke.spec.ts
@@ -32,6 +32,7 @@ test('runs the Angular realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/ember/realtime-trading/app/app.css b/examples/ember/realtime-trading/app/app.css
index 7cce7662eb..82328b533e 100644
--- a/examples/ember/realtime-trading/app/app.css
+++ b/examples/ember/realtime-trading/app/app.css
@@ -347,6 +347,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/ember/realtime-trading/app/table/table-interactions.ts b/examples/ember/realtime-trading/app/table/table-interactions.ts
index 27c35b6e98..a32e9d5963 100644
--- a/examples/ember/realtime-trading/app/table/table-interactions.ts
+++ b/examples/ember/realtime-trading/app/table/table-interactions.ts
@@ -98,6 +98,7 @@ export class TradingGridPointerController {
     const target = this.#findCellTarget(table, event.composedPath())
     if (!target) return
 
+    event.preventDefault()
     this.#lastPointerCell = target.element
     selectSymbol(target.cell.row.original.symbol)
     target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
diff --git a/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts b/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
index 8918149657..6a78ee84b3 100644
--- a/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/ember/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,6 +30,7 @@ test('runs the Ember realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/lit/realtime-trading/src/index.css b/examples/lit/realtime-trading/src/index.css
index 9ccb219ab8..20ff776c06 100644
--- a/examples/lit/realtime-trading/src/index.css
+++ b/examples/lit/realtime-trading/src/index.css
@@ -351,6 +351,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/lit/realtime-trading/src/table/table-interactions.ts b/examples/lit/realtime-trading/src/table/table-interactions.ts
index 1df83b2484..99649a40bd 100644
--- a/examples/lit/realtime-trading/src/table/table-interactions.ts
+++ b/examples/lit/realtime-trading/src/table/table-interactions.ts
@@ -98,6 +98,7 @@ export class TradingGridPointerController {
     const target = this.#findCellTarget(table, event.composedPath())
     if (!target) return
 
+    event.preventDefault()
     this.#lastPointerCell = target.element
     selectSymbol(target.cell.row.original.symbol)
     target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
diff --git a/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts b/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
index 2e367befbc..84b6ba3915 100644
--- a/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/lit/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,6 +30,7 @@ test('runs the Lit realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/octane/realtime-trading/src/index.css b/examples/octane/realtime-trading/src/index.css
index 7cce7662eb..82328b533e 100644
--- a/examples/octane/realtime-trading/src/index.css
+++ b/examples/octane/realtime-trading/src/index.css
@@ -347,6 +347,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts b/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
index 5e8190a2e9..671ad11f3f 100644
--- a/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
+++ b/examples/octane/realtime-trading/src/table/use-trading-grid-pointer.ts
@@ -26,6 +26,7 @@ export function useTradingGridPointer(
         const target = findTradingGridCellTarget(table, event.composedPath())
         if (!target) return
 
+        event.preventDefault()
         lastPointerCell.current = target.element
         selectSymbol(target.cell.row.original.symbol)
         target.cell.getSelectionStartHandler(target.element.ownerDocument)(
diff --git a/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts b/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
index 29fecc12ab..44eae9d573 100644
--- a/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/octane/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,6 +30,7 @@ test('runs the Octane realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/preact/realtime-trading/src/index.css b/examples/preact/realtime-trading/src/index.css
index 69cba52fa7..397c86fc54 100644
--- a/examples/preact/realtime-trading/src/index.css
+++ b/examples/preact/realtime-trading/src/index.css
@@ -347,6 +347,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/preact/realtime-trading/src/table/table-interactions.ts b/examples/preact/realtime-trading/src/table/table-interactions.ts
index 2c6bc72dff..5b20a5b795 100644
--- a/examples/preact/realtime-trading/src/table/table-interactions.ts
+++ b/examples/preact/realtime-trading/src/table/table-interactions.ts
@@ -101,6 +101,7 @@ export class TradingGridPointerController {
     const target = this.#findCellTarget(table, event.composedPath())
     if (!target) return
 
+    event.preventDefault()
     this.#lastPointerCell = target.element
     selectSymbol(target.cell.row.original.symbol)
     target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
diff --git a/examples/preact/realtime-trading/src/table/trading-table.tsx b/examples/preact/realtime-trading/src/table/trading-table.tsx
index fcbec5865a..d41080b398 100644
--- a/examples/preact/realtime-trading/src/table/trading-table.tsx
+++ b/examples/preact/realtime-trading/src/table/trading-table.tsx
@@ -133,12 +133,15 @@ function useTradingTableLayout(table: TradingTableInstance) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const tableRef = useRef<HTMLTableElement>(null)
   const fitRuntime = useRef({ manuallyResized: false })
+  const tableRuntime = useRef(table)
+  tableRuntime.current = table
 
   useLayoutEffect(() => {
     const writeColumnSizes = () => {
+      const currentTable = tableRuntime.current
       const tableElement = tableRef.current
       if (!tableElement) return
-      for (const header of table.getFlatHeaders()) {
+      for (const header of currentTable.getFlatHeaders()) {
         tableElement.style.setProperty(
           `--header-${header.id}-size`,
           String(header.getSize()),
@@ -148,38 +151,40 @@ function useTradingTableLayout(table: TradingTableInstance) {
           String(header.column.getSize()),
         )
       }
-      tableElement.style.width = `${table.getTotalSize()}px`
+      tableElement.style.width = `${currentTable.getTotalSize()}px`
     }
 
     writeColumnSizes()
-    const sizingSubscription =
-      table.atoms.columnSizing.subscribe(writeColumnSizes)
-    const orderSubscription =
-      table.atoms.columnOrder.subscribe(writeColumnSizes)
+    const sizingSubscription = tableRuntime.current.atoms.columnSizing.subscribe(
+      writeColumnSizes,
+    )
+    const orderSubscription = tableRuntime.current.atoms.columnOrder.subscribe(
+      writeColumnSizes,
+    )
     const fitAvailableWidth = () => {
+      const currentTable = tableRuntime.current
       const scrollElement = scrollRef.current
       if (!scrollElement || fitRuntime.current.manuallyResized) return
-      const currentWidth = table.getTotalSize()
+      const currentWidth = currentTable.getTotalSize()
       const availableWidth = scrollElement.clientWidth
       if (availableWidth <= currentWidth + 1 || currentWidth <= 0) return
 
       const ratio = availableWidth / currentWidth
-      table.setColumnSizing(
+      currentTable.setColumnSizing(
         Object.fromEntries(
-          table
+          currentTable
             .getVisibleLeafColumns()
             .map((column) => [column.id, column.getSize() * ratio]),
         ),
       )
     }
     const resizeObserver = new ResizeObserver(fitAvailableWidth)
-    const resizingSubscription = table.atoms.columnResizing.subscribe(
-      (state) => {
+    const resizingSubscription =
+      tableRuntime.current.atoms.columnResizing.subscribe((state) => {
         if (state.isResizingColumn !== false) {
           fitRuntime.current.manuallyResized = true
         }
-      },
-    )
+      })
     if (scrollRef.current) resizeObserver.observe(scrollRef.current)
     fitAvailableWidth()
 
@@ -189,7 +194,7 @@ function useTradingTableLayout(table: TradingTableInstance) {
       resizingSubscription.unsubscribe()
       resizeObserver.disconnect()
     }
-  }, [table])
+  }, [])
 
   return { scrollRef, tableRef }
 }
diff --git a/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts b/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
index fa4c313e69..e7b76873c5 100644
--- a/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/preact/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,6 +30,7 @@ test('runs the Preact realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/react/realtime-trading/src/index.css b/examples/react/realtime-trading/src/index.css
index 69cba52fa7..397c86fc54 100644
--- a/examples/react/realtime-trading/src/index.css
+++ b/examples/react/realtime-trading/src/index.css
@@ -347,6 +347,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/react/realtime-trading/src/table/trading-table.tsx b/examples/react/realtime-trading/src/table/trading-table.tsx
index 529205a9b2..fb9ac74658 100644
--- a/examples/react/realtime-trading/src/table/trading-table.tsx
+++ b/examples/react/realtime-trading/src/table/trading-table.tsx
@@ -133,12 +133,15 @@ function useTradingTableLayout(table: TradingTableInstance) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const tableRef = useRef<HTMLTableElement>(null)
   const fitRuntime = useRef({ manuallyResized: false })
+  const tableRuntime = useRef(table)
+  tableRuntime.current = table
 
   useLayoutEffect(() => {
     const writeColumnSizes = () => {
+      const currentTable = tableRuntime.current
       const tableElement = tableRef.current
       if (!tableElement) return
-      for (const header of table.getFlatHeaders()) {
+      for (const header of currentTable.getFlatHeaders()) {
         tableElement.style.setProperty(
           `--header-${header.id}-size`,
           String(header.getSize()),
@@ -148,38 +151,40 @@ function useTradingTableLayout(table: TradingTableInstance) {
           String(header.column.getSize()),
         )
       }
-      tableElement.style.width = `${table.getTotalSize()}px`
+      tableElement.style.width = `${currentTable.getTotalSize()}px`
     }
 
     writeColumnSizes()
-    const sizingSubscription =
-      table.atoms.columnSizing.subscribe(writeColumnSizes)
-    const orderSubscription =
-      table.atoms.columnOrder.subscribe(writeColumnSizes)
+    const sizingSubscription = tableRuntime.current.atoms.columnSizing.subscribe(
+      writeColumnSizes,
+    )
+    const orderSubscription = tableRuntime.current.atoms.columnOrder.subscribe(
+      writeColumnSizes,
+    )
     const fitAvailableWidth = () => {
+      const currentTable = tableRuntime.current
       const scrollElement = scrollRef.current
       if (!scrollElement || fitRuntime.current.manuallyResized) return
-      const currentWidth = table.getTotalSize()
+      const currentWidth = currentTable.getTotalSize()
       const availableWidth = scrollElement.clientWidth
       if (availableWidth <= currentWidth + 1 || currentWidth <= 0) return
 
       const ratio = availableWidth / currentWidth
-      table.setColumnSizing(
+      currentTable.setColumnSizing(
         Object.fromEntries(
-          table
+          currentTable
             .getVisibleLeafColumns()
             .map((column) => [column.id, column.getSize() * ratio]),
         ),
       )
     }
     const resizeObserver = new ResizeObserver(fitAvailableWidth)
-    const resizingSubscription = table.atoms.columnResizing.subscribe(
-      (state) => {
+    const resizingSubscription =
+      tableRuntime.current.atoms.columnResizing.subscribe((state) => {
         if (state.isResizingColumn !== false) {
           fitRuntime.current.manuallyResized = true
         }
-      },
-    )
+      })
     if (scrollRef.current) resizeObserver.observe(scrollRef.current)
     fitAvailableWidth()
 
@@ -189,7 +194,7 @@ function useTradingTableLayout(table: TradingTableInstance) {
       resizingSubscription.unsubscribe()
       resizeObserver.disconnect()
     }
-  }, [table])
+  }, [])
 
   return { scrollRef, tableRef }
 }
diff --git a/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts b/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
index 274bfccaf0..a2209c3d7c 100644
--- a/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
+++ b/examples/react/realtime-trading/src/table/use-trading-grid-pointer.ts
@@ -37,6 +37,7 @@ export function useTradingGridPointer(
       )
       if (!target) return
 
+      nativeEvent.preventDefault()
       lastPointerCell.current = target.element
       selectSymbol(target.cell.row.original.symbol)
       target.cell.getSelectionStartHandler(target.element.ownerDocument)(
diff --git a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
index 8dd1118b2f..68a78d23a7 100644
--- a/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/react/realtime-trading/tests/e2e/smoke.spec.ts
@@ -39,6 +39,7 @@ test('runs the React realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/solid/realtime-trading/src/index.css b/examples/solid/realtime-trading/src/index.css
index 69cba52fa7..397c86fc54 100644
--- a/examples/solid/realtime-trading/src/index.css
+++ b/examples/solid/realtime-trading/src/index.css
@@ -347,6 +347,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/solid/realtime-trading/src/table/table-interactions.ts b/examples/solid/realtime-trading/src/table/table-interactions.ts
index 2848fab70c..6ed8912743 100644
--- a/examples/solid/realtime-trading/src/table/table-interactions.ts
+++ b/examples/solid/realtime-trading/src/table/table-interactions.ts
@@ -104,6 +104,7 @@ export function createTradingGridSelectionHandlers(
       const target = findCellTarget(table, event.composedPath())
       if (!target) return
 
+      event.preventDefault()
       runtime.lastCell = target.element
       selectSymbol(target.cell.row.original.symbol)
       target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
diff --git a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
index 2904a7fd14..732d62d455 100644
--- a/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/solid/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,6 +30,7 @@ test('runs the Solid realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     const livePrice = table.locator('tbody tr').first().locator('td').nth(3)
     const initialPrice = await livePrice.textContent()
     await expect.poll(() => livePrice.textContent()).not.toBe(initialPrice)
diff --git a/examples/svelte/realtime-trading/src/index.css b/examples/svelte/realtime-trading/src/index.css
index 69cba52fa7..397c86fc54 100644
--- a/examples/svelte/realtime-trading/src/index.css
+++ b/examples/svelte/realtime-trading/src/index.css
@@ -347,6 +347,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/svelte/realtime-trading/src/table/table-interactions.ts b/examples/svelte/realtime-trading/src/table/table-interactions.ts
index 1df83b2484..99649a40bd 100644
--- a/examples/svelte/realtime-trading/src/table/table-interactions.ts
+++ b/examples/svelte/realtime-trading/src/table/table-interactions.ts
@@ -98,6 +98,7 @@ export class TradingGridPointerController {
     const target = this.#findCellTarget(table, event.composedPath())
     if (!target) return
 
+    event.preventDefault()
     this.#lastPointerCell = target.element
     selectSymbol(target.cell.row.original.symbol)
     target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
diff --git a/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts b/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
index f39eea0238..6cad646e8d 100644
--- a/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/svelte/realtime-trading/tests/e2e/smoke.spec.ts
@@ -14,7 +14,7 @@ function collectPageErrors(page: Page) {
   return errors
 }
 
-test('runs the Vue realtime trading workload', async ({ page }) => {
+test('runs the Svelte realtime trading workload', async ({ page }) => {
   const server = await startExampleServer(exampleDir)
   const errors = collectPageErrors(page)
 
@@ -30,6 +30,7 @@ test('runs the Vue realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',
diff --git a/examples/vue/realtime-trading/src/index.css b/examples/vue/realtime-trading/src/index.css
index 69cba52fa7..397c86fc54 100644
--- a/examples/vue/realtime-trading/src/index.css
+++ b/examples/vue/realtime-trading/src/index.css
@@ -347,6 +347,11 @@ table {
   display: grid;
 }
 
+.trading-data-grid tbody {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .trading-data-grid thead > tr,
 .trading-data-grid tbody > tr {
   display: flex;
diff --git a/examples/vue/realtime-trading/src/table/table-interactions.ts b/examples/vue/realtime-trading/src/table/table-interactions.ts
index 1df83b2484..99649a40bd 100644
--- a/examples/vue/realtime-trading/src/table/table-interactions.ts
+++ b/examples/vue/realtime-trading/src/table/table-interactions.ts
@@ -98,6 +98,7 @@ export class TradingGridPointerController {
     const target = this.#findCellTarget(table, event.composedPath())
     if (!target) return
 
+    event.preventDefault()
     this.#lastPointerCell = target.element
     selectSymbol(target.cell.row.original.symbol)
     target.cell.getSelectionStartHandler(target.element.ownerDocument)(event)
diff --git a/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts b/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
index f39eea0238..c56f09558f 100644
--- a/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
+++ b/examples/vue/realtime-trading/tests/e2e/smoke.spec.ts
@@ -30,6 +30,7 @@ test('runs the Vue realtime trading workload', async ({ page }) => {
     await expect(virtualScrollSelect).toHaveValue('none')
     await expect(virtualScrollSelect).toBeEnabled()
     await expect(table.locator('tbody tr')).toHaveCount(100)
+    await expect(table.locator('tbody')).toHaveCSS('user-select', 'none')
     await expect(table.locator('tbody tr').first()).toHaveCSS(
       'content-visibility',
       'auto',

From 694f9db3113061b518356b5d35324ecb6de0d792 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 18 Aug 2026 19:12:42 +0000
Subject: [PATCH 23/23] ci: apply automated fixes

---
 .../realtime-trading/src/table/trading-table.tsx       | 10 ++++------
 .../react/realtime-trading/src/table/trading-table.tsx | 10 ++++------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/examples/preact/realtime-trading/src/table/trading-table.tsx b/examples/preact/realtime-trading/src/table/trading-table.tsx
index d41080b398..6d96f2b23e 100644
--- a/examples/preact/realtime-trading/src/table/trading-table.tsx
+++ b/examples/preact/realtime-trading/src/table/trading-table.tsx
@@ -155,12 +155,10 @@ function useTradingTableLayout(table: TradingTableInstance) {
     }
 
     writeColumnSizes()
-    const sizingSubscription = tableRuntime.current.atoms.columnSizing.subscribe(
-      writeColumnSizes,
-    )
-    const orderSubscription = tableRuntime.current.atoms.columnOrder.subscribe(
-      writeColumnSizes,
-    )
+    const sizingSubscription =
+      tableRuntime.current.atoms.columnSizing.subscribe(writeColumnSizes)
+    const orderSubscription =
+      tableRuntime.current.atoms.columnOrder.subscribe(writeColumnSizes)
     const fitAvailableWidth = () => {
       const currentTable = tableRuntime.current
       const scrollElement = scrollRef.current
diff --git a/examples/react/realtime-trading/src/table/trading-table.tsx b/examples/react/realtime-trading/src/table/trading-table.tsx
index fb9ac74658..8030ccbb34 100644
--- a/examples/react/realtime-trading/src/table/trading-table.tsx
+++ b/examples/react/realtime-trading/src/table/trading-table.tsx
@@ -155,12 +155,10 @@ function useTradingTableLayout(table: TradingTableInstance) {
     }
 
     writeColumnSizes()
-    const sizingSubscription = tableRuntime.current.atoms.columnSizing.subscribe(
-      writeColumnSizes,
-    )
-    const orderSubscription = tableRuntime.current.atoms.columnOrder.subscribe(
-      writeColumnSizes,
-    )
+    const sizingSubscription =
+      tableRuntime.current.atoms.columnSizing.subscribe(writeColumnSizes)
+    const orderSubscription =
+      tableRuntime.current.atoms.columnOrder.subscribe(writeColumnSizes)
     const fitAvailableWidth = () => {
       const currentTable = tableRuntime.current
       const scrollElement = scrollRef.current