blixify-ui-web 1.2.19 → 1.2.21

package/lib/components/data/dataTemplate/index.js

@@ -142,13 +142,14 @@ var activityModal_1 = require("./activityModal");
 var authModal_1 = require("./authModal");
 var dataStateModel_1 = require("./dataStateModel");
 var indexedDb_1 = require("./indexedDb");
+var socket_1 = require("./socket");
 var pagination_1 = require("./pagination");
 var referenceModal_1 = require("./referenceModal");
 var settingsModal_1 = require("./settingsModal");
 var flexFilterModel_1 = require("./flexFilterModel");
 var flexFilterModule_1 = require("./flexFilterModule");
 exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44;
     var intialiseDefaultFilterValues = function () {
         var _a;
         var initialFilterSearch = {};
@@ -209,136 +210,143 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _42 = intialiseDefaultFilterValues(), initialFilterSearch = _42.initialFilterSearch, initialFilterSearchParams = _42.initialFilterSearchParams, initialFilterSelection = _42.initialFilterSelection, initialFilterReference = _42.initialFilterReference, initialFilterReferenceDate = _42.initialFilterReferenceDate;
-    var _43 = (0, react_1.useState)(false), loading = _43[0], setLoading = _43[1];
-    var _44 = (0, react_1.useState)(), notification = _44[0], setNotification = _44[1];
+    var _45 = intialiseDefaultFilterValues(), initialFilterSearch = _45.initialFilterSearch, initialFilterSearchParams = _45.initialFilterSearchParams, initialFilterSelection = _45.initialFilterSelection, initialFilterReference = _45.initialFilterReference, initialFilterReferenceDate = _45.initialFilterReferenceDate;
+    var _46 = (0, react_1.useState)(false), loading = _46[0], setLoading = _46[1];
+    var _47 = (0, react_1.useState)(), notification = _47[0], setNotification = _47[1];
     //INFO : Used by List
-    var _45 = (0, react_1.useState)(initialFilterSearch), filterSearch = _45[0], setFilterSearch = _45[1];
-    var _46 = (0, react_1.useState)(initialFilterSearchParams), filterSearchParams = _46[0], setFilterSearchParams = _46[1];
-    var _47 = (0, react_1.useState)(initialFilterSelection), filterSelection = _47[0], setFilterSelection = _47[1];
-    var _48 = (0, react_1.useState)(initialFilterReference), filterReference = _48[0], setFilterReference = _48[1];
-    var _49 = (0, react_1.useState)({}), filterReferenceSearch = _49[0], setFilterReferenceSearch = _49[1];
-    var _50 = (0, react_1.useState)({}), filterReferenceList = _50[0], setFilterReferenceList = _50[1];
-    var _51 = (0, react_1.useState)(initialFilterReferenceDate), filterReferenceDate = _51[0], setFilterReferenceDate = _51[1];
-    var _52 = (0, react_1.useState)(true), tableLoading = _52[0], setTableLoading = _52[1];
-    var _53 = (0, react_1.useState)(""), cursor = _53[0], setCursor = _53[1];
-    var _54 = (0, react_1.useState)(""), lastCursor = _54[0], setLastCursor = _54[1];
-    var _55 = (0, react_1.useState)([]), tableData = _55[0], setTableData = _55[1];
-    var _56 = (0, react_1.useState)([]), spaceTableData = _56[0], setSpaceTableData = _56[1];
-    var _57 = (0, react_1.useState)(0), size = _57[0], setSize = _57[1];
-    var _58 = (0, react_1.useState)((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0), pageIndex = _58[0], setPageIndex = _58[1];
-    var _59 = (0, react_1.useState)([]), selectedIds = _59[0], setSelectedIds = _59[1];
-    var _60 = (0, react_1.useState)(false), selectAll = _60[0], setSelectAll = _60[1];
-    var _61 = (0, react_1.useState)(""), deletePasscode = _61[0], setDeletePasscode = _61[1];
-    var _62 = (0, react_1.useState)(""), deletePasscodeInput = _62[0], setDeletePasscodeInput = _62[1];
-    var _63 = (0, react_1.useState)(""), deleteFeedId = _63[0], setDeleteFeedId = _63[1];
+    var _48 = (0, react_1.useState)(initialFilterSearch), filterSearch = _48[0], setFilterSearch = _48[1];
+    var _49 = (0, react_1.useState)(initialFilterSearchParams), filterSearchParams = _49[0], setFilterSearchParams = _49[1];
+    var _50 = (0, react_1.useState)(initialFilterSelection), filterSelection = _50[0], setFilterSelection = _50[1];
+    var _51 = (0, react_1.useState)(initialFilterReference), filterReference = _51[0], setFilterReference = _51[1];
+    var _52 = (0, react_1.useState)({}), filterReferenceSearch = _52[0], setFilterReferenceSearch = _52[1];
+    var _53 = (0, react_1.useState)({}), filterReferenceList = _53[0], setFilterReferenceList = _53[1];
+    var _54 = (0, react_1.useState)(initialFilterReferenceDate), filterReferenceDate = _54[0], setFilterReferenceDate = _54[1];
+    var _55 = (0, react_1.useState)(true), tableLoading = _55[0], setTableLoading = _55[1];
+    var _56 = (0, react_1.useState)(""), cursor = _56[0], setCursor = _56[1];
+    var _57 = (0, react_1.useState)(""), lastCursor = _57[0], setLastCursor = _57[1];
+    var _58 = (0, react_1.useState)([]), tableData = _58[0], setTableData = _58[1];
+    var _59 = (0, react_1.useState)([]), spaceTableData = _59[0], setSpaceTableData = _59[1];
+    var _60 = (0, react_1.useState)(0), size = _60[0], setSize = _60[1];
+    var _61 = (0, react_1.useState)((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0), pageIndex = _61[0], setPageIndex = _61[1];
+    var _62 = (0, react_1.useState)([]), selectedIds = _62[0], setSelectedIds = _62[1];
+    var _63 = (0, react_1.useState)(false), selectAll = _63[0], setSelectAll = _63[1];
+    var _64 = (0, react_1.useState)(""), deletePasscode = _64[0], setDeletePasscode = _64[1];
+    var _65 = (0, react_1.useState)(""), deletePasscodeInput = _65[0], setDeletePasscodeInput = _65[1];
+    var _66 = (0, react_1.useState)(""), deleteFeedId = _66[0], setDeleteFeedId = _66[1];
     //INFO : Used by List Organise
-    var _64 = (0, react_1.useState)(false), sortModal = _64[0], setSortModal = _64[1];
-    var _65 = (0, react_1.useState)(false), filterModal = _65[0], setFilterModal = _65[1];
-    var _66 = (0, react_1.useState)(false), filterDraft = _66[0], setFilterDraft = _66[1];
-    var _67 = (0, react_1.useState)(false), addTabModal = _67[0], setAddTabModal = _67[1];
-    var _68 = (0, react_1.useState)(false), overviewModal = _68[0], setOverviewModal = _68[1];
-    var _69 = (0, react_1.useState)(props.defaultTab
+    var _67 = (0, react_1.useState)(false), sortModal = _67[0], setSortModal = _67[1];
+    var _68 = (0, react_1.useState)(false), filterModal = _68[0], setFilterModal = _68[1];
+    var _69 = (0, react_1.useState)(false), filterDraft = _69[0], setFilterDraft = _69[1];
+    var _70 = (0, react_1.useState)(false), addTabModal = _70[0], setAddTabModal = _70[1];
+    var _71 = (0, react_1.useState)(false), overviewModal = _71[0], setOverviewModal = _71[1];
+    var _72 = (0, react_1.useState)(props.defaultTab
         ? (0, listModule_1.renderSelectedRefreshTab)(props.localURLEndpoint, props.type, props.collectionId, props.id, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.extendedTabs, (_d = props.organise) === null || _d === void 0 ? void 0 : _d.viewId)
-        : ""), selectedTab = _69[0], setSelectedTab = _69[1];
-    var _70 = (0, react_1.useState)("dayGridMonth"), calendarView = _70[0], setCalendarView = _70[1];
-    var _71 = (0, react_1.useState)(new Date()), calendarTabMonth = _71[0], setCalendarTabMonth = _71[1];
-    var _72 = (0, react_1.useState)(true), kanbanDroppable = _72[0], setKanbanDroppable = _72[1];
-    var _73 = (0, react_1.useState)([]), kanbanOptions = _73[0], setKanbanOptions = _73[1];
-    var _74 = (0, react_1.useState)(false), queryForm = _74[0], setQueryForm = _74[1];
-    var _75 = (0, react_1.useState)(false), batchUpdateModal = _75[0], setBatchUpdateModal = _75[1];
-    var _76 = (0, react_1.useState)({
+        : ""), selectedTab = _72[0], setSelectedTab = _72[1];
+    var _73 = (0, react_1.useState)("dayGridMonth"), calendarView = _73[0], setCalendarView = _73[1];
+    var _74 = (0, react_1.useState)(new Date()), calendarTabMonth = _74[0], setCalendarTabMonth = _74[1];
+    var _75 = (0, react_1.useState)(true), kanbanDroppable = _75[0], setKanbanDroppable = _75[1];
+    var _76 = (0, react_1.useState)([]), kanbanOptions = _76[0], setKanbanOptions = _76[1];
+    var _77 = (0, react_1.useState)(false), queryForm = _77[0], setQueryForm = _77[1];
+    var _78 = (0, react_1.useState)(false), batchUpdateModal = _78[0], setBatchUpdateModal = _78[1];
+    var _79 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _76[0], setBatchUpdateData = _76[1];
-    var _77 = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.model) || []), structure = _77[0], setStructure = _77[1];
-    var _78 = (0, react_1.useState)(((_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.additionalQuery) || []), additionalQuery = _78[0], setAdditionalQuery = _78[1];
+    }), batchUpdateData = _79[0], setBatchUpdateData = _79[1];
+    var _80 = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.model) || []), structure = _80[0], setStructure = _80[1];
+    var _81 = (0, react_1.useState)(((_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.additionalQuery) || []), additionalQuery = _81[0], setAdditionalQuery = _81[1];
     // INFO: State for user-configurable flex filters (Monday.com-style)
     // INFO: Initialize with one empty row so users see inputs immediately without clicking "Add Filter"
-    var _79 = (0, react_1.useState)([
+    var _82 = (0, react_1.useState)([
         {
             id: "flex-filter-init-row",
             columnId: "",
             operator: "=",
             value: undefined,
         },
-    ]), flexFilters = _79[0], setFlexFilters = _79[1];
-    var _80 = (0, react_1.useState)({}), flexFilterReferenceOptions = _80[0], setFlexFilterReferenceOptions = _80[1];
-    var _81 = (0, react_1.useState)({}), flexFilterReferenceSearch = _81[0], setFlexFilterReferenceSearch = _81[1];
-    var _82 = (0, react_1.useState)(false), flexFilterModalOpen = _82[0], setFlexFilterModalOpen = _82[1];
+    ]), flexFilters = _82[0], setFlexFilters = _82[1];
+    var _83 = (0, react_1.useState)({}), flexFilterReferenceOptions = _83[0], setFlexFilterReferenceOptions = _83[1];
+    var _84 = (0, react_1.useState)({}), flexFilterReferenceSearch = _84[0], setFlexFilterReferenceSearch = _84[1];
+    var _85 = (0, react_1.useState)(false), flexFilterModalOpen = _85[0], setFlexFilterModalOpen = _85[1];
     //INFO : Used by Auth
-    var _83 = (0, react_1.useState)({
+    var _86 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _83[0], setAuthMethods = _83[1];
-    var _84 = (0, react_1.useState)(""), selectedAuthMethod = _84[0], setSelectedAuthMethod = _84[1];
+    }), authMethods = _86[0], setAuthMethods = _86[1];
+    var _87 = (0, react_1.useState)(""), selectedAuthMethod = _87[0], setSelectedAuthMethod = _87[1];
     // INFO: Used by Activity Log
-    var _85 = (0, react_1.useState)(false), activityModal = _85[0], setActivityModal = _85[1];
-    var _86 = (0, react_1.useState)(""), activityId = _86[0], setActivityId = _86[1];
+    var _88 = (0, react_1.useState)(false), activityModal = _88[0], setActivityModal = _88[1];
+    var _89 = (0, react_1.useState)(""), activityId = _89[0], setActivityId = _89[1];
     //INFO : Used by Export
-    var _87 = (0, react_1.useState)(null), csvFile = _87[0], setCSVFile = _87[1];
-    var _88 = (0, react_1.useState)([]), csvFileData = _88[0], setCSVFileData = _88[1];
-    var _89 = (0, react_1.useState)(0), stepCSVIndex = _89[0], setStepCSVIndex = _89[1];
-    var _90 = (0, react_1.useState)({}), listCSVMapAttribute = _90[0], setListCSVMapAttribute = _90[1];
-    var _91 = (0, react_1.useState)({}), listCSVObjAttribute = _91[0], setListCSVObjAttribute = _91[1];
-    var _92 = (0, react_1.useState)([]), csvAPIAttribute = _92[0], setCSVAPIAttribute = _92[1];
-    var _93 = (0, react_1.useState)(((_f = props.devSettings.currentUser) === null || _f === void 0 ? void 0 : _f.userEmail) || ""), exportCSVEmail = _93[0], setExportCSVEmail = _93[1];
-    var _94 = (0, react_1.useState)(((_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.defaultExportPDFName) || ""), exportPDFTitle = _94[0], setExportPDFTitle = _94[1];
-    var _95 = (0, react_1.useState)(false), exportPDFLoading = _95[0], setExportPDFLoading = _95[1];
-    var _96 = (0, react_1.useState)(false), exportReadPDFLoading = _96[0], setExportReadPDFLoading = _96[1];
-    var _97 = (0, react_1.useState)((_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.sumColumnId) !== null && _l !== void 0 ? _l : []), exportSumAttributeIds = _97[0], setExportSumAttributeIds = _97[1];
-    var _98 = (0, react_1.useState)((_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.hideSubItems) !== null && _p !== void 0 ? _p : false), hideSubItems = _98[0], setHideSubItems = _98[1];
-    var _99 = (0, react_1.useState)([]), importTableData = _99[0], setImportTableData = _99[1];
-    var _100 = (0, react_1.useState)([]), queryList = _100[0], setQueryList = _100[1];
-    var _101 = (0, react_1.useState)(undefined), allQueryList = _101[0], setAllQueryList = _101[1];
-    var _102 = (0, react_1.useState)(-1), queryIndex = _102[0], setQueryIndex = _102[1];
-    var _103 = (0, react_1.useState)((_q = props.organise) === null || _q === void 0 ? void 0 : _q.groupBy), groupId = _103[0], setGroupId = _103[1];
-    var _104 = (0, react_1.useState)(""), readTabSection = _104[0], setReadTabSection = _104[1];
-    var _105 = (0, react_1.useState)(false), readFloatingNav = _105[0], setReadFloatingNav = _105[1];
+    var _90 = (0, react_1.useState)(null), csvFile = _90[0], setCSVFile = _90[1];
+    var _91 = (0, react_1.useState)([]), csvFileData = _91[0], setCSVFileData = _91[1];
+    var _92 = (0, react_1.useState)(0), stepCSVIndex = _92[0], setStepCSVIndex = _92[1];
+    var _93 = (0, react_1.useState)({}), listCSVMapAttribute = _93[0], setListCSVMapAttribute = _93[1];
+    var _94 = (0, react_1.useState)({}), listCSVObjAttribute = _94[0], setListCSVObjAttribute = _94[1];
+    var _95 = (0, react_1.useState)([]), csvAPIAttribute = _95[0], setCSVAPIAttribute = _95[1];
+    var _96 = (0, react_1.useState)(((_f = props.devSettings.currentUser) === null || _f === void 0 ? void 0 : _f.userEmail) || ""), exportCSVEmail = _96[0], setExportCSVEmail = _96[1];
+    var _97 = (0, react_1.useState)(((_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.defaultExportPDFName) || ""), exportPDFTitle = _97[0], setExportPDFTitle = _97[1];
+    var _98 = (0, react_1.useState)(false), exportPDFLoading = _98[0], setExportPDFLoading = _98[1];
+    var _99 = (0, react_1.useState)(false), exportReadPDFLoading = _99[0], setExportReadPDFLoading = _99[1];
+    var _100 = (0, react_1.useState)((_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.sumColumnId) !== null && _l !== void 0 ? _l : []), exportSumAttributeIds = _100[0], setExportSumAttributeIds = _100[1];
+    var _101 = (0, react_1.useState)((_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.hideSubItems) !== null && _p !== void 0 ? _p : false), hideSubItems = _101[0], setHideSubItems = _101[1];
+    var _102 = (0, react_1.useState)([]), importTableData = _102[0], setImportTableData = _102[1];
+    var _103 = (0, react_1.useState)([]), queryList = _103[0], setQueryList = _103[1];
+    var _104 = (0, react_1.useState)(undefined), allQueryList = _104[0], setAllQueryList = _104[1];
+    var _105 = (0, react_1.useState)(-1), queryIndex = _105[0], setQueryIndex = _105[1];
+    var _106 = (0, react_1.useState)((_q = props.organise) === null || _q === void 0 ? void 0 : _q.groupBy), groupId = _106[0], setGroupId = _106[1];
+    var _107 = (0, react_1.useState)(""), readTabSection = _107[0], setReadTabSection = _107[1];
+    var _108 = (0, react_1.useState)(false), readFloatingNav = _108[0], setReadFloatingNav = _108[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _106 = (0, react_1.useState)(false), modalVisible = _106[0], setModalVisible = _106[1];
-    var _107 = (0, react_1.useState)(false), deleteModal = _107[0], setDeleteModal = _107[1];
-    var _108 = (0, react_1.useState)(false), excelModal = _108[0], setExcelModal = _108[1];
-    var _109 = (0, react_1.useState)(false), exportExcel = _109[0], setExportExcel = _109[1];
-    var _110 = (0, react_1.useState)(""), exportType = _110[0], setExportType = _110[1];
-    var _111 = (0, react_1.useState)(false), exportQR = _111[0], setExportQR = _111[1];
-    var _112 = (0, react_1.useState)(function () {
+    var _109 = (0, react_1.useState)(false), modalVisible = _109[0], setModalVisible = _109[1];
+    var _110 = (0, react_1.useState)(false), deleteModal = _110[0], setDeleteModal = _110[1];
+    var _111 = (0, react_1.useState)(false), excelModal = _111[0], setExcelModal = _111[1];
+    var _112 = (0, react_1.useState)(false), exportExcel = _112[0], setExportExcel = _112[1];
+    var _113 = (0, react_1.useState)(""), exportType = _113[0], setExportType = _113[1];
+    var _114 = (0, react_1.useState)(false), exportQR = _114[0], setExportQR = _114[1];
+    var _115 = (0, react_1.useState)(function () {
         var _a, _b;
         var firstTabId = (_b = (_a = structure.find(function (item) { return item.tabId; })) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : "";
         return firstTabId;
-    }), activeTab = _112[0], setActiveTab = _112[1];
-    var _113 = (0, react_1.useState)(false), signatureSigning = _113[0], setSignatureSigning = _113[1];
-    var _114 = (0, react_1.useState)({}), selectedData = _114[0], setSelectedData = _114[1];
-    var _115 = (0, react_1.useState)(""), selectedObjectStructureId = _115[0], setSelectedObjectStructureId = _115[1];
-    var _116 = (0, react_1.useState)(""), selectedObjectId = _116[0], setSelectedObjectId = _116[1];
-    var _117 = (0, react_1.useState)(""), selectedListAddressId = _117[0], setSelectedListAddressId = _117[1];
-    var _118 = (0, react_1.useState)(-1), selectedListAddressIndex = _118[0], setSelectedListAddressIndex = _118[1];
-    var _119 = (0, react_1.useState)({
+    }), activeTab = _115[0], setActiveTab = _115[1];
+    var _116 = (0, react_1.useState)(false), signatureSigning = _116[0], setSignatureSigning = _116[1];
+    var _117 = (0, react_1.useState)({}), selectedData = _117[0], setSelectedData = _117[1];
+    var _118 = (0, react_1.useState)(""), selectedObjectStructureId = _118[0], setSelectedObjectStructureId = _118[1];
+    var _119 = (0, react_1.useState)(""), selectedObjectId = _119[0], setSelectedObjectId = _119[1];
+    var _120 = (0, react_1.useState)(""), selectedListAddressId = _120[0], setSelectedListAddressId = _120[1];
+    var _121 = (0, react_1.useState)(-1), selectedListAddressIndex = _121[0], setSelectedListAddressIndex = _121[1];
+    var _122 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _119[0], setSelectedListAddress = _119[1];
-    var _120 = (0, react_1.useState)({}), selectedObjectData = _120[0], setSelectedObjectData = _120[1];
-    var _121 = (0, react_1.useState)(false), referenceLoading = _121[0], setReferenceLoading = _121[1];
-    var _122 = (0, react_1.useState)({}), referencesOptions = _122[0], setReferencesOptions = _122[1];
-    var _123 = (0, react_1.useState)({}), referencesDetails = _123[0], setReferencesDetails = _123[1];
-    var _124 = (0, react_1.useState)({}), referenceDeleteTableData = _124[0], setReferenceDeleteTableData = _124[1];
-    var _125 = (0, react_1.useState)(0), referenceDeleteIndex = _125[0], setReferenceDeleteIndex = _125[1];
-    var _126 = (0, react_1.useState)({
+    }), selectedListAddress = _122[0], setSelectedListAddress = _122[1];
+    var _123 = (0, react_1.useState)({}), selectedObjectData = _123[0], setSelectedObjectData = _123[1];
+    var _124 = (0, react_1.useState)(false), referenceLoading = _124[0], setReferenceLoading = _124[1];
+    var _125 = (0, react_1.useState)({}), referencesOptions = _125[0], setReferencesOptions = _125[1];
+    var _126 = (0, react_1.useState)({}), referencesDetails = _126[0], setReferencesDetails = _126[1];
+    var _127 = (0, react_1.useState)({}), referenceDeleteTableData = _127[0], setReferenceDeleteTableData = _127[1];
+    var _128 = (0, react_1.useState)(0), referenceDeleteIndex = _128[0], setReferenceDeleteIndex = _128[1];
+    var _129 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _126[0], setReferenceCreationModal = _126[1];
-    var _127 = (0, react_1.useState)({}), referenceModelSchema = _127[0], setReferenceSchema = _127[1];
-    var _128 = (0, react_1.useState)([]), kanbanChecked = _128[0], setKanbanChecked = _128[1];
+    }), referenceCreationModal = _129[0], setReferenceCreationModal = _129[1];
+    var _130 = (0, react_1.useState)({}), referenceModelSchema = _130[0], setReferenceSchema = _130[1];
+    var _131 = (0, react_1.useState)([]), kanbanChecked = _131[0], setKanbanChecked = _131[1];
     //INFO : Offline
-    var _129 = (0, react_1.useState)(0), offlineDataLength = _129[0], setOfflineDataLength = _129[1];
-    var _130 = (0, react_1.useState)(false), offlineModal = _130[0], setOfflineModal = _130[1];
+    var _132 = (0, react_1.useState)(0), offlineDataLength = _132[0], setOfflineDataLength = _132[1];
+    var _133 = (0, react_1.useState)(false), offlineModal = _133[0], setOfflineModal = _133[1];
+    // INFO: live-stream state — driven by socket connection and navigator.onLine
+    var _134 = (0, react_1.useState)(false), isLive = _134[0], setIsLive = _134[1];
+    var _135 = (0, react_1.useState)(false), isLiveOffline = _135[0], setIsLiveOffline = _135[1];
+    // INFO: true when navigator is offline — used to switch ReadQueryHoc between
+    // server reads (online, full pagination) and IndexedDB reads (offline, cached data).
+    // Independent of SSE status so it works even when bareSocketName is not set.
+    var _136 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _136[0], setIsNetworkOffline = _136[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -348,6 +356,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // Intentionally separate from previousSelectedData, which advances on every
     // edit and therefore cannot serve as a stable submit baseline.
     var loadedSelectedData = (0, react_1.useRef)(null);
+    // INFO: live-stream SSE client — created on mount when bareSocketName is set
+    var socketClientRef = (0, react_1.useRef)(null);
+    // INFO: always-current ref for handleApplyEnvelope — updated on every render
+    // so the LiveStreamClient's onEnvelope callback never holds a stale closure
+    // over props.type or other values that change without triggering the SSE useEffect.
+    var handleApplyEnvelopeRef = (0, react_1.useRef)(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/];
+    }); }); });
+    // INFO: always-current ref for handleRefresh — kept in sync below so the
+    // polling setInterval never captures a stale closure over filters/pagination
+    // state that changed after the interval was first registered.
+    var handleRefreshRef = (0, react_1.useRef)(function () { });
     // INFO: Cumulative set of field IDs the user explicitly interacted with (dirty tracking).
     // Populated via the bareUpdateHandleData useEffect which detects per-render field changes.
     // Used as the PRIMARY condition for deciding what to submit:
