ps99-api 2.4.0 → 2.6.0

package/example-web/react2/src/components/UpgradesComponent.tsx

@@ -1,67 +1,117 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
+import ItemCard from "./ItemCard";
 import ImageComponent from "./ImageComponent";
+import { useExpandableList } from "../hooks/useExpandableList";
+import { formatGigantix } from "../utils/gigantix";
 
 const UpgradeComponent: React.FC<{
   configData: CollectionConfigData<"Upgrades">;
 }> = ({ configData }) => {
+  const { expandedIndices, toggle, expandAll, collapseAll, isExpanded } = useExpandableList(configData.TierCurrencies.length);
+
   return (
-    <div>
-      <h2>Upgrade</h2>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
       {configData.Icon && (
-        <ImageComponent src={configData.Icon} alt="Upgrade Icon" />
+        <div style={{ maxWidth: '100px', margin: '0 auto 20px' }}>
+          <ImageComponent src={configData.Icon} alt="Upgrade Icon" />
+        </div>
       )}
-      <h3>Tier Powers</h3>
-      <ul>
-        {configData.TierPowers.map((power, index) => (
-          <li key={index}>
-            Tier {index + 1}: {power}
-          </li>
-        ))}
-      </ul>
-      <h3>Tier Costs</h3>
-      <ul>
-        {configData.TierCosts.map((cost, index) => (
-          <li key={index}>
-            Tier {index + 1}: {cost}
-          </li>
-        ))}
-      </ul>
-      <h3>Tier Currencies</h3>
-      {configData.TierCurrencies.map((currency, index) => (
-        <div key={index}>
-          <h4>{currency.DisplayName}</h4>
-          <p>Rarity Number: {currency.Rarity.RarityNumber}</p>
-          <p>Description: {currency.Desc}</p>
-          {currency.Tradable && <p>Tradable</p>}
-          <p>Max Amount: {currency.MaxAmount}</p>
-          <h5>Bag Tiers</h5>
-          <ul>
-            {currency.BagTiers.map((bagTier, bagIndex) => (
-              <li key={bagIndex}>
-                <p>Value: {bagTier.value}</p>
-                <ImageComponent
-                  src={bagTier.image}
-                  alt={`Bag Tier ${bagTier.value}`}
-                />
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '30px' }}>
+        <div>
+          <h3 style={{ borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Tier Powers</h3>
+          <ul style={{ listStyle: 'none', padding: 0, textAlign: 'left' }}>
+            {configData.TierPowers.map((power, index) => (
+              <li key={index} style={{ padding: '5px 0', borderBottom: '1px dashed #eee' }}>
+                <strong>Tier {index + 1}:</strong> {formatGigantix(power)}
               </li>
             ))}
           </ul>
-          <h5>Tiers</h5>
-          <ul>
-            {currency.Tiers.map((tier, tierIndex) => (
-              <li key={tierIndex}>
-                <p>Tier Name: {tier.tierName}</p>
-                <p>Order: {tier.Order}</p>
-                <p>Value: {tier.value}</p>
-                {tier.isBottom && <p>Is Bottom</p>}
-                <ImageComponent src={tier.orbImage} alt="Orb" />
-                <ImageComponent src={tier.imageOutline} alt="Outline" />
+        </div>
+        <div>
+          <h3 style={{ borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Tier Costs</h3>
+          <ul style={{ listStyle: 'none', padding: 0, textAlign: 'left' }}>
+            {configData.TierCosts.map((cost, index) => (
+              <li key={index} style={{ padding: '5px 0', borderBottom: '1px dashed #eee' }}>
+                <strong>Tier {index + 1}:</strong> {formatGigantix(cost)}
               </li>
             ))}
           </ul>
         </div>
-      ))}
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '1.2em', marginBottom: '15px' }}>Tier Currencies</h3>
+        <div style={{ marginBottom: '20px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
+          <button onClick={expandAll} style={{ padding: '8px 16px', borderRadius: '8px', border: '1px solid #ddd', background: '#fff', cursor: 'pointer' }}>Expand All</button>
+          <button onClick={collapseAll} style={{ padding: '8px 16px', borderRadius: '8px', border: '1px solid #ddd', background: '#fff', cursor: 'pointer' }}>Collapse All</button>
+        </div>
+        {configData.TierCurrencies.map((currency, index) => (
+          <div key={index} style={{ background: '#f9f9f9', padding: '15px', borderRadius: '12px', marginBottom: '20px' }}>
+            <div
+              onClick={() => toggle(index)}
+              style={{ cursor: 'pointer' }}
+            >
+              <h4 style={{ marginTop: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
+                {isExpanded(index) ? '▼' : '▶'} {currency.DisplayName}
+              </h4>
+              <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', marginBottom: '10px' }}>
+                <span className="badge" style={{ borderColor: (currency.Rarity?.Color as string) || '#ccc' }}>{currency.Rarity?.DisplayName}</span>
+                {currency.Tradable && <span className="badge">Tradable</span>}
+                <span className="badge">Max: {formatGigantix(currency.MaxAmount)}</span>
+              </div>
+            </div>
+
+            {isExpanded(index) && (
+              <>
+                <p style={{ fontStyle: 'italic', fontSize: '0.9em', color: '#666' }}>{currency.Desc}</p>
+
+                <h5 style={{ marginTop: '15px', borderBottom: '1px solid #e0e0e0' }}>Bag Tiers</h5>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "10px", marginTop: '10px' }}>
+                  {currency.BagTiers.map((bagTier, bagIndex) => (
+                    <div key={bagIndex}>
+                      <ItemCard
+                        id={`bag-tier-${bagIndex}`}
+                        amount={bagTier.value}
+                        label={`Bag Tier ${bagIndex + 1}`}
+                        itemData={{
+                          icon: bagTier.image,
+                          rarity: currency.Rarity,
+                          name: `Bag Tier ${bagIndex + 1}`
+                        }}
+                        rarityColor={(currency.Rarity?.Color as string) || null}
+                      />
+                    </div>
+                  ))}
+                </div>
+
+                <h5 style={{ marginTop: '15px', borderBottom: '1px solid #e0e0e0' }}>Tiers</h5>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "10px", marginTop: '10px' }}>
+                  {currency.Tiers.map((tier, tierIndex) => (
+                    <div key={tierIndex}>
+                      <ItemCard
+                        id={tier.tierName}
+                        amount={tier.value}
+                        label={tier.tierName}
+                        itemData={{
+                          icon: tier.orbImage,
+                          rarity: currency.Rarity,
+                          name: tier.tierName
+                        }}
+                        rarityColor={(currency.Rarity?.Color as string) || null}
+                      />
+                      <div style={{ marginTop: '5px', fontSize: '0.8em', color: '#666', textAlign: 'center' }}>
+                        Order: {tier.Order}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

package/example-web/react2/src/components/WateringCansComponent.tsx

@@ -1,25 +1,31 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 const WateringCanComponent: React.FC<{
   configData: CollectionConfigData<"WateringCans">;
 }> = ({ configData }) => {
   return (
-    <div>
-      <h2>Watering Can</h2>
-      <h3>{configData.DisplayName}</h3>
-      {configData.Icon && (
-        <ImageComponent
-          src={configData.Icon}
-          alt={`${configData.DisplayName} Icon`}
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: undefined,
+            name: configData.DisplayName
+          }}
+          rarityColor={null}
         />
-      )}
-      <p>Associated Item ID: {configData.AssociatedItemID}</p>
-      <p>Plant Time Multiplier: {configData.PlantTimeMultiplier}</p>
-      <p>
-        Plant Time Multiplier Duration: {configData.PlantTimeMultiplierDuration}
-      </p>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p><strong>Time Mult:</strong> {configData.PlantTimeMultiplier}x</p>
+        <p><strong>Duration:</strong> {configData.PlantTimeMultiplierDuration}</p>
+      </div>
     </div>
   );
 };

package/example-web/react2/src/components/WorldsComponent.tsx

@@ -5,21 +5,31 @@ const WorldComponent: React.FC<{
   configData: CollectionConfigData<"Worlds">;
 }> = ({ configData }) => {
   return (
-    <div>
-      <h2>World</h2>
-      <h3>{configData.MapName}</h3>
-      <p>Spawn ID: {configData.SpawnId}</p>
-      <p>World Currency: {configData.WorldCurrency}</p>
-      <p>Place ID: {configData.PlaceId}</p>
-      <p>World Number: {configData.WorldNumber}</p>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ textAlign: 'left', width: '100%' }}>
+        <p><strong>World #:</strong> {configData.WorldNumber}</p>
+        <p><strong>Spawn ID:</strong> {configData.SpawnId}</p>
+        <p><strong>Currency:</strong> {configData.WorldCurrency}</p>
+        <p><strong>Place ID:</strong> {configData.PlaceId}</p>
+      </div>
+
       {configData.AdditionalMusic && configData.AdditionalMusic.length > 0 && (
-        <div>
+        <div style={{ marginTop: '15px', width: '100%' }}>
           <h4>Additional Music</h4>
-          <ul>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
             {configData.AdditionalMusic.map((music, index) => (
-              <li key={index}>{music}</li>
+              <span key={index} style={{
+                background: '#e0f7fa',
+                color: '#006064',
+                padding: '5px 10px',
+                borderRadius: '15px',
+                fontSize: '0.9em',
+                fontWeight: 'bold'
+              }}>
+                {music}
+              </span>
             ))}
-          </ul>
+          </div>
         </div>
       )}
     </div>

package/example-web/react2/src/components/XPPotionsComponent.tsx

@@ -1,21 +1,38 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const XPPotionsComponent: React.FC<{
   configData: CollectionConfigData<"XPPotions">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <div>
-      <h2>{configData.DisplayName}</h2>
-      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
-      <p>Amount: {configData.Amount}</p>
-      <p>Description: {configData.Desc}</p>
-      <p>Item ID: {configData.ItemId}</p>
-      <h3>Rarity</h3>
-      <p>Display Name: {configData.Rarity.DisplayName}</p>
-      <p>Rarity Number: {configData.Rarity.RarityNumber}</p>
-      <p>Announce: {configData.Rarity.Announce ? "Yes" : "No"}</p>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.DisplayName
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p style={{ marginBottom: '10px' }}>{configData.Desc}</p>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
+          <span className="badge">Amount: {configData.Amount}</span>
+          <span className="badge" style={{ background: '#eee', color: '#333' }}>ID: {configData.ItemId}</span>
+        </div>
+      </div>
     </div>
   );
 };

package/example-web/react2/src/components/ZoneFlagsComponent.tsx

@@ -1,24 +1,35 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const ZoneFlagComponent: React.FC<{
   configData: CollectionConfigData<"ZoneFlags">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <div>
-      <h2>Zone Flag</h2>
-      <h3>{configData.Name}</h3>
-      <p>Description: {configData.Desc}</p>
-      <p>Duration: {configData.Duration} seconds</p>
-      <p>Color: {configData.Color}</p>
-      <p>
-        Icon: <ImageComponent src={configData.Icon} alt={configData.Name} />
-      </p>
-      <h4>Rarity</h4>
-      <p>Rarity: {configData.Rarity.DisplayName}</p>
-      <p>Rarity Number: {configData.Rarity.RarityNumber}</p>
-      <p>Announce: {configData.Rarity.Announce.toString()}</p>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.Name}
+          amount={1}
+          label={configData.Name}
+          itemData={{
+            icon: configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.Name
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+        <p style={{ fontWeight: 'bold', marginTop: '5px' }}>Duration: {configData.Duration}s</p>
+      </div>
     </div>
   );
 };

package/example-web/react2/src/components/ZonesComponent.tsx

@@ -5,79 +5,62 @@ const ZoneComponent: React.FC<{
   configData: CollectionConfigData<"Zones">;
 }> = ({ configData }) => {
   return (
-    <div>
-      <h2>Zone</h2>
-      <h3>{configData.ZoneName}</h3>
-      <p>Zone Number: {configData.ZoneNumber}</p>
-      <p>World Number: {configData.WorldNumber}</p>
-      <p>Currency: {configData.Currency}</p>
-      <p>Maximum Available Egg: {configData.MaximumAvailableEgg}</p>
-      {configData.Price && <p>Price: {configData.Price}</p>}
-      {configData.GateHealth && <p>Gate Health: {configData.GateHealth}</p>}
-      {configData.TeleportToZoneOnFall && (
-        <p>
-          Teleport to Zone on Fall: {configData.TeleportToZoneOnFall.toString()}
-        </p>
-      )}
-      {configData.Ambience && (
-        <p>Ambience Sound ID: {configData.Ambience.SoundId}</p>
-      )}
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', width: '100%', textAlign: 'left' }}>
+        <p><strong>Zone #:</strong> {configData.ZoneNumber}</p>
+        <p><strong>World #:</strong> {configData.WorldNumber}</p>
+        <p><strong>Currency:</strong> {configData.Currency}</p>
+        <p><strong>Max Egg:</strong> {configData.MaximumAvailableEgg}</p>
+        {configData.Price && <p><strong>Price:</strong> {configData.Price}</p>}
+        {configData.GateHealth && <p><strong>Gate Health:</strong> {configData.GateHealth}</p>}
+        {configData.TeleportToZoneOnFall && (
+          <p><strong>Teleport on Fall:</strong> Yes</p>
+        )}
+        {configData.Ambience && (
+          <p><strong>Ambience ID:</strong> {configData.Ambience.SoundId}</p>
+        )}
+      </div>
+
       {configData.QuestsRequired && configData.QuestsRequired.length > 0 && (
-        <div>
+        <div style={{ width: '100%', marginTop: '20px' }}>
           <h4>Quests Required</h4>
-          <ul>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', justifyContent: 'center' }}>
             {configData.QuestsRequired.map((quest, index) => (
-              <li key={index}>
-                Type: {quest.Type}, Amount: {quest.Amount}
-              </li>
+              <div key={index} style={{
+                background: '#f0f0f0',
+                padding: '10px',
+                borderRadius: '8px',
+                border: '1px solid #ddd'
+              }}>
+                <strong>{quest.Type}</strong>: {quest.Amount}
+              </div>
             ))}
-          </ul>
+          </div>
         </div>
       )}
+
       {configData.Lighting && (
-        <div>
-          <h4>Lighting</h4>
+        <div style={{ width: '100%', marginTop: '20px', textAlign: 'left', background: '#f9f9f9', padding: '15px', borderRadius: '8px' }}>
+          <h4 style={{ textAlign: 'center' }}>Lighting Settings</h4>
           <p>Brightness: {configData.Lighting.Brightness}</p>
           <p>Clock Time: {configData.Lighting.ClockTime}</p>
+
           {configData.Lighting.Bloom && (
-            <div>
-              <h5>Bloom</h5>
-              <p>Enabled: {configData.Lighting.Bloom.Enabled.toString()}</p>
-              <p>Intensity: {configData.Lighting.Bloom.Intensity}</p>
-              <p>Size: {configData.Lighting.Bloom.Size}</p>
-              <p>Threshold: {configData.Lighting.Bloom.Threshold}</p>
-            </div>
-          )}
-          {configData.Lighting.ColorCorrection && (
-            <div>
-              <h5>Color Correction</h5>
-              <p>
-                Enabled:{" "}
-                {configData.Lighting.ColorCorrection.Enabled.toString()}
-              </p>
-              <p>
-                Saturation: {configData.Lighting.ColorCorrection.Saturation}
-              </p>
-              <p>Contrast: {configData.Lighting.ColorCorrection.Contrast}</p>
-              <p>
-                Brightness: {configData.Lighting.ColorCorrection.Brightness}
-              </p>
+            <div style={{ marginTop: '10px' }}>
+              <strong>Bloom:</strong>
+              <span style={{ fontSize: '0.9em', marginLeft: '10px' }}>
+                Enabled: {configData.Lighting.Bloom.Enabled.toString()},
+                Intensity: {configData.Lighting.Bloom.Intensity}
+              </span>
             </div>
           )}
+
           {configData.Lighting.Sky && (
-            <div>
-              <h5>Sky</h5>
-              <p>Star Count: {configData.Lighting.Sky.StarCount}</p>
-              <p>
-                Celestial Bodies Shown:{" "}
-                {configData.Lighting.Sky.CelestialBodiesShown.toString()}
-              </p>
-              <p>Skybox Up: {configData.Lighting.Sky.SkyboxUp}</p>
-              <p>Skybox Bk: {configData.Lighting.Sky.SkyboxBk}</p>
-              <p>Skybox Dn: {configData.Lighting.Sky.SkyboxDn}</p>
-              <p>Skybox Lf: {configData.Lighting.Sky.SkyboxLf}</p>
-              <p>Skybox Rt: {configData.Lighting.Sky.SkyboxRt}</p>
-              <p>Skybox Ft: {configData.Lighting.Sky.SkyboxFt}</p>
+            <div style={{ marginTop: '10px' }}>
+              <strong>Sky:</strong>
+              <span style={{ fontSize: '0.9em', marginLeft: '10px' }}>
+                Stars: {configData.Lighting.Sky.StarCount}
+              </span>
             </div>
           )}
         </div>

package/example-web/react2/src/constants/collectionIcons.ts

@@ -0,0 +1,29 @@
+export const COLLECTION_ICONS: Record<string, string> = {
+    Pets: "🐱",
+    Eggs: "🥚",
+    Enchants: "📘",
+    Potions: "🧪",
+    Items: "🎒",
+    Hoverboards: "🛹",
+    Booths: "🏪",
+    Ultimates: "🌀",
+    MiscItems: "📦",
+    Keys: "🗝️",
+    Tickets: "🎟️",
+    Charms: "🧿",
+    Fruits: "🍎",
+    Seeds: "🌱",
+    Flags: "🚩",
+    Glitch: "👾",
+    Achievements: "🏆",
+    Boosts: "🚀",
+    Upgrades: "⬆️",
+    Relics: "🗿",
+    Ranks: "📈",
+    RandomEvents: "🎲",
+    SecretRooms: "🔒",
+    Zones: "uq",
+    World: "🌍",
+    Clan: "🛡️",
+    Mastery: "🎓",
+};

package/example-web/react2/src/context/CollectionDataContext.tsx

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { PetSimulator99API, Collections, CollectionName } from "ps99-api";
+
+const api = new PetSimulator99API();
+
+type CollectionDataCache = Partial<Record<string, Collections[]>>;
+
+interface CollectionDataContextType {
+    data: CollectionDataCache;
+    fetchCollection: (collectionName: CollectionName) => Promise<void>;
+    isLoading: (collectionName: string) => boolean;
+}
+
+const CollectionDataContext = createContext<CollectionDataContextType | undefined>(undefined);
+
+export const CollectionDataProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [data, setData] = useState<CollectionDataCache>({});
+    const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
+
+    const fetchCollection = useCallback(async (collectionName: CollectionName) => {
+        // If data already exists, don't fetch again unless force refresh is needed (not implemented yet)
+        if (data[collectionName]) {
+            return;
+        }
+
+        if (loadingStates[collectionName]) return; // Already loading
+
+        setLoadingStates(prev => ({ ...prev, [collectionName]: true }));
+
+        try {
+            console.log(`[CollectionDataContext] Fetching ${collectionName}...`);
+            const result = await api.getCollection(collectionName);
+            if (result.status === "ok") {
+                setData(prev => ({ ...prev, [collectionName]: result.data as Collections[] }));
+            } else {
+                console.error(`Status error fetching ${collectionName}:`, result);
+            }
+        } catch (error) {
+            console.error(`Failed to fetch collection ${collectionName}`, error);
+        } finally {
+            setLoadingStates(prev => ({ ...prev, [collectionName]: false }));
+        }
+    }, [data, loadingStates]);
+
+    const isLoading = useCallback((collectionName: string) => {
+        return !!loadingStates[collectionName];
+    }, [loadingStates]);
+
+    return (
+        <CollectionDataContext.Provider value={{ data, fetchCollection, isLoading }}>
+            {children}
+        </CollectionDataContext.Provider>
+    );
+};
+
+export const useCollectionData = () => {
+    const context = useContext(CollectionDataContext);
+    if (!context) {
+        throw new Error('useCollectionData must be used within a CollectionDataProvider');
+    }
+    return context;
+};

package/example-web/react2/src/context/ScrollContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useRef, useCallback } from 'react';
+
+interface ScrollContextType {
+    scrollPositions: React.MutableRefObject<Record<string, number>>;
+    saveScrollPosition: (key: string, offset: number) => void;
+    getScrollPosition: (key: string) => number;
+}
+
+const ScrollContext = createContext<ScrollContextType | undefined>(undefined);
+
+export const ScrollProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const scrollPositions = useRef<Record<string, number>>({});
+
+    const saveScrollPosition = useCallback((key: string, offset: number) => {
+        scrollPositions.current[key] = offset;
+    }, []);
+
+    const getScrollPosition = useCallback((key: string) => {
+        return scrollPositions.current[key] || 0;
+    }, []);
+
+    return (
+        <ScrollContext.Provider value={{ scrollPositions, saveScrollPosition, getScrollPosition }}>
+            {children}
+        </ScrollContext.Provider>
+    );
+};
+
+export const useScrollPersistence = () => {
+    const context = useContext(ScrollContext);
+    if (!context) {
+        throw new Error("useScrollPersistence must be used within a ScrollProvider");
+    }
+    return context;
+};