@solidports/recharts 0.1.0

package/src/shape/Trapezoid.tsx

@@ -0,0 +1,280 @@
+/* eslint-disable import/no-cycle */
+/**
+ * @fileOverview Rectangle
+ */
+import type { JSX } from '@solidjs/web';
+import { useShapeElementProps } from "../util/ShapeElementProps"
+import type { WithoutRemoveFalse } from "../util/types"
+import { createMemo, createSignal, Show, createEffect, untrack } from 'solid-js';
+import { clsx } from "clsx"
+import type { AnimationDuration, AnimationTiming } from "../util/types"
+import { resolveDefaultProps } from "../util/resolveDefaultProps"
+import { JavascriptAnimate } from "../animation/JavascriptAnimate"
+import { useAnimationId } from "../util/useAnimationId"
+import { interpolate } from "../util/DataUtils"
+import { getTransitionVal } from "../animation/util"
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
+import { roundTemplateLiteral } from "../util/round"
+
+const getTrapezoidPath = (
+	x: number,
+	y: number,
+	upperWidth: number,
+	lowerWidth: number,
+	height: number,
+): string => {
+	const widthGap = upperWidth - lowerWidth
+	let path
+	path = roundTemplateLiteral`M ${x},${y}`
+	path += roundTemplateLiteral`L ${x + upperWidth},${y}`
+	path += roundTemplateLiteral`L ${x + upperWidth - widthGap / 2},${y + height}`
+	path += roundTemplateLiteral`L ${x + upperWidth - widthGap / 2 - lowerWidth},${y + height}`
+	path += roundTemplateLiteral`L ${x},${y} Z`
+	return path
+}
+
+interface TrapezoidProps {
+	class?: string
+	/**
+	 * The x-coordinate of top left point of the trapezoid.
+	 * @default 0
+	 */
+	x?: number
+	/**
+	 * The y-coordinate of top left point of the trapezoid.
+	 * @default 0
+	 */
+	y?: number
+	/**
+	 * Width of the upper horizontal side of the trapezoid in pixels.
+	 * @default 0
+	 */
+	upperWidth?: number
+	/**
+	 * Width of the lower horizontal side of the trapezoid in pixels.
+	 * @default 0
+	 */
+	lowerWidth?: number
+	/**
+	 * Height of the trapezoid in pixels.
+	 * @default 0
+	 */
+	height?: number
+
+	/**
+	 * If set to true, trapezoid will update and render with a gradual fade-in animation from left to right.
+	 * If set "auto", animation is disabled during SSR and when the user prefers reduced motion.
+	 * @default false
+	 */
+	isUpdateAnimationActive?: boolean | "auto"
+	animationBegin?: number
+	animationDuration?: AnimationDuration
+	animationEasing?: AnimationTiming
+
+	/**
+	 * The customized event handler of click on the trapezoid
+	 */
+	onClick?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
+	/**
+	 * The customized event handler of mousedown on the trapezoid
+	 */
+	onMouseDown?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
+	/**
+	 * The customized event handler of mouseup on the trapezoid
+	 */
+	onMouseUp?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
+	/**
+	 * The customized event handler of mousemove on the trapezoid
+	 */
+	onMouseMove?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
+	/**
+	 * The customized event handler of mouseover on the trapezoid
+	 */
+	onMouseOver?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
+	/**
+	 * The customized event handler of mouseout on the trapezoid
+	 */
+	onMouseOut?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
+	/**
+	 * The customized event handler of mouseenter on the trapezoid
+	 */
+	onMouseEnter?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
+	/**
+	 * The customized event handler of mouseleave on the trapezoid
+	 */
+	onMouseLeave?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
+}
+
+export type Props = WithoutRemoveFalse<Omit<JSX.PathSVGAttributes<SVGPathElement>, keyof TrapezoidProps>> & TrapezoidProps
+
+export const defaultTrapezoidProps = {
+	animationBegin: 0,
+	animationDuration: 1500,
+	animationEasing: "ease",
+	height: 0,
+	isUpdateAnimationActive: false,
+	lowerWidth: 0,
+	upperWidth: 0,
+	x: 0,
+	y: 0,
+} as const satisfies Partial<Props>
+
+export function Trapezoid(ownProps: Props) {
+	/* Props injected for a shape passed as an element (see ShapeElementProps). */
+	const outsideProps = useShapeElementProps(ownProps)
+	const trapezoidProps = resolveDefaultProps(outsideProps, defaultTrapezoidProps)
+
+	/* Solid only writes refs through function callbacks / signal setters —
+	 * `ref={letBoundVar}` is a no-op, so we capture explicitly. */
+	let pathRef: SVGPathElement | undefined
+	const capturePathRef = (el: SVGPathElement) => {
+		pathRef = el
+		if (el.getTotalLength) {
+			try {
+				const pathTotalLength = el.getTotalLength()
+				if (pathTotalLength) {
+					setTotalLength(pathTotalLength)
+				}
+			} catch {
+				/* calculate total length error */
+			}
+		}
+	}
+	const [totalLength, setTotalLength] = createSignal(-1)
+
+	const animationId = useAnimationId(() => outsideProps, "trapezoid-")
+
+	const isValid = () =>
+		trapezoidProps.x === +trapezoidProps.x &&
+		trapezoidProps.y === +trapezoidProps.y &&
+		trapezoidProps.upperWidth === +trapezoidProps.upperWidth &&
+		trapezoidProps.lowerWidth === +trapezoidProps.lowerWidth &&
+		trapezoidProps.height === +trapezoidProps.height &&
+		(trapezoidProps.upperWidth !== 0 || trapezoidProps.lowerWidth !== 0) &&
+		trapezoidProps.height !== 0
+
+	/* Animation starts from the geometry at mount. */
+	let prevUpperWidth = untrack(() => trapezoidProps.upperWidth)
+	let prevLowerWidth = untrack(() => trapezoidProps.lowerWidth)
+	let prevHeight = untrack(() => trapezoidProps.height)
+	let prevX = untrack(() => trapezoidProps.x)
+	let prevY = untrack(() => trapezoidProps.y)
+
+	/* React-style `className` alias forwarded through Shape's prop transformer
+	   (e.g. `shape={{ className: "x" }}`); accept both. */
+	const layerClass = () =>
+		clsx(
+			"recharts-trapezoid",
+			trapezoidProps.class,
+			(trapezoidProps as { className?: string }).className,
+		)
+
+	return (
+		<Show when={isValid()}>
+			<Show
+				when={trapezoidProps.isUpdateAnimationActive}
+				fallback={
+					<g>
+						<path
+							{...svgPropertiesAndEvents(trapezoidProps)}
+							class={layerClass()}
+							d={getTrapezoidPath(
+								trapezoidProps.x,
+								trapezoidProps.y,
+								trapezoidProps.upperWidth,
+								trapezoidProps.lowerWidth,
+								trapezoidProps.height,
+							)}
+						/>
+					</g>
+				}
+			>
+				{(() => {
+					const from = () => `0px ${totalLength() === -1 ? 1 : totalLength()}px`
+					const to = () => `${totalLength()}px 0px`
+					const transition = () =>
+						getTransitionVal(
+							["strokeDasharray"],
+							trapezoidProps.animationDuration,
+							trapezoidProps.animationEasing,
+						)
+
+					return (
+						<JavascriptAnimate
+							animationId={animationId()}
+							canBegin={totalLength() > 0}
+							duration={trapezoidProps.animationDuration}
+							easing={trapezoidProps.animationEasing}
+							isActive={trapezoidProps.isUpdateAnimationActive}
+							begin={trapezoidProps.animationBegin}
+						>
+							{(t: () => number) => {
+								/* GOTCHA-014: thunk children — write prev via effect to avoid stale-memo drift.
+								   Upstream reads prev* refs once per Trapezoid render, so the start point
+								   is frozen until geometry props change. */
+								const start = createMemo(() => {
+									void trapezoidProps.upperWidth
+									void trapezoidProps.lowerWidth
+									void trapezoidProps.height
+									void trapezoidProps.x
+									void trapezoidProps.y
+									return untrack(() => ({
+										height: prevHeight,
+										lowerWidth: prevLowerWidth,
+										upperWidth: prevUpperWidth,
+										x: prevX,
+										y: prevY,
+									}))
+								})
+								const currUpperWidth = createMemo(() =>
+									interpolate(start().upperWidth, trapezoidProps.upperWidth, t()),
+								)
+								const currLowerWidth = createMemo(() =>
+									interpolate(start().lowerWidth, trapezoidProps.lowerWidth, t()),
+								)
+								const currHeight = createMemo(() => interpolate(start().height, trapezoidProps.height, t()))
+								const currX = createMemo(() => interpolate(start().x, trapezoidProps.x, t()))
+								const currY = createMemo(() => interpolate(start().y, trapezoidProps.y, t()))
+								createEffect(
+									() => (t() > 0 ? { prevHeight: currHeight(), prevLowerWidth: currLowerWidth(), prevUpperWidth: currUpperWidth(), prevX: currX(), prevY: currY() } : null),
+									(step) => {
+										if (step != null && pathRef) {
+											prevUpperWidth = step.prevUpperWidth
+											prevLowerWidth = step.prevLowerWidth
+											prevHeight = step.prevHeight
+											prevX = step.prevX
+											prevY = step.prevY
+										}
+									},
+								)
+								const animationStyle = createMemo(() =>
+									t() > 0
+										? { "stroke-dasharray": to(), transition: transition() }
+										: { "stroke-dasharray": from() },
+								)
+								return (
+									<path
+										{...svgPropertiesAndEvents(trapezoidProps)}
+										class={layerClass()}
+										d={getTrapezoidPath(
+											currX(),
+											currY(),
+											currUpperWidth(),
+											currLowerWidth(),
+											currHeight(),
+										)}
+										ref={capturePathRef}
+										style={{
+											...animationStyle(),
+											...(typeof trapezoidProps.style === "object" ? trapezoidProps.style : {}),
+										}}
+									/>
+								)
+							}}
+						</JavascriptAnimate>
+					)
+				})()}
+			</Show>
+		</Show>
+	)
+}

