feat: add useVisibility hook and optimize toolbar UI performance

## New Features
- Add useVisibility hook for intersection observer-based lazy loading
  - Supports configurable root margin (default: 300px)
  - Includes fallback for environments without IntersectionObserver
  - Provides ref and visible state for component integration

## UI Improvements
- Optimize toolbar image thumbnail dimensions
  - Reduce thumbnail height from 32 to 24 units
  - Reduce thumbnail width from 40 to 32 units
  - Adjust minimum width from 40 to 32 units
- Improve toolbar scrolling behavior
  - Add overflowY: hidden to prevent vertical scrolling
  - Add vertical padding (pt: 2.5, pb: 2) for better spacing
- Remove hover scale transform effect for smoother interactions
  - Commented out transform: "scale(1.02)" on hover
  - Maintains box shadow hover effect for visual feedback

## Performance Enhancements
- Smaller thumbnail sizes reduce memory usage and improve rendering
- useVisibility hook enables lazy loading capabilities for better performance
- Optimized scrolling container prevents unnecessary overflow

## Technical Details
- useVisibility hook uses TypeScript generics for type safety
- Includes proper cleanup and cancellation handling
- Fallback detection for elements already in viewport
- Compatible with custom root elements and configurable margins

Author: ahnv

examples/react-example/src/index.tsx

@@ -36,16 +36,43 @@ function App() {
             requireSignedUrl: false,
           },
         },
+        ...Array.from({ length: 10000 }).map((_, i) => ({
+          url: `https://ik.imagekit.io/v3sxk1svj/placeholder.jpg?updatedAt=${Date.now()}&v=${i}`,
+          metadata: {
+            requireSignedUrl: false,
+          },
+        })),
       ],
       onAddImage: handleAddImage,
       onClose: () => setOpen(false),
-      exportOptions: {
-        label: "Export",
-        icon: <Icon boxSize={"5"} as={PiDownload} />,
-        onClick: (images) => {
-          console.log(images)
+      exportOptions: [
+        {
+          type: "button",
+          label: "Export",
+          icon: <Icon boxSize={"5"} as={PiDownload} />,
+          isVisible: true,
+          onClick: (images) => {
+            console.log(images)
+          },
         },
-      },
+        {
+          type: "menu",
+          label: "Export",
+          icon: <Icon boxSize={"5"} as={PiDownload} />,
+          isVisible: true,
+          options: [
+            {
+              type: "button",
+              label: "Export",
+              icon: <Icon boxSize={"5"} as={PiDownload} />,
+              isVisible: true,
+              onClick: (images) => {
+                console.log(images)
+              },
+            },
+          ],
+        },
+      ],
       signer: async (request) => {
         console.log(request)
         await new Promise((resolve) => setTimeout(resolve, 10000))

packages/imagekit-editor-dev/src/ImageKitEditor.tsx

@@ -1,9 +1,9 @@
 import { ChakraProvider, theme as defaultTheme } from "@chakra-ui/react"
 import type { Dict } from "@chakra-ui/utils"
-import { isEqual } from "lodash"
 import merge from "lodash/merge"
 import React, { forwardRef, useImperativeHandle } from "react"
 import { EditorLayout, EditorWrapper } from "./components/editor"
+import type { HeaderProps } from "./components/header"
 import {
   type FileElement,
   type RequiredMetadata,
@@ -23,21 +23,7 @@ interface EditorProps<Metadata extends RequiredMetadata = RequiredMetadata> {
   initialImages?: Array<string | FileElement<Metadata>>
   signer?: Signer<Metadata>
   onAddImage?: () => void
-  exportOptions?:
-    | {
-        label: string
-        icon?: React.ReactElement
-        onClick: (images: string[]) => void
-      }
-    | {
-        label: string
-        icon?: React.ReactElement
-        options: Array<{
-          label: string
-          isVisible: boolean | ((images: string[]) => boolean)
-          onClick: (images: string[]) => void
-        }>
-      }
+  exportOptions?: HeaderProps["exportOptions"]
 
   onClose: (args: { dirty: boolean; destroy: () => void }) => void
 }