www/src/components/CodeEditorWithPreview.tsx (2)

95-95: Add an explicit generic to useSessionStorageState for proper type inference.

Without an explicit generic, useSessionStorageState(encodeURIComponent(stackBlitzTitle), null) will infer the state type as null from the initial value, making controlsState typed as null instead of T | null. This breaks type safety when passing controlsState to the Controls component (which expects sessionStoreValues: ControlsType | null at line 201) and to Component as componentProps (at line 214).

Also consider prefixing the storage key to avoid collisions with other examples that may share the same stackBlitzTitle:

Suggested change

-  const [controlsState, setControlsState] = useSessionStorageState(encodeURIComponent(stackBlitzTitle), null);
+  const [controlsState, setControlsState] = useSessionStorageState<T | null>(
+    `controls:${encodeURIComponent(stackBlitzTitle)}`,
+    null,
+  );

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@www/src/components/CodeEditorWithPreview.tsx` at line 95, The state call
infers null because the initial value is null; update the useSessionStorageState
invocation to include an explicit generic (e.g., ControlsType | null) so
controlsState is correctly typed, and adjust the storage key by prefixing
encodeURIComponent(stackBlitzTitle) (e.g., "controls:" + ...) to avoid
collisions; update references to useSessionStorageState, controlsState and
setControlsState accordingly so Controls (sessionStoreValues) and Component
(componentProps) receive the correctly typed value.

---

7-7: Use the public entry point for useSessionStorageState from @recharts/devtools.

The file imports useSessionStorageState from @recharts/devtools/dist/hooks/useSessionStorageState (line 7), but this same file imports RechartsDevtoolsContext from the main entry point @recharts/devtools (line 5). Deep dist imports are inconsistent with the pattern used everywhere else in the codebase—nearly all other files import from the package root. The deep path is also fragile, as it depends on the package's internal build structure remaining stable.

Check whether useSessionStorageState is exported from the main entry point of @recharts/devtools. If it is, update the import to use it:

Proposed change

-import { useSessionStorageState } from '@recharts/devtools/dist/hooks/useSessionStorageState';
+import { useSessionStorageState } from '@recharts/devtools';

If the hook is not yet exported from the main entry, it should be added there (or the import should be documented in @recharts/devtools as a supported subpath export).

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@www/src/components/CodeEditorWithPreview.tsx` at line 7, The import currently
pulls useSessionStorageState from the package internals
(`@recharts/devtools/dist/hooks/useSessionStorageState`) which is fragile and
inconsistent with the existing RechartsDevtoolsContext import from
`@recharts/devtools`; change the import to import useSessionStorageState from the
package root (i.e., from '@recharts/devtools') if that hook is exported there,
updating the import statement in CodeEditorWithPreview.tsx to use the public
entry point; if the hook is not exported from the main entry, add it to the
package's public exports (or request it be exported) so the component can import
useSessionStorageState from '@recharts/devtools' instead of the deep dist path.