Use the effect primitives Solid 2 actually kept

src/components/_shared/overlayPosition.ts

@@ -1,4 +1,4 @@
-import {createEffect, createSignal, onCleanup, type Accessor} from "solid-js";
+import {createSignal, createTrackedEffect, type Accessor} from "solid-js";
 import type { JSX } from "@solidjs/web";
 
 export type OverlayPlacement = "top" | "bottom" | "left" | "right";
@@ -107,7 +107,7 @@ export const createOverlayPosition = (
   const [resolvedPlacement, setResolvedPlacement] =
     createSignal<OverlayPlacement>(options.placement());
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (!options.open()) {
       setResolvedPlacement(options.placement());
       setStyle({ visibility: "hidden" });
@@ -223,12 +223,12 @@ export const createOverlayPosition = (
     if (trigger) resizeObserver?.observe(trigger);
     resizeObserver?.observe(overlay);
 
-    onCleanup(() => {
+    return () => {
       cancelAnimationFrame(frame);
       window.removeEventListener("resize", schedule);
       window.removeEventListener("scroll", schedule, true);
       resizeObserver?.disconnect();
-    });
+    };
   });
 
   return {

src/components/calendar/Calendar.layout.tsx

@@ -1,6 +1,6 @@
 import "./Calendar.css";
 import type { JSX } from "@solidjs/web";
-import {For, Show, createEffect, createMemo, createUniqueId, omit} from "solid-js";
+import {For, Show, createMemo, createTrackedEffect, createUniqueId, omit} from "solid-js";
 import { twMerge } from "../../lib/twMerge";
 
 import {
@@ -143,7 +143,7 @@ const Calendar: Layout<typeof componentRecipe, CalendarProps> = () => {
     isDateDisabled,
   });
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     navigation.syncFocusedDate(focusReferenceDate());
   });
 

src/components/checkbox/Checkbox.layout.tsx

@@ -1,6 +1,6 @@
 import "./Checkbox.css";
 import type { JSX } from "@solidjs/web";
-import {Show, createEffect, createSignal, omit, useContext, type Component} from "solid-js";
+import {Show, createSignal, createTrackedEffect, omit, useContext, type Component} from "solid-js";
 import { twMerge } from "../../lib/twMerge";
 import { CheckboxGroupContext } from "../checkbox-group/context";
 import type { UIBaseProps, State, Issue } from "../vocabulary";
@@ -78,7 +78,7 @@ const Checkbox: Layout<typeof componentRecipe, CheckboxProps> = () => {
   const name = () => props.name ?? group?.name();
   const hasContent = () => props.children != null || props.description != null;
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (!inputRef) return;
     inputRef.indeterminate = isIndeterminate();
   });

src/components/color-field/ColorField.layout.tsx

@@ -1,6 +1,6 @@
 import "./ColorField.css";
 import type { JSX } from "@solidjs/web";
-import {createEffect, createSignal, omit, type Component} from "solid-js";
+import {createSignal, createTrackedEffect, omit, type Component} from "solid-js";
 import { twMerge } from "../../lib/twMerge";
 import { formatColor, parseColor, type ColorFormat } from "../color-wheel-flower/ColorUtils";
 import type { UIBaseProps, State } from "../vocabulary";
