POC - Refactor options store into atoms

.changeset/quiet-table-devtools.md

@@ -0,0 +1,12 @@
+---
+'@tanstack/table-devtools': patch
+'@tanstack/react-table-devtools': patch
+'@tanstack/preact-table-devtools': patch
+'@tanstack/solid-table-devtools': patch
+'@tanstack/vue-table-devtools': patch
+'@tanstack/angular-table-devtools': patch
+---
+
+Prevent table state updates from remounting the devtools panel, subscribe only
+while the panel is open, cache generated styles by theme, and keep adapter
+registration and production entrypoints reactive and stable.

_artifacts/domain_map.yaml

@@ -102,7 +102,7 @@ custom_feature_depth_contract:
     - 'assignPrototypeAPIs inside assignCellPrototype for shared cell methods.'
     - 'assignPrototypeAPIs inside assignHeaderPrototype for shared header methods.'
     - 'initColumnInstanceData and initRowInstanceData for per-instance mutable data rather than shared methods.'
-    - 'The table_/column_/row_/cell_/header_ static-name prefixes, self argument difference, optional memoDeps, and absence of per-object assign*APIs utilities.'
+    - 'The table_/column_/row_/cell_/header_ static-name prefixes, `{ fn }` versus `{ computed, compare? }`, prototype self argument, native dependency tracking, and absence of per-object assign*APIs utilities.'
 
 api_discovery_policy:
   rule: 'For exact exports, option types, state shapes, and instance APIs, inspect dist declarations (.d.ts) in the installed package before inventing an API or relying on memory.'

_artifacts/skill_spec.md

@@ -124,7 +124,7 @@ Treat stable `data` and `columns` references as a correctness and performance in
 
 The custom-features skill must enumerate all 10 public declaration-merge FeatureMaps: table state, table options, table, column definition, column, row, cell, header, row-model functions, and cached row models. Explain that `Plugins` registers the feature key and that declarations add types only; each advertised runtime surface needs matching lifecycle wiring.
 
-Enumerate both API utilities and every installation path: `assignTableAPIs` in `constructTableAPIs`, plus `assignPrototypeAPIs` in `assignColumnPrototype`, `assignRowPrototype`, `assignCellPrototype`, and `assignHeaderPrototype`. Include the static-name prefixes, prototype self argument, optional `memoDeps`, shared-prototype constraint, `initColumnInstanceData`/`initRowInstanceData`, and the fact that per-object `assignColumnAPIs`-style utilities do not exist. Clearly label row-model maps as advanced internal pipeline surfaces requiring explicit runtime/cache wiring.
+Enumerate both API utilities and every installation path: `assignTableAPIs` in `constructTableAPIs`, plus `assignPrototypeAPIs` in `assignColumnPrototype`, `assignRowPrototype`, `assignCellPrototype`, and `assignHeaderPrototype`. Include the static-name prefixes, the `{ fn }` versus `{ computed, compare? }` descriptor shapes, the prototype computed self argument, native dependency tracking, the shared-prototype constraint, `initColumnInstanceData`/`initRowInstanceData`, and the fact that per-object `assignColumnAPIs`-style utilities do not exist. Clearly label row-model maps as advanced internal pipeline surfaces requiring explicit runtime/cache wiring.
 
 Use one annotated, authoritative feature example for the complete shape. Do not stack a minimal density example, a second FeatureMap example, a third API-installation example, and then repeat their distinction under Common Mistakes. Keep selection guidance and foot-guns as compact prose around the single example.
 

_artifacts/skill_tree.yaml

@@ -102,7 +102,7 @@ skills:
     domain: foundations
     path: 'packages/table-core/skills/custom-features/SKILL.md'
     package: 'packages/table-core'
-    description: 'Author a TanStack Table v9 feature plugin across all 10 FeatureMaps and every table/column/row/cell/header API installation path, including prototypes, memoDeps, instance data, and advanced row-model maps, after checking built-ins and meta.'
+    description: 'Author a TanStack Table v9 feature plugin across all 10 FeatureMaps and every table/column/row/cell/header API installation path, including prototype and computed APIs, instance data, and advanced row-model maps, after checking built-ins and meta.'
     requires: ['core', 'table-features', 'typescript']
     sources:
       - 'TanStack/table:docs/framework/react/guide/custom-features.md'

docs/framework/ember/reference/functions/createTableHook.md

