@solidports/recharts 0.1.0 → 0.1.1

package/src/shape/Trapezoid.tsx

@@ -1,280 +0,0 @@
-/* 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

@@ -1,12 +0,0 @@
-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

@@ -1,87 +0,0 @@
-/* @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

@@ -1,25 +0,0 @@
-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

@@ -1,35 +0,0 @@
-/* @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

@@ -1,40 +0,0 @@
-/* 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

@@ -1,30 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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
-}