@@ -75,7 +75,7 @@ const ColorField: Layout<typeof componentRecipe, ColorFieldProps> = () => {
   const [isInvalid, setIsInvalid] = createSignal(false);
   const [isFocused, setIsFocused] = createSignal(false);
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const nextValue = props.value;
     const nextFormat = format();
 

src/components/color-picker/ColorPicker.layout.tsx

@@ -1,6 +1,6 @@
 import "./ColorPicker.css";
 import type { JSX } from "@solidjs/web";
-import {createContext, createEffect, createMemo, createSignal, omit, useContext, type Accessor, type Component} from "solid-js";
+import {createContext, createMemo, createSignal, createTrackedEffect, omit, useContext, type Accessor, type Component} from "solid-js";
 import { twMerge } from "../../lib/twMerge";
 import ColorArea, { type ColorAreaProps, type ColorAreaValue } from "../color-area";
 import ColorField, { type ColorFieldProps } from "../color-field";
@@ -315,7 +315,7 @@ const ColorPickerRoot: Layout<typeof componentRecipe, ColorPickerProps> = () =>
 
   const isControlled = () => props.value !== undefined;
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (!isControlled()) return;
 
     const next = toColorState(props.value);

src/components/color-slider/ColorSlider.layout.tsx

@@ -1,6 +1,6 @@
 import "./ColorSlider.css";
 import type { JSX } from "@solidjs/web";
-import {createEffect, createMemo, createSignal, omit, type Component} from "solid-js";
+import {createMemo, createSignal, createTrackedEffect, omit, type Component} from "solid-js";
 import { twMerge } from "../../lib/twMerge";
 import type { UIBaseProps, State } from "../vocabulary";
 import { CLASSES } from "./ColorSlider.recipe";
@@ -73,7 +73,7 @@ const ColorSlider: Layout<typeof componentRecipe, ColorSliderProps> = () => {
 
   const isControlled = () => props.value !== undefined;
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const nextType = sliderType();
     const nextValue = props.value;
 

src/components/color-wheel-flower/ColorWheelFlower.layout.tsx

@@ -1,6 +1,6 @@
 import "./ColorWheelFlower.css";
 import type { JSX } from "@solidjs/web";
-import {For, createEffect, createMemo, createSignal, onCleanup, omit} from "solid-js";
+import {For, createMemo, createSignal, createTrackedEffect, onCleanup, omit} from "solid-js";
 import { clsx } from "clsx";
 import { twMerge } from "../../lib/twMerge";
 import ColorSwatch from "../color-swatch";
@@ -391,7 +391,7 @@ const ColorWheelFlower: Layout<typeof componentRecipe, ColorWheelFlowerProps> =
     });
   };
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const selected = selectedIndex();
     const current = context.color();
 
@@ -467,7 +467,7 @@ const ColorWheelFlower: Layout<typeof componentRecipe, ColorWheelFlowerProps> =
     return `0 0 10px rgba(255,255,255,0.16), 0 0 20px ${toRgba(color, 0.35)}`;
   });
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     // Bound to a const so the guard narrows across the closure boundary.
     const node = outerRingRef;
     if (!node) return;
@@ -672,7 +672,7 @@ const ColorWheelFlower: Layout<typeof componentRecipe, ColorWheelFlowerProps> =
               };
             };
 