@@ -632,12 +652,106 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 ? JSON.parse(JSON.stringify(newBaseline))
                 : null;
         },
+        // INFO: expose live-stream status so consumers can render indicators externally
+        isLive: isLive,
+        isLiveOffline: isLiveOffline,
     }); });
     (0, react_1.useEffect)(function () {
         handleCheckOfflineDataLength();
         /* eslint-disable */
     }, [props.collectionId]);
     /* eslint-enable */
+    // INFO: offline prefetch — fires on mount when bareOffline:true and navigator is online.
+    // Runs whenever collectionId or bareOffline changes (e.g. story switching in Storybook).
+    // handleOfflinePrefetch is a no-op when offline so safe to call unconditionally here.
+    (0, react_1.useEffect)(function () {
+        handleOfflinePrefetch();
+        /* eslint-disable */
+    }, [props.collectionId, (_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.bareOffline]);
+    /* eslint-enable */
+    // INFO: MRQ polling — calls handleRefresh every N ms (e.g. 1500) as a fallback.
+    // Calls through handleRefreshRef so the interval always dispatches the latest
+    // closure, even when filters or pagination state changes between ticks.
+    // Skips firing when SSE is connected (isLive) to avoid a jarring table
+    // re-fetch overwriting rows that SSE already delivered live.
+    // Also skips when the device is offline (isNetworkOffline) to avoid
+    // unnecessary failed network requests during offline periods.
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var interval = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.barePollingInterval;
+        if (!interval)
+            return;
+        var timer = setInterval(function () {
+            if (!isLive && !isNetworkOffline)
+                handleRefreshRef.current();
+        }, interval);
+        return function () { return clearInterval(timer); };
+        /* eslint-disable */
+    }, [(_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.barePollingInterval, isLive, isNetworkOffline]);
+    /* eslint-enable */
+    // INFO: Pub/Sub → SSE live-stream — driven by bareSettings.bareSocketName
+    // EventSource URL: {sseEndpoint}/{room}?bm_apiToken={token}
+    // Mirrors Verdant's emitDeliveryEvent / pages/api/events.ts pattern on the client.
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var room = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareSocketName;
+        var sseEndpoint = props.devSettings.sseEndpoint;
+        if (process.env.NODE_ENV !== "production") {
+            console.debug("[DTW SSE] room=", room, "sseEndpoint=", sseEndpoint, "→", room && sseEndpoint
+                ? "connecting"
+                : "skipped (missing room or sseEndpoint)");
+        }
+        if (!room || !sseEndpoint)
+            return;
+        var client = new socket_1.LiveStreamClient({
+            url: (0, socket_1.buildSSEUrl)(sseEndpoint, room, props.devSettings.dbAPIToken, props.devSettings.dbUserToken),
+            onEnvelope: function (env) {
+                if (process.env.NODE_ENV !== "production") {
+                    console.debug("[DTW SSE] envelope received", env);
+                }
+                handleApplyEnvelopeRef.current(env);
+            },
+            onStatusChange: function (status) {
+                if (process.env.NODE_ENV !== "production") {
+                    console.debug("[DTW SSE] status →", status, "room=", room);
+                }
+                setIsLive(status === "connected");
+                setIsLiveOffline(status === "offline");
+            },
+        });
+        socketClientRef.current = client;
+        client.connect();
+        return function () {
+            client.disconnect();
+            socketClientRef.current = null;
+            setIsLive(false);
+            setIsLiveOffline(false);
+        };
+        /* eslint-disable */
+    }, [
+        (_36 = props.bareSettings) === null || _36 === void 0 ? void 0 : _36.bareSocketName,
+        props.collectionId,
+        props.devSettings.sseEndpoint,
+        props.devSettings.dbAPIToken,
+    ]);
+    /* eslint-enable */
+    // INFO: track real network connectivity independently of SSE so
+    // ReadQueryHoc can switch between server (online) and IndexedDB (offline)
+    // even when bareSocketName is not set.
+    (0, react_1.useEffect)(function () {
+        var handleOnline = function () { return setIsNetworkOffline(false); };
+        var handleOffline = function () { return setIsNetworkOffline(true); };
+        if (typeof window !== "undefined") {
+            window.addEventListener("online", handleOnline);
+            window.addEventListener("offline", handleOffline);
+        }
+        return function () {
+            if (typeof window !== "undefined") {
+                window.removeEventListener("online", handleOnline);
+                window.removeEventListener("offline", handleOffline);
+            }
+        };
+    }, []);
     // INFO: scroll-mode auto-pagination. Observes a sentinel below the list;
     // when it enters the viewport we fire handlePagination("next"). End-of-list
     // is per-backend — Firebase relies on cursor presence; non-Firebase uses
