From 6beb63145ffb7012e0424c73a29bf9c2611941c5 Mon Sep 17 00:00:00 2001
From: imran <isoteriksoftware@gmail.com>
Date: Mon, 3 Jun 2024 16:07:17 +0100
Subject: [PATCH 1/6] fixed bad imports

---
 src/components/ObjectItem/ObjectItem.tsx     | 2 +-
 src/components/VideoItem/useVideoMaterial.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ObjectItem/ObjectItem.tsx b/src/components/ObjectItem/ObjectItem.tsx
index d20b891..76bfbed 100644
--- a/src/components/ObjectItem/ObjectItem.tsx
+++ b/src/components/ObjectItem/ObjectItem.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { usePlacementOnGalleryItem } from "../GalleryItem";
 import { Mesh } from "three";
 import { ObjectItemProps } from "./ObjectItem.types";
-import { TransparentItem } from "react-gallery-3d";
+import { TransparentItem } from "../TransparentItem";
 
 /**
  * Renders and aligns the object on the gallery item.
diff --git a/src/components/VideoItem/useVideoMaterial.ts b/src/components/VideoItem/useVideoMaterial.ts
index db2819e..0a5fd85 100644
--- a/src/components/VideoItem/useVideoMaterial.ts
+++ b/src/components/VideoItem/useVideoMaterial.ts
@@ -1,6 +1,6 @@
 import { DoubleSide, MeshStandardMaterial, VideoTexture } from "three";
 import { useEffect, useMemo } from "react";
-import { UseVideoMaterialOptions, UseVideoMaterialResult } from "react-gallery-3d";
+import { UseVideoMaterialOptions, UseVideoMaterialResult } from "./VideoItem.types";
 
 /**
  * This hook creates a material mapped to a video from the provided source.

From 8c204ac37795aa42602e977da092d6801932da79 Mon Sep 17 00:00:00 2001
From: imran <isoteriksoftware@gmail.com>
Date: Mon, 3 Jun 2024 19:23:27 +0100
Subject: [PATCH 2/6] initial new gallery children rendering impl

---
 package.json                                  | 16 +--
 src/components/Gallery/Gallery.tsx            | 67 ++++++-------
 src/components/Gallery/Gallery.types.ts       |  6 ++
 src/components/Gallery/GalleryContext.ts      |  4 +-
 src/components/Gallery/useGallery.ts          |  4 +-
 src/components/GalleryItem/GalleryItem.tsx    | 97 +++++++++++++------
 .../GalleryItem/GalleryItemContext.ts         |  8 +-
 yarn.lock                                     |  5 +
 8 files changed, 124 insertions(+), 83 deletions(-)

diff --git a/package.json b/package.json
index c323158..101468e 100644
--- a/package.json
+++ b/package.json
@@ -39,20 +39,24 @@
   "module": "./dist/react-gallery-3d.es.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "three-csg-ts": "^3.1.13"
+    "three-csg-ts": "^3.1.13",
+    "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
     "@react-three/drei": ">=9.88.11",
     "@react-three/fiber": ">=8.15.10",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
     "three": ">=0.158.0"
   },
   "devDependencies": {
+    "@react-three/drei": "^9.88.11",
+    "@react-three/fiber": "^8.15.10",
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/three": "^0.158.0",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
@@ -67,14 +71,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hooks": "^1.0.1",
+    "three": "^0.158.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.6.3",
     "vite-plugin-linter": "^2.0.7",
-    "vite-tsconfig-paths": "^4.2.1",
-    "@react-three/drei": "^9.88.11",
-    "@react-three/fiber": "^8.15.10",
-    "three": "^0.158.0"
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "repository": {
     "type": "git",
diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
index 8d9ef40..1db39fb 100644
--- a/src/components/Gallery/Gallery.tsx
+++ b/src/components/Gallery/Gallery.tsx
@@ -1,7 +1,6 @@
-import React, { useMemo } from "react";
-import GalleryContext from "./GalleryContext";
-import GalleryItemContext from "../GalleryItem/GalleryItemContext";
-import { AllowedGalleryItemTypes, GalleryProps } from "./Gallery.types";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { GalleryContext } from "./GalleryContext";
+import { GalleryProps } from "./Gallery.types";
 import { Group } from "three";
 
 /**
@@ -12,9 +11,11 @@ import { Group } from "three";
  * @param item The gallery item properties.
  */
 export const Gallery = React.forwardRef<Group, GalleryProps>(({ children, item, ...rest }, ref) => {
-  if (children.length < 3) {
-    throw new Error("At least 3 Gallery Items are required");
-  }
+  // if (children.length < 3) {
+  //   throw new Error("At least 3 Gallery Items are required");
+  // }
+
+  const [itemsId, setItemsId] = useState<string[]>([]);
 
   const {
     width = 120,
@@ -24,28 +25,32 @@ export const Gallery = React.forwardRef<Group, GalleryProps>(({ children, item,
     innerRadiusPercent = 0.01,
   } = item || {};
 
-  /**
-   * Gets the children that are allowed to be rendered.
-   */
-  const validChildren = useMemo(() => {
-    return children.filter((child) => {
-      if (!AllowedGalleryItemTypes.includes(child.type)) {
-        if (Array.isArray(child)) {
-          return child.every((subChild) => {
-            return AllowedGalleryItemTypes.includes(subChild.type);
-          });
-        }
+  const registerItem = useCallback((id: string) => {
+    setItemsId((prevItems) => {
+      if (prevItems.includes(id)) {
+        // eslint-disable-next-line no-console
+        console.warn("GalleryItem is already registered");
+        return prevItems;
       }
 
-      return true;
+      return [...prevItems, id];
     });
-  }, [children]);
+  }, []);
+
+  const unregisterItem = useCallback((id: string) => {
+    setItemsId((prevItems) => prevItems.filter((i) => i !== id));
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log({ itemsId });
+  }, [itemsId]);
 
   /**
    * Calculates the section angle, outer radius, and inner radius.
    */
   const { sectionAngle, outerRadius, innerRadius } = useMemo(() => {
-    const sides = validChildren.length;
+    const sides = itemsId.length;
     const sectionAngle = (2 * Math.PI) / sides;
     const outerRadius = width / 2;
     const innerRadius = outerRadius - outerRadius * innerRadiusPercent;
@@ -55,12 +60,15 @@ export const Gallery = React.forwardRef<Group, GalleryProps>(({ children, item,
       outerRadius,
       innerRadius,
     };
-  }, [validChildren.length, width, innerRadiusPercent]);
+  }, [itemsId.length, width, innerRadiusPercent]);
 
   return (
     <GalleryContext.Provider
       value={{
-        itemCount: validChildren.length,
+        itemsId,
+        registerItem,
+        unregisterItem,
+        itemCount: itemsId.length,
         item: {
           width,
           height,
@@ -74,18 +82,7 @@ export const Gallery = React.forwardRef<Group, GalleryProps>(({ children, item,
       }}
     >
       <group ref={ref} {...rest}>
-        {validChildren.map((child, index) => {
-          return (
-            <GalleryItemContext.Provider
-              key={index}
-              value={{
-                itemIndex: index,
-              }}
-            >
-              {child}
-            </GalleryItemContext.Provider>
-          );
-        })}
+        {children}
       </group>
     </GalleryContext.Provider>
   );
diff --git a/src/components/Gallery/Gallery.types.ts b/src/components/Gallery/Gallery.types.ts
index 3370b78..d773e63 100644
--- a/src/components/Gallery/Gallery.types.ts
+++ b/src/components/Gallery/Gallery.types.ts
@@ -22,6 +22,12 @@ export type GalleryState = {
    */
   itemCount: number;
 
+  itemsId: string[];
+
+  registerItem: (id: string) => void;
+
+  unregisterItem: (id: string) => void;
+
   /**
    * The gallery item properties.
    */
diff --git a/src/components/Gallery/GalleryContext.ts b/src/components/Gallery/GalleryContext.ts
index 46eba74..a42b391 100644
--- a/src/components/Gallery/GalleryContext.ts
+++ b/src/components/Gallery/GalleryContext.ts
@@ -4,8 +4,6 @@ import { GalleryState, GALLERY_NO_PROVIDER_FLAG } from "./Gallery.types";
 /**
  * This context is used to provide the gallery state to the gallery components.
  */
-const GalleryContext = createContext<GalleryState | typeof GALLERY_NO_PROVIDER_FLAG>(
+export const GalleryContext = createContext<GalleryState | typeof GALLERY_NO_PROVIDER_FLAG>(
   GALLERY_NO_PROVIDER_FLAG,
 );
-
-export default GalleryContext;
diff --git a/src/components/Gallery/useGallery.ts b/src/components/Gallery/useGallery.ts
index a90beca..09170d0 100644
--- a/src/components/Gallery/useGallery.ts
+++ b/src/components/Gallery/useGallery.ts
@@ -1,7 +1,7 @@
 import { useContext } from "react";
-import GalleryContext from "./GalleryContext";
+import { GalleryContext } from "./GalleryContext";
 import { GALLERY_NO_PROVIDER_FLAG, GalleryState } from "./Gallery.types";
-import GalleryItemContext from "../GalleryItem/GalleryItemContext";
+import { GalleryItemContext } from "../GalleryItem/GalleryItemContext";
 import { GALLERY_ITEM_NO_PROVIDER_FLAG } from "../GalleryItem";
 
 /**
diff --git a/src/components/GalleryItem/GalleryItem.tsx b/src/components/GalleryItem/GalleryItem.tsx
index e6e60b5..dd10c8b 100644
--- a/src/components/GalleryItem/GalleryItem.tsx
+++ b/src/components/GalleryItem/GalleryItem.tsx
@@ -1,9 +1,11 @@
-import { GALLERY_ITEM_NO_PROVIDER_FLAG, GalleryItemProps } from "./GalleryItem.types";
-import React, { useCallback, useContext, useEffect, useMemo } from "react";
-import { useGallery } from "../Gallery";
+import { GalleryItemProps } from "./GalleryItem.types";
+import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { GALLERY_NO_PROVIDER_FLAG } from "../Gallery";
 import { CylinderGeometry, Mesh } from "three";
 import { CSG } from "three-csg-ts";
-import GalleryItemContext from "./GalleryItemContext";
+import { GalleryItemContext } from "./GalleryItemContext";
+import { GalleryContext } from "../Gallery/GalleryContext";
+import * as uuid from "uuid";
 
 /**
  * This component is a child of the gallery component, and it represents an item in the gallery.
@@ -11,16 +13,31 @@ import GalleryItemContext from "./GalleryItemContext";
  * @param material The material to use for the item.
  * @param children The children to render.
  */
-export const GalleryItem = React.forwardRef<Mesh, GalleryItemProps>(
+export const GalleryItem = forwardRef<Mesh, GalleryItemProps>(
   ({ material, children, ...rest }, ref) => {
-    const itemData = useContext(GalleryItemContext);
-    if (itemData === GALLERY_ITEM_NO_PROVIDER_FLAG) {
+    const galleryState = useContext(GalleryContext);
+    if (galleryState === GALLERY_NO_PROVIDER_FLAG) {
       throw new Error("GalleryItem must be a child of Gallery");
     }
 
-    const { itemIndex } = itemData;
-    const { outerRadius, height, radialSegments, heightSegments, sectionAngle, innerRadius } =
-      useGallery().item;
+    const { registerItem, unregisterItem, itemsId } = galleryState;
+
+    const itemId = useMemo(() => uuid.v4(), []);
+    const [itemIndex, setItemIndex] = useState<number>();
+
+    useEffect(() => {
+      registerItem(itemId);
+      return () => unregisterItem(itemId);
+    }, [itemId, registerItem, unregisterItem]);
+
+    useEffect(() => {
+      const index = itemsId.indexOf(itemId);
+      setItemIndex(index === -1 ? undefined : index);
+    }, [itemId, itemsId]);
+
+    const {
+      item: { outerRadius, height, radialSegments, heightSegments, sectionAngle, innerRadius },
+    } = galleryState;
 
     /**
      * Creates a cylinder geometry with the specified radius.
@@ -30,16 +47,18 @@ export const GalleryItem = React.forwardRef<Mesh, GalleryItemProps>(
      */
     const createCylinderGeometry = useCallback(
       (radius: number) => {
-        return new CylinderGeometry(
-          radius,
-          radius,
-          height,
-          radialSegments,
-          heightSegments,
-          false,
-          itemIndex * sectionAngle,
-          sectionAngle,
-        );
+        return itemIndex === undefined
+          ? null
+          : new CylinderGeometry(
+              radius,
+              radius,
+              height,
+              radialSegments,
+              heightSegments,
+              false,
+              itemIndex * sectionAngle,
+              sectionAngle,
+            );
       },
       [height, heightSegments, itemIndex, radialSegments, sectionAngle],
     );
@@ -56,30 +75,46 @@ export const GalleryItem = React.forwardRef<Mesh, GalleryItemProps>(
     }, [createCylinderGeometry, innerRadius]);
 
     const mesh = useMemo(() => {
-      innerMesh.geometry = innerGeometry;
-      outerMesh.geometry = outerGeometry;
+      if (innerGeometry && outerGeometry) {
+        innerMesh.geometry = innerGeometry;
+        outerMesh.geometry = outerGeometry;
 
-      // Perform CSG subtraction to hollow out the segment
-      return CSG.subtract(outerMesh, innerMesh);
+        // Perform CSG subtraction to hollow out the segment
+        return CSG.subtract(outerMesh, innerMesh);
+      }
     }, [innerGeometry, innerMesh, outerGeometry, outerMesh]);
 
     useEffect(() => {
-      outerMesh.geometry = outerGeometry;
+      if (outerGeometry) {
+        outerMesh.geometry = outerGeometry;
+      }
     }, [outerGeometry, outerMesh]);
 
     useEffect(() => {
-      innerMesh.geometry = innerGeometry;
-      innerMesh.position.y = -0.01; // Offset to prevent z-fighting
+      if (innerGeometry) {
+        innerMesh.geometry = innerGeometry;
+        innerMesh.position.y = -0.01; // Offset to prevent z-fighting
+      }
     }, [innerGeometry, innerMesh]);
 
     useEffect(() => {
-      mesh.material = material;
+      if (mesh) {
+        mesh.material = material;
+      }
     }, [material, mesh]);
 
+    if (itemIndex === undefined || !mesh) return null;
+
     return (
-      <primitive object={mesh} ref={ref} {...rest}>
-        {children}
-      </primitive>
+      <GalleryItemContext.Provider
+        value={{
+          itemIndex,
+        }}
+      >
+        <primitive object={mesh} ref={ref} {...rest}>
+          {children}
+        </primitive>
+      </GalleryItemContext.Provider>
     );
   },
 );
diff --git a/src/components/GalleryItem/GalleryItemContext.ts b/src/components/GalleryItem/GalleryItemContext.ts
index bcf05d9..857f57d 100644
--- a/src/components/GalleryItem/GalleryItemContext.ts
+++ b/src/components/GalleryItem/GalleryItemContext.ts
@@ -4,8 +4,6 @@ import { GALLERY_ITEM_NO_PROVIDER_FLAG, GalleryItemState } from ".";
 /**
  * This context is used to provide the gallery item state to the gallery item components.
  */
-const GalleryItemContext = createContext<GalleryItemState | typeof GALLERY_ITEM_NO_PROVIDER_FLAG>(
-  GALLERY_ITEM_NO_PROVIDER_FLAG,
-);
-
-export default GalleryItemContext;
+export const GalleryItemContext = createContext<
+  GalleryItemState | typeof GALLERY_ITEM_NO_PROVIDER_FLAG
+>(GALLERY_ITEM_NO_PROVIDER_FLAG);
diff --git a/yarn.lock b/yarn.lock
index 852e8af..cbebe9d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -768,6 +768,11 @@
     fflate "~0.6.10"
     meshoptimizer "~0.18.1"
 
+"@types/uuid@^9.0.8":
+  version "9.0.8"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
+  integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
+
 "@types/webxr@*", "@types/webxr@^0.5.2":
   version "0.5.8"
   resolved "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.8.tgz"

From 2db098e2adb86a359f0fff93606f27970fdd0dd0 Mon Sep 17 00:00:00 2001
From: imran <isoteriksoftware@gmail.com>
Date: Tue, 4 Jun 2024 09:01:16 +0100
Subject: [PATCH 3/6] fixed GalleryItemContext bug

---
 src/components/Gallery/Gallery.tsx               | 2 +-
 src/components/GalleryItem/GalleryItemContext.ts | 2 +-
 tsconfig.json                                    | 3 ---
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
index 1db39fb..5d6b724 100644
--- a/src/components/Gallery/Gallery.tsx
+++ b/src/components/Gallery/Gallery.tsx
@@ -29,7 +29,7 @@ export const Gallery = React.forwardRef<Group, GalleryProps>(({ children, item,
     setItemsId((prevItems) => {
       if (prevItems.includes(id)) {
         // eslint-disable-next-line no-console
-        console.warn("GalleryItem is already registered");
+        console.warn(`GalleryItem id is already registered: "${id}"`);
         return prevItems;
       }
 
diff --git a/src/components/GalleryItem/GalleryItemContext.ts b/src/components/GalleryItem/GalleryItemContext.ts
index 857f57d..00baba4 100644
--- a/src/components/GalleryItem/GalleryItemContext.ts
+++ b/src/components/GalleryItem/GalleryItemContext.ts
@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { GALLERY_ITEM_NO_PROVIDER_FLAG, GalleryItemState } from ".";
+import { GALLERY_ITEM_NO_PROVIDER_FLAG, GalleryItemState } from "./GalleryItem.types";
 
 /**
  * This context is used to provide the gallery item state to the gallery item components.
diff --git a/tsconfig.json b/tsconfig.json
index 61602c0..ffa9329 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,9 +18,6 @@
     "esModuleInterop": true ,
     "declarationMap": true,
     "baseUrl": ".",
-    "paths": {
-      "react-gallery-3d": [ "src/index.ts" ]
-    },
     "typeRoots": [
       "node_modules/@types",
       "src/index.d.ts"

From 7fea34bc788d04c780ce03f1c75c52b5ce0730a6 Mon Sep 17 00:00:00 2001
From: imran <isoteriksoftware@gmail.com>
Date: Tue, 4 Jun 2024 11:02:27 +0100
Subject: [PATCH 4/6] updated useGallery()

---
 src/components/Gallery/Gallery.tsx         |  7 +---
 src/components/Gallery/Gallery.types.ts    | 23 +++++++++++
 src/components/Gallery/useGallery.ts       | 46 +++++++++++++++++-----
 src/components/GalleryItem/GalleryItem.tsx |  4 +-
 4 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
index 5d6b724..4ade176 100644
--- a/src/components/Gallery/Gallery.tsx
+++ b/src/components/Gallery/Gallery.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { GalleryContext } from "./GalleryContext";
 import { GalleryProps } from "./Gallery.types";
 import { Group } from "three";
@@ -41,11 +41,6 @@ export const Gallery = React.forwardRef<Group, GalleryProps>(({ children, item,
     setItemsId((prevItems) => prevItems.filter((i) => i !== id));
   }, []);
 
-  useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log({ itemsId });
-  }, [itemsId]);
-
   /**
    * Calculates the section angle, outer radius, and inner radius.
    */
diff --git a/src/components/Gallery/Gallery.types.ts b/src/components/Gallery/Gallery.types.ts
index d773e63..b61d550 100644
--- a/src/components/Gallery/Gallery.types.ts
+++ b/src/components/Gallery/Gallery.types.ts
@@ -22,10 +22,25 @@ export type GalleryState = {
    */
   itemCount: number;
 
+  /**
+   * The gallery items ids.
+   */
   itemsId: string[];
 
+  /**
+   * Registers a gallery item.
+   * This function is called by the gallery item component to register itself.
+   *
+   * @param id The id of the gallery item.
+   */
   registerItem: (id: string) => void;
 
+  /**
+   * Unregisters a gallery item.
+   * This function is called by the gallery item component to unregister itself.
+   *
+   * @param id The id of the gallery item.
+   */
   unregisterItem: (id: string) => void;
 
   /**
@@ -80,6 +95,14 @@ export type GalleryState = {
   };
 };
 
+/**
+ * The useGallery hook return type.
+ */
+export type UseGalleryReturnType = Omit<
+  GalleryState,
+  "itemsId" | "registerItem" | "unregisterItem"
+>;
+
 /**
  * The valid gallery item types.
  * These are the types that can be used as children of the Gallery component.
diff --git a/src/components/Gallery/useGallery.ts b/src/components/Gallery/useGallery.ts
index 09170d0..87e8e4e 100644
--- a/src/components/Gallery/useGallery.ts
+++ b/src/components/Gallery/useGallery.ts
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { GalleryContext } from "./GalleryContext";
-import { GALLERY_NO_PROVIDER_FLAG, GalleryState } from "./Gallery.types";
+import { GALLERY_NO_PROVIDER_FLAG, UseGalleryReturnType } from "./Gallery.types";
 import { GalleryItemContext } from "../GalleryItem/GalleryItemContext";
 import { GALLERY_ITEM_NO_PROVIDER_FLAG } from "../GalleryItem";
 
@@ -8,19 +8,47 @@ import { GALLERY_ITEM_NO_PROVIDER_FLAG } from "../GalleryItem";
  * A hook to get the gallery data.
  * This hook must be called within a Gallery component.
  *
- * @returns {GalleryState} The gallery state data.
+ * @returns {UseGalleryReturnType} The gallery state data.
  */
-export const useGallery = (): GalleryState => {
-  const data = useContext(GalleryContext);
+export const useGallery = (): UseGalleryReturnType => {
+  const galleryState = useContext(GalleryContext);
 
-  if (data === GALLERY_NO_PROVIDER_FLAG) {
+  if (galleryState === GALLERY_NO_PROVIDER_FLAG) {
     throw new Error("useGallery must be called within a Gallery");
   }
 
-  const itemData = useContext(GalleryItemContext);
-  if (itemData !== GALLERY_ITEM_NO_PROVIDER_FLAG) {
-    data.item.itemIndex = itemData.itemIndex;
+  const galleryItemState = useContext(GalleryItemContext);
+  if (galleryItemState !== GALLERY_ITEM_NO_PROVIDER_FLAG) {
+    galleryState.item.itemIndex = galleryItemState.itemIndex;
   }
 
-  return data;
+  const {
+    itemCount,
+    item: {
+      width,
+      height,
+      radialSegments,
+      heightSegments,
+      innerRadiusPercent,
+      sectionAngle,
+      outerRadius,
+      innerRadius,
+      itemIndex,
+    },
+  } = galleryState;
+
+  return {
+    itemCount,
+    item: {
+      width,
+      height,
+      radialSegments,
+      heightSegments,
+      innerRadiusPercent,
+      sectionAngle,
+      outerRadius,
+      innerRadius,
+      itemIndex,
+    },
+  };
 };
diff --git a/src/components/GalleryItem/GalleryItem.tsx b/src/components/GalleryItem/GalleryItem.tsx
index dd10c8b..f7c8512 100644
--- a/src/components/GalleryItem/GalleryItem.tsx
+++ b/src/components/GalleryItem/GalleryItem.tsx
@@ -5,7 +5,7 @@ import { CylinderGeometry, Mesh } from "three";
 import { CSG } from "three-csg-ts";
 import { GalleryItemContext } from "./GalleryItemContext";
 import { GalleryContext } from "../Gallery/GalleryContext";
-import * as uuid from "uuid";
+import { v4 as uuid } from "uuid";
 
 /**
  * This component is a child of the gallery component, and it represents an item in the gallery.
@@ -22,7 +22,7 @@ export const GalleryItem = forwardRef<Mesh, GalleryItemProps>(
 
     const { registerItem, unregisterItem, itemsId } = galleryState;
 
-    const itemId = useMemo(() => uuid.v4(), []);
+    const itemId = useMemo(() => uuid(), []);
     const [itemIndex, setItemIndex] = useState<number>();
 
     useEffect(() => {

From 1d012930dda65ddf887cdf4b3d3ae07eece1f493 Mon Sep 17 00:00:00 2001
From: imran <isoteriksoftware@gmail.com>
Date: Tue, 4 Jun 2024 11:04:21 +0100
Subject: [PATCH 5/6] Update package.json

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

diff --git a/package.json b/package.json
index f97f26f..fad9a7e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-gallery-3d",
   "private": false,
-  "version": "2.1.0",
+  "version": "2.2.0-beta.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

From 4157859bb6789d89691e2b5538f4bbd78ded6106 Mon Sep 17 00:00:00 2001
From: imran <isoteriksoftware@gmail.com>
Date: Tue, 4 Jun 2024 11:11:04 +0100
Subject: [PATCH 6/6] updated GalleryItemType

---
 src/components/Gallery/Gallery.tsx      |  4 ----
 src/components/Gallery/Gallery.types.ts | 32 ++-----------------------
 2 files changed, 2 insertions(+), 34 deletions(-)

diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
index 4ade176..99e8239 100644
--- a/src/components/Gallery/Gallery.tsx
+++ b/src/components/Gallery/Gallery.tsx
@@ -11,10 +11,6 @@ import { Group } from "three";
  * @param item The gallery item properties.
  */
 export const Gallery = React.forwardRef<Group, GalleryProps>(({ children, item, ...rest }, ref) => {
-  // if (children.length < 3) {
-  //   throw new Error("At least 3 Gallery Items are required");
-  // }
-
   const [itemsId, setItemsId] = useState<string[]>([]);
 
   const {
diff --git a/src/components/Gallery/Gallery.types.ts b/src/components/Gallery/Gallery.types.ts
index b61d550..00bf043 100644
--- a/src/components/Gallery/Gallery.types.ts
+++ b/src/components/Gallery/Gallery.types.ts
@@ -1,11 +1,5 @@
 import { GroupProps } from "@react-three/fiber";
 import { ReactElement } from "react";
-import { GalleryItem, GalleryItemProps } from "../GalleryItem";
-import { SolidColorItem, SolidColorItemProps } from "../SolidColorItem";
-import { ImageItem, ImageItemProps } from "../ImageItem";
-import { VideoItem, VideoItemProps } from "../VideoItem";
-import { TransparentItem, TransparentItemProps } from "../TransparentItem";
-import { ObjectItem, ObjectItemProps } from "../ObjectItem";
 
 /**
  * A flag to indicate that no provider was found.
@@ -103,39 +97,17 @@ export type UseGalleryReturnType = Omit<
   "itemsId" | "registerItem" | "unregisterItem"
 >;
 
-/**
- * The valid gallery item types.
- * These are the types that can be used as children of the Gallery component.
- * Any other type will be ignored.
- */
-export const AllowedGalleryItemTypes = [
-  GalleryItem,
-  SolidColorItem,
-  ImageItem,
-  VideoItem,
-  TransparentItem,
-  ObjectItem,
-];
-
 /**
  * The gallery item type.
  */
-export type GalleryItemType =
-  | ReactElement<GalleryItemProps, typeof GalleryItem>
-  | ReactElement<SolidColorItemProps, typeof SolidColorItem>
-  | ReactElement<ImageItemProps, typeof ImageItem>
-  | ReactElement<VideoItemProps, typeof VideoItem>
-  | ReactElement<TransparentItemProps, typeof TransparentItem>
-  | ReactElement<ObjectItemProps, typeof ObjectItem>;
+export type GalleryItemType = ReactElement;
 
 /**
  * The gallery children type.
  * This is the type of the children of the Gallery component.
  * At least 3 gallery items are required.
  */
-export type GalleryChildren =
-  | [GalleryItemType, GalleryItemType, GalleryItemType, ...GalleryItemType[]]
-  | GalleryItemType[];
+export type GalleryChildren = GalleryItemType | Iterable<GalleryItemType>;
 
 /**
  * The Gallery component properties.