package/src/state/RechartsStateContext.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'solid-js';
+import { type SetStoreFunction } from '../util/solid-1-compat';
+import type { ChartState } from "./chartState"
+
+/** Shape exposed via context — state for reads, setState for fine-grained writes. */
+export type RechartsStateContextValue = {
+	state: ChartState
+	setState: SetStoreFunction<ChartState>
+}
+
+/** Typed context — null outside a RechartsStateProvider. */
+export const RechartsStateContext = createContext<RechartsStateContextValue | null>(null)

package/src/state/RechartsStateProvider.tsx

@@ -0,0 +1,87 @@
+/* @jsxImportSource @solidjs/web */
+import type { JSX } from '@solidjs/web';
+import { getOwner, untrack } from 'solid-js';
+import { RechartsStateContext } from "./RechartsStateContext"
+import type { RechartsStateContextValue } from "./RechartsStateContext"
+import type { ChartState } from "./chartState"
+import { createInitialChartState } from "./chartState"
+import { useIsPanorama } from "../context/PanoramaContext"
+import { RechartsStoreContext } from "./RechartsStoreContext"
+import { createEventHandlers } from "./events"
+import { registerChartOwner } from "./selectors/chartSelector"
+
+import { createStore, type SetStoreFunction } from '../util/solid-1-compat';
+type RechartsStateProviderProps = {
+	/**
+	 * Top-level keys override defaults. Sub-objects must be complete — shallow
+	 * merge only; partial nested overrides are not supported in Phase 1.
+	 */
+	preloadedState?: Partial<ChartState>
+	children: JSX.Element
+}
+
+/* Solid setStore throws when a path segment points to an undefined intermediate node.
+   Wraps to pre-initialize missing nodes before the deep write — needed for callers that
+   write into axis slots that haven't been mounted yet (e.g. test probes, panorama shared state).
+   Only the ≥4-arg case (3+ path segments) needs the walk; shallow writes are fine as-is. */
+function makeAutoInitsetState(
+	state: ChartState,
+	setStore: SetStoreFunction<ChartState>,
+): SetStoreFunction<ChartState> {
+	return ((...args: unknown[]) => {
+		if (args.length >= 4) {
+			/* The walk only probes for missing nodes; a setter must not subscribe its caller. */
+			untrack(() => {
+				const pathSegments = args.slice(0, -1)
+				let node: unknown = state
+				for (let i = 0; i < pathSegments.length - 1; i++) {
+					const seg = pathSegments[i]
+					if (typeof seg !== "string" && typeof seg !== "number") break
+					const next = (node as Record<string | number, unknown>)[seg]
+					if (next === undefined || next === null) {
+						;(setStore as (...a: unknown[]) => void)(...pathSegments.slice(0, i + 1), {})
+					}
+					node = (node as Record<string | number, unknown>)[seg] ?? {}
+				}
+			})
+		}
+		;(setStore as (...a: unknown[]) => void)(...args)
+	}) as SetStoreFunction<ChartState>
+}
+
+/** Mounts an isolated ChartState store and exposes it via RechartsStateContext. */
+export function RechartsStateProvider(props: RechartsStateProviderProps): JSX.Element {
+	const isPanorama = useIsPanorama()
+
+	/*
+	 * Panorama = this is a Brush sub-chart preview, not a real chart instance.
+	 * Skip mounting a new store so descendants inherit the parent chart's context
+	 * via Solid context bubbling — mirrors RechartsStoreProvider's panorama guard.
+	 */
+	if (isPanorama) {
+		return <>{props.children}</>
+	}
+
+	/* preloadedState seeds the store once, like React initialState. */
+	const [state, setStore] = createStore<ChartState>(
+		untrack(() => createInitialChartState(props.preloadedState)),
+	)
+	/* Selector memos for this chart live under the provider owner and die with it. */
+	registerChartOwner(state, getOwner())
+	const setState = makeAutoInitsetState(state, setStore)
+	const value: RechartsStateContextValue = { setState, state }
+	const events = createEventHandlers(state, setState)
+	return (
+		<RechartsStateContext value={value}>
+			<RechartsStoreContext
+				value={{
+					events,
+					setStore: setState,
+					store: state,
+				}}
+			>
+				{props.children}
+			</RechartsStoreContext>
+		</RechartsStateContext>
+	)
+}