@@ -60,22 +60,57 @@ createAppColumnHelper: <TData>() => ColumnHelper<TFeatures, TData>;
 ### createAppTable()
 
 ```ts
-createAppTable: <TData>(getTableOptions) => AppEmberTable<TFeatures, TData>;
+createAppTable: {
+<TData>  (owner, getTableOptions): AppEmberTable<TFeatures, TData>;
+<TData>  (getTableOptions): AppEmberTable<TFeatures, TData>;
+};
 ```
 
-#### Type Parameters
+#### Call Signature
 
-##### TData
+```ts
+<TData>(owner, getTableOptions): AppEmberTable<TFeatures, TData>;
+```
+
+##### Type Parameters
+
+###### TData
 
 `TData` *extends* `RowData`
 
-#### Parameters
+##### Parameters
 
-##### getTableOptions
+###### owner
+
+`object`
+
+###### getTableOptions
 
 () => `Omit`\<`TableOptions`\<`TFeatures`, `TData`\>, `"features"`\>
 
-#### Returns
+##### Returns
+
+[`AppEmberTable`](../type-aliases/AppEmberTable.md)\<`TFeatures`, `TData`\>
+
+#### Call Signature
+
+```ts
+<TData>(getTableOptions): AppEmberTable<TFeatures, TData>;
+```
+
+##### Type Parameters
+
+###### TData
+
+`TData` *extends* `RowData`
+
+##### Parameters
+
+###### getTableOptions
+
+() => `Omit`\<`TableOptions`\<`TFeatures`, `TData`\>, `"features"`\>
+
+##### Returns
 
 [`AppEmberTable`](../type-aliases/AppEmberTable.md)\<`TFeatures`, `TData`\>
 
