solid-recharts 0.2.0 → 1.0.0

package/src/cartesian/Bar.tsx

@@ -10,8 +10,18 @@
 // Solid deviations: `resolveDefaultProps`→`merge`; RegisterGraphicalItemId +
 // Set* effect-dispatch components → a `createEffect` add/replace + `onCleanup`
 // remove (the same idiom as <Line>).
-import { createEffect, createMemo, createSignal, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import {
+  createMemo,
+  createSignal,
+  For,
+  Index,
+  Show,
+  mergeProps,
+  createEffect,
+  on,
+  onCleanup,
+} from "solid-js";
+import type { JSX } from "solid-js";
 import { noop } from "../util/DataUtils";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
@@ -93,7 +103,7 @@ import {
 import { BaseAxisWithScale } from "../state/selectors/axisSelectors";
 import { StackId } from "../util/ChartUtils";
 import { BarStackClipLayer, useStackId } from "./BarStack";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 const defaultMinPointSize = 0;
 
@@ -419,7 +429,10 @@ function BarBackground(props: {
     if (!backgroundFromProps) {
       return undefined;
     }
-    const active = activeIndex();
+    // NOTE: intentionally does NOT read activeIndex() here — that would rebuild
+    // the whole rects array (and recreate every background-rect DOM node) on
+    // every hover move. `isActive` is derived per-rect in the JSX below, so the
+    // array stays stable across hover and only the active flag updates.
     const dataKey = props.dataKey;
     const backgroundProps = svgPropertiesNoEventsFromUnknown(backgroundFromProps);
     const backgroundEventProps = svgPropertiesAndEventsFromUnknown({
@@ -441,7 +454,7 @@ function BarBackground(props: {
       return [
         {
           option: backgroundFromProps,
-          isActive: String(entry.originalDataIndex) === active,
+          isActive: false, // placeholder; derived reactively per-rect in the JSX below
           ...rest,
           fill: "#eee",
           ...bg,
@@ -465,7 +478,12 @@ function BarBackground(props: {
         <ZIndexLayer zIndex={getZIndexFromUnknown(props.background, DefaultZIndexes.barBackground)}>
           <Layer>
             <For each={rects()}>
-              {(barRectangleProps) => <BarRectangle {...barRectangleProps} />}
+              {(barRectangleProps) => (
+                <BarRectangle
+                  {...barRectangleProps}
+                  isActive={String(barRectangleProps.originalDataIndex) === activeIndex()}
+                />
+              )}
             </For>
           </Layer>
         </ZIndexLayer>
@@ -565,23 +583,25 @@ function BarRectangleWithActiveState(props: {
   const [hasMountedActive, setHasMountedActive] = createSignal(false);
 
   createEffect(
-    () => isActive(),
-    (active) => {
-      let rafId: number | undefined;
-      if (active) {
-        setStayInLayer(true);
-        rafId = requestAnimationFrame(() => {
-          setHasMountedActive(true);
-        });
-      } else {
-        setHasMountedActive(false);
-      }
-      return () => {
-        if (rafId != null) {
-          cancelAnimationFrame(rafId);
+    on(
+      () => isActive(),
+      (active) => {
+        let rafId: number | undefined;
+        if (active) {
+          setStayInLayer(true);
+          rafId = requestAnimationFrame(() => {
+            setHasMountedActive(true);
+          });
+        } else {
+          setHasMountedActive(false);
         }
-      };
-    },
+        onCleanup(() => {
+          if (rafId != null) {
+            cancelAnimationFrame(rafId);
+          }
+        });
+      },
+    ),
   );
 
   const isVisuallyActive = (): boolean => isActive() && hasMountedActive();
@@ -841,7 +861,7 @@ const barErrorBarFormatter: ErrorBarDataPointFormatter = (entry, dataKey): Error
 
 export const Bar = (props: BarProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(barDefaultProps, props);
+  const merged = mergeProps(barDefaultProps, props);
   const isPanorama = useIsPanorama();
   const id = useUniqueId("recharts-bar", props.id);
   const stackId = useStackId(props.stackId);
@@ -850,44 +870,32 @@ export const Bar = (props: BarProps): JSX.Element => {
   const activeBar = merged.activeBar;
   const hasCustomShape = shape !== defaultBarShape;
 
-  let prev: BarSettings | null = null;
-
-  createEffect(
-    (): BarSettings => ({
-      id,
-      type: "bar",
-      isPanorama,
-      data: merged.data,
-      dataKey: merged.dataKey,
-      xAxisId: merged.xAxisId,
-      yAxisId: merged.yAxisId,
-      zAxisId: 0,
-      hide: merged.hide,
-      stackId,
-      barSize: merged.barSize,
-      maxBarSize: merged.maxBarSize,
-      minPointSize: merged.minPointSize,
-      hasCustomShape,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addCartesianGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removeCartesianGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<BarSettings>(
+      () => ({
+        id,
+        type: "bar",
+        isPanorama,
+        data: merged.data,
+        dataKey: merged.dataKey,
+        xAxisId: merged.xAxisId,
+        yAxisId: merged.yAxisId,
+        zAxisId: 0,
+        hide: merged.hide,
+        stackId,
+        barSize: merged.barSize,
+        maxBarSize: merged.maxBarSize,
+        minPointSize: merged.minPointSize,
+        hasCustomShape,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addCartesianGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removeCartesianGraphicalItem(prev),
+      },
+    );
+  }
 
   // Per-bar <Cell> overrides (collected from children, in data order).
   const cells = collectCells(() => props.children);
@@ -1112,7 +1120,15 @@ export const Bar = (props: BarProps): JSX.Element => {
                   >
                     {(frame, animationElapsedTime, isEntrance) => (
                       <Layer>
-                        <For each={frame}>
+                        {/* keyed={false} (index-keyed): `frame` is a fresh array of
+                            fresh rect objects every animation tick; reference-keyed
+                            <For> would dispose+recreate every bar's DOM node and
+                            rebuild its ~10 event closures per frame. Index-keying
+                            reuses the rows (geometry updates reactively via the
+                            getter-wrapped props) and builds the handlers once per
+                            slot. `r` is now an accessor — event handlers read `r()`
+                            at dispatch time so they see the current frame's rect. */}
+                        <Index each={frame}>
                           {(r, i) => (
                             // Render every selector-output rectangle, matching recharts
                             // (zero-dimension genuinely-empty bars are already dropped at
@@ -1124,12 +1140,12 @@ export const Bar = (props: BarProps): JSX.Element => {
                             // here suppressed all animated bars until the animation was
                             // driven to a non-zero frame.
                             <BarRectangleLayer
-                              entry={r}
-                              displayIndex={i()}
+                              entry={r()}
+                              displayIndex={i}
                               dataKey={merged.dataKey}
                               activeBar={activeBar}
-                              fill={r.fill ?? r.cell?.fill ?? merged.fill}
-                              stroke={r.stroke ?? r.cell?.stroke ?? merged.stroke}
+                              fill={r().fill ?? r().cell?.fill ?? merged.fill}
+                              stroke={r().stroke ?? r().cell?.stroke ?? merged.stroke}
                               radius={merged.radius}
                               shape={shape}
                               animationElapsedTime={animationElapsedTime}
@@ -1137,48 +1153,52 @@ export const Bar = (props: BarProps): JSX.Element => {
                               isAnimating={isAnimating() || animationElapsedTime < 1}
                               isEntrance={isEntrance}
                               isEntryActive={isEntryActive}
-                              cellClass={typeof r.class === "string" ? r.class : undefined}
-                              onMouseEnter={onItemEnter(r, r.originalDataIndex)}
-                              onMouseLeave={onItemLeave(r, r.originalDataIndex)}
-                              onClick={onItemClick(r, r.originalDataIndex)}
+                              cellClass={typeof r().class === "string" ? r().class : undefined}
+                              onMouseEnter={(event) =>
+                                onItemEnter(r(), r().originalDataIndex)(event)
+                              }
+                              onMouseLeave={(event) =>
+                                onItemLeave(r(), r().originalDataIndex)(event)
+                              }
+                              onClick={(event) => onItemClick(r(), r().originalDataIndex)(event)}
                               onMouseOver={
                                 onMouseOverHandler != null
-                                  ? (event) => onMouseOverHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseOverHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onMouseOut={
                                 onMouseOutHandler != null
-                                  ? (event) => onMouseOutHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseOutHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onMouseMove={
                                 onMouseMoveHandler != null
-                                  ? (event) => onMouseMoveHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseMoveHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onMouseDown={
                                 onMouseDownHandler != null
-                                  ? (event) => onMouseDownHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseDownHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onMouseUp={
                                 onMouseUpHandler != null
-                                  ? (event) => onMouseUpHandler(r, r.originalDataIndex, event)
+                                  ? (event) => onMouseUpHandler(r(), r().originalDataIndex, event)
                                   : undefined
                               }
                               onTouchMove={
                                 onTouchMoveHandler != null
-                                  ? (event) => onTouchMoveHandler(r, i(), event)
+                                  ? (event) => onTouchMoveHandler(r(), i, event)
                                   : undefined
                               }
                               onTouchEnd={
                                 onTouchEndHandler != null
-                                  ? (event) => onTouchEndHandler(r, i(), event)
+                                  ? (event) => onTouchEndHandler(r(), i, event)
                                   : undefined
                               }
                             />
                           )}
-                        </For>
+                        </Index>
                       </Layer>
                     )}
                   </AnimatedItems>

package/src/cartesian/BarStack.tsx

@@ -1,8 +1,8 @@
 // Ported from recharts 3.8.1 src/cartesian/BarStack.tsx (commit 7a23854).
 // Solid deviations: `resolveDefaultProps`→`merge`; React context → Solid `createContext`;
 // `useMemo`→plain object; `React.memo`/`propsAreEqual` omitted (Solid comp granularity).
-import { createContext, createMemo, For, merge, Show, useContext } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createContext, createMemo, For, Show, useContext, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { getNormalizedStackId, type NormalizedStackId, type StackId } from "../util/ChartUtils";
 import { useUniqueId } from "../util/useUniqueId";
 import { useAppSelector } from "../state/hooks";
@@ -73,11 +73,14 @@ export const useBarStackClipPathUrl = (index: number): string | undefined => {
 };
 
 export const BarStackClipLayer = (props: LayerProps & { index: number }): JSX.Element => {
-  const clipPathUrl = useBarStackClipPathUrl(props.index);
+  // Memoized so `props.index` is read in a tracking scope: when an index-keyed
+  // <For> feeds a reactive `entry.originalDataIndex` here, a bare hook call would
+  // read it untracked (STRICT_READ_UNTRACKED) and never update.
+  const clipPathUrl = createMemo(() => useBarStackClipPathUrl(props.index));
   return (
     <Layer
       class={["recharts-bar-stack-layer", props.class].filter(Boolean).join(" ")}
-      clipPath={clipPathUrl}
+      clipPath={clipPathUrl()}
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
       onClick={props.onClick}
@@ -133,16 +136,16 @@ const BarStackClipPath = (props: {
 };
 
 export const BarStack = (props: BarStackProps): JSX.Element => {
-  const merged = merge(defaultBarStackProps, props);
+  const merged = mergeProps(defaultBarStackProps, props);
   const resolvedStackId = useUniqueId("recharts-bar-stack", getNormalizedStackId(merged.stackId));
   const context: BarStackSettings = {
     stackId: resolvedStackId,
     radius: merged.radius,
   };
   return (
-    <BarStackContext value={context}>
+    <BarStackContext.Provider value={context}>
       <BarStackClipPath stackId={resolvedStackId} radius={merged.radius} />
       {props.children}
-    </BarStackContext>
+    </BarStackContext.Provider>
   );
 };

package/src/cartesian/Brush.tsx

@@ -23,9 +23,9 @@
 // (drag overrides win mid-interaction, the Solid equivalent of recharts'
 // getDerivedStateFromProps "don't sync while interacting" guards). Covered by the
 // "with controlled startIndex/endIndex" Brush.spec block.
-import { createEffect, createMemo, createSignal, merge, onCleanup, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
-import { scalePoint } from "victory-vendor/d3-scale";
+import { createMemo, createSignal, onCleanup, Show, mergeProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
+import { scalePoint } from "d3-scale";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { Layer } from "../container/Layer";
 import { Text } from "../component/Text";
@@ -211,7 +211,7 @@ function DefaultTraveller(props: {
 
 export const Brush = (props: BrushProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(brushDefaultProps, props);
+  const merged = mergeProps(brushDefaultProps, props);
 
   const dimensions = useAppSelector(selectBrushDimensions);
   const dataState = useAppSelector(selectChartDataWithIndexes);
@@ -229,24 +229,28 @@ export const Brush = (props: BrushProps): JSX.Element => {
   // createEffect (compute → apply): the store write happens in the untracked apply
   // phase, like the other Set* registration components.
   createEffect(
-    () => ({
-      x: merged.x,
-      y: merged.y,
-      width: merged.width,
-      height: merged.height,
-      padding: { ...merged.padding },
-    }),
-    (settings) => store?.actions.brush.setBrushSettings(settings),
+    on(
+      () => ({
+        x: merged.x,
+        y: merged.y,
+        width: merged.width,
+        height: merged.height,
+        padding: { ...merged.padding },
+      }),
+      (settings) => store?.actions.brush.setBrushSettings(settings),
+    ),
   );
   unregisterOnCleanup(() => store?.actions.brush.setBrushSettings(null));
 
   // Sync controlled start/end index props into the store (recharts BrushInternal
   // useEffect — always dispatch; the reducer ignores undefined fields).
   createEffect(
-    () => ({ startIndex: merged.startIndex, endIndex: merged.endIndex }),
-    (idx) => {
-      store?.actions.chartData.setDataStartEndIndexes(idx);
-    },
+    on(
+      () => ({ startIndex: merged.startIndex, endIndex: merged.endIndex }),
+      (idx) => {
+        store?.actions.chartData.setDataStartEndIndexes(idx);
+      },
+    ),
   );
 
   // scalePoint over the data indices → pixel positions across the brush width.

package/src/cartesian/CartesianAxis.tsx

@@ -17,8 +17,8 @@
 // auto-width. Solid deviations:
 // forwardRef dropped; React CSSProperties n/a; `className`→`class`.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createMemo, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { getTicks } from "./getTicks";
 import { Layer } from "../container/Layer";
 import {
@@ -281,9 +281,9 @@ const AxisLine = (props: {
 };
 
 export const CartesianAxis = (props: CartesianAxisProps): JSX.Element => {
-  const merged = merge(cartesianAxisDefaults, props);
+  const merged = mergeProps(cartesianAxisDefaults, props);
 
-  // merge() keeps an explicit `stroke={undefined}` (e.g. forwarded from a
+  // mergeProps() keeps an explicit `stroke={undefined}` (e.g. forwarded from a
   // strokeless <YAxis/>) as undefined; resolve the default at use sites.
   const strokeColor = (): string => merged.stroke ?? cartesianAxisDefaults.stroke;
 

package/src/cartesian/CartesianGrid.tsx

@@ -13,8 +13,8 @@
 // full GridLineTypeFunctionProps payload (matching recharts) including the
 // xAxis/yAxis/offset bundle.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createMemo, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector } from "../state/hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { useChartHeight, useChartWidth, useOffsetInternal } from "../context/chartLayoutContext";
@@ -227,7 +227,7 @@ const defaultHorizontalCoordinatesGenerator: HorizontalCoordinatesGenerator = (
   );
 
 export const CartesianGrid = (props: CartesianGridProps): JSX.Element => {
-  const merged = merge(cartesianGridDefaults, props);
+  const merged = mergeProps(cartesianGridDefaults, props);
   const isPanorama = useIsPanorama();
   const offset = useOffsetInternal();
   const chartWidth = useChartWidth();
@@ -379,7 +379,7 @@ export const CartesianGrid = (props: CartesianGridProps): JSX.Element => {
 
   // Builds the props payload passed to a custom line render-prop function.
   // Enumerates exactly the keys recharts' LineItem receives — no `...props`
-  // spread (that would leak the merge()-proxy MERGE_SOURCE symbol into the
+  // spread (that would leak the mergeProps()-proxy MERGE_SOURCE symbol into the
   // payload and break deep-equality assertions).
   const lineItemProps = (
     index: number,
@@ -486,7 +486,7 @@ export const CartesianGrid = (props: CartesianGridProps): JSX.Element => {
           Show child — see Bar). Default grid zIndex is -100: the grid portals
           BELOW the graphical items, mirroring the reference's settled DOM. */}
       <ZIndexLayer zIndex={merged.zIndex}>
-        <g class={["recharts-cartesian-grid", merged.class]}>
+        <g class={["recharts-cartesian-grid", merged.class].filter(Boolean).join(" ")}>
           <Show when={merged.fill != null && merged.fill !== "none"}>
             <rect
               x={geom().x}

package/src/cartesian/ErrorBar.tsx

@@ -16,8 +16,8 @@
 //  - arbitrary SVG-prop passthrough to the whisker group (recharts `Props = SVGProps
 //    & ErrorBarProps`, e.g. a bare `begin` attribute) rides through
 //    svgPropertiesNoEvents, filtered by the canonical allowlist.
-import { type Accessor, createMemo, For, merge, omit, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { type Accessor, createMemo, For, Show, mergeProps, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { Layer } from "../container/Layer";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 import { CSSTransitionAnimate } from "../animation/CSSTransitionAnimate";
@@ -219,7 +219,10 @@ function ErrorBarImpl(props: {
                 <Show when={group.lines.length > 0}>
                   {/* Raw <g> (mirrors Layer's `recharts-layer` class) so the Record
                     spread can carry the non-typed `offset` attribute. */}
-                  <g class={["recharts-layer", "recharts-errorBar"]} {...groupAttrs()}>
+                  <g
+                    class={["recharts-layer", "recharts-errorBar"].filter(Boolean).join(" ")}
+                    {...groupAttrs()}
+                  >
                     <For each={group.lines}>
                       {(c) => {
                         const lineStyle: JSX.CSSProperties | undefined = props.isAnimationActive
@@ -275,7 +278,7 @@ function ErrorBarImpl(props: {
  * @consumes ErrorBarContext
  */
 export function ErrorBar(props: ErrorBarProps): JSX.Element {
-  const merged = merge(errorBarDefaultProps, props);
+  const merged = mergeProps(errorBarDefaultProps, props);
   const direction = useErrorBarDirection(props.direction);
   // Everything that isn't ErrorBar config is an SVG presentation prop for the
   // whisker group (recharts: `const { direction, width, dataKey, ...others } =
@@ -283,8 +286,7 @@ export function ErrorBar(props: ErrorBarProps): JSX.Element {
   // remaining non-SVG keys (and the merge proxy's symbols).
   const groupSvgAttrs = createMemo<Record<string, unknown>>(() =>
     svgPropertiesNoEvents({
-      ...omit(
-        merged,
+      ...splitProps(merged, [
         "dataKey",
         "width",
         "direction",
@@ -294,7 +296,7 @@ export function ErrorBar(props: ErrorBarProps): JSX.Element {
         "animationEasing",
         "zIndex",
         "class",
-      ),
+      ])[1],
     }),
   );
   return (

package/src/cartesian/Funnel.tsx

@@ -17,11 +17,15 @@
 // Enter/Leave/onTouchStart/Move/End, props-first `(data, index, event)`) ARE wired.
 // No legend registration and no ZIndexLayer — matching recharts (upstream Funnel
 // registers no legend payload and renders inline without a zIndex portal).
-import { createMemo, createSignal, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector } from "../state/hooks";
 import { useUniqueId } from "../util/useUniqueId";
-import { AnimatedItems, type AnimationInterpolateFn } from "../animation/AnimatedItems";
+import {
+  AnimatedItems,
+  useAnimationCallbacks,
+  type AnimationInterpolateFn,
+} from "../animation/AnimatedItems";
 import { matchAppend, type AnimationMatchByProp } from "../animation/matchBy";
 import type { MutableRef } from "../animation/useAnimationStartSnapshot";
 import { useCartesianChartLayout } from "../context/chartLayoutContext";
@@ -342,7 +346,7 @@ export const funnelDefaultProps = {
 export function Funnel<DataPointType = Record<string, unknown>, DataValueType = unknown>(
   props: FunnelProps<DataPointType, DataValueType>,
 ): JSX.Element {
-  const merged = merge(funnelDefaultProps, props);
+  const merged = mergeProps(funnelDefaultProps, props);
   const id = useUniqueId("recharts-funnel", props.id);
 
   const cells = collectCells(() => props.children);
@@ -452,18 +456,11 @@ export function Funnel<DataPointType = Record<string, unknown>, DataValueType =
     current: null,
   };
 
-  // ownedWrite: handleAnimationEnd also fires from the animation effect cleanup when
-  // a mid-animation chart is disposed (route/soft navigation) — a legal teardown.
-  const [showLabels, setShowLabels] = createSignal(true, { ownedWrite: true });
-  const labelContextEntries = createMemo(() => (showLabels() ? labelListEntries() : undefined));
-  const handleAnimationStart = (): void => {
-    props.onAnimationStart?.();
-    setShowLabels(false);
-  };
-  const handleAnimationEnd = (): void => {
-    props.onAnimationEnd?.();
-    setShowLabels(true);
-  };
+  const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
+    () => props.onAnimationStart?.(),
+    () => props.onAnimationEnd?.(),
+  );
+  const labelContextEntries = createMemo(() => (isAnimating() ? undefined : labelListEntries()));
 
   const layerClass = (): string =>
     ["recharts-trapezoids", merged.class].filter((c): c is string => Boolean(c)).join(" ");
@@ -514,13 +511,12 @@ export function Funnel<DataPointType = Record<string, unknown>, DataValueType =
                         const isActive = (): boolean =>
                           Boolean(activeShape) && activeItemIndex() === String(i());
                         // v3.9 ShapeAnimationProps forwarded into the custom-shape
-                        // invocation, mirroring upstream FunnelTrapezoids. `showLabels`
-                        // is the inverse of upstream's `isAnimating` (false during the
-                        // animation); combine `< 1` like upstream so the shape sees
-                        // `isAnimating` through the whole entrance frame.
+                        // invocation, mirroring upstream FunnelTrapezoids. Combine
+                        // `< 1` like upstream so the shape sees `isAnimating` through
+                        // the whole entrance frame.
                         const shapeAnimationProps = (): ShapeAnimationProps => ({
                           animationElapsedTime,
-                          isAnimating: !showLabels() || animationElapsedTime < 1,
+                          isAnimating: isAnimating() || animationElapsedTime < 1,
                           isEntrance,
                         });
                         return (

package/src/cartesian/GraphicalItemClipPath.tsx

@@ -6,7 +6,7 @@
 // through `<Show>`. Not yet wired into <Line> (clip is a deferred Line feature);
 // this is the shared clip-path primitive for graphical items.
 import { createMemo, Show, type Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { AxisId } from "../state/cartesianAxisSlice";
 import { useAppSelector } from "../state/hooks";
 import {