package/src/state/RechartsStoreContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'solid-js';
+import type { ChartState } from "./chartState"
+import type { ChartEventHandlers } from "./events"
+
+import { type SetStoreFunction } from '../util/solid-1-compat';
+export type ChartStoreContextValue = {
+	store: ChartState
+	setStore: SetStoreFunction<ChartState>
+	events: ChartEventHandlers
+}
+
+/**
+ * Independent Solid context — must not collide with consumer apps that bring
+ * their own stores. Provides store + setStore for state access plus consolidated
+ * event handlers.
+ */
+export const RechartsStoreContext = createContext<ChartStoreContextValue | null>(null)
+
+/**
+ * Returns the chart store handle from context. Returns `null` outside a
+ * chart wrapper — matches panorama and stand-alone usage; callers must guard.
+ */
+export function useChartStore(): ChartStoreContextValue | null {
+	return useContext(RechartsStoreContext)
+}

package/src/state/RechartsStoreProvider.tsx

@@ -0,0 +1,35 @@
+/* @jsxImportSource @solidjs/web */
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { useIsPanorama } from "../context/PanoramaContext"
+import { useOptionalChartState } from "./useChartState"
+import { RechartsStateProvider } from "./RechartsStateProvider"
+import type { ChartState } from "./chartState"
+
+type RechartsStoreProviderProps = {
+	children: JSX.Element
+	preloadedState?: Partial<ChartState>
+}
+
+/**
+ * Compatibility wrapper for tests that still mount RechartsStoreProvider.
+ * Production charts use RechartsStateProvider only — one ChartState store.
+ * Standalone mounts create that provider; nested mounts inherit it (no second store).
+ */
+export function RechartsStoreProvider(props: RechartsStoreProviderProps): JSX.Element {
+	const isPanorama = useIsPanorama()
+	if (isPanorama) {
+		return <>{props.children}</>
+	}
+
+	const existing = useOptionalChartState()
+	if (existing != null) {
+		return <>{props.children}</>
+	}
+
+	return (
+		<RechartsStateProvider preloadedState={props.preloadedState}>
+			{props.children}
+		</RechartsStateProvider>
+	)
+}