@@ -89,6 +124,6 @@ const { createAppTable, createAppColumnHelper } = createTableHook({
 const columnHelper = createAppColumnHelper<Person>()
 const columns = columnHelper.columns([...])
 
-// inside a Glimmer component; options stay a thunk so tracked reads are reactive
-table = createAppTable(() => ({ columns, data: this.data }))
+// inside a Glimmer component; passing `this` binds cleanup to its lifecycle
+table = createAppTable(this, () => ({ columns, data: this.data }))
 ```

docs/framework/ember/reference/functions/useTable.md

@@ -5,28 +5,76 @@ title: useTable
 
 # Function: useTable()
 
+## Call Signature
+
+```ts
+function useTable<TFeatures, TData>(owner, getOptions): Table<TFeatures, TData>;
+```
+
+Defined in: packages/ember-table/declarations/use-table.d.ts:10
+
+Creates an Ember-reactive table.
+
+Pass the containing component (or another Ember destroyable) as the first
+argument to tie external-atom subscriptions to its lifecycle. The one-arg
+form remains available for standalone tables that do not have an Ember
+owner.
+
+### Type Parameters
+
+#### TFeatures
+
+`TFeatures` *extends* `TableFeatures`
+
+#### TData
+
+`TData` *extends* `RowData`
+
+### Parameters
+
+#### owner
+
+`object`
+
+#### getOptions
+
+() => `TableOptions`\<`TFeatures`, `TData`\>
+
+### Returns
+
+`Table`\<`TFeatures`, `TData`\>
+
+## Call Signature
+
 ```ts
 function useTable<TFeatures, TData>(getOptions): Table<TFeatures, TData>;
 ```
 
-Defined in: packages/ember-table/declarations/use-table.d.ts:2
+Defined in: packages/ember-table/declarations/use-table.d.ts:11
+
+Creates an Ember-reactive table.
+
+Pass the containing component (or another Ember destroyable) as the first
+argument to tie external-atom subscriptions to its lifecycle. The one-arg
+form remains available for standalone tables that do not have an Ember
+owner.
 
-## Type Parameters
+### Type Parameters
 
-### TFeatures
+#### TFeatures
 
 `TFeatures` *extends* `TableFeatures`
 
-### TData
+#### TData
 
 `TData` *extends* `RowData`
 
-## Parameters
+### Parameters
 
-### getOptions
+#### getOptions
 
 () => `TableOptions`\<`TFeatures`, `TData`\>
 
-## Returns
+### Returns
 
 `Table`\<`TFeatures`, `TData`\>

docs/framework/lit/guide/table-state.md

@@ -32,9 +32,10 @@ A table instance has a few state surfaces:
 - `table.baseAtoms` are the internal writable atoms created from the resolved initial state.
 - `table.atoms` are readonly derived atoms exposed per registered state slice.
 - `table.store` is a readonly flat TanStack Store derived by putting all of the registered `table.atoms` together.
+- `table.optionAtoms` contains stable atoms for individual resolved options, plus the readonly `snapshotVersion` atom for observing aggregate option updates. Ordinary option atoms are writable, while `table.options` is a stable readonly view backed by those atoms.
 - `table.state` is Lit-only selected state. It is the value returned from the selector passed as the second argument to `tableController.table(...)`.
 
-The Lit adapter provides `litReactivity()` to the table's `coreReactivityFeature`. Readonly and writable atoms are TanStack Store atoms. `TableController` subscribes to `table.store` and `table.optionsStore`; atom or options changes flowing through those stores call `host.requestUpdate()`.
+The Lit adapter provides `litReactivity()` to the table's `coreReactivityFeature`. Readonly and writable atoms are TanStack Store atoms. `TableController` stages options so table reads during a render see the current values, publishes that option commit from `hostUpdated()`, and subscribes to `table.store` to request host updates for committed state changes.
 
 ### Feature-based State
 
@@ -88,7 +89,7 @@ const tableState = table.store.state
 const pagination = table.store.state.pagination
 ```
 
-These reads are current-value reads. The `TableController` handles host invalidation through its subscriptions to the table store and options store. If the UI needs to stay reactive to table state changes, use `table.state`, `table.subscribe`, or a TanStack Store subscription.
+These reads are current-value reads. The `TableController` handles host invalidation through its table-store subscription. If the UI needs to stay reactive to table state changes, use `table.state`, `table.subscribe`, or a TanStack Store subscription.
 
 #### Reading Reactive State with TableController
 

docs/framework/lit/reference/classes/SubscribeDirective.md

@@ -129,7 +129,7 @@ AsyncDirective._$initialize
 disconnected(): void;
 ```
 
-Defined in: [packages/lit-table/src/subscribe-directive.ts:141](https://github.com/TanStack/table/blob/main/packages/lit-table/src/subscribe-directive.ts#L141)
+Defined in: [packages/lit-table/src/subscribe-directive.ts:150](https://github.com/TanStack/table/blob/main/packages/lit-table/src/subscribe-directive.ts#L150)
 
 Cleans up the controller subscription when the directive is removed from the DOM.
 
@@ -151,7 +151,7 @@ AsyncDirective.disconnected
 reconnected(): void;
 ```
 
-Defined in: [packages/lit-table/src/subscribe-directive.ts:146](https://github.com/TanStack/table/blob/main/packages/lit-table/src/subscribe-directive.ts#L146)
+Defined in: [packages/lit-table/src/subscribe-directive.ts:155](https://github.com/TanStack/table/blob/main/packages/lit-table/src/subscribe-directive.ts#L155)
 
 Restores the controller subscription when the directive is re-attached to the DOM.
 

docs/framework/lit/reference/classes/TableController.md

@@ -5,7 +5,7 @@ title: TableController
 
 # Class: TableController\<TFeatures, TData\>
 
-Defined in: [packages/lit-table/src/TableController.ts:118](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L118)
+Defined in: [packages/lit-table/src/TableController.ts:123](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L123)
 
 A Lit ReactiveController for TanStack Table integration.
 
@@ -56,7 +56,7 @@ class MyTable extends LitElement {
 new TableController<TFeatures, TData>(host): TableController<TFeatures, TData>;
 ```
 
-Defined in: [packages/lit-table/src/TableController.ts:132](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L132)
+Defined in: [packages/lit-table/src/TableController.ts:145](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L145)
 
 #### Parameters
 
@@ -76,7 +76,7 @@ Defined in: [packages/lit-table/src/TableController.ts:132](https://github.com/T
 host: ReactiveControllerHost;
 ```
 
-Defined in: [packages/lit-table/src/TableController.ts:122](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L122)
+Defined in: [packages/lit-table/src/TableController.ts:127](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L127)
 
 ## Methods
 
@@ -86,7 +86,7 @@ Defined in: [packages/lit-table/src/TableController.ts:122](https://github.com/T
 hostConnected(): void;
 ```
 
-Defined in: [packages/lit-table/src/TableController.ts:238](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L238)
+Defined in: [packages/lit-table/src/TableController.ts:260](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L260)
 
 Called when the host is connected to the component tree. For custom
 element hosts, this corresponds to the `connectedCallback()` lifecycle,
@@ -110,7 +110,7 @@ ReactiveController.hostConnected
 hostDisconnected(): void;
 ```
 
-Defined in: [packages/lit-table/src/TableController.ts:242](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L242)
+Defined in: [packages/lit-table/src/TableController.ts:280](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L280)
 
 Called when the host is disconnected from the component tree. For custom
 element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
@@ -129,13 +129,36 @@ ReactiveController.hostDisconnected
 
 ***
 
+### hostUpdated()
+
+```ts
+hostUpdated(): void;
+```
+
+Defined in: [packages/lit-table/src/TableController.ts:267](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L267)
+
+Called after a host update, just before the host calls firstUpdated and
+updated. It is not called in server-side rendering.
+
+#### Returns
+
+`void`
+
+#### Implementation of
+
+```ts
+ReactiveController.hostUpdated
+```
+
+***
+
 ### table()
 
 ```ts
 table<TSelected>(tableOptions, selector?): LitTable<TFeatures, TData, TSelected>;
 ```
 
-Defined in: [packages/lit-table/src/TableController.ts:152](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L152)
+Defined in: [packages/lit-table/src/TableController.ts:165](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L165)
 
 Returns the Lit-backed table instance for the current render pass.
 

docs/framework/lit/reference/functions/FlexRender-1.md

@@ -6,10 +6,10 @@ title: FlexRender
 # Function: FlexRender()
 
 ```ts
-function FlexRender<TFeatures, TData, TValue>(props): string | TemplateResult | null;
+function FlexRender<TFeatures, TData, TValue>(props): LitRenderable;
 ```
 
-Defined in: [packages/lit-table/src/flexRender.ts:90](https://github.com/TanStack/table/blob/main/packages/lit-table/src/flexRender.ts#L90)
+Defined in: [packages/lit-table/src/flexRender.ts:101](https://github.com/TanStack/table/blob/main/packages/lit-table/src/flexRender.ts#L101)
 
 Simplified component wrapper of `flexRender`. Use this utility function to render headers, cells, or footers with custom markup.
 Only one prop (`cell`, `header`, or `footer`) may be passed.
@@ -36,7 +36,7 @@ Only one prop (`cell`, `header`, or `footer`) may be passed.
 
 ## Returns
 
-`string` \| `TemplateResult` \| `null`
+[`LitRenderable`](../type-aliases/LitRenderable.md)
 
 ## Example
 

docs/framework/lit/reference/functions/createTableHook.md

@@ -9,7 +9,7 @@ title: createTableHook
 function createTableHook<TFeatures, TTableComponents, TCellComponents, THeaderComponents>(__namedParameters): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
 ```
 
-Defined in: [packages/lit-table/src/createTableHook.ts:503](https://github.com/TanStack/table/blob/main/packages/lit-table/src/createTableHook.ts#L503)
+Defined in: [packages/lit-table/src/createTableHook.ts:504](https://github.com/TanStack/table/blob/main/packages/lit-table/src/createTableHook.ts#L504)
 
 Creates a custom table hook with pre-bound components for composition.
 

docs/framework/lit/reference/functions/flexRender.md

@@ -6,10 +6,10 @@ title: flexRender
 # Function: flexRender()
 
 ```ts
-function flexRender<TProps>(Comp, props): string | TemplateResult | null;
+function flexRender<TProps>(Comp, props): LitRenderable;
 ```
 
-Defined in: [packages/lit-table/src/flexRender.ts:22](https://github.com/TanStack/table/blob/main/packages/lit-table/src/flexRender.ts#L22)
+Defined in: [packages/lit-table/src/flexRender.ts:37](https://github.com/TanStack/table/blob/main/packages/lit-table/src/flexRender.ts#L37)
 
 Renders a Lit table template value with the provided context props.
 
@@ -27,15 +27,15 @@ convenience wrapper for table cell/header/footer objects.
 
 ### Comp
 
-`string` | `TemplateResult` | (`props`) => `string` \| `TemplateResult` | `undefined`
+[`LitRenderable`](../type-aliases/LitRenderable.md) | (`props`) => [`LitRenderable`](../type-aliases/LitRenderable.md)
 
 ### props
 
 `TProps`
 
 ## Returns
 
-`string` \| `TemplateResult` \| `null`
+[`LitRenderable`](../type-aliases/LitRenderable.md)
 
 ## Example
 

docs/framework/lit/reference/index.md

@@ -28,6 +28,7 @@ title: "@tanstack/lit-table"
 - [ComponentType](type-aliases/ComponentType.md)
 - [CreateTableHookOptions](type-aliases/CreateTableHookOptions.md)
 - [FlexRenderProps](type-aliases/FlexRenderProps.md)
+- [LitRenderable](type-aliases/LitRenderable.md)
 - [LitTable](type-aliases/LitTable.md)
 - [SelectionSource](type-aliases/SelectionSource.md)