From fe0088655684b955cf34dddb4fd0a019874047f1 Mon Sep 17 00:00:00 2001
From: Eliav Louski <louski.a@gmail.com>
Date: Fri, 19 Sep 2025 20:37:52 +0300
Subject: [PATCH 1/8] polish

---
 demo/src/App.tsx                          |  2 +
 demo/src/examples/ReverseOrderExample.tsx | 77 +++++++++++++++++++++++
 pnpm-workspace.yaml                       |  1 +
 src/components/OverflowList.tsx           |  7 +--
 4 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 demo/src/examples/ReverseOrderExample.tsx

diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 285641b..fdc40ec 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -8,6 +8,7 @@ import { RadixVirtualizationExample } from "./examples/RadixVirtualizationExampl
 import { FlushImmediatelyExample } from "./examples/FlushImmediatelyExample";
 import { OneItemWiderExample } from "./examples/OneItemWiderExample";
 import { MaxRowsOverflowExample } from "./examples/MaxRowsOverflowExample";
+import { ReverseOrderExample } from "./examples/ReverseOrderExample";
 import { Github } from "lucide-react";
 import "./App.css";
 
@@ -49,6 +50,7 @@ function App() {
           <FlushImmediatelyExample />
           <OneItemWiderExample />
           <MaxRowsOverflowExample />
+          <ReverseOrderExample />
         </main>
 
         <footer>
diff --git a/demo/src/examples/ReverseOrderExample.tsx b/demo/src/examples/ReverseOrderExample.tsx
new file mode 100644
index 0000000..8f7371b
--- /dev/null
+++ b/demo/src/examples/ReverseOrderExample.tsx
@@ -0,0 +1,77 @@
+import { OverflowList } from "react-responsive-overflow-list";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+const tags = ["React", "TypeScript", "CSS", "JavaScript", "HTML", "Node.js", "Express", "MongoDB", "PostgreSQL", "Redis"];
+
+export function ReverseOrderExample() {
+  return (
+    <section className="demo">
+      <h2 id="reverse-order-example">Reverse Order Example</h2>
+      <p>Compare normal overflow (shrinks from end) vs reverse overflow (shrinks from start)</p>
+      <div className="code-preview">
+        <SyntaxHighlighter language="tsx" style={tomorrow}>
+          {`// Normal overflow - shrinks from end
+<OverflowList
+  items={tags}
+  renderItem={(item, index) => (
+    <span key={index} className="tag-item">
+      {item}
+    </span>
+  )}
+  style={{ gap: "8px" }}
+/>
+
+// Reverse overflow - shrinks from start
+<OverflowList
+  items={[...tags].reverse()}
+  renderItem={(item, index) => (
+    <span key={index} className="tag-item">
+      {item}
+    </span>
+  )}
+  style={{ 
+    gap: "8px",
+    flexDirection: "row-reverse",
+    justifyContent: "flex-end"
+  }}
+/>`}
+        </SyntaxHighlighter>
+      </div>
+      
+      <div className="demo-section">
+        <h3>Normal Overflow (shrinks from end)</h3>
+        <div className="demo-container">
+          <OverflowList
+            items={tags}
+            renderItem={(item, index) => (
+              <span key={index} className="tag-item">
+                {item}
+              </span>
+            )}
+            style={{ gap: "8px" }}
+          />
+        </div>
+      </div>
+
+      <div className="demo-section">
+        <h3>Reverse Overflow (shrinks from start)</h3>
+        <div className="demo-container">
+          <OverflowList
+            items={[...tags].reverse()}
+            renderItem={(item, index) => (
+              <span key={index} className="tag-item">
+                {item}
+              </span>
+            )}
+            style={{ 
+              gap: "8px",
+              flexDirection: "row-reverse",
+              justifyContent: "flex-end"
+            }}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 303cc49..b2d4fd0 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,3 +4,4 @@ packages:
 
 onlyBuiltDependencies:
   - esbuild
+  - puppeteer
diff --git a/src/components/OverflowList.tsx b/src/components/OverflowList.tsx
index e4676cc..0c4c616 100644
--- a/src/components/OverflowList.tsx
+++ b/src/components/OverflowList.tsx
@@ -53,7 +53,7 @@ export interface OverflowElementProps<T> {
  * Responsive container that shows as many items as can fit within maxRows,
  * hiding overflow items behind a configurable overflow renderer.
  * Automatically recalculates visible items on resize.
- *
+ * 
  * Technical details:
  * Uses a three-phases approach:
  * 1. "measuring" renders all items to calculate positions,
@@ -93,7 +93,6 @@ export const OverflowList = React.memo(
     const finalRenderOverflow = renderOverflow?.(items.slice(finalVisibleCount) as T[]) ?? (
       <DefaultOverflowElement
         items={items.slice(finalVisibleCount) as T[]}
-        // renderItem={renderOverflowItem ?? renderItem}
         {...renderOverflowProps}
       />
     );
@@ -114,7 +113,7 @@ export const OverflowList = React.memo(
     useLayoutEffect(() => {
       // in measurement, evaluate results
       if (phase === "measuring") {
-        updateVisibleItems();
+        countVisibleItems();
         setPhase("measuring-overflow-indicator");
       }
     }, [phase]);
@@ -140,7 +139,7 @@ export const OverflowList = React.memo(
 
     // Unified method that handles both growing and shrinking
     // this function is called in measuring phase, and it is used to measure how many items can fit in the container
-    const updateVisibleItems = () => {
+    const countVisibleItems = () => {
       const rowData = getRowPositionsData(containerRef, overflowRef);
       if (!rowData) return;
 

From caf1ef16e6ee0f91e53edeb15723afb76c6c8228 Mon Sep 17 00:00:00 2001
From: Eliav Louski <louski.a@gmail.com>
Date: Mon, 22 Sep 2025 00:49:34 +0300
Subject: [PATCH 2/8] Update dependencies, enhance demo configurations, and add
 SSR support

- Added `express` and `vite-plugin-ssr` to demo dependencies.
- Updated `tsconfig.json` and `tsdown.config.ts` to include source maps.
- Enhanced demo scripts for SSR and SPA modes.
- Created new pages and renderer files for SSR functionality.
- Refactored `CollapsibleCodePreview` to support SSR-safe copy functionality.
- Removed unused `MaxRowsOverflowExample` component.
- Improved `OverflowList` component with `useIsoLayoutEffect` for better performance.
---
 demo/index.html                               |   3 +-
 demo/package.json                             |  16 +-
 demo/pages/index.page.tsx                     |   6 +
 demo/renderer/_default.page.client.tsx        |  18 +
 demo/renderer/_default.page.server.tsx        |  41 ++
 demo/renderer/vite-env.d.ts                   |   1 +
 demo/src/App.tsx                              |   2 -
 .../src/components/CollapsibleCodePreview.tsx |  28 +-
 demo/src/examples/CustomOverflowExample.tsx   |   5 +-
 demo/src/examples/MaxRowsOverflowExample.tsx  |  38 --
 demo/vite.config.ts                           |  21 +-
 pnpm-lock.yaml                                | 418 +++++++++++++++++-
 src/components/OverflowList.tsx               |  30 +-
 src/hooks/index.ts                            |   1 +
 src/hooks/useIsoLayoutEffect.ts               |   3 +
 tsconfig.json                                 |   3 +-
 tsdown.config.ts                              |   1 +
 17 files changed, 547 insertions(+), 88 deletions(-)
 create mode 100644 demo/pages/index.page.tsx
 create mode 100644 demo/renderer/_default.page.client.tsx
 create mode 100644 demo/renderer/_default.page.server.tsx
 create mode 100644 demo/renderer/vite-env.d.ts
 delete mode 100644 demo/src/examples/MaxRowsOverflowExample.tsx
 create mode 100644 src/hooks/useIsoLayoutEffect.ts

diff --git a/demo/index.html b/demo/index.html
index 71b47e6..a8d89a2 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta name="description" content="Responsive React component that shows only items that fit and groups the rest into a customizable overflow element. Recalculates on resize." />
+    <title>React Responsive Overflow List - Demo</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/demo/package.json b/demo/package.json
index 84ce5b9..378fb9a 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -4,24 +4,30 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "pnpm dev:spa",
     "dev:local": "pnpm install --link-workspace-packages && pnpm dev",
-    "dev:published": "pnpm install && pnpm dev",
+    "dev:published": "pnpm install --no-link-workspace-packages && pnpm dev",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "dev:ssr": "VITE_APP_MODE=ssr vite",
+    "dev:spa": "VITE_APP_MODE=spa vite",
+    "build:ssr": "VITE_APP_MODE=ssr vite build && vite-plugin-ssr prerender",
+    "build:spa": "VITE_APP_MODE=spa vite build"
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/themes": "^3.2.1",
     "@tanstack/react-virtual": "^3.13.12",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "express": "^4.18.2",
     "lucide-react": "^0.544.0",
     "react": "^19.1.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^19.1.1",
-    "react-responsive-overflow-list": "latest",
-    "react-syntax-highlighter": "^15.6.6"
+    "react-responsive-overflow-list": "lastest",
+    "react-syntax-highlighter": "^15.6.6",
+    "vite-plugin-ssr": "^0.4.142"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
diff --git a/demo/pages/index.page.tsx b/demo/pages/index.page.tsx
new file mode 100644
index 0000000..2392e11
--- /dev/null
+++ b/demo/pages/index.page.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import App from "../src/App";
+
+export function Page() {
+  return <App />;
+}
diff --git a/demo/renderer/_default.page.client.tsx b/demo/renderer/_default.page.client.tsx
new file mode 100644
index 0000000..8f3a42b
--- /dev/null
+++ b/demo/renderer/_default.page.client.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { createRoot, hydrateRoot } from 'react-dom/client'
+
+export const clientRouting = true
+export const hydrationCanBeAborted = true
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function render(pageContext: any) {
+  const { Page, pageProps } = pageContext
+  const container = document.getElementById('root')!
+  const hasSSRContent = container.hasChildNodes() // ← key
+
+  if (hasSSRContent) {
+    hydrateRoot(container, <Page {...pageProps} />)
+  } else {
+    createRoot(container).render(<Page {...pageProps} />)
+  }
+}
diff --git a/demo/renderer/_default.page.server.tsx b/demo/renderer/_default.page.server.tsx
new file mode 100644
index 0000000..05b5b8f
--- /dev/null
+++ b/demo/renderer/_default.page.server.tsx
@@ -0,0 +1,41 @@
+import "@radix-ui/themes/styles.css";
+import React from "react";
+import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr/server";
+import { renderToString } from "react-dom/server";
+
+export const passToClient = ["pageProps", "routeParams"];
+
+export async function render(pageContext: any) {
+  const isSpa = (import.meta.env.VITE_APP_MODE ?? "ssr") === "spa";
+
+  if (isSpa) {
+    // SPA mode: no SSR, just an empty shell + client boot
+    return escapeInject`<!DOCTYPE html>
+      <html>
+        <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <title>App (SPA)</title>
+        </head>
+        <body>
+          <div id="root"></div>
+        </body>
+      </html>`;
+  }
+
+  // SSR mode: render HTML on the server
+  const { Page, pageProps } = pageContext;
+  const pageHtml = renderToString(React.createElement(Page, pageProps ?? {}));
+
+  return escapeInject`<!DOCTYPE html>
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>App (SSR)</title>
+      </head>
+      <body>
+        <div id="root">${dangerouslySkipEscape(pageHtml)}</div>
+      </body>
+    </html>`;
+}
diff --git a/demo/renderer/vite-env.d.ts b/demo/renderer/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/demo/renderer/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index fdc40ec..8fb8982 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -7,7 +7,6 @@ import { CustomHostElementExample } from "./examples/CustomHostElementExample";
 import { RadixVirtualizationExample } from "./examples/RadixVirtualizationExample";
 import { FlushImmediatelyExample } from "./examples/FlushImmediatelyExample";
 import { OneItemWiderExample } from "./examples/OneItemWiderExample";
-import { MaxRowsOverflowExample } from "./examples/MaxRowsOverflowExample";
 import { ReverseOrderExample } from "./examples/ReverseOrderExample";
 import { Github } from "lucide-react";
 import "./App.css";
@@ -49,7 +48,6 @@ function App() {
           <RadixVirtualizationExample />
           <FlushImmediatelyExample />
           <OneItemWiderExample />
-          <MaxRowsOverflowExample />
           <ReverseOrderExample />
         </main>
 
diff --git a/demo/src/components/CollapsibleCodePreview.tsx b/demo/src/components/CollapsibleCodePreview.tsx
index 35dbc68..f010f3e 100644
--- a/demo/src/components/CollapsibleCodePreview.tsx
+++ b/demo/src/components/CollapsibleCodePreview.tsx
@@ -1,10 +1,30 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { Copy, ChevronDown, ChevronRight, Check } from "lucide-react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
 import { IconButton } from "@radix-ui/themes";
 
+// SSR-safe copy functionality
+function CopyToClipboardWrapper({ children, text, onCopy }: any) {
+  const [CopyToClipboard, setCopyToClipboard] = useState<any>(null);
+  
+  useEffect(() => {
+    // Dynamically import on client-side only
+    if (typeof window !== 'undefined') {
+      import('react-copy-to-clipboard').then((module) => {
+        setCopyToClipboard(() => module.default);
+      });
+    }
+  }, []);
+  
+  if (!CopyToClipboard) {
+    // Fallback during SSR or before component loads
+    return children;
+  }
+  
+  return <CopyToClipboard text={text} onCopy={onCopy}>{children}</CopyToClipboard>;
+}
+
 interface CollapsibleCodePreviewProps {
   code: string;
   language?: string;
@@ -43,11 +63,11 @@ export function CollapsibleCodePreview({
           <span className="code-title">{title}</span>
         </button>
 
-        <CopyToClipboard text={combinedCode} onCopy={handleCopy}>
+        <CopyToClipboardWrapper text={combinedCode} onCopy={handleCopy}>
           <IconButton className="copy-button" aria-label="Copy code">
             {copied ? <Check size={16} className="copy-success" /> : <Copy size={16} />}
           </IconButton>
-        </CopyToClipboard>
+        </CopyToClipboardWrapper>
       </div>
 
       {!isCollapsed && (
diff --git a/demo/src/examples/CustomOverflowExample.tsx b/demo/src/examples/CustomOverflowExample.tsx
index fe27654..6ea5ee4 100644
--- a/demo/src/examples/CustomOverflowExample.tsx
+++ b/demo/src/examples/CustomOverflowExample.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { OverflowList, type OverflowElementProps } from "react-responsive-overflow-list";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
@@ -17,6 +17,7 @@ const CustomOverflowElement = React.forwardRef<HTMLDivElement, OverflowElementPr
 ));
 
 export function CustomOverflowExample() {
+
   return (
     <section className="demo">
       <h2 id="custom-overflow-example">Custom Overflow Element</h2>
@@ -134,7 +135,7 @@ const CustomOverflowElement = React.forwardRef<HTMLDivElement, { items: string[]
         />
         <div className="demo-container">
           <OverflowList
-            items={Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`)}
+            items={Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)}
             renderItem={(item) => <span className="tag">#{item}</span>}
             renderOverflow={(items) => <VirtualizedRadixOverflowMenu items={items} />}
             maxRows={5}
diff --git a/demo/src/examples/MaxRowsOverflowExample.tsx b/demo/src/examples/MaxRowsOverflowExample.tsx
deleted file mode 100644
index a932698..0000000
--- a/demo/src/examples/MaxRowsOverflowExample.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { OverflowList } from "react-responsive-overflow-list";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
-
-export function MaxRowsOverflowExample() {
-  return (
-    <section className="demo">
-      <h2 id="maxrows-overflow-placement">Max Rows with Overflow Placement</h2>
-      <p>
-        When using <code>maxRows</code> greater than 1, the overflow element can be placed in different positions within
-        the grid layout.
-      </p>
-      <div className="code-preview">
-        <SyntaxHighlighter language="tsx" style={tomorrow}>
-          {`<OverflowList
-  items={Array.from({ length: 20 }, (_, i) => \`Item \${i + 1}\`)}
-  renderItem={(item) => <span className="multi-item">{item}</span>}
-  maxRows={3}
-  style={{ gap: "8px" }}
-/>`}
-        </SyntaxHighlighter>
-      </div>
-      <div className="demo-container">
-        <OverflowList
-          items={Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`)}
-          renderItem={(item) => <span className="multi-item">{item}</span>}
-          maxRows={3}
-          style={{ gap: "8px" }}
-        />
-      </div>
-      <div className="demo-note">
-        <strong>Behavior:</strong> With <code>maxRows={3}</code>, the component creates a 3-row grid layout. When items
-        exceed the available space, the overflow element appears in the last available position, maintaining the grid
-        structure.
-      </div>
-    </section>
-  );
-}
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index ee00eb7..e25d086 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -1,17 +1,26 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { fileURLToPath, URL } from "node:url";
-import { vitePrerenderPlugin } from "vite-prerender-plugin";
-import path from "node:path";
+
+import { ssr } from "vite-plugin-ssr/plugin";
 
 export default defineConfig({
   plugins: [
     react(),
-    vitePrerenderPlugin({
-      renderTarget: "#root",
-      prerenderScript: path.resolve(__dirname, "src/prerender.tsx"),
-    }),
+    // vitePrerenderPlugin({
+    //   renderTarget: "#root",
+    //   prerenderScript: path.resolve(__dirname, "src/prerender.tsx"),
+    // }),
+    ssr(),
   ],
+  define: { "import.meta.env.VITE_APP_MODE": JSON.stringify(process.env.VITE_APP_MODE || "spa") },
+
+  ssr: {
+    // Don't externalize React for SSR
+    noExternal: ["react-responsive-overflow-list", "react-syntax-highlighter", "@types/react-syntax-highlighter"],
+    // Handle CommonJS modules
+    // external: ["react-copy-to-clipboard"],
+  },
   base: process.env.NODE_ENV === "production" ? "/react-responsive-overflow-list/" : "/",
   resolve: {
     // trick to avoid needing to build-watch the library when developing the demo
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce19054..71f884e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -42,6 +42,9 @@ importers:
       '@types/react-syntax-highlighter':
         specifier: ^15.5.13
         version: 15.5.13
+      express:
+        specifier: ^4.18.2
+        version: 4.21.2
       lucide-react:
         specifier: ^0.544.0
         version: 0.544.0(react@19.1.1)
@@ -55,15 +58,21 @@ importers:
         specifier: ^19.1.1
         version: 19.1.1(react@19.1.1)
       react-responsive-overflow-list:
-        specifier: latest
-        version: 0.1.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        specifier: lastest
+        version: link:..
       react-syntax-highlighter:
         specifier: ^15.6.6
         version: 15.6.6(react@19.1.1)
+      vite-plugin-ssr:
+        specifier: ^0.4.142
+        version: 0.4.142(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5))
     devDependencies:
       '@eslint/js':
         specifier: ^9.33.0
         version: 9.35.0
+      '@types/express':
+        specifier: ^4.17.17
+        version: 4.17.23
       '@types/node':
         specifier: ^24.3.1
         version: 24.3.1
@@ -208,6 +217,21 @@ packages:
     resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
     engines: {node: '>=6.9.0'}
 
+  '@brillout/import@0.2.3':
+    resolution: {integrity: sha512-1T8WlD75eeFSMrptGy8jiLHmfHgMmSjWvLOIUvHmSVZt+6k0eQqYUoK4KbmE4T9pVLIfxvZSOm2D68VEqKRHRw==}
+
+  '@brillout/json-serializer@0.5.21':
+    resolution: {integrity: sha512-pzzT4U4A9rk7eZpFjloRoMrGG2jnptwNGAhPIH7ZVjCMHd6TaJ29hrERPaY6Bp3Xdzu8JWlHI1o3x7PysxkaHQ==}
+
+  '@brillout/picocolors@1.0.28':
+    resolution: {integrity: sha512-FBsirUdUlmjmeUlEuqfnUoKAZUt+d0VfMVBYUsFQrDFEV9Rm/QDyG69PSQtQbI6SZQNiZuAWuyhE5USflzx6iQ==}
+
+  '@brillout/require-shim@0.1.2':
+    resolution: {integrity: sha512-3I4LRHnVZXoSAsEoni5mosq9l6eiJED58d9V954W4CIZ88AUfYBanWGBGbJG3NztaRTpFHEA6wB3Hn93BmmJdg==}
+
+  '@brillout/vite-plugin-import-build@0.2.22':
+    resolution: {integrity: sha512-n5sv0HdCB5WC2QJSnTN6iS/F+sJsF0AmtsCCaQ+5+dRjgsoGGsa3auinJV8tuEog5WsX+3MF8RIwn3A/u0e04w==}
+
   '@emnapi/core@1.5.0':
     resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
 
@@ -223,96 +247,192 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/android-arm64@0.17.19':
+    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm64@0.25.9':
     resolution: {integrity: sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm@0.17.19':
+    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-arm@0.25.9':
     resolution: {integrity: sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-x64@0.17.19':
+    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/android-x64@0.25.9':
     resolution: {integrity: sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
+  '@esbuild/darwin-arm64@0.17.19':
+    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-arm64@0.25.9':
     resolution: {integrity: sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.17.19':
+    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.25.9':
     resolution: {integrity: sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/freebsd-arm64@0.17.19':
+    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-arm64@0.25.9':
     resolution: {integrity: sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.17.19':
+    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.25.9':
     resolution: {integrity: sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/linux-arm64@0.17.19':
+    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm64@0.25.9':
     resolution: {integrity: sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm@0.17.19':
+    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-arm@0.25.9':
     resolution: {integrity: sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.17.19':
+    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.25.9':
     resolution: {integrity: sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.17.19':
+    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.25.9':
     resolution: {integrity: sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.17.19':
+    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.25.9':
     resolution: {integrity: sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.17.19':
+    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.25.9':
     resolution: {integrity: sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.17.19':
+    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.25.9':
     resolution: {integrity: sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.17.19':
+    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.25.9':
     resolution: {integrity: sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-x64@0.17.19':
+    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/linux-x64@0.25.9':
     resolution: {integrity: sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==}
     engines: {node: '>=18'}
@@ -325,6 +445,12 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.17.19':
+    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.25.9':
     resolution: {integrity: sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==}
     engines: {node: '>=18'}
@@ -337,6 +463,12 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.17.19':
+    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.25.9':
     resolution: {integrity: sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==}
     engines: {node: '>=18'}
@@ -349,24 +481,48 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@esbuild/sunos-x64@0.17.19':
+    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/sunos-x64@0.25.9':
     resolution: {integrity: sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/win32-arm64@0.17.19':
+    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-arm64@0.25.9':
     resolution: {integrity: sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.17.19':
+    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.25.9':
     resolution: {integrity: sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-x64@0.17.19':
+    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
   '@esbuild/win32-x64@0.25.9':
     resolution: {integrity: sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==}
     engines: {node: '>=18'}
@@ -520,6 +676,9 @@ packages:
   '@oxc-project/types@0.72.3':
     resolution: {integrity: sha512-CfAC4wrmMkUoISpQkFAIfMVvlPfQV3xg7ZlcqPXPOIMQhdKIId44G8W0mCPgtpWdFFAyJ+SFtiM+9vbyCkoVng==}
 
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
   '@prerenderer/prerenderer@0.7.2':
     resolution: {integrity: sha512-zWG3uFnrQWDJQoSzGB8bOnNhJCgIiylVYDFBP7Nw2LqngHOqwvpdBtGSjfajC8+fdR/iB2FqMqe27cfdmf/8TQ==}
     engines: {node: '>=4.0.0'}
@@ -1438,18 +1597,42 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/body-parser@1.19.6':
+    resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
+
+  '@types/connect@3.4.38':
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/express-serve-static-core@4.19.6':
+    resolution: {integrity: sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==}
+
+  '@types/express@4.17.23':
+    resolution: {integrity: sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==}
+
   '@types/hast@2.3.10':
     resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
 
+  '@types/http-errors@2.0.5':
+    resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/mime@1.3.5':
+    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+
   '@types/node@24.3.1':
     resolution: {integrity: sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==}
 
+  '@types/qs@6.14.0':
+    resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
+
+  '@types/range-parser@1.2.7':
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+
   '@types/react-copy-to-clipboard@5.0.7':
     resolution: {integrity: sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==}
 
@@ -1464,6 +1647,12 @@ packages:
   '@types/react@19.1.12':
     resolution: {integrity: sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==}
 
+  '@types/send@0.17.5':
+    resolution: {integrity: sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==}
+
+  '@types/serve-static@1.15.8':
+    resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -1885,6 +2074,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -1895,6 +2087,11 @@ packages:
   es6-promisify@5.0.0:
     resolution: {integrity: sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==}
 
+  esbuild@0.17.19:
+    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
   esbuild@0.25.9:
     resolution: {integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==}
     engines: {node: '>=18'}
@@ -2491,6 +2688,10 @@ packages:
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
@@ -2749,12 +2950,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-responsive-overflow-list@0.1.0:
-    resolution: {integrity: sha512-HyN0wXP+kmU0vn0de1qEkzdwh6quUp8QeM8CcZ9Vtc+IOsz/t5RKNq0cLihNR5ZD41jg1irGYvm9bcISoVSTwA==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -2905,6 +3100,10 @@ packages:
   simple-code-frame@1.3.0:
     resolution: {integrity: sha512-MB4pQmETUBlNs62BBeRjIFGeuy/x6gGKh7+eRUemn1rCFhqo7K+4slPqsyizCbcbYLnaYqaoZ2FWsZ/jN06D8w==}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
   snapdragon-node@2.1.1:
     resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
     engines: {node: '>=0.10.0'}
@@ -2925,6 +3124,9 @@ packages:
     resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
     deprecated: See https://github.com/lydell/source-map-resolve#deprecated
 
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
   source-map-url@0.4.1:
     resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
     deprecated: See https://github.com/lydell/source-map-url#deprecated
@@ -2998,6 +3200,10 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
@@ -3150,6 +3356,17 @@ packages:
     peerDependencies:
       vite: '>=2.0.0'
 
+  vite-plugin-ssr@0.4.142:
+    resolution: {integrity: sha512-ZDgpocnTEUmhYxGgMah8ZNK1Sfy5CFVcdXu+Ll3zRtGIPyWT5vYvASs2BLYEneqantHpde2b31Khzb0hxmP62w==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+    peerDependencies:
+      react-streaming: '>=0.3.5'
+      vite: '>=3.1.0'
+    peerDependenciesMeta:
+      react-streaming:
+        optional: true
+
   vite-prerender-plugin@0.5.12:
     resolution: {integrity: sha512-EiwhbMn+flg14EysbLTmZSzq8NGTxhytgK3bf4aGRF1evWLGwZiHiUJ1KZDvbxgKbMf2pG6fJWGEa3UZXOnR1g==}
     peerDependencies:
@@ -3353,6 +3570,18 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
+  '@brillout/import@0.2.3': {}
+
+  '@brillout/json-serializer@0.5.21': {}
+
+  '@brillout/picocolors@1.0.28': {}
+
+  '@brillout/require-shim@0.1.2': {}
+
+  '@brillout/vite-plugin-import-build@0.2.22':
+    dependencies:
+      '@brillout/import': 0.2.3
+
   '@emnapi/core@1.5.0':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -3372,78 +3601,144 @@ snapshots:
   '@esbuild/aix-ppc64@0.25.9':
     optional: true
 
+  '@esbuild/android-arm64@0.17.19':
+    optional: true
+
   '@esbuild/android-arm64@0.25.9':
     optional: true
 
+  '@esbuild/android-arm@0.17.19':
+    optional: true
+
   '@esbuild/android-arm@0.25.9':
     optional: true
 
+  '@esbuild/android-x64@0.17.19':
+    optional: true
+
   '@esbuild/android-x64@0.25.9':
     optional: true
 
+  '@esbuild/darwin-arm64@0.17.19':
+    optional: true
+
   '@esbuild/darwin-arm64@0.25.9':
     optional: true
 
+  '@esbuild/darwin-x64@0.17.19':
+    optional: true
+
   '@esbuild/darwin-x64@0.25.9':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.17.19':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.25.9':
     optional: true
 
+  '@esbuild/freebsd-x64@0.17.19':
+    optional: true
+
   '@esbuild/freebsd-x64@0.25.9':
     optional: true
 
+  '@esbuild/linux-arm64@0.17.19':
+    optional: true
+
   '@esbuild/linux-arm64@0.25.9':
     optional: true
 
+  '@esbuild/linux-arm@0.17.19':
+    optional: true
+
   '@esbuild/linux-arm@0.25.9':
     optional: true
 
+  '@esbuild/linux-ia32@0.17.19':
+    optional: true
+
   '@esbuild/linux-ia32@0.25.9':
     optional: true
 
+  '@esbuild/linux-loong64@0.17.19':
+    optional: true
+
   '@esbuild/linux-loong64@0.25.9':
     optional: true
 
+  '@esbuild/linux-mips64el@0.17.19':
+    optional: true
+
   '@esbuild/linux-mips64el@0.25.9':
     optional: true
 
+  '@esbuild/linux-ppc64@0.17.19':
+    optional: true
+
   '@esbuild/linux-ppc64@0.25.9':
     optional: true
 
+  '@esbuild/linux-riscv64@0.17.19':
+    optional: true
+
   '@esbuild/linux-riscv64@0.25.9':
     optional: true
 
+  '@esbuild/linux-s390x@0.17.19':
+    optional: true
+
   '@esbuild/linux-s390x@0.25.9':
     optional: true
 
+  '@esbuild/linux-x64@0.17.19':
+    optional: true
+
   '@esbuild/linux-x64@0.25.9':
     optional: true
 
   '@esbuild/netbsd-arm64@0.25.9':
     optional: true
 
+  '@esbuild/netbsd-x64@0.17.19':
+    optional: true
+
   '@esbuild/netbsd-x64@0.25.9':
     optional: true
 
   '@esbuild/openbsd-arm64@0.25.9':
     optional: true
 
+  '@esbuild/openbsd-x64@0.17.19':
+    optional: true
+
   '@esbuild/openbsd-x64@0.25.9':
     optional: true
 
   '@esbuild/openharmony-arm64@0.25.9':
     optional: true
 
+  '@esbuild/sunos-x64@0.17.19':
+    optional: true
+
   '@esbuild/sunos-x64@0.25.9':
     optional: true
 
+  '@esbuild/win32-arm64@0.17.19':
+    optional: true
+
   '@esbuild/win32-arm64@0.25.9':
     optional: true
 
+  '@esbuild/win32-ia32@0.17.19':
+    optional: true
+
   '@esbuild/win32-ia32@0.25.9':
     optional: true
 
+  '@esbuild/win32-x64@0.17.19':
+    optional: true
+
   '@esbuild/win32-x64@0.25.9':
     optional: true
 
@@ -3585,6 +3880,8 @@ snapshots:
 
   '@oxc-project/types@0.72.3': {}
 
+  '@polka/url@1.0.0-next.29': {}
+
   '@prerenderer/prerenderer@0.7.2(debug@4.4.1)':
     dependencies:
       express: 4.21.2
@@ -4511,18 +4808,49 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.4
 
+  '@types/body-parser@1.19.6':
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 24.3.1
+
+  '@types/connect@3.4.38':
+    dependencies:
+      '@types/node': 24.3.1
+
   '@types/estree@1.0.8': {}
 
+  '@types/express-serve-static-core@4.19.6':
+    dependencies:
+      '@types/node': 24.3.1
+      '@types/qs': 6.14.0
+      '@types/range-parser': 1.2.7
+      '@types/send': 0.17.5
+
+  '@types/express@4.17.23':
+    dependencies:
+      '@types/body-parser': 1.19.6
+      '@types/express-serve-static-core': 4.19.6
+      '@types/qs': 6.14.0
+      '@types/serve-static': 1.15.8
+
   '@types/hast@2.3.10':
     dependencies:
       '@types/unist': 2.0.11
 
+  '@types/http-errors@2.0.5': {}
+
   '@types/json-schema@7.0.15': {}
 
+  '@types/mime@1.3.5': {}
+
   '@types/node@24.3.1':
     dependencies:
       undici-types: 7.10.0
 
+  '@types/qs@6.14.0': {}
+
+  '@types/range-parser@1.2.7': {}
+
   '@types/react-copy-to-clipboard@5.0.7':
     dependencies:
       '@types/react': 19.1.12
@@ -4539,6 +4867,17 @@ snapshots:
     dependencies:
       csstype: 3.1.3
 
+  '@types/send@0.17.5':
+    dependencies:
+      '@types/mime': 1.3.5
+      '@types/node': 24.3.1
+
+  '@types/serve-static@1.15.8':
+    dependencies:
+      '@types/http-errors': 2.0.5
+      '@types/node': 24.3.1
+      '@types/send': 0.17.5
+
   '@types/unist@2.0.11': {}
 
   '@typescript-eslint/eslint-plugin@8.43.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)':
@@ -4981,6 +5320,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@1.7.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -4991,6 +5332,31 @@ snapshots:
     dependencies:
       es6-promise: 4.2.8
 
+  esbuild@0.17.19:
+    optionalDependencies:
+      '@esbuild/android-arm': 0.17.19
+      '@esbuild/android-arm64': 0.17.19
+      '@esbuild/android-x64': 0.17.19
+      '@esbuild/darwin-arm64': 0.17.19
+      '@esbuild/darwin-x64': 0.17.19
+      '@esbuild/freebsd-arm64': 0.17.19
+      '@esbuild/freebsd-x64': 0.17.19
+      '@esbuild/linux-arm': 0.17.19
+      '@esbuild/linux-arm64': 0.17.19
+      '@esbuild/linux-ia32': 0.17.19
+      '@esbuild/linux-loong64': 0.17.19
+      '@esbuild/linux-mips64el': 0.17.19
+      '@esbuild/linux-ppc64': 0.17.19
+      '@esbuild/linux-riscv64': 0.17.19
+      '@esbuild/linux-s390x': 0.17.19
+      '@esbuild/linux-x64': 0.17.19
+      '@esbuild/netbsd-x64': 0.17.19
+      '@esbuild/openbsd-x64': 0.17.19
+      '@esbuild/sunos-x64': 0.17.19
+      '@esbuild/win32-arm64': 0.17.19
+      '@esbuild/win32-ia32': 0.17.19
+      '@esbuild/win32-x64': 0.17.19
+
   esbuild@0.25.9:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.9
@@ -5670,6 +6036,8 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.1
 
+  mrmime@2.0.1: {}
+
   ms@2.0.0: {}
 
   ms@2.1.3: {}
@@ -5989,11 +6357,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.12
 
-  react-responsive-overflow-list@0.1.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
-    dependencies:
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-
   react-style-singleton@2.2.3(@types/react@19.1.12)(react@19.1.1):
     dependencies:
       get-nonce: 1.0.1
@@ -6200,6 +6563,12 @@ snapshots:
     dependencies:
       kolorist: 1.8.0
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   snapdragon-node@2.1.1:
     dependencies:
       define-property: 1.0.0
@@ -6233,6 +6602,11 @@ snapshots:
       source-map-url: 0.4.1
       urix: 0.1.0
 
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
   source-map-url@0.4.1: {}
 
   source-map@0.5.7: {}
@@ -6295,6 +6669,8 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
+  totalist@3.0.1: {}
+
   ts-api-utils@2.1.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
@@ -6463,6 +6839,22 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  vite-plugin-ssr@0.4.142(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)):
+    dependencies:
+      '@brillout/import': 0.2.3
+      '@brillout/json-serializer': 0.5.21
+      '@brillout/picocolors': 1.0.28
+      '@brillout/require-shim': 0.1.2
+      '@brillout/vite-plugin-import-build': 0.2.22
+      acorn: 8.15.0
+      cac: 6.7.14
+      es-module-lexer: 1.7.0
+      esbuild: 0.17.19
+      fast-glob: 3.3.3
+      sirv: 2.0.4
+      source-map-support: 0.5.21
+      vite: 7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)
+
   vite-prerender-plugin@0.5.12(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)):
     dependencies:
       kolorist: 1.8.0
diff --git a/src/components/OverflowList.tsx b/src/components/OverflowList.tsx
index 0c4c616..728512b 100644
--- a/src/components/OverflowList.tsx
+++ b/src/components/OverflowList.tsx
@@ -1,8 +1,8 @@
-import React, { useLayoutEffect, useRef, useState } from "react";
-import { useResizeObserver, useForkRef } from "../hooks";
+import React, { useRef, useState } from "react";
+import { useForkRef, useIsoLayoutEffect, useResizeObserver } from "../hooks";
+import { getRowPositionsData } from "../utils";
 import { DefaultOverflowElement } from "./DefaultOverflowMenu";
 import styles from "./OverflowList.module.css";
-import { getRowPositionsData } from "../utils";
 
 type BaseComponentProps = React.HTMLAttributes<HTMLElement>;
 
@@ -53,7 +53,7 @@ export interface OverflowElementProps<T> {
  * Responsive container that shows as many items as can fit within maxRows,
  * hiding overflow items behind a configurable overflow renderer.
  * Automatically recalculates visible items on resize.
- * 
+ *
  * Technical details:
  * Uses a three-phases approach:
  * 1. "measuring" renders all items to calculate positions,
@@ -79,6 +79,7 @@ export const OverflowList = React.memo(
       ...flexProps
     } = props;
 
+
     const [visibleCount, setVisibleCount] = useState(items.length);
     const [subtractCount, setSubtractCount] = useState(0);
     const [phase, setPhase] = useState<"normal" | "measuring" | "measuring-overflow-indicator">("normal");
@@ -91,10 +92,7 @@ export const OverflowList = React.memo(
     const showOverflow = overflowCount > 0 && phase !== "measuring";
 
     const finalRenderOverflow = renderOverflow?.(items.slice(finalVisibleCount) as T[]) ?? (
-      <DefaultOverflowElement
-        items={items.slice(finalVisibleCount) as T[]}
-        {...renderOverflowProps}
-      />
+      <DefaultOverflowElement items={items.slice(finalVisibleCount) as T[]} {...renderOverflowProps} />
     );
 
     const overflowElement = showOverflow ? finalRenderOverflow : null;
@@ -104,13 +102,13 @@ export const OverflowList = React.memo(
     const finalOverflowRef = useForkRef(overflowRef, overflowElement?.ref);
 
     // Reset state when items change
-    useLayoutEffect(() => {
+    useIsoLayoutEffect(() => {
       setPhase("measuring");
       setVisibleCount(items.length);
       setSubtractCount(0);
     }, [items.length, maxRows]);
 
-    useLayoutEffect(() => {
+    useIsoLayoutEffect(() => {
       // in measurement, evaluate results
       if (phase === "measuring") {
         countVisibleItems();
@@ -118,7 +116,7 @@ export const OverflowList = React.memo(
       }
     }, [phase]);
 
-    useLayoutEffect(() => {
+    useIsoLayoutEffect(() => {
       // After placing the overflow indicator, evaluate if it ends up opening a new row
       if (phase === "measuring-overflow-indicator") {
         const updateWasNeeded = updateOverflowIndicator();
@@ -130,7 +128,7 @@ export const OverflowList = React.memo(
 
     // if the container dimensions change, re-measure
     const containerDims = useResizeObserver(containerRef, flushImmediately);
-    useLayoutEffect(() => {
+    useIsoLayoutEffect(() => {
       if (phase === "normal") {
         setPhase("measuring");
         setSubtractCount(0);
@@ -195,8 +193,8 @@ export const OverflowList = React.memo(
     // Cloned overflow element that ensures ref is passed so we could measure dimensions on this element
     const clonedOverflowElement = overflowElement
       ? React.cloneElement(overflowElement as React.ReactElement<any>, {
-          ref: finalOverflowRef,
-        })
+        ref: finalOverflowRef,
+      })
       : null;
 
     // Get the items to render based on current state
@@ -216,8 +214,8 @@ export const OverflowList = React.memo(
         {finalItems.map((item, index) => {
           const isVisible =
             phase ===
-              // in measuring phase, show all items
-              "measuring" ||
+            // in measuring phase, show all items
+            "measuring" ||
             // in 'normal' phase, show only the N items that fit
             index < finalVisibleCount;
           if (!isVisible) return null;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 310379d..1b3f268 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from "./useResizeObserver";
 export * from "./useForkRef";
+export * from "./useIsoLayoutEffect";
\ No newline at end of file
diff --git a/src/hooks/useIsoLayoutEffect.ts b/src/hooks/useIsoLayoutEffect.ts
new file mode 100644
index 0000000..f840e48
--- /dev/null
+++ b/src/hooks/useIsoLayoutEffect.ts
@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsoLayoutEffect: typeof useEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
diff --git a/tsconfig.json b/tsconfig.json
index 8ded8de..8dcb30b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,8 @@
     "jsx": "react-jsx",
     "declaration": true,
     "declarationMap": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "sourceMap": true
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist"]
diff --git a/tsdown.config.ts b/tsdown.config.ts
index 00b9240..a97a5d9 100644
--- a/tsdown.config.ts
+++ b/tsdown.config.ts
@@ -4,5 +4,6 @@ export default defineConfig({
   entry: "src/index.ts",
   format: ["cjs", "esm"],
   dts: true,
+  sourcemap: true,
   external: ["react", "react-dom"],
 });

From 2f79ecf0b4ecb514b518aa12dbd454fc9aac0086 Mon Sep 17 00:00:00 2001
From: Eliav Louski <louski.a@gmail.com>
Date: Mon, 22 Sep 2025 00:49:47 +0300
Subject: [PATCH 3/8] ssr-setup

---
 demo/renderer/_default.page.server.tsx      | 38 +++++--------
 demo/src/examples/CustomOverflowExample.tsx |  7 +--
 demo/src/prerender.tsx                      |  8 ---
 demo/vite.config.ts                         | 62 +++++++++++++--------
 4 files changed, 58 insertions(+), 57 deletions(-)
 delete mode 100644 demo/src/prerender.tsx

diff --git a/demo/renderer/_default.page.server.tsx b/demo/renderer/_default.page.server.tsx
index 05b5b8f..f25d3ef 100644
--- a/demo/renderer/_default.page.server.tsx
+++ b/demo/renderer/_default.page.server.tsx
@@ -2,6 +2,9 @@ import "@radix-ui/themes/styles.css";
 import React from "react";
 import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr/server";
 import { renderToString } from "react-dom/server";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
 
 export const passToClient = ["pageProps", "routeParams"];
 
@@ -9,33 +12,22 @@ export async function render(pageContext: any) {
   const isSpa = (import.meta.env.VITE_APP_MODE ?? "ssr") === "spa";
 
   if (isSpa) {
-    // SPA mode: no SSR, just an empty shell + client boot
-    return escapeInject`<!DOCTYPE html>
-      <html>
-        <head>
-          <meta charSet="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <title>App (SPA)</title>
-        </head>
-        <body>
-          <div id="root"></div>
-        </body>
-      </html>`;
+    // SPA mode: return the original index.html
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+    const indexHtml = fs.readFileSync(path.resolve(__dirname, "../index.html"), "utf-8");
+    return escapeInject`${dangerouslySkipEscape(indexHtml)}`;
   }
 
   // SSR mode: render HTML on the server
   const { Page, pageProps } = pageContext;
   const pageHtml = renderToString(React.createElement(Page, pageProps ?? {}));
 
-  return escapeInject`<!DOCTYPE html>
-    <html>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>App (SSR)</title>
-      </head>
-      <body>
-        <div id="root">${dangerouslySkipEscape(pageHtml)}</div>
-      </body>
-    </html>`;
+  // Read the index.html template and inject the rendered content
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+  const indexHtml = fs.readFileSync(path.resolve(__dirname, "../index.html"), "utf-8");
+  const htmlWithContent = indexHtml.replace('<div id="root"></div>', `<div id="root">${pageHtml}</div>`);
+
+  return escapeInject`${dangerouslySkipEscape(htmlWithContent)}`;
 }
diff --git a/demo/src/examples/CustomOverflowExample.tsx b/demo/src/examples/CustomOverflowExample.tsx
index 6ea5ee4..544dee9 100644
--- a/demo/src/examples/CustomOverflowExample.tsx
+++ b/demo/src/examples/CustomOverflowExample.tsx
@@ -1,12 +1,12 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { OverflowList, type OverflowElementProps } from "react-responsive-overflow-list";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { CollapsibleCodePreview } from "../components/CollapsibleCodePreview";
-import { VirtualizedRadixOverflowMenu } from "./VirtualizedRadixOverflowMenu";
 import { RadixOverflowMenu } from "./RadixOverflowMenu";
-import virtualizedCodeExample from "./VirtualizedRadixOverflowMenu?raw";
 import radixCodeExample from "./RadixOverflowMenu?raw";
+import { VirtualizedRadixOverflowMenu } from "./VirtualizedRadixOverflowMenu";
+import virtualizedCodeExample from "./VirtualizedRadixOverflowMenu?raw";
 
 const tags = ["React", "TypeScript", "CSS", "HTML", "JavaScript", "Node.js", "Express", "MongoDB", "Vite", "ESLint"];
 
@@ -17,7 +17,6 @@ const CustomOverflowElement = React.forwardRef<HTMLDivElement, OverflowElementPr
 ));
 
 export function CustomOverflowExample() {
-
   return (
     <section className="demo">
       <h2 id="custom-overflow-example">Custom Overflow Element</h2>
diff --git a/demo/src/prerender.tsx b/demo/src/prerender.tsx
deleted file mode 100644
index eb5a658..0000000
--- a/demo/src/prerender.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-// Use Preact for prerender ONLY (runtime stays React)
-import render from "preact-render-to-string";
-import App from "./App";
-
-export async function prerender() {
-  const html = render(<App />);
-  return { html };
-}
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index e25d086..ed76e24 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -4,28 +4,46 @@ import { fileURLToPath, URL } from "node:url";
 
 import { ssr } from "vite-plugin-ssr/plugin";
 
-export default defineConfig({
-  plugins: [
-    react(),
-    // vitePrerenderPlugin({
-    //   renderTarget: "#root",
-    //   prerenderScript: path.resolve(__dirname, "src/prerender.tsx"),
-    // }),
-    ssr(),
-  ],
-  define: { "import.meta.env.VITE_APP_MODE": JSON.stringify(process.env.VITE_APP_MODE || "spa") },
+export default defineConfig(() => {
+  const appMode = process.env.VITE_APP_MODE || ("spa" as "spa" | "ssr");
+  console.log(`VITE_APP_MODE is "${appMode}"`);
 
-  ssr: {
-    // Don't externalize React for SSR
-    noExternal: ["react-responsive-overflow-list", "react-syntax-highlighter", "@types/react-syntax-highlighter"],
-    // Handle CommonJS modules
-    // external: ["react-copy-to-clipboard"],
-  },
-  base: process.env.NODE_ENV === "production" ? "/react-responsive-overflow-list/" : "/",
-  resolve: {
-    // trick to avoid needing to build-watch the library when developing the demo
-    alias: {
-      "react-responsive-overflow-list": fileURLToPath(new URL("../src/index.ts", import.meta.url)),
+  const sharedConfig: Partial<import("vite").UserConfig> = {
+    base: process.env.NODE_ENV === "production" ? "/react-responsive-overflow-list/" : "/",
+    resolve: {
+      // trick to avoid needing to build-watch the library when developing the demo
+      alias: {
+        "react-responsive-overflow-list": fileURLToPath(new URL("../src/index.ts", import.meta.url)),
+      },
     },
-  },
+  };
+
+  if (appMode === "spa") {
+    return {
+      plugins: [react()],
+      ...sharedConfig,
+    };
+  }
+
+  // ssr mode
+  return {
+    plugins: [
+      react(),
+      // vitePrerenderPlugin({
+      //   renderTarget: "#root",
+      //   prerenderScript: path.resolve(__dirname, "src/prerender.tsx"),
+      // }),
+      ssr({
+        prerender: true,
+      }),
+    ],
+
+    ssr: {
+      // Don't externalize React for SSR
+      noExternal: ["react-responsive-overflow-list", "react-syntax-highlighter", "@types/react-syntax-highlighter"],
+      // Handle CommonJS modules
+      // external: ["react-copy-to-clipboard"],
+    },
+    ...sharedConfig,
+  };
 });

From b0fb38c9bbdf65b1d09d7d03ca28a99a5c0228c5 Mon Sep 17 00:00:00 2001
From: Eliav Louski <louski.a@gmail.com>
Date: Mon, 22 Sep 2025 02:31:43 +0300
Subject: [PATCH 4/8] ssr

---
 demo/package.json                      |  16 ++-
 demo/pages/index.page.tsx              |   6 -
 demo/pages/index/+Page.tsx             |   9 ++
 demo/renderer/+config.ts               |  10 ++
 demo/renderer/_default.page.client.tsx |  18 ---
 demo/renderer/_default.page.server.tsx |  33 -----
 demo/renderer/vite-env.d.ts            |   1 -
 demo/src/App.tsx                       |   1 +
 demo/src/main.tsx                      |   1 -
 demo/vite.config.ts                    |  26 ++--
 pnpm-lock.yaml                         | 182 ++++++++++++++-----------
 11 files changed, 148 insertions(+), 155 deletions(-)
 delete mode 100644 demo/pages/index.page.tsx
 create mode 100644 demo/pages/index/+Page.tsx
 create mode 100644 demo/renderer/+config.ts
 delete mode 100644 demo/renderer/_default.page.client.tsx
 delete mode 100644 demo/renderer/_default.page.server.tsx
 delete mode 100644 demo/renderer/vite-env.d.ts

diff --git a/demo/package.json b/demo/package.json
index 378fb9a..5387412 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -7,13 +7,13 @@
     "dev": "pnpm dev:spa",
     "dev:local": "pnpm install --link-workspace-packages && pnpm dev",
     "dev:published": "pnpm install --no-link-workspace-packages && pnpm dev",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && pnpm build:ssr",
     "lint": "eslint .",
-    "preview": "vite preview",
-    "dev:ssr": "VITE_APP_MODE=ssr vite",
-    "dev:spa": "VITE_APP_MODE=spa vite",
-    "build:ssr": "VITE_APP_MODE=ssr vite build && vite-plugin-ssr prerender",
-    "build:spa": "VITE_APP_MODE=spa vite build"
+    "dev:ssr": "VITE_APP_MODE=ssr vike dev",
+    "dev:spa": "VITE_APP_MODE=spa vike dev",
+    "build:ssr": "VITE_APP_MODE=ssr vike build",
+    "build:spa": "VITE_APP_MODE=spa vike build",
+    "preview": "vike preview"
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -25,8 +25,10 @@
     "react": "^19.1.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^19.1.1",
-    "react-responsive-overflow-list": "lastest",
+    "react-responsive-overflow-list": "workspace:*",
     "react-syntax-highlighter": "^15.6.6",
+    "vike": "^0.4.240",
+    "vike-react": "^0.6.6",
     "vite-plugin-ssr": "^0.4.142"
   },
   "devDependencies": {
diff --git a/demo/pages/index.page.tsx b/demo/pages/index.page.tsx
deleted file mode 100644
index 2392e11..0000000
--- a/demo/pages/index.page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-import App from "../src/App";
-
-export function Page() {
-  return <App />;
-}
diff --git a/demo/pages/index/+Page.tsx b/demo/pages/index/+Page.tsx
new file mode 100644
index 0000000..2b4b304
--- /dev/null
+++ b/demo/pages/index/+Page.tsx
@@ -0,0 +1,9 @@
+
+import App from '../../src/App.tsx'
+export { Page }
+
+function Page() {
+    return <>
+        <App />
+    </>
+}
\ No newline at end of file
diff --git a/demo/renderer/+config.ts b/demo/renderer/+config.ts
new file mode 100644
index 0000000..93a7f01
--- /dev/null
+++ b/demo/renderer/+config.ts
@@ -0,0 +1,10 @@
+import type { Config } from "vike/types";
+import vikeReact from "vike-react/config";
+
+const isSpa = (process.env.VITE_APP_MODE ?? "ssr") === "spa";
+
+export default {
+  prerender: true,
+  extends: [vikeReact],
+  ssr: !isSpa,
+} satisfies Config;
diff --git a/demo/renderer/_default.page.client.tsx b/demo/renderer/_default.page.client.tsx
deleted file mode 100644
index 8f3a42b..0000000
--- a/demo/renderer/_default.page.client.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { createRoot, hydrateRoot } from 'react-dom/client'
-
-export const clientRouting = true
-export const hydrationCanBeAborted = true
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function render(pageContext: any) {
-  const { Page, pageProps } = pageContext
-  const container = document.getElementById('root')!
-  const hasSSRContent = container.hasChildNodes() // ← key
-
-  if (hasSSRContent) {
-    hydrateRoot(container, <Page {...pageProps} />)
-  } else {
-    createRoot(container).render(<Page {...pageProps} />)
-  }
-}
diff --git a/demo/renderer/_default.page.server.tsx b/demo/renderer/_default.page.server.tsx
deleted file mode 100644
index f25d3ef..0000000
--- a/demo/renderer/_default.page.server.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import "@radix-ui/themes/styles.css";
-import React from "react";
-import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr/server";
-import { renderToString } from "react-dom/server";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-export const passToClient = ["pageProps", "routeParams"];
-
-export async function render(pageContext: any) {
-  const isSpa = (import.meta.env.VITE_APP_MODE ?? "ssr") === "spa";
-
-  if (isSpa) {
-    // SPA mode: return the original index.html
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = path.dirname(__filename);
-    const indexHtml = fs.readFileSync(path.resolve(__dirname, "../index.html"), "utf-8");
-    return escapeInject`${dangerouslySkipEscape(indexHtml)}`;
-  }
-
-  // SSR mode: render HTML on the server
-  const { Page, pageProps } = pageContext;
-  const pageHtml = renderToString(React.createElement(Page, pageProps ?? {}));
-
-  // Read the index.html template and inject the rendered content
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = path.dirname(__filename);
-  const indexHtml = fs.readFileSync(path.resolve(__dirname, "../index.html"), "utf-8");
-  const htmlWithContent = indexHtml.replace('<div id="root"></div>', `<div id="root">${pageHtml}</div>`);
-
-  return escapeInject`${dangerouslySkipEscape(htmlWithContent)}`;
-}
diff --git a/demo/renderer/vite-env.d.ts b/demo/renderer/vite-env.d.ts
deleted file mode 100644
index 11f02fe..0000000
--- a/demo/renderer/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 8fb8982..212de97 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -1,3 +1,4 @@
+import "@radix-ui/themes/styles.css";
 import { Theme } from "@radix-ui/themes";
 import { CustomOverflowExample } from "./examples/CustomOverflowExample";
 import { BasicExample } from "./examples/BasicExample";
diff --git a/demo/src/main.tsx b/demo/src/main.tsx
index dd0d463..0ebf5a7 100644
--- a/demo/src/main.tsx
+++ b/demo/src/main.tsx
@@ -1,4 +1,3 @@
-import "@radix-ui/themes/styles.css";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index ed76e24..419c22c 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -1,8 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { fileURLToPath, URL } from "node:url";
+import vike from "vike/plugin";
 
-import { ssr } from "vite-plugin-ssr/plugin";
+// import { ssr } from "vite-plugin-ssr/plugin";
 
 export default defineConfig(() => {
   const appMode = process.env.VITE_APP_MODE || ("spa" as "spa" | "ssr");
@@ -18,26 +19,29 @@ export default defineConfig(() => {
     },
   };
 
-  if (appMode === "spa") {
-    return {
-      plugins: [react()],
-      ...sharedConfig,
-    };
-  }
+  // if (appMode === "spa") {
+  //   return {
+  //     plugins: [react()],
+  //     ...sharedConfig,
+  //   };
+  // }
 
   // ssr mode
   return {
     plugins: [
+      // ssr({
+      //   prerender: true,
+      // }),
       react(),
+      vike(),
       // vitePrerenderPlugin({
       //   renderTarget: "#root",
       //   prerenderScript: path.resolve(__dirname, "src/prerender.tsx"),
       // }),
-      ssr({
-        prerender: true,
-      }),
     ],
-
+    // build: {
+    //   minify: false,
+    // },
     ssr: {
       // Don't externalize React for SSR
       noExternal: ["react-responsive-overflow-list", "react-syntax-highlighter", "@types/react-syntax-highlighter"],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71f884e..37ec2cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,21 +58,24 @@ importers:
         specifier: ^19.1.1
         version: 19.1.1(react@19.1.1)
       react-responsive-overflow-list:
-        specifier: lastest
+        specifier: workspace:*
         version: link:..
       react-syntax-highlighter:
         specifier: ^15.6.6
         version: 15.6.6(react@19.1.1)
+      vike:
+        specifier: ^0.4.240
+        version: 0.4.240(react-streaming@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5))
+      vike-react:
+        specifier: ^0.6.6
+        version: 0.6.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vike@0.4.240(react-streaming@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)))
       vite-plugin-ssr:
         specifier: ^0.4.142
-        version: 0.4.142(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5))
+        version: 0.4.142(react-streaming@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5))
     devDependencies:
       '@eslint/js':
         specifier: ^9.33.0
         version: 9.35.0
-      '@types/express':
-        specifier: ^4.17.17
-        version: 4.17.23
       '@types/node':
         specifier: ^24.3.1
         version: 24.3.1
@@ -220,6 +223,9 @@ packages:
   '@brillout/import@0.2.3':
     resolution: {integrity: sha512-1T8WlD75eeFSMrptGy8jiLHmfHgMmSjWvLOIUvHmSVZt+6k0eQqYUoK4KbmE4T9pVLIfxvZSOm2D68VEqKRHRw==}
 
+  '@brillout/import@0.2.6':
+    resolution: {integrity: sha512-1GUTmADc8trUC1YSW2lp9r6PmwluMoEyHajnE1kxVdbKGD0wJOlq/DvTWMUqLtBDCnQR+n//qgMtz6HwA/lotA==}
+
   '@brillout/json-serializer@0.5.21':
     resolution: {integrity: sha512-pzzT4U4A9rk7eZpFjloRoMrGG2jnptwNGAhPIH7ZVjCMHd6TaJ29hrERPaY6Bp3Xdzu8JWlHI1o3x7PysxkaHQ==}
 
@@ -232,6 +238,9 @@ packages:
   '@brillout/vite-plugin-import-build@0.2.22':
     resolution: {integrity: sha512-n5sv0HdCB5WC2QJSnTN6iS/F+sJsF0AmtsCCaQ+5+dRjgsoGGsa3auinJV8tuEog5WsX+3MF8RIwn3A/u0e04w==}
 
+  '@brillout/vite-plugin-server-entry@0.7.15':
+    resolution: {integrity: sha512-0ClgcmjkhJoHbI6KhbjZlXMeA9qn/EPLXEVssjCE6IVYnVb4bTYuq635c44n7jV3GkjcgFHCQWBmNw0OAGiUvQ==}
+
   '@emnapi/core@1.5.0':
     resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
 
@@ -1597,42 +1606,18 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
-  '@types/body-parser@1.19.6':
-    resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
-
-  '@types/connect@3.4.38':
-    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
-
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@types/express-serve-static-core@4.19.6':
-    resolution: {integrity: sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==}
-
-  '@types/express@4.17.23':
-    resolution: {integrity: sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==}
-
   '@types/hast@2.3.10':
     resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
 
-  '@types/http-errors@2.0.5':
-    resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
-
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/mime@1.3.5':
-    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
-
   '@types/node@24.3.1':
     resolution: {integrity: sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==}
 
-  '@types/qs@6.14.0':
-    resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
-
-  '@types/range-parser@1.2.7':
-    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
-
   '@types/react-copy-to-clipboard@5.0.7':
     resolution: {integrity: sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==}
 
@@ -1647,12 +1632,6 @@ packages:
   '@types/react@19.1.12':
     resolution: {integrity: sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==}
 
-  '@types/send@0.17.5':
-    resolution: {integrity: sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==}
-
-  '@types/serve-static@1.15.8':
-    resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
-
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -2508,6 +2487,10 @@ packages:
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
+  isbot-fast@1.2.0:
+    resolution: {integrity: sha512-twjuQzy2gKMDVfKGQyQqrx6Uy4opu/fiVUTTpdqtFsd7OQijIp5oXvb27n5EemYXaijh5fomndJt/SPRLsEdSg==}
+    engines: {node: '>=6.0.0'}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -2950,6 +2933,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-streaming@0.4.4:
+    resolution: {integrity: sha512-LH80931vMUL6SVStyWk30O2cNmrFRmaMlYWYkmsplJFVz1eK0/0ovMo4q3CozARgVNsgaLN3wz2ZfeQ4wdvN9Q==}
+    peerDependencies:
+      react: '>=19'
+      react-dom: '>=19'
+
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -3104,6 +3093,10 @@ packages:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
 
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
   snapdragon-node@2.1.1:
     resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
     engines: {node: '>=0.10.0'}
@@ -3351,6 +3344,26 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vike-react@0.6.6:
+    resolution: {integrity: sha512-ese0SCQaUNGcDw2Iwq0vXjQk/aXiyfL4PGzdRuWumisFUwMN5Ed0PMjEqE1klvKj2dibJ3wCVwJHy+c2f+XrTw==}
+    peerDependencies:
+      react: '>=19'
+      react-dom: '>=19'
+      vike: '>=0.4.182'
+
+  vike@0.4.240:
+    resolution: {integrity: sha512-gWkLipuVjpKrNFmsXyoVJdS/gnCEZjdYLQFnv5NH9Pv9AcXVtUEcndi0PaKenH4wqmRlbftdMtfUqa9MlBtZ6g==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+    peerDependencies:
+      react-streaming: '>=0.3.42'
+      vite: '>=6.3.0'
+    peerDependenciesMeta:
+      react-streaming:
+        optional: true
+      vite:
+        optional: true
+
   vite-plugin-prerender@1.0.8:
     resolution: {integrity: sha512-DSfzhm6LlIlN4QFHPCa3Vi6mCLeODpQnlBHar7LttLOEXykPspP8QZtknCCzYFRCf2176Wj+A0X/lwl/MXNnJw==}
     peerDependencies:
@@ -3572,6 +3585,8 @@ snapshots:
 
   '@brillout/import@0.2.3': {}
 
+  '@brillout/import@0.2.6': {}
+
   '@brillout/json-serializer@0.5.21': {}
 
   '@brillout/picocolors@1.0.28': {}
@@ -3582,6 +3597,11 @@ snapshots:
     dependencies:
       '@brillout/import': 0.2.3
 
+  '@brillout/vite-plugin-server-entry@0.7.15':
+    dependencies:
+      '@brillout/import': 0.2.6
+      '@brillout/picocolors': 1.0.28
+
   '@emnapi/core@1.5.0':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -4808,49 +4828,18 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.4
 
-  '@types/body-parser@1.19.6':
-    dependencies:
-      '@types/connect': 3.4.38
-      '@types/node': 24.3.1
-
-  '@types/connect@3.4.38':
-    dependencies:
-      '@types/node': 24.3.1
-
   '@types/estree@1.0.8': {}
 
-  '@types/express-serve-static-core@4.19.6':
-    dependencies:
-      '@types/node': 24.3.1
-      '@types/qs': 6.14.0
-      '@types/range-parser': 1.2.7
-      '@types/send': 0.17.5
-
-  '@types/express@4.17.23':
-    dependencies:
-      '@types/body-parser': 1.19.6
-      '@types/express-serve-static-core': 4.19.6
-      '@types/qs': 6.14.0
-      '@types/serve-static': 1.15.8
-
   '@types/hast@2.3.10':
     dependencies:
       '@types/unist': 2.0.11
 
-  '@types/http-errors@2.0.5': {}
-
   '@types/json-schema@7.0.15': {}
 
-  '@types/mime@1.3.5': {}
-
   '@types/node@24.3.1':
     dependencies:
       undici-types: 7.10.0
 
-  '@types/qs@6.14.0': {}
-
-  '@types/range-parser@1.2.7': {}
-
   '@types/react-copy-to-clipboard@5.0.7':
     dependencies:
       '@types/react': 19.1.12
@@ -4867,17 +4856,6 @@ snapshots:
     dependencies:
       csstype: 3.1.3
 
-  '@types/send@0.17.5':
-    dependencies:
-      '@types/mime': 1.3.5
-      '@types/node': 24.3.1
-
-  '@types/serve-static@1.15.8':
-    dependencies:
-      '@types/http-errors': 2.0.5
-      '@types/node': 24.3.1
-      '@types/send': 0.17.5
-
   '@types/unist@2.0.11': {}
 
   '@typescript-eslint/eslint-plugin@8.43.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)':
@@ -5877,6 +5855,8 @@ snapshots:
 
   isarray@1.0.0: {}
 
+  isbot-fast@1.2.0: {}
+
   isexe@2.0.0: {}
 
   isobject@2.1.0:
@@ -6357,6 +6337,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.12
 
+  react-streaming@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      '@brillout/import': 0.2.3
+      '@brillout/json-serializer': 0.5.21
+      '@brillout/picocolors': 1.0.28
+      isbot-fast: 1.2.0
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
   react-style-singleton@2.2.3(@types/react@19.1.12)(react@19.1.1):
     dependencies:
       get-nonce: 1.0.1
@@ -6569,6 +6558,12 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   snapdragon-node@2.1.1:
     dependencies:
       define-property: 1.0.0
@@ -6825,6 +6820,35 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vike-react@0.6.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vike@0.4.240(react-streaming@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5))):
+    dependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-streaming: 0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      vike: 0.4.240(react-streaming@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5))
+
+  vike@0.4.240(react-streaming@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)):
+    dependencies:
+      '@brillout/import': 0.2.6
+      '@brillout/json-serializer': 0.5.21
+      '@brillout/picocolors': 1.0.28
+      '@brillout/require-shim': 0.1.2
+      '@brillout/vite-plugin-server-entry': 0.7.15
+      acorn: 8.15.0
+      cac: 6.7.14
+      es-module-lexer: 1.7.0
+      esbuild: 0.25.9
+      json5: 2.2.3
+      magic-string: 0.30.19
+      picomatch: 4.0.3
+      semver: 7.7.2
+      sirv: 3.0.2
+      source-map-support: 0.5.21
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      react-streaming: 0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      vite: 7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)
+
   vite-plugin-prerender@1.0.8(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)):
     dependencies:
       '@prerenderer/prerenderer': 0.7.2(debug@4.4.1)
@@ -6839,7 +6863,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  vite-plugin-ssr@0.4.142(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)):
+  vite-plugin-ssr@0.4.142(react-streaming@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)):
     dependencies:
       '@brillout/import': 0.2.3
       '@brillout/json-serializer': 0.5.21
@@ -6854,6 +6878,8 @@ snapshots:
       sirv: 2.0.4
       source-map-support: 0.5.21
       vite: 7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)
+    optionalDependencies:
+      react-streaming: 0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
 
   vite-prerender-plugin@0.5.12(vite@7.1.5(@types/node@24.3.1)(jiti@2.5.1)(tsx@4.20.5)):
     dependencies:

From a8d76992eb26a0790c081591a39301dce93234f7 Mon Sep 17 00:00:00 2001
From: Eliav Louski <louski.a@gmail.com>
Date: Mon, 22 Sep 2025 02:48:56 +0300
Subject: [PATCH 5/8] amount

---
 demo/src/examples/CustomOverflowExample.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/examples/CustomOverflowExample.tsx b/demo/src/examples/CustomOverflowExample.tsx
index 544dee9..d910dc5 100644
--- a/demo/src/examples/CustomOverflowExample.tsx
+++ b/demo/src/examples/CustomOverflowExample.tsx
@@ -134,7 +134,7 @@ const CustomOverflowElement = React.forwardRef<HTMLDivElement, { items: string[]
         />
         <div className="demo-container">
           <OverflowList
-            items={Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)}
+            items={Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`)}
             renderItem={(item) => <span className="tag">#{item}</span>}
             renderOverflow={(items) => <VirtualizedRadixOverflowMenu items={items} />}
             maxRows={5}

From 43da54bc593b7f7e70b2de819fd98d8547ad464e Mon Sep 17 00:00:00 2001
From: Eliav Louski <louski.a@gmail.com>
Date: Mon, 22 Sep 2025 02:53:04 +0300
Subject: [PATCH 6/8] changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47b09dc..edb4dd3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.2.0
+
+- dropped `minVisibleItems` prop in favor of simplicity (same effect can achieved with reversed flex direction and reversing the items array)
+- the component is now ssr-safe(tested adjusted on ssr environment).
+
 ## 0.1.0
 
 - Initial release

From 9d55da7e058337705022ab543b710ed15aec3f7b Mon Sep 17 00:00:00 2001
From: Eliav Louski <louski.a@gmail.com>
Date: Mon, 22 Sep 2025 02:53:51 +0300
Subject: [PATCH 7/8] 0.2.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f7d835c..bb16b50 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-overflow-list",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A responsive React component that shows as many items as can fit within constraints, hiding overflow items behind a configurable overflow renderer",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

From a9df3277dea1634d0f187e7ecf7954990dcc90de Mon Sep 17 00:00:00 2001
From: Eliav Louski <louski.a@gmail.com>
Date: Mon, 22 Sep 2025 02:56:02 +0300
Subject: [PATCH 8/8] polish

---
 demo/vite.config.ts | 43 ++++++++-----------------------------------
 1 file changed, 8 insertions(+), 35 deletions(-)

diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index 419c22c..447a275 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -3,51 +3,24 @@ import react from "@vitejs/plugin-react";
 import { fileURLToPath, URL } from "node:url";
 import vike from "vike/plugin";
 
-// import { ssr } from "vite-plugin-ssr/plugin";
-
 export default defineConfig(() => {
   const appMode = process.env.VITE_APP_MODE || ("spa" as "spa" | "ssr");
   console.log(`VITE_APP_MODE is "${appMode}"`);
 
-  const sharedConfig: Partial<import("vite").UserConfig> = {
-    base: process.env.NODE_ENV === "production" ? "/react-responsive-overflow-list/" : "/",
-    resolve: {
-      // trick to avoid needing to build-watch the library when developing the demo
-      alias: {
-        "react-responsive-overflow-list": fileURLToPath(new URL("../src/index.ts", import.meta.url)),
-      },
-    },
-  };
-
-  // if (appMode === "spa") {
-  //   return {
-  //     plugins: [react()],
-  //     ...sharedConfig,
-  //   };
-  // }
-
-  // ssr mode
   return {
-    plugins: [
-      // ssr({
-      //   prerender: true,
-      // }),
-      react(),
-      vike(),
-      // vitePrerenderPlugin({
-      //   renderTarget: "#root",
-      //   prerenderScript: path.resolve(__dirname, "src/prerender.tsx"),
-      // }),
-    ],
-    // build: {
-    //   minify: false,
-    // },
+    plugins: [react(), vike()],
     ssr: {
       // Don't externalize React for SSR
       noExternal: ["react-responsive-overflow-list", "react-syntax-highlighter", "@types/react-syntax-highlighter"],
       // Handle CommonJS modules
       // external: ["react-copy-to-clipboard"],
     },
-    ...sharedConfig,
+    base: process.env.NODE_ENV === "production" ? "/react-responsive-overflow-list/" : "/",
+    resolve: {
+      // trick to avoid needing to build-watch the library when developing the demo
+      alias: {
+        "react-responsive-overflow-list": fileURLToPath(new URL("../src/index.ts", import.meta.url)),
+      },
+    },
   };
 });