package/src/state/ReportChartProps.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-cycle */
+import { createEffect, onCleanup } from 'solid-js';
+import type { UpdatableChartOptions } from "./rootPropsSlice"
+import { initialRootPropsState } from "./rootPropsSlice"
+import { useOptionalChartState } from "./useChartState"
+import { teardownWrite } from "./teardownWrite"
+
+export function ReportChartProps(props: UpdatableChartOptions): null {
+	const ctx = useOptionalChartState()
+	if (ctx == null) {
+		return null
+	}
+
+	createEffect(
+		() => ({
+			accessibilityLayer: props.accessibilityLayer,
+			barCategoryGap: props.barCategoryGap,
+			barGap: props.barGap,
+			barSize: props.barSize,
+			baseValue: props.baseValue,
+			className: props.className,
+			maxBarSize: props.maxBarSize,
+			reverseStackOrder: props.reverseStackOrder,
+			stackOffset: props.stackOffset,
+			syncId: props.syncId,
+			syncMethod: props.syncMethod,
+		}),
+		(rootProps) => {
+			ctx.setState("rootProps", rootProps)
+		},
+	)
+
+	onCleanup(() => {
+		teardownWrite(() => {
+			ctx.setState("rootProps", { ...initialRootPropsState })
+		})
+	})
+
+	return null
+}

