import { create } from "zustand"; type DroppedObject = { className: string; id: string; position: { top: number | "auto"; left: number | "auto"; right: number | "auto"; bottom: number | "auto"; }; value?: number; per?: string; header?: string; Data: {}; }; type Zone = { zoneName: string; zoneId: string; objects: DroppedObject[]; }; type DroppedObjectsState = { zones: Record; setZone: (zoneName: string, zoneId: string) => void; addObject: (zoneName: string, newObject: DroppedObject) => void; updateObjectPosition: ( zoneName: string, index: number, newPosition: { top: number | "auto"; left: number | "auto"; right: number | "auto"; bottom: number | "auto"; } ) => void; }; export const useDroppedObjectsStore = create((set) => ({ zones: {}, setZone: (zoneName: string, zoneId: string) => set((state) => ({ zones: { [zoneName]: state.zones[zoneName] || { zoneName, zoneId, objects: [] }, // Keep existing zone if it exists }, })), addObject: (zoneName: string, newObject: DroppedObject) => set((state) => ({ zones: { ...state.zones, [zoneName]: { ...state.zones[zoneName], objects: [...state.zones[zoneName].objects, newObject], // Append new object }, }, })), updateObjectPosition: (zoneName, index, newPosition) => set((state) => { const zone = state.zones[zoneName]; if (!zone) return state; return { zones: { [zoneName]: { ...zone, objects: zone.objects.map((obj, i) => i === index ? { ...obj, position: newPosition } : obj ), }, }, }; }), })); export interface DroppedObjects { header: string; id: string; Data: {}; value: string | number; // ✅ Allows both numbers and formatted strings per: string; className: string; position: { top: number; left: number; right: number; bottom: number }; // ✅ Ensures position is a tuple } export interface Zones { zoneName: string; zoneId: string; objects: DroppedObject[]; }