omsimos · joshxfi · Sep 20, 2025 · Sep 20, 2025 · Sep 20, 2025 · Sep 20, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -5,10 +5,26 @@ on: [push, pull_request]
 jobs:
   build-and-test:
     name: Build and Test
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.bun/install/cache
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lock') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lock') }}-
+
       - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
 
       - name: Install dependencies
         run: bun install

diff --git a/bun.lock b/bun.lock
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/next.config.mjs → docs/next.config.ts b/docs/next.config.mjs → docs/next.config.ts
@@ -1,9 +1,5 @@
 import createMDX from "@next/mdx";
-import remarkGfm from "remark-gfm";
-import rehypeSlug from "rehype-slug";
-import rehypePrettyCode from "rehype-pretty-code";
 
-/** @type {import('rehype-pretty-code').Options} */
 const options = {
   theme: "ayu-dark",
   bypassInlineCode: false,
@@ -12,12 +8,11 @@ const options = {
 const withMDX = createMDX({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [[rehypePrettyCode, options], rehypeSlug],
+    remarkPlugins: ["remark-gfm"],
+    rehypePlugins: [["rehype-pretty-code", options], "rehype-slug"],
   },
 });
 
-/** @type {import('next').NextConfig} */
 const nextConfig = {
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   reactStrictMode: true,

diff --git a/docs/package.json b/docs/package.json
@@ -3,33 +3,38 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.11",
+    "@next/mdx": "15.5.3",
     "@omsimos/react-highlight-popover": "*",
     "@types/mdx": "^2.0.13",
-    "next": "^14.2.11",
+    "next": "15.5.3",
     "nextjs-toploader": "^3.6.15",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.0",
-    "shiki": "^1.17.5"
+    "shiki": "^3.13.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5"
+  },
+  "overrides": {
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9"
   }
 }
diff --git a/docs/postcss.config.mjs b/docs/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx
@@ -1,6 +1,6 @@
 export default function MdxLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="prose prose-zinc max-w-screen-md mx-auto py-24">
+    <div className="prose prose-zinc max-w-(--breakpoint-md) mx-auto py-24">
       {children}
     </div>
   );