package/src/state/ReportEventSettings.tsx

@@ -0,0 +1,30 @@
+import { createEffect, onCleanup } from 'solid-js';
+import { useOptionalChartState } from "./useChartState"
+import { initialEventSettingsState } from "./eventSettingsSlice"
+import type { EventThrottlingProps } from "../util/types"
+import { teardownWrite } from "./teardownWrite"
+
+export function ReportEventSettings(props: EventThrottlingProps): null {
+	const ctx = useOptionalChartState()
+	if (ctx == null) {
+		return null
+	}
+
+	createEffect(
+		() => ({
+			throttleDelay: props.throttleDelay ?? initialEventSettingsState.throttleDelay,
+			throttledEvents: props.throttledEvents ?? initialEventSettingsState.throttledEvents,
+		}),
+		(settings) => {
+			ctx.setState("eventSettings", settings)
+		},
+	)
+
+	onCleanup(() => {
+		teardownWrite(() => {
+			ctx.setState("eventSettings", { ...initialEventSettingsState })
+		})
+	})
+
+	return null
+}

package/src/state/ReportMainChartProps.tsx

@@ -0,0 +1,61 @@
+import { createEffect, onCleanup } from 'solid-js';
+import type { LayoutType, Margin } from "../util/types"
+import { useIsPanorama } from "../context/PanoramaContext"
+import { initialLayoutState } from "./layoutSlice"
+import { useOptionalChartState } from "./useChartState"
+import { teardownWrite } from "./teardownWrite"
+
+/**
+ * "Main" props are props that are only accepted on the main chart,
+ * as opposed to the small panorama chart inside a Brush.
+ */
+type MainChartProps = {
+	layout: LayoutType
+	margin: Partial<Margin>
+}
+
+export function ReportMainChartProps(props: MainChartProps): null {
+	const ctx = useOptionalChartState()
+	if (ctx == null) {
+		return null
+	}
+
+	/*
+	 * Skip dispatching properties in panorama chart for two reasons:
+	 * 1. The root chart should be deciding on these properties, and
+	 * 2. Brush reads these properties from the store, and so they must remain stable
+	 *      to avoid circular dependency and infinite re-rendering.
+	 */
+	const isPanorama = useIsPanorama()
+
+	/* The chart root seeds layout at store creation; this keeps it in sync after mount. */
+	createEffect(
+		() => ({
+			layoutType: props.layout,
+			/* upstream setMargin: missing sides become 0 */
+			margin: {
+				bottom: props.margin.bottom ?? 0,
+				left: props.margin.left ?? 0,
+				right: props.margin.right ?? 0,
+				top: props.margin.top ?? 0,
+			},
+		}),
+		(next) => {
+			if (!isPanorama) {
+				ctx.setState("layout", "layoutType", next.layoutType)
+				ctx.setState("layout", "margin", next.margin)
+			}
+		},
+	)
+
+	onCleanup(() => {
+		teardownWrite(() => {
+			if (!isPanorama) {
+				ctx.setState("layout", "layoutType", initialLayoutState.layoutType)
+				ctx.setState("layout", "margin", { ...initialLayoutState.margin })
+			}
+		})
+	})
+
+	return null
+}

