Merge branch 'master' into UI_Update_Eric_Ma

2 files changed, 351 insertions, 314 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 1560ce3e1..232bbc111 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -15,7 +15,7 @@ import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Ty
 import { AudioField } from '../../../../fields/URLField';
 import { emptyFunction, emptyPath, returnFalse, returnOne, setupMoveUpEvents, StopEvent } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
-import { Docs } from '../../../documents/Documents';
+import { Docs, DocUtils } from '../../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
@@ -75,7 +75,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     constructor(props: any) {
         super(props);
         if (!PresBox.navigateToDocScript) {
-            PresBox.navigateToDocScript = ScriptField.MakeFunction('navigateToDoc(self.presentationTargetDoc, self)')!;
+            PresBox.navigateToDocScript = ScriptField.MakeFunction('navigateToDoc(self.presentation_targetDoc, self)')!;
         }
     }
 
@@ -117,7 +117,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return DocListCast(this.rootDoc[this.presFieldKey]);
     }
     @computed get tagDocs() {
-        return this.childDocs.map(doc => Cast(doc.presentationTargetDoc, Doc, null));
+        return this.childDocs.map(doc => Cast(doc.presentation_targetDoc, Doc, null));
     }
     @computed get itemIndex() {
         return NumCast(this.rootDoc._itemIndex);
@@ -126,10 +126,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return DocCast(this.childDocs[NumCast(this.rootDoc._itemIndex)]);
     }
     @computed get targetDoc() {
-        return Cast(this.activeItem?.presentationTargetDoc, Doc, null);
+        return Cast(this.activeItem?.presentation_targetDoc, Doc, null);
     }
     public static targetRenderedDoc = (doc: Doc) => {
-        const targetDoc = Cast(doc?.presentationTargetDoc, Doc, null);
+        const targetDoc = Cast(doc?.presentation_targetDoc, Doc, null);
         return targetDoc?.layout_unrendered ? DocCast(targetDoc.annotationOn) : targetDoc;
     };
     @computed get scrollable() {
@@ -150,7 +150,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get selectedDoc() {
         return this.selectedDocumentView?.rootDoc;
     }
-    isActiveItemTarget = (layoutDoc: Doc) => this.activeItem?.presentationTargetDoc === layoutDoc;
+    isActiveItemTarget = (layoutDoc: Doc) => this.activeItem?.presentation_targetDoc === layoutDoc;
     clearSelectedArray = () => this.selectedArray.clear();
     addToSelectedArray = action((doc: Doc) => this.selectedArray.add(doc));
     removeFromSelectedArray = action((doc: Doc) => this.selectedArray.delete(doc));
@@ -197,18 +197,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
         this.turnOffEdit(true);
         this._disposers.selection = reaction(
-            () => SelectionManager.Views(),
+            () => SelectionManager.Views().slice(),
             views => (!PresBox.Instance || views.some(view => view.props.Document === this.rootDoc)) && this.updateCurrentPresentation(),
             { fireImmediately: true }
         );
         this._disposers.editing = reaction(
-            () => this.layoutDoc.presStatus === PresStatus.Edit,
+            () => this.layoutDoc.presentation_status === PresStatus.Edit,
             editing => {
                 if (editing) {
                     this.childDocs.forEach(doc => {
-                        if (doc.presIndexed !== undefined) {
+                        if (doc.presentation_indexed !== undefined) {
                             this.progressivizedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined));
-                            doc.presIndexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1);
+                            doc.presentation_indexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1);
                         }
                     });
                 }
@@ -225,10 +225,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     _mediaTimer!: [NodeJS.Timeout, Doc];
     // 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played
     startTempMedia = (targetDoc: Doc, activeItem: Doc) => {
-        const duration: number = NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime);
+        const duration: number = NumCast(activeItem.config_clipEnd) - NumCast(activeItem.config_clipStart);
         if ([DocumentType.VID, DocumentType.AUDIO].includes(targetDoc.type as any)) {
             const targMedia = DocumentManager.Instance.getDocumentView(targetDoc);
-            targMedia?.ComponentView?.playFrom?.(NumCast(activeItem.presStartTime), NumCast(activeItem.presStartTime) + duration);
+            targMedia?.ComponentView?.playFrom?.(NumCast(activeItem.config_clipStart), NumCast(activeItem.config_clipStart) + duration);
         }
     };
 
