@c-rex/components 0.1.31 → 0.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "files": [
     "src"
   ],

package/src/article/article-action-bar.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: article-action-bar
+
+- Component: packages/components/src/article/article-action-bar.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=yes, window/document=no, effects=yes, fetch/call=no
+
+## Possible re-render causes
+- Store subscriptions can re-render this component whenever the selected slice changes.
+- Effects that update state can add extra renders on mount and dependency changes.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/article/article-content.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: article-content
+
+- Component: packages/components/src/article/article-content.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=yes
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- Async flows can hit race conditions during fast param/route changes.
+
+## Recommended improvements
+- Consider cancellation guards (isMounted or AbortController) and standardized error handling.
+

package/src/article/article-content.tsx

@@ -43,8 +43,8 @@ export const ArticleContent: FC<Props> = async ({ renditions }) => {
 
     return (
         <>
-            {metaTags.map((tag, index) => (
-                <meta key={index} name={tag.name} content={tag.content} />
+            {metaTags.map((tag) => (
+                <meta key={`${tag.name}-${tag.content}`} name={tag.name} content={tag.content} />
             ))}
             <div className="pr-4 relative">
                 <RenderArticle htmlContent={articleHtml} contentLang="" />
@@ -52,4 +52,4 @@ export const ArticleContent: FC<Props> = async ({ renditions }) => {
             <ArticleActionBar />
         </>
     )
-}
+}

package/src/autocomplete.analysis.md

@@ -0,0 +1,17 @@
+# Analysis: autocomplete
+
+- Component: packages/components/src/autocomplete.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=yes, effects=yes, fetch/call=no
+
+## Possible re-render causes
+- Effects that update state can add extra renders on mount and dependency changes.
+
+## Possible bugs/risks
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+- The component renders list-heavy UI; key stability and memoization strongly affect perceived performance.
+
+## Recommended improvements
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+- Review key strategy and extract memoized subcomponents for large-list rendering.
+

package/src/autocomplete.tsx

@@ -135,9 +135,9 @@ export const AutoComplete = ({
                         <>
                             {suggestions.length > 0 ? (
                                 <>
-                                    {suggestions.map((option, index) => (
+                                    {suggestions.map((option) => (
                                         <li
-                                            key={index}
+                                            key={option}
                                             className="px-4 py-2 hover:bg-accent cursor-pointer text-sm"
                                             onClick={() => handleSelect(`"${option}"`)}
                                         >

package/src/breadcrumb.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: breadcrumb
+
+- Component: packages/components/src/breadcrumb.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- The component renders list-heavy UI; key stability and memoization strongly affect perceived performance.
+
+## Recommended improvements
+- Review key strategy and extract memoized subcomponents for large-list rendering.
+

package/src/breadcrumb.tsx

@@ -53,9 +53,9 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ tree, lang }) => {
                             </DrawerHeader>
 
                             <div className="grid gap-1 px-4">
-                                {items.slice(0, -1).map((item, index) => (
+                                {items.slice(0, -1).map((item) => (
                                     <Link
-                                        key={index}
+                                        key={item.linkId}
                                         href={`/topics/${item.linkId}/content`}
                                         className="py-1 text-sm"
                                     >
@@ -103,7 +103,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ tree, lang }) => {
 
                             return (
                                 <Fragment key={`${item.label}-fragment`}>
-                                    <BreadcrumbItem key={`${item.label}-item`} className={index.toString()}>
+                                    <BreadcrumbItem key={`${item.label}-item`}>
                                         {renderLink(!isLast, item)}
                                     </BreadcrumbItem>
                                     {!isLast && (
@@ -121,4 +121,4 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ tree, lang }) => {
             </BreadcrumbList>
         </BreadcrumbComponent>
     );
-};
+};

package/src/carousel/carousel.analysis.md

@@ -0,0 +1,17 @@
+# Analysis: carousel
+
+- Component: packages/components/src/carousel/carousel.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=yes, effects=yes, fetch/call=no
+
+## Possible re-render causes
+- Effects that update state can add extra renders on mount and dependency changes.
+
+## Possible bugs/risks
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+- The component renders list-heavy UI; key stability and memoization strongly affect perceived performance.
+
+## Recommended improvements
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+- Review key strategy and extract memoized subcomponents for large-list rendering.
+

package/src/carousel/carousel.tsx

@@ -283,7 +283,7 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
         return (
             <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
                 {Array.from({ length: totalOfIndicators }).map((_, index) => (
-                    <li key={index}>
+                    <li key={`indicator-${index}`}>
                         <Button
                             className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${index === current ? "bg-gray-800" : "bg-gray-300"}`}
                             size="xs"
@@ -349,4 +349,4 @@ const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolea
             </Card>
         </div>
     );
-};
+};

package/src/check-article-lang.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: check-article-lang
+
+- Component: packages/components/src/check-article-lang.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=yes, effects=yes, fetch/call=no
+
+## Possible re-render causes
+- Effects that update state can add extra renders on mount and dependency changes.
+
+## Possible bugs/risks
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+
+## Recommended improvements
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+

package/src/directoryNodes/tree-of-content.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: tree-of-content
+
+- Component: packages/components/src/directoryNodes/tree-of-content.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/documents/result-list.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: result-list
+
+- Component: packages/components/src/documents/result-list.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/documents/result-list.tsx

@@ -56,7 +56,7 @@ export const DocumentsResultList: FC<Props> = ({
 
                 return (
                     <div
-                        key={index}
+                        key={item.shortId}
                         className={cn(
                             "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded",
                             index == items.length - 1 ? "" : "mb-4",
@@ -124,4 +124,4 @@ export const DocumentsResultList: FC<Props> = ({
             })}
         </div>
     );
-};
+};

package/src/favorites/bookmark-button.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: bookmark-button
+
+- Component: packages/components/src/favorites/bookmark-button.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=yes, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- Store updates for the selected document topics will re-render this component (expected and desired for live badge updates).
+
+## Possible bugs/risks
+- Dynamic Tailwind class name interpolation (`text-${item.color}`) may be purged depending on Tailwind safelist config.
+
+## Recommended improvements
+- Keep the direct Zustand selector approach (`documents[shortId]?.topics`) to preserve reactive UI behavior.
+- If marker colors are dynamic, safelist all expected `text-*` classes or map colors to explicit class names.

package/src/favorites/bookmark-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ComponentProps, FC, ReactNode, useEffect, useState } from "react";
-import { Button, ButtonProps } from "@c-rex/ui/button";
+import { ComponentProps, FC, useState } from "react";
+import { Button } from "@c-rex/ui/button";
 import { Trash } from "lucide-react";
 import { cn } from "@c-rex/utils";
 import Link from "next/link";
@@ -20,17 +20,18 @@ type BookmarkProps = {
     triggerVariant?: ComponentProps<typeof Button>["variant"];
 }
 
+const EMPTY_TOPICS: Array<{ id: string; label: string; color: string }> = [];
+
 export const BookmarkButton: FC<BookmarkProps> = ({
     shortId,
     triggerVariant = "outline"
 }) => {
-    const [markersList, setMarkersList] = useState<Array<{ id: string; label: string; color: string }>>([]);
+    const [open, setOpen] = useState(false);
+    const document = useFavoritesStore((state) => state.documents[shortId]);
+    const markersList = document?.topics ?? EMPTY_TOPICS;
 
-    useEffect(() => {
-        setMarkersList(useFavoritesStore.getState().documents[shortId]?.topics || []);
-    }, [shortId]);
     return (
-        <Dialog>
+        <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
                 <Button variant={triggerVariant} size="icon" className="relative">
                     <FaRegBookmark className="text-primary" />
@@ -43,37 +44,38 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                         </span>
                     )}
                 </Button>
-
             </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Bookmarks</DialogTitle>
-                    <DialogDescription>
-                        Manage your bookmarks here
-                    </DialogDescription>
-                </DialogHeader>
-                <Table>
-                    <TableBody>
-                        {markersList.map((item) => (
-                            <TableRow key={item.id} className="min-h-12">
-                                <TableCell>
-                                    <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
-                                </TableCell>
-                                <TableCell>
-                                    <Link href={`${window.location.origin}/topics/${item.id}`}>
-                                        {item.label}
-                                    </Link>
-                                </TableCell>
-                                <TableCell>
-                                    <Button variant="destructive" size="icon">
-                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
-                                    </Button>
-                                </TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </DialogContent>
+            {open && (
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Bookmarks</DialogTitle>
+                        <DialogDescription>
+                            Manage your bookmarks here
+                        </DialogDescription>
+                    </DialogHeader>
+                    <Table>
+                        <TableBody>
+                            {markersList.map((item) => (
+                                <TableRow key={item.id} className="min-h-12">
+                                    <TableCell>
+                                        <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
+                                    </TableCell>
+                                    <TableCell>
+                                        <Link href={`/topics/${item.id}`}>
+                                            {item.label}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        <Button variant="destructive" size="icon">
+                                            <Trash className="w-5 hover:text-red-600 cursor-pointer" />
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </DialogContent>
+            )}
         </Dialog>
     )
 }

package/src/favorites/favorite-button.analysis.md

@@ -0,0 +1,17 @@
+# Analysis: favorite-button
+
+- Component: packages/components/src/favorites/favorite-button.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=yes, window/document=no, effects=yes, fetch/call=yes
+
+## Possible re-render causes
+- Store subscriptions can re-render this component whenever the selected slice changes.
+- Effects that update state can add extra renders on mount and dependency changes.
+
+## Possible bugs/risks
+- Async flows can hit race conditions during fast param/route changes.
+- Residual risk: fetch errors are silently ignored (except abort), which can hide API issues.
+
+## Recommended improvements
+- Keep cancellation guards (AbortController + unmount guard) in place as currently implemented.
+- Consider surfacing non-abort fetch failures through logging or telemetry.

package/src/favorites/favorite-button.tsx

@@ -19,10 +19,32 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
     const [documentData, setDocumentData] = useState<{ id: string, label: string }>({ id, label });
 
     useEffect(() => {
-        if (type === RESULT_TYPES.TOPIC) {
-            getTopicDocumentData(id);
+        if (type !== RESULT_TYPES.TOPIC) {
+            setDocumentData({ id, label });
+            return;
         }
-    }, []);
+
+        let isCancelled = false;
+        const controller = new AbortController();
+
+        const loadTopicDocumentData = async () => {
+            try {
+                const data = await getTopicDocumentData(id, controller.signal);
+                if (!isCancelled) {
+                    setDocumentData(data);
+                }
+            } catch (error) {
+                if ((error as Error).name === "AbortError") return;
+            }
+        };
+
+        loadTopicDocumentData();
+
+        return () => {
+            isCancelled = true;
+            controller.abort();
+        };
+    }, [id, label, type]);
 
     const addFavorite = async (id: string) => {
         if (type === RESULT_TYPES.DOCUMENT) {
@@ -45,17 +67,18 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
         removeFavoriteTopic(documentData.id, id);
     }
 
-    const getTopicDocumentData = async (topicId: string): Promise<void> => {
+    const getTopicDocumentData = async (topicId: string, signal?: AbortSignal): Promise<{ id: string, label: string }> => {
 
         const response = await fetch(`/api/information-units/document-by-topic-id?shortId=${topicId}`, {
-            method: "GET"
+            method: "GET",
+            signal,
         });
 
         if (!response.ok) throw new Error("Failed to fetch document by topic id")
 
-        const { documentId, label } = await response.json();
+        const { documentId, label: documentLabel } = await response.json();
 
-        setDocumentData({ id: documentId, label });
+        return { id: documentId, label: documentLabel };
     }
 
     if (isFavorite) {

package/src/generated/create-client-request.tsx

@@ -7,7 +7,7 @@
 
 "use client";
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { replacePathParams, call } from "@c-rex/utils"
 
 type SerializedError = {
@@ -40,11 +40,21 @@ export function createClientDataRequest<T, PathParams, QueryParams>(
             isLoading: true,
         });
 
+        const pathParamsKey = useMemo(
+            () => JSON.stringify(pathParams ?? {}),
+            [pathParams]
+        );
+        const queryParamsKey = useMemo(
+            () => JSON.stringify(queryParams ?? {}),
+            [queryParams]
+        );
+
         const fetchData = useCallback(async () => {
-            setState({
-                ...state,
+            setState((prev) => ({
+                ...prev,
                 error: null,
-            });
+                isLoading: true,
+            }));
 
             try {
                 const url = replacePathParams(endpointTemplate, pathParams as Record<string, string>);
@@ -66,8 +76,7 @@ export function createClientDataRequest<T, PathParams, QueryParams>(
                     isLoading: false,
                 });
             }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [endpointTemplate, pathParams]);
+        }, [endpointTemplate, pathParamsKey, queryParamsKey]);
 
 
         // Initial fetch

package/src/icons/file-icon.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: file-icon
+
+- Component: packages/components/src/icons/file-icon.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/icons/flag-icon.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: flag-icon
+
+- Component: packages/components/src/icons/flag-icon.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/icons/loading.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: loading
+
+- Component: packages/components/src/icons/loading.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/info/info-table.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: info-table
+
+- Component: packages/components/src/info/info-table.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- The component renders list-heavy UI; key stability and memoization strongly affect perceived performance.
+
+## Recommended improvements
+- Review key strategy and extract memoized subcomponents for large-list rendering.
+

package/src/info/info-table.tsx

@@ -56,8 +56,8 @@ export const InfoTable: FC<Props> = async ({
             <CardContent className="space-y-3 !p-0">
                 <Table>
                     <TableBody>
-                        {processDataToLabelValuePairs(data).map((item, index) => (
-                            <TableRow key={index} className="min-h-12">
+                        {processDataToLabelValuePairs(data).map((item) => (
+                            <TableRow key={item.label} className="min-h-12">
                                 <TableCell className="font-medium w-28 pl-4">
                                     <h4 className="text-sm font-medium capitalize">{t(item.label)}</h4>
                                 </TableCell>
@@ -108,24 +108,24 @@ export const InfoTable: FC<Props> = async ({
                                 </TableCell>
                                 <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
 
-                                    {Object.keys(files).map((item, index) => {
-                                        if (!files[item]) return null
+                                    {Object.keys(files).map((fileKey) => {
+                                        if (!files[fileKey]) return null
 
                                         return (
-                                            <DropdownMenu key={index}>
+                                            <DropdownMenu key={fileKey}>
                                                 <DropdownMenuTrigger className="mr-2" asChild >
                                                     <Button variant="outline" size="icon" >
-                                                        <FileIcon extension={item} />
+                                                        <FileIcon extension={fileKey} />
                                                     </Button>
                                                 </DropdownMenuTrigger>
                                                 <DropdownMenuContent>
                                                     <DropdownMenuItem>
-                                                        <a href={files[item].view} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        <a href={files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
                                                             <Eye className="mr-2" /> Open
                                                         </a>
                                                     </DropdownMenuItem>
                                                     <DropdownMenuItem>
-                                                        <a href={files[item].download} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        <a href={files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
                                                             <CloudDownload className="mr-2" /> Download
                                                         </a>
                                                     </DropdownMenuItem>

package/src/info/shared.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: shared
+
+- Component: packages/components/src/info/shared.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/navbar/language-switcher/content-language-switch.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: content-language-switch
+
+- Component: packages/components/src/navbar/language-switcher/content-language-switch.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=yes, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+
+## Recommended improvements
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+

package/src/navbar/language-switcher/shared.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: shared
+
+- Component: packages/components/src/navbar/language-switcher/shared.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/navbar/language-switcher/ui-language-switch.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: ui-language-switch
+
+- Component: packages/components/src/navbar/language-switcher/ui-language-switch.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=yes, window/document=yes, effects=no, fetch/call=no
+
+## Possible re-render causes
+- Store subscriptions can re-render this component whenever the selected slice changes.
+
+## Possible bugs/risks
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+
+## Recommended improvements
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+