@@ -679,7 +793,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     }, [tableData.length]);
     //INFO : Change Data Type & ID Refresh
     (0, react_1.useEffect)(function () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         switch (props.type) {
             case "read":
             case "update":
@@ -703,6 +817,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
                 if (props.id === "new") {
                     (0, updateModule_1.handleRetrieveReferenceOptions)(selectedData, props.model, dbModule, devSettings, setReferencesOptions, setReferencesDetails);
+                }
+                // INFO: skip online reference fetch when offline — referencesOptions
+                // is already populated from IndexedDB cache in handleRetrieveSelectedData.
+                // When online, runs for all read/update views (both new and existing docs).
+                if (!((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareOffline)) {
                     handleObjectReferenceOptions();
                 }
                 //INFO : Auth Feature
@@ -839,10 +958,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.model,
         props.localURLEndpoint,
-        (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.extendedTabs,
-        (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.viewId,
-        (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.additionalQuery,
-        (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.groupBy,
+        (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.extendedTabs,
+        (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.viewId,
+        (_39 = props.organise) === null || _39 === void 0 ? void 0 : _39.additionalQuery,
+        (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.groupBy,
         props.type,
     ]);
     (0, react_1.useEffect)(function () {
@@ -932,7 +1051,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             };
         }, 100);
         return function () { return clearTimeout(timeoutId); };
-    }, [(_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.showReadFloatingNav, props.type, props.id, loading]);
+    }, [(_41 = props.organise) === null || _41 === void 0 ? void 0 : _41.showReadFloatingNav, props.type, props.id, loading]);
     (0, react_1.useEffect)(function () {
         if (props.type !== "read")
             return;
@@ -1003,7 +1122,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     //SECTION: Handle List
     //=====================================================================================
     var handleCheckOfflineDataLength = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var offlineDataResp, offlineData;
+        var offlineDataResp, offlineData, pendingCount;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -1011,11 +1130,345 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 case 1:
                     offlineDataResp = _b.sent();
                     offlineData = (_a = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _a !== void 0 ? _a : [];
-                    setOfflineDataLength(offlineData.length);
+                    pendingCount = offlineData.filter(function (doc) { return !(doc.baseOnline === true && doc.syncStatus === "synced"); }).length;
+                    setOfflineDataLength(pendingCount);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    // INFO: Offline prefetch — runs on mount when bareOffline:true and navigator is online.
+    // Pulls the latest N docs from the main collection and all reference collections into
+    // IndexedDB so the full offline experience works immediately after connectivity drops.
+    //
+    // Main collection   → IndexedDB key "{collectionId}"      stamped { baseOnline: true }
+    // Reference tables  → IndexedDB key "ref_{collectionId}"  read-only, no limit by default
+    var handleOfflinePrefetch = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var prefetchLimit, mainRQ, mainResp, stamped, existingResp, existingData, pendingDocs, pendingIds_1, mergedData, _a, references;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return __generator(this, function (_l) {
+            switch (_l.label) {
+                case 0:
+                    if (!((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareOffline))
+                        return [2 /*return*/];
+                    if (typeof navigator !== "undefined" && !navigator.onLine)
+                        return [2 /*return*/];
+                    if (!((_c = props.lib) === null || _c === void 0 ? void 0 : _c.axios))
+                        return [2 /*return*/];
+                    prefetchLimit = (_e = (_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareOfflinePrefetchLimit) !== null && _e !== void 0 ? _e : 10;
+                    _l.label = 1;
+                case 1:
+                    _l.trys.push([1, 7, , 8]);
+                    mainRQ = new readQuery_1.ReadQuery({
+                        dbModule: props.lib.axios,
+                        dbType: devSettings.server,
+                        dbCollection: props.collectionId,
+                        dbEndpoint: devSettings.dbEndpoint,
+                        dbAPIToken: devSettings.dbAPIToken,
+                        dbUserToken: devSettings.dbUserToken,
+                    });
+                    return [4 /*yield*/, mainRQ.call({
+                            type: "list",
+                            // INFO: respect the consumer's configured sort so the prefetched page
+                            // matches what the user sees online. Fall back to createdAt desc when
+                            // no sort is configured (safe default for append-order collections).
+                            sort: (_g = (_f = props.organise) === null || _f === void 0 ? void 0 : _f.sort) !== null && _g !== void 0 ? _g : { sortId: "createdAt", type: "desc" },
+                            limit: prefetchLimit,
+                        })];
+                case 2:
+                    mainResp = _l.sent();
+                    if (!((mainResp === null || mainResp === void 0 ? void 0 : mainResp.data) && Array.isArray(mainResp.data))) return [3 /*break*/, 6];
+                    stamped = mainResp.data.map(function (doc) { return (__assign(__assign({}, doc), { baseOnline: true, syncStatus: "synced", dirtySections: [] })); });
+                    return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
+                case 3:
+                    existingResp = _l.sent();
+                    existingData = (_h = existingResp === null || existingResp === void 0 ? void 0 : existingResp.data) !== null && _h !== void 0 ? _h : [];
+                    pendingDocs = existingData.filter(function (doc) { return !(doc.baseOnline === true && doc.syncStatus === "synced"); });
+                    pendingIds_1 = new Set(pendingDocs.map(function (doc) { var _a, _b; return (_b = (_a = doc[serverId]) !== null && _a !== void 0 ? _a : doc._id) !== null && _b !== void 0 ? _b : doc.id; }));
+                    mergedData = __spreadArray(__spreadArray([], pendingDocs, true), stamped.filter(function (doc) { var _a, _b; return !pendingIds_1.has((_b = (_a = doc[serverId]) !== null && _a !== void 0 ? _a : doc._id) !== null && _b !== void 0 ? _b : doc.id); }), true);
+                    return [4 /*yield*/, indexedDb_1.indexedDb.putValue("local", {
+                            type: props.collectionId,
+                            data: mergedData,
+                        })];
+                case 4:
+                    _l.sent();
+                    return [4 /*yield*/, handleCheckOfflineDataLength()];
+                case 5:
+                    _l.sent();
+                    _l.label = 6;
+                case 6: return [3 /*break*/, 8];
+                case 7:
+                    _a = _l.sent();
+                    return [3 /*break*/, 8];
+                case 8:
+                    references = (_k = (_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareOfflineReferences) !== null && _k !== void 0 ? _k : [];
+                    return [4 /*yield*/, Promise.all(references.map(function (ref) { return __awaiter(void 0, void 0, void 0, function () {
+                            var refRQ, refResp, _a;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0:
+                                        _b.trys.push([0, 5, , 6]);
+                                        refRQ = new readQuery_1.ReadQuery({
+                                            dbModule: props.lib.axios,
+                                            dbType: devSettings.server,
+                                            dbCollection: ref.collectionId,
+                                            dbEndpoint: devSettings.dbEndpoint,
+                                            dbAPIToken: devSettings.dbAPIToken,
+                                            dbUserToken: devSettings.dbUserToken,
+                                        });
+                                        return [4 /*yield*/, refRQ.call(__assign({ type: "list", query: ref.query, sort: ref.sort }, (ref.limit ? { limit: ref.limit } : { stopLimit: true })))];
+                                    case 1:
+                                        refResp = _b.sent();
+                                        if (!((refResp === null || refResp === void 0 ? void 0 : refResp.data) && Array.isArray(refResp.data))) return [3 /*break*/, 3];
+                                        return [4 /*yield*/, indexedDb_1.indexedDb.putValue("local", {
+                                                // INFO: key format matches what handleRetrieveSelectedData reads:
+                                                // eachModel.referenceSpaceId + "-ref" (e.g. "meraque-cycles-ref")
+                                                type: "".concat(ref.collectionId, "-ref"),
+                                                data: refResp.data,
+                                            })];
+                                    case 2:
+                                        _b.sent();
+                                        if (process.env.NODE_ENV !== "production") {
+                                            console.debug("[DTW prefetch] reference cached", ref.collectionId + "-ref", "count=", refResp.data.length);
+                                        }
+                                        return [3 /*break*/, 4];
+                                    case 3:
+                                        if (process.env.NODE_ENV !== "production") {
+                                            console.debug("[DTW prefetch] reference EMPTY or failed", ref.collectionId, refResp);
+                                        }
+                                        _b.label = 4;
+                                    case 4: return [3 /*break*/, 6];
+                                    case 5:
+                                        _a = _b.sent();
+                                        return [3 /*break*/, 6];
+                                    case 6: return [2 /*return*/];
+                                }
+                            });
+                        }); }))];
+                case 9:
+                    _l.sent();
                     return [2 /*return*/];
             }
         });
     }); };
+    // INFO: for each reference/listReference field in the schema, look up the
+    // cached ref_{collectionId} in IndexedDB and substitute the label in-place.
+    // This runs in the offline branch of handleGetListData so the list shows
+    // human-readable labels instead of raw UUIDs.
+    var handleResolveOfflineReferences = function (rows) { return __awaiter(void 0, void 0, void 0, function () {
+        var refFields, refCacheMap;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    refFields = structure.filter(function (s) {
+                        return (s.type === "reference" || s.type === "listReference") &&
+                            s.referenceSpaceId &&
+                            s.referenceLabel;
+                    });
+                    if (refFields.length === 0)
+                        return [2 /*return*/, rows];
+                    refCacheMap = {};
+                    return [4 /*yield*/, Promise.all(refFields.map(function (field) { return __awaiter(void 0, void 0, void 0, function () {
+                            var colId, cached;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        colId = field.referenceSpaceId;
+                                        if (refCacheMap[colId] !== undefined)
+                                            return [2 /*return*/];
+                                        return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", "".concat(colId, "-ref"))];
+                                    case 1:
+                                        cached = _a.sent();
+                                        refCacheMap[colId] = Array.isArray(cached === null || cached === void 0 ? void 0 : cached.data) ? cached.data : [];
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); }))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, rows.map(function (row) {
+                            var resolved = __assign({}, row);
+                            refFields.forEach(function (field) {
+                                var _a, _b;
+                                var colId = field.referenceSpaceId;
+                                var labelKey = field.referenceLabel;
+                                var cache = (_a = refCacheMap[colId]) !== null && _a !== void 0 ? _a : [];
+                                var rawValue = row[field.id];
+                                if (!rawValue)
+                                    return;
+                                if (field.type === "reference") {
+                                    // INFO: single reference — replace UUID with the label string
+                                    if (typeof rawValue !== "string" && typeof rawValue !== "number")
+                                        return;
+                                    var found = cache.find(function (r) { return r._id === rawValue || r.id === rawValue; });
+                                    if (found)
+                                        resolved[field.id] = (_b = found[labelKey]) !== null && _b !== void 0 ? _b : rawValue;
+                                }
+                                else if (field.type === "listReference") {
+                                    // INFO: list reference — guard against non-array values (null, string, etc.)
+                                    // Keep as array of resolved labels so downstream .map() calls still work.
+                                    if (!Array.isArray(rawValue))
+                                        return;
+                                    resolved[field.id] = rawValue.map(function (id) {
+                                        var _a;
+                                        var found = cache.find(function (r) { return r._id === id || r.id === id; });
+                                        return found ? ((_a = found[labelKey]) !== null && _a !== void 0 ? _a : id) : id;
+                                    });
+                                }
+                            });
+                            return resolved;
+                        })];
+            }
+        });
+    }); };
+    // Behaviour is split by view type:
+    //   list          → mutate tableData row(s) in-place; drive IndexedDB offline store
+    //   read / update → push update into selectedData; on delete navigate back to list
+    var handleApplyEnvelope = function (envelope) { return __awaiter(void 0, void 0, void 0, function () {
+        var isListView, _a, record_1, record_2, record, deletedId_1, snapData_1, record_3, safeFields_1, record, record;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    isListView = props.type === "list";
+                    if (!isListView) return [3 /*break*/, 10];
+                    _a = envelope.type;
+                    switch (_a) {
+                        case "insert": return [3 /*break*/, 1];
+                        case "update": return [3 /*break*/, 3];
+                        case "delete": return [3 /*break*/, 5];
+                        case "snapshot": return [3 /*break*/, 7];
+                    }
+                    return [3 /*break*/, 9];
+                case 1:
+                    record_1 = envelope.payload;
+                    setTableData(function (prev) {
+                        if (prev.some(function (r) { return r._id === record_1._id; }))
+                            return prev;
+                        return __spreadArray([record_1], prev, true); // INFO: prepend — newest row at top
+                    });
+                    return [4 /*yield*/, indexedDb_1.indexedDb.handleUpsertLive(props.collectionId, record_1)];
+                case 2:
+                    _c.sent();
+                    return [3 /*break*/, 9];
+                case 3:
+                    record_2 = envelope.payload;
+                    setTableData(function (prev) {
+                        var idx = prev.findIndex(function (r) { return r._id === record_2._id; });
+                        if (idx < 0)
+                            return prev; // INFO: row not in current page — skip
+                        var next = __spreadArray([], prev, true);
+                        next[idx] = __assign(__assign({}, next[idx]), record_2);
+                        return next;
+                    });
+                    return [4 /*yield*/, indexedDb_1.indexedDb.handleUpsertLive(props.collectionId, record_2)];
+                case 4:
+                    _c.sent();
+                    return [3 /*break*/, 9];
+                case 5:
+                    record = envelope.payload;
+                    deletedId_1 = record._id;
+                    setTableData(function (prev) {
+                        return prev.filter(function (r) { return r._id !== deletedId_1; });
+                    });
+                    return [4 /*yield*/, indexedDb_1.indexedDb.handleDeleteLive(props.collectionId, deletedId_1)];
+                case 6:
+                    _c.sent();
+                    return [3 /*break*/, 9];
+                case 7:
+                    snapData_1 = Array.isArray(envelope.payload)
+                        ? envelope.payload
+                        : [envelope.payload];
+                    setTableData(function (prev) {
+                        var map = new Map(prev.map(function (r) { return [r._id, r]; }));
+                        snapData_1.forEach(function (r) {
+                            return map.set(r._id, __assign(__assign({}, map.get(r._id)), r));
+                        });
+                        return Array.from(map.values());
+                    });
+                    // INFO: persist reconciled docs to IndexedDB so offline mode stays
+                    // consistent after a snapshot — mirrors what insert/update/delete do
+                    // via handleUpsertLive.
+                    return [4 /*yield*/, Promise.all(snapData_1.map(function (r) {
+                            return indexedDb_1.indexedDb.handleUpsertLive(props.collectionId, r);
+                        }))];
+                case 8:
+                    // INFO: persist reconciled docs to IndexedDB so offline mode stays
+                    // consistent after a snapshot — mirrors what insert/update/delete do
+                    // via handleUpsertLive.
+                    _c.sent();
+                    return [3 /*break*/, 9];
+                case 9: return [3 /*break*/, 11];
+                case 10:
+                    // INFO: read / update view — push update into form; navigate away on delete
+                    switch (envelope.type) {
+                        case "update": {
+                            record_3 = envelope.payload;
+                            if (!Array.isArray(record_3)) {
+                                // INFO: verify the envelope targets the document currently open —
+                                // when using a collection-level room the server may broadcast updates
+                                // for sibling documents; applying them here would corrupt the form.
+                                if (record_3._id && record_3._id !== props.id)
+                                    break;
+                                if (dirtyFieldsRef.current.size > 0) {
+                                    safeFields_1 = Object.fromEntries(Object.entries(record_3).filter(function (_a) {
+                                        var key = _a[0];
+                                        return !dirtyFieldsRef.current.has(key);
+                                    }));
+                                    if (Object.keys(safeFields_1).length > 0) {
+                                        setSelectedData(function (prev) { return (__assign(__assign({}, prev), safeFields_1)); });
+                                    }
+                                }
+                                else {
+                                    setSelectedData(function (prev) { return (__assign(__assign({}, prev), record_3)); });
+                                }
+                            }
+                            break;
+                        }
+                        case "snapshot": {
+                            record = envelope.payload;
+                            if (!Array.isArray(record)) {
+                                if (record._id && record._id !== props.id)
+                                    break;
+                                setSelectedData(record);
+                            }
+                            break;
+                        }
+                        case "delete": {
+                            record = envelope.payload;
+                            if ((record === null || record === void 0 ? void 0 : record._id) && record._id !== props.id)
+                                break;
+                            // INFO: document deleted externally — navigate back to list if possible,
+                            // otherwise show an in-form notification so the user isn't left on a
+                            // stale deleted document with zero feedback (navigate may be null when
+                            // DataTemplateWrapper is used without a router integration)
+                            if ((_b = props.lib) === null || _b === void 0 ? void 0 : _b.navigate) {
+                                props.lib.navigate(-1);
+                            }
+                            else {
+                                setNotification({
+                                    type: false,
+                                    title: "Record Deleted",
+                                    msg: "This record was deleted by another user.",
+                                });
+                            }
+                            break;
+                        }
+                        default:
+                            // INFO: insert envelopes are not expected on a read/update view
+                            // (document-level rooms never emit inserts). Silently ignore to
+                            // handle collection-level rooms that may broadcast all event types.
+                            break;
+                    }
+                    _c.label = 11;
+                case 11: return [2 /*return*/];
+            }
+        });
+    }); };
+    // INFO: keep ref current after every render so the SSE client always
+    // dispatches through the latest closure — captures current props.type,
+    // props.collectionId, and any state values without requiring the SSE
+    // useEffect to re-run (which would tear down and rebuild the EventSource).
+    handleApplyEnvelopeRef.current = handleApplyEnvelope;
     var handleReadQueryHocSort = function (query) {
         var _a, _b;
         var sort = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort) !== null && _b !== void 0 ? _b : undefined;