@@ -252,12 +252,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             (nextSelected: number, force = false) =>
             () => {
                 if (nextSelected < this.childDocs.length) {
-                    if (force || this.childDocs[nextSelected].groupWithUp) {
+                    if (force || this.childDocs[nextSelected].presentation_groupWithUp) {
                         this.addToSelectedArray(this.childDocs[nextSelected]);
-                        const serial = nextSelected + 1 < this.childDocs.length && NumCast(this.childDocs[nextSelected + 1].groupWithUp) > 1;
+                        const serial = nextSelected + 1 < this.childDocs.length && NumCast(this.childDocs[nextSelected + 1].presentation_groupWithUp) > 1;
                         if (serial) {
                             this.gotoDocument(nextSelected, this.activeItem, true, async () => {
-                                const waitTime = NumCast(this.activeItem.presDuration) - NumCast(this.activeItem.presTransition);
+                                const waitTime = NumCast(this.activeItem.presentation_duration) - NumCast(this.activeItem.presentation_transition);
                                 await new Promise<void>(res => setTimeout(() => res(), Math.max(0, waitTime)));
                                 doGroupWithUp(nextSelected + 1)();
                             });
@@ -275,7 +275,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     // docs within a slide target that will be progressively revealed
     progressivizedItems = (doc: Doc) => {
         const targetList = PresBox.targetRenderedDoc(doc);
-        if (doc.presIndexed !== undefined && targetList) {
+        if (doc.presentation_indexed !== undefined && targetList) {
             const listItems = (Cast(targetList[Doc.LayoutFieldKey(targetList)], listSpec(Doc), null)?.filter(d => d instanceof Doc) as Doc[]) ?? DocListCast(targetList[Doc.LayoutFieldKey(targetList) + '_annotations']);
             return listItems.filter(doc => !doc.layout_unrendered);
         }
@@ -284,7 +284,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     next = () => {
         const progressiveReveal = (first: boolean) => {
-            const presIndexed = Cast(this.activeItem?.presIndexed, 'number', null);
+            const presIndexed = Cast(this.activeItem?.presentation_indexed, 'number', null);
             if (presIndexed !== undefined) {
                 const targetRenderedDoc = PresBox.targetRenderedDoc(this.activeItem);
                 targetRenderedDoc._dataTransition = 'all 1s';
@@ -297,8 +297,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         const targetView = listItems && DocumentManager.Instance.getFirstDocumentView(listItemDoc);
                         Doc.linkFollowUnhighlight();
                         Doc.HighlightDoc(listItemDoc);
-                        listItemDoc.presEffect = this.activeItem.presBulletEffect;
-                        listItemDoc.presTransition = 500;
+                        listItemDoc.presentation_effect = this.activeItem.presBulletEffect;
+                        listItemDoc.presentation_transition = 500;
                         targetView?.setAnimEffect(listItemDoc, 500);
                         if (targetView?.docView && this.activeItem.presBulletExpand) {
                             targetView.docView._animateScalingTo = 1.2;
@@ -309,7 +309,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             });
                         }
                         listItemDoc.opacity = undefined;
-                        this.activeItem.presIndexed = presIndexed + 1;
+                        this.activeItem.presentation_indexed = presIndexed + 1;
                     }
                     return true;
                 }
@@ -323,7 +323,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             this.nextSlide(curLast + 1 === this.childDocs.length ? (this.layoutDoc.presLoop ? 0 : curLast) : curLast + 1);
             progressiveReveal(true); // shows first progressive document, but without a transition effect
         } else {
-            if (this.childDocs[this.itemIndex + 1] === undefined && (this.layoutDoc.presLoop || this.layoutDoc.presStatus === PresStatus.Edit)) {
+            if (this.childDocs[this.itemIndex + 1] === undefined && (this.layoutDoc.presLoop || this.layoutDoc.presentation_status === PresStatus.Edit)) {
                 // Case 2: Last slide and presLoop is toggled ON or it is in Edit mode
                 this.nextSlide(0);
                 progressiveReveal(true); // shows first progressive document, but without a transition effect
@@ -339,9 +339,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const activeItem: Doc = this.activeItem;
         let prevSelected = this.itemIndex;
         // Functionality for group with up
-        let didZoom = activeItem.presMovement;
-        for (; prevSelected > 0 && this.childDocs[Math.max(0, prevSelected - 1)].groupWithUp; prevSelected--) {
-            didZoom = didZoom === 'none' ? this.childDocs[prevSelected].presMovement : didZoom;
+        let didZoom = activeItem.presentation_movement;
+        for (; prevSelected > 0 && this.childDocs[Math.max(0, prevSelected - 1)].presentation_groupWithUp; prevSelected--) {
+            didZoom = didZoom === 'none' ? this.childDocs[prevSelected].presentation_movement : didZoom;
         }
         if (activeItem && this.childDocs[this.itemIndex - 1] !== undefined) {
             // Case 2: There are no other frames so it should go to the previous slide
@@ -362,20 +362,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         Doc.UnBrushAllDocs();
         if (index >= 0 && index < this.childDocs.length) {
             this.rootDoc._itemIndex = index;
-            if (from?.mediaStopTriggerList && this.layoutDoc.presStatus !== PresStatus.Edit) {
+            if (from?.mediaStopTriggerList && this.layoutDoc.presentation_status !== PresStatus.Edit) {
                 DocListCast(from.mediaStopTriggerList).forEach(this.stopTempMedia);
             }
-            if (from?.mediaStop === 'auto' && this.layoutDoc.presStatus !== PresStatus.Edit) {
-                this.stopTempMedia(from.presentationTargetDoc);
+            if (from?.mediaStop === 'auto' && this.layoutDoc.presentation_status !== PresStatus.Edit) {
+                this.stopTempMedia(from.presentation_targetDoc);
             }
             // If next slide is audio / video 'Play automatically' then the next slide should be played
-            if (this.layoutDoc.presStatus !== PresStatus.Edit && (this.targetDoc.type === DocumentType.AUDIO || this.targetDoc.type === DocumentType.VID) && this.activeItem.mediaStart === 'auto') {
+            if (this.layoutDoc.presentation_status !== PresStatus.Edit && (this.targetDoc.type === DocumentType.AUDIO || this.targetDoc.type === DocumentType.VID) && this.activeItem.mediaStart === 'auto') {
                 this.startTempMedia(this.targetDoc, this.activeItem);
             }
             if (!group) this.clearSelectedArray();
             this.childDocs[index] && this.addToSelectedArray(this.childDocs[index]); //Update selected array
             this.turnOffEdit();
-            this.navigateToActiveItem(finished); //Handles movement to element only when presTrail is list
+            this.navigateToActiveItem(finished); //Handles movement to element only when presentationTrail is list
             this.doHideBeforeAfter(); //Handles hide after/before
         }
     });
@@ -400,33 +400,33 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     playAnnotation = (anno: AudioField) => {};
     @action
-    static restoreTargetDocView(bestTargetView: Opt<DocumentView>, activeItem: Doc, transTime: number, pinDocLayout: boolean = BoolCast(activeItem.presPinLayout), pinDataTypes?: pinDataTypes, targetDoc?: Doc) {
+    static restoreTargetDocView(bestTargetView: Opt<DocumentView>, activeItem: Doc, transTime: number, pinDocLayout: boolean = BoolCast(activeItem.config_pinLayout), pinDataTypes?: pinDataTypes, targetDoc?: Doc) {
         const bestTarget = bestTargetView?.rootDoc ?? (targetDoc?.layout_unrendered ? DocCast(targetDoc?.annotationOn) : targetDoc);
-        if (!bestTarget || activeItem === bestTarget) return;
+        if (!bestTarget) return;
         let changed = false;
         if (pinDocLayout) {
             if (
-                bestTarget.x !== NumCast(activeItem.presX, NumCast(bestTarget.x)) ||
-                bestTarget.y !== NumCast(activeItem.presY, NumCast(bestTarget.y)) ||
-                bestTarget.rotation !== NumCast(activeItem.presRotation, NumCast(bestTarget.rotation)) ||
-                bestTarget.width !== NumCast(activeItem.presWidth, NumCast(bestTarget.width)) ||
-                bestTarget.height !== NumCast(activeItem.presHeight, NumCast(bestTarget.height))
+                bestTarget.x !== NumCast(activeItem.config_x, NumCast(bestTarget.x)) ||
+                bestTarget.y !== NumCast(activeItem.config_y, NumCast(bestTarget.y)) ||
+                bestTarget.rotation !== NumCast(activeItem.config_rotation, NumCast(bestTarget.rotation)) ||
+                bestTarget.width !== NumCast(activeItem.config_width, NumCast(bestTarget.width)) ||
+                bestTarget.height !== NumCast(activeItem.config_height, NumCast(bestTarget.height))
             ) {
                 bestTarget._dataTransition = `all ${transTime}ms`;
-                bestTarget.x = NumCast(activeItem.presX, NumCast(bestTarget.x));
-                bestTarget.y = NumCast(activeItem.presY, NumCast(bestTarget.y));
-                bestTarget.rotation = NumCast(activeItem.presRotation, NumCast(bestTarget.rotation));
-                bestTarget.width = NumCast(activeItem.presWidth, NumCast(bestTarget.width));
-                bestTarget.height = NumCast(activeItem.presHeight, NumCast(bestTarget.height));
+                bestTarget.x = NumCast(activeItem.config_x, NumCast(bestTarget.x));
+                bestTarget.y = NumCast(activeItem.config_y, NumCast(bestTarget.y));
+                bestTarget.rotation = NumCast(activeItem.config_rotation, NumCast(bestTarget.rotation));
+                bestTarget.width = NumCast(activeItem.config_width, NumCast(bestTarget.width));
+                bestTarget.height = NumCast(activeItem.config_height, NumCast(bestTarget.height));
                 setTimeout(() => (bestTarget._dataTransition = undefined), transTime + 10);
                 changed = true;
             }
         }
 
-        const activeFrame = activeItem.presActiveFrame ?? activeItem.presCurrentFrame;
+        const activeFrame = activeItem.config_activeFrame ?? activeItem.config_currentFrame;
         if (activeFrame !== undefined) {
-            const transTime = NumCast(activeItem.presTransition, 500);
-            const acontext = activeItem.presActiveFrame !== undefined ? DocCast(DocCast(activeItem.presentationTargetDoc).embedContainer) : DocCast(activeItem.presentationTargetDoc);
+            const transTime = NumCast(activeItem.presentation_transition, 500);
+            const acontext = activeItem.config_activeFrame !== undefined ? DocCast(DocCast(activeItem.presentation_targetDoc).embedContainer) : DocCast(activeItem.presentation_targetDoc);
             const context = DocCast(acontext)?.annotationOn ? DocCast(DocCast(acontext).annotationOn) : acontext;
             if (context) {
                 const ffview = DocumentManager.Instance.getFirstDocumentView(context)?.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
@@ -436,91 +436,91 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 }
             }
         }
-        if ((pinDataTypes?.dataview && activeItem.presData !== undefined) || (!pinDataTypes && activeItem.presData !== undefined)) {
+        if ((pinDataTypes?.dataview && activeItem.config_data !== undefined) || (!pinDataTypes && activeItem.config_data !== undefined)) {
             bestTarget._dataTransition = `all ${transTime}ms`;
             const fkey = Doc.LayoutFieldKey(bestTarget);
             const setData = bestTargetView?.ComponentView?.setData;
-            if (setData) setData(activeItem.presData);
-            else Doc.GetProto(bestTarget)[fkey] = activeItem.presData instanceof ObjectField ? activeItem.presData[Copy]() : activeItem.presData;
-            bestTarget[fkey + '_usePath'] = activeItem.presUsePath;
+            if (setData) setData(activeItem.config_data);
+            else Doc.GetProto(bestTarget)[fkey] = activeItem.config_data instanceof ObjectField ? activeItem.config_data[Copy]() : activeItem.config_data;
+            bestTarget[fkey + '_usePath'] = activeItem.config_usePath;
             setTimeout(() => (bestTarget._dataTransition = undefined), transTime + 10);
         }
-        if (pinDataTypes?.datarange || (!pinDataTypes && activeItem.presXRange !== undefined)) {
-            if (bestTarget.xRange !== activeItem.presXRange) {
-                bestTarget.xRange = (activeItem.presXRange as ObjectField)?.[Copy]();
+        if (pinDataTypes?.datarange || (!pinDataTypes && activeItem.config_xRange !== undefined)) {
+            if (bestTarget.xRange !== activeItem.config_xRange) {
+                bestTarget.xRange = (activeItem.config_xRange as ObjectField)?.[Copy]();
                 changed = true;
             }
-            if (bestTarget.yRange !== activeItem.presYRange) {
-                bestTarget.yRange = (activeItem.presYRange as ObjectField)?.[Copy]();
+            if (bestTarget.yRange !== activeItem.config_yRange) {
+                bestTarget.yRange = (activeItem.config_yRange as ObjectField)?.[Copy]();
                 changed = true;
             }
         }
-        if (pinDataTypes?.clippable || (!pinDataTypes && activeItem.presClipWidth !== undefined)) {
+        if (pinDataTypes?.clippable || (!pinDataTypes && activeItem.config_clipWidth !== undefined)) {
             const fkey = '_' + Doc.LayoutFieldKey(bestTarget);
-            if (bestTarget[fkey + '_clipWidth'] !== activeItem.presClipWidth) {
-                bestTarget[fkey + '_clipWidth'] = activeItem.presClipWidth;
+            if (bestTarget[fkey + '_clipWidth'] !== activeItem.config_clipWidth) {
+                bestTarget[fkey + '_clipWidth'] = activeItem.config_clipWidth;
                 changed = true;
             }
         }
-        if (pinDataTypes?.map || (!pinDataTypes && activeItem.presLat !== undefined)) {
-            if (bestTarget.latitude !== activeItem.presLat) {
-                Doc.SetInPlace(bestTarget, "latitude", NumCast(activeItem.presLat), true);
+        if (pinDataTypes?.map || (!pinDataTypes && activeItem.config_latitude !== undefined)) {
+            if (bestTarget.latitude !== activeItem.config_latitude) {
+                Doc.SetInPlace(bestTarget, 'latitude', NumCast(activeItem.config_latitude), true);
                 changed = true;
             }
-            if (bestTarget.longitude !== activeItem.presLong) {
-                Doc.SetInPlace(bestTarget, "longitude", NumCast(activeItem.presLong), true);
+            if (bestTarget.longitude !== activeItem.config_longitude) {
+                Doc.SetInPlace(bestTarget, 'longitude', NumCast(activeItem.config_longitude), true);
                 changed = true;
             }
-            if (bestTarget.zoom !== activeItem.presZoom) {
-                Doc.SetInPlace(bestTarget, "zoom", NumCast(activeItem.presZoom), true);
+            if (bestTarget.zoom !== activeItem.config_mapZoom) {
+                Doc.SetInPlace(bestTarget, 'mapZoom', NumCast(activeItem.config_mapZoom), true);
                 changed = true;
             }
-            if (bestTarget.mapType !== activeItem.presMapType) {
-                Doc.SetInPlace(bestTarget, "mapType", StrCast(activeItem.presMapType), true);
+            if (bestTarget.mapType !== activeItem.config_mapType) {
+                Doc.SetInPlace(bestTarget, 'mapType', StrCast(activeItem.config_mapType), true);
                 changed = true;
             }
         }
-        if (pinDataTypes?.temporal || (!pinDataTypes && activeItem.presStartTime !== undefined)) {
-            if (bestTarget._layout_currentTimecode !== activeItem.presStartTime) {
-                bestTarget._layout_currentTimecode = activeItem.presStartTime;
+        if (pinDataTypes?.temporal || (!pinDataTypes && activeItem.config_clipStart !== undefined)) {
+            if (bestTarget._layout_currentTimecode !== activeItem.config_clipStart) {
+                bestTarget._layout_currentTimecode = activeItem.config_clipStart;
                 changed = true;
             }
         }
-        if (pinDataTypes?.inkable || (!pinDataTypes && (activeItem.presFillColor !== undefined || activeItem.color !== undefined))) {
-            if (bestTarget.fillColor !== activeItem.presFillColor) {
-                Doc.GetProto(bestTarget).fillColor = activeItem.presFillColor;
+        if (pinDataTypes?.inkable || (!pinDataTypes && (activeItem.config_fillColor !== undefined || activeItem.color !== undefined))) {
+            if (bestTarget.fillColor !== activeItem.config_fillColor) {
+                Doc.GetProto(bestTarget).fillColor = activeItem.config_fillColor;
                 changed = true;
             }
-            if (bestTarget.color !== activeItem.presColor) {
-                Doc.GetProto(bestTarget).color = activeItem.presColor;
+            if (bestTarget.color !== activeItem.config_color) {
+                Doc.GetProto(bestTarget).color = activeItem.config_color;
                 changed = true;
             }
             if (bestTarget.width !== activeItem.width) {
-                bestTarget._width = NumCast(activeItem.presWidth, NumCast(bestTarget.width));
+                bestTarget._width = NumCast(activeItem.config_width, NumCast(bestTarget.width));
                 changed = true;
             }
             if (bestTarget.height !== activeItem.height) {
-                bestTarget._height = NumCast(activeItem.presHeight, NumCast(bestTarget.height));
+                bestTarget._height = NumCast(activeItem.config_height, NumCast(bestTarget.height));
                 changed = true;
             }
         }
-        if ((pinDataTypes?.type_collection && activeItem.presViewType !== undefined) || (!pinDataTypes && activeItem.presViewType !== undefined)) {
-            if (bestTarget._type_collection !== activeItem.presViewType) {
-                bestTarget._type_collection = activeItem.presViewType;
+        if ((pinDataTypes?.type_collection && activeItem.config_viewType !== undefined) || (!pinDataTypes && activeItem.config_viewType !== undefined)) {
+            if (bestTarget._type_collection !== activeItem.config_viewType) {
+                bestTarget._type_collection = activeItem.config_viewType;
                 changed = true;
             }
         }
 
-        if ((pinDataTypes?.filters && activeItem.presDocFilters !== undefined) || (!pinDataTypes && activeItem.presDocFilters !== undefined)) {
-            if (bestTarget.childFilters !== activeItem.presDocFilters) {
-                bestTarget.childFilters = ObjectField.MakeCopy(activeItem.presDocFilters as ObjectField) || new List<string>([]);
+        if ((pinDataTypes?.filters && activeItem.config_docFilters !== undefined) || (!pinDataTypes && activeItem.config_docFilters !== undefined)) {
+            if (bestTarget.childFilters !== activeItem.config_docFilters) {
+                bestTarget.childFilters = ObjectField.MakeCopy(activeItem.config_docFilters as ObjectField) || new List<string>([]);
                 changed = true;
             }
         }
 
-        if ((pinDataTypes?.pivot && activeItem.presPivotField !== undefined) || (!pinDataTypes && activeItem.presPivotField !== undefined)) {
-            if (bestTarget.pivotField !== activeItem.presPivotField) {
-                bestTarget.pivotField = activeItem.presPivotField;
+        if ((pinDataTypes?.pivot && activeItem.config_pivotField !== undefined) || (!pinDataTypes && activeItem.config_pivotField !== undefined)) {
+            if (bestTarget.pivotField !== activeItem.config_pivotField) {
+                bestTarget.pivotField = activeItem.config_pivotField;
                 bestTarget._prevFilterIndex = 1; // need to revisit this...see CollectionTimeView
                 changed = true;
             }
@@ -529,21 +529,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             changed = true;
         }
 
-        if (pinDataTypes?.scrollable || (!pinDataTypes && activeItem.presViewScroll !== undefined)) {
-            if (bestTarget._layout_scrollTop !== activeItem.presViewScroll) {
-                bestTarget._layout_scrollTop = activeItem.presViewScroll;
+        if (pinDataTypes?.scrollable || (!pinDataTypes && activeItem.config_scrollTop !== undefined)) {
+            if (bestTarget._layout_scrollTop !== activeItem.config_scrollTop) {
+                bestTarget._layout_scrollTop = activeItem.config_scrollTop;
                 changed = true;
-                const contentBounds = Cast(activeItem.presPinViewBounds, listSpec('number'));
+                const contentBounds = Cast(activeItem.config_viewBounds, listSpec('number'));
                 if (contentBounds) {
                     const dv = DocumentManager.Instance.getDocumentView(bestTarget)?.ComponentView;
-                    dv?.brushView?.({ panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] });
+                    dv?.brushView?.({ panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] }, transTime);
                 }
             }
         }
-        if (pinDataTypes?.dataannos || (!pinDataTypes && activeItem.presAnnotations !== undefined)) {
+        if (pinDataTypes?.dataannos || (!pinDataTypes && activeItem.config_annotations !== undefined)) {
             const fkey = Doc.LayoutFieldKey(bestTarget);
             const oldItems = DocListCast(bestTarget[fkey + '_annotations']).filter(doc => doc.layout_unrendered);
-            const newItems = DocListCast(activeItem.presAnnotations).map(doc => {
+            const newItems = DocListCast(activeItem.config_annotations).map(doc => {
                 doc.hidden = false;
                 return doc;
             });
@@ -556,11 +556,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             const newList = new List<Doc>([...oldItems, ...hiddenItems, ...newItems]);
             Doc.GetProto(bestTarget)[fkey + '_annotations'] = newList;
         }
-        if (pinDataTypes?.poslayoutview || (!pinDataTypes && activeItem.presPinLayoutData !== undefined)) {
+        if (pinDataTypes?.poslayoutview || (!pinDataTypes && activeItem.config_pinLayoutData !== undefined)) {
             changed = true;
             const layoutField = Doc.LayoutFieldKey(bestTarget);
             const transitioned = new Set<Doc>();
-            StrListCast(activeItem.presPinLayoutData)
+            StrListCast(activeItem.config_pinLayoutData)
                 .map(str => JSON.parse(str) as { id: string; x: number; y: number; back: string; fill: string; w: number; h: number; data: string; text: string })
                 .forEach(async data => {
                     const doc = DocCast(DocServer.GetCachedRefField(data.id));
@@ -582,8 +582,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 });
             setTimeout(() => Array.from(transitioned).forEach(action(doc => (doc._dataTransition = undefined))), transTime + 10);
         }
-        if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.presPinViewBounds !== undefined || activeItem.presPanX !== undefined || activeItem.presViewScale !== undefined))) && !bestTarget._isGroup) {
-            const contentBounds = Cast(activeItem.presPinViewBounds, listSpec('number'));
+        if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.config_viewBounds !== undefined || activeItem.config_panX !== undefined || activeItem.config_viewScale !== undefined))) && !bestTarget._isGroup) {
+            const contentBounds = Cast(activeItem.config_viewBounds, listSpec('number'));
             if (contentBounds) {
                 const viewport = { panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] };
                 bestTarget._freeform_panX = viewport.panX;
@@ -591,15 +591,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 const dv = DocumentManager.Instance.getDocumentView(bestTarget);
                 if (dv) {
                     changed = true;
-                    const computedScale = NumCast(activeItem.presZoom, 1) * Math.min(dv.props.PanelWidth() / viewport.width, dv.props.PanelHeight() / viewport.height);
-                    activeItem.presMovement === PresMovement.Zoom && (bestTarget._freeform_scale = computedScale);
-                    dv.ComponentView?.brushView?.(viewport);
+                    const computedScale = NumCast(activeItem.config_zoom, 1) * Math.min(dv.props.PanelWidth() / viewport.width, dv.props.PanelHeight() / viewport.height);
+                    activeItem.presentation_movement === PresMovement.Zoom && (bestTarget._freeform_scale = computedScale);
+                    dv.ComponentView?.brushView?.(viewport, transTime);
                 }
             } else {
-                if (bestTarget._freeform_panX !== activeItem.presPanX || bestTarget._freeform_panY !== activeItem.presPanY || bestTarget._freeform_scale !== activeItem.presViewScale) {
-                    bestTarget._freeform_panX = activeItem.presPanX ?? bestTarget._freeform_panX;
-                    bestTarget._freeform_panY = activeItem.presPanY ?? bestTarget._freeform_panY;
-                    bestTarget._freeform_scale = activeItem.presViewScale ?? bestTarget._freeform_scale;
+                if (bestTarget._freeform_panX !== activeItem.config_panX || bestTarget._freeform_panY !== activeItem.config_panY || bestTarget._freeform_scale !== activeItem.config_viewScale) {
+                    bestTarget._freeform_panX = activeItem.config_panX ?? bestTarget._freeform_panX;
+                    bestTarget._freeform_panY = activeItem.config_panY ?? bestTarget._freeform_panY;
+                    bestTarget._freeform_scale = activeItem.config_viewScale ?? bestTarget._freeform_scale;
                     changed = true;
                 }
             }
@@ -614,17 +614,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     /// target doc when navigating to it.
     @action
     static pinDocView(pinDoc: Doc, pinProps: PinProps, targetDoc: Doc) {
+        pinDoc.presentation = true;
+        pinDoc.config = '';
         if (pinProps.pinDocLayout) {
-            pinDoc.presPinLayout = true;
-            pinDoc.presX = NumCast(targetDoc.x);
-            pinDoc.presY = NumCast(targetDoc.y);
-            pinDoc.presRotation = NumCast(targetDoc.rotation);
-            pinDoc.presWidth = NumCast(targetDoc.width);
-            pinDoc.presHeight = NumCast(targetDoc.height);
+            pinDoc.config_pinLayout = true;
+            pinDoc.config_x = NumCast(targetDoc.x);
+            pinDoc.config_y = NumCast(targetDoc.y);
+            pinDoc.config_rotation = NumCast(targetDoc.rotation);
+            pinDoc.config_width = NumCast(targetDoc.width);
+            pinDoc.config_height = NumCast(targetDoc.height);
         }
         if (pinProps.pinAudioPlay) pinDoc.presPlayAudio = true;
         if (pinProps.pinData) {
-            pinDoc.presPinData =
+            pinDoc.config_pinData =
                 pinProps.pinData.scrollable ||
                 pinProps.pinData.temporal ||
                 pinProps.pinData.pannable ||
@@ -636,37 +638,37 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 pinProps?.activeFrame !== undefined;
             const fkey = Doc.LayoutFieldKey(targetDoc);
             if (pinProps.pinData.dataview) {
-                pinDoc.presUsePath = targetDoc[fkey + '_usePath'];
-                pinDoc.presData = targetDoc[fkey] instanceof ObjectField ? (targetDoc[fkey] as ObjectField)[Copy]() : targetDoc.data;
+                pinDoc.config_usePath = targetDoc[fkey + '_usePath'];
+                pinDoc.config_data = targetDoc[fkey] instanceof ObjectField ? (targetDoc[fkey] as ObjectField)[Copy]() : targetDoc.data;
             }
             if (pinProps.pinData.dataannos) {
                 const fkey = Doc.LayoutFieldKey(targetDoc);
-                pinDoc.presAnnotations = new List<Doc>(DocListCast(Doc.GetProto(targetDoc)[fkey + '_annotations']).filter(doc => !doc.layout_unrendered));
+                pinDoc.config_annotations = new List<Doc>(DocListCast(Doc.GetProto(targetDoc)[fkey + '_annotations']).filter(doc => !doc.layout_unrendered));
             }
             if (pinProps.pinData.inkable) {
-                pinDoc.presFillColor = targetDoc.fillColor;
-                pinDoc.presColor = targetDoc.color;
-                pinDoc.presWidth = targetDoc._width;
-                pinDoc.presHeight = targetDoc._height;
+                pinDoc.config_fillColor = targetDoc.fillColor;
+                pinDoc.config_color = targetDoc.color;
+                pinDoc.config_width = targetDoc._width;
+                pinDoc.config_height = targetDoc._height;
             }
-            if (pinProps.pinData.scrollable) pinDoc.presViewScroll = targetDoc._layout_scrollTop;
+            if (pinProps.pinData.scrollable) pinDoc.config_scrollTop = targetDoc._layout_scrollTop;
             if (pinProps.pinData.clippable) {
                 const fkey = Doc.LayoutFieldKey(targetDoc);
-                pinDoc.presClipWidth = targetDoc[fkey + '_clipWidth'];
+                pinDoc.config_clipWidth = targetDoc[fkey + '_clipWidth'];
             }
             if (pinProps.pinData.datarange) {
-                pinDoc.presXRange = undefined; //targetDoc?.xrange;
-                pinDoc.presYRange = undefined; //targetDoc?.yrange;
+                pinDoc.config_xRange = undefined; //targetDoc?.xrange;
+                pinDoc.config_yRange = undefined; //targetDoc?.yrange;
             }
             if (pinProps.pinData.map) {
-                pinDoc.presLat = targetDoc?.latitude;
-                pinDoc.presLong = targetDoc?.longitude;
-                pinDoc.presZoom = targetDoc?.zoom;
-                pinDoc.mapType = targetDoc?.mapType;
+                pinDoc.config_latitude = targetDoc?.latitude;
+                pinDoc.config_longitude = targetDoc?.longitude;
+                pinDoc.config_mapZoom = targetDoc?.mapZoom;
+                pinDoc.config_mapType = targetDoc?.mapType;
                 //...
             }
             if (pinProps.pinData.poslayoutview)
-                pinDoc.presPinLayoutData = new List<string>(
+                pinDoc.config_pinLayoutData = new List<string>(
                     DocListCast(targetDoc[fkey] as ObjectField).map(d =>
                         JSON.stringify({
                             id: d[Id],
@@ -681,28 +683,28 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         })
                     )
                 );
-            if (pinProps.pinData.type_collection) pinDoc.presViewType = targetDoc._type_collection;
-            if (pinProps.pinData.filters) pinDoc.presDocFilters = ObjectField.MakeCopy(targetDoc.childFilters as ObjectField);
-            if (pinProps.pinData.pivot) pinDoc.presPivotField = targetDoc._pivotField;
+            if (pinProps.pinData.type_collection) pinDoc.config_viewType = targetDoc._type_collection;
+            if (pinProps.pinData.filters) pinDoc.config_docFilters = ObjectField.MakeCopy(targetDoc.childFilters as ObjectField);
+            if (pinProps.pinData.pivot) pinDoc.config_pivotField = targetDoc._pivotField;
             if (pinProps.pinData.pannable) {
-                pinDoc.presPanX = NumCast(targetDoc._freeform_panX);
-                pinDoc.presPanY = NumCast(targetDoc._freeform_panY);
-                pinDoc.presViewScale = NumCast(targetDoc._freeform_scale, 1);
+                pinDoc.config_panX = NumCast(targetDoc._freeform_panX);
+                pinDoc.config_panY = NumCast(targetDoc._freeform_panY);
+                pinDoc.config_viewScale = NumCast(targetDoc._freeform_scale, 1);
             }
             if (pinProps.pinData.temporal) {
-                pinDoc.presStartTime = targetDoc._layout_currentTimecode;
-                const duration = NumCast(pinDoc[`${Doc.LayoutFieldKey(pinDoc)}_duration`], NumCast(targetDoc.presStartTime) + 0.1);
-                pinDoc.presEndTime = NumCast(targetDoc.clipEnd, duration);
+                pinDoc.config_clipStart = targetDoc._layout_currentTimecode;
+                const duration = NumCast(pinDoc[`${Doc.LayoutFieldKey(pinDoc)}_duration`], NumCast(targetDoc.config_clipStart) + 0.1);
+                pinDoc.config_clipEnd = NumCast(targetDoc.clipEnd, duration);
             }
         }
         if (pinProps?.pinViewport) {
             // If pinWithView option set then update scale and x / y props of slide
             const bounds = pinProps.pinViewport;
-            pinDoc.presPinView = true;
-            pinDoc.presViewScale = NumCast(targetDoc._freeform_scale, 1);
-            pinDoc.presPanX = bounds.left + bounds.width / 2;
-            pinDoc.presPanY = bounds.top + bounds.height / 2;
-            pinDoc.presPinViewBounds = new List<number>([bounds.left, bounds.top, bounds.left + bounds.width, bounds.top + bounds.height]);
+            pinDoc.config_pinView = true;
+            pinDoc.config_viewScale = NumCast(targetDoc._freeform_scale, 1);
+            pinDoc.config_panX = bounds.left + bounds.width / 2;
+            pinDoc.config_panY = bounds.top + bounds.height / 2;
+            pinDoc.config_viewBounds = new List<number>([bounds.left, bounds.top, bounds.left + bounds.width, bounds.top + bounds.height]);
         }
     }
     /**
@@ -739,23 +741,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     static NavigateToTarget(targetDoc: Doc, activeItem: Doc, finished?: () => void) {
-        if (activeItem.presMovement === PresMovement.None && targetDoc.type === DocumentType.SCRIPTING) {
+        if (activeItem.presentation_movement === PresMovement.None && targetDoc.type === DocumentType.SCRIPTING) {
             (DocumentManager.Instance.getFirstDocumentView(targetDoc)?.ComponentView as ScriptingBox)?.onRun?.();
             return;
         }
-        const effect = activeItem.presEffect && activeItem.presEffect !== PresEffect.None ? activeItem.presEffect : undefined;
-        const presTime = NumCast(activeItem.presTransition, effect ? 750 : 500);
+        const effect = activeItem.presentation_effect && activeItem.presentation_effect !== PresEffect.None ? activeItem.presentation_effect : undefined;
+        const presTime = NumCast(activeItem.presentation_transition, effect ? 750 : 500);
         const options: DocFocusOptions = {
-            willPan: activeItem.presMovement !== PresMovement.None,
-            willZoomCentered: activeItem.presMovement === PresMovement.Zoom || activeItem.presMovement === PresMovement.Jump || activeItem.presMovement === PresMovement.Center,
-            zoomScale: activeItem.presMovement === PresMovement.Center ? 0 : NumCast(activeItem.presZoom, 1),
-            zoomTime: activeItem.presMovement === PresMovement.Jump ? 0 : Math.min(Math.max(effect ? 750 : 500, (effect ? 0.2 : 1) * presTime), presTime),
+            willPan: activeItem.presentation_movement !== PresMovement.None,
+            willZoomCentered: activeItem.presentation_movement === PresMovement.Zoom || activeItem.presentation_movement === PresMovement.Jump || activeItem.presentation_movement === PresMovement.Center,
+            zoomScale: activeItem.presentation_movement === PresMovement.Center ? 0 : NumCast(activeItem.config_zoom, 1),
+            zoomTime: activeItem.presentation_movement === PresMovement.Jump ? 0 : Math.min(Math.max(effect ? 750 : 500, (effect ? 0.2 : 1) * presTime), presTime),
             effect: activeItem,
             noSelect: true,
             openLocation: OpenWhere.addLeft,
             anchorDoc: activeItem,
             easeFunc: StrCast(activeItem.presEaseFunc, 'ease') as any,
-            zoomTextSelections: BoolCast(activeItem.presZoomText),
+            zoomTextSelections: BoolCast(activeItem.presentation_zoomText),
             playAudio: BoolCast(activeItem.presPlayAudio),
         };
         if (activeItem.presOpenInLightbox) {
@@ -765,7 +767,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             }
         }
         if (targetDoc) {
-            if (activeItem.presentationTargetDoc instanceof Doc) activeItem.presentationTargetDoc[Animation] = undefined;
+            if (activeItem.presentation_targetDoc instanceof Doc) activeItem.presentation_targetDoc[Animation] = undefined;
 
             DocumentManager.Instance.AddViewRenderedCb(LightboxView.LightboxDoc, dv => {
                 // if target or the doc it annotates is not in the lightbox, then close the lightbox
@@ -788,16 +790,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             const tagDoc = PresBox.targetRenderedDoc(curDoc);
             const itemIndexes: number[] = this.getAllIndexes(this.tagDocs, tagDoc);
             let opacity: Opt<number> = index === this.itemIndex ? 1 : undefined;
-            if (curDoc.presHide) {
+            if (curDoc.presentation_hide) {
                 if (index !== this.itemIndex) {
                     opacity = 1;
                 }
             }
             const hidingIndBef = itemIndexes.find(item => item >= this.itemIndex) ?? itemIndexes.slice().reverse().lastElement();
-            if (curDoc.presHideBefore && index === hidingIndBef) {
+            if (curDoc.presentation_hideBefore && index === hidingIndBef) {
                 if (index > this.itemIndex) {
                     opacity = 0;
-                } else if (index === this.itemIndex || !curDoc.presHideAfter) {
+                } else if (index === this.itemIndex || !curDoc.presentation_hideAfter) {
                     opacity = 1;
                     setTimeout(() => (tagDoc._dataTransition = undefined), 1000);
                 }
@@ -807,15 +809,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     .slice()
                     .reverse()
                     .find(item => item <= this.itemIndex) ?? itemIndexes.lastElement();
-            if (curDoc.presHideAfter && index === hidingIndAft) {
+            if (curDoc.presentation_hideAfter && index === hidingIndAft) {
                 if (index < this.itemIndex) {
                     opacity = 0;
-                } else if (index === this.itemIndex || !curDoc.presHideBefore) {
+                } else if (index === this.itemIndex || !curDoc.presentation_hideBefore) {
                     opacity = 1;
                 }
             }
             const hidingInd = itemIndexes.find(item => item === this.itemIndex);
-            if (curDoc.presHide && index === hidingInd) {
+            if (curDoc.presentation_hide && index === hidingInd) {
                 if (index === this.itemIndex) {
                     opacity = 0;
                 }
@@ -873,9 +875,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     // The function pauses the auto presentation
     @action
     pauseAutoPres = () => {
-        if (this.layoutDoc.presStatus === PresStatus.Autoplay) {
+        if (this.layoutDoc.presentation_status === PresStatus.Autoplay) {
             if (this._presTimer) clearTimeout(this._presTimer);
-            this.layoutDoc.presStatus = PresStatus.Manual;
+            this.layoutDoc.presentation_status = PresStatus.Manual;
             this.childDocs.forEach(this.stopTempMedia);
         }
     };
@@ -906,23 +908,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         runInAction(() => (this._expandBoolean = !this._expandBoolean));
         this.rootDoc.expandBoolean = this._expandBoolean;
         this.childDocs.forEach(doc => {
-            doc.presExpandInlineButton = this._expandBoolean;
+            doc.presentation_expandInlineButton = this._expandBoolean;
         });
     };
 
     initializePresState = (startIndex: number) => {
         this.childDocs.forEach((doc, index) => {
             const tagDoc = PresBox.targetRenderedDoc(doc);
-            if (doc.presHideBefore && index > startIndex) tagDoc.opacity = 0;
-            if (doc.presHideAfter && index < startIndex) tagDoc.opacity = 0;
-            if (doc.presIndexed !== undefined && index >= startIndex) {
-                const startInd = NumCast(doc.presIndexedStart);
+            if (doc.presentation_hideBefore && index > startIndex) tagDoc.opacity = 0;
+            if (doc.presentation_hideAfter && index < startIndex) tagDoc.opacity = 0;
+            if (doc.presentation_indexed !== undefined && index >= startIndex) {
+                const startInd = NumCast(doc.presentation_indexedStart);
                 this.progressivizedItems(doc)
                     ?.slice(startInd)
                     .forEach(indexedDoc => (indexedDoc.opacity = 0));
-                doc.presIndexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, startInd);
+                doc.presentation_indexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, startInd);
             }
-            // if (doc.presHide && this.childDocs.indexOf(doc) === startIndex)  tagDoc.opacity = 0;
+            // if (doc.presentation_hide && this.childDocs.indexOf(doc) === startIndex)  tagDoc.opacity = 0;
         });
     };
 
@@ -936,13 +938,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         PresBox.Instance = this;
         clearTimeout(this._presTimer);
         if (this.childDocs.length) {
-            this.layoutDoc.presStatus = PresStatus.Autoplay;
+            this.layoutDoc.presentation_status = PresStatus.Autoplay;
             this.initializePresState(startIndex);
             const func = () => {
-                const delay = NumCast(this.activeItem.presDuration, this.activeItem.type === DocumentType.SCRIPTING ? 0 : 2500) + NumCast(this.activeItem.presTransition);
+                const delay = NumCast(this.activeItem.presentation_duration, this.activeItem.type === DocumentType.SCRIPTING ? 0 : 2500) + NumCast(this.activeItem.presentation_transition);
                 this._presTimer = setTimeout(() => {
-                    if (!this.next()) this.layoutDoc.presStatus = this._exitTrail?.() ?? PresStatus.Manual;
-                    this.layoutDoc.presStatus === PresStatus.Autoplay && func();
+                    if (!this.next()) this.layoutDoc.presentation_status = this._exitTrail?.() ?? PresStatus.Manual;
+                    this.layoutDoc.presentation_status === PresStatus.Autoplay && func();
                 }, delay);
             };
             this.gotoDocument(startIndex, this.activeItem, undefined, func);
@@ -976,7 +978,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         doc._width = PresBox.minimizedWidth;
         Doc.AddToMyOverlay(doc);
         PresBox.Instance?.initializePresState(PresBox.Instance.itemIndex);
-        return (doc.presStatus = PresStatus.Manual);
+        return (doc.presentation_status = PresStatus.Manual);
     }
 
     /**
@@ -1020,39 +1022,39 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     });
 
     movementName = action((activeItem: Doc) => {
-        if (![PresMovement.Zoom, PresMovement.Pan, PresMovement.Center, PresMovement.Jump, PresMovement.None].includes(StrCast(activeItem.presMovement) as any)) {
+        if (![PresMovement.Zoom, PresMovement.Pan, PresMovement.Center, PresMovement.Jump, PresMovement.None].includes(StrCast(activeItem.presentation_movement) as any)) {
             return PresMovement.Zoom;
         }
-        return StrCast(activeItem.presMovement);
+        return StrCast(activeItem.presentation_movement);
     });
 
     whenChildContentsActiveChanged = action((isActive: boolean) => this.props.whenChildContentsActiveChanged((this._isChildActive = isActive)));
     // For dragging documents into the presentation trail
     addDocumentFilter = (docs: Doc[]) => {
         docs.forEach((doc, i) => {
-            if (doc.presentationTargetDoc) return true;
+            if (doc.presentation_targetDoc) return true;
             if (doc.type === DocumentType.LABEL) {
                 const audio = Cast(doc.annotationOn, Doc, null);
                 if (audio) {
                     audio.mediaStart = 'manual';
                     audio.mediaStop = 'manual';
-                    audio.presStartTime = NumCast(doc._timecodeToShow /* audioStart */, NumCast(doc._timecodeToShow /* videoStart */));
-                    audio.presEndTime = NumCast(doc._timecodeToHide /* audioEnd */, NumCast(doc._timecodeToHide /* videoEnd */));
-                    audio.presDuration = audio.presStartTime - audio.presEndTime;
+                    audio.config_clipStart = NumCast(doc._timecodeToShow /* audioStart */, NumCast(doc._timecodeToShow /* videoStart */));
+                    audio.config_clipEnd = NumCast(doc._timecodeToHide /* audioEnd */, NumCast(doc._timecodeToHide /* videoEnd */));
+                    audio.presentation_duration = audio.config_clipStart - audio.config_clipEnd;
                     TabDocView.PinDoc(audio, { audioRange: true });
                     setTimeout(() => this.removeDocument(doc), 0);
                     return false;
                 }
             } else {
-                if (!doc.presentationTargetDoc) doc.title = doc.title + ' - Slide';
-                doc.presentationTargetDoc = doc.createdFrom; // dropped document will be a new embedding of an embedded document somewhere else.
-                doc.presMovement = PresMovement.Zoom;
-                if (this._expandBoolean) doc.presExpandInlineButton = true;
+                if (!doc.presentation_targetDoc) doc.title = doc.title + ' - Slide';
+                doc.presentation_targetDoc = doc.createdFrom; // dropped document will be a new embedding of an embedded document somewhere else.
+                doc.presentation_movement = PresMovement.Zoom;
+                if (this._expandBoolean) doc.presentation_expandInlineButton = true;
             }
         });
         return true;
     };
-    childLayoutTemplate = () => (!this.isTreeOrStack ? DocCast(Doc.UserDoc().presElement) : DocCast(Doc.UserDoc().presElement));
+    childLayoutTemplate = () => Docs.Create.PresElementBoxDocument();
     removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.rootDoc, this.fieldKey, doc);
     getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65); // listBox padding-left and pres-box-cont minHeight
     panelHeight = () => this.props.PanelHeight() - 40;
@@ -1067,7 +1069,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get listOfSelected() {
         return Array.from(this.selectedArray).map((doc: Doc, index: any) => {
             const curDoc = Cast(doc, Doc, null);
-            const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null);
+            const tagDoc = Cast(curDoc.presentation_targetDoc, Doc, null);
             if (curDoc && curDoc === this.activeItem)
                 return (
                     <div key={index} className="selectedList-items">
@@ -1173,7 +1175,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (anchorNode && anchorNode.className?.includes('lm_title')) return;
         switch (e.key) {
             case 'Backspace':
-                if (this.layoutDoc.presStatus === 'edit') {
+                if (this.layoutDoc.presentation_status === 'edit') {
                     undoBatch(
                         action(() => {
                             for (const doc of this.selectedArray) {
@@ -1190,11 +1192,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             case 'Escape':
                 if (Doc.IsInMyOverlay(this.layoutDoc)) {
                     this.exitClicked();
-                } else if (this.layoutDoc.presStatus === PresStatus.Edit) {
+                } else if (this.layoutDoc.presentation_status === PresStatus.Edit) {
                     this.clearSelectedArray();
                     this._eleArray.length = this._dragArray.length = 0;
                 } else {
-                    this.layoutDoc.presStatus = PresStatus.Edit;
+                    this.layoutDoc.presentation_status = PresStatus.Edit;
                 }
                 if (this._presTimer) clearTimeout(this._presTimer);
                 handled = true;
@@ -1211,7 +1213,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     this.next();
                     if (this._presTimer) {
                         clearTimeout(this._presTimer);
-                        this.layoutDoc.presStatus = PresStatus.Manual;
+                        this.layoutDoc.presentation_status = PresStatus.Manual;
                     }
                 }
                 handled = true;
@@ -1228,19 +1230,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     this.back();
                     if (this._presTimer) {
                         clearTimeout(this._presTimer);
-                        this.layoutDoc.presStatus = PresStatus.Manual;
+                        this.layoutDoc.presentation_status = PresStatus.Manual;
                     }
                 }
                 handled = true;
                 break;
             case 'Spacebar':
             case ' ':
-                if (this.layoutDoc.presStatus === PresStatus.Manual) this.startOrPause(true);
-                else if (this.layoutDoc.presStatus === PresStatus.Autoplay) if (this._presTimer) clearTimeout(this._presTimer);
+                if (this.layoutDoc.presentation_status === PresStatus.Manual) this.startOrPause(true);
+                else if (this.layoutDoc.presentation_status === PresStatus.Autoplay) if (this._presTimer) clearTimeout(this._presTimer);
                 handled = true;
                 break;
             case 'a':
-                if ((e.metaKey || e.altKey) && this.layoutDoc.presStatus === 'edit') {
+                if ((e.metaKey || e.altKey) && this.layoutDoc.presentation_status === 'edit') {
                     this.clearSelectedArray();
                     this.childDocs.forEach(doc => this.addToSelectedArray(doc));
                     handled = true;
@@ -1263,9 +1265,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const presCollection = DocumentManager.GetContextPath(this.activeItem).reverse().lastElement();
         const dv = DocumentManager.Instance.getDocumentView(presCollection);
         this.childDocs
-            .filter(doc => Cast(doc.presentationTargetDoc, Doc, null))
+            .filter(doc => Cast(doc.presentation_targetDoc, Doc, null))
             .forEach((doc, index) => {
-                const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
+                const tagDoc = Cast(doc.presentation_targetDoc, Doc, null);
                 const srcContext = Cast(tagDoc.embedContainer, Doc, null);
                 const width = NumCast(tagDoc._width) / 10;
                 const height = Math.max(NumCast(tagDoc._height) / 10, 15);
@@ -1298,17 +1300,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             </div>
                         );
                     }
-                } else if (doc.presPinView && presCollection === tagDoc && dv) {
+                } else if (doc.config_pinView && presCollection === tagDoc && dv) {
                     // Case B: Document is presPinView and is presCollection
-                    const scale: number = 1 / NumCast(doc.presViewScale);
+                    const scale: number = 1 / NumCast(doc.config_viewScale);
                     const height: number = dv.props.PanelHeight() * scale;
                     const width: number = dv.props.PanelWidth() * scale;
                     const indWidth = width / 10;
                     const indHeight = Math.max(height / 10, 15);
                     const indEdge = Math.max(indWidth, indHeight);
                     const indFontSize = indEdge * 0.8;
-                    const xLoc: number = NumCast(doc.presPanX) - width / 2;
-                    const yLoc: number = NumCast(doc.presPanY) - height / 2;
+                    const xLoc: number = NumCast(doc.config_panX) - width / 2;
+                    const yLoc: number = NumCast(doc.config_panY) - height / 2;
                     docs.push(tagDoc);
                     order.push(
                         <>
@@ -1334,15 +1336,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get paths() {
         let pathPoints = '';
         this.childDocs.forEach((doc, index) => {
-            const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
+            const tagDoc = Cast(doc.presentation_targetDoc, Doc, null);
             if (tagDoc) {
                 const n1x = NumCast(tagDoc.x) + NumCast(tagDoc._width) / 2;
                 const n1y = NumCast(tagDoc.y) + NumCast(tagDoc._height) / 2;
                 if ((index = 0)) pathPoints = n1x + ',' + n1y;
                 else pathPoints = pathPoints + ' ' + n1x + ',' + n1y;
-            } else if (doc.presPinView) {
-                const n1x = NumCast(doc.presPanX);
-                const n1y = NumCast(doc.presPanY);
+            } else if (doc.config_pinView) {
+                const n1x = NumCast(doc.config_panX);
+                const n1y = NumCast(doc.config_panY);
                 if ((index = 0)) pathPoints = n1x + ',' + n1y;
                 else pathPoints = pathPoints + ' ' + n1x + ',' + n1y;
             }
@@ -1366,7 +1368,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     getPaths = (collection: Doc) => this.paths; // needs to be smarter and figure out the paths to draw for this specific collection.  or better yet, draw everything in an overlay layer instad of within a collection
 
-    // Converts seconds to ms and updates presTransition
+    // Converts seconds to ms and updates presentation_transition
     public static SetTransitionTime = (number: String, setter: (timeInMS: number) => void, change?: number) => {
         let timeInMS = Number(number) * 1000;
         if (change) timeInMS += change;
@@ -1377,21 +1379,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     updateTransitionTime = (number: String, change?: number) => {
-        PresBox.SetTransitionTime(number, (timeInMS: number) => this.selectedArray.forEach(doc => (doc.presTransition = timeInMS)), change);
+        PresBox.SetTransitionTime(number, (timeInMS: number) => this.selectedArray.forEach(doc => (doc.presentation_transition = timeInMS)), change);
     };
 
-    // Converts seconds to ms and updates presTransition
+    // Converts seconds to ms and updates presentation_transition
     @undoBatch
     updateZoom = (number: String, change?: number) => {
         let scale = Number(number) / 100;
         if (change) scale += change;
         if (scale < 0.01) scale = 0.01;
         if (scale > 1) scale = 1;
-        this.selectedArray.forEach(doc => (doc.presZoom = scale));
+        this.selectedArray.forEach(doc => (doc.config_zoom = scale));
     };
 
     /*
-     * Converts seconds to ms and updates presDuration
+     * Converts seconds to ms and updates presentation_duration
      */
     @undoBatch
     updateDurationTime = (number: String, change?: number) => {
@@ -1399,31 +1401,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (change) timeInMS += change;
         if (timeInMS < 100) timeInMS = 100;
         if (timeInMS > 20000) timeInMS = 20000;
-        this.selectedArray.forEach(doc => (doc.presDuration = timeInMS));
+        this.selectedArray.forEach(doc => (doc.presentation_duration = timeInMS));
     };
 
     @undoBatch
-    updateMovement = action((movement: PresMovement, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presMovement = movement)));
+    updateMovement = action((movement: PresMovement, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presentation_movement = movement)));
 
     @undoBatch
     @action
     updateHideBefore = (activeItem: Doc) => {
-        activeItem.presHideBefore = !activeItem.presHideBefore;
-        this.selectedArray.forEach(doc => (doc.presHideBefore = activeItem.presHideBefore));
+        activeItem.presentation_hideBefore = !activeItem.presentation_hideBefore;
+        this.selectedArray.forEach(doc => (doc.presentation_hideBefore = activeItem.presentation_hideBefore));
     };
 
     @undoBatch
     @action
     updateHide = (activeItem: Doc) => {
-        activeItem.presHide = !activeItem.presHide;
-        this.selectedArray.forEach(doc => (doc.presHide = activeItem.presHide));
+        activeItem.presentation_hide = !activeItem.presentation_hide;
+        this.selectedArray.forEach(doc => (doc.presentation_hide = activeItem.presentation_hide));
     };
 
     @undoBatch
     @action
     updateHideAfter = (activeItem: Doc) => {
-        activeItem.presHideAfter = !activeItem.presHideAfter;
-        this.selectedArray.forEach(doc => (doc.presHideAfter = activeItem.presHideAfter));
+        activeItem.presentation_hideAfter = !activeItem.presentation_hideAfter;
+        this.selectedArray.forEach(doc => (doc.presentation_hideAfter = activeItem.presentation_hideAfter));
     };
 
     @undoBatch
@@ -1442,11 +1444,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     @action
-    updateEffectDirection = (effect: PresEffectDirection, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presEffectDirection = effect));
+    updateEffectDirection = (effect: PresEffectDirection, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presentation_effectDirection = effect));
 
     @undoBatch
     @action
-    updateEffect = (effect: PresEffect, bullet: boolean, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (bullet ? (doc.presBulletEffect = effect) : (doc.presEffect = effect)));
+    updateEffect = (effect: PresEffect, bullet: boolean, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (bullet ? (doc.presBulletEffect = effect) : (doc.presentation_effect = effect)));
 
     static _sliderBatch: any;
     public static inputter = (min: string, step: string, max: string, value: number, active: boolean, change: (val: string) => void, hmargin?: number) => {
@@ -1476,16 +1478,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @undoBatch
     @action
     applyTo = (array: Doc[]) => {
-        this.updateMovement(this.activeItem.presMovement as PresMovement, true);
-        this.updateEffect(this.activeItem.presEffect as PresEffect, false, true);
+        this.updateMovement(this.activeItem.presentation_movement as PresMovement, true);
+        this.updateEffect(this.activeItem.presentation_effect as PresEffect, false, true);
         this.updateEffect(this.activeItem.presBulletEffect as PresEffect, true, true);
-        this.updateEffectDirection(this.activeItem.presEffectDirection as PresEffectDirection, true);
-        const { presTransition, presDuration, presHideBefore, presHideAfter } = this.activeItem;
+        this.updateEffectDirection(this.activeItem.presentation_effectDirection as PresEffectDirection, true);
+        const { presentation_transition, presentation_duration, presentation_hideBefore, presentation_hideAfter } = this.activeItem;
         array.forEach(curDoc => {
-            curDoc.presTransition = presTransition;
-            curDoc.presDuration = presDuration;
-            curDoc.presHideBefore = presHideBefore;
-            curDoc.presHideAfter = presHideAfter;
+            curDoc.presentation_transition = presentation_transition;
+            curDoc.presentation_duration = presentation_duration;
+            curDoc.presentation_hideBefore = presentation_hideBefore;
+            curDoc.presentation_hideAfter = presentation_hideAfter;
         });
     };
 
@@ -1493,24 +1495,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const activeItem = this.activeItem;
         if (activeItem && this.targetDoc) {
             const targetType = this.targetDoc.type;
-            let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 0;
+            let duration = activeItem.presentation_duration ? NumCast(activeItem.presentation_duration) / 1000 : 0;
             if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration);
             return (
                 <div className="presBox-ribbon">
                     <div className="ribbon-doubleButton">
                         <Tooltip title={<div className="dash-tooltip">{'Hide before presented'}</div>}>
-                            <div className={`ribbon-toggle ${activeItem.presHideBefore ? 'active' : ''}`} onClick={() => this.updateHideBefore(activeItem)}>
+                            <div className={`ribbon-toggle ${activeItem.presentation_hideBefore ? 'active' : ''}`} onClick={() => this.updateHideBefore(activeItem)}>
                                 Hide before
                             </div>
                         </Tooltip>
                         <Tooltip title={<div className="dash-tooltip">{'Hide while presented'}</div>}>
-                            <div className={`ribbon-toggle ${activeItem.presHide ? 'active' : ''}`} onClick={() => this.updateHide(activeItem)}>
+                            <div className={`ribbon-toggle ${activeItem.presentation_hide ? 'active' : ''}`} onClick={() => this.updateHide(activeItem)}>
                                 Hide
                             </div>
                         </Tooltip>
 
                         <Tooltip title={<div className="dash-tooltip">{'Hide after presented'}</div>}>
-                            <div className={`ribbon-toggle ${activeItem.presHideAfter ? 'active' : ''}`} onClick={() => this.updateHideAfter(activeItem)}>
+                            <div className={`ribbon-toggle ${activeItem.presentation_hideAfter ? 'active' : ''}`} onClick={() => this.updateHideAfter(activeItem)}>
                                 Hide after
                             </div>
                         </Tooltip>
@@ -1559,7 +1561,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (activeItem && this.targetDoc) {
             const effect = activeItem.presBulletEffect ? activeItem.presBulletEffect : PresMovement.None;
             const bulletEffect = (effect: PresEffect) => (
-                <div className={`presBox-dropdownOption ${activeItem.presEffect === effect || (effect === PresEffect.None && !activeItem.presEffect) ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateEffect(effect, true)}>
+                <div
+                    className={`presBox-dropdownOption ${activeItem.presentation_effect === effect || (effect === PresEffect.None && !activeItem.presentation_effect) ? 'active' : ''}`}
+                    onPointerDown={StopEvent}
+                    onClick={() => this.updateEffect(effect, true)}>
                     {effect}
                 </div>
             );
@@ -1572,25 +1577,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             style={{ margin: 10 }}
                             type="checkbox"
                             onChange={() => {
-                                activeItem.presIndexed = activeItem.presIndexed === undefined ? 0 : undefined;
-                                activeItem.presHideBefore = activeItem.presIndexed !== undefined;
+                                activeItem.presentation_indexed = activeItem.presentation_indexed === undefined ? 0 : undefined;
+                                activeItem.presentation_hideBefore = activeItem.presentation_indexed !== undefined;
                                 const tagDoc = PresBox.targetRenderedDoc(this.activeItem);
                                 const type = DocCast(tagDoc?.annotationOn)?.type ?? tagDoc.type;
-                                activeItem.presIndexedStart = type === DocumentType.COL ? 1 : 0;
+                                activeItem.presentation_indexedStart = type === DocumentType.COL ? 1 : 0;
                                 // a progressivized slide doesn't have sub-slides, but rather iterates over the data list of the target being progressivized.
                                 // to avoid creating a new slide to correspond to each of the target's data list, we create a computedField to refernce the target's data list.
                                 let dataField = Doc.LayoutFieldKey(tagDoc);
                                 if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField = dataField + '_annotations';
 
-                                if (DocCast(activeItem.presentationTargetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`self.presentationTargetDoc.annotationOn["${dataField}"]`);
-                                else activeItem.data = ComputedField.MakeFunction(`self.presentationTargetDoc["${dataField}"]`);
+                                if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`self.presentation_targetDoc.annotationOn["${dataField}"]`);
+                                else activeItem.data = ComputedField.MakeFunction(`self.presentation_targetDoc["${dataField}"]`);
                             }}
-                            checked={Cast(activeItem.presIndexed, 'number', null) !== undefined ? true : false}
+                            checked={Cast(activeItem.presentation_indexed, 'number', null) !== undefined ? true : false}
                         />
                     </div>
                     <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
                         <div className="presBox-subheading">Progressivize First Bullet</div>
-                        <input className="presBox-checkbox" style={{ margin: 10 }} type="checkbox" onChange={() => (activeItem.presIndexedStart = activeItem.presIndexedStart ? 0 : 1)} checked={!NumCast(activeItem.presIndexedStart)} />
+                        <input
+                            className="presBox-checkbox"
+                            style={{ margin: 10 }}
+                            type="checkbox"
+                            onChange={() => (activeItem.presentation_indexedStart = activeItem.presentation_indexedStart ? 0 : 1)}
+                            checked={!NumCast(activeItem.presentation_indexedStart)}
+                        />
                     </div>
                     <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
                         <div className="presBox-subheading">Expand Current Bullet</div>
@@ -1625,18 +1636,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     @computed get transitionDropdown() {
         const activeItem = this.activeItem;
-        const presEffect = (effect: PresEffect) => (
-            <div className={`presBox-dropdownOption ${activeItem.presEffect === effect || (effect === PresEffect.None && !activeItem.presEffect) ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateEffect(effect, false)}>
+        const preseEffect = (effect: PresEffect) => (
+            <div
+                className={`presBox-dropdownOption ${activeItem.presentation_effect === effect || (effect === PresEffect.None && !activeItem.presentation_effect) ? 'active' : ''}`}
+                onPointerDown={StopEvent}
+                onClick={() => this.updateEffect(effect, false)}>
                 {effect}
             </div>
         );
         const presMovement = (movement: PresMovement) => (
-            <div className={`presBox-dropdownOption ${activeItem.presMovement === movement ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateMovement(movement)}>
+            <div className={`presBox-dropdownOption ${activeItem.presentation_movement === movement ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateMovement(movement)}>
                 {movement}
             </div>
         );
         const presDirection = (direction: PresEffectDirection, icon: string, gridColumn: number, gridRow: number, opts: object) => {
-            const color = activeItem.presEffectDirection === direction || (direction === PresEffectDirection.Center && !activeItem.presEffectDirection) ? Colors.LIGHT_BLUE : 'black';
+            const color = activeItem.presentation_effectDirection === direction || (direction === PresEffectDirection.Center && !activeItem.presentation_effectDirection) ? Colors.LIGHT_BLUE : 'black';
             return (
                 <Tooltip title={<div className="dash-tooltip">{direction}</div>}>
                     <div
@@ -1648,12 +1662,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             );
         };
         if (activeItem && this.targetDoc) {
-            const transitionSpeed = activeItem.presTransition ? NumCast(activeItem.presTransition) / 1000 : 0.5;
-            const zoom = NumCast(activeItem.presZoom, 1) * 100;
-            const effect = activeItem.presEffect ? activeItem.presEffect : PresMovement.None;
+            const transitionSpeed = activeItem.presentation_transition ? NumCast(activeItem.presentation_transition) / 1000 : 0.5;
+            const zoom = NumCast(activeItem.config_zoom, 1) * 100;
+            const effect = activeItem.presentation_effect ? activeItem.presentation_effect : PresMovement.None;
             return (
                 <div
-                    className={`presBox-ribbon ${this._transitionTools && this.layoutDoc.presStatus === PresStatus.Edit ? 'active' : ''}`}
+                    className={`presBox-ribbon ${this._transitionTools && this.layoutDoc.presentation_status === PresStatus.Edit ? 'active' : ''}`}
                     onPointerDown={StopEvent}
                     onPointerUp={StopEvent}
                     onClick={action(e => {
@@ -1681,7 +1695,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 {presMovement(PresMovement.Jump)}
                             </div>
                         </div>
-                        <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === PresMovement.Zoom ? 'inline-flex' : 'none' }}>
+                        <div className="ribbon-doubleButton" style={{ display: activeItem.presentation_movement === PresMovement.Zoom ? 'inline-flex' : 'none' }}>
                             <div className="presBox-subheading">Zoom (% screen filled)</div>
                             <div className="ribbon-property">
                                 <input className="presBox-input" type="number" readOnly={true} value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
@@ -1695,7 +1709,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 </div>
                             </div>
                         </div>
-                        {PresBox.inputter('0', '1', '100', zoom, activeItem.presMovement === PresMovement.Zoom, this.updateZoom)}
+                        {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}
                         <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
                             <div className="presBox-subheading">Transition Time</div>
                             <div className="ribbon-property">
@@ -1725,7 +1739,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
                             <div className="presBox-subheading">Zoom Text Selections</div>
-                            <input className="presBox-checkbox" style={{ margin: 10 }} type="checkbox" onChange={() => (activeItem.presZoomText = !BoolCast(activeItem.presZoomText))} checked={BoolCast(activeItem.presZoomText)} />
+                            <input
+                                className="presBox-checkbox"
+                                style={{ margin: 10 }}
+                                type="checkbox"
+                                onChange={() => (activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText))}
+                                checked={BoolCast(activeItem.presentation_zoomText)}
+                            />
                         </div>
                         <div
                             className="presBox-dropdown"
@@ -1737,17 +1757,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {effect?.toString()}
                             <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
                             <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this._openEffectDropdown ? 'grid' : 'none' }} onPointerDown={e => e.stopPropagation()}>
-                                {presEffect(PresEffect.None)}
-                                {presEffect(PresEffect.Fade)}
-                                {presEffect(PresEffect.Flip)}
-                                {presEffect(PresEffect.Rotate)}
-                                {presEffect(PresEffect.Bounce)}
-                                {presEffect(PresEffect.Roll)}
+                                {preseEffect(PresEffect.None)}
+                                {preseEffect(PresEffect.Fade)}
+                                {preseEffect(PresEffect.Flip)}
+                                {preseEffect(PresEffect.Rotate)}
+                                {preseEffect(PresEffect.Bounce)}
+                                {preseEffect(PresEffect.Roll)}
                             </div>
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: effect === PresEffectDirection.None ? 'none' : 'inline-flex' }}>
                             <div className="presBox-subheading">Effect direction</div>
-                            <div className="ribbon-property">{StrCast(this.activeItem.presEffectDirection)}</div>
+                            <div className="ribbon-property">{StrCast(this.activeItem.presentation_effectDirection)}</div>
                         </div>
                         <div className="effectDirection" style={{ display: effect === PresEffectDirection.None ? 'none' : 'grid', width: 40 }}>
                             {presDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})}
@@ -1787,10 +1807,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
                                             type="number"
                                             readOnly={true}
-                                            value={NumCast(activeItem.presStartTime).toFixed(2)}
+                                            value={NumCast(activeItem.config_clipStart).toFixed(2)}
                                             onKeyDown={e => e.stopPropagation()}
                                             onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
-                                                activeItem.presStartTime = Number(e.target.value);
+                                                activeItem.config_clipStart = Number(e.target.value);
                                             })}
                                         />
                                     </div>
@@ -1800,7 +1820,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         Duration (s)
                                     </div>
                                     <div className="slider-number" style={{ backgroundColor: Colors.LIGHT_BLUE }}>
-                                        {Math.round((NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime)) * 10) / 10}
+                                        {Math.round((NumCast(activeItem.config_clipEnd) - NumCast(activeItem.config_clipStart)) * 10) / 10}
                                     </div>
                                 </div>
                                 <div className="slider-block">
@@ -1814,9 +1834,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
                                             type="number"
                                             readOnly={true}
-                                            value={NumCast(activeItem.presEndTime).toFixed(2)}
+                                            value={NumCast(activeItem.config_clipEnd).toFixed(2)}
                                             onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
-                                                activeItem.presEndTime = Number(e.target.value);
+                                                activeItem.config_clipEnd = Number(e.target.value);
                                             })}
                                         />
                                     </div>
@@ -1828,12 +1848,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     step="0.1"
                                     min={clipStart}
                                     max={clipEnd}
-                                    value={NumCast(activeItem.presEndTime)}
+                                    value={NumCast(activeItem.config_clipEnd)}
                                     style={{ gridColumn: 1, gridRow: 1 }}
                                     className={`toolbar-slider ${'end'}`}
                                     id="toolbar-slider"
                                     onPointerDown={e => {
-                                        this._batch = UndoManager.StartBatch('presEndTime');
+                                        this._batch = UndoManager.StartBatch('config_clipEnd');
                                         const endBlock = document.getElementById('endTime');
                                         if (endBlock) {
                                             endBlock.style.color = Colors.LIGHT_GRAY;
@@ -1851,7 +1871,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     }}
                                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                         e.stopPropagation();
-                                        activeItem.presEndTime = Number(e.target.value);
+                                        activeItem.config_clipEnd = Number(e.target.value);
                                     }}
                                 />
                                 <input
@@ -1859,12 +1879,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     step="0.1"
                                     min={clipStart}
                                     max={clipEnd}
-                                    value={NumCast(activeItem.presStartTime)}
+                                    value={NumCast(activeItem.config_clipStart)}
                                     style={{ gridColumn: 1, gridRow: 1 }}
                                     className={`toolbar-slider ${'start'}`}
                                     id="toolbar-slider"
                                     onPointerDown={e => {
-                                        this._batch = UndoManager.StartBatch('presStartTime');
+                                        this._batch = UndoManager.StartBatch('config_clipStart');
                                         const startBlock = document.getElementById('startTime');
                                         if (startBlock) {
                                             startBlock.style.color = Colors.LIGHT_GRAY;
@@ -1882,7 +1902,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     }}
                                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                         e.stopPropagation();
-                                        activeItem.presStartTime = Number(e.target.value);
+                                        activeItem.config_clipStart = Number(e.target.value);
                                     }}
                                 />
                             </div>
@@ -1943,7 +1963,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return (
             <div
                 className="presBox-toolbar-dropdown"
-                style={{ display: this._newDocumentTools && this.layoutDoc.presStatus === 'edit' ? 'inline-flex' : 'none' }}
+                style={{ display: this._newDocumentTools && this.layoutDoc.presentation_status === 'edit' ? 'inline-flex' : 'none' }}
                 onClick={e => e.stopPropagation()}
                 onPointerUp={e => e.stopPropagation()}
                 onPointerDown={e => e.stopPropagation()}>
@@ -2080,10 +2100,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (doc) {
             const tabMap = CollectionDockingView.Instance?.tabMap;
             const tab = tabMap && Array.from(tabMap).find(tab => tab.DashDoc.type === DocumentType.COL)?.DashDoc;
-            const presCollection = DocumentManager.GetContextPath(this.activeItem).reverse().lastElement().presentationTargetDoc ?? tab;
+            const presCollection = DocumentManager.GetContextPath(this.activeItem).reverse().lastElement().presentation_targetDoc ?? tab;
             const data = Cast(presCollection?.data, listSpec(Doc));
-            const presData = Cast(this.rootDoc.data, listSpec(Doc));
-            if (data && presData) {
+            const config_data = Cast(this.rootDoc.data, listSpec(Doc));
+            if (data && config_data) {
                 data.push(doc);
                 TabDocView.PinDoc(doc, {});
                 this.gotoDocument(this.childDocs.length, this.activeItem);
@@ -2132,7 +2152,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     className="dropdown-play-button"
                     onClick={undoBatch(
                         action(() => {
-                            this.layoutDoc.presStatus = 'manual';
+                            this.layoutDoc.presentation_status = 'manual';
                             this.initializePresState(this.itemIndex);
                             this.turnOffEdit(true);
                             this.gotoDocument(this.itemIndex, this.activeItem);
@@ -2208,7 +2228,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 className={`presBox-buttons${Doc.IsInMyOverlay(this.rootDoc) ? ' inOverlay' : ''}`}
                 style={{ background: Doc.ActivePresentation === this.rootDoc ? Colors.LIGHT_BLUE : undefined, display: !this.rootDoc._chromeHidden ? 'none' : undefined }}>
                 {isMini ? null : (
-                    <select className="presBox-viewPicker" style={{ display: this.layoutDoc.presStatus === 'edit' ? 'block' : 'none' }} onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}>
+                    <select className="presBox-viewPicker" style={{ display: this.layoutDoc.presentation_status === 'edit' ? 'block' : 'none' }} onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}>
                         <option onPointerDown={StopEvent} value={CollectionViewType.Stacking}>
                             List
                         </option>
@@ -2223,12 +2243,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     </select>
                 )}
                 <div className="presBox-presentPanel" style={{ opacity: this.childDocs.length ? 1 : 0.3 }}>
-                    <span className={`presBox-button ${this.layoutDoc.presStatus === PresStatus.Edit ? 'present' : ''}`}>
+                    <span className={`presBox-button ${this.layoutDoc.presentation_status === PresStatus.Edit ? 'present' : ''}`}>
                         <div
                             className="presBox-button-left"
                             onClick={undoBatch(() => {
                                 if (this.childDocs.length) {
-                                    this.layoutDoc.presStatus = 'manual';
+                                    this.layoutDoc.presentation_status = 'manual';
                                     this.initializePresState(this.itemIndex);
                                     this.gotoDocument(this.itemIndex, this.activeItem);
                                 }
@@ -2254,12 +2274,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     @computed get playButtons() {
-        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presIndexed === undefined || NumCast(this.activeItem.presIndexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0));
+        const presEnd =
+            !this.layoutDoc.presLoop &&
+            this.itemIndex === this.childDocs.length - 1 &&
+            (this.activeItem.presentation_indexed === undefined || NumCast(this.activeItem.presentation_indexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0));
         const presStart: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0;
         const inOverlay = Doc.IsInMyOverlay(this.rootDoc);
         // Case 1: There are still other frames and should go through all frames before going to next slide
         return (
-            <div className="presPanelOverlay" style={{ display: this.layoutDoc.presStatus !== 'edit' ? 'inline-flex' : 'none' }}>
+            <div className="presPanelOverlay" style={{ display: this.layoutDoc.presentation_status !== 'edit' ? 'inline-flex' : 'none' }}>
                 <Tooltip title={<div className="dash-tooltip">{'Loop'}</div>}>
                     <div
                         className="presPanel-button"
@@ -2282,7 +2305,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 this.back();
                                 if (this._presTimer) {
                                     clearTimeout(this._presTimer);
-                                    this.layoutDoc.presStatus = PresStatus.Manual;
+                                    this.layoutDoc.presentation_status = PresStatus.Manual;
                                 }
                                 e.stopPropagation();
                             },
@@ -2292,9 +2315,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     }>
                     <FontAwesomeIcon icon={'arrow-left'} />
                 </div>
-                <Tooltip title={<div className="dash-tooltip">{this.layoutDoc.presStatus === PresStatus.Autoplay ? 'Pause' : 'Autoplay'}</div>}>
+                <Tooltip title={<div className="dash-tooltip">{this.layoutDoc.presentation_status === PresStatus.Autoplay ? 'Pause' : 'Autoplay'}</div>}>
                     <div className="presPanel-button" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.startOrPause(true), false, false)}>
-                        <FontAwesomeIcon color={this.layoutDoc.presStatus === PresStatus.Autoplay ? 'red' : undefined} icon={this.layoutDoc.presStatus === PresStatus.Autoplay ? 'pause' : 'play'} />
+                        <FontAwesomeIcon color={this.layoutDoc.presentation_status === PresStatus.Autoplay ? 'red' : undefined} icon={this.layoutDoc.presentation_status === PresStatus.Autoplay ? 'pause' : 'play'} />
                     </div>
                 </Tooltip>
                 <div
@@ -2310,7 +2333,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 this.next();
                                 if (this._presTimer) {
                                     clearTimeout(this._presTimer);
-                                    this.layoutDoc.presStatus = PresStatus.Manual;
+                                    this.layoutDoc.presentation_status = PresStatus.Manual;
                                 }
                                 e.stopPropagation();
                             },
@@ -2343,7 +2366,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </Tooltip>
                 <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this.props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}>
                     {inOverlay ? '' : 'Slide'} {this.itemIndex + 1}
-                    {this.activeItem?.presIndexed !== undefined ? `(${this.activeItem.presIndexed}/${this.progressivizedItems(this.activeItem)?.length})` : ''} / {this.childDocs.length}
+                    {this.activeItem?.presentation_indexed !== undefined ? `(${this.activeItem.presentation_indexed}/${this.progressivizedItems(this.activeItem)?.length})` : ''} / {this.childDocs.length}
                 </div>
                 <div className="presPanel-divider"></div>
                 {this.props.PanelWidth() > 250 ? (
@@ -2351,7 +2374,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         className="presPanel-button-text"
                         onClick={undoBatch(
                             action(() => {
-                                this.layoutDoc.presStatus = PresStatus.Edit;
+                                this.layoutDoc.presentation_status = PresStatus.Edit;
                                 clearTimeout(this._presTimer);
                             })
                         )}>
@@ -2369,7 +2392,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     startOrPause = (makeActive = true) => {
         makeActive && this.updateCurrentPresentation();
-        if (!this.layoutDoc.presStatus || this.layoutDoc.presStatus === PresStatus.Manual || this.layoutDoc.presStatus === PresStatus.Edit) this.startPresentation(this.itemIndex);
+        if (!this.layoutDoc.presentation_status || this.layoutDoc.presentation_status === PresStatus.Manual || this.layoutDoc.presentation_status === PresStatus.Edit) this.startPresentation(this.itemIndex);
         else this.pauseAutoPres();
     };
 
@@ -2378,7 +2401,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.back();
         if (this._presTimer) {
             clearTimeout(this._presTimer);
-            this.layoutDoc.presStatus = PresStatus.Manual;
+            this.layoutDoc.presentation_status = PresStatus.Manual;
         }
     };
 
@@ -2387,19 +2410,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.next();
         if (this._presTimer) {
             clearTimeout(this._presTimer);
-            this.layoutDoc.presStatus = PresStatus.Manual;
+            this.layoutDoc.presentation_status = PresStatus.Manual;
         }
     };
 
     @undoBatch
     @action
     exitClicked = () => {
-        this.layoutDoc.presStatus = this._exitTrail?.() ?? this.exitMinimize();
+        this.layoutDoc.presentation_status = this._exitTrail?.() ?? this.exitMinimize();
         clearTimeout(this._presTimer);
     };
 
     AddToMap = (treeViewDoc: Doc, index: number[]) => {
-        if (!treeViewDoc.presentationTargetDoc) return this.childDocs; // if treeViewDoc is not a pres elements, then it's a sub-bullet of a progressivized slide which isn't added to the linearized list of pres elements since it's not really a pres element.
+        if (!treeViewDoc.presentation_targetDoc) return this.childDocs; // if treeViewDoc is not a pres elements, then it's a sub-bullet of a progressivized slide which isn't added to the linearized list of pres elements since it's not really a pres element.
         var indexNum = 0;
         for (let i = 0; i < index.length; i++) {
             indexNum += index[i] * 10 ** -i;
@@ -2415,20 +2438,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     RemFromMap = (treeViewDoc: Doc, index: number[]) => {
-        if (!treeViewDoc.presentationTargetDoc) return this.childDocs; // if treeViewDoc is not a pres elements, then it's a sub-bullet of a progressivized slide which isn't added to the linearized list of pres elements since it's not really a pres element.
+        if (!treeViewDoc.presentation_targetDoc) return this.childDocs; // if treeViewDoc is not a pres elements, then it's a sub-bullet of a progressivized slide which isn't added to the linearized list of pres elements since it's not really a pres element.
         if (!this._unmounting && this.isTree) {
             this._treeViewMap.delete(treeViewDoc);
             this.dataDoc[this.presFieldKey] = new List<Doc>(this.sort(this._treeViewMap));
         }
     };
 
-    sort = (treeViewMap: Map<Doc, number>) => [...treeViewMap.entries()].sort((a: [Doc, number], b: [Doc, number]) => (a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0)).map(kv => kv[0]);
+    sort = (treeView_Map: Map<Doc, number>) => [...treeView_Map.entries()].sort((a: [Doc, number], b: [Doc, number]) => (a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0)).map(kv => kv[0]);
 
     render() {
         // needed to ensure that the childDocs are loaded for looking up fields
         this.childDocs.slice();
         const mode = StrCast(this.rootDoc._type_collection) as CollectionViewType;
-        const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presIndexed === undefined || NumCast(this.activeItem.presIndexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0));
+        const presEnd =
+            !this.layoutDoc.presLoop &&
+            this.itemIndex === this.childDocs.length - 1 &&
+            (this.activeItem.presentation_indexed === undefined || NumCast(this.activeItem.presentation_indexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0));
         const presStart = !this.layoutDoc.presLoop && this.itemIndex === 0;
         return this.props.addDocTab === returnFalse ? ( // bcz: hack!! - addDocTab === returnFalse only when this is being rendered by the OverlayView which means the doc is a mini player
             <div className="miniPres" onClick={e => e.stopPropagation()} onPointerEnter={action(e => (this._forceKeyEvents = true))}>
@@ -2447,9 +2473,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     <div className="presPanel-button" style={{ opacity: presStart ? 0.4 : 1 }} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, returnFalse, this.prevClicked, false, false)}>
                         <FontAwesomeIcon icon={'arrow-left'} />
                     </div>
-                    <Tooltip title={<div className="dash-tooltip">{this.layoutDoc.presStatus === PresStatus.Autoplay ? 'Pause' : 'Autoplay'}</div>}>
+                    <Tooltip title={<div className="dash-tooltip">{this.layoutDoc.presentation_status === PresStatus.Autoplay ? 'Pause' : 'Autoplay'}</div>}>
                         <div className="presPanel-button" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, returnFalse, () => this.startOrPause(true), false, false)}>
-                            <FontAwesomeIcon icon={this.layoutDoc.presStatus === 'auto' ? 'pause' : 'play'} />
+                            <FontAwesomeIcon icon={this.layoutDoc.presentation_status === 'auto' ? 'pause' : 'play'} />
                         </div>
                     </Tooltip>
                     <div className="presPanel-button" style={{ opacity: presEnd ? 0.4 : 1 }} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, returnFalse, this.nextClicked, false, false)}>
@@ -2463,7 +2489,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     </Tooltip>
                     <div className="presPanel-button-text">
                         Slide {this.itemIndex + 1}
-                        {this.activeItem?.presIndexed !== undefined ? `(${this.activeItem.presIndexed}/${this.progressivizedItems(this.activeItem)?.length})` : ''} / {this.childDocs.length}
+                        {this.activeItem?.presentation_indexed !== undefined ? `(${this.activeItem.presentation_indexed}/${this.progressivizedItems(this.activeItem)?.length})` : ''} / {this.childDocs.length}
                     </div>
                     <div className="presPanel-divider" />
                     <div className="presPanel-button-text" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, returnFalse, this.exitClicked, false, false)}>
@@ -2487,6 +2513,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 moveDocument={returnFalse}
                                 ignoreUnrendered={true}
                                 childDragAction="move"
+                                setContentView={emptyFunction}
                                 //childLayoutFitWidth={returnTrue}
                                 childOpacity={returnOne}
                                 childClickScript={PresBox.navigateToDocScript}
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index f31cf6147..529a5024f 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -58,13 +58,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc;
     }
     @computed get targetDoc() {
-        return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc;
+        return Cast(this.rootDoc.presentation_targetDoc, Doc, null) || this.rootDoc;
     }
 
     componentDidMount() {
         this.layoutDoc.layout_hideLinkButton = true;
         this._heightDisposer = reaction(
-            () => ({ expand: this.rootDoc.presExpandInlineButton, height: this.collapsedHeight }),
+            () => ({ expand: this.rootDoc.presentation_expandInlineButton, height: this.collapsedHeight }),
             ({ expand, height }) => (this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0)),
             { fireImmediately: true }
         );
@@ -79,7 +79,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
 
     @action
-    presExpandDocumentClick = () => (this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton);
+    presExpandDocumentClick = () => (this.rootDoc.presentation_expandInlineButton = !this.rootDoc.presentation_expandInlineButton);
 
     embedHeight = (): number => this.collapsedHeight + this.expandViewHeight;
     // embedWidth = () => this.props.PanelWidth();
@@ -94,7 +94,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
      * presentation element.
      */
     @computed get renderEmbeddedInline() {
-        return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? null : (
+        return !this.rootDoc.presentation_expandInlineButton || !this.targetDoc ? null : (
             <div className="presItem-embedded" style={{ height: this.embedHeight(), width: '50%' }}>
                 <DocumentView
                     Document={PresBox.targetRenderedDoc(this.rootDoc)}
@@ -158,9 +158,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @computed get transition() {
         let transitionInS: number;
-        if (this.rootDoc.presTransition) transitionInS = NumCast(this.rootDoc.presTransition) / 1000;
+        if (this.rootDoc.presentation_transition) transitionInS = NumCast(this.rootDoc.presentation_transition) / 1000;
         else transitionInS = 0.5;
-        return this.rootDoc.presMovement === PresMovement.Jump || this.rootDoc.presMovement === PresMovement.None ? null : 'M: ' + transitionInS + 's';
+        return this.rootDoc.presentation_movement === PresMovement.Jump || this.rootDoc.presentation_movement === PresMovement.None ? null : 'M: ' + transitionInS + 's';
     }
 
     private _itemRef: React.RefObject<HTMLDivElement> = React.createRef();
@@ -238,7 +238,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     onPointerMove = (e: PointerEvent) => {
         const slide = this._itemRef.current!;
-        const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentationTargetDoc);
+        const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentation_targetDoc);
         if (slide && dragIsPresItem) {
             const rect = slide.getBoundingClientRect();
             const y = e.clientY - rect.top; //y position within the element.
@@ -296,12 +296,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     updateCapturedContainerLayout = (presTargetDoc: Doc, activeItem: Doc) => {
         const targetDoc = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc;
-        activeItem.presX = NumCast(targetDoc.x);
-        activeItem.presY = NumCast(targetDoc.y);
-        activeItem.presRotation = NumCast(targetDoc.rotation);
-        activeItem.presWidth = NumCast(targetDoc.width);
-        activeItem.presHeight = NumCast(targetDoc.height);
-        activeItem.presPinLayout = true;
+        activeItem.config_x = NumCast(targetDoc.x);
+        activeItem.config_y = NumCast(targetDoc.y);
+        activeItem.config_rotation = NumCast(targetDoc.rotation);
+        activeItem.config_width = NumCast(targetDoc.width);
+        activeItem.config_height = NumCast(targetDoc.height);
+        activeItem.config_pinLayout = true;
     };
     /**
      * Method called for updating the view of the currently selected document
@@ -421,7 +421,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 <div
                     className="slideButton"
                     onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedContainerLayout(targetDoc, activeItem), true)}
-                    style={{ opacity: activeItem.presPinLayout ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
+                    style={{ opacity: activeItem.config_pinLayout ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
                     L
                 </div>
             </Tooltip>
@@ -431,7 +431,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 <div
                     className="slideButton"
                     onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedViewContents(targetDoc, activeItem))}
-                    style={{ opacity: activeItem.presPinData || activeItem.presPinView ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
+                    style={{ opacity: activeItem.config_pinData || activeItem.config_pinView ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
                     C
                 </div>
             </Tooltip>
@@ -445,19 +445,29 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
         if (this.indexInPres !== 0) {
             items.push(
-                <Tooltip key="arrow" title={<div className="dash-tooltip">{activeItem.groupWithUp ? 'Ungroup' : 'Group with up'}</div>}>
+                <Tooltip
+                    key="arrow"
+                    title={
+                        <div className="dash-tooltip">
+                            {!activeItem.presentation_groupWithUp
+                                ? 'Not grouped with previous slide (click to group)'
+                                : activeItem.presentation_groupWithUp === 1
+                                ? 'Run simultaneously with previous slide (click again to run after)'
+                                : 'Run after previous slide (click to ungroup from previous)'}
+                        </div>
+                    }>
                     <div
                         className="slideButton"
-                        onClick={() => (activeItem.groupWithUp = (NumCast(activeItem.groupWithUp) + 1) % 3)}
+                        onClick={() => (activeItem.presentation_groupWithUp = (NumCast(activeItem.presentation_groupWithUp) + 1) % 3)}
                         style={{
                             zIndex: 1000 - this.indexInPres,
                             fontWeight: 700,
-                            backgroundColor: activeItem.groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
-                            outline: NumCast(activeItem.groupWithUp) > 1 ? 'solid black 1px' : undefined,
-                            height: activeItem.groupWithUp ? 53 : 18,
-                            transform: activeItem.groupWithUp ? 'translate(0, -17px)' : undefined,
+                            backgroundColor: activeItem.presentation_groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
+                            outline: NumCast(activeItem.presentation_groupWithUp) > 1 ? 'solid black 1px' : undefined,
+                            height: activeItem.presentation_groupWithUp ? 53 : 18,
+                            transform: activeItem.presentation_groupWithUp ? 'translate(0, -17px)' : undefined,
                         }}>
-                        <div style={{ transform: activeItem.groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}>
+                        <div style={{ transform: activeItem.presentation_groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}>
                             <FontAwesomeIcon icon={'arrow-up'} onPointerDown={e => e.stopPropagation()} />
                         </div>
                     </div>
@@ -465,14 +475,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
             );
         }
         items.push(
-            <Tooltip key="eye" title={<div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? 'Minimize' : 'Expand'}</div>}>
+            <Tooltip key="eye" title={<div className="dash-tooltip">{this.rootDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}</div>}>
                 <div
                     className="slideButton"
                     onClick={e => {
                         e.stopPropagation();
                         this.presExpandDocumentClick();
                     }}>
-                    <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
+                    <FontAwesomeIcon icon={this.rootDoc.presentation_expandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
                 </div>
             </Tooltip>
         );
@@ -534,7 +544,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             style={{
                                 display: 'inline-flex',
                                 pointerEvents: isSelected ? undefined : 'none',
-                                width: `calc(100% ${this.rootDoc.presExpandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`,
+                                width: `calc(100% ${this.rootDoc.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`,
                                 cursor: isSelected ? 'text' : 'grab',
                             }}>
                             <div