-            createEffect(() => {
+            createTrackedEffect(() => {
               if (!motionRef) return;
 
               const target = dotTarget();

src/components/combo-box/ComboBox.layout.tsx

@@ -1,6 +1,6 @@
 import "./ComboBox.css";
 import type { JSX } from "@solidjs/web";
-import {For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onSettled, omit, useContext, type Accessor, type Component, type ParentComponent} from "solid-js";
+import {For, Show, createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, onSettled, omit, useContext, type Accessor, type Component, type ParentComponent} from "solid-js";
 import { twMerge } from "../../lib/twMerge";
 
 import type { UIBaseProps, State, Issue } from "../vocabulary";
@@ -402,7 +402,7 @@ const ComboBoxRoot: Layout<typeof componentRecipe, ComboBoxRootProps> = () => {
 
   const getOptionId = (key: string) => `${listBoxId}-${toOptionKey(key, 0)}`;
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (props.inputValue !== undefined) return;
 
     const selected = selectedItem();
@@ -413,7 +413,7 @@ const ComboBoxRoot: Layout<typeof componentRecipe, ComboBoxRootProps> = () => {
     }
   });
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (!isOpen()) return;
 
     const enabledItems = getEnabledItems();
@@ -440,9 +440,9 @@ const ComboBoxRoot: Layout<typeof componentRecipe, ComboBoxRootProps> = () => {
 
     document.addEventListener("pointerdown", handlePointerDown);
 
-    onCleanup(() => {
+    return () => {
       document.removeEventListener("pointerdown", handlePointerDown);
-    });
+    };
   });
 
   const hiddenValue = createMemo(() => {

src/components/composer/Composer.layout.tsx

@@ -1,6 +1,6 @@
 import "./Composer.css";
 import type { JSX } from "@solidjs/web";
-import {For, Show, createEffect, createSignal, onSettled} from "solid-js";
+import {For, Show, createSignal, createTrackedEffect, onSettled} from "solid-js";
 import type { Layout } from "../../lib/layouts";
 import type {
   ChangeReason,
@@ -105,7 +105,7 @@ export const ComposerLayout: Layout<typeof composer, ComposerProps> = () => {
 
   // A controlled value can change without an input event — a draft restored on
   // returning to a tab. Measure that the same way as text typed into the field.
-  createEffect(() => {
+  createTrackedEffect(() => {
     value();
     measure();
   });

src/components/date-range-picker/DateRangePicker.layout.tsx

@@ -1,6 +1,6 @@
 import "./DateRangePicker.css";
 import type { JSX } from "@solidjs/web";
-import {Show, createEffect, createMemo, createUniqueId, omit} from "solid-js";
+import {Show, createMemo, createTrackedEffect, createUniqueId, omit} from "solid-js";
 import { twMerge } from "../../lib/twMerge";
 
 import {
@@ -86,7 +86,7 @@ const DateRangePicker: Layout<typeof componentRecipe, DateRangePickerProps> = ()
     isDisabled,
   });
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (openState.isOpen()) return;
     rangeSelection.clearPendingSelection();
   });

src/components/dialog/Dialog.layout.tsx

@@ -1,5 +1,5 @@
 import "./Dialog.css";
-import {Show, createContext, createEffect, createSignal, createUniqueId, onCleanup, omit, useContext, type Component, type ParentComponent} from "solid-js";
+import {Show, createContext, createSignal, createTrackedEffect, createUniqueId, onCleanup, omit, useContext, type Component, type ParentComponent} from "solid-js";
 import { Portal, type JSX} from "@solidjs/web";
 import { twMerge } from "../../lib/twMerge";
 
@@ -261,7 +261,7 @@ const DialogRoot: Layout<typeof componentRecipe, DialogRootProps> = () => {
 
   let exitTimer: ReturnType<typeof setTimeout> | undefined;
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const open = isOpen();
     const state = animState();
 
@@ -293,7 +293,7 @@ const DialogRoot: Layout<typeof componentRecipe, DialogRootProps> = () => {
   });
 
   let hasScrollLock = false;
-  createEffect(() => {
+  createTrackedEffect(() => {
     const shouldLock = isVisibleState(animState());
     if (shouldLock && !hasScrollLock) {
       lockBodyScroll();
@@ -312,7 +312,7 @@ const DialogRoot: Layout<typeof componentRecipe, DialogRootProps> = () => {
   });
 
   let restoreFocusTarget: HTMLElement | null = null;
-  createEffect(() => {
+  createTrackedEffect(() => {
     const state = animState();
     const content = contentRef();
     if (!isVisibleState(state) || !content) return;
@@ -346,12 +346,12 @@ const DialogRoot: Layout<typeof componentRecipe, DialogRootProps> = () => {
 
     document.addEventListener("keydown", handleDocumentKeyDown);
 
-    onCleanup(() => {
+    return () => {
       document.removeEventListener("keydown", handleDocumentKeyDown);
-    });
+    };
   });
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (animState() !== "closed") return;
     if (!restoreFocusTarget) return;
 
@@ -612,15 +612,15 @@ const DialogHeading: Layout<typeof componentRecipe, DialogHeadingProps> = () =>
   // `aria-labelledby`, so a `false` falls through to the generated id.
   const headingId = () => (typeof props.id === "string" ? props.id : undefined) ?? `dialog-heading-${uniqueId}`;
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const id = headingId();
     context.setLabelledBy(id);
 
-    onCleanup(() => {
+    return () => {
       if (context.labelledBy() === id) {
         context.setLabelledBy(undefined);
       }
-    });
+    };
   });
 
   return (
@@ -660,15 +660,15 @@ const DialogBody: Layout<typeof componentRecipe, DialogBodyProps> = () => {
   const uniqueId = createUniqueId();
   const bodyId = () => (typeof props.id === "string" ? props.id : undefined) ?? `dialog-body-${uniqueId}`;
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const id = bodyId();
     context.setDescribedBy(id);
 
-    onCleanup(() => {
+    return () => {
       if (context.describedBy() === id) {
         context.setDescribedBy(undefined);
       }
-    });
+    };
   });
 
   return (