@@ -1261,22 +1714,25 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var handleGetListData = function (responseData, type, rowId) { return __awaiter(void 0, void 0, void 0, function () {
-        var dataList, prettierDataList, clonedTableData, clonedSpaceTableData, dummyPrettierDataList_1, selectedIndex_1, isScrollMode, newTableData, newPrettierTableData, isExists, cursorResp, lastDataId, err_1;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        return __generator(this, function (_p) {
-            switch (_p.label) {
+        var dataList, prettierDataList, clonedTableData, clonedSpaceTableData, dummyPrettierDataList_1, resolvedData, selectedIndex_1, isScrollMode, newTableData, newPrettierTableData, isExists, cursorResp, lastDataId, err_1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        return __generator(this, function (_o) {
+            switch (_o.label) {
                 case 0:
                     dataList = [];
                     prettierDataList = [];
-                    _p.label = 1;
+                    _o.label = 1;
                 case 1:
-                    _p.trys.push([1, 6, , 7]);
+                    _o.trys.push([1, 7, , 8]);
                     clonedTableData = JSON.parse(JSON.stringify(tableData));
                     clonedSpaceTableData = JSON.parse(JSON.stringify(spaceTableData));
-                    if (!(responseData === null || responseData === void 0 ? void 0 : responseData.data)) return [3 /*break*/, 5];
-                    if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareOffline)) return [3 /*break*/, 2];
+                    if (!(responseData === null || responseData === void 0 ? void 0 : responseData.data)) return [3 /*break*/, 6];
+                    if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareOffline)) return [3 /*break*/, 3];
                     dummyPrettierDataList_1 = [];
-                    (_b = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _b === void 0 ? void 0 : _b.map(function (eachData) {
+                    return [4 /*yield*/, handleResolveOfflineReferences(responseData.data)];
+                case 2:
+                    resolvedData = _o.sent();
+                    resolvedData.map(function (eachData) {
                         var _a, _b;
                         var tempData = eachData;
                         (0, listModule_1.handleDataEditButton)(tempData, (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate, (_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareListActionBtns);
@@ -1284,10 +1740,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                     });
                     prettierDataList = dummyPrettierDataList_1;
-                    return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, (0, listModule_1.handleListDataBasedOnModel)(responseData === null || responseData === void 0 ? void 0 : responseData.data, props.devSettings, (_c = props.lib) === null || _c === void 0 ? void 0 : _c.axios, structure, (_d = props.organise) === null || _d === void 0 ? void 0 : _d.handleNavigate, ((_e = props.organise) === null || _e === void 0 ? void 0 : _e.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_f = props.edit) === null || _f === void 0 ? void 0 : _f.activityLog : undefined, (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListActionBtns, (_h = props.edit) === null || _h === void 0 ? void 0 : _h.disabledUpdate)];
-                case 3:
-                    prettierDataList = _p.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, (0, listModule_1.handleListDataBasedOnModel)(responseData === null || responseData === void 0 ? void 0 : responseData.data, props.devSettings, (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios, structure, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.handleNavigate, ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_e = props.edit) === null || _e === void 0 ? void 0 : _e.activityLog : undefined, (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListActionBtns, (_g = props.edit) === null || _g === void 0 ? void 0 : _g.disabledUpdate)];
+                case 4:
+                    prettierDataList = _o.sent();
                     if (props.groupId) {
                         prettierDataList.forEach(function (item, idx) {
                             var _a, _b;
@@ -1296,9 +1752,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }
-                    _p.label = 4;
-                case 4:
-                    (_j = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _j === void 0 ? void 0 : _j.map(function (eachData) {
+                    _o.label = 5;
+                case 5:
+                    (_h = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _h === void 0 ? void 0 : _h.map(function (eachData) {
                         if (eachData["_id"]) {
                             eachData["id"] = eachData["_id"];
                             delete eachData["_id"];
@@ -1306,8 +1762,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                     });
                     dataList = responseData.data;
-                    _p.label = 5;
-                case 5:
+                    _o.label = 6;
+                case 6:
                     if (type === "update" || type === "create") {
                         try {
                             if (type === "update") {
@@ -1318,12 +1774,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     return null;
                                 });
                                 if (selectedIndex_1 > -1) {
-                                    clonedTableData[selectedIndex_1] = (_k = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _k === void 0 ? void 0 : _k[0];
+                                    clonedTableData[selectedIndex_1] = (_j = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _j === void 0 ? void 0 : _j[0];
                                     clonedSpaceTableData[selectedIndex_1] = prettierDataList === null || prettierDataList === void 0 ? void 0 : prettierDataList[0];
                                 }
                             }
                             else {
-                                clonedTableData.push((_l = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _l === void 0 ? void 0 : _l[0]);
+                                clonedTableData.push((_k = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _k === void 0 ? void 0 : _k[0]);
                                 clonedSpaceTableData.push(prettierDataList === null || prettierDataList === void 0 ? void 0 : prettierDataList[0]);
                             }
                             handleSetListData(clonedTableData, clonedSpaceTableData);
@@ -1334,7 +1790,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         isScrollMode = renderCheckScrollMode();
                         if (!isScrollMode && !isFirebase) {
                             handleSetListData(dataList, prettierDataList);
-                            setSize((_m = responseData.count) !== null && _m !== void 0 ? _m : 0);
+                            setSize((_l = responseData.count) !== null && _l !== void 0 ? _l : 0);
                         }
                         else {
                             newTableData = [];
@@ -1365,15 +1821,15 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                             setCursor(cursorResp);
                             if (isScrollMode && !isFirebase) {
-                                setSize((_o = responseData.count) !== null && _o !== void 0 ? _o : 0);
+                                setSize((_m = responseData.count) !== null && _m !== void 0 ? _m : 0);
                             }
                         }
                     }
-                    return [3 /*break*/, 7];
-                case 6:
-                    err_1 = _p.sent();
-                    return [3 /*break*/, 7];
+                    return [3 /*break*/, 8];
                 case 7:
+                    err_1 = _o.sent();
+                    return [3 /*break*/, 8];
+                case 8:
                     setTableLoading(false);
                     return [2 /*return*/];
             }
@@ -1400,6 +1856,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             handleCheckOfflineDataLength();
         }, 500);
     };
+    // INFO: keep polling ref current so the setInterval always fires the latest
+    // handleRefresh closure (captures current filters, pagination, etc.)
+    handleRefreshRef.current = handleRefresh;
     var handleObjectReferenceOptions = function () { return __awaiter(void 0, void 0, void 0, function () {
         var clonedOptions_1, clonedDetails_1, model, err_2;
         var _a;
@@ -2605,7 +3064,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleRemoveSelectedData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var deletable, selectedId_1, deleteIds, res, offlineDataResp, offlineData, selectedIndex_2, err_13;
+        var deletable, selectedId_1, deleteIds, res, offlineDataResp, offlineData, selectedIndex_2, doc, err_13;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return __generator(this, function (_k) {
             switch (_k.label) {
@@ -2641,8 +3100,25 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             selectedIndex_2 = index;
                         return null;
                     });
-                    if (selectedIndex_2 >= 0)
+                    if (selectedIndex_2 >= 0) {
+                        doc = offlineData[selectedIndex_2];
+                        // INFO: block delete for server-originated docs when offline —
+                        // the source of truth is online and we can't safely remove it
+                        // locally without risking data loss on the server.
+                        // Only locally-created docs (baseOnline: false) can be deleted offline.
+                        if (doc.baseOnline === true) {
+                            setNotification({
+                                type: false,
+                                title: "Delete Not Allowed Offline",
+                                msg: "This record was created on the server and cannot be deleted while offline. Please reconnect and try again.",
+                            });
+                            setLoading(false);
+                            setModalVisible(false);
+                            setDeleteModal(false);
+                            return [2 /*return*/];
+                        }
                         offlineData.splice(selectedIndex_2, 1);
+                    }
                     return [4 /*yield*/, indexedDb_1.indexedDb.putValue("local", {
                             data: offlineData,
                             type: props.collectionId,
@@ -3082,23 +3558,26 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleUploadOfflineData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var dataUploadedId, offlineDataResp, offlineData, offlineDataIds, updateDataRes, updateDataList, _loop_1, i, err_18, success, filteredData;
-        var _a, _b, _c, _d, _e;
-        return __generator(this, function (_f) {
-            switch (_f.label) {
+        var dataUploadedId, offlineDataResp, offlineData, offlineDataIds, updateDataRes, updateDataList, _loop_1, i, err_18, success, fullDataResp, fullData, updatedData;
+        var _a, _b, _c, _d, _e, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
                 case 0:
                     setLoading(true);
                     dataUploadedId = [];
                     return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
                 case 1:
-                    offlineDataResp = _f.sent();
+                    offlineDataResp = _g.sent();
                     offlineData = (_a = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _a !== void 0 ? _a : [];
+                    // INFO: only upload docs that need syncing — skip prefetched server docs
+                    // (baseOnline: true, syncStatus: "synced") which are already on the server
+                    offlineData = offlineData.filter(function (doc) { return !(doc.baseOnline === true && doc.syncStatus === "synced"); });
                     offlineDataIds = offlineData.map(function (eachData) {
                         return eachData[serverId];
                     });
-                    _f.label = 2;
+                    _g.label = 2;
                 case 2:
-                    _f.trys.push([2, 8, , 9]);
+                    _g.trys.push([2, 8, , 9]);
                     if (!(offlineData.length > 0)) return [3 /*break*/, 7];
                     return [4 /*yield*/, readServerQuery.call({
                             type: "list",
@@ -3112,18 +3591,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             stopLimit: true,
                         })];
                 case 3:
-                    updateDataRes = _f.sent();
+                    updateDataRes = _g.sent();
                     updateDataList = (_b = updateDataRes === null || updateDataRes === void 0 ? void 0 : updateDataRes.data) !== null && _b !== void 0 ? _b : [];
                     _loop_1 = function (i) {
                         var eachOfflineData, offlineDataId, storedBaseline, serverDoc, preComplete, isUpdate, res, err_19;
-                        var _g;
-                        return __generator(this, function (_h) {
-                            switch (_h.label) {
+                        var _h;
+                        return __generator(this, function (_j) {
+                            switch (_j.label) {
                                 case 0:
                                     eachOfflineData = offlineData[i];
                                     return [4 /*yield*/, (0, utils_1.sleep)(300)];
                                 case 1:
-                                    _h.sent();
+                                    _j.sent();
                                     offlineDataId = eachOfflineData[serverId];
                                     storedBaseline = (_c = eachOfflineData.__offlineBaseline) !== null && _c !== void 0 ? _c : null;
                                     delete eachOfflineData.__offlineBaseline;
@@ -3157,46 +3636,46 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     if (!((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareUpdateHandlePreComplete)) return [3 /*break*/, 3];
                                     return [4 /*yield*/, props.bareSettings.bareUpdateHandlePreComplete(eachOfflineData)];
                                 case 2:
-                                    preComplete = _h.sent();
+                                    preComplete = _j.sent();
                                     if (!preComplete)
                                         return [2 /*return*/, "continue"]; // Skip this item
-                                    _h.label = 3;
+                                    _j.label = 3;
                                 case 3:
                                     isUpdate = !!serverDoc;
                                     return [4 /*yield*/, handleSubmitData(undefined, undefined, undefined, eachOfflineData, offlineDataId, isUpdate)];
                                 case 4:
-                                    res = _h.sent();
+                                    res = _j.sent();
                                     if (!res) return [3 /*break*/, 8];
                                     dataUploadedId.push(offlineDataId);
                                     if (!((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareUpdateHandlePostComplete)) return [3 /*break*/, 8];
-                                    _h.label = 5;
+                                    _j.label = 5;
                                 case 5:
-                                    _h.trys.push([5, 7, , 8]);
-                                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete(__assign((_g = {}, _g[serverId] = res, _g), eachOfflineData))];
+                                    _j.trys.push([5, 7, , 8]);
+                                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete(__assign((_h = {}, _h[serverId] = res, _h), eachOfflineData))];
                                 case 6:
-                                    _h.sent();
+                                    _j.sent();
                                     return [3 /*break*/, 8];
                                 case 7:
-                                    err_19 = _h.sent();
+                                    err_19 = _j.sent();
                                     return [3 /*break*/, 8];
                                 case 8: return [2 /*return*/];
                             }
                         });
                     };
                     i = 0;
-                    _f.label = 4;
+                    _g.label = 4;
                 case 4:
                     if (!(i < offlineData.length)) return [3 /*break*/, 7];
                     return [5 /*yield**/, _loop_1(i)];
                 case 5:
-                    _f.sent();
-                    _f.label = 6;
+                    _g.sent();
+                    _g.label = 6;
                 case 6:
                     i++;
                     return [3 /*break*/, 4];
                 case 7: return [3 /*break*/, 9];
                 case 8:
-                    err_18 = _f.sent();
+                    err_18 = _g.sent();
                     return [3 /*break*/, 9];
                 case 9:
                     success = dataUploadedId.length === offlineData.length;
@@ -3207,13 +3686,22 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             ? dataUploadedId.length
                             : offlineData.length - dataUploadedId.length, " offline data have been ").concat(success ? "success" : "failed", " uploaded to cloud"),
                     });
-                    filteredData = offlineData.filter(function (eachOfflineData) { return !dataUploadedId.includes(eachOfflineData[serverId]); });
+                    return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
+                case 10:
+                    fullDataResp = _g.sent();
+                    fullData = (_f = fullDataResp === null || fullDataResp === void 0 ? void 0 : fullDataResp.data) !== null && _f !== void 0 ? _f : [];
+                    updatedData = fullData.map(function (doc) {
+                        if (dataUploadedId.includes(doc[serverId])) {
+                            return __assign(__assign({}, doc), { syncStatus: "synced", baseOnline: true });
+                        }
+                        return doc;
+                    });
                     return [4 /*yield*/, indexedDb_1.indexedDb.putValue("local", {
-                            data: filteredData,
+                            data: updatedData,
                             type: props.collectionId,
                         })];
-                case 10:
-                    _f.sent();
+                case 11:
+                    _g.sent();
                     handleRefresh();
                     setLoading(false);
                     handlePopUpModal(false);
@@ -3222,50 +3710,52 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleSubmitData = function (type, rowId, columnId, data, offlineId, isOfflineUpdate, isDraft) { return __awaiter(void 0, void 0, void 0, function () {
-        var selectedId_2, id_1, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, clonedForOffline, tempData, selectedIndex_3, err_20, isExistingDoc, newRecordData_1, changedAttributeIds, baseDraftValue, hasBaseDraftChange, offlineDataResp, clonedForOffline, tempData, selectedIndex_4, offlineData, err_21, dataToSubmit_2, changedAttributeIds, baseDraftValue, hasBaseDraftChange, operationType, selectedIndex_5, dataId, err_22;
-        var _a, _b;
-        var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        return __generator(this, function (_t) {
-            switch (_t.label) {
+        var selectedId, id, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, clonedForOffline, tempData, selectedIndex_3, err_20, isExistingDoc, newRecordData_1, changedAttributeIds, baseDraftValue, hasBaseDraftChange, offlineDataResp, clonedForOffline, tempData, selectedIndex_4, offlineData, err_21, dataToSubmit_2, changedAttributeIds, baseDraftValue, hasBaseDraftChange, operationType, selectedIndex_5, dataId, err_22, offlineDataResp, offlineData, clonedForOffline, tempData, selectedIndex_6, _a;
+        var _b, _c;
+        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        return __generator(this, function (_w) {
+            switch (_w.label) {
                 case 0:
-                    _t.trys.push([0, 35, , 36]);
-                    selectedId_2 = "";
+                    selectedId = "";
+                    id = "";
+                    _w.label = 1;
+                case 1:
+                    _w.trys.push([1, 37, , 43]);
                     if (type === "update")
-                        selectedId_2 = rowId !== null && rowId !== void 0 ? rowId : "";
+                        selectedId = rowId !== null && rowId !== void 0 ? rowId : "";
                     else if (type === "create")
-                        selectedId_2 = "new";
+                        selectedId = "new";
                     else if (props.id)
-                        selectedId_2 = props.id;
+                        selectedId = props.id;
                     else
-                        selectedId_2 = "new";
-                    id_1 = "";
+                        selectedId = "new";
                     if (type === "update")
-                        id_1 = rowId !== null && rowId !== void 0 ? rowId : "";
-                    else if (selectedId_2 === "new" && !showId) {
+                        id = rowId !== null && rowId !== void 0 ? rowId : "";
+                    else if (selectedId === "new" && !showId) {
                         if (idField && selectedData[idField])
-                            id_1 = selectedData[idField];
+                            id = selectedData[idField];
                         else
-                            id_1 = (0, uuid_1.v4)();
+                            id = (0, uuid_1.v4)();
                     }
                     else
-                        id_1 = (_c = props.id) !== null && _c !== void 0 ? _c : "";
+                        id = (_d = props.id) !== null && _d !== void 0 ? _d : "";
                     if (offlineId) {
-                        selectedId_2 = offlineId;
-                        id_1 = offlineId;
+                        selectedId = offlineId;
+                        id = offlineId;
                     }
-                    if (!(isOffline && !offlineId)) return [3 /*break*/, 1];
+                    if (!(isOffline && !offlineId)) return [3 /*break*/, 2];
                     createSelectedData_1 = selectedData;
-                    return [3 /*break*/, 3];
-                case 1: return [4 /*yield*/, handleUploadImage(id_1, data)];
-                case 2:
-                    createSelectedData_1 = _t.sent();
-                    _t.label = 3;
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, handleUploadImage(id, data)];
                 case 3:
+                    createSelectedData_1 = _w.sent();
+                    _w.label = 4;
+                case 4:
                     uniqueDataStructure = structure.filter(function (eachStructure) {
                         return eachStructure.unique;
                     });
                     uniqueColumnId = uniqueDataStructure.length > 0 ? uniqueDataStructure[0].id : undefined;
-                    if ((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareUpdatePrefill) {
+                    if ((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareUpdatePrefill) {
                         props.bareSettings.bareUpdatePrefill(selectedData).map(function (eachField) {
                             var key = eachField.key, value = eachField.value;
                             createSelectedData_1[key] = value;
@@ -3273,26 +3763,30 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                     }
                     res = "";
-                    if (!(selectedId_2 === "new")) return [3 /*break*/, 16];
+                    if (!(selectedId === "new")) return [3 /*break*/, 17];
                     if (!showId)
-                        createSelectedData_1[serverId] = id_1;
+                        createSelectedData_1[serverId] = id;
                     if (isDraft)
                         createSelectedData_1["baseDraft"] = true;
-                    if (!isOffline) return [3 /*break*/, 9];
-                    _t.label = 4;
-                case 4:
-                    _t.trys.push([4, 7, , 8]);
-                    return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
+                    if (!isOffline) return [3 /*break*/, 10];
+                    _w.label = 5;
                 case 5:
-                    offlineDataResp = _t.sent();
-                    offlineData = (_e = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _e !== void 0 ? _e : [];
+                    _w.trys.push([5, 8, , 9]);
+                    return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
+                case 6:
+                    offlineDataResp = _w.sent();
+                    offlineData = (_f = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _f !== void 0 ? _f : [];
                     clonedForOffline = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, true, showId);
                     tempData = (0, updateModule_1.handleParseOfflineWrite)(clonedForOffline, structure);
                     // INFO: Stamp the _id on the offline entry so subsequent saves can find and update it
                     if (!tempData[serverId])
-                        tempData[serverId] = id_1;
+                        tempData[serverId] = id;
                     // INFO: Remove non-serializable keys that IDB's structured clone can't handle
                     delete tempData["update"];
+                    // INFO: mark as pending sync so handleCheckOfflineDataLength counts it
+                    // and the upload button appears in the list view
+                    tempData.syncStatus = "pending";
+                    tempData.baseOnline = false; // INFO: locally created, never synced
                     // INFO: Store original baseline on first offline save so the upload
                     // diff can identify which fields the user actually changed.
                     if (!tempData.__offlineBaseline) {
@@ -3303,7 +3797,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     selectedIndex_3 = -1;
                     offlineData.map(function (eachOfflineData, index) {
                         var offlineDataId = eachOfflineData[serverId];
-                        if (id_1 === offlineDataId)
+                        if (id === offlineDataId)
                             selectedIndex_3 = index;
                         return null;
                     });
@@ -3323,27 +3817,27 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             data: offlineData,
                             type: props.collectionId,
                         })];
-                case 6:
-                    _t.sent();
-                    res = true;
-                    return [3 /*break*/, 8];
                 case 7:
-                    err_20 = _t.sent();
-                    return [3 /*break*/, 8];
-                case 8: return [3 /*break*/, 15];
-                case 9:
+                    _w.sent();
+                    res = true;
+                    return [3 /*break*/, 9];
+                case 8:
+                    err_20 = _w.sent();
+                    return [3 /*break*/, 9];
+                case 9: return [3 /*break*/, 16];
+                case 10:
                     if (!((idField && selectedData[idField]) ||
-                        ((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareUpsertPartialUpdate))) return [3 /*break*/, 11];
-                    isExistingDoc = ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareUpsertPartialUpdate) &&
+                        ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareUpsertPartialUpdate))) return [3 /*break*/, 12];
+                    isExistingDoc = ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareUpsertPartialUpdate) &&
                         loadedSelectedData.current != null;
                     if (isExistingDoc) {
                         changedAttributeIds = (0, updateModule_1.compareUpdatedFields)(loadedSelectedData.current, createSelectedData_1).changedAttributeIds;
                         baseDraftValue = isDraft ? true : false;
-                        hasBaseDraftChange = ((_j = (_h = loadedSelectedData.current) === null || _h === void 0 ? void 0 : _h["baseDraft"]) !== null && _j !== void 0 ? _j : false) !==
+                        hasBaseDraftChange = ((_k = (_j = loadedSelectedData.current) === null || _j === void 0 ? void 0 : _j["baseDraft"]) !== null && _k !== void 0 ? _k : false) !==
                             baseDraftValue;
                         // INFO: if nothing changed (including baseDraft), skip the write
                         if (changedAttributeIds.length === 0 && !hasBaseDraftChange)
-                            return [2 /*return*/, id_1];
+                            return [2 /*return*/, id];
                         newRecordData_1 = {};
                         changedAttributeIds.forEach(function (key) {
                             var _a;
@@ -3385,69 +3879,73 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         newRecordData_1 = createSelectedData_1;
                     }
                     return [4 /*yield*/, writeServerQuery.call("update", {
-                            id: id_1,
+                            id: id,
                             data: newRecordData_1,
                             upsert: true,
                         })];
-                case 10:
-                    res = _t.sent();
-                    return [3 /*break*/, 15];
                 case 11:
+                    res = _w.sent();
+                    return [3 /*break*/, 16];
+                case 12:
                     // INFO: stepper create guard — if a create is already in-flight, queue this
                     // draft save and return early. It will be replayed as an update once the
                     // in-flight create resolves.
-                    if (selectedId_2 === "new" && isCreatingRef.current) {
+                    if (selectedId === "new" && isCreatingRef.current) {
                         pendingDraftSaveRef.current = true;
                         return [2 /*return*/, ""];
                     }
-                    if (selectedId_2 === "new") {
+                    if (selectedId === "new") {
                         isCreatingRef.current = true;
-                        inflightIdRef.current = id_1; // INFO: id is the UUID already generated above
+                        inflightIdRef.current = id; // INFO: id is the UUID already generated above
                     }
                     return [4 /*yield*/, writeServerQuery.call("create", {
                             data: createSelectedData_1,
                             unique: uniqueColumnId,
                         })];
-                case 12:
+                case 13:
                     //INFO: [CREATE] Create new data
-                    res = _t.sent();
-                    if (!(selectedId_2 === "new")) return [3 /*break*/, 15];
+                    res = _w.sent();
+                    if (!(selectedId === "new")) return [3 /*break*/, 16];
                     isCreatingRef.current = false;
-                    if (!pendingDraftSaveRef.current) return [3 /*break*/, 14];
+                    if (!pendingDraftSaveRef.current) return [3 /*break*/, 15];
                     pendingDraftSaveRef.current = false;
                     // INFO: replay as update — inflightIdRef.current holds the real _id
                     return [4 /*yield*/, writeServerQuery.call("update", {
                             id: inflightIdRef.current,
                             data: __assign(__assign({}, createSelectedData_1), { baseDraft: true }),
                         })];
-                case 13:
-                    // INFO: replay as update — inflightIdRef.current holds the real _id
-                    _t.sent();
-                    _t.label = 14;
                 case 14:
+                    // INFO: replay as update — inflightIdRef.current holds the real _id
+                    _w.sent();
+                    _w.label = 15;
+                case 15:
                     inflightIdRef.current = "";
-                    _t.label = 15;
-                case 15: return [3 /*break*/, 24];
-                case 16:
-                    if (!selectedId_2) return [3 /*break*/, 24];
-                    if (!(isOffline && !offlineId)) return [3 /*break*/, 22];
-                    _t.label = 17;
+                    _w.label = 16;
+                case 16: return [3 /*break*/, 25];
                 case 17:
-                    _t.trys.push([17, 20, , 21]);
-                    return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
+                    if (!selectedId) return [3 /*break*/, 25];
+                    if (!(isOffline && !offlineId)) return [3 /*break*/, 23];
+                    _w.label = 18;
                 case 18:
-                    offlineDataResp = _t.sent();
+                    _w.trys.push([18, 21, , 22]);
+                    return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
+                case 19:
+                    offlineDataResp = _w.sent();
                     clonedForOffline = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, true, showId);
                     tempData = (0, updateModule_1.handleParseOfflineWrite)(clonedForOffline, structure);
-                    tempData[serverId] = selectedId_2;
+                    tempData[serverId] = selectedId;
                     // INFO: Remove non-serializable keys that IDB's structured clone can't handle
                     // (e.g. 'update' which is a React element injected by bareUpdateActionComponent)
                     delete tempData["update"];
+                    // INFO: mark as pending so handleCheckOfflineDataLength counts it
+                    // and the upload button appears — overrides syncStatus:"synced" from prefetch
+                    tempData.syncStatus = "pending";
+                    tempData.baseOnline = true; // INFO: existing server doc, updated offline
                     selectedIndex_4 = -1;
-                    offlineData = (_k = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _k !== void 0 ? _k : [];
+                    offlineData = (_l = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _l !== void 0 ? _l : [];
                     offlineData.map(function (eachOfflineData, index) {
                         var offlineDataId = eachOfflineData[serverId];
-                        if (selectedId_2 === offlineDataId)
+                        if (selectedId === offlineDataId)
                             selectedIndex_4 = index;
                         return null;
                     });
@@ -3473,28 +3971,28 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             data: offlineData,
                             type: props.collectionId,
                         })];
-                case 19:
-                    _t.sent();
-                    res = true;
-                    return [3 /*break*/, 21];
                 case 20:
-                    err_21 = _t.sent();
-                    return [3 /*break*/, 21];
-                case 21: return [3 /*break*/, 24];
-                case 22:
+                    _w.sent();
+                    res = true;
+                    return [3 /*break*/, 22];
+                case 21:
+                    err_21 = _w.sent();
+                    return [3 /*break*/, 22];
+                case 22: return [3 /*break*/, 25];
+                case 23:
                     if (type === "update" && columnId) {
-                        dataToSubmit_2 = (_a = {},
-                            _a[columnId] = createSelectedData_1[columnId],
-                            _a);
+                        dataToSubmit_2 = (_b = {},
+                            _b[columnId] = createSelectedData_1[columnId],
+                            _b);
                     }
-                    else if ((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareUpsertPartialUpdate) {
-                        changedAttributeIds = (0, updateModule_1.compareUpdatedFields)((_m = loadedSelectedData.current) !== null && _m !== void 0 ? _m : {}, createSelectedData_1).changedAttributeIds;
+                    else if ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpsertPartialUpdate) {
+                        changedAttributeIds = (0, updateModule_1.compareUpdatedFields)((_o = loadedSelectedData.current) !== null && _o !== void 0 ? _o : {}, createSelectedData_1).changedAttributeIds;
                         baseDraftValue = isDraft ? true : false;
-                        hasBaseDraftChange = ((_p = (_o = loadedSelectedData.current) === null || _o === void 0 ? void 0 : _o["baseDraft"]) !== null && _p !== void 0 ? _p : false) !==
+                        hasBaseDraftChange = ((_q = (_p = loadedSelectedData.current) === null || _p === void 0 ? void 0 : _p["baseDraft"]) !== null && _q !== void 0 ? _q : false) !==
                             baseDraftValue;
                         // INFO: if nothing changed (including baseDraft), skip the write entirely
                         if (changedAttributeIds.length === 0 && !hasBaseDraftChange)
-                            return [2 /*return*/, id_1];
+                            return [2 /*return*/, id];
                         dataToSubmit_2 = {};
                         changedAttributeIds.forEach(function (key) {
                             var _a;
@@ -3552,25 +4050,25 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             ? "create"
                             : "update";
                     return [4 /*yield*/, writeServerQuery.call(operationType, {
-                            id: selectedId_2,
+                            id: selectedId,
                             data: dataToSubmit_2,
                             unique: uniqueColumnId,
                             // INFO: bareUpsertPartialUpdate — upsert so the doc is created if it
                             // doesn't exist yet (covers deterministicId passed directly as props.id).
                             // Also applies to offline upload path so the doc is created if it was
                             // deleted between the existence check and the write call.
-                            upsert: ((_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareUpsertPartialUpdate) && !isOfflineUpdate
+                            upsert: ((_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareUpsertPartialUpdate) && !isOfflineUpdate
                                 ? true
                                 : undefined,
                         })];
-                case 23:
-                    res = _t.sent();
-                    _t.label = 24;
                 case 24:
-                    if (!(type === "update" || type === "create")) return [3 /*break*/, 32];
-                    if (!res) return [3 /*break*/, 31];
-                    if (!(type === "update")) return [3 /*break*/, 27];
-                    if (!columnId) return [3 /*break*/, 26];
+                    res = _w.sent();
+                    _w.label = 25;
+                case 25:
+                    if (!(type === "update" || type === "create")) return [3 /*break*/, 33];
+                    if (!res) return [3 /*break*/, 32];
+                    if (!(type === "update")) return [3 /*break*/, 28];
+                    if (!columnId) return [3 /*break*/, 27];
                     selectedIndex_5 = -1;
                     tableData.map(function (eachData, index) {
                         if (eachData.id === rowId || eachData._id === rowId) {
@@ -3580,26 +4078,29 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                     });
                     return [4 /*yield*/, handleGetListData({ data: tableData[selectedIndex_5] }, "update", rowId)];
-                case 25:
-                    _t.sent();
-                    _t.label = 26;
-                case 26: return [3 /*break*/, 29];
-                case 27: return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, "create")];
-                case 28:
-                    _t.sent();
-                    _t.label = 29;
+                case 26:
+                    _w.sent();
+                    _w.label = 27;
+                case 27: return [3 /*break*/, 30];
+                case 28: return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, "create")];
                 case 29:
-                    if (!((_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareUpdateHandlePostComplete)) return [3 /*break*/, 31];
-                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete(__assign((_b = {}, _b[serverId] = id_1, _b), createSelectedData_1))];
+                    _w.sent();
+                    _w.label = 30;
                 case 30:
-                    _t.sent();
-                    _t.label = 31;
-                case 31: return [3 /*break*/, 34];
-                case 32:
-                    createSelectedData_1[serverId] = id_1;
-                    return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, selectedId_2 === "new" ? "create" : "update", id_1)];
+                    if (!((_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareUpdateHandlePostComplete)) return [3 /*break*/, 32];
+                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete(__assign((_c = {}, _c[serverId] = id, _c), createSelectedData_1))];
+                case 31:
+                    _w.sent();
+                    _w.label = 32;
+                case 32: return [3 /*break*/, 36];
                 case 33:
-                    _t.sent();
+                    createSelectedData_1[serverId] = id;
+                    if (!!isOffline) return [3 /*break*/, 35];
+                    return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, selectedId === "new" ? "create" : "update", id)];
+                case 34:
+                    _w.sent();
+                    _w.label = 35;
+                case 35:
                     setNotification({
                         type: true,
                         title: props.id === "new"
@@ -3609,12 +4110,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             ? "Data sucessfully created"
                             : "Data sucessfully updated",
                     });
-                    _t.label = 34;
-                case 34:
-                    dataId = res ? id_1 : "";
+                    _w.label = 36;
+                case 36:
+                    dataId = res ? id : "";
                     return [2 /*return*/, dataId];
-                case 35:
-                    err_22 = _t.sent();
+                case 37:
+                    err_22 = _w.sent();
                     console.log("error", err_22);
                     // INFO: clear in-flight guard on failure so the next save retries as a create
                     if (isCreatingRef.current) {
@@ -3622,8 +4123,71 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         pendingDraftSaveRef.current = false;
                         inflightIdRef.current = "";
                     }
+                    if (!(((_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareOffline) &&
+                        id &&
+                        !offlineId &&
+                        !isOfflineUpdate &&
+                        !err_22.response)) return [3 /*break*/, 42];
+                    _w.label = 38;
+                case 38:
+                    _w.trys.push([38, 41, , 42]);
+                    return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
+                case 39:
+                    offlineDataResp = _w.sent();
+                    offlineData = (_u = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _u !== void 0 ? _u : [];
+                    clonedForOffline = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, true, showId);
+                    tempData = (0, updateModule_1.handleParseOfflineWrite)(clonedForOffline, structure);
+                    if (!tempData[serverId])
+                        tempData[serverId] = id;
+                    delete tempData["update"];
+                    // INFO: existing server doc edited while "online" but write failed
+                    // → baseOnline:true so it can be patched on next successful sync.
+                    // New doc that never reached the server → baseOnline:false.
+                    tempData.syncStatus = "pending";
+                    tempData.baseOnline = selectedId !== "new";
+                    if (!tempData.__offlineBaseline) {
+                        tempData.__offlineBaseline = loadedSelectedData.current
+                            ? JSON.parse(JSON.stringify(loadedSelectedData.current))
+                            : null;
+                    }
+                    selectedIndex_6 = -1;
+                    offlineData.forEach(function (d, i) {
+                        if (d[serverId] === id)
+                            selectedIndex_6 = i;
+                    });
+                    if (selectedIndex_6 >= 0) {
+                        if (!tempData.__offlineBaseline &&
+                            offlineData[selectedIndex_6].__offlineBaseline) {
+                            tempData.__offlineBaseline =
+                                offlineData[selectedIndex_6].__offlineBaseline;
+                        }
+                        offlineData[selectedIndex_6] = tempData;
+                    }
+                    else {
+                        offlineData.push(tempData);
+                    }
+                    return [4 /*yield*/, indexedDb_1.indexedDb.putValue("local", {
+                            data: offlineData,
+                            type: props.collectionId,
+                        })];
+                case 40:
+                    _w.sent();
+                    setNotification({
+                        type: false,
+                        title: selectedId === "new"
+                            ? "Create Failed — Saved Offline"
+                            : "Update Failed — Saved Offline",
+                        msg: "Network unavailable. Changes saved locally and will sync when reconnected.",
+                    });
+                    handleCheckOfflineDataLength();
+                    // INFO: return id so handleSubmit can navigate as if the save succeeded
+                    return [2 /*return*/, id];
+                case 41:
+                    _a = _w.sent();
+                    return [3 /*break*/, 42];
+                case 42:
                     if (err_22.response && err_22.response.status === 400) {
-                        if (typeof ((_s = err_22.response.data) === null || _s === void 0 ? void 0 : _s.err) === "string")
+                        if (typeof ((_v = err_22.response.data) === null || _v === void 0 ? void 0 : _v.err) === "string")
                             setNotification({
                                 type: false,
                                 title: "Error",
@@ -3636,8 +4200,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 msg: "Please contact our administrator for assistance or try your request again later. We apologize for any inconvenience",
                             });
                     }
-                    return [3 /*break*/, 36];
-                case 36: return [2 /*return*/];
+                    return [3 /*break*/, 43];
+                case 43: return [2 /*return*/];
             }
         });
     }); };
@@ -3833,22 +4397,34 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleRetrieveSelectedData = function (responseData) { return __awaiter(void 0, void 0, void 0, function () {
-        var clonedReferencesOptions_1, dummyRespData, dummyReferenceModelSchema, newRespData, _a;
-        var _b, _c, _d, _e, _f, _g;
-        return __generator(this, function (_h) {
-            switch (_h.label) {
+        var resolved, clonedReferencesOptions_1, dummyRespData, dummyReferenceModelSchema, newRespData, _a;
+        var _b, _c, _d, _e, _f, _g, _h, _j;
+        return __generator(this, function (_k) {
+            switch (_k.label) {
                 case 0:
-                    if (!responseData.data) return [3 /*break*/, 6];
-                    if (!((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareOffline)) return [3 /*break*/, 2];
+                    if (process.env.NODE_ENV !== "production") {
+                        console.debug("[DTW read] handleRetrieveSelectedData called", "offline=", (_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareOffline, "hasData=", !!(responseData === null || responseData === void 0 ? void 0 : responseData.data), "type=", props.type);
+                    }
+                    if (!responseData.data) return [3 /*break*/, 9];
+                    if (!((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareOffline)) return [3 /*break*/, 5];
                     // INFO: Mark as programmatic so initial data load doesn't populate dirtyFields
                     programmaticUpdateRef.current = true;
+                    if (!(props.type === "read")) return [3 /*break*/, 2];
+                    return [4 /*yield*/, handleResolveOfflineReferences([
+                            responseData.data,
+                        ])];
+                case 1:
+                    resolved = _k.sent();
+                    setSelectedData(resolved[0]);
+                    return [3 /*break*/, 3];
+                case 2:
                     setSelectedData(responseData.data);
-                    // INFO: stamp the load baseline so bareUpsertPartialUpdate can diff
-                    // against the original doc rather than the post-edit state.
-                    // Deep clone to prevent shared-reference mutations from making the
-                    // diff see no changes (e.g. listObject array pushes).
+                    _k.label = 3;
+                case 3:
+                    // INFO: always baseline the raw doc (IDs intact) so diff/submit paths
+                    // compare against actual field values, not display labels.
                     loadedSelectedData.current = JSON.parse(JSON.stringify(responseData.data));
-                    if ((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareReadHandleData)
+                    if ((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareReadHandleData)
                         props.bareSettings.bareReadHandleData(responseData.data);
                     clonedReferencesOptions_1 = JSON.parse(JSON.stringify(referencesOptions));
                     return [4 /*yield*/, Promise.all(structure.map(function (eachModel) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3862,7 +4438,29 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     case 1:
                                         offlineDataResp = _c.sent();
                                         offlineData = (_a = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _a !== void 0 ? _a : [];
-                                        clonedReferencesOptions_1[eachModel.id] = offlineData;
+                                        if (process.env.NODE_ENV !== "production") {
+                                            console.debug("[DTW offline ref]", eachModel.id, "key=", eachModel.referenceSpaceId + "-ref", "count=", offlineData.length, "sample=", offlineData[0]);
+                                        }
+                                        // INFO: convert raw docs to Option[] format so reference Select
+                                        // components receive { key, label, secondaryLabel } as expected
+                                        // (mirrors the shape handleRetrieveObjectReferenceOptions builds online)
+                                        if ((eachModel.type === "reference" ||
+                                            eachModel.type === "listReference") &&
+                                            eachModel.referenceLabel) {
+                                            clonedReferencesOptions_1[eachModel.id] = offlineData.map(function (r) {
+                                                var _a, _b, _c, _d;
+                                                return ({
+                                                    key: (_b = (_a = r._id) !== null && _a !== void 0 ? _a : r.id) !== null && _b !== void 0 ? _b : "",
+                                                    label: (_d = (_c = r[eachModel.referenceLabel]) !== null && _c !== void 0 ? _c : r._id) !== null && _d !== void 0 ? _d : "",
+                                                    secondaryLabel: eachModel.referenceSecondaryLabel
+                                                        ? r[eachModel.referenceSecondaryLabel]
+                                                        : undefined,
+                                                });
+                                            });
+                                        }
+                                        else {
+                                            clonedReferencesOptions_1[eachModel.id] = offlineData;
+                                        }
                                         if (!(isObject && eachModel.objectData)) return [3 /*break*/, 3];
                                         prefix_1 = eachModel.id;
                                         return [4 /*yield*/, Promise.all((_b = eachModel.objectData) === null || _b === void 0 ? void 0 : _b.map(function (eachObjectData) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3895,25 +4493,28 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 }
                             });
                         }); }))];
-                case 1:
-                    _h.sent();
+                case 4:
+                    _k.sent();
                     setReferencesOptions(clonedReferencesOptions_1);
-                    return [3 /*break*/, 6];
-                case 2:
+                    if (process.env.NODE_ENV !== "production") {
+                        console.debug("[DTW offline ref] setReferencesOptions done, keys=", Object.keys(clonedReferencesOptions_1), "pilotId count=", (_e = clonedReferencesOptions_1["pilotId"]) === null || _e === void 0 ? void 0 : _e.length);
+                    }
+                    return [3 /*break*/, 9];
+                case 5:
                     dummyRespData = JSON.parse(JSON.stringify(responseData.data), utils_1.jsonReviver);
                     dummyReferenceModelSchema = JSON.parse(JSON.stringify(referenceModelSchema));
-                    if (!(props.type === "read")) return [3 /*break*/, 4];
+                    if (!(props.type === "read")) return [3 /*break*/, 7];
                     return [4 /*yield*/, (0, readModule_1.handleRetrieveDeepModel)(dummyRespData, structure !== null && structure !== void 0 ? structure : [], dbModule, devSettings, {
-                            assetParentId: (_d = props.id) !== null && _d !== void 0 ? _d : "",
-                            bucketName: (_e = devSettings.bucketName) !== null && _e !== void 0 ? _e : "",
-                        }, dummyReferenceModelSchema, setReferenceSchema, (_f = props.organise) === null || _f === void 0 ? void 0 : _f.handleCustomDownloadFile)];
-                case 3:
-                    _a = _h.sent();
-                    return [3 /*break*/, 5];
-                case 4:
+                            assetParentId: (_f = props.id) !== null && _f !== void 0 ? _f : "",
+                            bucketName: (_g = devSettings.bucketName) !== null && _g !== void 0 ? _g : "",
+                        }, dummyReferenceModelSchema, setReferenceSchema, (_h = props.organise) === null || _h === void 0 ? void 0 : _h.handleCustomDownloadFile)];
+                case 6:
+                    _a = _k.sent();
+                    return [3 /*break*/, 8];
+                case 7:
                     _a = dummyRespData;
-                    _h.label = 5;
-                case 5:
+                    _k.label = 8;
+                case 8:
                     newRespData = _a;
                     // INFO: Mark as programmatic so initial data load doesn't populate dirtyFields
                     programmaticUpdateRef.current = true;
@@ -3923,14 +4524,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     // Deep clone to prevent shared-reference mutations from making the
                     // diff see no changes (e.g. listObject array pushes).
                     loadedSelectedData.current = JSON.parse(JSON.stringify(newRespData));
-                    if ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareReadHandleData)
+                    if ((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareReadHandleData)
                         props.bareSettings.bareReadHandleData(newRespData);
                     if ((props.type === "update" || props.type === "read") &&
                         props.id !== "new") {
                         (0, updateModule_1.handleRetrieveReferenceOptions)(newRespData, structure, dbModule, devSettings, setReferencesOptions, setReferencesDetails);
                     }
-                    _h.label = 6;
-                case 6:
+                    _k.label = 9;
+                case 9:
                     setModalVisible(false);
                     setLoading(false);
                     return [2 /*return*/];
@@ -5684,7 +6285,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             authList));
     };
     var renderContent = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28;
         var isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
         var tabs = renderTabs();
         var pages = [
@@ -5714,7 +6315,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             type: "get",
                             id: props.id,
                             pipeline: pipeline,
-                        }, offline: (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError }),
+                        }, offline: ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareOffline) && isNetworkOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError }),
                     !loading && (react_1.default.createElement(react_1.default.Fragment, null,
                         renderBreadcrumb(pages),
                         react_1.default.createElement("div", null,
@@ -5906,7 +6507,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             type: "get",
                             id: props.id,
                             pipeline: pipeline,
-                        }, offline: (_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
+                        }, offline: ((_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareOffline) && isNetworkOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
                     renderBreadcrumb(pages),
                     react_1.default.createElement("div", { className: "flex flex-col py-2 sm:items-center sm:flex-row" },
                         (props.title || props.description) && (react_1.default.createElement("div", { className: "flex flex-col w-full" },
@@ -5978,7 +6579,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         dbEndpoint: devSettings.dbEndpoint,
                         dbAPIToken: devSettings.dbAPIToken,
                         dbUserToken: devSettings.dbUserToken,
-                    }, cond: handleReadQueryHocCond(), offline: (_21 = props.bareSettings) === null || _21 === void 0 ? void 0 : _21.bareOffline, onChangeData: function (data) {
+                    }, cond: handleReadQueryHocCond(), offline: ((_21 = props.bareSettings) === null || _21 === void 0 ? void 0 : _21.bareOffline) && isNetworkOffline, onChangeData: function (data) {
                         handleGetListData(data, "", "");
                     }, onError: handleGetItemError }));
                 if ((_22 = props.renderSettings) === null || _22 === void 0 ? void 0 : _22.renderListUI) {
@@ -6160,15 +6761,24 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             ? "w-full flex-row flex-wrap sm:flex-nowrap items-end"
                             : "flex-col md:items-end md:flex-row") },
                         (props.title || props.description) && (react_1.default.createElement("div", { className: "flex flex-col" },
-                            props.title && (react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title)),
+                            props.title && (react_1.default.createElement("div", { className: "flex items-center gap-2" },
+                                react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
+                                ((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareSocketName) &&
+                                    isLive &&
+                                    !isLiveOffline && (react_1.default.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700" },
+                                    react_1.default.createElement("span", { className: "h-1.5 w-1.5 rounded-full bg-green-500" }),
+                                    "LIVE")),
+                                ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareSocketName) && isLiveOffline && (react_1.default.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700" },
+                                    react_1.default.createElement("span", { className: "h-1.5 w-1.5 rounded-full bg-orange-400" }),
+                                    "OFFLINE")))),
                             props.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
-                        react_1.default.createElement("div", { className: ((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareCompactMode)
+                        react_1.default.createElement("div", { className: ((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareCompactMode)
                                 ? "hidden sm:block grow"
                                 : "grow" }),
                         renderListFilterElements(),
                         renderListActionElements()),
                     renderListNewRowFilterElements(),
-                    (schemaPresent || ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.darkMode })),
+                    (schemaPresent || ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.darkMode })),
                     renderTabContent(tabs, props.type, viewType),
                     isBottom && renderActionButtons(props.type, true)));
             default:
@@ -7735,7 +8345,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_40 = (_39 = props.renderSettings) === null || _39 === void 0 ? void 0 : _39.renderLoadingUI) === null || _40 === void 0 ? void 0 : _40.call(_39)) && loading ? ((_41 = props.renderSettings) === null || _41 === void 0 ? void 0 : _41.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_43 = (_42 = props.renderSettings) === null || _42 === void 0 ? void 0 : _42.renderLoadingUI) === null || _43 === void 0 ? void 0 : _43.call(_42)) && loading ? ((_44 = props.renderSettings) === null || _44 === void 0 ? void 0 : _44.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;