@contember/bindx-react 0.1.43 → 0.1.45

package/dist/jsx/collectorProxy.d.ts

@@ -10,5 +10,5 @@ import { type EntityAccessor } from './types.js';
  * @param entityName - The entity type name (e.g., 'Task'), used for schema lookups
  * @param schemaRegistry - The schema registry for field type information
  */
-export declare function createCollectorProxy<T>(scope: SelectionScope, entityName?: string | null, schemaRegistry?: SchemaRegistry<Record<string, object>> | null): EntityAccessor<T>;
+export declare function createCollectorProxy<T>(scope: SelectionScope, entityName?: string | null, schemaRegistry?: SchemaRegistry<Record<string, object>> | null, parentPath?: readonly string[]): EntityAccessor<T>;
 //# sourceMappingURL=collectorProxy.d.ts.map

package/dist/jsx/collectorProxy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collectorProxy.d.ts","sourceRoot":"","sources":["../../src/jsx/collectorProxy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAyB,MAAM,kBAAkB,CAAA;AACxE,OAAO,EACN,KAAK,cAAc,EAUnB,MAAM,YAAY,CAAA;AASnB;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACrC,KAAK,EAAE,cAAc,EACrB,UAAU,GAAE,MAAM,GAAG,IAAW,EAChC,cAAc,GAAE,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAW,GAClE,cAAc,CAAC,CAAC,CAAC,CA2CnB"}
+{"version":3,"file":"collectorProxy.d.ts","sourceRoot":"","sources":["../../src/jsx/collectorProxy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAyB,MAAM,kBAAkB,CAAA;AACxE,OAAO,EACN,KAAK,cAAc,EAUnB,MAAM,YAAY,CAAA;AASnB;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACrC,KAAK,EAAE,cAAc,EACrB,UAAU,GAAE,MAAM,GAAG,IAAW,EAChC,cAAc,GAAE,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAW,EACpE,UAAU,GAAE,SAAS,MAAM,EAAO,GAChC,cAAc,CAAC,CAAC,CAAC,CA2CnB"}

package/dist/jsx/components/Entity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Entity.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/Entity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAKrH,OAAO,KAAK,EAAkB,SAAS,EAAiB,MAAM,aAAa,CAAA;AAC3E,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAiB,KAAK,UAAU,EAAgF,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAI1M;;;GAGG;AACH,UAAU,eAAe,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAChE,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC3B,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACxE,qBAAqB;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9C;AAED;;GAEG;AACH,UAAU,aAAa,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACjG,sFAAsF;IACtF,EAAE,EAAE,iBAAiB,CAAA;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,uBAAuB;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;GAEG;AACH,UAAU,iBAAiB,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACrG,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,8DAA8D;IAC9D,MAAM,EAAE,IAAI,CAAA;IACZ,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACrF,aAAa,CAAC,QAAQ,CAAC,GACvB,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AAsP9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,UAAU,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1D,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC1B,YAAY,GAAG,IAAI,CA2BrB;AAGD,eAAO,MAAM,MAAM,EAAkC,OAAO,UAAU,CAAA"}
+{"version":3,"file":"Entity.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/Entity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkG,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAKhJ,OAAO,KAAK,EAAkB,SAAS,EAAiB,MAAM,aAAa,CAAA;AAC3E,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAiB,KAAK,UAAU,EAAgF,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAI1M;;;GAGG;AACH,UAAU,eAAe,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAChE,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC3B,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACxE,qBAAqB;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9C;AAED;;GAEG;AACH,UAAU,aAAa,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACjG,sFAAsF;IACtF,EAAE,EAAE,iBAAiB,CAAA;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,uBAAuB;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;GAEG;AACH,UAAU,iBAAiB,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACrG,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,8DAA8D;IAC9D,MAAM,EAAE,IAAI,CAAA;IACZ,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACrF,aAAa,CAAC,QAAQ,CAAC,GACvB,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AAmT9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,UAAU,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1D,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC1B,YAAY,GAAG,IAAI,CA2BrB;AAGD,eAAO,MAAM,MAAM,EAAkC,OAAO,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@contember/bindx-react",
-	"version": "0.1.43",
+	"version": "0.1.45",
 	"description": "Type-safe React data binding framework",
 	"type": "module",
 	"main": "./src/index.ts",
@@ -15,8 +15,8 @@
 		"react": ">=18.0.0"
 	},
 	"dependencies": {
-		"@contember/bindx": "0.1.43",
-		"@contember/bindx-client": "0.1.43",
+		"@contember/bindx": "0.1.45",
+		"@contember/bindx-client": "0.1.45",
 		"@contember/graphql-client": "^2.1.0-beta.1",
 		"@radix-ui/primitive": "^1.1.3",
 		"@radix-ui/react-slot": "^1.2.4"

package/src/hooks/useEntity.ts

@@ -324,8 +324,8 @@ export function useEntity(
 
 	// --- EntityHandle ---
 	const rawHandle = useMemo(
-		() => EntityHandle.createRaw(id, entityType, store, dispatcher, schemaRegistry as SchemaRegistry<Record<string, object>>),
-		[id, entityType, store, dispatcher, schemaRegistry, snapshot],
+		() => EntityHandle.createRaw(id, entityType, store, dispatcher, schemaRegistry as SchemaRegistry<Record<string, object>>, undefined, selectionMeta),
+		[id, entityType, store, dispatcher, schemaRegistry, snapshot, selectionMeta],
 	)
 
 	const handle = useMemo(
@@ -333,11 +333,10 @@ export function useEntity(
 		[rawHandle],
 	)
 
-	useEffect(() => {
-		return () => {
-			rawHandle.dispose()
-		}
-	}, [rawHandle])
+	// `snapshot` is a useMemo dep, so `rawHandle` is recreated on every entity data change (to give
+	// memoized children a fresh reference). Superseded handles need no cleanup: EntityHandle is a
+	// stateless live view that owns no resources (see BaseHandle), so it is reclaimed by GC once
+	// unreferenced and a handle a consumer still holds stays usable for late reads/writes.
 
 	// --- Persist & reset callbacks ---
 	const persist = useCallback(async () => {

package/src/hooks/useEntityList.ts

@@ -174,18 +174,22 @@ export function useEntityList(
 	const { store, dispatcher, batcher } = useBindxContext()
 
 	// --- Selection resolution ---
+	// Both selection paths (definer 3rd-arg and pre-resolved options.selection)
+	// are stabilized identically: the raw meta is resolved every render, but its
+	// reference is only swapped when the serialized query content actually
+	// changes. This keeps `selectionMeta` identity stable across content-identical
+	// renders (e.g. DataGrid rebuilding a new-but-equal selection object), which
+	// in turn keeps the data-loading effect from refiring spuriously.
 	// resolveSelectionMeta is a pure function; useRef is called unconditionally.
-	const resolvedMeta = definer ? resolveSelectionMeta(definer) : null
-	const definerQueryKey = resolvedMeta ? JSON.stringify(buildQueryFromSelection(resolvedMeta)) : null
-	const selectionRef = useRef<{ meta: SelectionMeta; queryKey: string } | null>(null)
+	const rawMeta = definer ? resolveSelectionMeta(definer) : options.selection!
+	const selectionContentKey = JSON.stringify(buildQueryFromSelection(rawMeta))
+	const selectionRef = useRef<{ meta: SelectionMeta; contentKey: string } | null>(null)
 
-	if (definerQueryKey && resolvedMeta) {
-		if (!selectionRef.current || selectionRef.current.queryKey !== definerQueryKey) {
-			selectionRef.current = { meta: resolvedMeta, queryKey: definerQueryKey }
-		}
+	if (!selectionRef.current || selectionRef.current.contentKey !== selectionContentKey) {
+		selectionRef.current = { meta: rawMeta, contentKey: selectionContentKey }
 	}
 
-	const selectionMeta = definer ? selectionRef.current!.meta : options.selection!
+	const selectionMeta = selectionRef.current.meta
 
 	// --- Stable options key ---
 	const optionsKey = useMemo(
@@ -199,11 +203,14 @@ export function useEntityList(
 	)
 
 	// --- Effective query key for cache invalidation ---
+	// Derived from the stable selectionContentKey so it keeps identity while the
+	// query content is unchanged, even if the caller passes a fresh selection object.
 	const effectiveQueryKey = useMemo(() => {
 		if (options.queryKey) return options.queryKey
-		const query = buildQueryFromSelection(selectionMeta)
-		return JSON.stringify({ entityType, query })
-	}, [options.queryKey, selectionMeta, entityType])
+		// selectionContentKey is already the serialized query; just namespace it
+		// by entity type (avoids double-encoding the JSON string).
+		return `${entityType}:${selectionContentKey}`
+	}, [options.queryKey, selectionContentKey, entityType])
 
 	// --- List state tracking ---
 	const listStateRef = useRef<{
@@ -283,6 +290,26 @@ export function useEntityList(
 		[store],
 	)
 
+	// Discard never-persisted drafts when the list unmounts. List-level creates are
+	// top-level roots (nothing else anchors them); dropping the root and running the
+	// reachability-aware sweep frees a truly-orphaned draft while preserving one that
+	// was meanwhile connected into another live parent (the diamond / shared-create
+	// case). A persisted draft (rekeyed to a server id) is left untouched.
+	useEffect(() => {
+		return () => {
+			let unrooted = false
+			for (const item of listStateRef.current.items) {
+				if (isTempId(item.id) && !store.getPersistedId(entityType, item.id)) {
+					store.unregisterRootEntity(entityType, item.id)
+					unrooted = true
+				}
+			}
+			if (unrooted) {
+				store.sweepUnreachableCreated()
+			}
+		}
+	}, [store, entityType])
+
 	// --- Snapshot ---
 	const getSnapshot = useCallback((): UseEntityListResult<any> => {
 		const state = listStateRef.current
@@ -314,6 +341,8 @@ export function useEntityList(
 					store,
 					dispatcher,
 					schemaRegistry as SchemaRegistry<Record<string, object>>,
+					undefined,
+					selectionMeta,
 				) as unknown as EntityAccessor<any>
 			})
 
@@ -341,7 +370,7 @@ export function useEntityList(
 		}
 
 		return result
-	}, [entityType, store, dispatcher, schemaRegistry, addItem, removeItem, moveItem])
+	}, [entityType, store, dispatcher, schemaRegistry, selectionMeta, addItem, removeItem, moveItem])
 
 	const isEqual = useCallback(
 		(a: UseEntityListResult<any>, b: UseEntityListResult<any>): boolean => {

package/src/jsx/collectorProxy.ts

@@ -33,13 +33,14 @@ export function createCollectorProxy<T>(
 	scope: SelectionScope,
 	entityName: string | null = null,
 	schemaRegistry: SchemaRegistry<Record<string, object>> | null = null,
+	parentPath: readonly string[] = [],
 ): EntityAccessor<T> {
 	const fieldsProxy = new Proxy({} as EntityFields<T>, {
 		get(_, fieldName: string): FieldAccessor<unknown> | HasManyAccessor<unknown> | HasOneAccessor<unknown> {
 			// Return a collector ref that works for all field types
 			// The actual type (scalar/hasMany/hasOne) will be determined
 			// by how it's used in components or by schema lookup
-			return createCollectorFieldRef(scope, fieldName, entityName, schemaRegistry)
+			return createCollectorFieldRef(scope, fieldName, entityName, schemaRegistry, parentPath)
 		},
 	})
 
@@ -97,6 +98,7 @@ function createCollectorFieldRef(
 	fieldName: string,
 	entityName: string | null,
 	schemaRegistry: SchemaRegistry<Record<string, object>> | null,
+	parentPath: readonly string[] = [],
 ): CollectorRef {
 	// Look up field type from schema if available
 	const fieldDef = entityName && schemaRegistry
@@ -132,11 +134,17 @@ function createCollectorFieldRef(
 		return childScope
 	}
 
+	// Absolute path from the root collector to this field. `fieldName` / `path`
+	// stay relative (last segment only) so selection/relation metadata is
+	// unaffected; `fullPath` carries the dotted chain for DataGrid columns.
+	const fullPath = [...parentPath, fieldName]
+
 	const meta = {
 		entityType: targetEntityName ?? '', // Collection phase - entity type from schema
 		entityId: '', // Collection phase - no entity
 		path: [fieldName],
 		fieldName,
+		fullPath,
 		isArray: isHasManyRelation,
 		isRelation: isHasOneRelation || isHasManyRelation,
 		enumName,
@@ -149,8 +157,10 @@ function createCollectorFieldRef(
 		get(_, nestedFieldName: string) {
 			// Get child scope (upgrades to relation)
 			const scope = getChildScope()
-			// Create nested field ref in the child scope, passing target entity info
-			return createCollectorFieldRef(scope, nestedFieldName, targetEntityName, schemaRegistry)
+			// Create nested field ref in the child scope, passing target entity info.
+			// Thread the current field's fullPath so e.g. `it.author.name` carries
+			// the dotted absolute path `['author', 'name']`.
+			return createCollectorFieldRef(scope, nestedFieldName, targetEntityName, schemaRegistry, fullPath)
 		},
 	})
 
@@ -158,7 +168,9 @@ function createCollectorFieldRef(
 		// Get child scope and mark as array relation
 		const scope = getChildScope()
 		parentScope.markAsArray(fieldName)
-		// Call fn once with collector to gather nested selection, passing target entity info
+		// Call fn once with collector to gather nested selection, passing target entity info.
+		// Items of a has-many start a fresh path: dotted where/sort paths only
+		// make sense across has-one chains, not across collection items.
 		fn(createCollectorProxy<unknown>(scope, targetEntityName, schemaRegistry), 0)
 		return []
 	}
@@ -211,9 +223,11 @@ function createCollectorFieldRef(
 		$isDirty: false,
 		$fields: hasOneFieldsProxy,
 		get $entity(): EntityAccessor<unknown> {
-			// Get child scope (upgrades to relation) and return proxy with scope
+			// Get child scope (upgrades to relation) and return proxy with scope.
+			// Thread fullPath for has-one so nested fields keep their dotted chain;
+			// has-many items start fresh (handled via getById/map).
 			const scope = getChildScope()
-			return createCollectorProxy<unknown>(scope, targetEntityName, schemaRegistry)
+			return createCollectorProxy<unknown>(scope, targetEntityName, schemaRegistry, isHasManyRelation ? [] : fullPath)
 		},
 		$delete: () => {},
 		$remove: () => {},

package/src/jsx/components/Entity.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useRef, useSyncExternalStore, type ReactElement } from 'react'
+import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactElement } from 'react'
 import { useBindxContext, useSchemaRegistry } from '../../hooks/BackendAdapterContext.js'
 import { annotateElement } from '../devAnnotations.js'
 import { useEntity } from '../../hooks/useEntity.js'
@@ -163,27 +163,83 @@ interface CreateModeSnapshot {
 }
 
 /**
- * Internal component for create mode (creating a new entity)
+ * Internal component for create mode (creating a new entity).
+ *
+ * The draft entity is minted in a layout effect, NEVER during render. A
+ * render-phase store mutation is unsafe two ways:
+ *  - it leaks the draft whenever the render is discarded — StrictMode
+ *    double-invoke, an aborted concurrent render, a thrown render, Suspense —
+ *    because no effect cleanup runs for a render that never commits;
+ *  - it synchronously notifies the store's global subscribers, force-updating an
+ *    already-mounted aggregate subscriber (e.g. a `usePersist` consumer)
+ *    mid-render. React rejects that ("Cannot update a component while rendering a
+ *    different component") and the create form renders blank.
+ * A layout effect runs before paint, so the draft exists before the user sees
+ * anything and its creation notifies subscribers normally (no stale dirty state).
  */
 function EntityCreateMode({
 	entityType,
 	children,
-	error: errorFallback,
 	onPersisted,
 }: EntityCreateModeProps): ReactElement {
-	const { store, dispatcher } = useBindxContext()
-	const schemaRegistry = useSchemaRegistry()
+	const { store } = useBindxContext()
 	const tempIdRef = useRef<string | null>(null)
-
-	// Create entity once on mount (using ref to ensure only one creation)
-	const tempId = useMemo(() => {
-		if (tempIdRef.current) {
-			return tempIdRef.current
+	const [tempId, setTempId] = useState<string | null>(null)
+
+	useLayoutEffect(() => {
+		if (!tempIdRef.current) {
+			tempIdRef.current = store.createEntity(entityType)
+			setTempId(tempIdRef.current)
+		} else if (!store.getPersistedId(entityType, tempIdRef.current) && !store.hasEntity(entityType, tempIdRef.current)) {
+			// Re-seed under the SAME temp id if a previous cleanup removed it (a React
+			// StrictMode mount→cleanup→mount cycle), so the form stays bound across it.
+			store.createEntity(entityType, { id: tempIdRef.current })
+		}
+		return () => {
+			const id = tempIdRef.current
+			// On unmount, discard a never-persisted draft: drop its root registration
+			// and let the reachability-aware sweep reclaim it ONLY if nothing else
+			// references it — a draft connected into another live parent stays reachable
+			// and survives (the diamond / shared-create case). A persisted entity is
+			// left untouched.
+			if (id && !store.getPersistedId(entityType, id)) {
+				store.unregisterRootEntity(entityType, id)
+				store.sweepUnreachableCreated()
+			}
 		}
-		const id = store.createEntity(entityType)
-		tempIdRef.current = id
-		return id
-	}, [entityType, store])
+	}, [store, entityType])
+
+	// First render, before the layout effect mints the draft. The draft is created
+	// before paint, so this empty frame is never visible.
+	if (tempId === null) {
+		return <></>
+	}
+
+	return (
+		<EntityCreateModeInner entityType={entityType} tempId={tempId} onPersisted={onPersisted}>
+			{children}
+		</EntityCreateModeInner>
+	)
+}
+
+/**
+ * Renders the create-mode draft once it exists. Split out of EntityCreateMode so
+ * its store subscriptions and selection collection always run against a real
+ * tempId (never null) — the hooks stay unconditional.
+ */
+function EntityCreateModeInner({
+	entityType,
+	tempId,
+	children,
+	onPersisted,
+}: {
+	entityType: string
+	tempId: string
+	children: (entity: EntityAccessor<unknown>) => React.ReactNode
+	onPersisted?: (id: string) => void
+}): ReactElement {
+	const { store, dispatcher } = useBindxContext()
+	const schemaRegistry = useSchemaRegistry()
 
 	// Subscribe to store changes for this entity
 	const subscribe = useCallback(
@@ -298,7 +354,12 @@ function EntityHandleRenderer({
 		[rawHandle],
 	)
 
-	useEffect(() => () => { rawHandle.dispose() }, [rawHandle])
+	// `version` is a useMemo dep, so `rawHandle` is recreated on every entity data change (to give
+	// memoized children a fresh reference). Superseded handles need no cleanup: EntityHandle and its
+	// child Field/HasMany handles are stateless live views that own no resources (see BaseHandle),
+	// so they are reclaimed by GC once unreferenced — and a consumer that still holds an accessor
+	// from an earlier render (e.g. the Slate block editor dispatching `setValue` from an async
+	// onChange after the version bumped) can keep using it.
 
 	const result = children(handle as EntityAccessor<unknown>)
 	return <>{annotateElement(result, { 'data-entity': entityType, 'data-entity-id': entityId })}</>