package/src/state/ReportPolarOptions.tsx

@@ -0,0 +1,35 @@
+import { createEffect, onCleanup } from "solid-js"
+import { useOptionalChartState } from "./useChartState"
+import type { PolarChartOptions } from "./polarOptionsSlice"
+import { teardownWrite } from "./teardownWrite"
+
+export function ReportPolarOptions(props: PolarChartOptions): null {
+	const ctx = useOptionalChartState()
+	if (ctx == null) {
+		return null
+	}
+
+	createEffect(
+		() => ({
+			cx: props.cx,
+			cy: props.cy,
+			endAngle: props.endAngle,
+			innerRadius: props.innerRadius,
+			outerRadius: props.outerRadius,
+			startAngle: props.startAngle,
+		}),
+		(polarOptions) => {
+			ctx.setState("polarOptions", polarOptions)
+		},
+	)
+
+	onCleanup(() => {
+		teardownWrite(() => {
+			/* polarOptions is `PolarChartOptions | null`. reconcile(null) tries to
+			   adopt a null store target and throws STORE_TARGET. */
+			ctx.setState("polarOptions", null)
+		})
+	})
+
+	return null
+}

package/src/state/SetGraphicalItem.ts

@@ -0,0 +1,79 @@
+import { createEffect, onCleanup, useContext } from 'solid-js';
+import { RechartsStateContext } from "./RechartsStateContext"
+import type {
+	CartesianGraphicalItemSettings,
+	PolarGraphicalItemSettings,
+} from "./graphicalItemsSlice"
+import type { CartesianItemState, PolarItemState } from "./chartState"
+import { teardownWrite } from "./teardownWrite"
+import { markRawData } from "./rawData"
+
+/** Registers a cartesian graphical item into chartState on mount, updates on change, removes on cleanup. */
+export function SetCartesianGraphicalItem<T extends CartesianGraphicalItemSettings>(
+	props: T,
+): null {
+	const stateCtx = useContext(RechartsStateContext)
+	if (stateCtx == null) {
+		return null
+	}
+
+	let prevProps: T | null = null
+
+	createEffect(
+		() => ({ ...props }) as T,
+		(current) => {
+			if (current.id != null) {
+				/* Item-level data is served by reference like chart data (see markRawData). */
+				markRawData(current.data)
+				const itemState = { settings: current, type: current.type } as CartesianItemState
+				stateCtx.setState("graphicalItems", String(current.id), itemState as never)
+			}
+			prevProps = current
+		},
+	)
+
+	onCleanup(() => {
+		teardownWrite(() => {
+			if (prevProps?.id != null) {
+				stateCtx.setState("graphicalItems", String(prevProps.id), undefined as never)
+				prevProps = null
+			}
+		})
+	})
+
+	return null
+}
+
+/** Registers a polar graphical item into chartState on mount, updates on change, removes on cleanup. */
+export function SetPolarGraphicalItem(props: PolarGraphicalItemSettings): null {
+	const stateCtx = useContext(RechartsStateContext)
+	if (stateCtx == null) {
+		return null
+	}
+
+	let prevProps: PolarGraphicalItemSettings | null = null
+
+	createEffect(
+		() => ({ ...props }) as PolarGraphicalItemSettings,
+		(current) => {
+			if (current.id != null) {
+				/* Item-level data is served by reference like chart data (see markRawData). */
+				markRawData(current.data)
+				const itemState = { settings: current, type: current.type } as PolarItemState
+				stateCtx.setState("graphicalItems", String(current.id), itemState as never)
+			}
+			prevProps = current
+		},
+	)
+
+	onCleanup(() => {
+		teardownWrite(() => {
+			if (prevProps?.id != null) {
+				stateCtx.setState("graphicalItems", String(prevProps.id), undefined as never)
+				prevProps = null
+			}
+		})
+	})
+
+	return null
+}