diff --git a/docs/src/app/docs/page.mdx b/docs/src/app/docs/page.mdx
@@ -28,7 +28,7 @@ import { HighlightPopover } from '@omsimos/react-highlight-popover';
 
 function App() {
   const renderPopover = ({ selection }) => (
-    <div className="bg-white border rounded p-2 shadow-lg select-none">
+    <div className="bg-white border rounded-sm p-2 shadow-lg select-none">
       You selected: {selection}
     </div>
   );

diff --git a/docs/src/app/globals.css b/docs/src/app/globals.css
@@ -1,28 +1,50 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
-:root {
-  --background: #ffffff;
-  --foreground: #242424;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-}
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-pre {
-  overflow-x: auto;
-  padding: 1rem 0;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
 }
 
-pre [data-line] {
-  padding: 0 1rem;
+@utility text-balance {
+  text-wrap: balance;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --background: #ffffff;
+    --foreground: #242424;
+  }
+
+  body {
+    color: var(--foreground);
+    background: var(--background);
+  }
+
+  pre {
+    overflow-x: auto;
+    padding: 1rem 0;
+  }
+
+  pre [data-line] {
+    padding: 0 1rem;
   }
 }
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -14,7 +14,7 @@ export default function Home() {
           Documentation
         </Link>
 
-        <div className="text-zinc-800 bg-zinc-50/50 rounded-lg shadow-sm border px-4 py-3 ">
+        <div className="text-zinc-800 bg-zinc-50/50 rounded-lg shadow-xs border px-4 py-3 ">
           <p>
             npm install{" "}
             <span className="font-semibold">

diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md
@@ -1,11 +1,25 @@
 # @omsimos/react-highlight-popover
 
+## 1.4.0
+
+### Minor Changes
+
+- ### Performance Improvements 🚀
+  - Reduced unnecessary renders by skipping popover position and selection updates when nothing changed.
+  - Added a safeguarded `requestAnimationFrame` throttle so multiple `selectionchange` events collapse into a single render and any pending frame is cancelled on unmount.
+
+- ### Lifecycle Reliability ✅
+  - Ensured selection lifecycle callbacks only fire on real visibility transitions and always emit `onPopoverHide` during teardown.
+  - Prevented duplicate processing when range boundary points remain unchanged, keeping drag interactions smooth.
+
+- ### Compatibility 🔁
+  - Expanded peer dependency support to include React 19 while keeping full compatibility with React 17 and 18.
+
 ## 1.3.2
 
 ### Patch Changes
 
 - ### Bug Fixes 🐞
-
   - **Removed Redundant Click-Outside Logic**:
     - The `useEffect` that handled clicks outside the popover has been removed. This was causing issues where clicking outside on elements with `user-select: none` would unintentionally close the popover, even though the text remained highlighted.
     - Since clicking outside naturally removes text selection, the previous logic was redundant and caused bugs by closing the popover prematurely.
@@ -23,7 +37,6 @@
 ### Patch Changes
 
 - ### Bug Fixes 🐞
-
   - **Removed Unintended `.mjs` File**: An unnecessary file was unintentionally included in the v1.3.0 build. This patch removes the file, ensuring a cleaner build and reducing the package size.
 
   ## Upgrade Instructions
@@ -39,14 +52,12 @@
 ### Minor Changes
 
 - ### Performance Improvements 🚀
-
   - **Memoized Components**: Both the main `HighlightPopover` component and the new `PopoverContent` component are now memoized using `React.memo()`, significantly reducing unnecessary re-renders.
   - **Optimized Event Handling**: The `selectionchange` event listener now uses `requestAnimationFrame` to batch updates, reducing the frequency of calculations and improving overall performance.
   - **Reduced State Updates**: The `handleSelection` function now checks conditions before updating state, minimizing unnecessary renders.
   - **Memoized Context Value**: The `contextValue` is now memoized to prevent unnecessary re-renders of context consumers.
 
   ### Documentation 📚
-
   - **Updated Basic Example**: The basic usage example in the documentation now demonstrates the use of the `useHighlightPopover` hook, providing a more comprehensive illustration of the component's capabilities.
 
   ## Upgrade Instructions
@@ -62,15 +73,12 @@
 ### Minor Changes
 
 - ### New Features 🚀
-
   - **Alignment Prop for Popover**: Introduced a new `alignment` prop that allows for positioning the popover relative to the selected text. Supported values: `'left'`, `'center'`, `'right'`. The default is set to `'center'`.
 
   ### Bug Fixes 🐞
-
   - **Resolved ARIA Typo**: Fixed a typo in the ARIA attribute to improve accessibility.
 
   ### Under The Hood 🔧
-
   - **ESM-Only Package**: The package has been converted to ESM-only, improving compatibility with modern JavaScript environments.
   - **Minified Package Output**: Reduced the bundle size by minifying the package output, leading to better performance and faster load times.
 
@@ -118,15 +126,13 @@ npm install @omsimos/react-highlight-popover@latest
   We're excited to announce the initial release of React Highlight Popover, a customizable, headless React component for creating popovers on text selection, with zero dependencies!
 
   ## 🎉 Highlights
-
   - **Headless Component**: Maximum flexibility for styling and integration
   - **Zero Dependencies**: Only React as a peer dependency
   - **Customizable**: Fine-tune behavior with props and callbacks
   - **Lightweight**: Minimal impact on your bundle size
   - **TypeScript Support**: Full type definitions included
 
   ## 🚀 Features
-
   - Easy-to-use React component
   - Fully customizable popover content and styling
   - Configurable minimum selection length
@@ -171,7 +177,6 @@ npm install @omsimos/react-highlight-popover@latest
   ## 📝 Changelog
 
   ### v1.0.0
-
   - Initial release of React Highlight Popover
   - Implemented core HighlightPopover component
   - Added useHighlightPopover hook for accessing internal state

diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@omsimos/react-highlight-popover",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,8 @@
     "package.json"
   ],
   "scripts": {
-    "build": "rm -rf dist && tsup src/index.ts --format esm --dts --minify",
-    "dev": "tsup src/index.ts --format esm --dts --minify --watch"
+    "build": "rm -rf dist && tsdown src/index.ts --format esm --dts --minify",
+    "dev": "tsdown src/index.ts --format esm --dts --minify --watch"
   },
   "keywords": [
     "react",
@@ -36,8 +36,8 @@
   },
   "homepage": "https://react-highlight-popover.omsimos.com",
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "type": "module",
   "sideEffects": false