Merge branch 'master' into collaboration-sarah

57 files changed, 6246 insertions, 1667 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 68fb19208..6558d215a 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -76,7 +76,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return DateCast(this.dataDoc[this.fieldKey + '-recordingStart'])?.date.getTime();
     }
     @computed get rawDuration() {
-        return NumCast(this.dataDoc[`${this.fieldKey}-duration`]);
+        return NumCast(this.dataDoc[`${this.fieldKey}_duration`]);
     } // bcz: shouldn't be needed since it's computed from audio element
     // mehek: not 100% sure but i think due to the order in which things are loaded this is necessary ^^
     // if you get rid of it and set the value to 0 the timeline and waveform will set their bounds incorrectly
@@ -123,12 +123,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
 
     getLinkData(l: Doc) {
-        let la1 = l.anchor1 as Doc;
-        let la2 = l.anchor2 as Doc;
+        let la1 = l.link_anchor_1 as Doc;
+        let la2 = l.link_anchor_2 as Doc;
         const linkTime = this.timeline?.anchorStart(la2) || this.timeline?.anchorStart(la1) || 0;
         if (Doc.AreProtosEqual(la1, this.dataDoc)) {
-            la1 = l.anchor2 as Doc;
-            la2 = l.anchor1 as Doc;
+            la1 = l.link_anchor_2 as Doc;
+            la2 = l.link_anchor_1 as Doc;
         }
         return { la1, la2, linkTime };
     }
@@ -139,7 +139,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this.rootDoc,
                 this.dataDoc,
                 this.annotationKey,
-                this._ele?.currentTime || Cast(this.props.Document._currentTimecode, 'number', null) || (this.mediaState === media_state.Recording ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined),
+                this._ele?.currentTime || Cast(this.props.Document._layout_currentTimecode, 'number', null) || (this.mediaState === media_state.Recording ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined),
                 undefined,
                 undefined,
                 addAsAnnotation
@@ -155,12 +155,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             this.links
                 .map(l => this.getLinkData(l))
                 .forEach(({ la1, la2, linkTime }) => {
-                    if (linkTime > NumCast(this.layoutDoc._currentTimecode) && linkTime < this._ele!.currentTime) {
+                    if (linkTime > NumCast(this.layoutDoc._layout_currentTimecode) && linkTime < this._ele!.currentTime) {
                         Doc.linkFollowHighlight(la1);
                     }
                 });
-            this.layoutDoc._currentTimecode = this._ele.currentTime;
-            this.timeline?.scrollToTime(NumCast(this.layoutDoc._currentTimecode));
+            this.layoutDoc._layout_currentTimecode = this._ele.currentTime;
+            this.timeline?.scrollToTime(NumCast(this.layoutDoc._layout_currentTimecode));
         }
     };
 
@@ -221,7 +221,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         if (this.mediaState === media_state.Recording) {
             setTimeout(this.updateRecordTime, 30);
             if (!this._paused) {
-                this.layoutDoc._currentTimecode = (new Date().getTime() - this._recordStart - this._pausedTime) / 1000;
+                this.layoutDoc._layout_currentTimecode = (new Date().getTime() - this._recordStart - this._pausedTime) / 1000;
             }
         }
     };
@@ -233,7 +233,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this.dataDoc[this.fieldKey + '-recordingStart'] = new DateField();
         DocUtils.ActiveRecordings.push(this);
         this._recorder.ondataavailable = async (e: any) => {
-            const [{ result }] = await Networking.UploadFilesToServer(e.data);
+            const [{ result }] = await Networking.UploadFilesToServer({file: e.data});
             if (!(result instanceof Error)) {
                 this.props.Document[this.fieldKey] = new AudioField(result.accessPaths.agnostic.client);
             }
@@ -253,7 +253,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             this._recorder = undefined;
             const now = new Date().getTime();
             this._paused && (this._pausedTime += now - this._pauseStart);
-            this.dataDoc[this.fieldKey + '-duration'] = (now - this._recordStart - this._pausedTime) / 1000;
+            this.dataDoc[this.fieldKey + '_duration'] = (now - this._recordStart - this._pausedTime) / 1000;
             this.mediaState = media_state.Paused;
             this._stream?.getAudioTracks()[0].stop();
             const ind = DocUtils.ActiveRecordings.indexOf(this);
@@ -362,10 +362,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 Doc.GetProto(newDoc).recordingSource = this.dataDoc;
                 Doc.GetProto(newDoc).recordingStart = ComputedField.MakeFunction(`self.recordingSource["${this.fieldKey}-recordingStart"]`);
                 Doc.GetProto(newDoc).mediaState = ComputedField.MakeFunction('self.recordingSource.mediaState');
-                if (DocListCast(Doc.MyOverlayDocs?.data).includes(this.rootDoc)) {
+                if (Doc.IsInMyOverlay(this.rootDoc)) {
                     newDoc.overlayX = this.rootDoc.x;
                     newDoc.overlayY = NumCast(this.rootDoc.y) + NumCast(this.rootDoc._height);
-                    Doc.AddDocToList(Doc.MyOverlayDocs, undefined, newDoc);
+                    Doc.AddToMyOverlay(newDoc);
                 } else {
                     this.props.addDocument?.(newDoc);
                 }
@@ -422,11 +422,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             if (!this.layoutDoc.dontAutoPlayFollowedLinks) {
                 this.playFrom(this.timeline?.anchorStart(link) || 0, this.timeline?.anchorEnd(link));
             } else {
-                this._ele!.currentTime = this.layoutDoc._currentTimecode = this.timeline?.anchorStart(link) || 0;
+                this._ele!.currentTime = this.layoutDoc._layout_currentTimecode = this.timeline?.anchorStart(link) || 0;
             }
         } else {
             this.links
-                .filter(l => l.anchor1 === link || l.anchor2 === link)
+                .filter(l => l.link_anchor_1 === link || l.link_anchor_2 === link)
                 .forEach(l => {
                     const { la1, la2 } = this.getLinkData(l);
                     const startTime = this.timeline?.anchorStart(la1) || this.timeline?.anchorStart(la2);
@@ -435,7 +435,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         if (!this.layoutDoc.dontAutoPlayFollowedLinks) {
                             this.playFrom(startTime, endTime);
                         } else {
-                            this._ele!.currentTime = this.layoutDoc._currentTimecode = startTime;
+                            this._ele!.currentTime = this.layoutDoc._layout_currentTimecode = startTime;
                         }
                     }
                 });
@@ -447,7 +447,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     timelineScreenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -AudioBox.topControlsHeight);
 
-    setPlayheadTime = (time: number) => (this._ele!.currentTime = this.layoutDoc._currentTimecode = time);
+    setPlayheadTime = (time: number) => (this._ele!.currentTime /*= this.layoutDoc._layout_currentTimecode*/ = time);
 
     playing = () => this.mediaState === media_state.Playing;
 
@@ -547,7 +547,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         <div className="record-button" onPointerDown={this._paused ? this.recordPlay : this.recordPause}>
                             <FontAwesomeIcon size="2x" icon={this._paused ? 'play' : 'pause'} />
                         </div>
-                        <div className="record-timecode">{formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))}</div>
+                        <div className="record-timecode">{formatTime(Math.round(NumCast(this.layoutDoc._layout_currentTimecode)))}</div>
                     </div>
                 ) : (
                     <div className="audiobox-start-record" onPointerDown={this.Record}>
@@ -623,7 +623,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 {this.audio}
 
                 <div className="audiobox-timecodes">
-                    <div className="timecode-current">{this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))}</div>
+                    <div className="timecode-current">{this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._layout_currentTimecode) - NumCast(this.timeline.clipStart)))}</div>
                     {this.miniPlayer ? (
                         <div>/</div>
                     ) : (
@@ -656,6 +656,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 ref={action((r: any) => (this._stackedTimeline = r))}
                 {...this.props}
                 CollectionFreeFormDocumentView={undefined}
+                dataFieldKey={this.fieldKey}
                 fieldKey={this.annotationKey}
                 dictationKey={this.fieldKey + '-dictation'}
                 mediaPath={this.path}
@@ -689,7 +690,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             <audio
                 ref={this.setRef}
                 className={`audiobox-control${this.props.isContentActive() ? '-interactive' : ''}`}
-                onLoadedData={action(e => this._ele?.duration && this._ele?.duration !== Infinity && (this.dataDoc[this.fieldKey + '-duration'] = this._ele.duration))}>
+                onLoadedData={action(e => this._ele?.duration && this._ele?.duration !== Infinity && (this.dataDoc[this.fieldKey + '_duration'] = this._ele.duration))}>
                 <source src={this.path} type="audio/mpeg" />
                 Not supported.
             </audio>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a8c8a0d2e..6710cee63 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -12,12 +12,11 @@ import { SelectionManager } from '../../util/SelectionManager';
 import { Transform } from '../../util/Transform';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
 import { DocComponent } from '../DocComponent';
+import { InkingStroke } from '../InkingStroke';
 import { StyleProp } from '../StyleProvider';
 import './CollectionFreeFormDocumentView.scss';
 import { DocumentView, DocumentViewProps, OpenWhere } from './DocumentView';
 import React = require('react');
-import { DocumentType } from '../../documents/DocumentTypes';
-import { InkingStroke } from '../InkingStroke';
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
     dataProvider?: (doc: Doc, replica: string) => { x: number; y: number; zIndex?: number; rotation?: number; color?: string; backgroundColor?: string; opacity?: number; highlight?: boolean; z: number; transition?: string } | undefined;
@@ -37,13 +36,13 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         { key: 'x' },
         { key: 'y' },
         { key: '_rotation', val: 0 },
-        { key: '_scrollTop' },
+        { key: '_layout_scrollTop' },
         { key: 'opacity', val: 1 },
         { key: '_currentFrame' },
-        { key: 'viewScale', val: 1 },
-        { key: 'viewScale', val: 1 },
-        { key: 'panX' },
-        { key: 'panY' },
+        { key: 'freeform_scale', val: 1 },
+        { key: 'freeform_scale', val: 1 },
+        { key: 'freeform_panX' },
+        { key: 'freeform_panY' },
     ]; // fields that are configured to be animatable using animation frames
     public static animStringFields = ['backgroundColor', 'color', 'fillColor']; // fields that are configured to be animatable using animation frames
     public static animDataFields = (doc: Doc) => (Doc.LayoutFieldKey(doc) ? [Doc.LayoutFieldKey(doc)] : []); // fields that are configured to be animatable using animation frames
@@ -155,8 +154,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             CollectionFreeFormDocumentView.animStringFields.forEach(val => (doc[val] = ComputedField.MakeInterpolatedString(val, 'activeFrame', doc, currTimecode)));
             CollectionFreeFormDocumentView.animDataFields(doc).forEach(val => (doc[val] = ComputedField.MakeInterpolatedDataField(val, 'activeFrame', doc, currTimecode)));
             const targetDoc = doc; // data fields, like rtf 'text' exist on the data doc, so
-            //doc !== targetDoc && (targetDoc.context = doc.context); // the computed fields don't see the layout doc -- need to copy the context to the data doc (HACK!!!) and set the activeFrame on the data doc (HACK!!!)
-            targetDoc.activeFrame = ComputedField.MakeFunction('self.context?._currentFrame||0');
+            //doc !== targetDoc && (targetDoc.embedContainer = doc.embedContainer); // the computed fields don't see the layout doc -- need to copy the embedContainer to the data doc (HACK!!!) and set the activeFrame on the data doc (HACK!!!)
+            targetDoc.activeFrame = ComputedField.MakeFunction('self.embedContainer?._currentFrame||0');
             targetDoc.dataTransition = 'inherit';
         });
     }
@@ -203,7 +202,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             PanelWidth: this.panelWidth,
             PanelHeight: this.panelHeight,
         };
-        const isInk = StrCast(this.layoutDoc.layout).includes(InkingStroke.name) && !this.props.LayoutTemplateString && !this.layoutDoc._isInkMask;
+        const isInk = StrCast(this.layoutDoc.layout).includes(InkingStroke.name) && !this.props.LayoutTemplateString && !this.layoutDoc._stroke_isInkMask;
         return (
             <div
                 className="collectionFreeFormDocumentView-container"
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 70ba7e182..aae759702 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -2,7 +2,8 @@ import React = require('react');
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
-import { Doc, HeightSym, WidthSym } from '../../../fields/Doc';
+import { Doc } from '../../../fields/Doc';
+import { Height, Width } from '../../../fields/DocSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { StrCast } from '../../../fields/Types';
 import { DocumentType } from '../../documents/DocumentTypes';
@@ -48,7 +49,7 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     render() {
-        const scaling = Math.min(this.layoutDoc.fitWidth ? 10000 : this.props.PanelHeight() / this.rootDoc[HeightSym](), this.props.PanelWidth() / this.rootDoc[WidthSym]());
+        const scaling = Math.min(this.layoutDoc.layout_fitWidth ? 10000 : this.props.PanelHeight() / this.rootDoc[Height](), this.props.PanelWidth() / this.rootDoc[Width]());
         return (
             <div
                 className={`colorBox-container${this.props.isContentActive() ? '-interactive' : ''}`}
@@ -72,7 +73,7 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             SetActiveInkWidth(e.target.value);
                             SelectionManager.Views()
                                 .filter(i => StrCast(i.rootDoc.type) === DocumentType.INK)
-                                .map(i => (i.rootDoc.strokeWidth = Number(e.target.value)));
+                                .map(i => (i.rootDoc.stroke_width = Number(e.target.value)));
                         }}
                     />
                 </div>
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index ace388c57..1cc09a63c 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, Opt } from '../../../fields/Doc';
 import { Cast, NumCast, StrCast } from '../../../fields/Types';
@@ -26,6 +26,13 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
 
     @observable _animating = '';
 
+    @computed get clipWidth() {
+        return NumCast(this.layoutDoc[this.clipWidthKey], 50);
+    }
+    get clipWidthKey() {
+        return '_' + this.props.fieldKey + '_clipWidth';
+    }
+
     componentDidMount() {
         this.props.setContentView?.(this);
     }
@@ -34,18 +41,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         this._disposers[disposerId]?.();
         if (ele) {
             // create disposers identified by disposerId to remove drag & drop listeners
-            this._disposers[disposerId] = DragManager.MakeDropTarget(ele, (e, dropEvent) => this.dropHandler(e, dropEvent, fieldKey), this.layoutDoc);
+            this._disposers[disposerId] = DragManager.MakeDropTarget(ele, (e, dropEvent) => this.internalDrop(e, dropEvent, fieldKey), this.layoutDoc);
         }
     };
 
     @undoBatch
-    private dropHandler = (event: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => {
+    private internalDrop = (event: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => {
         if (dropEvent.complete.docDragData) {
             event.stopPropagation(); // prevent parent Doc from registering new position so that it snaps back into place
             const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments;
-            if (droppedDocs?.length) {
-                this.dataDoc[fieldKey] = droppedDocs[0];
-            }
+            droppedDocs.lastElement().embedContainer = this.dataDoc;
+            this.dataDoc[fieldKey] = droppedDocs.lastElement();
         }
     };
 
@@ -59,7 +65,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                 action(() => {
                     // on click, animate slider movement to the targetWidth
                     this._animating = 'all 200ms';
-                    this.layoutDoc._clipWidth = (targetWidth * 100) / this.props.PanelWidth();
+                    this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this.props.PanelWidth();
                     setTimeout(
                         action(() => (this._animating = '')),
                         200
@@ -71,15 +77,20 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
 
     @action
     private onPointerMove = ({ movementX }: PointerEvent) => {
-        const width = movementX * this.props.ScreenToLocalTransform().Scale + (NumCast(this.layoutDoc._clipWidth) / 100) * this.props.PanelWidth();
+        const width = movementX * this.props.ScreenToLocalTransform().Scale + (this.clipWidth / 100) * this.props.PanelWidth();
         if (width && width > 5 && width < this.props.PanelWidth()) {
-            this.layoutDoc._clipWidth = (width * 100) / this.props.PanelWidth();
+            this.layoutDoc[this.clipWidthKey] = (width * 100) / this.props.PanelWidth();
         }
         return false;
     };
 
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
-        const anchor = Docs.Create.ImageanchorDocument({ title: 'ImgAnchor:' + this.rootDoc.title, presTransition: 1000, unrendered: true, annotationOn: this.rootDoc });
+        const anchor = Docs.Create.ComparisonConfigDocument({
+            title: 'ImgAnchor:' + this.rootDoc.title,
+            // set presentation timing properties for restoring view
+            presTransition: 1000,
+            annotationOn: this.rootDoc,
+        });
         if (anchor) {
             if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
             /* addAsAnnotation &&*/ this.addDocument(anchor);
@@ -101,7 +112,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
     };
 
     render() {
-        const clipWidth = NumCast(this.layoutDoc._clipWidth) + '%';
         const clearButton = (which: string) => {
             return (
                 <div
@@ -119,9 +129,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
             return whichDoc ? (
                 <>
                     <DocumentView
-                        ref={r => {
-                            //whichDoc !== targetDoc && r?.focus(whichDoc, { instant: true });
-                        }}
                         {...this.props}
                         NativeWidth={returnZero}
                         NativeHeight={returnZero}
@@ -143,7 +150,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         };
         const displayBox = (which: string, index: number, cover: number) => {
             return (
-                <div className={`${which}Box-cont`} key={which} style={{ width: this.props.PanelWidth() }} onPointerDown={e => this.registerSliding(e, cover)} ref={ele => this.createDropTarget(ele, which, index)}>
+                <div className={`${index === 0 ? 'before' : 'after'}Box-cont`} key={which} style={{ width: this.props.PanelWidth() }} onPointerDown={e => this.registerSliding(e, cover)} ref={ele => this.createDropTarget(ele, which, index)}>
                     {displayDoc(which)}
                 </div>
             );
@@ -151,16 +158,16 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
 
         return (
             <div className={`comparisonBox${this.props.isContentActive() || SnappingManager.GetIsDragging() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
-                {displayBox(this.fieldKey === 'data' ? 'compareBox-after' : `${this.fieldKey}2`, 1, this.props.PanelWidth() - 3)}
-                <div className="clip-div" style={{ width: clipWidth, transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
-                    {displayBox(this.fieldKey === 'data' ? 'compareBox-before' : `${this.fieldKey}1`, 0, 0)}
+                {displayBox(`${this.fieldKey}_2`, 1, this.props.PanelWidth() - 3)}
+                <div className="clip-div" style={{ width: this.clipWidth + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
+                    {displayBox(`${this.fieldKey}_1`, 0, 0)}
                 </div>
 
                 <div
                     className="slide-bar"
                     style={{
-                        left: `calc(${clipWidth} - 0.5px)`,
-                        cursor: NumCast(this.layoutDoc._clipWidth) < 5 ? 'e-resize' : NumCast(this.layoutDoc._clipWidth) / 100 > (this.props.PanelWidth() - 5) / this.props.PanelWidth() ? 'w-resize' : undefined,
+                        left: `calc(${this.clipWidth + '%'} - 0.5px)`,
+                        cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this.props.PanelWidth() - 5) / this.props.PanelWidth() ? 'w-resize' : undefined,
                     }}
                     onPointerDown={e => this.registerSliding(e, this.props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
                 >
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index eb25d3264..baa45e278 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
-import { Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { Cast, CsvCast, NumCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
 import { Docs } from '../../../documents/Documents';
 import { ViewBoxAnnotatableComponent } from '../../DocComponent';
@@ -29,7 +29,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     // @observable private pairs: { [key: string]: FieldResult }[] = [];
     static pairSet = new ObservableMap<string, { [key: string]: string }[]>();
     @computed.struct get pairs() {
-        return DataVizBox.pairSet.get(StrCast(this.rootDoc.fileUpload));
+        return DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
     }
     private _chartRenderer: LineChart | undefined;
     // // another way would be store a schema that defines the type of data we are expecting from an imported doc
@@ -61,7 +61,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @action
     restoreView = (data: Doc) => {
         const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
-        const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._dataVizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
+        const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
         const func = () => this._chartRenderer?.restoreView(data);
         if (changedView || changedAxes) {
             setTimeout(func, 100);
@@ -73,8 +73,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
         const anchor =
             this._chartRenderer?.getAnchor(pinProps) ??
-            Docs.Create.TextanchorDocument({
-                unrendered: true,
+            Docs.Create.DataVizConfigDocument({
                 // when we clear selection -> we should have it so chartBox getAnchor returns undefined
                 // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
                 /*put in some options*/
@@ -88,14 +87,14 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     @computed.struct get axes() {
-        return StrListCast(this.layoutDoc.dataVizAxes);
+        return StrListCast(this.layoutDoc.data_vizAxes);
     }
-    selectAxes = (axes: string[]) => (this.layoutDoc.dataVizAxes = new List<string>(axes));
+    selectAxes = (axes: string[]) => (this.layoutDoc.data_vizAxes = new List<string>(axes));
 
     @computed get selectView() {
         const width = this.props.PanelWidth() * 0.9;
         const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
-        const margin = { top: 10, right: 25, bottom: 50, left:25};
+        const margin = { top: 10, right: 25, bottom: 50, left: 25 };
         if (!this.pairs) return 'no data';
         // prettier-ignore
         switch (this.dataVizView) {
@@ -113,10 +112,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
 
     fetchData() {
-        if (DataVizBox.pairSet.has(StrCast(this.rootDoc.fileUpload))) return;
-        DataVizBox.pairSet.set(StrCast(this.rootDoc.fileUpload), []);
+        if (DataVizBox.pairSet.has(CsvCast(this.rootDoc[this.fieldKey]).url.href)) return;
+        DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, []);
         fetch('/csvData?uri=' + this.dataUrl?.url.href) //
-            .then(res => res.json().then(action(res => !res.errno && DataVizBox.pairSet.set(StrCast(this.rootDoc.fileUpload), res))));
+            .then(res => res.json().then(action(res => !res.errno && DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res))));
     }
 
     // handle changing the view using a button
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 777bf2f66..661061d51 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -56,8 +56,8 @@ export class LineChart extends React.Component<LineChartProps> {
     }
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
-            .filter(link => link.anchor1 !== this.props.rootDoc) // get links where this chart doc is the target of the link
-            .map(link => DocCast(link.anchor1)); // then return the source of the link
+            .filter(link => link.link_anchor_1 !== this.props.rootDoc) // get links where this chart doc is the target of the link
+            .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
     }
     @computed get incomingSelected() {
         return this.incomingLinks // all links that are pointing to this node
@@ -87,7 +87,7 @@ export class LineChart extends React.Component<LineChartProps> {
             { fireImmediately: true }
         );
         this._disposers.annos = reaction(
-            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '-annotations']),
+            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
             annotations => {
                 // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
                 // could be blue colored to make it look like anchor
@@ -123,7 +123,7 @@ export class LineChart extends React.Component<LineChartProps> {
             element.classList.remove('selected');
         }
     };
-    // gets called whenever the "data-annotations" fields gets updated
+    // gets called whenever the "data_annotations" fields gets updated
     drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
         // TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements
         // loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY
@@ -163,7 +163,10 @@ export class LineChart extends React.Component<LineChartProps> {
 
     // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
     getAnchor = (pinProps?: PinProps) => {
-        const anchor = Docs.Create.TextanchorDocument({ title: 'line doc selection' + this._currSelected?.x, unrendered: true });
+        const anchor = Docs.Create.LineChartConfigDocument({
+            //
+            title: 'line doc selection' + this._currSelected?.x,
+        });
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc);
         anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined;
         return anchor;
@@ -228,15 +231,15 @@ export class LineChart extends React.Component<LineChartProps> {
 
         // creating the x and y scales
         const xScale = scaleCreatorNumerical(xMin, xMax, 0, width);
-        const yScale = scaleCreatorNumerical(0, yMax,height, 0);
+        const yScale = scaleCreatorNumerical(0, yMax, height, 0);
 
         // adding svg
         const margin = this.props.margin;
         const svg = (this._lineChartSvg = d3
             .select(this._lineChartRef.current)
             .append('svg')
-            .attr('width', `${width +margin.left + margin.right}`)
-            .attr('height', `${height + margin.top + margin.bottom }`)
+            .attr('width', `${width + margin.left + margin.right}`)
+            .attr('height', `${height + margin.top + margin.bottom}`)
             .append('g')
             .attr('transform', `translate(${margin.left}, ${margin.top})`));
 
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 0d69ac890..d84e34d52 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,7 +1,7 @@
 import { action, computed } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { AnimationSym, Doc } from '../../../../../fields/Doc';
+import { Doc } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
 import { List } from '../../../../../fields/List';
 import { emptyFunction, returnFalse, setupMoveUpEvents, Utils } from '../../../../../Utils';
@@ -47,17 +47,17 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                     e => {
                                                         const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
                                                         const targetCreator = (annotationOn: Doc | undefined) => {
-                                                            const alias = Doc.MakeAlias(this.props.docView?.()!.rootDoc!);
-                                                            alias._dataVizView = DataVizView.LINECHART;
-                                                            alias._dataVizAxes = new List<string>([col, col]);
-                                                            alias.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
-                                                            return alias;
+                                                            const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
+                                                            embedding._dataVizView = DataVizView.LINECHART;
+                                                            embedding._data_vizAxes = new List<string>([col, col]);
+                                                            embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
+                                                            return embedding;
                                                         };
                                                         if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
                                                             DragManager.StartAnchorAnnoDrag([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
                                                                 dragComplete: e => {
                                                                     if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
-                                                                        e.linkDocument.linkDisplay = true;
+                                                                        e.linkDocument.link_displayLine = true;
                                                                         // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
                                                                         // e.annoDragData.linkSourceDoc.followLinkZoom = false;
                                                                     }
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 76a5ce7b3..e954d0484 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -1,6 +1,7 @@
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
-import { AclPrivate, Doc, Opt } from '../../../fields/Doc';
+import { Doc, Opt } from '../../../fields/Doc';
+import { AclPrivate } from '../../../fields/DocSymbols';
 import { ScriptField } from '../../../fields/ScriptField';
 import { Cast, StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
@@ -35,6 +36,7 @@ import { LinkBox } from './LinkBox';
 import { LoadingBox } from './LoadingBox';
 import { MapBox } from './MapBox/MapBox';
 import { PDFBox } from './PDFBox';
+import { PhysicsSimulationBox } from './PhysicsBox/PhysicsSimulationBox';
 import { RecordingBox } from './RecordingBox';
 import { ScreenshotBox } from './ScreenshotBox';
 import { ScriptingBox } from './ScriptingBox';
@@ -120,15 +122,15 @@ export class DocumentContentsView extends React.Component<
         select: (ctrl: boolean) => void;
         NativeDimScaling?: () => number;
         setHeight?: (height: number) => void;
-        layoutKey: string;
+        layout_fieldKey: string;
     }
 > {
     @computed get layout(): string {
         TraceMobx();
         if (this.props.LayoutTemplateString) return this.props.LayoutTemplateString;
         if (!this.layoutDoc) return '<p>awaiting layout</p>';
-        if (this.props.layoutKey === 'layout_keyValue') return StrCast(this.props.Document.layout_keyValue, KeyValueBox.LayoutString());
-        const layout = Cast(this.layoutDoc[this.layoutDoc === this.props.Document && this.props.layoutKey ? this.props.layoutKey : StrCast(this.layoutDoc.layoutKey, 'layout')], 'string');
+        if (this.props.layout_fieldKey === 'layout_keyValue') return StrCast(this.props.Document.layout_keyValue, KeyValueBox.LayoutString());
+        const layout = Cast(this.layoutDoc[this.layoutDoc === this.props.Document && this.props.layout_fieldKey ? this.props.layout_fieldKey : StrCast(this.layoutDoc.layout_fieldKey, 'layout')], 'string');
         if (layout === undefined) return this.props.Document.data ? "<FieldView {...props} fieldKey='data' />" : KeyValueBox.LayoutString();
         if (typeof layout === 'string') return layout;
         return '<p>Loading layout</p>';
@@ -140,12 +142,12 @@ export class DocumentContentsView extends React.Component<
     }
     get layoutDoc() {
         // bcz: replaced this with below : is it correct?  change was made to accommodate passing fieldKey's from a layout script
-        // const template: Doc = this.props.LayoutTemplate?.() || Doc.Layout(this.props.Document, this.props.layoutKey ? Cast(this.props.Document[this.props.layoutKey], Doc, null) : undefined);
+        // const template: Doc = this.props.LayoutTemplate?.() || Doc.Layout(this.props.Document, this.props.layout_fieldKey ? Cast(this.props.Document[this.props.layout_fieldKey], Doc, null) : undefined);
         const template: Doc =
             this.props.LayoutTemplate?.() ||
             (this.props.LayoutTemplateString && this.props.Document) ||
-            (this.props.layoutKey && StrCast(this.props.Document[this.props.layoutKey]) && this.props.Document) ||
-            Doc.Layout(this.props.Document, this.props.layoutKey ? Cast(this.props.Document[this.props.layoutKey], Doc, null) : undefined);
+            (this.props.layout_fieldKey && StrCast(this.props.Document[this.props.layout_fieldKey]) && this.props.Document) ||
+            Doc.Layout(this.props.Document, this.props.layout_fieldKey ? Cast(this.props.Document[this.props.layout_fieldKey], Doc, null) : undefined);
         return Doc.expandTemplateLayout(template, this.props.Document);
     }
 
@@ -265,6 +267,7 @@ export class DocumentContentsView extends React.Component<
                     HTMLtag,
                     ComparisonBox,
                     LoadingBox,
+                    PhysicsSimulationBox,
                     SchemaRowBox,
                 }}
                 bindings={bindings}
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index 56de2d1fc..6e2ed72b8 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -1,23 +1,39 @@
-
-import { observer } from "mobx-react";
-import * as React from "react";
-import { DocumentView } from "./DocumentView";
-import { DocumentManager } from "../../util/DocumentManager";
-import { Transformer, ts } from "../../util/Scripting";
-import { Field } from "../../../fields/Doc";
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { DocumentView } from './DocumentView';
+import { DocumentManager } from '../../util/DocumentManager';
+import { Transformer, ts } from '../../util/Scripting';
+import { Field } from '../../../fields/Doc';
+import { Tooltip } from '@material-ui/core';
+import { action, observable } from 'mobx';
+import { Id } from '../../../fields/FieldSymbols';
+import { factory } from 'typescript';
+import { LightboxView } from '../LightboxView';
 
 @observer
-export class DocumentIcon extends React.Component<{ view: DocumentView, index: number }> {
+export class DocumentIcon extends React.Component<{ view: DocumentView; index: number }> {
+    @observable _hovered = false;
+    static get DocViews() {
+        return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.IsLightboxDocView(v.props.docViewPath())) : DocumentManager.Instance.DocumentViews;
+    }
     render() {
         const view = this.props.view;
         const { left, top, right, bottom } = view.getBounds() || { left: 0, top: 0, right: 0, bottom: 0 };
 
         return (
-            <div className="documentIcon-outerDiv" style={{
-                position: "absolute",
-                transform: `translate(${(left + right) / 2}px, ${top}px)`,
-            }}>
-                <p>d{this.props.index}</p>
+            <div
+                className="documentIcon-outerDiv"
+                onPointerEnter={action(e => (this._hovered = true))}
+                onPointerLeave={action(e => (this._hovered = false))}
+                style={{
+                    pointerEvents: 'all',
+                    opacity: this._hovered ? 0.3 : 1,
+                    position: 'absolute',
+                    transform: `translate(${(left + right) / 2}px, ${top}px)`,
+                }}>
+                <Tooltip title={<>{this.props.view.rootDoc.title}</>}>
+                    <p>d{this.props.index}</p>
+                </Tooltip>
             </div>
         );
     }
@@ -41,7 +57,9 @@ export class DocumentIconContainer extends React.Component {
                                 const match = node.text.match(/d([0-9]+)/);
                                 if (match) {
                                     const m = parseInt(match[1]);
+                                    const doc = DocumentIcon.DocViews[m].rootDoc;
                                     usedDocuments.add(m);
+                                    return factory.createIdentifier(`idToDoc("${doc[Id]}")`);
                                 }
                             }
                         }
@@ -52,14 +70,14 @@ export class DocumentIconContainer extends React.Component {
                 };
             },
             getVars() {
-                const docs = Array.from(DocumentManager.Instance.DocumentViews);
+                const docs = DocumentIcon.DocViews;
                 const capturedVariables: { [name: string]: Field } = {};
-                usedDocuments.forEach(index => capturedVariables[`d${index}`] = docs[index].props.Document);
-                return { capturedVariables };
-            }
+                usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].props.Document : `d${index}`));
+                return capturedVariables;
+            },
         };
     }
     render() {
-        return Array.from(DocumentManager.Instance.DocumentViews).map((dv, i) => <DocumentIcon key={i} index={i} view={dv} />);
+        return DocumentIcon.DocViews.map((dv, i) => <DocumentIcon key={i} index={i} view={dv} />);
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 47705d53d..7723a088d 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -9,7 +9,7 @@ import { DocUtils } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
 import { Hypothesis } from '../../util/HypothesisUtils';
 import { LinkManager } from '../../util/LinkManager';
-import { undoBatch, UndoManager } from '../../util/UndoManager';
+import { undoable, undoBatch, UndoManager } from '../../util/UndoManager';
 import './DocumentLinksButton.scss';
 import { DocumentView } from './DocumentView';
 import { LinkDescriptionPopup } from './LinkDescriptionPopup';
@@ -52,7 +52,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                         dragComplete: dropEv => {
                             if (this.props.View && dropEv.linkDocument) {
                                 // dropEv.linkDocument equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop
-                                !dropEv.linkDocument.linkRelationship && (Doc.GetProto(dropEv.linkDocument).linkRelationship = 'hyperlink');
+                                !dropEv.linkDocument.link_relationship && (Doc.GetProto(dropEv.linkDocument).link_relationship = 'hyperlink');
                             }
                             linkDrag?.end();
                         },
@@ -71,14 +71,15 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             e,
             this.onLinkButtonMoved,
             emptyFunction,
-            action((e, doubleTap) => doubleTap && DocumentView.showBackLinks(this.props.View.rootDoc)),
+            action((e, doubleTap) => {
+                doubleTap && DocumentView.showBackLinks(this.props.View.rootDoc);
+            }),
             undefined,
             undefined,
             action(() => (DocumentLinksButton.LinkEditorDocView = this.props.View))
         );
     };
 
-    @undoBatch
     onLinkButtonDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(
             this,
@@ -123,17 +124,14 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             e,
             returnFalse,
             emptyFunction,
-            undoBatch(
-                action(e => {
-                    DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View);
-                })
-            )
+            action(e => DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View))
         );
     };
 
-    public static finishLinkClick = undoBatch(
-        action((screenX: number, screenY: number, startLink: Doc, endLink: Doc, startIsAnnotation: boolean, endLinkView?: DocumentView, pinProps?: PinProps) => {
-            if (startLink === endLink) {
+    @undoBatch
+    public static finishLinkClick(screenX: number, screenY: number, startLink: Doc | undefined, endLink: Doc, startIsAnnotation: boolean, endLinkView?: DocumentView, pinProps?: PinProps) {
+        runInAction(() => {
+            if (startLink === endLink || !startLink) {
                 DocumentLinksButton.StartLink = undefined;
                 DocumentLinksButton.StartLinkView = undefined;
                 DocumentLinksButton.AnnotationId = undefined;
@@ -142,7 +140,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             } else if (startLink !== endLink) {
                 endLink = endLinkView?.docView?._componentView?.getAnchor?.(true, pinProps) || endLink;
                 startLink = DocumentLinksButton.StartLinkView?.docView?._componentView?.getAnchor?.(true) || startLink;
-                const linkDoc = DocUtils.MakeLink(startLink, endLink, { linkRelationship: DocumentLinksButton.AnnotationId ? 'hypothes.is annotation' : undefined });
+                const linkDoc = DocUtils.MakeLink(startLink, endLink, { link_relationship: DocumentLinksButton.AnnotationId ? 'hypothes.is annotation' : undefined });
 
                 LinkManager.currentLink = linkDoc;
 
@@ -185,8 +183,8 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     );
                 }
             }
-        })
-    );
+        });
+    }
 
     @action clearLinks() {
         DocumentLinksButton.StartLink = undefined;
@@ -195,9 +193,9 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
 
     @computed get filteredLinks() {
         const results = [] as Doc[];
-        const filters = this.props.View.props.docFilters();
+        const filters = this.props.View.props.childFilters();
         Array.from(new Set<Doc>(this.props.View.allLinks)).forEach(link => {
-            if (DocUtils.FilterDocs([link], filters, []).length || DocUtils.FilterDocs([link.anchor2 as Doc], filters, []).length || DocUtils.FilterDocs([link.anchor1 as Doc], filters, []).length) {
+            if (DocUtils.FilterDocs([link], filters, []).length || DocUtils.FilterDocs([link.link_anchor_2 as Doc], filters, []).length || DocUtils.FilterDocs([link.link_anchor_1 as Doc], filters, []).length) {
                 results.push(link);
             }
         });
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b61a468bd..a258de632 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -3,16 +3,18 @@ import { action, computed, IReactionDisposer, observable, reaction, runInAction
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal';
-import { AclPrivate, AnimationSym, DataSym, Doc, DocListCast, Field, Opt, StrListCast, WidthSym } from '../../../fields/Doc';
+import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc';
+import { AclPrivate, Animation, DocData, Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
+import { RefField } from '../../../fields/RefField';
 import { listSpec } from '../../../fields/Schema';
 import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { AudioField } from '../../../fields/URLField';
 import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
-import { emptyFunction, isTargetChildOf as isParentOf, lightOrDark, returnEmptyString, returnFalse, returnTrue, returnVal, simulateMouseClick, Utils } from '../../../Utils';
+import { emptyFunction, isTargetChildOf as isParentOf, lightOrDark, return18, returnEmptyString, returnFalse, returnTrue, returnVal, returnZero, simulateMouseClick, Utils } from '../../../Utils';
 import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils';
 import { DocServer } from '../../DocServer';
 import { Docs, DocUtils } from '../../documents/Documents';
@@ -35,8 +37,10 @@ import { ContextMenuProps } from '../ContextMenuItem';
 import { DocComponent } from '../DocComponent';
 import { EditableView } from '../EditableView';
 import { GestureOverlay } from '../GestureOverlay';
+import { InkingStroke } from '../InkingStroke';
 import { LightboxView } from '../LightboxView';
 import { StyleProp } from '../StyleProvider';
+import { UndoStack } from '../UndoStack';
 import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
 import { DocumentContentsView, ObserverJsxParser } from './DocumentContentsView';
 import { DocumentLinksButton } from './DocumentLinksButton';
@@ -47,7 +51,6 @@ import { LinkAnchorBox } from './LinkAnchorBox';
 import { PresEffect, PresEffectDirection } from './trails';
 import { PinProps, PresBox } from './trails/PresBox';
 import React = require('react');
-import { InkingStroke } from '../InkingStroke';
 const { Howl } = require('howler');
 
 interface Window {
@@ -114,6 +117,7 @@ export interface DocComponentView {
     brushView?: (view: { width: number; height: number; panX: number; panY: number }) => void;
     getView?: (doc: Doc) => Promise<Opt<DocumentView>>; // returns a nested DocumentView for the specified doc or undefined
     addDocTab?: (doc: Doc, where: OpenWhere) => boolean; // determines how to add a document - used in following links to open the target ina local lightbox
+    addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; // add a document (used only by collections)
     reverseNativeScaling?: () => boolean; // DocumentView's setup screenToLocal based on the doc having a nativeWidth/Height.  However, some content views (e.g., FreeFormView w/ fitContentsToBox set) may ignore the native dimensions so this flags the DocumentView to not do Nativre scaling.
     shrinkWrap?: () => void; // requests a document to display all of its contents with no white space.  currently only implemented (needed?) for freeform views
     select?: (ctrlKey: boolean, shiftKey: boolean) => void;
@@ -127,9 +131,10 @@ export interface DocComponentView {
     IsPlaying?: () => boolean; // is a media document playing
     TogglePause?: (keep?: boolean) => void; // toggle media document playing state
     setFocus?: () => void; // sets input focus to the componentView
+    setData?: (data: Field | Promise<RefField | undefined>) => boolean;
     componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null;
     incrementalRendering?: () => void;
-    fitWidth?: () => boolean; // whether the component always fits width (eg, KeyValueBox)
+    layout_fitWidth?: () => boolean; // whether the component always fits width (eg, KeyValueBox)
     overridePointerEvents?: () => 'all' | 'none' | undefined; // if the conmponent overrides the pointer events for the document
     fieldKey?: string;
     annotationKey?: string;
@@ -148,13 +153,14 @@ export interface DocumentViewSharedProps {
     Document: Doc;
     DataDoc?: Doc;
     contentBounds?: () => undefined | { x: number; y: number; r: number; b: number };
-    fitContentsToBox?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitContentsToBox property on a Document
+    fitContentsToBox?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _freeform_fitContentsToBox property on a Document
     suppressSetHeight?: boolean;
     thumbShown?: () => boolean;
     setContentView?: (view: DocComponentView) => any;
     CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
     PanelWidth: () => number;
     PanelHeight: () => number;
+    shouldNotScale?: () => boolean;
     docViewPath: () => DocumentView[];
     childHideDecorationTitle?: () => boolean;
     childHideResizeHandles?: () => boolean;
@@ -162,11 +168,11 @@ export interface DocumentViewSharedProps {
     styleProvider: Opt<StyleProviderFunc>;
     setTitleFocus?: () => void;
     focus: DocFocusFunc;
-    fitWidth?: (doc: Doc) => boolean | undefined;
-    docFilters: () => string[];
-    docRangeFilters: () => string[];
+    layout_fitWidth?: (doc: Doc) => boolean | undefined;
+    childFilters: () => string[];
+    childFiltersByRanges: () => string[];
     searchFilterDocs: () => Doc[];
-    showTitle?: () => string;
+    layout_showTitle?: () => string;
     whenChildContentsActiveChanged: (isActive: boolean) => void;
     rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected
     addDocTab: (doc: Doc, where: OpenWhere) => boolean;
@@ -187,7 +193,7 @@ export interface DocumentViewSharedProps {
     hideCaptions?: boolean;
     ignoreAutoHeight?: boolean;
     forceAutoHeight?: boolean;
-    disableDocBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over.
+    disableBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over.
     onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected
     enableDragWhenActive?: boolean;
     waitForDoubleClickToClick?: () => 'never' | 'always' | undefined;
@@ -273,7 +279,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     public get LayoutFieldKey() {
         return Doc.LayoutFieldKey(this.layoutDoc);
     }
-    @computed get ShowTitle() {
+    @computed get layout_showTitle() {
         return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as Opt<string>;
     }
     @computed get NativeDimScaling() {
@@ -303,7 +309,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @computed get headerMargin() {
         return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0;
     }
-    @computed get showCaption() {
+    @computed get layout_showCaption() {
         return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.ShowCaption) || 0;
     }
     @computed get titleHeight() {
@@ -313,7 +319,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.props.isSelected() ? ':selected' : ''));
     }
     @computed get finalLayoutKey() {
-        return StrCast(this.Document.layoutKey, 'layout');
+        return StrCast(this.Document.layout_fieldKey, 'layout');
     }
     @computed get nativeWidth() {
         return this.props.NativeWidth();
@@ -400,7 +406,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     defaultRestoreTargetView = (docView: DocumentView, anchor: Doc, focusSpeed: number, options: DocFocusOptions) => {
         const targetMatch =
             Doc.AreProtosEqual(anchor, this.rootDoc) || // anchor is this document, so anchor's properties apply to this document
-            (DocCast(anchor)?.unrendered && Doc.AreProtosEqual(DocCast(anchor.annotationOn), this.rootDoc)) // the anchor is an unrendered annotation on this document, so anchor properties apply to this document
+            (DocCast(anchor)?.layout_unrendered && Doc.AreProtosEqual(DocCast(anchor.annotationOn), this.rootDoc)) // the anchor is an layout_unrendered annotation on this document, so anchor properties apply to this document
                 ? true
                 : false;
         return targetMatch && PresBox.restoreTargetDocView(docView, anchor, focusSpeed) ? focusSpeed : undefined;
@@ -408,7 +414,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
     // switches text input focus to the title bar of the document (and displays the title bar if it hadn't been)
     setTitleFocus = () => {
-        if (!StrCast(this.layoutDoc._showTitle)) this.layoutDoc._showTitle = 'title';
+        if (!StrCast(this.layoutDoc._layout_showTitle)) this.layoutDoc._layout_showTitle = 'title';
         setTimeout(() => this._titleRef.current?.setIsFocused(true)); // use timeout in case title wasn't shown to allow re-render so that titleref will be defined
     };
 
@@ -434,7 +440,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                         }, console.log  );
                     UndoManager.RunInBatch(() => (func().result?.select === true ? this.props.select(false) : ''), 'on double click');
                 } else if (!Doc.IsSystem(this.rootDoc) && (defaultDblclick === undefined || defaultDblclick === 'default')) {
-                    UndoManager.RunInBatch(() => this.props.addDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap');
+                    UndoManager.RunInBatch(() => LightboxView.AddDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap');
                     SelectionManager.DeselectAll();
                     Doc.UnBrushDoc(this.props.Document);
                 } else {
@@ -454,27 +460,26 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                         // instead of in the global lightbox
                         const oldFunc = DocumentViewInternal.addDocTabFunc;
                         DocumentViewInternal.addDocTabFunc = this.props.addDocTab;
-                        const res =
-                            this.onClickHandler?.script.run(
-                                {
-                                    this: this.layoutDoc,
-                                    self: this.rootDoc,
-                                    _readOnly_: false,
-                                    scriptContext: this.props.scriptContext,
-                                    documentView: this.props.DocumentView(),
-                                    clientX,
-                                    clientY,
-                                    shiftKey,
-                                    altKey,
-                                    metaKey,
-                                },
-                                console.log
-                            ).result?.select === true
-                                ? this.props.select(false)
-                                : '';
+                        this.onClickHandler?.script.run(
+                            {
+                                this: this.layoutDoc,
+                                self: this.rootDoc,
+                                _readOnly_: false,
+                                scriptContext: this.props.scriptContext,
+                                documentView: this.props.DocumentView(),
+                                clientX,
+                                clientY,
+                                shiftKey,
+                                altKey,
+                                metaKey,
+                            },
+                            console.log
+                        ).result?.select === true
+                            ? this.props.select(false)
+                            : '';
                         DocumentViewInternal.addDocTabFunc = oldFunc;
                     };
-                    clickFunc = () => (this.props.Document.dontUndo ? func() : UndoManager.RunInBatch(func, 'on click'));
+                    clickFunc = () => (this.props.Document.dontUndo ? func() : UndoManager.RunInBatch(func, 'click ' + this.rootDoc.title));
                 } else {
                     // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTemplateForField implies we're clicking on part of a template instance and we want to select the whole template, not the part
                     if ((this.layoutDoc.onDragStart || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) {
@@ -488,7 +493,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 if ((clickFunc && waitFordblclick !== 'never') || waitFordblclick === 'always') {
                     this._doubleClickTimeout && clearTimeout(this._doubleClickTimeout);
                     this._doubleClickTimeout = setTimeout(this._singleClickFunc, 300);
-                } else {
+                } else if (!DocumentView.LongPress) {
                     this._singleClickFunc();
                     this._singleClickFunc = undefined;
                 }
@@ -500,7 +505,15 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        this._longPressSelector = setTimeout(() => DocumentView.LongPress && this.props.select(false), 1000);
+        this._longPressSelector = setTimeout(() => {
+            if (DocumentView.LongPress) {
+                if (this.rootDoc.dontUndo) {
+                    runInAction(() => (UndoStack.HideInline = !UndoStack.HideInline));
+                } else {
+                    this.props.select(false);
+                }
+            }
+        }, 1000);
         if (!GestureOverlay.DownDocView) GestureOverlay.DownDocView = this.props.DocumentView();
 
         this._downX = e.clientX;
@@ -516,11 +529,11 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 !this.Document.ignoreClick &&
                 e.button === 0 &&
                 this.pointerEvents !== 'none' &&
-                !DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc)
+                !Doc.IsInMyOverlay(this.layoutDoc)
             ) {
                 e.stopPropagation();
                 // don't preventDefault anymore.  Goldenlayout, PDF text selection and RTF text selection all need it to go though
-                //if (this.props.isSelected(true) && this.rootDoc.type !== DocumentType.PDF && this.layoutDoc._viewType !== CollectionViewType.Docking) e.preventDefault();
+                //if (this.props.isSelected(true) && this.rootDoc.type !== DocumentType.PDF && this.layoutDoc._type_collection !== CollectionViewType.Docking) e.preventDefault();
 
                 // listen to move events if document content isn't active or document is draggable
                 if (!this.layoutDoc._lockedPosition && (!this.isContentActive() || this.props.enableDragWhenActive || this.rootDoc.enableDragWhenActive)) {
@@ -537,7 +550,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
         if (!Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, Date.now())) {
             this.cleanupPointerEvents();
-            this.startDragging(this._downX, this._downY, ((e.ctrlKey || e.altKey) && 'alias') || ((this.Document.dropAction || this.props.dropAction || undefined) as dropActionType));
+            this.startDragging(this._downX, this._downY, ((e.ctrlKey || e.altKey) && 'embed') || ((this.Document.dropAction || this.props.dropAction || undefined) as dropActionType));
         }
     };
 
@@ -555,8 +568,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         if (this.onPointerUpHandler?.script) {
             this.onPointerUpHandler.script.run({ self: this.rootDoc, this: this.layoutDoc }, console.log);
         } else if (e.button === 0 && Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) {
-            this._doubleTap = Date.now() - this._lastTap < Utils.CLICK_TIME;
-            if (!this.props.isSelected(true)) this._lastTap = Date.now(); // don't want to process the start of a double tap if the doucment is selected
+            this._doubleTap = (this.onDoubleClickHandler?.script || this.rootDoc.defaultDoubleClick !== 'ignore') && Date.now() - this._lastTap < Utils.CLICK_TIME;
+            if (!this.isContentActive()) this._lastTap = Date.now(); // don't want to process the start of a double tap if the doucment is selected
         }
         if (DocumentView.LongPress) e.preventDefault();
     };
@@ -587,7 +600,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @undoBatch deleteClicked = () => this.props.removeDocument?.(this.props.Document);
     @undoBatch setToggleDetail = () =>
         (this.Document.onClick = ScriptField.MakeScript(
-            `toggleDetail(documentView, "${StrCast(this.Document.layoutKey)
+            `toggleDetail(documentView, "${StrCast(this.Document.layout_fieldKey)
                 .replace('layout_', '')
                 .replace(/^layout$/, 'detail')}")`,
             { documentView: 'any' }
@@ -609,7 +622,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 if (de.complete.annoDragData && !de.complete.annoDragData.dropDocument) {
                     de.complete.annoDragData.dropDocument = de.complete.annoDragData.dropDocCreator(undefined);
                 }
-                if (de.complete.annoDragData || this.rootDoc !== linkdrag.linkSourceDoc.context) {
+                if (de.complete.annoDragData || this.rootDoc !== linkdrag.linkSourceDoc.embedContainer) {
                     const dropDoc = de.complete.annoDragData?.dropDocument ?? this._componentView?.getAnchor?.(true) ?? this.rootDoc;
                     de.complete.linkDocument = DocUtils.MakeLink(linkdrag.linkSourceDoc, dropDoc, {}, undefined, [de.x, de.y - 50]);
                 }
@@ -620,12 +633,12 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @undoBatch
     @action
     makeIntoPortal = () => {
-        const portalLink = this.allLinks.find(d => d.anchor1 === this.props.Document && d.linkRelationship === 'portal to:portal from');
+        const portalLink = this.allLinks.find(d => d.link_anchor_1 === this.props.Document && d.link_relationship === 'portal to:portal from');
         if (!portalLink) {
             DocUtils.MakeLink(
                 this.props.Document,
-                Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), _isLightbox: true, _fitWidth: true, title: StrCast(this.props.Document.title) + ' [Portal]' }),
-                { linkRelationship: 'portal to:portal from' }
+                Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), _isLightbox: true, _layout_fitWidth: true, title: StrCast(this.props.Document.title) + ' [Portal]' }),
+                { link_relationship: 'portal to:portal from' }
             );
         }
         this.Document.followLinkLocation = OpenWhere.lightbox;
@@ -652,7 +665,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
     @action
     onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => {
-        if (e && this.rootDoc._hideContextMenu && Doc.noviceMode) {
+        if (e && this.rootDoc._layout_hideContextMenu && Doc.noviceMode) {
             e.preventDefault();
             e.stopPropagation();
             //!this.props.isSelected(true) && SelectionManager.SelectView(this.props.DocumentView(), false);
@@ -697,13 +710,13 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             .forEach(item => item.label && cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: item.icon as IconProp }));
 
         if (!this.props.Document.isFolder) {
-            const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null);
+            const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layout_fieldKey)], Doc, null);
             const appearance = cm.findByDescription('UI Controls...');
             const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : [];
             !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template   ', event: () => this.props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
             !appearance && appearanceItems.length && cm.addItem({ description: 'UI Controls...', subitems: appearanceItems, icon: 'compass' });
 
-            if (!Doc.IsSystem(this.rootDoc) && this.rootDoc.type !== DocumentType.PRES && ![CollectionViewType.Docking, CollectionViewType.Tree].includes(this.rootDoc._viewType as any)) {
+            if (!Doc.IsSystem(this.rootDoc) && this.rootDoc.type !== DocumentType.PRES && ![CollectionViewType.Docking, CollectionViewType.Tree].includes(this.rootDoc._type_collection as any)) {
                 const existingOnClick = cm.findByDescription('OnClick...');
                 const onClicks: ContextMenuProps[] = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : [];
 
@@ -723,24 +736,26 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 onClicks.push({ description: 'Enter Portal', event: this.makeIntoPortal, icon: 'window-restore' });
                 !Doc.noviceMode && onClicks.push({ description: 'Toggle Detail', event: this.setToggleDetail, icon: 'concierge-bell' });
 
-                if (!this.Document.annotationOn) {
-                    const options = cm.findByDescription('Options...');
-                    const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : [];
-                    !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' });
-
-                    onClicks.push({ description: this.onClickHandler ? 'Remove Click Behavior' : 'Follow Link', event: () => this.toggleFollowLink(false, false), icon: 'link' });
-                    onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' });
-                    !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' });
-                } else if (LinkManager.Links(this.Document).length) {
-                    onClicks.push({ description: 'Select on Click', event: () => this.noOnClick(), icon: 'link' });
-                    onClicks.push({ description: 'Follow Link on Click', event: () => this.followLinkOnClick(), icon: 'link' });
-                    !existingOnClick && cm.addItem({ description: 'OnClick...', subitems: onClicks, icon: 'mouse-pointer' });
+                if (!this.props.treeViewDoc) {
+                    if (!this.Document.annotationOn) {
+                        const options = cm.findByDescription('Options...');
+                        const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : [];
+                        !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' });
+
+                        onClicks.push({ description: this.onClickHandler ? 'Remove Click Behavior' : 'Follow Link', event: () => this.toggleFollowLink(false, false), icon: 'link' });
+                        onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' });
+                        !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' });
+                    } else if (LinkManager.Links(this.Document).length) {
+                        onClicks.push({ description: 'Select on Click', event: () => this.noOnClick(), icon: 'link' });
+                        onClicks.push({ description: 'Follow Link on Click', event: () => this.followLinkOnClick(), icon: 'link' });
+                        !existingOnClick && cm.addItem({ description: 'OnClick...', subitems: onClicks, icon: 'mouse-pointer' });
+                    }
                 }
             }
 
             const funcs: ContextMenuProps[] = [];
             if (!Doc.noviceMode && this.layoutDoc.onDragStart) {
-                funcs.push({ description: 'Drag an Alias', icon: 'edit', event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getAlias(this.dragFactory)')) });
+                funcs.push({ description: 'Drag an Embedding', icon: 'edit', event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getEmbedding(this.dragFactory)')) });
                 funcs.push({ description: 'Drag a Copy', icon: 'edit', event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)')) });
                 funcs.push({ description: 'Drag Document', icon: 'edit', event: () => (this.layoutDoc.onDragStart = undefined) });
                 cm.addItem({ description: 'OnDrag...', noexpand: true, subitems: funcs, icon: 'asterisk' });
@@ -769,7 +784,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         if (!Doc.IsSystem(this.rootDoc)) {
             constantItems.push({ description: 'Export as Zip file', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
             constantItems.push({ description: 'Import Zipped file', icon: 'upload', event: ({ x, y }) => this.importDocument() });
-            (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: 'users' });
+            (this.rootDoc._type_collection !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: 'users' });
             if (this.props.removeDocument && Doc.ActiveDashboard !== this.props.Document) {
                 // need option to gray out menu items ... preferably with a '?' that explains why they're grayed out (eg., no permissions)
                 constantItems.push({ description: 'Close', event: this.deleteClicked, icon: 'times' });
@@ -781,7 +796,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         const helpItems: ContextMenuProps[] = help && 'subitems' in help ? help.subitems : [];
         !Doc.noviceMode && helpItems.push({ description: 'Text Shortcuts Ctrl+/', event: () => this.props.addDocTab(Docs.Create.PdfDocument('/assets/cheat-sheet.pdf', { _width: 300, _height: 300 }), OpenWhere.addRight), icon: 'keyboard' });
         !Doc.noviceMode && helpItems.push({ description: 'Print Document in Console', event: () => console.log(this.props.Document), icon: 'hand-point-right' });
-        !Doc.noviceMode && helpItems.push({ description: 'Print DataDoc in Console', event: () => console.log(this.props.Document[DataSym]), icon: 'hand-point-right' });
+        !Doc.noviceMode && helpItems.push({ description: 'Print DataDoc in Console', event: () => console.log(this.props.Document[DocData]), icon: 'hand-point-right' });
 
         let documentationDescription: string | undefined = undefined;
         let documentationLink: string | undefined = undefined;
@@ -816,7 +831,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 break;
         }
         // Add link to help documentation
-        if (documentationDescription && documentationLink) {
+        if (!this.props.treeViewDoc && documentationDescription && documentationLink) {
             helpItems.push({
                 description: documentationDescription,
                 event: () => window.open(documentationLink, '_blank'),
@@ -861,12 +876,12 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             LightboxView.LightboxDoc !== this.rootDoc &&
             this.thumb &&
             !Doc.AreProtosEqual(DocumentLinksButton.StartLink, this.rootDoc) &&
-            ((!childHighlighted() && !childOverlayed() && !Doc.isBrushedHighlightedDegree(this.rootDoc)) || this.rootDoc._viewType === CollectionViewType.Docking) &&
+            ((!childHighlighted() && !childOverlayed() && !Doc.isBrushedHighlightedDegree(this.rootDoc)) || this.rootDoc._type_collection === CollectionViewType.Docking) &&
             !this._componentView?.isAnyChildContentActive?.()
             ? true
             : false;
     };
-    docFilters = () => [...this.props.docFilters(), ...StrListCast(this.layoutDoc.docFilters)];
+    childFilters = () => [...this.props.childFilters(), ...StrListCast(this.layoutDoc.childFilters)];
     contentPointerEvents = () => (!this.disableClickScriptFunc && this.onClickHandler ? 'none' : this.pointerEvents);
     @computed get contents() {
         TraceMobx();
@@ -898,7 +913,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     docViewPath={this.props.viewPath}
                     thumbShown={this.thumbShown}
                     setContentView={this.setContentView}
-                    docFilters={this.docFilters}
+                    childFilters={this.childFilters}
                     NativeDimScaling={this.props.NativeDimScaling}
                     PanelHeight={this.panelHeight}
                     setHeight={!this.props.suppressSetHeight ? this.setHeight : undefined}
@@ -908,9 +923,9 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     onClick={this.onClickFunc}
                     focus={this.props.focus}
                     setTitleFocus={this.setTitleFocus}
-                    layoutKey={this.finalLayoutKey}
+                    layout_fieldKey={this.finalLayoutKey}
                 />
-                {this.layoutDoc.hideAllLinks ? null : this.allLinkEndpoints}
+                {this.layoutDoc.layout_hideAllLinks ? null : this.allLinkEndpoints}
             </div>
         );
     }
@@ -927,7 +942,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         return this.props.styleProvider?.(doc, props, property);
     };
     // We need to use allrelatedLinks to get not just links to the document as a whole, but links to
-    // anchors that are not rendered as DocumentViews (marked as 'unrendered' with their 'annotationOn' set to this document).  e.g.,
+    // anchors that are not rendered as DocumentViews (marked as 'layout_unrendered' with their 'annotationOn' set to this document).  e.g.,
     //     - PDF text regions are rendered as an Annotations without generating a DocumentView, '
     //     - RTF selections are rendered via Prosemirror and have a mark which contains the Document ID for the annotation link
     //     - and links to PDF/Web docs at a certain scroll location never create an explicit view.
@@ -936,22 +951,22 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         TraceMobx();
         return LinkManager.Instance.getAllRelatedLinks(this.rootDoc).filter(
             link =>
-                Doc.AreProtosEqual(link.anchor1 as Doc, this.rootDoc) ||
-                Doc.AreProtosEqual(link.anchor2 as Doc, this.rootDoc) ||
-                ((link.anchor1 as Doc)?.unrendered && Doc.AreProtosEqual((link.anchor1 as Doc)?.annotationOn as Doc, this.rootDoc)) ||
-                ((link.anchor2 as Doc)?.unrendered && Doc.AreProtosEqual((link.anchor2 as Doc)?.annotationOn as Doc, this.rootDoc))
+                Doc.AreProtosEqual(link.link_anchor_1 as Doc, this.rootDoc) ||
+                Doc.AreProtosEqual(link.link_anchor_2 as Doc, this.rootDoc) ||
+                ((link.link_anchor_1 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_1 as Doc)?.annotationOn as Doc, this.rootDoc)) ||
+                ((link.link_anchor_2 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_2 as Doc)?.annotationOn as Doc, this.rootDoc))
         );
     }
     @computed get allLinks() {
         TraceMobx();
         return LinkManager.Instance.getAllRelatedLinks(this.rootDoc);
     }
-    hideLink = computedFn((link: Doc) => () => (link.linkDisplay = false));
+    hideLink = computedFn((link: Doc) => () => (link.link_displayLine = false));
     @computed get allLinkEndpoints() {
         // the small blue dots that mark the endpoints of links
         TraceMobx();
-        if (this.props.hideLinkAnchors || this.layoutDoc.hideLinkAnchors || this.props.dontRegisterView || this.layoutDoc.unrendered) return null;
-        const filtered = DocUtils.FilterDocs(this.directLinks, this.props.docFilters?.() ?? [], []).filter(d => d.linkDisplay);
+        if (this.props.hideLinkAnchors || this.layoutDoc.layout_hideLinkAnchors || this.props.dontRegisterView || this.layoutDoc.layout_unrendered) return null;
+        const filtered = DocUtils.FilterDocs(this.directLinks, this.props.childFilters?.() ?? [], []).filter(d => d.link_displayLine);
         return filtered.map(link => (
             <div className="documentView-anchorCont" key={link[Id]}>
                 <DocumentView
@@ -962,14 +977,14 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     PanelWidth={this.anchorPanelWidth}
                     PanelHeight={this.anchorPanelHeight}
                     dontRegisterView={false}
-                    showTitle={returnEmptyString}
+                    layout_showTitle={returnEmptyString}
                     hideCaptions={true}
                     hideLinkAnchors={true}
-                    fitWidth={returnTrue}
+                    layout_fitWidth={returnTrue}
                     removeDocument={this.hideLink(link)}
                     styleProvider={this.anchorStyleProvider}
                     LayoutTemplate={undefined}
-                    LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(link, this.rootDoc)}`)}
+                    LayoutTemplateString={LinkAnchorBox.LayoutString(`link_anchor_${Doc.LinkEndpoint(link, this.rootDoc)}`)}
                 />
             </div>
         ));
@@ -999,7 +1014,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 gumStream = stream;
                 recorder = new MediaRecorder(stream);
                 recorder.ondataavailable = async (e: any) => {
-                    const [{ result }] = await Networking.UploadFilesToServer(e.data);
+                    const [{ result }] = await Networking.UploadFilesToServer({ file: e.data });
                     if (!(result instanceof Error)) {
                         const audioField = new AudioField(result.accessPaths.agnostic.client);
                         const audioAnnos = Cast(dataDoc[field + '-audioAnnotations'], listSpec(AudioField), null);
@@ -1044,9 +1059,9 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @computed get innards() {
         TraceMobx();
         const ffscale = () => this.props.DocumentView().props.CollectionFreeFormDocumentView?.().props.ScreenToLocalTransform().Scale || 1;
-        const showTitle = this.ShowTitle?.split(':')[0];
-        const showTitleHover = this.ShowTitle?.includes(':hover');
-        const captionView = !this.showCaption ? null : (
+        const layout_showTitle = this.layout_showTitle?.split(':')[0];
+        const layout_showTitleHover = this.layout_showTitle?.includes(':hover');
+        const captionView = !this.layout_showCaption ? null : (
             <div
                 className="documentView-captionWrapper"
                 style={{
@@ -1058,7 +1073,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     {...this.props}
                     yPadding={10}
                     xPadding={10}
-                    fieldKey={this.showCaption}
+                    fieldKey={this.layout_showCaption}
                     fontSize={12 * Math.max(1, (2 * ffscale()) / 3)}
                     styleProvider={this.captionStyleProvider}
                     dontRegisterView={true}
@@ -1069,27 +1084,26 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 />
             </div>
         );
-        const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.rootDoc;
+        const targetDoc = layout_showTitle?.startsWith('_') ? this.layoutDoc : this.rootDoc;
         const background = StrCast(
             SharingManager.Instance.users.find(users => users.user.email === this.dataDoc.author)?.sharingDoc.userColor,
-            Doc.UserDoc().showTitle && [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().userColor) : 'rgba(0,0,0,0.4)'
+            Doc.UserDoc().layout_showTitle && [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().userColor) : 'rgba(0,0,0,0.4)'
         );
-        const sidebarWidthPercent = +StrCast(this.layoutDoc.sidebarWidthPercent).replace('%', '');
         const titleView = !showTitle ? null : (
             <div
-                className={`documentView-titleWrapper${showTitleHover ? '-hover' : ''}`}
+                className={`documentView-titleWrapper${layout_showTitleHover ? '-hover' : ''}`}
                 key="title"
                 style={{
                     position: this.headerMargin ? 'relative' : 'absolute',
                     height: this.titleHeight,
-                    width: !this.headerMargin ? `calc(${sidebarWidthPercent || 100}% - 18px)` : (sidebarWidthPercent || 100) + '%', // leave room for annotation button
+                    width: !this.headerMargin ? `calc(100% - 18px)` : '100%', // leave room for annotation button
                     color: lightOrDark(background),
                     background,
                     pointerEvents: (!this.disableClickScriptFunc && this.onClickHandler) || this.Document.ignoreClick ? 'none' : this.isContentActive() || this.props.isDocumentActive?.() ? 'all' : undefined,
                 }}>
                 <EditableView
                     ref={this._titleRef}
-                    contents={showTitle
+                    contents={layout_showTitle
                         .split(';')
                         .map(field => field.trim())
                         .map(field => targetDoc[field]?.toString())
@@ -1098,27 +1112,27 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     fontSize={10}
                     GetValue={() => {
                         this.props.select(false);
-                        return showTitle.split(';').length === 1 ? showTitle + '=' + Field.toString(targetDoc[showTitle.split(';')[0]] as any as Field) : '#' + showTitle;
+                        return layout_showTitle.split(';').length === 1 ? layout_showTitle + '=' + Field.toString(targetDoc[layout_showTitle.split(';')[0]] as any as Field) : '#' + layout_showTitle;
                     }}
                     SetValue={undoBatch((input: string) => {
                         if (input?.startsWith('#')) {
-                            if (this.props.showTitle) {
-                                this.rootDoc._showTitle = input?.substring(1) ? input.substring(1) : undefined;
+                            if (this.props.layout_showTitle) {
+                                this.rootDoc._layout_showTitle = input?.substring(1) ? input.substring(1) : undefined;
                             } else {
-                                Doc.UserDoc().showTitle = input?.substring(1) ? input.substring(1) : 'creationDate';
+                                Doc.UserDoc().layout_showTitle = input?.substring(1) ? input.substring(1) : 'author_date';
                             }
                         } else {
-                            var value = input.replace(new RegExp(showTitle + '='), '') as string | number;
-                            if (showTitle !== 'title' && Number(value).toString() === value) value = Number(value);
-                            if (showTitle.includes('Date') || showTitle === 'author') return true;
-                            Doc.SetInPlace(targetDoc, showTitle, value, true);
+                            var value = input.replace(new RegExp(layout_showTitle + '='), '') as string | number;
+                            if (layout_showTitle !== 'title' && Number(value).toString() === value) value = Number(value);
+                            if (layout_showTitle.includes('Date') || layout_showTitle === 'author') return true;
+                            Doc.SetInPlace(targetDoc, layout_showTitle, value, true);
                         }
                         return true;
                     })}
                 />
             </div>
         );
-        return this.props.hideTitle || (!showTitle && !this.showCaption) ? (
+        return this.props.hideTitle || (!layout_showTitle && !this.layout_showCaption) ? (
             this.contents
         ) : (
             <div className="documentView-styleWrapper">
@@ -1133,7 +1147,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
     renderDoc = (style: object) => {
         TraceMobx();
-        return !DocCast(this.Document) || GetEffectiveAcl(this.Document[DataSym]) === AclPrivate
+        return !DocCast(this.Document) || GetEffectiveAcl(this.Document[DocData]) === AclPrivate
             ? null
             : this.docContents ?? (
                   <div
@@ -1145,8 +1159,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                           opacity: this.opacity,
                           cursor: Doc.ActiveTool === InkTool.None ? 'grab' : 'crosshair',
                           color: StrCast(this.layoutDoc.color, 'inherit'),
-                          fontFamily: StrCast(this.Document._fontFamily, 'inherit'),
-                          fontSize: Cast(this.Document._fontSize, 'string', null),
+                          fontFamily: StrCast(this.Document._text_fontFamily, 'inherit'),
+                          fontSize: Cast(this.Document._text_fontSize, 'string', null),
                           transform: this._animateScalingTo ? `scale(${this._animateScalingTo})` : undefined,
                           transition: !this._animateScalingTo ? StrCast(this.Document.dataTransition) : `transform ${this.animateScaleTime / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`,
                       }}>
@@ -1218,7 +1232,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     pointerEvents: this.pointerEvents === 'visiblePainted' ? 'none' : this.pointerEvents,
                 }}>
                 <>
-                    {DocumentViewInternal.AnimationEffect(renderDoc, this.rootDoc[AnimationSym], this.rootDoc)}
+                    {DocumentViewInternal.AnimationEffect(renderDoc, this.rootDoc[Animation], this.rootDoc)}
                     {borderPath?.jsx}
                 </>
             </div>
@@ -1252,8 +1266,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     public setAnimEffect = (presEffect: Doc, timeInMs: number, afterTrans?: () => void) => {
         this.AnimEffectTimer && clearTimeout(this.AnimEffectTimer);
-        this.rootDoc[AnimationSym] = presEffect;
-        this.AnimEffectTimer = setTimeout(() => (this.rootDoc[AnimationSym] = undefined), timeInMs);
+        this.rootDoc[Animation] = presEffect;
+        this.AnimEffectTimer = setTimeout(() => (this.rootDoc[Animation] = undefined), timeInMs);
     };
     public setViewTransition = (transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) => {
         this.rootDoc._viewTransition = `${transProp} ${timeInMs}ms`;
@@ -1282,13 +1296,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     // shows a stacking view collection (by default, but the user can change) of all documents linked to the source
-    public static showBackLinks(linkSource: Doc) {
-        const docId = Doc.CurrentUserEmail + Doc.GetProto(linkSource)[Id] + '-pivotish';
+    public static showBackLinks(linkAnchor: Doc) {
+        const docId = Doc.CurrentUserEmail + Doc.GetProto(linkAnchor)[Id] + '-pivotish';
         // prettier-ignore
-        DocServer.GetRefField(docId).then(docx => docx instanceof Doc &&
+        DocServer.GetRefField(docId).then(docx =>
             LightboxView.SetLightboxDoc(
-                docx || // reuse existing pivot view of documents, or else create a new collection
-                Docs.Create.StackingDocument([], { title: linkSource.title + '-pivot', _width: 500, _height: 500, linkSource, updateContentsScript: ScriptField.MakeScript('updateLinkCollection(self)') }, docId)
+                (docx as Doc) ?? // reuse existing pivot view of documents, or else create a new collection
+                Docs.Create.StackingDocument([], { title: linkAnchor.title + '-pivot', _width: 500, _height: 500, target: linkAnchor, updateContentsScript: ScriptField.MakeScript('updateLinkCollection(self, self.target)') }, docId)
             )
         );
     }
@@ -1317,14 +1331,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     get LayoutFieldKey() {
         return this.docView?.LayoutFieldKey || 'layout';
     }
-    @computed get fitWidth() {
-        return this.docView?._componentView?.fitWidth?.() ?? this.props.fitWidth?.(this.rootDoc) ?? this.layoutDoc?.fitWidth;
+    @computed get layout_fitWidth() {
+        return this.docView?._componentView?.layout_fitWidth?.() ?? this.props.layout_fitWidth?.(this.rootDoc) ?? this.layoutDoc?.layout_fitWidth;
     }
     @computed get anchorViewDoc() {
-        return this.props.LayoutTemplateString?.includes('anchor2') ? DocCast(this.rootDoc['anchor2']) : this.props.LayoutTemplateString?.includes('anchor1') ? DocCast(this.rootDoc['anchor1']) : undefined;
+        return this.props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.rootDoc['link_anchor_2']) : this.props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.rootDoc['link_anchor_1']) : undefined;
     }
     @computed get hideLinkButton() {
-        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.isSelected() ? ':selected' : ''));
+        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkBtn + (this.isSelected() ? ':selected' : ''));
     }
     @computed get linkCountView() {
         const hideCount = this.props.renderDepth === -1 || SnappingManager.GetIsDragging() || (this.isSelected() && this.props.renderDepth) || !this._isHovering || this.hideLinkButton;
@@ -1337,13 +1351,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return Doc.Layout(this.Document, this.props.LayoutTemplate?.());
     }
     @computed get nativeWidth() {
-        return this.docView?._componentView?.reverseNativeScaling?.() ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, !this.fitWidth));
+        return this.docView?._componentView?.reverseNativeScaling?.() ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, !this.layout_fitWidth));
     }
     @computed get nativeHeight() {
-        return this.docView?._componentView?.reverseNativeScaling?.() ? 0 : returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, !this.fitWidth));
+        return this.docView?._componentView?.reverseNativeScaling?.() ? 0 : returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, !this.layout_fitWidth));
     }
     @computed get shouldNotScale() {
-        return (this.fitWidth && !this.nativeWidth) || [CollectionViewType.Docking].includes(this.Document._viewType as any);
+        return this.props.shouldNotScale?.() || (this.layout_fitWidth && !this.nativeWidth) || [CollectionViewType.Docking].includes(this.Document._type_collection as any);
     }
     @computed get effectiveNativeWidth() {
         return this.shouldNotScale ? 0 : this.nativeWidth || NumCast(this.layoutDoc.width);
@@ -1354,8 +1368,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @computed get nativeScaling() {
         if (this.shouldNotScale) return 1;
         const minTextScale = this.Document.type === DocumentType.RTF ? 0.1 : 0;
-        if (this.fitWidth || this.props.PanelHeight() / (this.effectiveNativeHeight || 1) > this.props.PanelWidth() / (this.effectiveNativeWidth || 1)) {
-            return Math.max(minTextScale, this.props.PanelWidth() / (this.effectiveNativeWidth || 1)); // width-limited or fitWidth
+        if (this.layout_fitWidth || this.props.PanelHeight() / (this.effectiveNativeHeight || 1) > this.props.PanelWidth() / (this.effectiveNativeWidth || 1)) {
+            return Math.max(minTextScale, this.props.PanelWidth() / (this.effectiveNativeWidth || 1)); // width-limited or layout_fitWidth
         }
         return Math.max(minTextScale, this.props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled
     }
@@ -1363,7 +1377,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this.props.PanelWidth();
     }
     @computed get panelHeight() {
-        if (this.effectiveNativeHeight && (!this.fitWidth || !this.layoutDoc.nativeHeightUnfrozen)) {
+        if (this.effectiveNativeHeight && (!this.layout_fitWidth || !this.layoutDoc.nativeHeightUnfrozen)) {
             return Math.min(this.props.PanelHeight(), this.effectiveNativeHeight * this.nativeScaling);
         }
         return this.props.PanelHeight();
@@ -1372,7 +1386,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return this.effectiveNativeWidth ? Math.max(0, (this.props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2) : 0;
     }
     @computed get Yshift() {
-        return this.effectiveNativeWidth && this.effectiveNativeHeight && Math.abs(this.Xshift) < 0.001 && (!this.layoutDoc.nativeHeightUnfrozen || (!this.fitWidth && this.effectiveNativeHeight * this.nativeScaling <= this.props.PanelHeight()))
+        return this.effectiveNativeWidth &&
+            this.effectiveNativeHeight &&
+            Math.abs(this.Xshift) < 0.001 &&
+            (!this.layoutDoc.nativeHeightUnfrozen || (!this.layout_fitWidth && this.effectiveNativeHeight * this.nativeScaling <= this.props.PanelHeight()))
             ? Math.max(0, (this.props.PanelHeight() - this.effectiveNativeHeight * this.nativeScaling) / 2)
             : 0;
     }
@@ -1408,10 +1425,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             finished?.();
             this.docView && (this.docView._animateScaleTime = animTime);
         });
-        const layoutKey = Cast(this.Document.layoutKey, 'string', null);
-        if (layoutKey !== 'layout_icon') {
+        const layout_fieldKey = Cast(this.Document.layout_fieldKey, 'string', null);
+        if (layout_fieldKey !== 'layout_icon') {
             this.switchViews(true, 'icon', finalFinished);
-            if (layoutKey && layoutKey !== 'layout' && layoutKey !== 'layout_icon') this.Document.deiconifyLayout = layoutKey.replace('layout_', '');
+            if (layout_fieldKey && layout_fieldKey !== 'layout' && layout_fieldKey !== 'layout_icon') this.Document.deiconifyLayout = layout_fieldKey.replace('layout_', '');
         } else {
             const deiconifyLayout = Cast(this.Document.deiconifyLayout, 'string', null);
             this.switchViews(deiconifyLayout ? true : false, deiconifyLayout, finalFinished);
@@ -1431,7 +1448,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         setTimeout(
             action(() => {
                 if (useExistingLayout && custom && this.rootDoc['layout_' + view]) {
-                    this.rootDoc.layoutKey = 'layout_' + view;
+                    this.rootDoc.layout_fieldKey = 'layout_' + view;
                 } else {
                     this.setCustomView(custom, view);
                 }
@@ -1473,8 +1490,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             // increase max auto height if document has been resized to be greater than current max
             () => NumCast(this.layoutDoc._height),
             action(height => {
-                const docMax = NumCast(this.layoutDoc.docMaxAutoHeight);
-                if (docMax && docMax < height) this.layoutDoc.docMaxAutoHeight = height;
+                const docMax = NumCast(this.layoutDoc.layout_maxAutoHeight);
+                if (docMax && docMax < height) this.layoutDoc.layout_maxAutoHeight = height;
             })
         );
         !BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView) && DocumentManager.Instance.AddView(this);
@@ -1518,7 +1535,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                             width: xshift ?? `${(100 * (this.props.PanelWidth() - this.Xshift * 2)) / this.props.PanelWidth()}%`,
                             height: this.props.forceAutoHeight
                                 ? undefined
-                                : yshift ?? (this.fitWidth ? `${this.panelHeight}px` : `${(((100 * this.effectiveNativeHeight) / this.effectiveNativeWidth) * this.props.PanelWidth()) / this.props.PanelHeight()}%`),
+                                : yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(((100 * this.effectiveNativeHeight) / this.effectiveNativeWidth) * this.props.PanelWidth()) / this.props.PanelHeight()}%`),
                         }}>
                         <DocumentViewInternal
                             {...this.props}
@@ -1556,26 +1573,27 @@ ScriptingGlobals.add(function deiconifyViewToLightbox(documentView: DocumentView
 });
 
 ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string) {
-    if (dv.Document.layoutKey === 'layout_' + detailLayoutKeySuffix) dv.switchViews(false, 'layout');
+    if (dv.Document.layout_fieldKey === 'layout_' + detailLayoutKeySuffix) dv.switchViews(false, 'layout');
     else dv.switchViews(true, detailLayoutKeySuffix, undefined, true);
 });
 
-ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc) {
-    const linkSource = Cast(linkCollection.linkSource, Doc, null);
+ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc, linkSource: Doc) {
     const collectedLinks = DocListCast(Doc.GetProto(linkCollection).data);
-    let wid = linkSource[WidthSym]();
+    let wid = linkSource[Width]();
+    let embedding: Doc | undefined;
     const links = LinkManager.Links(linkSource);
     links.forEach(link => {
         const other = LinkManager.getOppositeAnchor(link, linkSource);
-        const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
+        const otherdoc = DocCast(other?.annotationOn ?? other);
         if (otherdoc && !collectedLinks?.some(d => Doc.AreProtosEqual(d, otherdoc))) {
-            const alias = Doc.MakeAlias(otherdoc);
-            alias.x = wid;
-            alias.y = 0;
-            alias._lockedPosition = false;
-            wid += otherdoc[WidthSym]();
-            Doc.AddDocToList(Doc.GetProto(linkCollection), 'data', alias);
+            embedding = Doc.MakeEmbedding(otherdoc);
+            embedding.x = wid;
+            embedding.y = 0;
+            embedding._lockedPosition = false;
+            wid += otherdoc[Width]();
+            Doc.AddDocToList(Doc.GetProto(linkCollection), 'data', embedding);
         }
     });
+    embedding && DocServer.UPDATE_SERVER_CACHE(); // if a new embedding was made, update the client's server cache so that it will not come back as a promise
     return links;
 });
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 163c5a9ed..8d45c5724 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -2,7 +2,7 @@ import EquationEditor from 'equation-editor-react';
 import { action, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { WidthSym } from '../../../fields/Doc';
+import { Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { NumCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
@@ -67,7 +67,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
         if (e.key === 'Tab') {
             const graph = Docs.Create.FunctionPlotDocument([this.rootDoc], {
-                x: NumCast(this.layoutDoc.x) + this.layoutDoc[WidthSym](),
+                x: NumCast(this.layoutDoc.x) + this.layoutDoc[Width](),
                 y: NumCast(this.layoutDoc.y),
                 _width: 400,
                 _height: 300,
@@ -90,7 +90,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
     render() {
         TraceMobx();
-        const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._viewScale, 1);
+        const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1);
         return (
             <div
                 ref={r => this.updateSize()}
@@ -101,10 +101,10 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     width: 'fit-content', // `${100 / scale}%`,
                     height: `${100 / scale}%`,
                     pointerEvents: !this.props.isSelected() ? 'none' : undefined,
-                    fontSize: StrCast(this.rootDoc._fontSize),
+                    fontSize: StrCast(this.rootDoc._text_fontSize),
                 }}
                 onKeyDown={e => e.stopPropagation()}>
-                <EquationEditor ref={this._ref} value={this.dataDoc.text || 'x'} spaceBehavesLikeTab={true} onChange={this.onChange} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" />
+                <EquationEditor ref={this._ref} value={StrCast(this.dataDoc.text, 'x')} spaceBehavesLikeTab={true} onChange={this.onChange} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" />
             </div>
         );
     }
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 86779e0dd..85dd779fc 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -50,50 +50,18 @@ export class FieldView extends React.Component<FieldViewProps> {
 
     @computed
     get field(): FieldResult {
-        const { Document, fieldKey } = this.props;
+        const { Document, fieldKey: fieldKey } = this.props;
         return Document[fieldKey];
     }
     render() {
         const field = this.field;
-        if (field === undefined) {
-            return <p>{'<null>'}</p>;
-        }
-        // if (typeof field === "string") {
-        //     return <p>{field}</p>;
-        // }
-        // else if (field instanceof RichTextField) {
-        //     return <FormattedTextBox {...this.props} />;
-        // }
-        // else if (field instanceof ImageField) {
-        //     return <ImageBox {...this.props} />;
-        // }
-        // else if (field instaceof PresBox) {
-        //    return <PresBox {...this.props} />;
-        // }
-        // else if (field instanceof VideoField) {
-        //     return <VideoBox {...this.props} />;
-        // }
-        // else if (field instanceof AudioField) {
-        //     return <AudioBox {...this.props} />;
-        //}
-        else if (field instanceof DateField) {
-            return <p>{field.date.toLocaleString()}</p>;
-        } else if (field instanceof Doc) {
-            return (
-                <p>
-                    <b>{field.title?.toString()}</b>
-                </p>
-            );
-        } else if (field instanceof List) {
-            return <div> {field.length ? field.map(f => Field.toString(f)).join(', ') : ''} </div>;
-        }
-        // bcz: this belongs here, but it doesn't render well so taking it out for now
-        else if (field instanceof WebField) {
-            return <p>{Field.toString(field.url.href)}</p>;
-        } else if (!(field instanceof Promise)) {
-            return <p>{Field.toString(field)}</p>;
-        } else {
-            return <p> {'Waiting for server...'} </p>;
-        }
+        // prettier-ignore
+        if (field instanceof Doc)  return <p> <b>{field.title?.toString()}</b></p>;
+        if (field === undefined) return <p>{'<null>'}</p>;
+        if (field instanceof DateField) return <p>{field.date.toLocaleString()}</p>;
+        if (field instanceof List) return <div> {field.map(f => Field.toString(f)).join(', ')} </div>;
+        if (field instanceof WebField) return <p>{Field.toString(field.url.href)}</p>;
+        if (!(field instanceof Promise)) return <p>{Field.toString(field)}</p>;
+        return <p> {'Waiting for server...'} </p>;
     }
 }
diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
index b43e359ff..1a78583f9 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -43,7 +43,10 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
         );
     }
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
-        const anchor = Docs.Create.TextanchorDocument({ annotationOn: this.rootDoc, unrendered: true });
+        const anchor = Docs.Create.FunctionPlotConfigDocument({
+            //
+            annotationOn: this.rootDoc,
+        });
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), datarange: true } }, this.rootDoc);
         anchor.presXRange = new List<number>(Array.from(this._plot.options.xAxis.domain));
         anchor.presYRange = new List<number>(Array.from(this._plot.options.yAxis.domain));
@@ -90,7 +93,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
         if (ele) {
             this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.layoutDoc);
         }
-        // if (this.autoHeight) this.tryUpdateScrollHeight();
+        // if (this.layout_autoHeight) this.tryUpdateScrollHeight();
     };
     @computed get theGraph() {
         return <div id={`${this._plotId}`} ref={r => r && this.createGraph(r)} style={{ position: 'absolute', width: '100%', height: '100%' }} onPointerDown={e => e.stopPropagation()} />;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index c9be10d3a..5b302e7ce 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -3,7 +3,8 @@ import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { extname } from 'path';
-import { DataSym, Doc, DocListCast, Opt, WidthSym } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { DocData, Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
@@ -77,13 +78,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const anchor =
             this._getAnchor?.(this._savedAnnotations, false) ?? // use marquee anchor, otherwise, save zoom/pan as anchor
-            Docs.Create.ImageanchorDocument({
+            Docs.Create.ImageConfigDocument({
                 title: 'ImgAnchor:' + this.rootDoc.title,
-                presPanX: NumCast(this.layoutDoc._panX),
-                presPanY: NumCast(this.layoutDoc._panY),
-                presViewScale: Cast(this.layoutDoc._viewScale, 'number', null),
+                presPanX: NumCast(this.layoutDoc._freeform_panX),
+                presPanY: NumCast(this.layoutDoc._freeform_panY),
+                presViewScale: Cast(this.layoutDoc._freeform_scale, 'number', null),
                 presTransition: 1000,
-                unrendered: true,
                 annotationOn: this.rootDoc,
             });
         if (anchor) {
@@ -99,7 +99,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this._disposers.sizer = reaction(
             () => ({
                 forceFull: this.props.renderDepth < 1 || this.layoutDoc._showFullRes,
-                scrSize: (this.props.ScreenToLocalTransform().inverse().transformDirection(this.nativeSize.nativeWidth, this.nativeSize.nativeHeight)[0] / this.nativeSize.nativeWidth) * NumCast(this.rootDoc._viewScale, 1),
+                scrSize: (this.props.ScreenToLocalTransform().inverse().transformDirection(this.nativeSize.nativeWidth, this.nativeSize.nativeHeight)[0] / this.nativeSize.nativeWidth) * NumCast(this.rootDoc._freeform_scale, 1),
                 selected: this.props.isSelected(),
             }),
             ({ forceFull, scrSize, selected }) => (this._curSuffix = selected ? '_o' : this.fieldKey === 'icon' ? '_m' : forceFull ? '_o' : scrSize < 0.25 ? '_s' : scrSize < 0.5 ? '_m' : scrSize < 0.8 ? '_l' : '_o'),
@@ -107,7 +107,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         );
         const layoutDoc = this.layoutDoc;
         this._disposers.path = reaction(
-            () => ({ nativeSize: this.nativeSize, width: this.layoutDoc[WidthSym]() }),
+            () => ({ nativeSize: this.nativeSize, width: this.layoutDoc[Width]() }),
             ({ nativeSize, width }) => {
                 if (layoutDoc === this.layoutDoc || !this.layoutDoc._height) {
                     this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
@@ -116,7 +116,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             { fireImmediately: true }
         );
         this._disposers.scroll = reaction(
-            () => this.layoutDoc._scrollTop,
+            () => this.layoutDoc.layout_scrollTop,
             s_top => {
                 this._forcedScroll = true;
                 !this._ignoreScroll && this._mainCont.current && (this._mainCont.current.scrollTop = NumCast(s_top));
@@ -144,14 +144,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 de.complete.docDragData.droppedDocuments.forEach(
                     action((drop: Doc) => {
                         Doc.AddDocToList(this.dataDoc, this.fieldKey + '-alternates', drop);
-                        this.rootDoc[this.fieldKey + '-usePath'] = 'alternate:hover';
+                        this.rootDoc[this.fieldKey + '_usePath'] = 'alternate:hover';
                         e.stopPropagation();
                     })
                 );
             } else if (de.altKey || !this.dataDoc[this.fieldKey]) {
                 const layoutDoc = de.complete.docDragData?.draggedDocuments[0];
                 const targetField = Doc.LayoutFieldKey(layoutDoc);
-                const targetDoc = layoutDoc[DataSym];
+                const targetDoc = layoutDoc[DocData];
                 if (targetDoc[targetField] instanceof ImageField) {
                     this.dataDoc[this.fieldKey] = ObjectField.MakeCopy(targetDoc[targetField] as ImageField);
                     Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(targetDoc), this.fieldKey);
@@ -167,28 +167,28 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     @undoBatch
     setNativeSize = action(() => {
-        const scaling = (this.props.DocumentView?.().props.ScreenToLocalTransform().Scale || 1) / NumCast(this.rootDoc._viewScale, 1);
+        const scaling = (this.props.DocumentView?.().props.ScreenToLocalTransform().Scale || 1) / NumCast(this.rootDoc._freeform_scale, 1);
         const nscale = NumCast(this.props.PanelWidth()) / scaling;
-        const nh = nscale / NumCast(this.dataDoc[this.fieldKey + '-nativeHeight']);
-        const nw = nscale / NumCast(this.dataDoc[this.fieldKey + '-nativeWidth']);
-        this.dataDoc[this.fieldKey + '-nativeHeight'] = NumCast(this.dataDoc[this.fieldKey + '-nativeHeight']) * nh;
-        this.dataDoc[this.fieldKey + '-nativeWidth'] = NumCast(this.dataDoc[this.fieldKey + '-nativeWidth']) * nh;
-        this.rootDoc._panX = nh * NumCast(this.rootDoc._panX);
-        this.rootDoc._panY = nh * NumCast(this.rootDoc._panY);
-        this.dataDoc._panXMax = this.dataDoc._panXMax ? nh * NumCast(this.dataDoc._panXMax) : undefined;
-        this.dataDoc._panXMin = this.dataDoc._panXMin ? nh * NumCast(this.dataDoc._panXMin) : undefined;
-        this.dataDoc._panYMax = this.dataDoc._panYMax ? nw * NumCast(this.dataDoc._panYMax) : undefined;
-        this.dataDoc._panYMin = this.dataDoc._panYMin ? nw * NumCast(this.dataDoc._panYMin) : undefined;
+        const nh = nscale / NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']);
+        const nw = nscale / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']);
+        this.dataDoc[this.fieldKey + '_nativeHeight'] = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']) * nh;
+        this.dataDoc[this.fieldKey + '_nativeWidth'] = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) * nh;
+        this.rootDoc._freeform_panX = nh * NumCast(this.rootDoc._freeform_panX);
+        this.rootDoc._freeform_panY = nh * NumCast(this.rootDoc._freeform_panY);
+        this.dataDoc._freeform_panXMax = this.dataDoc._freeform_panXMax ? nh * NumCast(this.dataDoc._freeform_panXMax) : undefined;
+        this.dataDoc._freeform_panXMin = this.dataDoc._freeform_panXMin ? nh * NumCast(this.dataDoc._freeform_panXMin) : undefined;
+        this.dataDoc._freeform_panYMax = this.dataDoc._freeform_panYMax ? nw * NumCast(this.dataDoc._freeform_panYMax) : undefined;
+        this.dataDoc._freeform_panYMin = this.dataDoc._freeform_panYMin ? nw * NumCast(this.dataDoc._freeform_panYMin) : undefined;
     });
     @undoBatch
     rotate = action(() => {
-        const nw = NumCast(this.dataDoc[this.fieldKey + '-nativeWidth']);
-        const nh = NumCast(this.dataDoc[this.fieldKey + '-nativeHeight']);
+        const nw = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']);
+        const nh = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']);
         const w = this.layoutDoc._width;
         const h = this.layoutDoc._height;
         this.dataDoc[this.fieldKey + '-rotation'] = (NumCast(this.dataDoc[this.fieldKey + '-rotation']) + 90) % 360;
-        this.dataDoc[this.fieldKey + '-nativeWidth'] = nh;
-        this.dataDoc[this.fieldKey + '-nativeHeight'] = nw;
+        this.dataDoc[this.fieldKey + '_nativeWidth'] = nh;
+        this.dataDoc[this.fieldKey + '_nativeHeight'] = nw;
         this.layoutDoc._width = h;
         this.layoutDoc._height = w;
     });
@@ -204,7 +204,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const anchy = NumCast(cropping.y);
         const anchw = NumCast(cropping._width);
         const anchh = NumCast(cropping._height);
-        const viewScale = NumCast(this.rootDoc[this.fieldKey + '-nativeWidth']) / anchw;
+        const viewScale = NumCast(this.rootDoc[this.fieldKey + '_nativeWidth']) / anchw;
         cropping.title = 'crop: ' + this.rootDoc.title;
         cropping.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc._width);
         cropping.y = NumCast(this.rootDoc.y);
@@ -213,25 +213,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         cropping.onClick = undefined;
         const croppingProto = Doc.GetProto(cropping);
         croppingProto.annotationOn = undefined;
-        croppingProto.isPrototype = true;
+        croppingProto.isDataDoc = true;
         croppingProto.backgroundColor = undefined;
         croppingProto.proto = Cast(this.rootDoc.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO
         croppingProto.type = DocumentType.IMG;
         croppingProto.layout = ImageBox.LayoutString('data');
         croppingProto.data = ObjectField.MakeCopy(this.rootDoc[this.fieldKey] as ObjectField);
-        croppingProto['data-nativeWidth'] = anchw;
-        croppingProto['data-nativeHeight'] = anchh;
-        croppingProto.viewScale = viewScale;
-        croppingProto.viewScaleMin = viewScale;
-        croppingProto.panX = anchx / viewScale;
-        croppingProto.panY = anchy / viewScale;
-        croppingProto.panXMin = anchx / viewScale;
-        croppingProto.panXMax = anchw / viewScale;
-        croppingProto.panYMin = anchy / viewScale;
-        croppingProto.panYMax = anchh / viewScale;
+        croppingProto['data_nativeWidth'] = anchw;
+        croppingProto['data_nativeHeight'] = anchh;
+        croppingProto.freeform_scale = viewScale;
+        croppingProto.freeform_scaleMin = viewScale;
+        croppingProto.freeform_panX = anchx / viewScale;
+        croppingProto.freeform_panY = anchy / viewScale;
+        croppingProto.freeform_panXMin = anchx / viewScale;
+        croppingProto.freeform_panXMax = anchw / viewScale;
+        croppingProto.freeform_panYMin = anchy / viewScale;
+        croppingProto.freeform_panYMax = anchh / viewScale;
         if (addCrop) {
-            DocUtils.MakeLink(region, cropping, { linkRelationship: 'cropped image' });
-            cropping.x = NumCast(this.rootDoc.x) + this.rootDoc[WidthSym]();
+            DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' });
+            cropping.x = NumCast(this.rootDoc.x) + this.rootDoc[Width]();
             cropping.y = NumCast(this.rootDoc.y);
             this.props.addDocTab(cropping, OpenWhere.inParent);
         }
@@ -303,7 +303,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
 
     considerGooglePhotosLink = () => {
-        const remoteUrl = this.dataDoc.googlePhotosUrl;
+        const remoteUrl = StrCast(this.dataDoc.googlePhotosUrl); // bcz: StrCast or URLCast???
         return !remoteUrl ? null : <img draggable={false} style={{ transformOrigin: 'bottom right' }} id={'google-photos'} src={'/assets/google_photos.png'} onClick={() => window.open(remoteUrl)} />;
     };
 
@@ -312,7 +312,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return !tags ? null : <img id={'google-tags'} src={'/assets/google_tags.png'} />;
     };
 
-    getScrollHeight = () => (this.props.fitWidth?.(this.rootDoc) !== false && NumCast(this.rootDoc._viewScale, 1) === NumCast(this.rootDoc._viewScaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
+    getScrollHeight = () => (this.props.layout_fitWidth?.(this.rootDoc) !== false && NumCast(this.rootDoc._freeform_scale, 1) === NumCast(this.rootDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
 
     @computed
     private get considerDownloadIcon() {
@@ -358,13 +358,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     @computed get nativeSize() {
         TraceMobx();
-        const nativeWidth = NumCast(this.dataDoc[this.fieldKey + '-nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth'], 500));
-        const nativeHeight = NumCast(this.dataDoc[this.fieldKey + '-nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '-nativeHeight'], 500));
+        const nativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth'], 500));
+        const nativeHeight = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight'], 500));
         const nativeOrientation = NumCast(this.dataDoc[this.fieldKey + '-nativeOrientation'], 1);
         return { nativeWidth, nativeHeight, nativeOrientation };
     }
     @computed get overlayImageIcon() {
-        const usePath = this.rootDoc[`_${this.fieldKey}-usePath`];
+        const usePath = this.rootDoc[`_${this.fieldKey}_usePath`];
         return (
             <Tooltip
                 title={
@@ -385,7 +385,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <div
                     className="imageBox-alternateDropTarget"
                     ref={this._overlayIconRef}
-                    onPointerDown={e => setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => (this.rootDoc[`_${this.fieldKey}-usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined))}
+                    onPointerDown={e => setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => (this.rootDoc[`_${this.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined))}
                     style={{
                         display: (SnappingManager.GetIsDragging() && DragManager.DocDragData?.canEmbed) || DocListCast(this.dataDoc[this.fieldKey + '-alternates']).length ? 'block' : 'none',
                         width: 'min(10%, 25px)',
@@ -431,7 +431,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             transformOrigin = 'right top';
             transform = `translate(-100%, 0%) rotate(${rotation}deg) scale(${aspect})`;
         }
-        const usePath = this.rootDoc[`_${this.fieldKey}-usePath`];
+        const usePath = this.rootDoc[`_${this.fieldKey}_usePath`];
 
         return (
             <div className="imageBox-cont" onPointerEnter={action(() => (this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))} key={this.layoutDoc[Id]} ref={this.createDropTarget} onPointerDown={this.marqueeDown}>
@@ -459,9 +459,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         TraceMobx();
         return <div className="imageBox-annotationLayer" style={{ height: this.props.PanelHeight() }} ref={this._annotationLayer} />;
     }
-    screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop) * this.props.ScreenToLocalTransform().Scale);
+    screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop) * this.props.ScreenToLocalTransform().Scale);
     marqueeDown = (e: React.PointerEvent) => {
-        if (!e.altKey && e.button === 0 && NumCast(this.rootDoc._viewScale, 1) <= NumCast(this.rootDoc.viewScaleMin, 1) && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
+        if (!e.altKey && e.button === 0 && NumCast(this.rootDoc._freeform_scale, 1) <= NumCast(this.rootDoc.freeform_scaleMin, 1) && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
             setupMoveUpEvents(
                 this,
                 e,
@@ -497,9 +497,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 ref={this._mainCont}
                 onScroll={action(e => {
                     if (!this._forcedScroll) {
-                        if (this.layoutDoc._scrollTop || this._mainCont.current?.scrollTop) {
+                        if (this.layoutDoc._layout_scrollTop || this._mainCont.current?.scrollTop) {
                             this._ignoreScroll = true;
-                            this.layoutDoc._scrollTop = this._mainCont.current?.scrollTop;
+                            this.layoutDoc._layout_scrollTop = this._mainCont.current?.scrollTop;
                             this._ignoreScroll = false;
                         }
                     }
@@ -510,7 +510,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     height: this.props.PanelWidth() ? undefined : `100%`,
                     pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined,
                     borderRadius,
-                    overflow: this.layoutDoc.fitWidth || this.props.fitWidth?.(this.rootDoc) ? 'auto' : undefined,
+                    overflow: this.layoutDoc.layout_fitWidth || this.props.layout_fitWidth?.(this.rootDoc) ? 'auto' : undefined,
                 }}>
                 <CollectionFreeFormView
                     ref={this._ffref}
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index e317de11e..5b6b0b5a7 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -20,6 +20,10 @@ import { ImageBox } from './ImageBox';
 import './KeyValueBox.scss';
 import { KeyValuePair } from './KeyValuePair';
 import React = require('react');
+import { DocumentManager } from '../../util/DocumentManager';
+import { ScriptingGlobals } from '../../util/ScriptingGlobals';
+import { ScriptingRepl } from '../ScriptingRepl';
+import { DocumentIconContainer } from './DocumentIcon';
 
 export type KVPScript = {
     script: CompiledScript;
@@ -42,15 +46,13 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     }
     reverseNativeScaling = returnTrue;
     able = returnAlways;
-    fitWidth = returnTrue;
+    layout_fitWidth = returnTrue;
     overridePointerEvents = returnAll;
     onClickScriptDisable = returnAlways;
 
     @observable private rows: KeyValuePair[] = [];
+    @observable _splitPercentage = 50;
 
-    @computed get splitPercentage() {
-        return NumCast(this.props.Document.schemaSplitPercentage, 50);
-    }
     get fieldDocToLayout() {
         return this.props.fieldKey ? DocCast(this.props.Document[this.props.fieldKey], DocCast(this.props.Document)) : this.props.Document;
     }
@@ -75,14 +77,14 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         value = dubEq ? value.substring(2) : value;
         const options: ScriptOptions = { addReturn: true, typecheck: false, params: { this: Doc.name, self: Doc.name, _last_: 'any', _readOnly_: 'boolean' }, editable: true };
         if (dubEq) options.typecheck = false;
-        const script = CompileScript(value, options);
+        const script = CompileScript(value, { ...options, transformer: DocumentIconContainer.getTransformer() });
         return !script.compiled ? undefined : { script, type: dubEq, onDelegate: eq };
     }
 
     public static ApplyKVPScript(doc: Doc, key: string, kvpScript: KVPScript, forceOnDelegate?: boolean): boolean {
         const { script, type, onDelegate } = kvpScript;
         //const target = onDelegate ? Doc.Layout(doc.layout) : Doc.GetProto(doc); // bcz: TODO need to be able to set fields on layout templates
-        const target = forceOnDelegate || onDelegate || key.startsWith('_') ? doc : doc.proto || doc;
+        const target = forceOnDelegate || onDelegate || key.startsWith('_') ? doc : DocCast(doc.proto, doc);
         let field: Field;
         if (type === 'computed') {
             field = new ComputedField(script);
@@ -143,7 +145,9 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         const rows: JSX.Element[] = [];
         let i = 0;
         const self = this;
-        for (const key of Object.keys(ids).slice().sort()) {
+        const keys = Object.keys(ids).slice();
+        //for (const key of [...keys.filter(id => id !== 'layout' && !id.includes('_')).sort(), ...keys.filter(id => id === 'layout' || id.includes('_')).sort()]) {
+        for (const key of keys.sort()) {
             rows.push(
                 <KeyValuePair
                     doc={realDoc}
@@ -158,7 +162,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                             if (el) self.rows.push(el);
                         };
                     })()}
-                    keyWidth={100 - this.splitPercentage}
+                    keyWidth={100 - this._splitPercentage}
                     rowStyle={'keyValueBox-' + (i++ % 2 ? 'oddRow' : 'evenRow')}
                     key={key}
                     keyName={key}
@@ -176,7 +180,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                         this._keyInput.current!.select();
                         e.stopPropagation();
                     }}
-                    style={{ width: `${100 - this.splitPercentage}%` }}>
+                    style={{ width: `${100 - this._splitPercentage}%` }}>
                     <input style={{ width: '100%' }} ref={this._keyInput} type="text" placeholder="Key" />
                 </td>
                 <td
@@ -185,7 +189,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                         this._valInput.current!.select();
                         e.stopPropagation();
                     }}
-                    style={{ width: `${this.splitPercentage}%` }}>
+                    style={{ width: `${this._splitPercentage}%` }}>
                     <input style={{ width: '100%' }} ref={this._valInput} type="text" placeholder="Value" onKeyDown={this.onEnterKey} />
                 </td>
             </tr>
@@ -195,7 +199,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     @action
     onDividerMove = (e: PointerEvent): void => {
         const nativeWidth = this._mainCont.current!.getBoundingClientRect();
-        this.props.Document.schemaSplitPercentage = Math.max(0, 100 - Math.round(((e.clientX - nativeWidth.left) / nativeWidth.width) * 100));
+        this._splitPercentage = Math.max(0, 100 - Math.round(((e.clientX - nativeWidth.left) / nativeWidth.width) * 100));
     };
     @action
     onDividerUp = (e: PointerEvent): void => {
@@ -212,7 +216,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     getFieldView = async () => {
         const rows = this.rows.filter(row => row.isChecked);
         if (rows.length > 1) {
-            const parent = Docs.Create.StackingDocument([], { _autoHeight: true, _width: 300, title: `field views for ${DocCast(this.props.Document.data).title}`, _chromeHidden: true });
+            const parent = Docs.Create.StackingDocument([], { _layout_autoHeight: true, _width: 300, title: `field views for ${DocCast(this.props.Document.data).title}`, _chromeHidden: true });
             for (const row of rows) {
                 const field = this.createFieldView(DocCast(this.props.Document.data), row);
                 field && Doc.AddDocToList(parent, 'data', field);
@@ -225,9 +229,9 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
 
     createFieldView = (templateDoc: Doc, row: KeyValuePair) => {
         const metaKey = row.props.keyName;
-        const fieldTemplate = Doc.IsDelegateField(templateDoc, metaKey) ? Doc.MakeDelegate(templateDoc) : Doc.MakeAlias(templateDoc);
+        const fieldTemplate = Doc.IsDelegateField(templateDoc, metaKey) ? Doc.MakeDelegate(templateDoc) : Doc.MakeEmbedding(templateDoc);
         fieldTemplate.title = metaKey;
-        fieldTemplate.fitWidth = true;
+        fieldTemplate.layout_fitWidth = true;
         fieldTemplate._xMargin = 10;
         fieldTemplate._yMargin = 10;
         fieldTemplate._width = 100;
@@ -280,8 +284,8 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
 
     render() {
         const dividerDragger =
-            this.splitPercentage === 0 ? null : (
-                <div className="keyValueBox-dividerDragger" style={{ transform: `translate(calc(${100 - this.splitPercentage}% - 5px), 0px)` }}>
+            this._splitPercentage === 0 ? null : (
+                <div className="keyValueBox-dividerDragger" style={{ transform: `translate(calc(${100 - this._splitPercentage}% - 5px), 0px)` }}>
                     <div className="keyValueBox-dividerDraggerThumb" onPointerDown={this.onDividerDown} />
                 </div>
             );
@@ -291,10 +295,10 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                 <table className="keyValueBox-table">
                     <tbody className="keyValueBox-tbody">
                         <tr className="keyValueBox-header">
-                            <th className="keyValueBox-key" style={{ width: `${100 - this.splitPercentage}%` }} ref={this._keyHeader} onPointerDown={SetupDrag(this._keyHeader, this.getFieldView)}>
+                            <th className="keyValueBox-key" style={{ width: `${100 - this._splitPercentage}%` }} ref={this._keyHeader} onPointerDown={SetupDrag(this._keyHeader, this.getFieldView)}>
                                 Key
                             </th>
-                            <th className="keyValueBox-fields" style={{ width: `${this.splitPercentage}%` }}>
+                            <th className="keyValueBox-fields" style={{ width: `${this._splitPercentage}%` }}>
                                 Fields
                             </th>
                         </tr>
diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss
index 5b660e582..57d36932e 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -1,60 +1,52 @@
-@import "../global/globalCssVariables";
-
+@import '../global/globalCssVariables';
 
 .keyValuePair-td-key {
-    display:inline-block;
+    display: inline-block;
 
-    .keyValuePair-td-key-container{
-        width:100%;
-        height:100%;
-        display: flex;                 
-        flex-direction: row;           
-        flex-wrap: nowrap;              
-        justify-content: space-between; 
-        align-items: center;
-        .keyValuePair-td-key-delete{
+    .keyValuePair-td-key-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        .keyValuePair-td-key-delete {
             position: relative;
             background-color: transparent;
-            color:red;
+            color: red;
         }
         .keyValuePair-td-key-check {
             position: relative;
             margin: 0;
         }
         .keyValuePair-keyField {
-            width:100%;
+            width: 100%;
             margin-left: 20px;
-            margin-top: -1px;
             font-family: monospace;
-            // text-align: center;
-            align-self: center;
             position: relative;
             overflow: auto;
+            display: inline;
         }
     }
 }
 .keyValuePair-td-value {
-    display:inline-block;
+    display: inline-block;
     overflow: scroll;
     font-family: monospace;
     height: 30px;
-        .keyValuePair-td-value-container {
-            display: flex;
-            align-items: center;
-            align-content: center;
-            flex-direction: row;
-            justify-content: space-between;
-            flex-wrap: nowrap;
-            width: 100%;
-            height: 100%;
+    .keyValuePair-td-value-container {
+        display: inline;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
 
-            img { 
-                max-height: 36px;
-                width: auto;
-            }
-            .videoBox-cont{
-                width: auto; 
-                max-height: 36px; 
-            }
+        img {
+            max-height: 36px;
+            width: auto;
+        }
+        .videoBox-cont {
+            width: auto;
+            max-height: 36px;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 7ea6d42ff..64f25cb22 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -13,6 +13,7 @@ import { KeyValueBox } from './KeyValueBox';
 import './KeyValueBox.scss';
 import './KeyValuePair.scss';
 import React = require('react');
+import { DocCast } from '../../../fields/Types';
 
 // Represents one row in a key value plane
 
@@ -56,8 +57,8 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
         const props: FieldViewProps = {
             Document: this.props.doc,
             DataDoc: this.props.doc,
-            docFilters: returnEmptyFilter,
-            docRangeFilters: returnEmptyFilter,
+            childFilters: returnEmptyFilter,
+            childFiltersByRanges: returnEmptyFilter,
             searchFilterDocs: returnEmptyDoclist,
             styleProvider: DefaultStyleProvider,
             docViewPath: returnEmptyDoclist,
@@ -66,7 +67,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             isSelected: returnFalse,
             setHeight: returnFalse,
             select: emptyFunction,
-            dropAction: 'alias',
+            dropAction: 'embed',
             bringToFront: emptyFunction,
             renderDepth: 1,
             isContentActive: returnFalse,
@@ -87,7 +88,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                 break;
             }
             protoCount++;
-            doc = doc.proto;
+            doc = DocCast(doc.proto);
         }
         const parenCount = Math.max(0, protoCount - 1);
         const keyStyle = protoCount === 0 ? 'black' : 'blue';
@@ -104,12 +105,12 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                             onClick={undoBatch(() => {
                                 if (Object.keys(props.Document).indexOf(props.fieldKey) !== -1) {
                                     delete props.Document[props.fieldKey];
-                                } else delete props.Document.proto![props.fieldKey];
+                                } else delete DocCast(props.Document.proto)?.[props.fieldKey];
                             })}>
                             X
                         </button>
-                        <input className={'keyValuePair-td-key-check'} type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} />
-                        <div className="keyValuePair-keyField" style={{ color: keyStyle }}>
+                        <input className="keyValuePair-td-key-check" type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} />
+                        <div className="keyValuePair-keyField" style={{ marginLeft: 35 * (props.fieldKey.match(/_/g)?.length || 0), color: keyStyle }}>
                             {'('.repeat(parenCount)}
                             {props.fieldKey}
                             {')'.repeat(parenCount)}
@@ -118,13 +119,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                 </td>
                 <td className="keyValuePair-td-value" style={{ width: `${100 - this.props.keyWidth}%` }} onContextMenu={this.onContextMenu}>
                     <div className="keyValuePair-td-value-container">
-                        <EditableView
-                            contents={contents}
-                            maxHeight={36}
-                            height={'auto'}
-                            GetValue={() => Field.toKeyValueString(props.Document, props.fieldKey)}
-                            SetValue={(value: string) => KeyValueBox.SetField(props.Document, props.fieldKey, value)}
-                        />
+                        <EditableView contents={contents} GetValue={() => Field.toKeyValueString(props.Document, props.fieldKey)} SetValue={(value: string) => KeyValueBox.SetField(props.Document, props.fieldKey, value)} />
                     </div>
                 </td>
             </tr>
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 916458dfd..52f3575cb 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -37,7 +37,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
     }
 
     getTitle() {
-        return this.rootDoc['title-custom'] ? StrCast(this.rootDoc.title) : this.props.label ? this.props.label : typeof this.rootDoc[this.fieldKey] === 'string' ? StrCast(this.rootDoc[this.fieldKey]) : StrCast(this.rootDoc.title);
+        return this.rootDoc.title_custom ? StrCast(this.rootDoc.title) : this.props.label ? this.props.label : typeof this.rootDoc[this.fieldKey] === 'string' ? StrCast(this.rootDoc[this.fieldKey]) : StrCast(this.rootDoc.title);
     }
 
     protected createDropTarget = (ele: HTMLDivElement) => {
@@ -82,13 +82,13 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
         return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
     }
 
-    fitTextToBox = (r: any): any => {
+    fitTextToBox = (r: any) => {
         const singleLine = BoolCast(this.rootDoc._singleLine, true);
         const params = {
             rotateText: null,
             fontSizeFactor: 1,
-            minimumFontSize: NumCast(this.rootDoc._minFontSize, 8),
-            maximumFontSize: NumCast(this.rootDoc._maxFontSize, 1000),
+            minimumFontSize: NumCast(this.rootDoc._label_minFontSize, 8),
+            maximumFontSize: NumCast(this.rootDoc._label_maxFontSize, 1000),
             limitingDimension: 'both',
             horizontalAlign: 'center',
             verticalAlign: 'center',
@@ -130,9 +130,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
                     className="labelBox-mainButton"
                     style={{
                         backgroundColor: this.hoverColor,
-                        fontSize: StrCast(this.layoutDoc._fontSize),
+                        fontSize: StrCast(this.layoutDoc._text_fontSize),
                         color: StrCast(this.layoutDoc._color),
-                        fontFamily: StrCast(this.layoutDoc._fontFamily) || 'inherit',
+                        fontFamily: StrCast(this.layoutDoc._text_fontFamily) || 'inherit',
                         letterSpacing: StrCast(this.layoutDoc.letterSpacing),
                         textTransform: StrCast(this.layoutDoc.textTransform) as any,
                         paddingLeft: NumCast(this.rootDoc._xPadding),
@@ -141,9 +141,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
                         paddingBottom: NumCast(this.rootDoc._yPadding),
                         width: this.props.PanelWidth(),
                         height: this.props.PanelHeight(),
-                        whiteSpace: boxParams.singleLine ? 'pre' : 'pre-wrap',
+                        whiteSpace: typeof boxParams !== 'number' && boxParams.singleLine ? 'pre' : 'pre-wrap',
                     }}>
-                    <span style={{ width: boxParams.singleLine ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}>
+                    <span style={{ width: typeof boxParams !== 'number' && boxParams.singleLine ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}>
                         {label.startsWith('#') ? null : label.replace(/([^a-zA-Z])/g, '$1\u200b')}
                     </span>
                 </div>
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index 31f1775e5..e86b881a8 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -46,14 +46,14 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
             const separation = Math.sqrt((pt[0] - e.clientX) * (pt[0] - e.clientX) + (pt[1] - e.clientY) * (pt[1] - e.clientY));
             if (separation > 100) {
                 const dragData = new DragManager.DocumentDragData([this.rootDoc]);
-                dragData.dropAction = 'alias';
-                dragData.removeDropProperties = ['anchor1_x', 'anchor1_y', 'anchor2_x', 'anchor2_y', 'onClick'];
+                dragData.dropAction = 'embed';
+                dragData.removeDropProperties = ['link_anchor_1_x', 'link_anchor_1_y', 'link_anchor_2_x', 'link_anchor_2_y', 'onClick'];
                 DragManager.StartDocumentDrag([this._ref.current!], dragData, pt[0], pt[1]);
                 return true;
             } else {
                 this.rootDoc[this.fieldKey + '_x'] = ((pt[0] - bounds.left) / bounds.width) * 100;
                 this.rootDoc[this.fieldKey + '_y'] = ((pt[1] - bounds.top) / bounds.height) * 100;
-                this.rootDoc.linkAutoMove = false;
+                this.rootDoc.link_autoMoveAnchors = false;
             }
         }
         return false;
@@ -67,10 +67,14 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const x = NumCast(this.rootDoc[this.fieldKey + '_x'], 100);
         const y = NumCast(this.rootDoc[this.fieldKey + '_y'], 100);
         const background = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.BackgroundColor + ':anchor');
-        const anchor = this.fieldKey === 'anchor1' ? 'anchor2' : 'anchor1';
-        const anchorScale = !this.dataDoc[this.fieldKey + '-useLinkSmallAnchor'] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : 0.25;
+        const anchor = this.fieldKey === 'link_anchor_1' ? 'link_anchor_2' : 'link_anchor_1';
+        const anchorScale = !this.dataDoc[this.fieldKey + '_useSmallAnchor'] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : 0.25;
         const targetTitle = StrCast((this.dataDoc[anchor] as Doc)?.title);
-        const selView = SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('anchor1') ? 'anchor1' : SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('anchor2') ? 'anchor2' : '';
+        const selView = SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('link_anchor_1')
+            ? 'link_anchor_1'
+            : SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('link_anchor_2')
+            ? 'link_anchor_2'
+            : '';
         return (
             <div
                 ref={this._ref}
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 46ccdecae..710d41471 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -9,7 +9,7 @@ import './LinkBox.scss';
 
 @observer
 export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
-    public static LayoutString(fieldKey: string) {
+    public static LayoutString(fieldKey: string = 'link') {
         return FieldView.LayoutString(LinkBox, fieldKey);
     }
 
@@ -23,7 +23,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
             <div className={`linkBox-container${this.props.isContentActive() ? '-interactive' : ''}`} style={{ background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor) }}>
                 <ComparisonBox
                     {...this.props}
-                    fieldKey="anchor"
+                    fieldKey="link_anchor"
                     setHeight={emptyFunction}
                     dontRegisterView={true}
                     renderDepth={this.props.renderDepth + 1}
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
index 91bd505c5..c45045a8a 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.tsx
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -24,7 +24,7 @@ export class LinkDescriptionPopup extends React.Component<{}> {
     onDismiss = (add: boolean) => {
         LinkDescriptionPopup.descriptionPopup = false;
         if (add) {
-            LinkManager.currentLink && (Doc.GetProto(LinkManager.currentLink).description = this.description);
+            LinkManager.currentLink && (Doc.GetProto(LinkManager.currentLink).link_description = this.description);
         }
     };
 
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index c58b5dd8c..86191de63 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -3,11 +3,12 @@ import { Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import wiki from 'wikijs';
-import { Doc, DocCastAsync, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
+import { Doc, DocCastAsync, Opt } from '../../../fields/Doc';
+import { Height, Width } from '../../../fields/DocSymbols';
 import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils';
 import { DocServer } from '../../DocServer';
-import { Docs, DocUtils } from '../../documents/Documents';
+import { Docs } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DragManager } from '../../util/DragManager';
 import { LinkFollower } from '../../util/LinkFollower';
@@ -58,13 +59,13 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
         var linkTarget = this.props.linkDoc;
         this._linkSrc = this.props.linkSrc;
         this._linkDoc = this.props.linkDoc;
-        const anchor1 = this._linkDoc?.anchor1 as Doc;
-        const anchor2 = this._linkDoc?.anchor2 as Doc;
-        if (anchor1 && anchor2) {
-            linkTarget = Doc.AreProtosEqual(anchor1, this._linkSrc) || Doc.AreProtosEqual(anchor1?.annotationOn as Doc, this._linkSrc) ? anchor2 : anchor1;
+        const link_anchor_1 = this._linkDoc?.link_anchor_1 as Doc;
+        const link_anchor_2 = this._linkDoc?.link_anchor_2 as Doc;
+        if (link_anchor_1 && link_anchor_2) {
+            linkTarget = Doc.AreProtosEqual(link_anchor_1, this._linkSrc) || Doc.AreProtosEqual(link_anchor_1?.annotationOn as Doc, this._linkSrc) ? link_anchor_2 : link_anchor_1;
         }
         if (linkTarget?.annotationOn && linkTarget?.type !== DocumentType.RTF) {
-            // want to show annotation context document if annotation is not text
+            // want to show annotation embedContainer document if annotation is not text
             linkTarget && DocCastAsync(linkTarget.annotationOn).then(action(anno => (this._markerTargetDoc = this._targetDoc = anno)));
         } else {
             this._markerTargetDoc = this._targetDoc = linkTarget;
@@ -111,7 +112,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                     action(anchor => {
                         if (anchor instanceof Doc && LinkManager.Links(anchor).length) {
                             this._linkDoc = this._linkDoc ?? LinkManager.Links(anchor)[0];
-                            const automaticLink = this._linkDoc.linkRelationship === LinkManager.AutoKeywords;
+                            const automaticLink = this._linkDoc.link_relationship === LinkManager.AutoKeywords;
                             if (automaticLink) {
                                 // automatic links specify the target in the link info, not the source
                                 const linkTarget = anchor;
@@ -123,7 +124,6 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                                 this._markerTargetDoc = linkTarget;
                                 this._targetDoc = /*linkTarget?.type === DocumentType.MARKER &&*/ linkTarget?.annotationOn ? Cast(linkTarget.annotationOn, Doc, null) ?? linkTarget : linkTarget;
                             }
-                            this._toolTipText = 'link to ' + this._targetDoc?.title;
                             if (LinkDocPreview.LinkInfo?.noPreview || this._linkSrc?.followLinkToggle || this._markerTargetDoc?.type === DocumentType.PRES) this.followLink();
                         }
                     })
@@ -175,7 +175,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
         } else if (this.props.hrefs?.length) {
             const webDoc =
                 Array.from(SearchBox.staticSearchCollection(Doc.MyFilesystem, this.props.hrefs[0]).keys()).lastElement() ??
-                Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _nativeWidth: 850, _width: 200, _height: 400, useCors: true });
+                Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _nativeWidth: 850, _width: 200, _height: 400, data_useCors: true });
             this.props.docProps?.addDocTab(webDoc, OpenWhere.lightbox);
         }
     };
@@ -184,17 +184,17 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
 
     width = () => {
         if (!this._targetDoc) return 225;
-        if (this._targetDoc[WidthSym]() < this._targetDoc?.[HeightSym]()) {
-            return (Math.min(225, this._targetDoc[HeightSym]()) * this._targetDoc[WidthSym]()) / this._targetDoc[HeightSym]();
+        if (this._targetDoc[Width]() < this._targetDoc?.[Height]()) {
+            return (Math.min(225, this._targetDoc[Height]()) * this._targetDoc[Width]()) / this._targetDoc[Height]();
         }
-        return Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225));
+        return Math.min(225, NumCast(this._targetDoc?.[Width](), 225));
     };
     height = () => {
         if (!this._targetDoc) return 225;
-        if (this._targetDoc[WidthSym]() > this._targetDoc?.[HeightSym]()) {
-            return (Math.min(225, this._targetDoc[WidthSym]()) * this._targetDoc[HeightSym]()) / this._targetDoc[WidthSym]();
+        if (this._targetDoc[Width]() > this._targetDoc?.[Height]()) {
+            return (Math.min(225, this._targetDoc[Width]()) * this._targetDoc[Height]()) / this._targetDoc[Width]();
         }
-        return Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225));
+        return Math.min(225, NumCast(this._targetDoc?.[Height](), 225));
     };
     @computed get previewHeader() {
         return !this._linkDoc || !this._markerTargetDoc || !this._targetDoc || !this._linkSrc ? null : (
@@ -208,7 +208,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                 </div>
                 <div className="linkDocPreview-title" style={{ pointerEvents: 'all' }}>
                     {StrCast(this._markerTargetDoc.title).length > 16 ? StrCast(this._markerTargetDoc.title).substr(0, 16) + '...' : StrCast(this._markerTargetDoc.title)}
-                    <p className="linkDocPreview-description"> {StrCast(this._linkDoc.description)}</p>
+                    <p className="linkDocPreview-description"> {StrCast(this._linkDoc.link_description)}</p>
                 </div>
                 <div className="linkDocPreview-buttonBar" style={{ float: 'right' }}>
                     <Tooltip title={<div className="dash-tooltip">Next Link</div>} placement="top">
@@ -263,13 +263,13 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                             isDocumentActive={returnFalse}
                             isContentActive={returnFalse}
                             addDocument={returnFalse}
-                            showTitle={returnEmptyString}
+                            layout_showTitle={returnEmptyString}
                             removeDocument={returnFalse}
                             addDocTab={returnFalse}
                             pinToPres={returnFalse}
                             dontRegisterView={true}
-                            docFilters={returnEmptyFilter}
-                            docRangeFilters={returnEmptyFilter}
+                            childFilters={returnEmptyFilter}
+                            childFiltersByRanges={returnEmptyFilter}
                             searchFilterDocs={returnEmptyDoclist}
                             renderDepth={0}
                             suppressSetHeight={true}
@@ -278,7 +278,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                             pointerEvents={returnNone}
                             focus={emptyFunction}
                             whenChildContentsActiveChanged={returnFalse}
-                            ignoreAutoHeight={true} // need to ignore autoHeight otherwise autoHeight text boxes will expand beyond the preview panel size.
+                            ignoreAutoHeight={true} // need to ignore layout_autoHeight otherwise layout_autoHeight text boxes will expand beyond the preview panel size.
                             bringToFront={returnFalse}
                             NativeWidth={Doc.NativeWidth(this._targetDoc) ? () => Doc.NativeWidth(this._targetDoc) : undefined}
                             NativeHeight={Doc.NativeHeight(this._targetDoc) ? () => Doc.NativeHeight(this._targetDoc) : undefined}
@@ -296,7 +296,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                 className="linkDocPreview"
                 ref={this._linkDocRef}
                 onPointerDown={this.followLinkPointerDown}
-                style={{ display: !this._toolTipText ? 'none' : undefined, left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
+                style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
                 {this.docPreview}
             </div>
         );
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index 8c5255f80..fcbd0128d 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -8,6 +8,7 @@ import { Networking } from '../../Network';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
 import './LoadingBox.scss';
+import { Id } from '../../../fields/FieldSymbols';
 
 /**
  * LoadingBox Class represents a placeholder doc for documents that are currently
@@ -43,7 +44,7 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             this.rootDoc.loadingError = 'Upload interrupted, please try again';
         } else {
             const updateFunc = async () => {
-                const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc.title));
+                const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc[Id])); // We use the guid of the overwriteDoc to track file uploads. 
                 runInAction(() => (this.progress = result.progress));
                 this._timer = setTimeout(updateFunc, 1000);
             };
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 36be7d257..93e54ffb7 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -4,7 +4,8 @@ import BingMapsReact from 'bingmaps-react';
 import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast, Opt, WidthSym } from '../../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
+import { Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { NumCast, StrCast } from '../../../../fields/Types';
@@ -98,7 +99,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return FieldView.LayoutString(MapBox, fieldKey);
     }
     public get SidebarKey() {
-        return this.fieldKey + '-sidebar';
+        return this.fieldKey + '_sidebar';
     }
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean) => void);
     @computed get inlineTextAnnotations() {
@@ -126,7 +127,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @observable _showSidebar = false;
     @computed get SidebarShown() {
-        return this._showSidebar || this.layoutDoc._showSidebar ? true : false;
+        return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false;
     }
 
     static _canAnnotate = true;
@@ -267,7 +268,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         setTimeout(() => {
             if (this._loadPending && this._map.getBounds()) {
                 this._loadPending = false;
-                this.layoutDoc.fitContentsToBox && this.fitBounds(this._map);
+                this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
             }
         }, 250);
         // listener to addmarker event
@@ -282,7 +283,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     centered = () => {
         if (this._loadPending && this._map.getBounds()) {
             this._loadPending = false;
-            this.layoutDoc.fitContentsToBox && this.fitBounds(this._map);
+            this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
         }
         this.dataDoc.mapLat = this._map.getCenter()?.lat();
         this.dataDoc.mapLng = this._map.getCenter()?.lng();
@@ -292,7 +293,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     zoomChanged = () => {
         if (this._loadPending && this._map.getBounds()) {
             this._loadPending = false;
-            this.layoutDoc.fitContentsToBox && this.fitBounds(this._map);
+            this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
         }
         this.dataDoc.mapZoom = this._map.getZoom();
     };
@@ -327,7 +328,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      */
     sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
         console.log('print all sidebar Docs');
-        if (!this.layoutDoc._showSidebar) this.toggleSidebar();
+        if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
         const docs = doc instanceof Doc ? [doc] : doc;
         docs.forEach(doc => {
             if (doc.lat !== undefined && doc.lng !== undefined) {
@@ -351,7 +352,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * @returns
      */
     sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
-        if (this.layoutDoc._showSidebar) this.toggleSidebar();
+        if (this.layoutDoc._layout_showSidebar) this.toggleSidebar();
         const docs = doc instanceof Doc ? [doc] : doc;
         return this.removeDocument(doc, sidebarKey);
     };
@@ -370,16 +371,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         .ScreenToLocalTransform()
                         .scale(this.props.NativeDimScaling?.() || 1)
                         .transformDirection(delta[0], delta[1]);
-                    const fullWidth = this.layoutDoc[WidthSym]();
+                    const fullWidth = this.layoutDoc[Width]();
                     const mapWidth = fullWidth - this.sidebarWidth();
                     if (this.sidebarWidth() + localDelta[0] > 0) {
                         this._showSidebar = true;
                         this.layoutDoc._width = fullWidth + localDelta[0];
-                        this.layoutDoc._sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%';
+                        this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%';
                     } else {
                         this._showSidebar = false;
                         this.layoutDoc._width = mapWidth;
-                        this.layoutDoc._sidebarWidthPercent = '0%';
+                        this.layoutDoc._layout_sidebarWidthPercent = '0%';
                     }
                     return false;
                 }),
@@ -388,12 +389,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     };
 
-    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
-    @computed get sidebarWidthPercent() {
-        return StrCast(this.layoutDoc._sidebarWidthPercent, '0%');
+    sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
+    @computed get layout_sidebarWidthPercent() {
+        return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
     }
     @computed get sidebarColor() {
-        return StrCast(this.layoutDoc.sidebarColor, StrCast(this.layoutDoc[this.props.fieldKey + '-backgroundColor'], '#e4e4e4'));
+        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4'));
     }
 
     /**
@@ -453,7 +454,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 title="Toggle Sidebar"
                 style={{
                     display: !this.props.isContentActive() ? 'none' : undefined,
-                    top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
+                    top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5,
                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
                 }}
                 onPointerDown={this.sidebarBtnDown}>
@@ -467,8 +468,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     toggleSidebar = () => {
         //1.2 * w * ? = .2 * w      .2/1.2
         const prevWidth = this.sidebarWidth();
-        this.layoutDoc._showSidebar = (this.layoutDoc._sidebarWidthPercent = StrCast(this.layoutDoc._sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%';
-        this.layoutDoc._width = this.layoutDoc._showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth);
+        this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%';
+        this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth);
     };
 
     sidebarDown = (e: React.PointerEvent) => {
@@ -476,8 +477,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
     sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => {
         const bounds = this._ref.current!.getBoundingClientRect();
-        this.layoutDoc._sidebarWidthPercent = '' + 100 * Math.max(0, 1 - (e.clientX - bounds.left) / bounds.width) + '%';
-        this.layoutDoc._showSidebar = this.layoutDoc._sidebarWidthPercent !== '0%';
+        this.layoutDoc._layout_sidebarWidthPercent = '' + 100 * Math.max(0, 1 - (e.clientX - bounds.left) / bounds.width) + '%';
+        this.layoutDoc._layout_showSidebar = this.layoutDoc._layout_sidebarWidthPercent !== '0%';
         e.preventDefault();
         return false;
     };
@@ -548,9 +549,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth();
     panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
-    scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop));
-    transparentFilter = () => [...this.props.docFilters(), Utils.IsTransparentFilter()];
-    opaqueFilter = () => [...this.props.docFilters(), Utils.IsOpaqueFilter()];
+    scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
+    transparentFilter = () => [...this.props.childFilters(), Utils.IsTransparentFilter()];
+    opaqueFilter = () => [...this.props.childFilters(), Utils.IsOpaqueFilter()];
     infoWidth = () => this.props.PanelWidth() / 5;
     infoHeight = () => this.props.PanelHeight() / 5;
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
@@ -600,7 +601,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
     bingMapReady = (map: any) => (this._bingMap = map.map);
     render() {
-        const renderAnnotations = (docFilters?: () => string[]) => null;
+        const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
             <div className="mapBox" ref={this._ref}>
                 <div
@@ -616,7 +617,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         //     zoom: 15,
                         // });
                     }}
-                    style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
+                    style={{ width: `calc(100% - ${this.layout_sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
                     <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
                     {renderAnnotations(this.opaqueFilter)}
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
@@ -667,7 +668,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     )}
                 </div>
                 {/* </LoadScript > */}
-                <div className="mapBox-sidebar" style={{ position: 'absolute', right: 0, height: '100%', width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+                <div className="mapBox-sidebar" style={{ position: 'absolute', right: 0, height: '100%', width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
                         {...this.props}
diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx
new file mode 100644
index 000000000..72f37b62c
--- /dev/null
+++ b/src/client/views/nodes/MapBox/MapBox2.tsx
@@ -0,0 +1,642 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api';
+import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
+import { Width } from '../../../../fields/DocSymbols';
+import { Id } from '../../../../fields/FieldSymbols';
+import { InkTool } from '../../../../fields/InkField';
+import { NumCast, StrCast } from '../../../../fields/Types';
+import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { Docs } from '../../../documents/Documents';
+import { DragManager } from '../../../util/DragManager';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { UndoManager } from '../../../util/UndoManager';
+import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm';
+import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent';
+import { Colors } from '../../global/globalEnums';
+import { MarqueeAnnotator } from '../../MarqueeAnnotator';
+import { AnchorMenu } from '../../pdf/AnchorMenu';
+import { Annotation } from '../../pdf/Annotation';
+import { SidebarAnnos } from '../../SidebarAnnos';
+import { FieldView, FieldViewProps } from '../FieldView';
+import { PinProps } from '../trails';
+import './MapBox2.scss';
+import { MapBoxInfoWindow } from './MapBoxInfoWindow';
+
+/**
+ * MapBox2 architecture:
+ * Main component: MapBox2.tsx
+ * Supporting Components: SidebarAnnos, CollectionStackingView
+ *
+ * MapBox2 is a node that extends the ViewBoxAnnotatableComponent. Similar to PDFBox and WebBox, it supports interaction between sidebar content and document content.
+ * The main body of MapBox2 uses Google Maps API to allow location retrieval, adding map markers, pan and zoom, and open street view.
+ * Dash Document architecture is integrated with Maps API: When drag and dropping documents with ExifData (gps Latitude and Longitude information) available,
+ * sidebarAddDocument function checks if the document contains lat & lng information, if it does, then the document is added to both the sidebar and the infowindow (a pop up corresponding to a map marker--pin on map).
+ * The lat and lng field of the document is filled when importing (spec see ConvertDMSToDD method and processFileUpload method in Documents.ts).
+ * A map marker is considered a document that contains a collection with stacking view of documents, it has a lat, lng location, which is passed to Maps API's custom marker (red pin) to be rendered on the google maps
+ */
+
+// const _global = (window /* browser */ || global /* node */) as any;
+
+const mapContainerStyle = {
+    height: '100%',
+};
+
+const defaultCenter = {
+    lat: 42.360081,
+    lng: -71.058884,
+};
+
+const mapOptions = {
+    fullscreenControl: false,
+};
+
+const apiKey = process.env.GOOGLE_MAPS;
+
+const script = document.createElement('script');
+script.defer = true;
+script.async = true;
+script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,drawing`;
+console.log(script.src);
+document.head.appendChild(script);
+
+/**
+ * Consider integrating later: allows for drawing, circling, making shapes on map
+ */
+// const drawingManager = new window.google.maps.drawing.DrawingManager({
+//     drawingControl: true,
+//     drawingControlOptions: {
+//         position: google.maps.ControlPosition.TOP_RIGHT,
+//         drawingModes: [
+//             google.maps.drawing.OverlayType.MARKER,
+//             // currently we are not supporting the following drawing mode on map, a thought for future development
+//             google.maps.drawing.OverlayType.CIRCLE,
+//             google.maps.drawing.OverlayType.POLYLINE,
+//         ],
+//     },
+// });
+
+// options for searchbox in Google Maps Places Autocomplete API
+const options = {
+    fields: ['formatted_address', 'geometry', 'name'], // note: level of details is charged by item per retrieval, not recommended to return all fields
+    strictBounds: false,
+    types: ['establishment'], // type pf places, subject of change according to user need
+} as google.maps.places.AutocompleteOptions;
+
+@observer
+export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps & Partial<GoogleMapProps>>() {
+    private _dropDisposer?: DragManager.DragDropDisposer;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
+    @observable private _overlayAnnoInfo: Opt<Doc>;
+    showInfo = action((anno: Opt<Doc>) => (this._overlayAnnoInfo = anno));
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(MapBox2, fieldKey);
+    }
+    public get SidebarKey() {
+        return this.fieldKey + '_sidebar';
+    }
+    private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean) => void);
+    @computed get inlineTextAnnotations() {
+        return this.allMapMarkers.filter(a => a.textInlineAnnotations);
+    }
+
+    @observable private _map: google.maps.Map = null as unknown as google.maps.Map;
+    @observable private selectedPlace: Doc | undefined;
+    @observable private markerMap: { [id: string]: google.maps.Marker } = {};
+    @observable private center = navigator.geolocation ? navigator.geolocation.getCurrentPosition : defaultCenter;
+    @observable private _marqueeing: number[] | undefined;
+    @observable private _isAnnotating = false;
+    @observable private inputRef = React.createRef<HTMLInputElement>();
+    @observable private searchMarkers: google.maps.Marker[] = [];
+    @observable private searchBox = new window.google.maps.places.Autocomplete(this.inputRef.current!, options);
+    @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+    @computed get allSidebarDocs() {
+        return DocListCast(this.dataDoc[this.SidebarKey]);
+    }
+    @computed get allMapMarkers() {
+        return DocListCast(this.dataDoc[this.annotationKey]);
+    }
+    @observable private toggleAddMarker = false;
+    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+
+    @observable _showSidebar = false;
+    @computed get SidebarShown() {
+        return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false;
+    }
+
+    static _canAnnotate = true;
+    static _hadSelection: boolean = false;
+    private _sidebarRef = React.createRef<SidebarAnnos>();
+    private _ref: React.RefObject<HTMLDivElement> = React.createRef();
+
+    componentDidMount() {
+        this.props.setContentView?.(this);
+    }
+
+    @action
+    private setSearchBox = (searchBox: any) => {
+        this.searchBox = searchBox;
+    };
+
+    // iterate allMarkers to size, center, and zoom map to contain all markers
+    private fitBounds = (map: google.maps.Map) => {
+        const curBounds = map.getBounds() ?? new window.google.maps.LatLngBounds();
+        const isFitting = this.allMapMarkers.reduce((fits, place) => fits && curBounds?.contains({ lat: NumCast(place.lat), lng: NumCast(place.lng) }), true as boolean);
+        !isFitting && map.fitBounds(this.allMapMarkers.reduce((bounds, place) => bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) }), new window.google.maps.LatLngBounds()));
+    };
+
+    /**
+     * Custom control for add marker button
+     * @param controlDiv
+     * @param map
+     */
+    private CenterControl = () => {
+        const controlDiv = document.createElement('div');
+        controlDiv.className = 'MapBox2-addMarker';
+        // Set CSS for the control border.
+        const controlUI = document.createElement('div');
+        controlUI.style.backgroundColor = '#fff';
+        controlUI.style.borderRadius = '3px';
+        controlUI.style.cursor = 'pointer';
+        controlUI.style.marginTop = '10px';
+        controlUI.style.borderRadius = '4px';
+        controlUI.style.marginBottom = '22px';
+        controlUI.style.textAlign = 'center';
+        controlUI.style.position = 'absolute';
+        controlUI.style.width = '32px';
+        controlUI.style.height = '32px';
+        controlUI.title = 'Click to toggle marker mode.  In marker mode, click on map to place a marker.';
+
+        const plIcon = document.createElement('img');
+        plIcon.src = 'https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-256.png';
+        plIcon.style.color = 'rgb(25,25,25)';
+        plIcon.style.fontFamily = 'Roboto,Arial,sans-serif';
+        plIcon.style.fontSize = '16px';
+        plIcon.style.lineHeight = '32px';
+        plIcon.style.left = '18';
+        plIcon.style.top = '15';
+        plIcon.style.position = 'absolute';
+        plIcon.width = 14;
+        plIcon.height = 14;
+        plIcon.innerHTML = 'Add';
+        controlUI.appendChild(plIcon);
+
+        // Set CSS for the control interior.
+        const markerIcon = document.createElement('img');
+        markerIcon.src = 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-1024.png';
+        markerIcon.style.color = 'rgb(25,25,25)';
+        markerIcon.style.fontFamily = 'Roboto,Arial,sans-serif';
+        markerIcon.style.fontSize = '16px';
+        markerIcon.style.lineHeight = '32px';
+        markerIcon.style.left = '-2';
+        markerIcon.style.top = '1';
+        markerIcon.width = 30;
+        markerIcon.height = 30;
+        markerIcon.style.position = 'absolute';
+        markerIcon.innerHTML = 'Add';
+        controlUI.appendChild(markerIcon);
+
+        // Setup the click event listeners
+        controlUI.addEventListener('click', () => {
+            if (this.toggleAddMarker === true) {
+                this.toggleAddMarker = false;
+                console.log('add marker button status:' + this.toggleAddMarker);
+                controlUI.style.backgroundColor = '#fff';
+                markerIcon.style.color = 'rgb(25,25,25)';
+            } else {
+                this.toggleAddMarker = true;
+                console.log('add marker button status:' + this.toggleAddMarker);
+                controlUI.style.backgroundColor = '#4476f7';
+                markerIcon.style.color = 'rgb(255,255,255)';
+            }
+        });
+        controlDiv.appendChild(controlUI);
+        return controlDiv;
+    };
+
+    /**
+     * Place the marker on google maps & store the empty marker as a MapMarker Document in allMarkers list
+     * @param position - the LatLng position where the marker is placed
+     * @param map
+     */
+    @action
+    private placeMarker = (position: google.maps.LatLng, map: google.maps.Map) => {
+        const marker = new google.maps.Marker({
+            position: position,
+            map: map,
+        });
+        map.panTo(position);
+        const mapMarker = Docs.Create.MapMarkerDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {});
+        this.addDocument(mapMarker, this.annotationKey);
+    };
+
+    _loadPending = true;
+    /**
+     * store a reference to google map instance
+     * setup the drawing manager on the top right corner of map
+     * fit map bounds to contain all markers
+     * @param map
+     */
+    @action
+    private loadHandler = (map: google.maps.Map) => {
+        this._map = map;
+        this._loadPending = true;
+        const centerControlDiv = this.CenterControl();
+        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
+        //drawingManager.setMap(map);
+        // if (navigator.geolocation) {
+        //     navigator.geolocation.getCurrentPosition(
+        //         (position: Position) => {
+        //             const pos = {
+        //                 lat: position.coords.latitude,
+        //                 lng: position.coords.longitude,
+        //             };
+        //             this._map.setCenter(pos);
+        //         }
+        //     );
+        // } else {
+        //     alert("Your geolocation is not supported by browser.")
+        // };
+        map.setZoom(NumCast(this.dataDoc.mapZoom, 2.5));
+        map.setCenter(new google.maps.LatLng(NumCast(this.dataDoc.mapLat), NumCast(this.dataDoc.mapLng)));
+        setTimeout(() => {
+            if (this._loadPending && this._map.getBounds()) {
+                this._loadPending = false;
+                this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
+            }
+        }, 250);
+        // listener to addmarker event
+        this._map.addListener('click', (e: MouseEvent) => {
+            if (this.toggleAddMarker === true) {
+                this.placeMarker((e as any).latLng, map);
+            }
+        });
+    };
+
+    @action
+    centered = () => {
+        if (this._loadPending && this._map.getBounds()) {
+            this._loadPending = false;
+            this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
+        }
+        this.dataDoc.mapLat = this._map.getCenter()?.lat();
+        this.dataDoc.mapLng = this._map.getCenter()?.lng();
+    };
+
+    @action
+    zoomChanged = () => {
+        if (this._loadPending && this._map.getBounds()) {
+            this._loadPending = false;
+            this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map);
+        }
+        this.dataDoc.mapZoom = this._map.getZoom();
+    };
+
+    /**
+     * Load and render all map markers
+     * @param marker
+     * @param place
+     */
+    @action
+    private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => {
+        place[Id] ? (this.markerMap[place[Id]] = marker) : null;
+    };
+
+    /**
+     * on clicking the map marker, set the selected place to the marker document & set infowindowopen to be true
+     * @param e
+     * @param place
+     */
+    @action
+    private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => {
+        // set which place was clicked
+        this.selectedPlace = place;
+        place.infoWindowOpen = true;
+    };
+
+    /**
+     * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts
+     * @param doc
+     * @param sidebarKey
+     * @returns
+     */
+    sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
+        console.log('print all sidebar Docs');
+        if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
+        const docs = doc instanceof Doc ? [doc] : doc;
+        docs.forEach(doc => {
+            if (doc.lat !== undefined && doc.lng !== undefined) {
+                const existingMarker = this.allMapMarkers.find(marker => marker.lat === doc.lat && marker.lng === doc.lng);
+                if (existingMarker) {
+                    Doc.AddDocToList(existingMarker, 'data', doc);
+                } else {
+                    const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), false, [doc], {});
+                    this.addDocument(marker, this.annotationKey);
+                }
+            }
+        }); //add to annotation list
+
+        return this.addDocument(doc, sidebarKey); // add to sidebar list
+    };
+
+    /**
+     * Removing documents from the sidebar
+     * @param doc
+     * @param sidebarKey
+     * @returns
+     */
+    sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
+        if (this.layoutDoc._layout_showSidebar) this.toggleSidebar();
+        const docs = doc instanceof Doc ? [doc] : doc;
+        return this.removeDocument(doc, sidebarKey);
+    };
+
+    /**
+     * Toggle sidebar onclick the tiny comment button on the top right corner
+     * @param e
+     */
+    sidebarBtnDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            (e, down, delta) =>
+                runInAction(() => {
+                    const localDelta = this.props
+                        .ScreenToLocalTransform()
+                        .scale(this.props.NativeDimScaling?.() || 1)
+                        .transformDirection(delta[0], delta[1]);
+                    const fullWidth = this.layoutDoc[Width]();
+                    const mapWidth = fullWidth - this.sidebarWidth();
+                    if (this.sidebarWidth() + localDelta[0] > 0) {
+                        this._showSidebar = true;
+                        this.layoutDoc._width = fullWidth + localDelta[0];
+                        this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%';
+                    } else {
+                        this._showSidebar = false;
+                        this.layoutDoc._width = mapWidth;
+                        this.layoutDoc._layout_sidebarWidthPercent = '0%';
+                    }
+                    return false;
+                }),
+            emptyFunction,
+            () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map')
+        );
+    };
+
+    sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
+    @computed get layout_sidebarWidthPercent() {
+        return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
+    }
+    @computed get sidebarColor() {
+        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4'));
+    }
+
+    /**
+     * function that reads the place inputed from searchbox, then zoom in on the location that's been autocompleted;
+     * add a customized temporary marker on the map
+     */
+    @action
+    private handlePlaceChanged = () => {
+        const place = this.searchBox.getPlace();
+
+        if (!place.geometry || !place.geometry.location) {
+            // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed
+            window.alert("No details available for input: '" + place.name + "'");
+            return;
+        }
+
+        // zoom in on the location of the search result
+        if (place.geometry.viewport) {
+            this._map.fitBounds(place.geometry.viewport);
+        } else {
+            this._map.setCenter(place.geometry.location);
+            this._map.setZoom(17);
+        }
+
+        // customize icon => customized icon for the nature of the location selected
+        const icon = {
+            url: place.icon as string,
+            size: new google.maps.Size(71, 71),
+            origin: new google.maps.Point(0, 0),
+            anchor: new google.maps.Point(17, 34),
+            scaledSize: new google.maps.Size(25, 25),
+        };
+
+        // put temporary cutomized marker on searched location
+        this.searchMarkers.forEach(marker => {
+            marker.setMap(null);
+        });
+        this.searchMarkers = [];
+        this.searchMarkers.push(
+            new window.google.maps.Marker({
+                map: this._map,
+                icon,
+                title: place.name,
+                position: place.geometry.location,
+            })
+        );
+    };
+
+    /**
+     * Handles toggle of sidebar on click the little comment button
+     */
+    @computed get sidebarHandle() {
+        return (
+            <div
+                className="MapBox2-overlayButton-sidebar"
+                key="sidebar"
+                title="Toggle Sidebar"
+                style={{
+                    display: !this.props.isContentActive() ? 'none' : undefined,
+                    top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5,
+                    backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
+                }}
+                onPointerDown={this.sidebarBtnDown}>
+                <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
+            </div>
+        );
+    }
+
+    // TODO: Adding highlight box layer to Maps
+    @action
+    toggleSidebar = () => {
+        //1.2 * w * ? = .2 * w      .2/1.2
+        const prevWidth = this.sidebarWidth();
+        this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%';
+        this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth);
+    };
+
+    sidebarDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), true);
+    };
+    sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => {
+        const bounds = this._ref.current!.getBoundingClientRect();
+        this.layoutDoc._layout_sidebarWidthPercent = '' + 100 * Math.max(0, 1 - (e.clientX - bounds.left) / bounds.width) + '%';
+        this.layoutDoc._layout_showSidebar = this.layoutDoc._layout_sidebarWidthPercent !== '0%';
+        e.preventDefault();
+        return false;
+    };
+
+    setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean) => void) => (this._setPreviewCursor = func);
+
+    @action
+    onMarqueeDown = (e: React.PointerEvent) => {
+        if (!e.altKey && e.button === 0 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
+            setupMoveUpEvents(
+                this,
+                e,
+                action(e => {
+                    MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
+                    this._marqueeing = [e.clientX, e.clientY];
+                    return true;
+                }),
+                returnFalse,
+                () => MarqueeAnnotator.clearAnnotations(this._savedAnnotations),
+                false
+            );
+        }
+    };
+    @action finishMarquee = (x?: number, y?: number) => {
+        this._marqueeing = undefined;
+        this._isAnnotating = false;
+        x !== undefined && y !== undefined && this._setPreviewCursor?.(x, y, false, false);
+    };
+
+    addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => {
+        return this.addDocument(doc, annotationKey);
+    };
+
+    pointerEvents = () => {
+        return this.props.isContentActive() && this.props.pointerEvents?.() !== 'none' && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : SnappingManager.GetIsDragging() ? undefined : 'none';
+    };
+    @computed get annotationLayer() {
+        return (
+            <div className="MapBox2-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}>
+                {this.inlineTextAnnotations
+                    .sort((a, b) => NumCast(a.y) - NumCast(b.y))
+                    .map(anno => (
+                        <Annotation key={`${anno[Id]}-annotation`} {...this.props} fieldKey={this.annotationKey} pointerEvents={this.pointerEvents} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} />
+                    ))}
+            </div>
+        );
+    }
+
+    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => AnchorMenu.Instance?.GetAnchor(this._savedAnnotations, addAsAnnotation) ?? this.rootDoc;
+
+    /**
+     * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker
+     * @returns
+     */
+    private renderMarkers = () => {
+        return this.allMapMarkers.map(place => (
+            <Marker key={place[Id]} position={{ lat: NumCast(place.lat), lng: NumCast(place.lng) }} onLoad={marker => this.markerLoadHandler(marker, place)} onClick={(e: google.maps.MapMouseEvent) => this.markerClickHandler(e, place)} />
+        ));
+    };
+
+    // TODO: auto center on select a document in the sidebar
+    private handleMapCenter = (map: google.maps.Map) => {
+        // console.log("print the selected views in selectionManager:")
+        // if (SelectionManager.Views().lastElement()) {
+        //     console.log(SelectionManager.Views().lastElement());
+        // }
+    };
+
+    panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth();
+    panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
+    scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
+    transparentFilter = () => [...this.props.childFilters(), Utils.IsTransparentFilter()];
+    opaqueFilter = () => [...this.props.childFilters(), Utils.IsOpaqueFilter()];
+    infoWidth = () => this.props.PanelWidth() / 5;
+    infoHeight = () => this.props.PanelHeight() / 5;
+    anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
+    savedAnnotations = () => this._savedAnnotations;
+
+    get MicrosoftMaps() {
+        return (window as any).Microsoft.Maps;
+    }
+    render() {
+        const renderAnnotations = (childFilters?: () => string[]) => null;
+        return (
+            <div className="MapBox2" ref={this._ref}>
+                <div
+                    className="MapBox2-wrapper"
+                    onWheel={e => e.stopPropagation()}
+                    onPointerDown={async e => {
+                        e.button === 0 && !e.ctrlKey && e.stopPropagation();
+                    }}
+                    style={{ width: `calc(100% - ${this.layout_sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
+                    <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
+                    {renderAnnotations(this.opaqueFilter)}
+                    {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
+                    {this.annotationLayer}
+
+                    <div>
+                        <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}>
+                            <Autocomplete onLoad={this.setSearchBox} onPlaceChanged={this.handlePlaceChanged}>
+                                <input className="MapBox2-input" ref={this.inputRef} type="text" onKeyDown={e => e.stopPropagation()} placeholder="Enter location" />
+                            </Autocomplete>
+
+                            {this.renderMarkers()}
+                            {this.allMapMarkers
+                                .filter(marker => marker.infoWindowOpen)
+                                .map(marker => (
+                                    <MapBoxInfoWindow
+                                        key={marker[Id]}
+                                        {...this.props}
+                                        setContentView={emptyFunction}
+                                        place={marker}
+                                        markerMap={this.markerMap}
+                                        PanelWidth={this.infoWidth}
+                                        PanelHeight={this.infoHeight}
+                                        moveDocument={this.moveDocument}
+                                        isAnyChildContentActive={this.isAnyChildContentActive}
+                                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                                    />
+                                ))}
+                            {/* {this.handleMapCenter(this._map)} */}
+                        </GoogleMap>
+                    </div>
+                    {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
+                        <MarqueeAnnotator
+                            rootDoc={this.rootDoc}
+                            anchorMenuClick={this.anchorMenuClick}
+                            scrollTop={0}
+                            down={this._marqueeing}
+                            scaling={returnOne}
+                            addDocument={this.addDocumentWrapper}
+                            docView={this.props.docViewPath().lastElement()}
+                            finishMarquee={this.finishMarquee}
+                            savedAnnotations={this.savedAnnotations}
+                            annotationLayer={this._annotationLayer.current}
+                            selectionText={returnEmptyString}
+                            mainCont={this._mainCont.current}
+                        />
+                    )}
+                </div>
+                {/* </LoadScript > */}
+                <div className="MapBox2-sidebar" style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+                    <SidebarAnnos
+                        ref={this._sidebarRef}
+                        {...this.props}
+                        fieldKey={this.fieldKey}
+                        rootDoc={this.rootDoc}
+                        layoutDoc={this.layoutDoc}
+                        dataDoc={this.dataDoc}
+                        usePanelWidth={true}
+                        showSidebar={this.SidebarShown}
+                        nativeWidth={NumCast(this.layoutDoc._nativeWidth)}
+                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                        PanelWidth={this.sidebarWidth}
+                        sidebarAddDocument={this.sidebarAddDocument}
+                        moveDocument={this.moveDocument}
+                        removeDocument={this.sidebarRemoveDocument}
+                    />
+                </div>
+                {this.sidebarHandle}
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
index 7b437c7de..577101445 100644
--- a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
+++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
@@ -32,7 +32,7 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
 
     addNoteClick = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => {
-            const newBox = Docs.Create.TextDocument('Note', { _autoHeight: true });
+            const newBox = Docs.Create.TextDocument('Note', { _layout_autoHeight: true });
             FormattedTextBox.SelectOnLoad = newBox[Id]; // track the new text box so we can give it a prop that tells it to focus itself when it's displayed
             Doc.AddDocToList(this.props.place, 'data', newBox);
             this._stack?.scrollToBottom();
@@ -42,7 +42,7 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
     };
 
     _stack: CollectionStackingView | CollectionNoteTakingView | null | undefined;
-    childFitWidth = (doc: Doc) => doc.type === DocumentType.RTF;
+    childLayoutFitWidth = (doc: Doc) => doc.type === DocumentType.RTF;
     addDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, 'data', d), true as boolean);
     removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, 'data', d), true as boolean);
     render() {
@@ -59,7 +59,7 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
                             fieldKey="data"
                             NativeWidth={returnZero}
                             NativeHeight={returnZero}
-                            docFilters={returnEmptyFilter}
+                            childFilters={returnEmptyFilter}
                             setHeight={emptyFunction}
                             isAnnotationOverlay={false}
                             select={emptyFunction}
@@ -69,12 +69,12 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
                             rootSelected={returnFalse}
                             childHideResizeHandles={returnTrue}
                             childHideDecorationTitle={returnTrue}
-                            childFitWidth={this.childFitWidth}
+                            childLayoutFitWidth={this.childLayoutFitWidth}
                             // childDocumentsActive={returnFalse}
                             removeDocument={this.removeDoc}
                             addDocument={this.addDoc}
                             renderDepth={this.props.renderDepth + 1}
-                            viewType={CollectionViewType.Stacking}
+                            type_collection={CollectionViewType.Stacking}
                             pointerEvents={returnAll}
                         />
                     </div>
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 6aa04e356..c210176b0 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -3,7 +3,8 @@ import { action, computed, IReactionDisposer, observable, reaction, runInAction
 import { observer } from 'mobx-react';
 import * as Pdfjs from 'pdfjs-dist';
 import 'pdfjs-dist/web/pdf_viewer.css';
-import { Doc, DocListCast, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { Height, Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { ComputedField } from '../../../fields/ScriptField';
@@ -63,7 +64,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         super(props);
         const nw = Doc.NativeWidth(this.Document, this.dataDoc) || 927;
         const nh = Doc.NativeHeight(this.Document, this.dataDoc) || 1200;
-        !this.Document._fitWidth && (this.Document._height = this.Document[WidthSym]() * (nh / nw));
+        !this.Document._layout_fitWidth && (this.Document._height = this.Document[Width]() * (nh / nw));
         if (this.pdfUrl) {
             if (PDFBox.pdfcache.get(this.pdfUrl.url.href)) runInAction(() => (this._pdf = PDFBox.pdfcache.get(this.pdfUrl!.url.href)));
             else if (PDFBox.pdfpromise.get(this.pdfUrl.url.href)) PDFBox.pdfpromise.get(this.pdfUrl.url.href)?.then(action((pdf: any) => (this._pdf = pdf)));
@@ -104,15 +105,15 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
         const docViewContent = this.props.docViewPath().lastElement().ContentDiv!;
         const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
-        newDiv.style.width = this.layoutDoc[WidthSym]().toString();
-        newDiv.style.height = this.layoutDoc[HeightSym]().toString();
+        newDiv.style.width = this.layoutDoc[Width]().toString();
+        newDiv.style.height = this.layoutDoc[Height]().toString();
         this.replaceCanvases(docViewContent, newDiv);
         const htmlString = this._pdfViewer?._mainCont.current && new XMLSerializer().serializeToString(newDiv);
 
         const anchx = NumCast(cropping.x);
         const anchy = NumCast(cropping.y);
-        const anchw = cropping[WidthSym]() * (this.props.NativeDimScaling?.() || 1);
-        const anchh = cropping[HeightSym]() * (this.props.NativeDimScaling?.() || 1);
+        const anchw = cropping[Width]() * (this.props.NativeDimScaling?.() || 1);
+        const anchh = cropping[Height]() * (this.props.NativeDimScaling?.() || 1);
         const viewScale = 1;
         cropping.title = 'crop: ' + this.rootDoc.title;
         cropping.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc._width);
@@ -122,15 +123,15 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         cropping.onClick = undefined;
         const croppingProto = Doc.GetProto(cropping);
         croppingProto.annotationOn = undefined;
-        croppingProto.isPrototype = true;
+        croppingProto.isDataDoc = true;
         croppingProto.proto = Cast(this.rootDoc.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO
         croppingProto.type = DocumentType.IMG;
         croppingProto.layout = ImageBox.LayoutString('data');
         croppingProto.data = new ImageField(Utils.CorsProxy('http://www.cs.brown.edu/~bcz/noImage.png'));
-        croppingProto['data-nativeWidth'] = anchw;
-        croppingProto['data-nativeHeight'] = anchh;
+        croppingProto['data_nativeWidth'] = anchw;
+        croppingProto['data_nativeHeight'] = anchh;
         if (addCrop) {
-            DocUtils.MakeLink(region, cropping, { linkRelationship: 'cropped image' });
+            DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' });
         }
         this.props.bringToFront(cropping);
 
@@ -140,8 +141,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             htmlString,
             anchw,
             anchh,
-            (NumCast(region.y) * this.props.PanelWidth()) / NumCast(this.rootDoc[this.fieldKey + '-nativeWidth']),
-            (NumCast(region.x) * this.props.PanelWidth()) / NumCast(this.rootDoc[this.fieldKey + '-nativeWidth']),
+            (NumCast(region.y) * this.props.PanelWidth()) / NumCast(this.rootDoc[this.fieldKey + '_nativeWidth']),
+            (NumCast(region.x) * this.props.PanelWidth()) / NumCast(this.rootDoc[this.fieldKey + '_nativeWidth']),
             4
         )
             .then((data_url: any) => {
@@ -169,19 +170,19 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             CollectionFreeFormView.UpdateIcon(
                 filename,
                 docViewContent,
-                this.layoutDoc[WidthSym](),
-                this.layoutDoc[HeightSym](),
+                this.layoutDoc[Width](),
+                this.layoutDoc[Height](),
                 this.props.PanelWidth(),
                 this.props.PanelHeight(),
-                NumCast(this.layoutDoc._scrollTop),
-                NumCast(this.rootDoc[this.fieldKey + '-nativeHeight'], 1),
+                NumCast(this.layoutDoc._layout_scrollTop),
+                NumCast(this.rootDoc[this.fieldKey + '_nativeHeight'], 1),
                 true,
                 this.layoutDoc[Id] + '-icon',
                 (iconFile: string, nativeWidth: number, nativeHeight: number) => {
                     setTimeout(() => {
                         this.dataDoc.icon = new ImageField(iconFile);
-                        this.dataDoc['icon-nativeWidth'] = nativeWidth;
-                        this.dataDoc['icon-nativeHeight'] = nativeHeight;
+                        this.dataDoc['icon_nativeWidth'] = nativeWidth;
+                        this.dataDoc['icon_nativeHeight'] = nativeHeight;
                     }, 500);
                 }
             );
@@ -201,13 +202,13 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             { fireImmediately: true }
         );
         this._disposers.scroll = reaction(
-            () => this.rootDoc.scrollTop,
+            () => this.rootDoc.layout_scrollTop,
             () => {
-                if (!(ComputedField.WithoutComputed(() => FieldValue(this.props.Document[this.SidebarKey + '-panY'])) instanceof ComputedField)) {
-                    this.props.Document[this.SidebarKey + '-panY'] = ComputedField.MakeFunction('this.scrollTop');
+                if (!(ComputedField.WithoutComputed(() => FieldValue(this.props.Document[this.SidebarKey + '_panY'])) instanceof ComputedField)) {
+                    this.props.Document[this.SidebarKey + '_panY'] = ComputedField.MakeFunction('this.layout_scrollTop');
                 }
-                this.props.Document[this.SidebarKey + '-viewScale'] = 1;
-                this.props.Document[this.SidebarKey + '-panX'] = 0;
+                this.props.Document[this.SidebarKey + '_freeform_scale'] = 1;
+                this.props.Document[this.SidebarKey + '_freeform_panX'] = 0;
             }
         );
     }
@@ -215,7 +216,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     brushView = (view: { width: number; height: number; panX: number; panY: number }) => this._pdfViewer?.brushView(view);
 
     sidebarAddDocTab = (doc: Doc, where: OpenWhere) => {
-        if (DocListCast(this.props.Document[this.props.fieldKey + '-sidebar']).includes(doc) && !this.SidebarShown) {
+        if (DocListCast(this.props.Document[this.props.fieldKey + '_sidebar']).includes(doc) && !this.SidebarShown) {
             this.toggleSidebar(false);
             return true;
         }
@@ -238,9 +239,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             ele.append(this._pdfViewer.selectionContent()!);
         }
         const docAnchor = () => {
-            const anchor = Docs.Create.TextanchorDocument({
-                title: StrCast(this.rootDoc.title + '@' + NumCast(this.layoutDoc._scrollTop)?.toFixed(0)),
-                unrendered: true,
+            const anchor = Docs.Create.PdfConfigDocument({
+                title: StrCast(this.rootDoc.title + '@' + NumCast(this.layoutDoc._layout_scrollTop)?.toFixed(0)),
                 annotationOn: this.rootDoc,
             });
             return anchor;
@@ -258,11 +258,11 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @action
     loaded = (nw: number, nh: number, np: number) => {
-        this.dataDoc[this.props.fieldKey + '-numPages'] = np;
+        this.dataDoc[this.props.fieldKey + '_numPages'] = np;
         Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), (nw * 96) / 72));
         Doc.SetNativeHeight(this.dataDoc, (nh * 96) / 72);
-        this.layoutDoc._height = this.layoutDoc[WidthSym]() / (Doc.NativeAspect(this.dataDoc) || 1);
-        !this.Document._fitWidth && (this.Document._height = this.Document[WidthSym]() * (nh / nw));
+        this.layoutDoc._height = this.layoutDoc[Width]() / (Doc.NativeAspect(this.dataDoc) || 1);
+        !this.Document._layout_fitWidth && (this.Document._height = this.Document[Width]() * (nh / nw));
     };
 
     public search = action((searchString: string, bwd?: boolean, clear: boolean = false) => {
@@ -279,14 +279,14 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     public prevAnnotation = () => this._pdfViewer?.prevAnnotation();
     public nextAnnotation = () => this._pdfViewer?.nextAnnotation();
     public backPage = () => {
-        this.Document._curPage = Math.max(1, (NumCast(this.Document._curPage) || 1) - 1);
+        this.Document._layout_curPage = Math.max(1, (NumCast(this.Document._layout_curPage) || 1) - 1);
         return true;
     };
     public forwardPage = () => {
-        this.Document._curPage = Math.min(NumCast(this.dataDoc[this.props.fieldKey + '-numPages']), (NumCast(this.Document._curPage) || 1) + 1);
+        this.Document._layout_curPage = Math.min(NumCast(this.dataDoc[this.props.fieldKey + '_numPages']), (NumCast(this.Document._layout_curPage) || 1) + 1);
         return true;
     };
-    public gotoPage = (p: number) => (this.Document._curPage = p);
+    public gotoPage = (p: number) => (this.Document._layout_curPage = p);
 
     @undoBatch
     onKeyDown = action((e: KeyboardEvent) => {
@@ -316,9 +316,9 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     searchStringChanged = (e: React.ChangeEvent<HTMLInputElement>) => (this._searchString = e.currentTarget.value);
 
     // adding external documents; to sidebar key
-    // if (doc.Geolocation) this.addDocument(doc, this.fieldkey+"-annotation")
+    // if (doc.Geolocation) this.addDocument(doc, this.fieldkey+"_annotation")
     sidebarAddDocument = (doc: Doc | Doc[], sidebarKey: string = this.SidebarKey) => {
-        if (!this.layoutDoc._showSidebar) this.toggleSidebar();
+        if (!this.layoutDoc._show_sidebar) this.toggleSidebar();
         return this.addDocument(doc, sidebarKey);
     };
     sidebarBtnDown = (e: React.PointerEvent, onButton: boolean) => {
@@ -332,13 +332,13 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     .ScreenToLocalTransform()
                     .scale(this.props.NativeDimScaling?.() || 1)
                     .transformDirection(delta[0], delta[1]);
-                const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth']);
+                const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']);
                 const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth);
                 const ratio = (curNativeWidth + ((onButton ? 1 : -1) * localDelta[0]) / (this.props.NativeDimScaling?.() || 1)) / nativeWidth;
                 if (ratio >= 1) {
                     this.layoutDoc.nativeWidth = nativeWidth * ratio;
-                    onButton && (this.layoutDoc._width = this.layoutDoc[WidthSym]() + localDelta[0]);
-                    this.layoutDoc._showSidebar = nativeWidth !== this.layoutDoc._nativeWidth;
+                    onButton && (this.layoutDoc._width = this.layoutDoc[Width]() + localDelta[0]);
+                    this.layoutDoc._show_sidebar = nativeWidth !== this.layoutDoc._nativeWidth;
                 }
                 return false;
             },
@@ -352,18 +352,18 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @observable _previewNativeWidth: Opt<number> = undefined;
     @observable _previewWidth: Opt<number> = undefined;
     toggleSidebar = action((preview: boolean = false) => {
-        const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth']);
+        const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']);
         const sideratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? PDFBox.openSidebarWidth : 0) + nativeWidth) / nativeWidth;
         const pdfratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? PDFBox.openSidebarWidth + PDFBox.sidebarResizerWidth : 0) + nativeWidth) / nativeWidth;
         const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth);
         if (preview) {
             this._previewNativeWidth = nativeWidth * sideratio;
-            this._previewWidth = (this.layoutDoc[WidthSym]() * nativeWidth * sideratio) / curNativeWidth;
+            this._previewWidth = (this.layoutDoc[Width]() * nativeWidth * sideratio) / curNativeWidth;
             this._showSidebar = true;
         } else {
             this.layoutDoc.nativeWidth = nativeWidth * pdfratio;
-            this.layoutDoc._width = (this.layoutDoc[WidthSym]() * nativeWidth * pdfratio) / curNativeWidth;
-            this.layoutDoc._showSidebar = nativeWidth !== this.layoutDoc._nativeWidth;
+            this.layoutDoc._width = (this.layoutDoc[Width]() * nativeWidth * pdfratio) / curNativeWidth;
+            this.layoutDoc._show_sidebar = nativeWidth !== this.layoutDoc._nativeWidth;
         }
     });
     settingsPanel() {
@@ -378,7 +378,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             </>
         );
         const searchTitle = `${!this._searching ? 'Open' : 'Close'} Search Bar`;
-        const curPage = NumCast(this.Document._curPage) || 1;
+        const curPage = NumCast(this.Document._layout_curPage) || 1;
         return !this.props.isContentActive() || this._pdfViewer?.isAnnotating ? null : (
             <div
                 className="pdfBox-ui"
@@ -424,7 +424,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     <input
                         value={curPage}
                         style={{ width: `${curPage > 99 ? 4 : 3}ch`, pointerEvents: 'all' }}
-                        onChange={e => (this.Document._curPage = Number(e.currentTarget.value))}
+                        onChange={e => (this.Document._layout_curPage = Number(e.currentTarget.value))}
                         onKeyDown={e => e.stopPropagation()}
                         onClick={action(() => (this._pageControls = !this._pageControls))}
                     />
@@ -441,7 +441,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return PDFBox.sidebarResizerWidth + nativeDiff * (this.props.NativeDimScaling?.() || 1);
     };
     @undoBatch
-    toggleSidebarType = () => (this.rootDoc.sidebarViewType = this.rootDoc.sidebarViewType === CollectionViewType.Freeform ? CollectionViewType.Stacking : CollectionViewType.Freeform);
+    toggleSidebarType = () => (this.rootDoc.sidebar_collectionType = this.rootDoc.sidebar_collectionType === CollectionViewType.Freeform ? CollectionViewType.Stacking : CollectionViewType.Freeform);
     specificContextMenu = (e: React.MouseEvent): void => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
@@ -470,7 +470,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
     @observable _showSidebar = false;
     @computed get SidebarShown() {
-        return this._showSidebar || this.layoutDoc._showSidebar ? true : false;
+        return this._showSidebar || this.layoutDoc._show_sidebar ? true : false;
     }
     @computed get sidebarHandle() {
         return (
@@ -480,7 +480,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 title="Toggle Sidebar"
                 style={{
                     display: !this.props.isContentActive() ? 'none' : undefined,
-                    top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
+                    top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5,
                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
                 }}
                 onPointerDown={e => this.sidebarBtnDown(e, true)}>
@@ -490,10 +490,10 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 
     public get SidebarKey() {
-        return this.fieldKey + '-sidebar';
+        return this.fieldKey + '_sidebar';
     }
     @computed get pdfScale() {
-        const pdfNativeWidth = NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth']);
+        const pdfNativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']);
         const nativeWidth = NumCast(this.layoutDoc.nativeWidth, pdfNativeWidth);
         const pdfRatio = pdfNativeWidth / nativeWidth;
         return (pdfRatio * this.props.PanelWidth()) / pdfNativeWidth;
@@ -557,7 +557,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         };
         return (
             <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: '100%', right: 0, backgroundColor: `white` }}>
-                {renderComponent(StrCast(this.layoutDoc.sidebarViewType))}
+                {renderComponent(StrCast(this.layoutDoc.sidebar_collectionType))}
             </div>
         );
     }
@@ -572,7 +572,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 onContextMenu={this.specificContextMenu}
                 style={{
                     display: this.props.thumbShown?.() ? 'none' : undefined,
-                    height: this.props.Document._scrollTop && !this.Document._fitWidth && window.screen.width > 600 ? (NumCast(this.Document._height) * this.props.PanelWidth()) / NumCast(this.Document._width) : undefined,
+                    height: this.props.Document._layout_scrollTop && !this.Document._layout_fitWidth && window.screen.width > 600 ? (NumCast(this.Document._height) * this.props.PanelWidth()) / NumCast(this.Document._width) : undefined,
                 }}>
                 <div className="pdfBox-background" onPointerDown={e => this.sidebarBtnDown(e, false)} />
                 <div
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
new file mode 100644
index 000000000..ac2c611c7
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
@@ -0,0 +1,90 @@
+.physicsSimApp {
+    * {
+        box-sizing: border-box;
+        font-size: 14px;
+    }
+
+    .mechanicsSimulationContainer {
+        background-color: white;
+        height: 100%;
+        width: 100%;
+        display: flex;
+
+        .mechanicsSimulationEquationContainer {
+            position: fixed;
+            left: 60%;
+            padding: 1em;
+            height: 100%;
+            transform-origin: top left;
+
+            .mechanicsSimulationControls {
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+        .rod,
+        .spring,
+        .wheel,
+        .showvecs,
+        .wedge {
+            pointer-events: none;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+    }
+
+    .coordinateSystem {
+        z-index: -100;
+    }
+
+    th,
+    td {
+        border-collapse: collapse;
+        padding: 1em;
+    }
+
+    table {
+        min-width: 300px;
+    }
+
+    tr:nth-child(even) {
+        background-color: #d6eeee;
+    }
+
+    button {
+        z-index: 50;
+    }
+
+    .angleLabel {
+        font-weight: bold;
+        font-size: 20px;
+        user-select: none;
+        pointer-events: none;
+    }
+
+    .mechanicsSimulationSettingsMenu {
+        width: 100%;
+        height: 100%;
+        font-size: 12px;
+        background-color: rgb(224, 224, 224);
+        border-radius: 2px;
+        border-color: black;
+        border-style: solid;
+        padding: 10px;
+        position: fixed;
+        z-index: 1000;
+    }
+
+    .mechanicsSimulationSettingsMenuRow {
+        display: flex;
+    }
+
+    .mechanicsSimulationSettingsMenuRowDescription {
+        width: 50%;
+    }
+
+    .dropdownMenu {
+        z-index: 50;
+    }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
new file mode 100644
index 000000000..cd1ff17dd
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -0,0 +1,1987 @@
+import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import PauseIcon from '@mui/icons-material/Pause';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
+import ReplayIcon from '@mui/icons-material/Replay';
+import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, FormGroup, IconButton, LinearProgress, Stack } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+import { NumListCast } from '../../../../fields/Doc';
+import { List } from '../../../../fields/List';
+import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
+import { ViewBoxAnnotatableComponent } from '../../DocComponent';
+import { FieldView, FieldViewProps } from './../FieldView';
+import './PhysicsSimulationBox.scss';
+import InputField from './PhysicsSimulationInputField';
+import * as questions from './PhysicsSimulationQuestions.json';
+import * as tutorials from './PhysicsSimulationTutorial.json';
+import Wall from './PhysicsSimulationWall';
+import Weight from './PhysicsSimulationWeight';
+import React = require('react');
+
+interface IWallProps {
+    length: number;
+    xPos: number;
+    yPos: number;
+    angleInDegrees: number;
+}
+interface IForce {
+    description: string;
+    magnitude: number;
+    directionInDegrees: number;
+}
+interface VectorTemplate {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    weightX: number;
+    weightY: number;
+}
+interface QuestionTemplate {
+    questionSetup: string[];
+    variablesForQuestionSetup: string[];
+    question: string;
+    answerParts: string[];
+    answerSolutionDescriptions: string[];
+    goal: string;
+    hints: { description: string; content: string }[];
+}
+
+interface TutorialTemplate {
+    question: string;
+    steps: {
+        description: string;
+        content: string;
+        forces: {
+            description: string;
+            magnitude: number;
+            directionInDegrees: number;
+            component: boolean;
+        }[];
+        showMagnitude: boolean;
+    }[];
+}
+
+@observer
+export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(PhysicsSimulationBox, fieldKey);
+    }
+
+    _widthDisposer: IReactionDisposer | undefined;
+    @observable _simReset = 0;
+
+    // semi-Constants
+    xMin = 0;
+    yMin = 0;
+    xMax = this.props.PanelWidth() * 0.6;
+    yMax = this.props.PanelHeight();
+    color = `rgba(0,0,0,0.5)`;
+    radius = 50;
+    wallPositions: IWallProps[] = [];
+
+    @computed get circularMotionRadius() {
+        return (NumCast(this.dataDoc.circularMotionRadius, 150) * this.props.PanelWidth()) / 1000;
+    }
+    @computed get gravity() {
+        return NumCast(this.dataDoc.simulation_gravity, -9.81);
+    }
+    @computed get simulationType() {
+        return StrCast(this.dataDoc.simulation_type, 'Inclined Plane');
+    }
+    @computed get simulationMode() {
+        return StrCast(this.dataDoc.simulation_mode, 'Freeform');
+    }
+    // Used for spring simulation
+    @computed get springConstant() {
+        return NumCast(this.dataDoc.spring_constant, 0.5);
+    }
+    @computed get springLengthRest() {
+        return NumCast(this.dataDoc.spring_lengthRest, 200);
+    }
+    @computed get springLengthStart() {
+        return NumCast(this.dataDoc.spring_lengthStart, 200);
+    }
+
+    @computed get pendulumAngle() {
+        return NumCast(this.dataDoc.pendulum_angle);
+    }
+    @computed get pendulumAngleStart() {
+        return NumCast(this.dataDoc.pendulum_angleStart);
+    }
+    @computed get pendulumLength() {
+        return NumCast(this.dataDoc.pendulum_length);
+    }
+    @computed get pendulumLengthStart() {
+        return NumCast(this.dataDoc.pendulum_lengthStart);
+    }
+
+    // Used for wedge simulation
+    @computed get wedgeAngle() {
+        return NumCast(this.dataDoc.wedge_angle, 26);
+    }
+    @computed get wedgeHeight() {
+        return NumCast(this.dataDoc.wedge_height, Math.tan((26 * Math.PI) / 180) * this.xMax * 0.5);
+    }
+    @computed get wedgeWidth() {
+        return NumCast(this.dataDoc.wedge_width, this.xMax * 0.5);
+    }
+    @computed get mass1() {
+        return NumCast(this.dataDoc.mass1, 1);
+    }
+    @computed get mass2() {
+        return NumCast(this.dataDoc.mass2, 1);
+    }
+
+    @computed get mass1Radius() {
+        return NumCast(this.dataDoc.mass1_radius, 30);
+    }
+    @computed get mass1PosXStart() {
+        return NumCast(this.dataDoc.mass1_positionXstart);
+    }
+    @computed get mass1PosYStart() {
+        return NumCast(this.dataDoc.mass1_positionYstart);
+    }
+    @computed get mass1VelXStart() {
+        return NumCast(this.dataDoc.mass1_velocityXstart);
+    }
+    @computed get mass1VelYStart() {
+        return NumCast(this.dataDoc.mass1_velocityYstart);
+    }
+
+    @computed get mass2PosXStart() {
+        return NumCast(this.dataDoc.mass2_positionXstart);
+    }
+    @computed get mass2PosYStart() {
+        return NumCast(this.dataDoc.mass2_positionYstart);
+    }
+    @computed get mass2VelXStart() {
+        return NumCast(this.dataDoc.mass2_velocityXstart);
+    }
+    @computed get mass2VelYStart() {
+        return NumCast(this.dataDoc.mass2_velocityYstart);
+    }
+
+    @computed get selectedQuestion() {
+        return this.dataDoc.selectedQuestion ? (JSON.parse(StrCast(this.dataDoc.selectedQuestion)) as QuestionTemplate) : questions.inclinePlane[0];
+    }
+    @computed get tutorial() {
+        return this.dataDoc.tutorial ? (JSON.parse(StrCast(this.dataDoc.tutorial)) as TutorialTemplate) : tutorials.inclinePlane;
+    }
+    @computed get selectedSolutions() {
+        return NumListCast(this.dataDoc.selectedSolutions);
+    }
+    @computed get questionPartOne() {
+        return StrCast(this.dataDoc.questionPartOne);
+    }
+    @computed get questionPartTwo() {
+        return StrCast(this.dataDoc.questionPartTwo);
+    }
+
+    componentWillUnmount() {
+        this._widthDisposer?.();
+    }
+
+    componentDidMount() {
+        // Setup and update simulation
+        this._widthDisposer = reaction(() => [this.props.PanelWidth(), this.props.PanelHeight()], this.setupSimulation, { fireImmediately: true });
+
+        // Create walls
+        this.wallPositions = [
+            { length: 100, xPos: 0, yPos: 0, angleInDegrees: 0 },
+            { length: 100, xPos: 0, yPos: 100, angleInDegrees: 0 },
+            { length: 100, xPos: 0, yPos: 0, angleInDegrees: 90 },
+            { length: 100, xPos: (this.xMax / this.props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 },
+        ];
+    }
+
+    componentDidUpdate() {
+        if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight()) {
+            this.xMax = this.props.PanelWidth() * 0.6;
+            this.yMax = this.props.PanelHeight();
+            this.setupSimulation();
+        }
+    }
+
+    gravityForce = (mass: number): IForce => ({
+        description: 'Gravity',
+        magnitude: mass * Math.abs(this.gravity),
+        directionInDegrees: 270,
+    });
+
+    @action
+    setupSimulation = () => {
+        const simulationType = this.simulationType;
+        const mode = this.simulationMode;
+        this.dataDoc.simulation_paused = true;
+        if (simulationType != 'Circular Motion') {
+            this.dataDoc.mass1_velocityXstart = 0;
+            this.dataDoc.mass1_velocityYstart = 0;
+            this.dataDoc.mass1_velocityX = 0;
+            this.dataDoc.mass1_velocityY = 0;
+        }
+        if (mode == 'Freeform') {
+            this.dataDoc.simulation_showForceMagnitudes = true;
+            // prettier-ignore
+            switch (simulationType) {
+                case 'One Weight': 
+                    this.dataDoc.simulation_showComponentForces = false;
+                    this.dataDoc.mass1_positionYstart = this.yMin + this.mass1Radius;
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+                    this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + this.mass1Radius);
+                    this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+                    this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
+                    break;
+                case 'Inclined Plane':  this.setupInclinedPlane(); break;
+                case 'Pendulum':        this.setupPendulum(); break;
+                case 'Spring':          this.setupSpring(); break;
+                case 'Circular Motion': this.setupCircular(20); break;
+                case 'Pulley':          this.setupPulley(); break;
+                case 'Suspension':      this.setupSuspension();break;
+            }
+            this._simReset++;
+        } else if (mode == 'Review') {
+            this.dataDoc.simulation_showComponentForces = false;
+            this.dataDoc.simulation_showForceMagnitudes = true;
+            this.dataDoc.simulation_showAcceleration = false;
+            this.dataDoc.simulation_showVelocity = false;
+            this.dataDoc.simulation_showForces = true;
+            this.generateNewQuestion();
+            // prettier-ignore
+            switch (simulationType) {
+                case 'One Weight' : break;// TODO - one weight review problems
+                case 'Spring':  this.setupSpring(); break; // TODO - spring review problems
+                case 'Inclined Plane': this.dataDoc.mass1_forcesUpdated =  this.dataDoc.mass1_forcesStart = ''; break;
+                case 'Pendulum':  this.setupPendulum(); break;  // TODO - pendulum review problems
+                case 'Circular Motion':  this.setupCircular(0); break;  // TODO - circular motion review problems
+                case 'Pulley':  this.setupPulley(); break; // TODO - pulley tutorial review problems
+                case 'Suspension': this.setupSuspension(); break;  // TODO - suspension tutorial review problems
+            }
+        } else if (mode == 'Tutorial') {
+            this.dataDoc.simulation_showComponentForces = false;
+            this.dataDoc.tutorial_stepNumber = 0;
+            this.dataDoc.simulation_showAcceleration = false;
+            if (this.simulationType != 'Circular Motion') {
+                this.dataDoc.mass1_velocityX = 0;
+                this.dataDoc.mass1_velocityY = 0;
+                this.dataDoc.simulation_showVelocity = false;
+            } else {
+                this.dataDoc.mass1_velocityX = 20;
+                this.dataDoc.mass1_velocityY = 0;
+                this.dataDoc.simulation_showVelocity = true;
+            }
+
+            switch (this.simulationType) {
+                case 'One Weight':
+                    this.dataDoc.simulation_showForces = true;
+                    this.dataDoc.mass1_positionYstart = this.yMax - 100;
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.freeWeight);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.freeWeight.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.freeWeight.steps[0].showMagnitude;
+                    break;
+                case 'Spring':
+                    this.dataDoc.simulation_showForces = true;
+                    this.setupSpring();
+                    this.dataDoc.mass1_positionYstart = this.yMin + 200 + 19.62;
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.spring);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.spring.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.spring.steps[0].showMagnitude;
+                    break;
+                case 'Pendulum':
+                    this.setupPendulum();
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.pendulum);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pendulum.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.pendulum.steps[0].showMagnitude;
+                    break;
+                case 'Inclined Plane':
+                    this.dataDoc.wedge_angle = 26;
+                    this.setupInclinedPlane();
+                    this.dataDoc.simulation_showForces = true;
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.inclinePlane);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.inclinePlane.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.inclinePlane.steps[0].showMagnitude;
+                    break;
+                case 'Circular Motion':
+                    this.dataDoc.simulation_showForces = true;
+                    this.setupCircular(40);
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.circular);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.circular.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.circular.steps[0].showMagnitude;
+                    break;
+                case 'Pulley':
+                    this.dataDoc.simulation_showForces = true;
+                    this.setupPulley();
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.pulley);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pulley.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.pulley.steps[0].showMagnitude;
+                    break;
+                case 'Suspension':
+                    this.dataDoc.simulation_showForces = true;
+                    this.setupSuspension();
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.suspension);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.suspension.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.suspension.steps[0].showMagnitude;
+                    break;
+            }
+            this._simReset++;
+        }
+    };
+
+    // Helper function to go between display and real values
+    getDisplayYPos = (yPos: number) => this.yMax - yPos - 2 * this.mass1Radius + 5;
+    getYPosFromDisplay = (yDisplay: number) => this.yMax - yDisplay - 2 * this.mass1Radius + 5;
+
+    // Update forces when coefficient of static friction changes in freeform mode
+    updateForcesWithFriction = (coefficient: number, width = this.wedgeWidth, height = this.wedgeHeight) => {
+        const normalForce: IForce = {
+            description: 'Normal Force',
+            magnitude: Math.abs(this.gravity) * Math.cos(Math.atan(height / width)) * this.mass1,
+            directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI,
+        };
+        let frictionForce: IForce = {
+            description: 'Static Friction Force',
+            magnitude: coefficient * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)) * this.mass1,
+            directionInDegrees: 180 - (Math.atan(height / width) * 180) / Math.PI,
+        };
+        // reduce magnitude or friction force if necessary such that block cannot slide up plane
+        let yForce = -Math.abs(this.gravity) * this.mass1;
+        yForce += normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180);
+        yForce += frictionForce.magnitude * Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+        if (yForce > 0) {
+            frictionForce.magnitude = (-normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) + Math.abs(this.gravity) * this.mass1) / Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+        }
+
+        const normalForceComponent: IForce = {
+            description: 'Normal Force',
+            magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)),
+            directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI,
+        };
+        const gravityParallel: IForce = {
+            description: 'Gravity Parallel Component',
+            magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin(Math.PI / 2 - Math.atan(height / width)),
+            directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI + 180,
+        };
+        const gravityPerpendicular: IForce = {
+            description: 'Gravity Perpendicular Component',
+            magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(Math.PI / 2 - Math.atan(height / width)),
+            directionInDegrees: 360 - (Math.atan(height / width) * 180) / Math.PI,
+        };
+        const gravityForce = this.gravityForce(this.mass1);
+        if (coefficient != 0) {
+            this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce, frictionForce]);
+            this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce, frictionForce]);
+            this.dataDoc.mass1_componentForces = JSON.stringify([frictionForce, normalForceComponent, gravityParallel, gravityPerpendicular]);
+        } else {
+            this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce]);
+            this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce]);
+            this.dataDoc.mass1_componentForces = JSON.stringify([normalForceComponent, gravityParallel, gravityPerpendicular]);
+        }
+    };
+
+    // Change wedge height and width and weight position to match new wedge angle
+    changeWedgeBasedOnNewAngle = (angle: number) => {
+        const radAng = (angle * Math.PI) / 180;
+        this.dataDoc.wedge_width = this.xMax * 0.5;
+        this.dataDoc.wedge_height = Math.tan(radAng) * this.dataDoc.wedge_width;
+
+        // update weight position based on updated wedge width/height
+        let yPos = this.yMax - this.dataDoc.wedge_height - this.mass1Radius * Math.cos(radAng) - this.mass1Radius;
+        let xPos = this.xMax * 0.25 + this.mass1Radius * Math.sin(radAng) - this.mass1Radius;
+
+        this.dataDoc.mass1_positionXstart = xPos;
+        this.dataDoc.mass1_positionYstart = yPos;
+        if (this.simulationMode == 'Freeform') {
+            this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction), this.dataDoc.wedge_width, Math.tan(radAng) * this.dataDoc.wedge_width);
+        }
+    };
+
+    // In review mode, update forces when coefficient of static friction changed
+    updateReviewForcesBasedOnCoefficient = (coefficient: number) => {
+        let theta = this.wedgeAngle;
+        let index = this.selectedQuestion.variablesForQuestionSetup.indexOf('theta - max 45');
+        if (index >= 0) {
+            theta = NumListCast(this.dataDoc.questionVariables)[index];
+        }
+        if (isNaN(theta)) {
+            return;
+        }
+        this.dataDoc.review_GravityMagnitude = Math.abs(this.gravity);
+        this.dataDoc.review_GravityAngle = 270;
+        this.dataDoc.review_NormalMagnitude = Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180);
+        this.dataDoc.review_NormalAngle = 90 - theta;
+        let yForce = -Math.abs(this.gravity);
+        yForce += Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180) * Math.sin(((90 - theta) * Math.PI) / 180);
+        yForce += coefficient * Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180) * Math.sin(((180 - theta) * Math.PI) / 180);
+        let friction = coefficient * Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180);
+        if (yForce > 0) {
+            friction = (-(Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180)) * Math.sin(((90 - theta) * Math.PI) / 180) + Math.abs(this.gravity)) / Math.sin(((180 - theta) * Math.PI) / 180);
+        }
+        this.dataDoc.review_StaticMagnitude = friction;
+        this.dataDoc.review_StaticAngle = 180 - theta;
+    };
+
+    // In review mode, update forces when wedge angle changed
+    updateReviewForcesBasedOnAngle = (angle: number) => {
+        this.dataDoc.review_GravityMagnitude = Math.abs(this.gravity);
+        this.dataDoc.review_GravityAngle = 270;
+        this.dataDoc.review_NormalMagnitude = Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180);
+        this.dataDoc.review_NormalAngle = 90 - angle;
+        let yForce = -Math.abs(this.gravity);
+        yForce += Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180) * Math.sin(((90 - angle) * Math.PI) / 180);
+        yForce += NumCast(this.dataDoc.review_Coefficient) * Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180) * Math.sin(((180 - angle) * Math.PI) / 180);
+        let friction = NumCast(this.dataDoc.review_Coefficient) * Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180);
+        if (yForce > 0) {
+            friction = (-(Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180)) * Math.sin(((90 - angle) * Math.PI) / 180) + Math.abs(this.gravity)) / Math.sin(((180 - angle) * Math.PI) / 180);
+        }
+        this.dataDoc.review_StaticMagnitude = friction;
+        this.dataDoc.review_StaticAngle = 180 - angle;
+    };
+
+    // Solve for the correct answers to the generated problem
+    getAnswersToQuestion = (question: QuestionTemplate, questionVars: number[]) => {
+        const solutions: number[] = [];
+
+        let theta = this.wedgeAngle;
+        let index = question.variablesForQuestionSetup.indexOf('theta - max 45');
+        if (index >= 0) {
+            theta = questionVars[index];
+        }
+        let muS: number = NumCast(this.dataDoc.coefficientOfStaticFriction);
+        index = question.variablesForQuestionSetup.indexOf('coefficient of static friction');
+        if (index >= 0) {
+            muS = questionVars[index];
+        }
+
+        for (let i = 0; i < question.answerSolutionDescriptions.length; i++) {
+            const description = question.answerSolutionDescriptions[i];
+            if (!isNaN(NumCast(description))) {
+                solutions.push(NumCast(description));
+            } else if (description == 'solve normal force angle from wedge angle') {
+                solutions.push(90 - theta);
+            } else if (description == 'solve normal force magnitude from wedge angle') {
+                solutions.push(Math.abs(this.gravity) * Math.cos((theta / 180) * Math.PI));
+            } else if (description == 'solve static force magnitude from wedge angle given equilibrium') {
+                let normalForceMagnitude = Math.abs(this.gravity) * Math.cos((theta / 180) * Math.PI);
+                let normalForceAngle = 90 - theta;
+                let frictionForceAngle = 180 - theta;
+                let frictionForceMagnitude = (-normalForceMagnitude * Math.sin((normalForceAngle * Math.PI) / 180) + Math.abs(this.gravity)) / Math.sin((frictionForceAngle * Math.PI) / 180);
+                solutions.push(frictionForceMagnitude);
+            } else if (description == 'solve static force angle from wedge angle given equilibrium') {
+                solutions.push(180 - theta);
+            } else if (description == 'solve minimum static coefficient from wedge angle given equilibrium') {
+                let normalForceMagnitude = Math.abs(this.gravity) * Math.cos((theta / 180) * Math.PI);
+                let normalForceAngle = 90 - theta;
+                let frictionForceAngle = 180 - theta;
+                let frictionForceMagnitude = (-normalForceMagnitude * Math.sin((normalForceAngle * Math.PI) / 180) + Math.abs(this.gravity)) / Math.sin((frictionForceAngle * Math.PI) / 180);
+                let frictionCoefficient = frictionForceMagnitude / normalForceMagnitude;
+                solutions.push(frictionCoefficient);
+            } else if (description == 'solve maximum wedge angle from coefficient of static friction given equilibrium') {
+                solutions.push((Math.atan(muS) * 180) / Math.PI);
+            }
+        }
+        this.dataDoc.selectedSolutions = new List<number>(solutions);
+        return solutions;
+    };
+
+    // In review mode, check if input answers match correct answers and optionally generate alert
+    checkAnswers = (showAlert: boolean = true) => {
+        let error: boolean = false;
+        let epsilon: number = 0.01;
+        if (this.selectedQuestion) {
+            for (let i = 0; i < this.selectedQuestion.answerParts.length; i++) {
+                if (this.selectedQuestion.answerParts[i] == 'force of gravity') {
+                    if (Math.abs(NumCast(this.dataDoc.review_GravityMagnitude) - this.selectedSolutions[i]) > epsilon) {
+                        error = true;
+                    }
+                } else if (this.selectedQuestion.answerParts[i] == 'angle of gravity') {
+                    if (Math.abs(NumCast(this.dataDoc.review_GravityAngle) - this.selectedSolutions[i]) > epsilon) {
+                        error = true;
+                    }
+                } else if (this.selectedQuestion.answerParts[i] == 'normal force') {
+                    if (Math.abs(NumCast(this.dataDoc.review_NormalMagnitude) - this.selectedSolutions[i]) > epsilon) {
+                        error = true;
+                    }
+                } else if (this.selectedQuestion.answerParts[i] == 'angle of normal force') {
+                    if (Math.abs(NumCast(this.dataDoc.review_NormalAngle) - this.selectedSolutions[i]) > epsilon) {
+                        error = true;
+                    }
+                } else if (this.selectedQuestion.answerParts[i] == 'force of static friction') {
+                    if (Math.abs(NumCast(this.dataDoc.review_StaticMagnitude) - this.selectedSolutions[i]) > epsilon) {
+                        error = true;
+                    }
+                } else if (this.selectedQuestion.answerParts[i] == 'angle of static friction') {
+                    if (Math.abs(NumCast(this.dataDoc.review_StaticAngle) - this.selectedSolutions[i]) > epsilon) {
+                        error = true;
+                    }
+                } else if (this.selectedQuestion.answerParts[i] == 'coefficient of static friction') {
+                    if (Math.abs(NumCast(this.dataDoc.coefficientOfStaticFriction) - this.selectedSolutions[i]) > epsilon) {
+                        error = true;
+                    }
+                } else if (this.selectedQuestion.answerParts[i] == 'wedge angle') {
+                    if (Math.abs(this.wedgeAngle - this.selectedSolutions[i]) > epsilon) {
+                        error = true;
+                    }
+                }
+            }
+        }
+        if (showAlert) {
+            this.dataDoc.simulation_paused = false;
+            setTimeout(() => (this.dataDoc.simulation_paused = true), 3000);
+        }
+        if (this.selectedQuestion.goal == 'noMovement') {
+            this.dataDoc.noMovement = !error;
+        }
+    };
+
+    // Reset all review values to default
+    resetReviewValuesToDefault = () => {
+        this.dataDoc.review_GravityMagnitude = 0;
+        this.dataDoc.review_GravityAngle = 0;
+        this.dataDoc.review_NormalMagnitude = 0;
+        this.dataDoc.review_NormalAngle = 0;
+        this.dataDoc.review_StaticMagnitude = 0;
+        this.dataDoc.review_StaticAngle = 0;
+        this.dataDoc.coefficientOfKineticFriction = 0;
+        this.dataDoc.simulation_paused = true;
+    };
+
+    // In review mode, reset problem variables and generate a new question
+    generateNewQuestion = () => {
+        this.resetReviewValuesToDefault();
+
+        const vars: number[] = [];
+        let question: QuestionTemplate = questions.inclinePlane[0];
+
+        if (this.simulationType === 'Inclined Plane') {
+            this.dataDoc.questionNumber = (NumCast(this.dataDoc.questionNumber) + 1) % questions.inclinePlane.length;
+            question = questions.inclinePlane[NumCast(this.dataDoc.questionNumber)];
+
+            let coefficient = 0;
+            let wedge_angle = 0;
+
+            for (let i = 0; i < question.variablesForQuestionSetup.length; i++) {
+                if (question.variablesForQuestionSetup[i] == 'theta - max 45') {
+                    let randValue = Math.floor(Math.random() * 44 + 1);
+                    vars.push(randValue);
+                    wedge_angle = randValue;
+                } else if (question.variablesForQuestionSetup[i] == 'coefficient of static friction') {
+                    let randValue = Math.round(Math.random() * 1000) / 1000;
+                    vars.push(randValue);
+                    coefficient = randValue;
+                }
+            }
+            this.dataDoc.wedge_angle = wedge_angle;
+            this.changeWedgeBasedOnNewAngle(wedge_angle);
+            this.dataDoc.coefficientOfStaticFriction = coefficient;
+            this.dataDoc.review_Coefficient = coefficient;
+        }
+        let q = '';
+        for (let i = 0; i < question.questionSetup.length; i++) {
+            q += question.questionSetup[i];
+            if (i != question.questionSetup.length - 1) {
+                q += vars[i];
+                if (question.variablesForQuestionSetup[i].includes('theta')) {
+                    q += ' degree (≈' + Math.round((1000 * (vars[i] * Math.PI)) / 180) / 1000 + ' rad)';
+                }
+            }
+        }
+        this.dataDoc.questionVariables = new List<number>(vars);
+        this.dataDoc.selectedQuestion = JSON.stringify(question);
+        this.dataDoc.questionPartOne = q;
+        this.dataDoc.questionPartTwo = question.question;
+        this.dataDoc.answers = new List<number>(this.getAnswersToQuestion(question, vars));
+        //this.dataDoc.simulation_reset = (!this.dataDoc.simulation_reset);
+    };
+
+    // Default setup for uniform circular motion simulation
+    @action
+    setupCircular = (value: number) => {
+        this.dataDoc.simulation_showComponentForces = false;
+        this.dataDoc.mass1_velocityYstart = 0;
+        this.dataDoc.mass1_velocityXstart = value;
+        let xPos = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+        let yPos = (this.yMax + this.yMin) / 2 + this.circularMotionRadius - this.mass1Radius;
+        this.dataDoc.mass1_positionYstart = yPos;
+        this.dataDoc.mass1_positionXstart = xPos;
+        const tensionForce: IForce = {
+            description: 'Centripetal Force',
+            magnitude: (this.dataDoc.mass1_velocityXstart ** 2 * this.mass1) / this.circularMotionRadius,
+            directionInDegrees: 90,
+        };
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce]);
+        this._simReset++;
+    };
+
+    setupInclinedPlane = () => {
+        this.changeWedgeBasedOnNewAngle(this.wedgeAngle);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
+        this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction));
+    };
+
+    // Default setup for pendulum simulation
+    setupPendulum = () => {
+        const length = (300 * this.props.PanelWidth()) / 1000;
+        const angle = 30;
+        const x = length * Math.cos(((90 - angle) * Math.PI) / 180);
+        const y = length * Math.sin(((90 - angle) * Math.PI) / 180);
+        const xPos = this.xMax / 2 - x - this.mass1Radius;
+        const yPos = y - this.mass1Radius - 5;
+        this.dataDoc.mass1_positionXstart = xPos;
+        this.dataDoc.mass1_positionYstart = yPos;
+        const forceOfTension: IForce = {
+            description: 'Tension',
+            magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin((60 * Math.PI) / 180),
+            directionInDegrees: 90 - angle,
+        };
+        const gravityParallel: IForce = {
+            description: 'Gravity Parallel Component',
+            magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin(((90 - angle) * Math.PI) / 180),
+            directionInDegrees: -angle - 90,
+        };
+        const gravityPerpendicular: IForce = {
+            description: 'Gravity Perpendicular Component',
+            magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(((90 - angle) * Math.PI) / 180),
+            directionInDegrees: -angle,
+        };
+
+        this.dataDoc.mass1_componentForces = JSON.stringify([forceOfTension, gravityParallel, gravityPerpendicular]);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
+        this.dataDoc.pendulum_angle = this.dataDoc.pendulum_angleStart = 30;
+        this.dataDoc.pendulum_length = this.dataDoc.pendulum_lengthStart = 300;
+    };
+
+    // Default setup for spring simulation
+    @action
+    setupSpring = () => {
+        this.dataDoc.simulation_showComponentForces = false;
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
+        this.dataDoc.mass1_positionXstart = this.xMax / 2 - this.mass1Radius;
+        this.dataDoc.mass1_positionYstart = 200;
+        this.dataDoc.spring_constant = 0.5;
+        this.dataDoc.spring_lengthRest = 200;
+        this.dataDoc.spring_lengthStart = 200;
+        this._simReset++;
+    };
+
+    // Default setup for suspension simulation
+    @action
+    setupSuspension = () => {
+        let xPos = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+        let yPos = this.yMin + 200;
+        this.dataDoc.mass1_positionYstart = yPos;
+        this.dataDoc.mass1_positionXstart = xPos;
+        this.dataDoc.mass1_positionY = this.getDisplayYPos(yPos);
+        this.dataDoc.mass1_positionX = xPos;
+        let tensionMag = (this.mass1 * Math.abs(this.gravity)) / (2 * Math.sin(Math.PI / 4));
+        const tensionForce1: IForce = {
+            description: 'Tension',
+            magnitude: tensionMag,
+            directionInDegrees: 45,
+        };
+        const tensionForce2: IForce = {
+            description: 'Tension',
+            magnitude: tensionMag,
+            directionInDegrees: 135,
+        };
+        const gravity = this.gravityForce(this.mass1);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce1, tensionForce2, gravity]);
+        this._simReset++;
+    };
+
+    // Default setup for pulley simulation
+    @action
+    setupPulley = () => {
+        this.dataDoc.simulation_showComponentForces = false;
+        this.dataDoc.mass1_positionYstart = (this.yMax + this.yMin) / 2;
+        this.dataDoc.mass1_positionXstart = (this.xMin + this.xMax) / 2 - 2 * this.mass1Radius - 5;
+        this.dataDoc.mass1_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
+        this.dataDoc.mass1_positionX = (this.xMin + this.xMax) / 2 - 2 * this.mass1Radius - 5;
+        const a = (-1 * ((this.mass1 - this.mass2) * Math.abs(this.gravity))) / (this.mass1 + this.mass2);
+        const gravityForce1 = this.gravityForce(this.mass1);
+        const tensionForce1: IForce = {
+            description: 'Tension',
+            magnitude: this.mass1 * a + this.mass1 * Math.abs(this.gravity),
+            directionInDegrees: 90,
+        };
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce1, tensionForce1]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce1, tensionForce1]);
+
+        const gravityForce2 = this.gravityForce(this.mass2);
+        const tensionForce2: IForce = {
+            description: 'Tension',
+            magnitude: -this.mass2 * a + this.mass2 * Math.abs(this.gravity),
+            directionInDegrees: 90,
+        };
+        this.dataDoc.mass2_positionYstart = (this.yMax + this.yMin) / 2;
+        this.dataDoc.mass2_positionXstart = (this.xMin + this.xMax) / 2 + 5;
+        this.dataDoc.mass2_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
+        this.dataDoc.mass2_positionX = (this.xMin + this.xMax) / 2 + 5;
+        this.dataDoc.mass2_forcesUpdated = JSON.stringify([gravityForce2, tensionForce2]);
+        this.dataDoc.mass2_forcesStart = JSON.stringify([gravityForce2, tensionForce2]);
+        this._simReset++;
+    };
+
+    public static parseJSON(json: string) {
+        return !json ? [] : (JSON.parse(json) as IForce[]);
+    }
+
+    // Handle force change in review mode
+    updateReviewModeValues = () => {
+        const forceOfGravityReview: IForce = {
+            description: 'Gravity',
+            magnitude: NumCast(this.dataDoc.review_GravityMagnitude),
+            directionInDegrees: NumCast(this.dataDoc.review_GravityAngle),
+        };
+        const normalForceReview: IForce = {
+            description: 'Normal Force',
+            magnitude: NumCast(this.dataDoc.review_NormalMagnitude),
+            directionInDegrees: NumCast(this.dataDoc.review_NormalAngle),
+        };
+        const staticFrictionForceReview: IForce = {
+            description: 'Static Friction Force',
+            magnitude: NumCast(this.dataDoc.review_StaticMagnitude),
+            directionInDegrees: NumCast(this.dataDoc.review_StaticAngle),
+        };
+        this.dataDoc.mass1_forcesStart = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
+    };
+
+    pause = () => (this.dataDoc.simulation_paused = true);
+    componentForces1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_componentForces));
+    setComponentForces1 = (forces: IForce[]) => (this.dataDoc.mass1_componentForces = JSON.stringify(forces));
+    componentForces2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_componentForces));
+    setComponentForces2 = (forces: IForce[]) => (this.dataDoc.mass2_componentForces = JSON.stringify(forces));
+    startForces1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_forcesStart));
+    startForces2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_forcesStart));
+    forcesUpdated1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_forcesUpdated));
+    setForcesUpdated1 = (forces: IForce[]) => (this.dataDoc.mass1_forcesUpdated = JSON.stringify(forces));
+    forcesUpdated2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_forcesUpdated));
+    setForcesUpdated2 = (forces: IForce[]) => (this.dataDoc.mass2_forcesUpdated = JSON.stringify(forces));
+    setPosition1 = (xPos: number | undefined, yPos: number | undefined) => {
+        yPos !== undefined && (this.dataDoc.mass1_positionY = Math.round(yPos * 100) / 100);
+        xPos !== undefined && (this.dataDoc.mass1_positionX = Math.round(xPos * 100) / 100);
+    };
+    setPosition2 = (xPos: number | undefined, yPos: number | undefined) => {
+        yPos !== undefined && (this.dataDoc.mass2_positionY = Math.round(yPos * 100) / 100);
+        xPos !== undefined && (this.dataDoc.mass2_positionX = Math.round(xPos * 100) / 100);
+    };
+    setVelocity1 = (xVel: number | undefined, yVel: number | undefined) => {
+        yVel !== undefined && (this.dataDoc.mass1_velocityY = (-1 * Math.round(yVel * 100)) / 100);
+        xVel !== undefined && (this.dataDoc.mass1_velocityX = Math.round(xVel * 100) / 100);
+    };
+    setVelocity2 = (xVel: number | undefined, yVel: number | undefined) => {
+        yVel !== undefined && (this.dataDoc.mass2_velocityY = (-1 * Math.round(yVel * 100)) / 100);
+        xVel !== undefined && (this.dataDoc.mass2_velocityX = Math.round(xVel * 100) / 100);
+    };
+    setAcceleration1 = (xAccel: number, yAccel: number) => {
+        this.dataDoc.mass1_accelerationY = yAccel;
+        this.dataDoc.mass1_accelerationX = xAccel;
+    };
+    setAcceleration2 = (xAccel: number, yAccel: number) => {
+        this.dataDoc.mass2_accelerationY = yAccel;
+        this.dataDoc.mass2_accelerationX = xAccel;
+    };
+    setPendulumAngle = (angle: number | undefined, length: number | undefined) => {
+        angle !== undefined && (this.dataDoc.pendulum_angle = angle);
+        length !== undefined && (this.dataDoc.pendulum_length = length);
+    };
+    setSpringLength = (length: number) => {
+        this.dataDoc.spring_lengthStart = length;
+    };
+    resetRequest = () => this._simReset;
+    render() {
+        const commonWeightProps = {
+            pause: this.pause,
+            paused: BoolCast(this.dataDoc.simulation_paused),
+            panelWidth: this.props.PanelWidth,
+            panelHeight: this.props.PanelHeight,
+            resetRequest: this.resetRequest,
+            xMax: this.xMax,
+            xMin: this.xMin,
+            yMax: this.yMax,
+            yMin: this.yMin,
+            wallPositions: this.wallPositions,
+            gravity: Math.abs(this.gravity),
+            timestepSize: 0.05,
+            showComponentForces: BoolCast(this.dataDoc.simulation_showComponentForces),
+            coefficientOfKineticFriction: NumCast(this.dataDoc.coefficientOfKineticFriction),
+            elasticCollisions: BoolCast(this.dataDoc.elasticCollisions),
+            simulationMode: this.simulationMode,
+            noMovement: BoolCast(this.dataDoc.noMovement),
+            circularMotionRadius: this.circularMotionRadius,
+            wedgeHeight: this.wedgeHeight,
+            wedgeWidth: this.wedgeWidth,
+            springConstant: this.springConstant,
+            springStartLength: this.springLengthStart,
+            springRestLength: this.springLengthRest,
+            setSpringLength: this.setSpringLength,
+            setPendulumAngle: this.setPendulumAngle,
+            pendulumAngle: this.pendulumAngle,
+            pendulumLength: this.pendulumLength,
+            startPendulumAngle: this.pendulumAngleStart,
+            startPendulumLength: this.pendulumLengthStart,
+            radius: this.mass1Radius,
+            simulationSpeed: NumCast(this.dataDoc.simulation_speed, 2),
+            showAcceleration: BoolCast(this.dataDoc.simulation_showAcceleration),
+            showForceMagnitudes: BoolCast(this.dataDoc.simulation_showForceMagnitudes),
+            showForces: BoolCast(this.dataDoc.simulation_showForces),
+            showVelocity: BoolCast(this.dataDoc.simulation_showVelocity),
+            simulationType: this.simulationType,
+        };
+        return (
+            <div className="physicsSimApp">
+                <div className="mechanicsSimulationContainer">
+                    <div className="mechanicsSimulationContentContainer">
+                        <div className="mechanicsSimulationButtonsAndElements">
+                            <div className="mechanicsSimulationButtons">
+                                {!this.dataDoc.simulation_paused && (
+                                    <div
+                                        style={{
+                                            position: 'fixed',
+                                            left: 0.1 * this.props.PanelWidth() + 'px',
+                                            top: 0.95 * this.props.PanelHeight() + 'px',
+                                            width: 0.5 * this.props.PanelWidth() + 'px',
+                                        }}>
+                                        <LinearProgress />
+                                    </div>
+                                )}
+                            </div>
+                            <div
+                                className="mechanicsSimulationElements"
+                                style={{
+                                    //
+                                    width: '60%',
+                                    height: '100%',
+                                    position: 'absolute',
+                                    background: 'yellow',
+                                }}>
+                                <Weight
+                                    {...commonWeightProps}
+                                    color="red"
+                                    componentForces={this.componentForces1}
+                                    setComponentForces={this.setComponentForces1}
+                                    displayXVelocity={NumCast(this.dataDoc.mass1_velocityX)}
+                                    displayYVelocity={NumCast(this.dataDoc.mass1_velocityY)}
+                                    mass={this.mass1}
+                                    startForces={this.startForces1}
+                                    startPosX={this.mass1PosXStart}
+                                    startPosY={this.mass1PosYStart}
+                                    startVelX={this.mass1VelXStart}
+                                    startVelY={this.mass1VelYStart}
+                                    updateMassPosX={NumCast(this.dataDoc.mass1_xChange)}
+                                    updateMassPosY={NumCast(this.dataDoc.mass1_yChange)}
+                                    forcesUpdated={this.forcesUpdated1}
+                                    setForcesUpdated={this.setForcesUpdated1}
+                                    setPosition={this.setPosition1}
+                                    setVelocity={this.setVelocity1}
+                                    setAcceleration={this.setAcceleration1}
+                                />
+                                {this.simulationType == 'Pulley' && (
+                                    <Weight
+                                        {...commonWeightProps}
+                                        color="green"
+                                        componentForces={this.componentForces2}
+                                        setComponentForces={this.setComponentForces2}
+                                        displayXVelocity={NumCast(this.dataDoc.mass2_velocityX)}
+                                        displayYVelocity={NumCast(this.dataDoc.mass2_velocityY)}
+                                        mass={this.mass2}
+                                        startForces={this.startForces2}
+                                        startPosX={this.mass2PosXStart}
+                                        startPosY={this.mass2PosYStart}
+                                        startVelX={this.mass2VelXStart}
+                                        startVelY={this.mass2VelYStart}
+                                        updateMassPosX={NumCast(this.dataDoc.mass2_xChange)}
+                                        updateMassPosY={NumCast(this.dataDoc.mass2_yChange)}
+                                        forcesUpdated={this.forcesUpdated2}
+                                        setForcesUpdated={this.setForcesUpdated2}
+                                        setPosition={this.setPosition2}
+                                        setVelocity={this.setVelocity2}
+                                        setAcceleration={this.setAcceleration2}
+                                    />
+                                )}
+                            </div>
+                            <div style={{ position: 'absolute', transformOrigin: 'top left', top: 0, left: 0, width: '100%', height: '100%' }}>
+                                {(this.simulationType == 'One Weight' || this.simulationType == 'Inclined Plane') &&
+                                    this.wallPositions?.map((element, index) => <Wall key={index} length={element.length} xPos={element.xPos} yPos={element.yPos} angleInDegrees={element.angleInDegrees} />)}
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        className="mechanicsSimulationEquationContainer"
+                        onWheel={e => this.props.isContentActive() && e.stopPropagation()}
+                        style={{ overflow: 'auto', height: `${Math.max(1, 800 / this.props.PanelWidth()) * 100}%`, transform: `scale(${Math.min(1, this.props.PanelWidth() / 850)})` }}>
+                        <div className="mechanicsSimulationControls">
+                            <Stack direction="row" spacing={1}>
+                                {this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
+                                    <IconButton onClick={() => (this.dataDoc.simulation_paused = false)}>
+                                        <PlayArrowIcon />
+                                    </IconButton>
+                                )}
+                                {!this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
+                                    <IconButton onClick={() => (this.dataDoc.simulation_paused = true)}>
+                                        <PauseIcon />
+                                    </IconButton>
+                                )}
+                                {this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
+                                    <IconButton onClick={action(() => this._simReset++)}>
+                                        <ReplayIcon />
+                                    </IconButton>
+                                )}
+                            </Stack>
+                            <div className="dropdownMenu">
+                                <select
+                                    value={StrCast(this.simulationType)}
+                                    onChange={event => {
+                                        this.dataDoc.simulation_type = event.target.value;
+                                        this.setupSimulation();
+                                    }}
+                                    style={{ height: '2em', width: '100%', fontSize: '16px' }}>
+                                    <option value="One Weight">Projectile</option>
+                                    <option value="Inclined Plane">Inclined Plane</option>
+                                    <option value="Pendulum">Pendulum</option>
+                                    <option value="Spring">Spring</option>
+                                    <option value="Circular Motion">Circular Motion</option>
+                                    <option value="Pulley">Pulley</option>
+                                    <option value="Suspension">Suspension</option>
+                                </select>
+                            </div>
+                            <div className="dropdownMenu">
+                                <select
+                                    value={this.simulationMode}
+                                    onChange={event => {
+                                        this.dataDoc.simulation_mode = event.target.value;
+                                        this.setupSimulation();
+                                    }}
+                                    style={{ height: '2em', width: '100%', fontSize: '16px' }}>
+                                    <option value="Tutorial">Tutorial Mode</option>
+                                    <option value="Freeform">Freeform Mode</option>
+                                    <option value="Review">Review Mode</option>
+                                </select>
+                            </div>
+                        </div>
+                        {this.simulationMode == 'Review' && this.simulationType != 'Inclined Plane' && (
+                            <div className="wordProblemBox">
+                                <p>
+                                    <>{this.simulationType} review problems in progress!</>
+                                </p>
+                                <hr />
+                            </div>
+                        )}
+                        {this.simulationMode == 'Review' && this.simulationType == 'Inclined Plane' && (
+                            <div>
+                                {!this.dataDoc.hintDialogueOpen && (
+                                    <IconButton
+                                        onClick={() => (this.dataDoc.hintDialogueOpen = true)}
+                                        sx={{
+                                            position: 'fixed',
+                                            left: this.xMax - 50 + 'px',
+                                            top: this.yMin + 14 + 'px',
+                                        }}>
+                                        <QuestionMarkIcon />
+                                    </IconButton>
+                                )}
+                                <Dialog maxWidth={'sm'} fullWidth={true} open={BoolCast(this.dataDoc.hintDialogueOpen)} onClose={() => (this.dataDoc.hintDialogueOpen = false)}>
+                                    <DialogTitle>Hints</DialogTitle>
+                                    <DialogContent>
+                                        {this.selectedQuestion.hints?.map((hint: any, index: number) => (
+                                            <div key={index}>
+                                                <DialogContentText>
+                                                    <details>
+                                                        <summary>
+                                                            <b>
+                                                                Hint {index + 1}: {hint.description}
+                                                            </b>
+                                                        </summary>
+                                                        {hint.content}
+                                                    </details>
+                                                </DialogContentText>
+                                            </div>
+                                        ))}
+                                    </DialogContent>
+                                    <DialogActions>
+                                        <Button onClick={() => (this.dataDoc.hintDialogueOpen = false)}>Close</Button>
+                                    </DialogActions>
+                                </Dialog>
+                                <div className="wordProblemBox">
+                                    <div className="question">
+                                        <p>{this.questionPartOne}</p>
+                                        <p>{this.questionPartTwo}</p>
+                                    </div>
+                                    <div className="answers">
+                                        {this.selectedQuestion.answerParts.includes('force of gravity') && (
+                                            <InputField
+                                                label={<p>Gravity magnitude</p>}
+                                                lowerBound={0}
+                                                dataDoc={this.dataDoc}
+                                                prop="review_GravityMagnitude"
+                                                step={0.1}
+                                                unit={'N'}
+                                                upperBound={50}
+                                                value={NumCast(this.dataDoc.review_GravityMagnitude)}
+                                                showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+                                                correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('force of gravity')]}
+                                                labelWidth={'7em'}
+                                            />
+                                        )}
+                                        {this.selectedQuestion.answerParts.includes('angle of gravity') && (
+                                            <InputField
+                                                label={<p>Gravity angle</p>}
+                                                lowerBound={0}
+                                                dataDoc={this.dataDoc}
+                                                prop="review_GravityAngle"
+                                                step={1}
+                                                unit={'°'}
+                                                upperBound={360}
+                                                value={NumCast(this.dataDoc.review_GravityAngle)}
+                                                radianEquivalent={true}
+                                                showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+                                                correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('angle of gravity')]}
+                                                labelWidth={'7em'}
+                                            />
+                                        )}
+                                        {this.selectedQuestion.answerParts.includes('normal force') && (
+                                            <InputField
+                                                label={<p>Normal force magnitude</p>}
+                                                lowerBound={0}
+                                                dataDoc={this.dataDoc}
+                                                prop="review_NormalMagnitude"
+                                                step={0.1}
+                                                unit={'N'}
+                                                upperBound={50}
+                                                value={NumCast(this.dataDoc.review_NormalMagnitude)}
+                                                showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+                                                correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('normal force')]}
+                                                labelWidth={'7em'}
+                                            />
+                                        )}
+                                        {this.selectedQuestion.answerParts.includes('angle of normal force') && (
+                                            <InputField
+                                                label={<p>Normal force angle</p>}
+                                                lowerBound={0}
+                                                dataDoc={this.dataDoc}
+                                                prop="review_NormalAngle"
+                                                step={1}
+                                                unit={'°'}
+                                                upperBound={360}
+                                                value={NumCast(this.dataDoc.review_NormalAngle)}
+                                                radianEquivalent={true}
+                                                showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+                                                correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('angle of normal force')]}
+                                                labelWidth={'7em'}
+                                            />
+                                        )}
+                                        {this.selectedQuestion.answerParts.includes('force of static friction') && (
+                                            <InputField
+                                                label={<p>Static friction magnitude</p>}
+                                                lowerBound={0}
+                                                dataDoc={this.dataDoc}
+                                                prop="review_StaticMagnitude"
+                                                step={0.1}
+                                                unit={'N'}
+                                                upperBound={50}
+                                                value={NumCast(this.dataDoc.review_StaticMagnitude)}
+                                                showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+                                                correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('force of static friction')]}
+                                                labelWidth={'7em'}
+                                            />
+                                        )}
+                                        {this.selectedQuestion.answerParts.includes('angle of static friction') && (
+                                            <InputField
+                                                label={<p>Static friction angle</p>}
+                                                lowerBound={0}
+                                                dataDoc={this.dataDoc}
+                                                prop="review_StaticAngle"
+                                                step={1}
+                                                unit={'°'}
+                                                upperBound={360}
+                                                value={NumCast(this.dataDoc.review_StaticAngle)}
+                                                radianEquivalent={true}
+                                                showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+                                                correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('angle of static friction')]}
+                                                labelWidth={'7em'}
+                                            />
+                                        )}
+                                        {this.selectedQuestion.answerParts.includes('coefficient of static friction') && (
+                                            <InputField
+                                                label={
+                                                    <Box>
+                                                        &mu;<sub>s</sub>
+                                                    </Box>
+                                                }
+                                                lowerBound={0}
+                                                dataDoc={this.dataDoc}
+                                                prop="coefficientOfStaticFriction"
+                                                step={0.1}
+                                                unit={''}
+                                                upperBound={1}
+                                                value={NumCast(this.dataDoc.coefficientOfStaticFriction)}
+                                                effect={this.updateReviewForcesBasedOnCoefficient}
+                                                showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+                                                correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('coefficient of static friction')]}
+                                            />
+                                        )}
+                                        {this.selectedQuestion.answerParts.includes('wedge angle') && (
+                                            <InputField
+                                                label={<Box>&theta;</Box>}
+                                                lowerBound={0}
+                                                dataDoc={this.dataDoc}
+                                                prop="wedge_angle"
+                                                step={1}
+                                                unit={'°'}
+                                                upperBound={49}
+                                                value={this.wedgeAngle}
+                                                effect={(val: number) => {
+                                                    this.changeWedgeBasedOnNewAngle(val);
+                                                    this.updateReviewForcesBasedOnAngle(val);
+                                                }}
+                                                radianEquivalent={true}
+                                                showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+                                                correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('wedge angle')]}
+                                            />
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                        {this.simulationMode == 'Tutorial' && (
+                            <div className="wordProblemBox">
+                                <div className="question">
+                                    <h2>Problem</h2>
+                                    <p>{this.tutorial.question}</p>
+                                </div>
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        justifyContent: 'spaceBetween',
+                                        width: '100%',
+                                    }}>
+                                    <IconButton
+                                        onClick={() => {
+                                            let step = NumCast(this.dataDoc.tutorial_stepNumber) - 1;
+                                            step = Math.max(step, 0);
+                                            step = Math.min(step, this.tutorial.steps.length - 1);
+                                            this.dataDoc.tutorial_stepNumber = step;
+                                            this.dataDoc.mass1_forcesStart = JSON.stringify(this.tutorial.steps[step].forces);
+                                            this.dataDoc.mass1_forcesUpdated = JSON.stringify(this.tutorial.steps[step].forces);
+                                            this.dataDoc.simulation_showForceMagnitudes = this.tutorial.steps[step].showMagnitude;
+                                        }}
+                                        disabled={this.dataDoc.tutorial_stepNumber == 0}>
+                                        <ArrowLeftIcon />
+                                    </IconButton>
+                                    <div>
+                                        <h3>
+                                            Step {NumCast(this.dataDoc.tutorial_stepNumber) + 1}: {this.tutorial.steps[NumCast(this.dataDoc.tutorial_stepNumber)].description}
+                                        </h3>
+                                        <p>{this.tutorial.steps[NumCast(this.dataDoc.tutorial_stepNumber)].content}</p>
+                                    </div>
+                                    <IconButton
+                                        onClick={() => {
+                                            let step = NumCast(this.dataDoc.tutorial_stepNumber) + 1;
+                                            step = Math.max(step, 0);
+                                            step = Math.min(step, this.tutorial.steps.length - 1);
+                                            this.dataDoc.tutorial_stepNumber = step;
+                                            this.dataDoc.mass1_forcesStart = JSON.stringify(this.tutorial.steps[step].forces);
+                                            this.dataDoc.mass1_forcesUpdated = JSON.stringify(this.tutorial.steps[step].forces);
+                                            this.dataDoc.simulation_showForceMagnitudes = this.tutorial.steps[step].showMagnitude;
+                                        }}
+                                        disabled={this.dataDoc.tutorial_stepNumber === this.tutorial.steps.length - 1}>
+                                        <ArrowRightIcon />
+                                    </IconButton>
+                                </div>
+                                <div>
+                                    {(this.simulationType == 'One Weight' || this.simulationType == 'Inclined Plane' || this.simulationType == 'Pendulum') && <p>Resources</p>}
+                                    {this.simulationType == 'One Weight' && (
+                                        <ul>
+                                            <li>
+                                                <a
+                                                    href="https://www.khanacademy.org/science/physics/one-dimensional-motion"
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    style={{
+                                                        color: 'blue',
+                                                        textDecoration: 'underline',
+                                                    }}>
+                                                    Khan Academy - One Dimensional Motion
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a
+                                                    href="https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    style={{
+                                                        color: 'blue',
+                                                        textDecoration: 'underline',
+                                                    }}>
+                                                    Khan Academy - Two Dimensional Motion
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    )}
+                                    {this.simulationType == 'Inclined Plane' && (
+                                        <ul>
+                                            <li>
+                                                <a
+                                                    href="https://www.khanacademy.org/science/physics/forces-newtons-laws#normal-contact-force"
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    style={{
+                                                        color: 'blue',
+                                                        textDecoration: 'underline',
+                                                    }}>
+                                                    Khan Academy - Normal Force
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a
+                                                    href="https://www.khanacademy.org/science/physics/forces-newtons-laws#inclined-planes-friction"
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    style={{
+                                                        color: 'blue',
+                                                        textDecoration: 'underline',
+                                                    }}>
+                                                    Khan Academy - Inclined Planes
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    )}
+                                    {this.simulationType == 'Pendulum' && (
+                                        <ul>
+                                            <li>
+                                                <a
+                                                    href="https://www.khanacademy.org/science/physics/forces-newtons-laws#tension-tutorial"
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    style={{
+                                                        color: 'blue',
+                                                        textDecoration: 'underline',
+                                                    }}>
+                                                    Khan Academy - Tension
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                        {this.simulationMode == 'Review' && this.simulationType == 'Inclined Plane' && (
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    marginTop: '10px',
+                                }}>
+                                <p
+                                    style={{
+                                        color: 'blue',
+                                        textDecoration: 'underline',
+                                        cursor: 'pointer',
+                                    }}
+                                    onClick={() => (this.dataDoc.simulation_mode = 'Tutorial')}>
+                                    {' '}
+                                    Go to walkthrough{' '}
+                                </p>
+                                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                    <Button
+                                        onClick={action(() => {
+                                            this._simReset++;
+                                            this.checkAnswers();
+                                            this.dataDoc.simulation_showIcon = true;
+                                        })}
+                                        variant="outlined">
+                                        <p>Submit</p>
+                                    </Button>
+                                    <Button
+                                        onClick={() => {
+                                            this.generateNewQuestion();
+                                            this.dataDoc.simulation_showIcon = false;
+                                        }}
+                                        variant="outlined">
+                                        <p>New question</p>
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
+                        {this.simulationMode == 'Freeform' && (
+                            <div className="vars">
+                                <FormControl component="fieldset">
+                                    <FormGroup>
+                                        {this.simulationType == 'One Weight' && (
+                                            <FormControlLabel
+                                                control={<Checkbox checked={BoolCast(this.dataDoc.elasticCollisions)} onChange={() => (this.dataDoc.elasticCollisions = !this.dataDoc.elasticCollisions)} />}
+                                                label="Make collisions elastic"
+                                                labelPlacement="start"
+                                            />
+                                        )}
+                                        <FormControlLabel
+                                            control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showForces)} onChange={() => (this.dataDoc.simulation_showForces = !this.dataDoc.simulation_showForces)} />}
+                                            label="Show force vectors"
+                                            labelPlacement="start"
+                                        />
+                                        {(this.simulationType == 'Inclined Plane' || this.simulationType == 'Pendulum') && (
+                                            <FormControlLabel
+                                                control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showComponentForces)} onChange={() => (this.dataDoc.simulation_showComponentForces = !this.dataDoc.simulation_showComponentForces)} />}
+                                                label="Show component force vectors"
+                                                labelPlacement="start"
+                                            />
+                                        )}
+                                        <FormControlLabel
+                                            control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showAcceleration)} onChange={() => (this.dataDoc.simulation_showAcceleration = !this.dataDoc.simulation_showAcceleration)} />}
+                                            label="Show acceleration vector"
+                                            labelPlacement="start"
+                                        />
+                                        <FormControlLabel
+                                            control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showVelocity)} onChange={() => (this.dataDoc.simulation_showVelocity = !this.dataDoc.simulation_showVelocity)} />}
+                                            label="Show velocity vector"
+                                            labelPlacement="start"
+                                        />
+                                        <InputField label={<Box>Speed</Box>} lowerBound={1} dataDoc={this.dataDoc} prop="simulation_speed" step={1} unit={'x'} upperBound={10} value={NumCast(this.dataDoc.simulation_speed, 2)} labelWidth={'5em'} />
+                                        {this.dataDoc.simulation_paused && this.simulationType != 'Circular Motion' && (
+                                            <InputField
+                                                label={<Box>Gravity</Box>}
+                                                lowerBound={-30}
+                                                dataDoc={this.dataDoc}
+                                                prop="gravity"
+                                                step={0.01}
+                                                unit={'m/s2'}
+                                                upperBound={0}
+                                                value={NumCast(this.dataDoc.simulation_gravity, -9.81)}
+                                                effect={(val: number) => this.setupSimulation()}
+                                                labelWidth={'5em'}
+                                            />
+                                        )}
+                                        {this.dataDoc.simulation_paused && this.simulationType != 'Pulley' && (
+                                            <InputField
+                                                label={<Box>Mass</Box>}
+                                                lowerBound={1}
+                                                dataDoc={this.dataDoc}
+                                                prop="mass1"
+                                                step={0.1}
+                                                unit={'kg'}
+                                                upperBound={5}
+                                                value={this.mass1 ?? 1}
+                                                effect={(val: number) => this.setupSimulation()}
+                                                labelWidth={'5em'}
+                                            />
+                                        )}
+                                        {this.dataDoc.simulation_paused && this.simulationType == 'Pulley' && (
+                                            <InputField
+                                                label={<Box>Red mass</Box>}
+                                                lowerBound={1}
+                                                dataDoc={this.dataDoc}
+                                                prop="mass1"
+                                                step={0.1}
+                                                unit={'kg'}
+                                                upperBound={5}
+                                                value={this.mass1 ?? 1}
+                                                effect={(val: number) => this.setupSimulation()}
+                                                labelWidth={'5em'}
+                                            />
+                                        )}
+                                        {this.dataDoc.simulation_paused && this.simulationType == 'Pulley' && (
+                                            <InputField
+                                                label={<Box>Blue mass</Box>}
+                                                lowerBound={1}
+                                                dataDoc={this.dataDoc}
+                                                prop="mass2"
+                                                step={0.1}
+                                                unit={'kg'}
+                                                upperBound={5}
+                                                value={this.mass2 ?? 1}
+                                                effect={(val: number) => this.setupSimulation()}
+                                                labelWidth={'5em'}
+                                            />
+                                        )}
+                                        {this.dataDoc.simulation_paused && this.simulationType == 'Circular Motion' && (
+                                            <InputField
+                                                label={<Box>Rod length</Box>}
+                                                lowerBound={100}
+                                                dataDoc={this.dataDoc}
+                                                prop="circularMotionRadius"
+                                                step={5}
+                                                unit={'m'}
+                                                upperBound={250}
+                                                value={this.circularMotionRadius}
+                                                effect={(val: number) => this.setupSimulation()}
+                                                labelWidth={'5em'}
+                                            />
+                                        )}
+                                    </FormGroup>
+                                </FormControl>
+                                {this.simulationType == 'Spring' && this.dataDoc.simulation_paused && (
+                                    <div>
+                                        <InputField
+                                            label={<Typography color="inherit">Spring stiffness</Typography>}
+                                            lowerBound={0.1}
+                                            dataDoc={this.dataDoc}
+                                            prop="spring_constant"
+                                            step={1}
+                                            unit={'N/m'}
+                                            upperBound={500}
+                                            value={this.springConstant}
+                                            effect={action(() => this._simReset++)}
+                                            radianEquivalent={false}
+                                            mode={'Freeform'}
+                                            labelWidth={'7em'}
+                                        />
+                                        <InputField
+                                            label={<Typography color="inherit">Rest length</Typography>}
+                                            lowerBound={10}
+                                            dataDoc={this.dataDoc}
+                                            prop="spring_lengthRest"
+                                            step={100}
+                                            unit=""
+                                            upperBound={500}
+                                            value={this.springLengthRest}
+                                            effect={action(() => this._simReset++)}
+                                            radianEquivalent={false}
+                                            mode="Freeform"
+                                            labelWidth={'7em'}
+                                        />
+                                        <InputField
+                                            label={<Typography color="inherit">Starting displacement</Typography>}
+                                            lowerBound={-(this.springLengthRest - 10)}
+                                            dataDoc={this.dataDoc}
+                                            prop=""
+                                            step={10}
+                                            unit=""
+                                            upperBound={this.springLengthRest}
+                                            value={this.springLengthStart - this.springLengthRest}
+                                            effect={action((val: number) => {
+                                                this.dataDoc.mass1_positionYstart = this.springLengthRest + val;
+                                                this.dataDoc.spring_lengthStart = this.springLengthRest + val;
+                                                this._simReset++;
+                                            })}
+                                            radianEquivalent={false}
+                                            mode="Freeform"
+                                            labelWidth={'7em'}
+                                        />
+                                    </div>
+                                )}
+                                {this.simulationType == 'Inclined Plane' && this.dataDoc.simulation_paused && (
+                                    <div>
+                                        <InputField
+                                            label={<Box>&theta;</Box>}
+                                            lowerBound={0}
+                                            dataDoc={this.dataDoc}
+                                            prop="wedge_angle"
+                                            step={1}
+                                            unit={'°'}
+                                            upperBound={49}
+                                            value={this.wedgeAngle}
+                                            effect={action((val: number) => {
+                                                this.changeWedgeBasedOnNewAngle(val);
+                                                this._simReset++;
+                                            })}
+                                            radianEquivalent={true}
+                                            mode={'Freeform'}
+                                            labelWidth={'2em'}
+                                        />
+                                        <InputField
+                                            label={
+                                                <Box>
+                                                    &mu;<sub>s</sub>
+                                                </Box>
+                                            }
+                                            lowerBound={0}
+                                            dataDoc={this.dataDoc}
+                                            prop="coefficientOfStaticFriction"
+                                            step={0.1}
+                                            unit={''}
+                                            upperBound={1}
+                                            value={NumCast(this.dataDoc.coefficientOfStaticFriction) ?? 0}
+                                            effect={action((val: number) => {
+                                                this.updateForcesWithFriction(val);
+                                                if (val < NumCast(this.dataDoc.coefficientOfKineticFriction)) {
+                                                    this.dataDoc.soefficientOfKineticFriction = val;
+                                                }
+                                                this._simReset++;
+                                            })}
+                                            mode={'Freeform'}
+                                            labelWidth={'2em'}
+                                        />
+                                        <InputField
+                                            label={
+                                                <Box>
+                                                    &mu;<sub>k</sub>
+                                                </Box>
+                                            }
+                                            lowerBound={0}
+                                            dataDoc={this.dataDoc}
+                                            prop="coefficientOfKineticFriction"
+                                            step={0.1}
+                                            unit={''}
+                                            upperBound={NumCast(this.dataDoc.coefficientOfStaticFriction)}
+                                            value={NumCast(this.dataDoc.coefficientOfKineticFriction) ?? 0}
+                                            effect={action(() => this._simReset++)}
+                                            mode={'Freeform'}
+                                            labelWidth={'2em'}
+                                        />
+                                    </div>
+                                )}
+                                {this.simulationType == 'Inclined Plane' && !this.dataDoc.simulation_paused && (
+                                    <Typography>
+                                        <>
+                                            &theta;: {Math.round(this.wedgeAngle * 100) / 100}° ≈ {Math.round(((this.wedgeAngle * Math.PI) / 180) * 100) / 100} rad
+                                            <br />
+                                            &mu; <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction}
+                                            <br />
+                                            &mu; <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction}
+                                        </>
+                                    </Typography>
+                                )}
+                                {this.simulationType == 'Pendulum' && !this.dataDoc.simulation_paused && (
+                                    <Typography>
+                                        &theta;: {Math.round(this.pendulumAngle * 100) / 100}° ≈ {Math.round(((this.pendulumAngle * Math.PI) / 180) * 100) / 100} rad
+                                    </Typography>
+                                )}
+                                {this.simulationType == 'Pendulum' && this.dataDoc.simulation_paused && (
+                                    <div>
+                                        <InputField
+                                            label={<Box>Angle</Box>}
+                                            lowerBound={0}
+                                            dataDoc={this.dataDoc}
+                                            prop="pendulum_angle"
+                                            step={1}
+                                            unit={'°'}
+                                            upperBound={59}
+                                            value={NumCast(this.dataDoc.pendulum_angle, 30)}
+                                            effect={action(value => {
+                                                this.dataDoc.pendulum_angleStart = value;
+                                                this.dataDoc.pendulum_lengthStart = this.dataDoc.pendulum_length;
+                                                if (this.simulationType == 'Pendulum') {
+                                                    const mag = this.mass1 * Math.abs(this.gravity) * Math.cos((value * Math.PI) / 180);
+
+                                                    const forceOfTension: IForce = {
+                                                        description: 'Tension',
+                                                        magnitude: mag,
+                                                        directionInDegrees: 90 - value,
+                                                    };
+                                                    const gravityParallel: IForce = {
+                                                        description: 'Gravity Parallel Component',
+                                                        magnitude: Math.abs(this.gravity) * Math.cos((value * Math.PI) / 180),
+                                                        directionInDegrees: 270 - value,
+                                                    };
+                                                    const gravityPerpendicular: IForce = {
+                                                        description: 'Gravity Perpendicular Component',
+                                                        magnitude: Math.abs(this.gravity) * Math.sin((value * Math.PI) / 180),
+                                                        directionInDegrees: -value,
+                                                    };
+
+                                                    const length = this.pendulumLength;
+                                                    const x = length * Math.cos(((90 - value) * Math.PI) / 180);
+                                                    const y = length * Math.sin(((90 - value) * Math.PI) / 180);
+                                                    const xPos = this.xMax / 2 - x - NumCast(this.dataDoc.radius);
+                                                    const yPos = y - NumCast(this.dataDoc.radius) - 5;
+                                                    this.dataDoc.mass1_positionXstart = xPos;
+                                                    this.dataDoc.mass1_positionYstart = yPos;
+
+                                                    this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
+                                                    this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
+                                                    this.dataDoc.mass1_componentForces = JSON.stringify([forceOfTension, gravityParallel, gravityPerpendicular]);
+                                                    this._simReset++;
+                                                }
+                                            })}
+                                            radianEquivalent={true}
+                                            mode="Freeform"
+                                            labelWidth="5em"
+                                        />
+                                        <InputField
+                                            label={<Box>Rod length</Box>}
+                                            lowerBound={0}
+                                            dataDoc={this.dataDoc}
+                                            prop="pendulum_length"
+                                            step={1}
+                                            unit="m"
+                                            upperBound={400}
+                                            value={Math.round(this.pendulumLength)}
+                                            effect={action(value => {
+                                                if (this.simulationType == 'Pendulum') {
+                                                    this.dataDoc.pendulum_angleStart = this.pendulumAngle;
+                                                    this.dataDoc.pendulum_lengthStart = value;
+                                                    this._simReset++;
+                                                }
+                                            })}
+                                            radianEquivalent={false}
+                                            mode="Freeform"
+                                            labelWidth="5em"
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                        <div className="mechanicsSimulationEquation">
+                            {this.simulationMode == 'Freeform' && (
+                                <table>
+                                    <tbody>
+                                        <tr>
+                                            <td>{this.simulationType == 'Pulley' ? 'Red Weight' : ''}</td>
+                                            <td>X</td>
+                                            <td>Y</td>
+                                        </tr>
+                                        <tr>
+                                            <td
+                                                style={{ cursor: 'help' }}
+                                                // onClick={() => {
+                                                //   window.open(
+                                                //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                                                //   );
+                                                // }}
+                                            >
+                                                <Box>Position</Box>
+                                            </td>
+                                            {(!this.dataDoc.simulation_paused || this.simulationType == 'Inclined Plane' || this.simulationType == 'Circular Motion' || this.simulationType == 'Pulley') && (
+                                                <td style={{ cursor: 'default' }}>
+                                                    <>{this.dataDoc.mass1_positionX} m</>
+                                                </td>
+                                            )}{' '}
+                                            {this.dataDoc.simulation_paused && this.simulationType != 'Inclined Plane' && this.simulationType != 'Circular Motion' && this.simulationType != 'Pulley' && (
+                                                <td
+                                                    style={{
+                                                        cursor: 'default',
+                                                    }}>
+                                                    <InputField
+                                                        lowerBound={this.simulationType == 'Projectile' ? 1 : (this.xMax + this.xMin) / 4 - this.radius - 15}
+                                                        dataDoc={this.dataDoc}
+                                                        prop="mass1_positionX"
+                                                        step={1}
+                                                        unit={'m'}
+                                                        upperBound={this.simulationType == 'Projectile' ? this.xMax - 110 : (3 * (this.xMax + this.xMin)) / 4 - this.radius / 2 - 15}
+                                                        value={NumCast(this.dataDoc.mass1_positionX)}
+                                                        effect={value => {
+                                                            this.dataDoc.mass1_xChange = value;
+                                                            if (this.simulationType == 'Suspension') {
+                                                                let x1rod = (this.xMax + this.xMin) / 2 - this.radius - this.yMin - 200;
+                                                                let x2rod = (this.xMax + this.xMin) / 2 + this.yMin + 200 + this.radius;
+                                                                let deltaX1 = value + this.radius - x1rod;
+                                                                let deltaX2 = x2rod - (value + this.radius);
+                                                                let deltaY = this.getYPosFromDisplay(NumCast(this.dataDoc.mass1_positionY)) + this.radius;
+                                                                let dir1T = Math.PI - Math.atan(deltaY / deltaX1);
+                                                                let dir2T = Math.atan(deltaY / deltaX2);
+                                                                let tensionMag2 = (this.mass1 * Math.abs(this.gravity)) / ((-Math.cos(dir2T) / Math.cos(dir1T)) * Math.sin(dir1T) + Math.sin(dir2T));
+                                                                let tensionMag1 = (-tensionMag2 * Math.cos(dir2T)) / Math.cos(dir1T);
+                                                                dir1T = (dir1T * 180) / Math.PI;
+                                                                dir2T = (dir2T * 180) / Math.PI;
+                                                                const tensionForce1: IForce = {
+                                                                    description: 'Tension',
+                                                                    magnitude: tensionMag1,
+                                                                    directionInDegrees: dir1T,
+                                                                };
+                                                                const tensionForce2: IForce = {
+                                                                    description: 'Tension',
+                                                                    magnitude: tensionMag2,
+                                                                    directionInDegrees: dir2T,
+                                                                };
+                                                                const gravity = this.gravityForce(this.mass1);
+                                                                this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
+                                                            }
+                                                        }}
+                                                        small={true}
+                                                        mode="Freeform"
+                                                    />
+                                                </td>
+                                            )}{' '}
+                                            {(!this.dataDoc.simulation_paused || this.simulationType == 'Inclined Plane' || this.simulationType == 'Circular Motion' || this.simulationType == 'Pulley') && (
+                                                <td style={{ cursor: 'default' }}>{`${NumCast(this.dataDoc.mass1_positionY)} m`}</td>
+                                            )}{' '}
+                                            {this.dataDoc.simulation_paused && this.simulationType != 'Inclined Plane' && this.simulationType != 'Circular Motion' && this.simulationType != 'Pulley' && (
+                                                <td
+                                                    style={{
+                                                        cursor: 'default',
+                                                    }}>
+                                                    <InputField
+                                                        lowerBound={1}
+                                                        dataDoc={this.dataDoc}
+                                                        prop="mass1_positionY"
+                                                        step={1}
+                                                        unit="m"
+                                                        upperBound={this.yMax - 110}
+                                                        value={NumCast(this.dataDoc.mass1_positionY)}
+                                                        effect={value => {
+                                                            this.dataDoc.mass1_yChange = value;
+                                                            if (this.simulationType == 'Suspension') {
+                                                                let x1rod = (this.xMax + this.xMin) / 2 - this.radius - this.yMin - 200;
+                                                                let x2rod = (this.xMax + this.xMin) / 2 + this.yMin + 200 + this.radius;
+                                                                let deltaX1 = NumCast(this.dataDoc.mass1_positionX) + this.radius - x1rod;
+                                                                let deltaX2 = x2rod - (NumCast(this.dataDoc.mass1_positionX) + this.radius);
+                                                                let deltaY = this.getYPosFromDisplay(value) + this.radius;
+                                                                let dir1T = Math.PI - Math.atan(deltaY / deltaX1);
+                                                                let dir2T = Math.atan(deltaY / deltaX2);
+                                                                let tensionMag2 = (this.mass1 * Math.abs(this.gravity)) / ((-Math.cos(dir2T) / Math.cos(dir1T)) * Math.sin(dir1T) + Math.sin(dir2T));
+                                                                let tensionMag1 = (-tensionMag2 * Math.cos(dir2T)) / Math.cos(dir1T);
+                                                                dir1T = (dir1T * 180) / Math.PI;
+                                                                dir2T = (dir2T * 180) / Math.PI;
+                                                                const tensionForce1: IForce = {
+                                                                    description: 'Tension',
+                                                                    magnitude: tensionMag1,
+                                                                    directionInDegrees: dir1T,
+                                                                };
+                                                                const tensionForce2: IForce = {
+                                                                    description: 'Tension',
+                                                                    magnitude: tensionMag2,
+                                                                    directionInDegrees: dir2T,
+                                                                };
+                                                                const gravity = this.gravityForce(this.mass1);
+                                                                this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
+                                                            }
+                                                        }}
+                                                        small={true}
+                                                        mode="Freeform"
+                                                    />
+                                                </td>
+                                            )}{' '}
+                                        </tr>
+                                        <tr>
+                                            <td
+                                                style={{ cursor: 'help' }}
+                                                // onClick={() => {
+                                                //   window.open(
+                                                //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                                                //   );
+                                                // }}
+                                            >
+                                                <Box>Velocity</Box>
+                                            </td>
+                                            {(!this.dataDoc.simulation_paused || (this.simulationType != 'One Weight' && this.simulationType != 'Circular Motion')) && (
+                                                <td style={{ cursor: 'default' }}>{`${NumCast(this.dataDoc.mass1_velocityX)} m/s`}</td>
+                                            )}{' '}
+                                            {this.dataDoc.simulation_paused && (this.simulationType == 'One Weight' || this.simulationType == 'Circular Motion') && (
+                                                <td
+                                                    style={{
+                                                        cursor: 'default',
+                                                    }}>
+                                                    <InputField
+                                                        lowerBound={-50}
+                                                        dataDoc={this.dataDoc}
+                                                        prop="mass1_velocityX"
+                                                        step={1}
+                                                        unit={'m/s'}
+                                                        upperBound={50}
+                                                        value={NumCast(this.dataDoc.mass1_velocityX)}
+                                                        effect={action(value => {
+                                                            this.dataDoc.mass1_velocityXstart = value;
+                                                            this._simReset++;
+                                                        })}
+                                                        small={true}
+                                                        mode="Freeform"
+                                                    />
+                                                </td>
+                                            )}{' '}
+                                            {(!this.dataDoc.simulation_paused || this.simulationType != 'One Weight') && (
+                                                <td style={{ cursor: 'default' }}>
+                                                    <>{this.dataDoc.mass1_velocityY} m/s</>
+                                                </td>
+                                            )}{' '}
+                                            {this.dataDoc.simulation_paused && this.simulationType == 'One Weight' && (
+                                                <td
+                                                    style={{
+                                                        cursor: 'default',
+                                                    }}>
+                                                    <InputField
+                                                        lowerBound={-50}
+                                                        dataDoc={this.dataDoc}
+                                                        prop="mass1_velocityY"
+                                                        step={1}
+                                                        unit="m/s"
+                                                        upperBound={50}
+                                                        value={NumCast(this.dataDoc.mass1_velocityY)}
+                                                        effect={value => {
+                                                            this.dataDoc.mass1_velocityYstart = -value;
+                                                        }}
+                                                        small={true}
+                                                        mode="Freeform"
+                                                    />
+                                                </td>
+                                            )}{' '}
+                                        </tr>
+                                        <tr>
+                                            <td
+                                                style={{ cursor: 'help' }}
+                                                // onClick={() => {
+                                                //   window.open(
+                                                //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                                                //   );
+                                                // }}
+                                            >
+                                                <Box>Acceleration</Box>
+                                            </td>
+                                            <td style={{ cursor: 'default' }}>
+                                                <>
+                                                    {this.dataDoc.mass1_accelerationX} m/s<sup>2</sup>
+                                                </>
+                                            </td>
+                                            <td style={{ cursor: 'default' }}>
+                                                <>
+                                                    {this.dataDoc.mass1_accelerationY} m/s<sup>2</sup>
+                                                </>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <Box>Momentum</Box>
+                                            </td>
+                                            <td>{Math.round(NumCast(this.dataDoc.mass1_velocityX) * this.mass1 * 10) / 10} kg*m/s</td>
+                                            <td>{Math.round(NumCast(this.dataDoc.mass1_velocityY) * this.mass1 * 10) / 10} kg*m/s</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            )}
+                            {this.simulationMode == 'Freeform' && this.simulationType == 'Pulley' && (
+                                <table>
+                                    <tbody>
+                                        <tr>
+                                            <td>Blue Weight</td>
+                                            <td>X</td>
+                                            <td>Y</td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <Box>Position</Box>
+                                            </td>
+                                            <td style={{ cursor: 'default' }}>{`${this.dataDoc.mass2_positionX} m`}</td>
+                                            <td style={{ cursor: 'default' }}>{`${this.dataDoc.mass2_positionY} m`}</td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <Box>Velocity</Box>
+                                            </td>
+                                            <td style={{ cursor: 'default' }}>{`${this.dataDoc.mass2_positionX} m/s`}</td>
+                                            <td style={{ cursor: 'default' }}>{`${this.dataDoc.mass2_positionY} m/s`}</td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <Box>Acceleration</Box>
+                                            </td>
+                                            <td style={{ cursor: 'default' }}>
+                                                <>
+                                                    {this.dataDoc.mass2_accelerationX} m/s<sup>2</sup>
+                                                </>
+                                            </td>
+                                            <td style={{ cursor: 'default' }}>
+                                                <>
+                                                    {this.dataDoc.mass2_accelerationY} m/s<sup>2</sup>
+                                                </>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <Box>Momentum</Box>
+                                            </td>
+                                            <td>{Math.round(NumCast(this.dataDoc.mass2_velocityX) * this.mass1 * 10) / 10} kg*m/s</td>
+                                            <td>{Math.round(NumCast(this.dataDoc.mass2_velocityY) * this.mass1 * 10) / 10} kg*m/s</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            )}
+                        </div>
+                        {this.simulationType != 'Pendulum' && this.simulationType != 'Spring' && (
+                            <div>
+                                <p>Kinematic Equations</p>
+                                <ul>
+                                    <li>
+                                        Position: x<sub>1</sub>=x<sub>0</sub>+v<sub>0</sub>t+
+                                        <sup>1</sup>&frasl;
+                                        <sub>2</sub>at
+                                        <sup>2</sup>
+                                    </li>
+                                    <li>
+                                        Velocity: v<sub>1</sub>=v<sub>0</sub>+at
+                                    </li>
+                                    <li>Acceleration: a = F/m</li>
+                                </ul>
+                            </div>
+                        )}
+                        {this.simulationType == 'Spring' && (
+                            <div>
+                                <p>Harmonic Motion Equations: Spring</p>
+                                <ul>
+                                    <li>
+                                        Spring force: F<sub>s</sub>=kd
+                                    </li>
+                                    <li>
+                                        Spring period: T<sub>s</sub>=2&pi;&#8730;<sup>m</sup>&frasl;
+                                        <sub>k</sub>
+                                    </li>
+                                    <li>Equilibrium displacement for vertical spring: d = mg/k</li>
+                                    <li>
+                                        Elastic potential energy: U<sub>s</sub>=<sup>1</sup>&frasl;
+                                        <sub>2</sub>kd<sup>2</sup>
+                                    </li>
+                                    <ul>
+                                        <li>Maximum when system is at maximum displacement, 0 when system is at 0 displacement</li>
+                                    </ul>
+                                    <li>
+                                        Translational kinetic energy: K=<sup>1</sup>&frasl;
+                                        <sub>2</sub>mv<sup>2</sup>
+                                    </li>
+                                    <ul>
+                                        <li>Maximum when system is at maximum/minimum velocity (at 0 displacement), 0 when velocity is 0 (at maximum displacement)</li>
+                                    </ul>
+                                </ul>
+                            </div>
+                        )}
+                        {this.simulationType == 'Pendulum' && (
+                            <div>
+                                <p>Harmonic Motion Equations: Pendulum</p>
+                                <ul>
+                                    <li>
+                                        Pendulum period: T<sub>p</sub>=2&pi;&#8730;<sup>l</sup>&frasl;
+                                        <sub>g</sub>
+                                    </li>
+                                </ul>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div
+                    style={{
+                        position: 'fixed',
+                        top: this.yMax - 120 + 20 + 'px',
+                        left: this.xMin + 90 - 80 + 'px',
+                        zIndex: -10000,
+                    }}>
+                    <svg width={100 + 'px'} height={100 + 'px'}>
+                        <defs>
+                            <marker id="miniArrow" markerWidth="20" markerHeight="20" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
+                                <path d="M0,0 L0,6 L9,3 z" fill={'#000000'} />
+                            </marker>
+                        </defs>
+                        <line x1={20} y1={70} x2={70} y2={70} stroke={'#000000'} strokeWidth="2" markerEnd="url(#miniArrow)" />
+                        <line x1={20} y1={70} x2={20} y2={20} stroke={'#000000'} strokeWidth="2" markerEnd="url(#miniArrow)" />
+                    </svg>
+                    <p
+                        style={{
+                            position: 'fixed',
+                            top: this.yMax - 120 + 40 + 'px',
+                            left: this.xMin + 90 - 80 + 'px',
+                        }}>
+                        {this.simulationType == 'Circular Motion' ? 'Z' : 'Y'}
+                    </p>
+                    <p
+                        style={{
+                            position: 'fixed',
+                            top: this.yMax - 120 + 80 + 'px',
+                            left: this.xMin + 90 - 40 + 'px',
+                        }}>
+                        X
+                    </p>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
new file mode 100644
index 000000000..d595a499e
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -0,0 +1,179 @@
+import { TextField, InputAdornment } from '@mui/material';
+import { Doc } from '../../../../fields/Doc';
+import React = require('react');
+import TaskAltIcon from '@mui/icons-material/TaskAlt';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { isNumber } from 'lodash';
+export interface IInputProps {
+    label?: JSX.Element;
+    lowerBound: number;
+    dataDoc: Doc;
+    prop: string;
+    step: number;
+    unit: string;
+    upperBound: number;
+    value: number | string | Array<number | string>;
+    correctValue?: number;
+    showIcon?: boolean;
+    effect?: (val: number) => any;
+    radianEquivalent?: boolean;
+    small?: boolean;
+    mode?: string;
+    update?: boolean;
+    labelWidth?: string;
+}
+
+interface IState {
+    tempValue: string | number | (string | number)[];
+    tempRadianValue: number;
+    width: string;
+    margin: string;
+}
+
+export default class InputField extends React.Component<IInputProps, IState> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            tempValue: this.props.mode != 'Freeform' && !this.props.showIcon ? 0 : this.props.value,
+            tempRadianValue: this.props.mode != 'Freeform' && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180,
+            width: this.props.small ? '6em' : '7em',
+            margin: this.props.small ? '0px' : '10px',
+        };
+    }
+
+    epsilon: number = 0.01;
+
+    componentDidMount(): void {
+        this.setState({ tempValue: Number(this.props.value) });
+    }
+
+    componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
+        if (prevProps.value != this.props.value && isNumber(this.props.value) && !isNaN(this.props.value)) {
+            if (this.props.mode == 'Freeform') {
+                if (isNumber(this.state.tempValue) && Math.abs(this.state.tempValue - Number(this.props.value)) > 1) {
+                    this.setState({ tempValue: Number(this.props.value) });
+                }
+            }
+        }
+        if (prevProps.update != this.props.update) {
+            this.externalUpdate();
+        }
+    }
+
+    externalUpdate = () => {
+        this.setState({ tempValue: Number(this.props.value) });
+        this.setState({ tempRadianValue: (Number(this.props.value) * Math.PI) / 180 });
+    };
+
+    onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        let value = event.target.value == '' ? 0 : Number(event.target.value);
+        if (value > this.props.upperBound) {
+            value = this.props.upperBound;
+        } else if (value < this.props.lowerBound) {
+            value = this.props.lowerBound;
+        }
+        if (this.props.prop != '') {
+            this.props.dataDoc[this.props.prop] = value;
+        }
+        this.setState({ tempValue: event.target.value == '' ? event.target.value : value });
+        this.setState({ tempRadianValue: (value * Math.PI) / 180 });
+        if (this.props.effect) {
+            this.props.effect(value);
+        }
+    };
+
+    onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+        let value = event.target.value === '' ? 0 : Number(event.target.value);
+        if (value > 2 * Math.PI) {
+            value = 2 * Math.PI;
+        } else if (value < 0) {
+            value = 0;
+        }
+        if (this.props.prop != '') {
+            this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI;
+        }
+        this.setState({ tempValue: (value * 180) / Math.PI });
+        this.setState({ tempRadianValue: value });
+        if (this.props.effect) {
+            this.props.effect((value * 180) / Math.PI);
+        }
+    };
+
+    render() {
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    lineHeight: '1.5',
+                    textAlign: 'right',
+                    alignItems: 'center',
+                }}>
+                {this.props.label && (
+                    <div
+                        style={{
+                            marginTop: '0.3em',
+                            marginBottom: '-0.5em',
+                            width: this.props.labelWidth ?? '2em',
+                        }}>
+                        {this.props.label}
+                    </div>
+                )}
+                <TextField
+                    type="number"
+                    variant="standard"
+                    value={this.state.tempValue}
+                    onChange={this.onChange}
+                    sx={{
+                        height: '1em',
+                        width: this.state.width,
+                        marginLeft: this.state.margin,
+                        zIndex: 'modal',
+                    }}
+                    inputProps={{
+                        step: this.props.step,
+                        min: this.props.lowerBound,
+                        max: this.props.upperBound,
+                        type: 'number',
+                    }}
+                    InputProps={{
+                        startAdornment: (
+                            <InputAdornment position="start">
+                                {Math.abs(Number(this.props.value) - (this.props.correctValue ?? 0)) < this.epsilon && this.props.showIcon && <TaskAltIcon color={'success'} />}
+                                {Math.abs(Number(this.props.value) - (this.props.correctValue ?? 0)) >= this.epsilon && this.props.showIcon && <ErrorOutlineIcon color={'error'} />}
+                            </InputAdornment>
+                        ),
+                        endAdornment: <InputAdornment position="end">{this.props.unit}</InputAdornment>,
+                    }}
+                />
+                {this.props.radianEquivalent && (
+                    <div style={{ marginTop: '0.3em', marginBottom: '-0.5em', width: '1em' }}>
+                        <p>≈</p>
+                    </div>
+                )}
+                {this.props.radianEquivalent && (
+                    <TextField
+                        type="number"
+                        variant="standard"
+                        value={this.state.tempRadianValue}
+                        onChange={this.onChangeRadianValue}
+                        sx={{
+                            height: '1em',
+                            width: this.state.width,
+                            marginLeft: this.state.margin,
+                            zIndex: 'modal',
+                        }}
+                        inputProps={{
+                            step: Math.PI / 8,
+                            min: 0,
+                            max: 2 * Math.PI,
+                            type: 'number',
+                        }}
+                        InputProps={{
+                            endAdornment: <InputAdornment position="end">rad</InputAdornment>,
+                        }}
+                    />
+                )}
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationQuestions.json b/src/client/views/nodes/PhysicsBox/PhysicsSimulationQuestions.json
new file mode 100644
index 000000000..cc79f7aad
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationQuestions.json
@@ -0,0 +1,161 @@
+{
+  "inclinePlane": [
+    {
+      "questionSetup": [
+        "There is a 1kg weight on an inclined plane. The plane is at a ",
+        " angle from the ground. The system is in equilibrium (the net force on the weight is 0)."
+      ],
+      "variablesForQuestionSetup": ["theta - max 45"],
+      "question": "What are the magnitudes and directions of the forces acting on the weight?",
+      "answerParts": [
+        "force of gravity",
+        "angle of gravity",
+        "normal force",
+        "angle of normal force",
+        "force of static friction",
+        "angle of static friction"
+      ],
+      "answerSolutionDescriptions": [
+        "9.81",
+        "270",
+        "solve normal force magnitude from wedge angle",
+        "solve normal force angle from wedge angle",
+        "solve static force magnitude from wedge angle given equilibrium",
+        "solve static force angle from wedge angle given equilibrium"
+      ],
+      "goal": "noMovement",
+      "hints": [
+        {
+          "description": "Direction of Force of Gravity",
+          "content": "The force of gravity acts in the negative y direction: 3π/2 rad."
+        },
+        {
+          "description": "Direction of Normal Force",
+          "content": "The normal force acts in the direction perpendicular to the incline plane: π/2-θ rad, where θ is the angle of the incline plane."
+        },
+        {
+          "description": "Direction of Force of Friction",
+          "content": "The force of friction acts in the direction along the incline plane: π-θ rad, where θ is the angle of the incline plane."
+        },
+        {
+          "description": "Magnitude of Force of Gravity",
+          "content": "The magnitude of the force of gravity is approximately 9.81."
+        },
+        {
+          "description": "Magnitude of Normal Force",
+          "content": "The magnitude of the normal force is equal to m*g*cos(θ), where θ is the angle of the incline plane."
+        },
+        {
+          "description": "Net Force in Equilibrium",
+          "content": "For the system to be in equilibrium, the sum of the x components of all forces must equal 0, and the sum of the y components of all forces must equal 0."
+        },
+        {
+          "description": "X Component of Normal Force",
+          "content": "The x component of the normal force is equal to m*g*cos(θ)*cos(π/2-θ), where θ is the angle of the incline plane."
+        },
+        {
+          "description": "X Component of Force of Friction",
+          "content": "Since the net force in the x direction must be 0, we know the magnitude of the x component of the friction force is m*g*cos(θ)*cos(π/2-θ)."
+        },
+        {
+          "description": "Y Component of Normal Force",
+          "content": "The y component of the normal force is equal to m*g*cos(θ)*sin(π/2-θ), where θ is the angle of the incline plane. The y component of gravity is equal to m*g"
+        },
+        {
+          "description": "Y Component of Force of Friction",
+          "content": "Since the net force in the x direction must be 0, we know the magnitude of the y component of the friction force is m*g-m*g*cos(θ)*sin(π/2-θ)."
+        },
+        {
+          "description": "Magnitude of Force of Friction",
+          "content": "Combining the x and y components of the friction force, we get the magnitude of the friction force is equal to sqrt((m*g*cos(θ)*cos(π/2-θ))^2 + (m*g-m*g*cos(θ)*sin(π/2-θ))^2)."
+        }
+      ]
+    },
+    {
+      "questionSetup": [
+        "There is a 1kg weight on an inclined plane. The plane is at a ",
+        " angle from the ground. The system is in equilibrium (the net force on the weight is 0)."
+      ],
+      "variablesForQuestionSetup": ["theta - max 45"],
+      "question": "What is the minimum coefficient of static friction?",
+      "answerParts": ["coefficient of static friction"],
+      "answerSolutionDescriptions": [
+        "solve minimum static coefficient from wedge angle given equilibrium"
+      ],
+      "goal": "noMovement",
+      "hints": [
+        {
+          "description": "Net Force in Equilibrium",
+          "content": "If the system is in equilibrium, the sum of the x components of all forces must equal 0. In this system, the normal force and force of static friction have non-zero x components."
+        },
+        {
+          "description": "X Component of Normal Force",
+          "content": "The x component of the normal force is equal to m*g*cos(θ)*cos(π/2-θ), where θ is the angle of the incline plane."
+        },
+        {
+          "description": "X Component of Force of Friction",
+          "content": "The x component of the force of static friction is equal to μ*m*g*cos(θ)*cos(π-θ), where θ is the angle of the incline plane."
+        },
+        {
+          "description": "Equation to Solve for Minimum Coefficient of Static Friction",
+          "content": "Since the net force in the x direction must be 0, we can solve the equation 0=m*g*cos(θ)*cos(π/2-θ)+μ*m*g*cos(θ)*cos(π-θ) for μ to find the minimum coefficient of static friction such that the system stays in equilibrium."
+        }
+      ]
+    },
+    {
+      "questionSetup": [
+        "There is a 1kg weight on an inclined plane. The coefficient of static friction is ",
+        ". The system is in equilibrium (the net force on the weight is 0)."
+      ],
+      "variablesForQuestionSetup": ["coefficient of static friction"],
+      "question": "What is the maximum angle of the plane from the ground?",
+      "answerParts": ["wedge angle"],
+      "answerSolutionDescriptions": [
+        "solve maximum wedge angle from coefficient of static friction given equilibrium"
+      ],
+      "goal": "noMovement",
+      "hints": [
+        {
+          "description": "Net Force in Equilibrium",
+          "content": "If the system is in equilibrium, the sum of the x components of all forces must equal 0. In this system, the normal force and force of static friction have non-zero x components."
+        },
+        {
+          "description": "X Component of Normal Force",
+          "content": "The x component of the normal force is equal to m*g*cos(θ)*cos(π/2-θ), where θ is the angle of the incline plane."
+        },
+        {
+          "description": "X Component of Force of Friction",
+          "content": "The x component of the force of static friction is equal to μ*m*g*cos(θ)*cos(π-θ), where θ is the angle of the incline plane."
+        },
+        {
+          "description": "Equation to Solve for Maximum Wedge Angle",
+          "content": "Since the net force in the x direction must be 0, we can solve the equation 0=m*g*cos(θ)*cos(π/2-θ)+μ*m*g*cos(θ)*cos(π-θ) for θ to find the maximum wedge angle such that the system stays in equilibrium."
+        },
+        {
+          "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+          "content": "Simplifying 0=m*g*cos(θ)*cos(π/2-θ)+μ*m*g*cos(θ)*cos(π-θ), we get cos(π/2-θ)=-μ*cos(π-θ)."
+        },
+        {
+          "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+          "content": "The cosine subtraction formula states that cos(A-B)=cos(A)*cos(B)+sin(A)sin(B)."
+        },
+        {
+          "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+          "content": "Applying the cosine subtraction formula to cos(π/2-θ)=-μ*cos(π-θ), we get cos(π/2)*cos(θ)+sin(π/2)*sin(θ)=-μ*(cos(π)cos(θ)+sin(π)sin(θ))."
+        },
+        {
+          "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+          "content": "Simplifying cos(π/2)*cos(θ)-sin(π/2)*sin(θ)=-μ*(cos(π)cos(θ)-sin(π)sin(θ)), we get -sin(θ)=-μ*(-cos(θ))."
+        },
+        {
+          "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+          "content": "Simplifying -sin(θ)=-μ*(-cos(θ)), we get tan(θ)=-μ."
+        },
+        {
+          "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+          "content": "Solving for θ, we get θ = atan(μ)."
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationTutorial.json b/src/client/views/nodes/PhysicsBox/PhysicsSimulationTutorial.json
new file mode 100644
index 000000000..3015deaa4
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationTutorial.json
@@ -0,0 +1,600 @@
+{
+  "freeWeight": {
+    "question": "A 1kg weight is at rest on the ground. What are the magnitude and directions of the forces acting on the weight?",
+    "steps": [
+      {
+        "description": "Forces",
+        "content": "There are two forces acting on the weight: the force of gravity and the normal force.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Normal Force",
+            "magnitude": 9.81,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": false
+      },
+      {
+        "description": "Force of Gravity",
+        "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Normal Force",
+        "content": "The normal force acts in the positive y direction: π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+        "forces": [
+          {
+            "description": "Normal Force",
+            "magnitude": 9.81,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "All Forces",
+        "content": "Combining all of the forces, we get the following free body diagram.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Normal Force",
+            "magnitude": 9.81,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      }
+    ]
+  },
+  "pendulum": {
+    "question": "A 1kg weight on a 300m rod of negligible mass is released from an angle 30 degrees offset from equilibrium. What are the magnitude and directions of the forces acting on the weight immediately after release? (Ignore air resistance)",
+    "steps": [
+      {
+        "description": "Forces",
+        "content": "There are two force acting on the weight: the force of gravity and the force of tension.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Tension",
+            "magnitude": 8.5,
+            "directionInDegrees": 60,
+            "component": false
+          }
+        ],
+        "showMagnitude": false
+      },
+      {
+        "description": "Force of Gravity",
+        "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Tension",
+        "content": "The force of tension acts along the direction of the rod. The rod is 30 degrees offset from equilibrium, so the direction along the rod is 90-30=60 degrees. The tension force has two components—the component creating the centripetal force and the component canceling out the parallel component of gravity. The weight has just been released, so it has velocity 0, meaning the centripetal force is 0. Thus, the tension force only acts to cancel out the parallel component of gravity. Thus, the magnitude of tension is m*g*sin(60°)",
+        "forces": [
+          {
+            "description": "Tension",
+            "magnitude": 8.5,
+            "directionInDegrees": 60,
+            "component": false
+          },
+          {
+            "description": "Gravity - Parallel Component",
+            "magnitude": 8.5,
+            "directionInDegrees": 240,
+            "component": true
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "All Forces",
+        "content": "Combining all of the forces, we get the following free body diagram.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Tension",
+            "magnitude": 8.5,
+            "directionInDegrees": 60,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      }
+    ]
+  },
+  "inclinePlane": {
+    "question": "There is a 1kg weight on an inclined plane. The plane is at an angle θ from the ground, and has a coefficient of static friction μ. The system is in equilibrium (the net force on the weight is 0). What are the magnitudes and directions of the forces acting on the weight?",
+    "steps": [
+      {
+        "description": "Forces",
+        "content": "There are three forces acting on the weight: the force of gravity, the normal force, and the force of static friction.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Normal Force",
+            "magnitude": 8.817,
+            "directionInDegrees": 64,
+            "component": false
+          },
+          {
+            "description": "Friction Force",
+            "magnitude": 4.3,
+            "directionInDegrees": 154,
+            "component": false
+          }
+        ],
+        "showMagnitude": false
+      },
+      {
+        "description": "Force of Gravity",
+        "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Normal Force",
+        "content": "The normal force acts in the direction perpendicular to the incline plane: π/2-θ rad, where θ is the angle of the incline plane. The magnitude of the normal force is equal to m*g*cos(θ).",
+        "forces": [
+          {
+            "description": "Normal Force",
+            "magnitude": 8.817,
+            "directionInDegrees": 64,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Force of Static Friction",
+        "content": "The force of static friction acts in the direction along the incline plane: π-θ rad, where θ is the angle of the incline plane. We can use the knowledge that the system is in equilibrium to solve for the magnitude of the force of static friction.",
+        "forces": [
+          {
+            "description": "Friction Force",
+            "magnitude": 4.3,
+            "directionInDegrees": 154,
+            "component": false
+          }
+        ],
+        "showMagnitude": false
+      },
+      {
+        "description": "Net X Force in Equilibrium",
+        "content": "For the system to be in equilibrium, the sum of the x components of all forces must equal 0. The x component of the normal force is equal to m*g*cos(θ)*cos(π/2-θ), where θ is the angle of the incline plane. The x component of gravity is equal to 0. Since the net force in the x direction must be 0, we know the magnitude of the x component of the friction force is m*g*cos(θ)*cos(π/2-θ).",
+        "forces": [
+          {
+            "description": "Normal Force - X Component",
+            "magnitude": 3.87,
+            "directionInDegrees": 0,
+            "component": true
+          },
+          {
+            "description": "Friction Force - X Component",
+            "magnitude": 3.87,
+            "directionInDegrees": 180,
+            "component": true
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Net Y Force Normal Force",
+        "content": "For the system to be in equilibrium, the sum of the y components of all forces must equal 0. The y component of the normal force is equal to m*g*cos(θ)*sin(π/2-θ), where θ is the angle of the incline plane. The y component of gravity is equal to m*g. Since the net force in the x direction must be 0, we know the magnitude of the y component of the friction force is m*g-m*g*cos(θ)*sin(π/2-θ).",
+        "forces": [
+          {
+            "description": "Normal Force - Y Component ",
+            "magnitude": 7.92,
+            "directionInDegrees": 90,
+            "component": true
+          },
+          {
+            "description": "Gravity - Y Component ",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": true
+          },
+          {
+            "description": "Friction Force - Y Component ",
+            "magnitude": 1.89,
+            "directionInDegrees": 90,
+            "component": true
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Magnitude of Force of Friction",
+        "content": "Combining the x and y components of the friction force, we get the magnitude of the friction force is equal to sqrt((m*g*cos(θ)*cos(π/2-θ))^2 + (m*g*cos(θ)*sin(π/2-θ)-m*g)^2).",
+        "forces": [
+          {
+            "description": "Friction Force",
+            "magnitude": 4.3,
+            "directionInDegrees": 154,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "All Forces",
+        "content": "Combining all of the forces, we get the following free body diagram.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Normal Force",
+            "magnitude": 8.817,
+            "directionInDegrees": 64,
+            "component": false
+          },
+          {
+            "description": "Friction Force",
+            "magnitude": 4.3,
+            "directionInDegrees": 154,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      }
+    ]
+  },
+  "spring": {
+    "question": "A 1kg weight is on a spring of negligible mass with rest length 200m and spring constant 0.5. What is the equilibrium spring length?",
+    "steps": [
+      {
+        "description": "Forces",
+        "content": "We can start by solving for the forces acting on the weight at any given point in time. There are two forces potentially acting on the weight: the force of gravity and the spring force. In equilibrium, these forces will be perfectly balanced.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Spring Force",
+            "magnitude": 9.81,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": false
+      },
+      {
+        "description": "Force of Gravity",
+        "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Spring Force",
+        "content": "The spring force acts in the negative y direction (3π/2 rad) if the spring is compressed. The spring force acts in the positive y direction (π/2 rad) if the spring is extended. Because the forces are perfectly balanced and gravity acts in the negative y direction, the spring force must act in the positive y direction and have the same magnitude as the force og gravity, m*g. We can approximate g as 9.81.",
+        "forces": [
+          {
+            "description": "Spring Force",
+            "magnitude": 9.81,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Spring Force",
+        "content": "We can use the spring force equation, Fs=kd to solve for the displacement such that Fs=mg. Setting them equal, we get mg=kd. Plugging in for the known values of m,g, and k, we get 1*9.81=0.5d. Solving for d, we get d=19.62 as the equilibrium starting displacement",
+        "forces": [
+          {
+            "description": "Spring Force",
+            "magnitude": 9.81,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      }
+    ]
+  },
+  "circular": {
+    "question": "A 1kg weight is attached to a 100m rod of negligible mass. The weight is undergoing uniform circular motion with tangential velocity 40 m/s. What are the magnitude and directions of the forces acting on the weight? (Ignore air resistance)",
+    "steps": [
+      {
+        "description": "Forces",
+        "content": "There is one force acting on the weight: the centripetal force.",
+        "forces": [
+          {
+            "description": "Centripetal Force",
+            "magnitude": 16,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": false
+      },
+      {
+        "description": "Centripetal Force",
+        "content": "The centripetal force is always directed toward the center of the circle. The formula for solving for the magnitude of centripetal force for an object undergoing uniform circular motion is Fc=mv^2 / r. Plugging in for known values, we get Fc=1*(40^2)/100. Solving for this, we get Fc=16",
+        "forces": [
+          {
+            "description": "Centripetal Force",
+            "magnitude": 16,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      }
+    ]
+  },
+  "pulley": {
+    "question": "A 1kg red weight is attached to a simple pulley with a rope of negligible mass. A 1.5kg blue weight is attached to the other end of the simple pulley. What are the forces acting on the red weight?",
+    "steps": [
+      {
+        "description": "Forces",
+        "content": "There are two force acting on the red weight: the force of gravity and the force of tension.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Tension",
+            "magnitude": 11.77,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": false
+      },
+      {
+        "description": "Gravity",
+        "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "Tension",
+        "content": "The force of tension acts in the positive y direction: π/2 rad. We know that the acceleration in a simple pulley system is (mass  2 - mass 1) * acceleration due to gravity / (mass 1 + mass 2) = (1.5-1) * 9.81 / (1.5+1) = 1.962 m/s^2. Because the acceleration is caused by the force of gravity and force of tension, we can solve for the force of tension acting on the weight as mass 1 * (a + acceleration due to gravity) = 1 * (1.962+9.81) = 11.77.",
+        "forces": [
+          {
+            "description": "Tension",
+            "magnitude": 11.77,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "All Forces",
+        "content": "Combining all of the forces, we get the following free body diagram.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Tension",
+            "magnitude": 11.77,
+            "directionInDegrees": 90,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      }
+    ]
+  },
+  "suspension": {
+    "question": "A 1kg weight is attached to two rods hanging from 45° angles from the ceiling. The system is in equilibrium, i.e. the weight does not move. What are the magnitudes and directions of the forces acting on the weight?",
+    "steps": [
+      {
+        "description": "Forces",
+        "content": "There are three force acting on the red weight: the force of gravity, the force of tension from the left rod, and the force of tension from the right rod.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Left Tension",
+            "magnitude": 6.94,
+            "directionInDegrees": 135,
+            "component": false
+          },
+          {
+            "description": "Right Tension",
+            "magnitude": 6.94,
+            "directionInDegrees": 45,
+            "component": false
+          }
+        ],
+        "showMagnitude": false
+      },
+      {
+      "description": "Force X Components",
+        "content": "There are two forces with x components to consider: the tension from the left rod and the tension from the right rod. These must cancel each other out so that the net x force is 0.",
+        "forces": [
+          {
+            "description": "Left Tension X Component",
+            "magnitude": 4.907,
+            "directionInDegrees": 180,
+            "component": true
+          },
+          {
+            "description": "Right Tension X Component",
+            "magnitude": 4.907,
+            "directionInDegrees": 0,
+            "component": true
+          }
+        ],
+        "showMagnitude": false
+      }, {
+      "description": "Force Y Components",
+      "content": "There are three forces with y components to consider: the tension from the left rod, the tension from the right rod, and the force of gravity.",
+      "forces": [
+        {
+          "description": "Left Tension Y Component",
+          "magnitude": 4.907,
+          "directionInDegrees": 90,
+          "component": true
+        },
+        {
+          "description": "Right Tension Y Component",
+          "magnitude": 4.907,
+          "directionInDegrees": 90,
+          "component": true
+        },
+        {
+          "description": "Gravity Y Component",
+          "magnitude": 9.81,
+          "directionInDegrees": 270,
+          "component": true
+        }
+      ],
+      "showMagnitude": false
+      }, {
+      "description": "Force Y Components",
+        "content": "The y components of forces must cancel each other out so that the net y force is 0. Thus, gravity = left tension y component + right tension y component. Because the x components of tension are the same and the angles of each rod are the same, the y components must be the same. Thus, the y component for each force of tension must be 9.81/2.",
+        "forces": [
+          {
+            "description": "Left Tension Y Component",
+            "magnitude": 4.907,
+            "directionInDegrees": 90,
+            "component": true
+          },
+          {
+            "description": "Right Tension Y Component",
+            "magnitude": 4.907,
+            "directionInDegrees": 90,
+            "component": true
+          },
+          {
+            "description": "Gravity Y Component",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": true
+          }
+        ],
+        "showMagnitude": true
+      }, {
+      "description": "Tension",
+        "content": "Now that we know the y component of tension for each rod is 4.907, we can solve for the full force of tension as 4.907 = T * sin(45°) -> T = 6.94.",
+        "forces": [
+          {
+            "description": "Left Tension",
+            "magnitude": 6.94,
+            "directionInDegrees": 135,
+            "component": false
+          },
+          {
+            "description": "Right Tension",
+            "magnitude": 6.94,
+            "directionInDegrees": 45,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      },
+      {
+        "description": "All Forces",
+        "content": "Combining all of the forces, we get the following free body diagram.",
+        "forces": [
+          {
+            "description": "Gravity",
+            "magnitude": 9.81,
+            "directionInDegrees": 270,
+            "component": false
+          },
+          {
+            "description": "Left Tension",
+            "magnitude": 6.94,
+            "directionInDegrees": 135,
+            "component": false
+          },
+          {
+            "description": "Right Tension",
+            "magnitude": 6.94,
+            "directionInDegrees": 45,
+            "component": false
+          }
+        ],
+        "showMagnitude": true
+      }
+    ]
+  }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
new file mode 100644
index 000000000..8cc1d0fbf
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
@@ -0,0 +1,34 @@
+import React = require('react');
+
+export interface Force {
+  magnitude: number;
+  directionInDegrees: number;
+}
+export interface IWallProps {
+  length: number;
+  xPos: number;
+  yPos: number;
+  angleInDegrees: number;
+}
+
+export default class Wall extends React.Component<IWallProps> {
+
+  constructor(props: any) {
+    super(props)
+  }
+
+  wallStyle = {
+    width: this.props.angleInDegrees == 0 ? this.props.length + "%" : "5px",
+    height: this.props.angleInDegrees == 0 ? "5px" : this.props.length + "%",
+    position: "absolute" as "absolute",
+    left: this.props.xPos + "%",
+    top: this.props.yPos + "%",
+    backgroundColor: "#6c7b8b",
+    margin: 0,
+    padding: 0,
+  };
+
+  render () {
+    return (<div style={this.wallStyle}></div>);
+  }
+};
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
new file mode 100644
index 000000000..2165c8ba9
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -0,0 +1,990 @@
+import { computed, IReactionDisposer, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+import './PhysicsSimulationBox.scss';
+import React = require('react');
+
+interface IWallProps {
+    length: number;
+    xPos: number;
+    yPos: number;
+    angleInDegrees: number;
+}
+interface IForce {
+    description: string;
+    magnitude: number;
+    directionInDegrees: number;
+}
+export interface IWeightProps {
+    pause: () => void;
+    panelWidth: () => number;
+    panelHeight: () => number;
+    resetRequest: () => number;
+    circularMotionRadius: number;
+    coefficientOfKineticFriction: number;
+    color: string;
+    componentForces: () => IForce[];
+    setComponentForces: (x: IForce[]) => {};
+    displayXVelocity: number;
+    displayYVelocity: number;
+    elasticCollisions: boolean;
+    gravity: number;
+    mass: number;
+    simulationMode: string;
+    noMovement: boolean;
+    paused: boolean;
+    pendulumAngle: number;
+    pendulumLength: number;
+    radius: number;
+    showAcceleration: boolean;
+    showComponentForces: boolean;
+    showForceMagnitudes: boolean;
+    showForces: boolean;
+    showVelocity: boolean;
+    simulationSpeed: number;
+    simulationType: string;
+    springConstant: number;
+    springRestLength: number;
+    springStartLength: number;
+    startForces: () => IForce[];
+    startPendulumAngle: number;
+    startPendulumLength: number;
+    startPosX: number;
+    startPosY: number;
+    startVelX: number;
+    startVelY: number;
+    timestepSize: number;
+    updateMassPosX: number;
+    updateMassPosY: number;
+    forcesUpdated: () => IForce[];
+    setForcesUpdated: (x: IForce[]) => {};
+    setPosition: (x: number | undefined, y: number | undefined) => void;
+    setVelocity: (x: number | undefined, y: number | undefined) => void;
+    setAcceleration: (x: number, y: number) => void;
+    setPendulumAngle: (ang: number | undefined, length: number | undefined) => void;
+    setSpringLength: (length: number) => void;
+    wallPositions: IWallProps[];
+    wedgeHeight: number;
+    wedgeWidth: number;
+    xMax: number;
+    xMin: number;
+    yMax: number;
+    yMin: number;
+}
+
+interface IState {
+    angleLabel: number;
+    clickPositionX: number;
+    clickPositionY: number;
+    coordinates: string;
+    dragging: boolean;
+    kineticFriction: boolean;
+    maxPosYConservation: number;
+    timer: number;
+    updatedStartPosX: any;
+    updatedStartPosY: any;
+    xPosition: number;
+    xVelocity: number;
+    yPosition: number;
+    yVelocity: number;
+    xAccel: number;
+    yAccel: number;
+}
+@observer
+export default class Weight extends React.Component<IWeightProps, IState> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            angleLabel: 0,
+            clickPositionX: 0,
+            clickPositionY: 0,
+            coordinates: '',
+            dragging: false,
+            kineticFriction: false,
+            maxPosYConservation: 0,
+            timer: 0,
+            updatedStartPosX: this.props.startPosX,
+            updatedStartPosY: this.props.startPosY,
+            xPosition: this.props.startPosX,
+            xVelocity: this.props.startVelX,
+            yPosition: this.props.startPosY,
+            yVelocity: this.props.startVelY,
+            xAccel: 0,
+            yAccel: 0,
+        };
+    }
+
+    _timer: NodeJS.Timeout | undefined;
+    _resetDisposer: IReactionDisposer | undefined;
+
+    componentWillUnmount() {
+        this._timer && clearTimeout(this._timer);
+        this._resetDisposer?.();
+    }
+    componentWillUpdate(nextProps: Readonly<IWeightProps>, nextState: Readonly<IState>, nextContext: any): void {
+        if (nextProps.paused) {
+            this._timer && clearTimeout(this._timer);
+            this._timer = undefined;
+        } else if (this.props.paused) {
+            this._timer && clearTimeout(this._timer);
+            this._timer = setInterval(() => this.setState({ timer: this.state.timer + 1 }), 50);
+        }
+    }
+
+    // Constants
+    @computed get draggable() {
+        return !['Inclined Plane', 'Pendulum'].includes(this.props.simulationType) && this.props.simulationMode === 'Freeform';
+    }
+    @computed get panelHeight() {
+        return Math.max(800, this.props.panelHeight()) + 'px';
+    }
+    @computed get panelWidth() {
+        return Math.max(1000, this.props.panelWidth()) + 'px';
+    }
+
+    @computed get walls() {
+        return ['One Weight', 'Inclined Plane'].includes(this.props.simulationType) ? this.props.wallPositions : [];
+    }
+    epsilon = 0.0001;
+    labelBackgroundColor = `rgba(255,255,255,0.5)`;
+
+    // Variables
+    weightStyle = {
+        alignItems: 'center',
+        backgroundColor: this.props.color,
+        borderColor: 'black',
+        borderRadius: 50 + '%',
+        borderStyle: 'solid',
+        display: 'flex',
+        height: 2 * this.props.radius + 'px',
+        justifyContent: 'center',
+        left: this.props.startPosX + 'px',
+        position: 'absolute' as 'absolute',
+        top: this.props.startPosY + 'px',
+        touchAction: 'none',
+        width: 2 * this.props.radius + 'px',
+        zIndex: 5,
+    };
+
+    // Helper function to go between display and real values
+    getDisplayYPos = (yPos: number) => this.props.yMax - yPos - 2 * this.props.radius + 5;
+    gravityForce = (): IForce => ({
+        description: 'Gravity',
+        magnitude: this.props.mass * this.props.gravity,
+        directionInDegrees: 270,
+    });
+    // Update display values when simulation updates
+    setDisplayValues = (xPos: number = this.state.xPosition, yPos: number = this.state.yPosition, xVel: number = this.state.xVelocity, yVel: number = this.state.yVelocity) => {
+        this.props.setPosition(xPos, this.getDisplayYPos(yPos));
+        this.props.setVelocity(xVel, yVel);
+        const xAccel = Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100;
+        const yAccel = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100;
+        this.props.setAcceleration(xAccel, yAccel);
+        this.setState({ xAccel, yAccel });
+    };
+    componentDidMount() {
+        this._resetDisposer = reaction(() => this.props.resetRequest(), this.resetEverything);
+    }
+    componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
+        if (prevProps.simulationType != this.props.simulationType) {
+            this.setState({ xVelocity: this.props.startVelX, yVelocity: this.props.startVelY });
+            this.setDisplayValues();
+        }
+
+        // Change pendulum angle from input field
+        if (prevProps.startPendulumAngle != this.props.startPendulumAngle || prevProps.startPendulumLength !== this.props.startPendulumLength) {
+            const length = this.props.startPendulumLength;
+            const x = length * Math.cos(((90 - this.props.startPendulumAngle) * Math.PI) / 180);
+            const y = length * Math.sin(((90 - this.props.startPendulumAngle) * Math.PI) / 180);
+            const xPosition = this.props.xMax / 2 - x - this.props.radius;
+            const yPosition = y - this.props.radius - 5;
+            this.setState({ xPosition, yPosition, updatedStartPosX: xPosition, updatedStartPosY: yPosition });
+            this.props.setPendulumAngle(this.props.startPendulumAngle, this.props.startPendulumLength);
+        }
+
+        // When display values updated by user, update real value
+        if (prevProps.updateMassPosX !== this.props.updateMassPosX) {
+            const x = Math.min(Math.max(0, this.props.updateMassPosX), this.props.xMax - 2 * this.props.radius);
+            this.setState({ updatedStartPosX: x, xPosition: x });
+            this.props.setPosition(x, undefined);
+        }
+        if (prevProps.updateMassPosY != this.props.updateMassPosY) {
+            const y = Math.min(Math.max(0, this.props.updateMassPosY), this.props.yMax - 2 * this.props.radius);
+            const coordinatePosition = this.getDisplayYPos(y);
+            this.setState({ yPosition: coordinatePosition, updatedStartPosY: coordinatePosition });
+            this.props.setPosition(undefined, this.getDisplayYPos(y));
+
+            if (this.props.displayXVelocity != this.state.xVelocity) {
+                this.setState({ xVelocity: this.props.displayXVelocity });
+                this.props.setVelocity(this.props.displayXVelocity, undefined);
+            }
+
+            if (this.props.displayYVelocity != -this.state.yVelocity) {
+                this.setState({ yVelocity: -this.props.displayYVelocity });
+                this.props.setVelocity(undefined, this.props.displayYVelocity);
+            }
+        }
+
+        // Make sure weight doesn't go above max height
+        if ((prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) && !isNaN(this.state.updatedStartPosY) && !isNaN(this.props.startVelY)) {
+            if (this.props.simulationType == 'One Weight') {
+                let maxYPos = this.state.updatedStartPosY;
+                if (this.props.startVelY != 0) {
+                    maxYPos -= (this.props.startVelY * this.props.startVelY) / (2 * this.props.gravity);
+                }
+                if (maxYPos < 0) maxYPos = 0;
+
+                this.setState({ maxPosYConservation: maxYPos });
+            }
+        }
+
+        // Check for collisions and update
+        if (!this.props.paused && !this.props.noMovement && prevState.timer != this.state.timer) {
+            let collisions = false;
+            if (this.props.simulationType == 'One Weight' || this.props.simulationType == 'Inclined Plane') {
+                const collisionsWithGround = this.checkForCollisionsWithGround();
+                const collisionsWithWalls = this.checkForCollisionsWithWall();
+                collisions = collisionsWithGround || collisionsWithWalls;
+            }
+            if (this.props.simulationType == 'Pulley') {
+                if (this.state.yPosition <= this.props.yMin + 100 || this.state.yPosition >= this.props.yMax - 100) {
+                    collisions = true;
+                }
+            }
+            if (!collisions) this.update();
+
+            this.setDisplayValues();
+        }
+
+        // Convert from static to kinetic friction if/when weight slips on inclined plane
+        if (prevState.xVelocity != this.state.xVelocity) {
+            if (this.props.simulationType == 'Inclined Plane' && Math.abs(this.state.xVelocity) > 0.1 && this.props.simulationMode != 'Review' && !this.state.kineticFriction) {
+                this.setState({ kineticFriction: true });
+                const normalForce: IForce = {
+                    description: 'Normal Force',
+                    magnitude: this.props.mass * this.props.gravity * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+                    directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
+                };
+                const frictionForce: IForce = {
+                    description: 'Kinetic Friction Force',
+                    magnitude: this.props.mass * this.props.coefficientOfKineticFriction * this.props.gravity * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+                    directionInDegrees: 180 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
+                };
+                // reduce magnitude of friction force if necessary such that block cannot slide up plane
+                // prettier-ignore
+                const yForce = - this.props.gravity +
+                        normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) +
+                        frictionForce.magnitude * Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+                if (yForce > 0) {
+                    frictionForce.magnitude = (-normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) + this.props.gravity) / Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+                }
+
+                const normalForceComponent: IForce = {
+                    description: 'Normal Force',
+                    magnitude: this.props.mass * this.props.gravity * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+                    directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
+                };
+                const gravityParallel: IForce = {
+                    description: 'Gravity Parallel Component',
+                    magnitude: this.props.mass * this.props.gravity * Math.sin(Math.PI / 2 - Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+                    directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI + 180,
+                };
+                const gravityPerpendicular: IForce = {
+                    description: 'Gravity Perpendicular Component',
+                    magnitude: this.props.mass * this.props.gravity * Math.cos(Math.PI / 2 - Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+                    directionInDegrees: 360 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
+                };
+                const kineticFriction = this.props.coefficientOfKineticFriction != 0 ? [frictionForce] : [];
+                this.props.setForcesUpdated([this.gravityForce(), normalForce, ...kineticFriction]);
+                this.props.setComponentForces([normalForceComponent, gravityParallel, gravityPerpendicular, ...kineticFriction]);
+            }
+        }
+
+        // Update x position when start pos x changes
+        if (prevProps.startPosX != this.props.startPosX) {
+            if (this.props.paused && !isNaN(this.props.startPosX)) {
+                this.setState({ xPosition: this.props.startPosX, updatedStartPosX: this.props.startPosX });
+                this.props.setPosition(this.props.startPosX, undefined);
+            }
+        }
+
+        // Update y position when start pos y changes TODO debug
+        if (prevProps.startPosY != this.props.startPosY) {
+            if (this.props.paused && !isNaN(this.props.startPosY)) {
+                this.setState({ yPosition: this.props.startPosY, updatedStartPosY: this.props.startPosY ?? 0 });
+                this.props.setPosition(undefined, this.getDisplayYPos(this.props.startPosY));
+            }
+        }
+
+        // Update wedge coordinates
+        if (!this.state.coordinates || this.props.yMax !== prevProps.yMax || prevProps.wedgeWidth != this.props.wedgeWidth || prevProps.wedgeHeight != this.props.wedgeHeight) {
+            const left = this.props.xMax * 0.25;
+            const coordinatePair1 = Math.round(left) + ',' + this.props.yMax + ' ';
+            const coordinatePair2 = Math.round(left + this.props.wedgeWidth) + ',' + this.props.yMax + ' ';
+            const coordinatePair3 = Math.round(left) + ',' + (this.props.yMax - this.props.wedgeHeight);
+            this.setState({ coordinates: coordinatePair1 + coordinatePair2 + coordinatePair3 });
+        }
+
+        if (this.state.xPosition != prevState.xPosition || this.state.yPosition != prevState.yPosition) {
+            this.weightStyle = {
+                alignItems: 'center',
+                backgroundColor: this.props.color,
+                borderColor: 'black',
+                borderRadius: 50 + '%',
+                borderStyle: 'solid',
+                display: 'flex',
+                height: 2 * this.props.radius + 'px',
+                justifyContent: 'center',
+                left: this.state.xPosition + 'px',
+                position: 'absolute' as 'absolute',
+                top: this.state.yPosition + 'px',
+                touchAction: 'none',
+                width: 2 * this.props.radius + 'px',
+                zIndex: 5,
+            };
+        }
+    }
+
+    // Reset simulation on reset button click
+    resetEverything = () => {
+        this.setState({
+            kineticFriction: false,
+            xPosition: this.state.updatedStartPosX,
+            yPosition: this.state.updatedStartPosY,
+            xVelocity: this.props.startVelX,
+            yVelocity: this.props.startVelY,
+            angleLabel: Math.round(this.props.pendulumAngle * 100) / 100,
+        });
+        this.props.setPendulumAngle(this.props.startPendulumAngle, undefined);
+        this.props.setForcesUpdated(this.props.startForces());
+        this.props.setPosition(this.state.updatedStartPosX, this.state.updatedStartPosY);
+        this.props.setVelocity(this.props.startVelX, this.props.startVelY);
+        this.props.setAcceleration(0, 0);
+        setTimeout(() => this.setState({ timer: this.state.timer + 1 }));
+    };
+
+    // Compute x acceleration from forces, F=ma
+    getNewAccelerationX = (forceList: IForce[]) => {
+        // prettier-ignore
+        return forceList.reduce((newXacc, force) => 
+              newXacc + (force.magnitude * Math.cos((force.directionInDegrees * Math.PI) / 180)) / this.props.mass, 0);
+    };
+
+    // Compute y acceleration from forces, F=ma
+    getNewAccelerationY = (forceList: IForce[]) => {
+        // prettier-ignore
+        return forceList.reduce((newYacc, force) => 
+              newYacc + (-1 * (force.magnitude * Math.sin((force.directionInDegrees * Math.PI) / 180))) / this.props.mass, 0);
+    };
+
+    // Compute uniform circular motion forces given x, y positions
+    getNewCircularMotionForces = (xPos: number, yPos: number): IForce[] => {
+        const deltaX = (this.props.xMin + this.props.xMax) / 2 - (xPos + this.props.radius);
+        const deltaY = yPos + this.props.radius - (this.props.yMin + this.props.yMax) / 2;
+        return [
+            {
+                description: 'Centripetal Force',
+                magnitude: (this.props.startVelX ** 2 * this.props.mass) / this.props.circularMotionRadius,
+                directionInDegrees: (Math.atan2(deltaY, deltaX) * 180) / Math.PI,
+            },
+        ];
+    };
+
+    // Compute spring forces given y position
+    getNewSpringForces = (yPos: number): IForce[] => {
+        const yPosPlus = yPos - this.props.springRestLength > 0;
+        const yPosMinus = yPos - this.props.springRestLength < 0;
+        return [
+            this.gravityForce(),
+            {
+                description: 'Spring Force',
+                magnitude: this.props.springConstant * (yPos - this.props.springRestLength) * (yPosPlus ? 1 : yPosMinus ? -1 : 0),
+                directionInDegrees: yPosPlus ? 90 : 270,
+            },
+        ];
+    };
+
+    // Compute pendulum forces given position, velocity
+    getNewPendulumForces = (xPos: number, yPos: number, xVel: number, yVel: number): IForce[] => {
+        const x = this.props.xMax / 2 - xPos - this.props.radius;
+        const y = yPos + this.props.radius + 5;
+        const angle = (ang => (ang < 0 ? ang + 180 : ang))((Math.atan(y / x) * 180) / Math.PI);
+
+        let oppositeAngle = 90 - angle;
+        if (oppositeAngle < 0) {
+            oppositeAngle = 90 - (180 - angle);
+        }
+
+        const pendulumLength = Math.sqrt(x * x + y * y);
+        this.props.setPendulumAngle(oppositeAngle, undefined);
+
+        const mag = this.props.mass * this.props.gravity * Math.cos((oppositeAngle * Math.PI) / 180) + (this.props.mass * (xVel * xVel + yVel * yVel)) / pendulumLength;
+
+        return [
+            this.gravityForce(),
+            {
+                description: 'Tension',
+                magnitude: mag,
+                directionInDegrees: angle,
+            },
+        ];
+    };
+
+    // Check for collisions in x direction
+    checkForCollisionsWithWall = () => {
+        let collision = false;
+        if (this.state.xVelocity !== 0) {
+            this.walls
+                .filter(wall => wall.angleInDegrees === 90)
+                .forEach(wall => {
+                    const wallX = (wall.xPos / 100) * this.props.panelWidth();
+                    const minX = this.state.xPosition < wallX && wall.xPos < 0.35;
+                    const maxX = this.state.xPosition + 2 * this.props.radius >= wallX && wall.xPos > 0.35;
+                    if (minX || maxX) {
+                        this.setState({
+                            xPosition: minX ? wallX + 0.01 : wallX - 2 * this.props.radius - 0.01,
+                            xVelocity: this.props.elasticCollisions ? -this.state.xVelocity : 0,
+                        });
+                        collision = true;
+                    }
+                });
+        }
+        return collision;
+    };
+
+    // Check for collisions in y direction
+    checkForCollisionsWithGround = () => {
+        let collision = false;
+        const minY = this.state.yPosition;
+        const maxY = this.state.yPosition + 2 * this.props.radius;
+        if (this.state.yVelocity > 0) {
+            this.walls.forEach(wall => {
+                if (wall.angleInDegrees == 0 && wall.yPos > 0.4) {
+                    const groundY = (wall.yPos / 100) * this.props.panelHeight();
+                    const gravity = this.gravityForce();
+                    if (maxY > groundY) {
+                        this.setState({ yPosition: groundY - 2 * this.props.radius - 0.01 });
+                        if (this.props.elasticCollisions) {
+                            this.setState({ yVelocity: -this.state.yVelocity });
+                        } else {
+                            this.setState({ yVelocity: 0 });
+                            const normalForce: IForce = {
+                                description: 'Normal force',
+                                magnitude: gravity.magnitude,
+                                directionInDegrees: -gravity.directionInDegrees,
+                            };
+                            this.props.setForcesUpdated([gravity, normalForce]);
+                            if (this.props.simulationType === 'Inclined Plane') {
+                                this.props.setComponentForces([gravity, normalForce]);
+                            }
+                        }
+                        collision = true;
+                    }
+                }
+            });
+        }
+        if (this.state.yVelocity < 0) {
+            this.walls.forEach(wall => {
+                if (wall.angleInDegrees == 0 && wall.yPos < 0.4) {
+                    const groundY = (wall.yPos / 100) * this.props.panelHeight();
+                    if (minY < groundY) {
+                        this.setState({
+                            yPosition: groundY + 0.01,
+                            yVelocity: this.props.elasticCollisions ? -this.state.yVelocity : 0,
+                        });
+                        collision = true;
+                    }
+                }
+            });
+        }
+        return collision;
+    };
+
+    // Called at each RK4 step
+    evaluate = (currentXPos: number, currentYPos: number, currentXVel: number, currentYVel: number, currdeltaXPos: number, currdeltaYPos: number, currdeltaXVel: number, currdeltaYVel: number, dt: number) => {
+        const xPos = currentXPos + currdeltaXPos * dt;
+        const yPos = currentYPos + currdeltaYPos * dt;
+        const xVel = currentXVel + currdeltaXVel * dt;
+        const yVel = currentYVel + currdeltaYVel * dt;
+        const forces = this.getForces(xPos, yPos, xVel, yVel);
+        return {
+            xPos,
+            yPos,
+            xVel,
+            yVel,
+            deltaXPos: xVel,
+            deltaYPos: yVel,
+            deltaXVel: this.getNewAccelerationX(forces),
+            deltaYVel: this.getNewAccelerationY(forces),
+        };
+    };
+
+    getForces = (xPos: number, yPos: number, xVel: number, yVel: number) => {
+        // prettier-ignore
+        switch (this.props.simulationType) {
+            case 'Pendulum':        return this.getNewPendulumForces(xPos, yPos, xVel, yVel);
+            case 'Spring'  :        return this.getNewSpringForces(yPos);
+            case 'Circular Motion': return this.getNewCircularMotionForces(xPos, yPos);
+            default:                return this.props.forcesUpdated();
+        }
+    };
+
+    // Update position, velocity using RK4 method
+    update = () => {
+        const startXVel = this.state.xVelocity;
+        const startYVel = this.state.yVelocity;
+        let xPos = this.state.xPosition;
+        let yPos = this.state.yPosition;
+        let xVel = this.state.xVelocity;
+        let yVel = this.state.yVelocity;
+        const forces = this.getForces(xPos, yPos, xVel, yVel);
+        const xAcc = this.getNewAccelerationX(forces);
+        const yAcc = this.getNewAccelerationY(forces);
+        const coeff = (this.props.timestepSize * 1.0) / 6.0;
+        for (let i = 0; i < this.props.simulationSpeed; i++) {
+            const k1 = this.evaluate(xPos, yPos, xVel, yVel, xVel, yVel, xAcc, yAcc, 0);
+            const k2 = this.evaluate(xPos, yPos, xVel, yVel, k1.deltaXPos, k1.deltaYPos, k1.deltaXVel, k1.deltaYVel, this.props.timestepSize * 0.5);
+            const k3 = this.evaluate(xPos, yPos, xVel, yVel, k2.deltaXPos, k2.deltaYPos, k2.deltaXVel, k2.deltaYVel, this.props.timestepSize * 0.5);
+            const k4 = this.evaluate(xPos, yPos, xVel, yVel, k3.deltaXPos, k3.deltaYPos, k3.deltaXVel, k3.deltaYVel, this.props.timestepSize);
+
+            xVel += coeff * (k1.deltaXVel + 2 * (k2.deltaXVel + k3.deltaXVel) + k4.deltaXVel);
+            yVel += coeff * (k1.deltaYVel + 2 * (k2.deltaYVel + k3.deltaYVel) + k4.deltaYVel);
+            xPos += coeff * (k1.deltaXPos + 2 * (k2.deltaXPos + k3.deltaXPos) + k4.deltaXPos);
+            yPos += coeff * (k1.deltaYPos + 2 * (k2.deltaYPos + k3.deltaYPos) + k4.deltaYPos);
+        }
+        // make sure harmonic motion maintained and errors don't propagate
+        switch (this.props.simulationType) {
+            case 'Spring':
+                const equilibriumPos = this.props.springRestLength + (this.props.mass * this.props.gravity) / this.props.springConstant;
+                const amplitude = Math.abs(equilibriumPos - this.props.springStartLength);
+                if (startYVel < 0 && yVel > 0 && yPos < this.props.springRestLength) {
+                    yPos = equilibriumPos - amplitude;
+                } else if (startYVel > 0 && yVel < 0 && yPos > this.props.springRestLength) {
+                    yPos = equilibriumPos + amplitude;
+                }
+                break;
+            case 'Pendulum':
+                const startX = this.state.updatedStartPosX;
+                if (startXVel <= 0 && xVel > 0) {
+                    xPos = this.state.updatedStartPosX;
+                    if (this.state.updatedStartPosX > this.props.xMax / 2) {
+                        xPos = this.props.xMax / 2 + (this.props.xMax / 2 - startX) - 2 * this.props.radius;
+                    }
+                    yPos = this.props.startPosY;
+                } else if (startXVel >= 0 && xVel < 0) {
+                    xPos = this.state.updatedStartPosX;
+                    if (this.state.updatedStartPosX < this.props.xMax / 2) {
+                        xPos = this.props.xMax / 2 + (this.props.xMax / 2 - startX) - 2 * this.props.radius;
+                    }
+                    yPos = this.props.startPosY;
+                }
+                break;
+            case 'One Weight':
+                if (yPos < this.state.maxPosYConservation) {
+                    yPos = this.state.maxPosYConservation;
+                }
+        }
+        this.setState({ xVelocity: xVel, yVelocity: yVel, xPosition: xPos, yPosition: yPos });
+
+        const forcesn = this.getForces(xPos, yPos, xVel, yVel);
+        this.props.setForcesUpdated(forcesn);
+
+        // set component forces if they change
+        if (this.props.simulationType == 'Pendulum') {
+            const x = this.props.xMax / 2 - xPos - this.props.radius;
+            const y = yPos + this.props.radius + 5;
+            let angle = (Math.atan(y / x) * 180) / Math.PI;
+            if (angle < 0) {
+                angle += 180;
+            }
+            let oppositeAngle = 90 - angle;
+            if (oppositeAngle < 0) {
+                oppositeAngle = 90 - (180 - angle);
+            }
+
+            const pendulumLength = Math.sqrt(x * x + y * y);
+
+            const tensionComponent: IForce = {
+                description: 'Tension',
+                magnitude: this.props.mass * this.props.gravity * Math.cos((oppositeAngle * Math.PI) / 180) + (this.props.mass * (xVel * xVel + yVel * yVel)) / pendulumLength,
+                directionInDegrees: angle,
+            };
+            const gravityParallel: IForce = {
+                description: 'Gravity Parallel Component',
+                magnitude: this.props.gravity * Math.cos(((90 - angle) * Math.PI) / 180),
+                directionInDegrees: 270 - (90 - angle),
+            };
+            const gravityPerpendicular: IForce = {
+                description: 'Gravity Perpendicular Component',
+                magnitude: this.props.gravity * Math.sin(((90 - angle) * Math.PI) / 180),
+                directionInDegrees: -(90 - angle),
+            };
+            if (this.props.gravity * Math.sin(((90 - angle) * Math.PI) / 180) < 0) {
+                gravityPerpendicular.magnitude = Math.abs(this.props.gravity * Math.sin(((90 - angle) * Math.PI) / 180));
+                gravityPerpendicular.directionInDegrees = 180 - (90 - angle);
+            }
+            this.props.setComponentForces([tensionComponent, gravityParallel, gravityPerpendicular]);
+        }
+    };
+
+    renderForce = (force: IForce, index: number, asComponent: boolean, color = '#0d0d0d') => {
+        if (force.magnitude < this.epsilon) return;
+
+        const angle = (force.directionInDegrees * Math.PI) / 180;
+        const arrowStartY = this.state.yPosition + this.props.radius - this.props.radius * Math.sin(angle);
+        const arrowStartX = this.state.xPosition + this.props.radius + this.props.radius * Math.cos(angle);
+        const arrowEndY = arrowStartY - Math.abs(force.magnitude) * Math.sin(angle) - this.props.radius * Math.sin(angle);
+        const arrowEndX = arrowStartX + Math.abs(force.magnitude) * Math.cos(angle) + this.props.radius * Math.cos(angle);
+
+        let labelTop = arrowEndY + (force.directionInDegrees >= 0 && force.directionInDegrees < 180 ? 40 : -40);
+        let labelLeft = arrowEndX + (force.directionInDegrees > 90 && force.directionInDegrees < 270 ? -120 : 30);
+
+        labelTop = Math.max(Math.min(labelTop, this.props.yMax + 50), this.props.yMin);
+        labelLeft = Math.max(Math.min(labelLeft, this.props.xMax - 60), this.props.xMin);
+
+        return (
+            <div key={index} style={{ zIndex: 6, position: 'absolute' }}>
+                <div
+                    style={{
+                        pointerEvents: 'none',
+                        position: 'absolute',
+                        left: this.props.xMin,
+                        top: this.props.yMin,
+                    }}>
+                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}>
+                        <defs>
+                            <marker id="forceArrow" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto" markerUnits="strokeWidth">
+                                <path d="M0,0 L0,4 L4,2 z" fill={color} />
+                            </marker>
+                        </defs>
+                        <line strokeDasharray={asComponent ? '10,10' : undefined} x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" markerEnd="url(#forceArrow)" />
+                    </svg>
+                </div>
+                <div
+                    style={{
+                        pointerEvents: 'none',
+                        position: 'absolute',
+                        left: labelLeft + 'px',
+                        top: labelTop + 'px',
+                        lineHeight: 1,
+                        backgroundColor: this.labelBackgroundColor,
+                    }}>
+                    <p>{force.description || 'Force'}</p>
+                    {this.props.showForceMagnitudes && <p>{Math.round(100 * force.magnitude) / 100} N</p>}
+                </div>
+            </div>
+        );
+    };
+
+    renderVector = (id: string, magX: number, magY: number, color: string, label: string) => {
+        const mag = Math.sqrt(magX * magX + magY * magY);
+        return (
+            <div className="showvecs" style={{ zIndex: 6 }}>
+                <svg width={this.panelWidth} height={this.panelHeight}>
+                    <defs>
+                        <marker id={id} markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
+                            <path d="M0,0 L0,6 L9,3 z" fill={color} />
+                        </marker>
+                    </defs>
+                    <line
+                        x1={this.state.xPosition + this.props.radius + (magX / mag) * this.props.radius}
+                        y1={this.state.yPosition + this.props.radius + (magY / mag) * this.props.radius}
+                        x2={this.state.xPosition + this.props.radius + (magX / mag) * this.props.radius + magX}
+                        y2={this.state.yPosition + this.props.radius + (magY / mag) * this.props.radius + magY}
+                        stroke={color}
+                        strokeWidth="5"
+                        markerEnd={`url(#${id})`}
+                    />
+                </svg>
+                <div
+                    style={{
+                        pointerEvents: 'none',
+                        position: 'absolute',
+                        left: this.state.xPosition + this.props.radius + 2 * (magX / mag) * this.props.radius + magX + 'px',
+                        top: this.state.yPosition + this.props.radius + 2 * (magY / mag) * this.props.radius + magY + 'px',
+                        lineHeight: 1,
+                    }}>
+                    <p style={{ background: 'white' }}>{label}</p>
+                </div>
+            </div>
+        );
+    };
+
+    // Render weight, spring, rod(s), vectors
+    render() {
+        return (
+            <div>
+                <div
+                    className="weightContainer"
+                    onPointerDown={e => {
+                        if (this.draggable) {
+                            this.props.pause();
+                            this.setState({
+                                dragging: true,
+                                clickPositionX: e.clientX,
+                                clickPositionY: e.clientY,
+                            });
+                        }
+                    }}
+                    onPointerMove={e => {
+                        if (this.state.dragging) {
+                            let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
+                            if (newY > this.props.yMax - 2 * this.props.radius - 10) {
+                                newY = this.props.yMax - 2 * this.props.radius - 10;
+                            } else if (newY < 10) {
+                                newY = 10;
+                            }
+
+                            let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
+                            if (newX > this.props.xMax - 2 * this.props.radius - 10) {
+                                newX = this.props.xMax - 2 * this.props.radius - 10;
+                            } else if (newX < 10) {
+                                newX = 10;
+                            }
+                            if (this.props.simulationType == 'Suspension') {
+                                if (newX < (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15) {
+                                    newX = (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15;
+                                } else if (newX > (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15) {
+                                    newX = (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15;
+                                }
+                            }
+
+                            this.setState({ yPosition: newY });
+                            this.props.setPosition(undefined, Math.round((this.props.yMax - 2 * this.props.radius - newY + 5) * 100) / 100);
+                            if (this.props.simulationType != 'Pulley') {
+                                this.setState({ xPosition: newX });
+                                this.props.setPosition(newX, undefined);
+                            }
+                            if (this.props.simulationType != 'Suspension') {
+                                if (this.props.simulationType != 'Pulley') {
+                                    this.setState({ updatedStartPosX: newX });
+                                }
+                                this.setState({ updatedStartPosY: newY });
+                            }
+                            this.setState({
+                                clickPositionX: e.clientX,
+                                clickPositionY: e.clientY,
+                            });
+                            this.setDisplayValues();
+                        }
+                    }}
+                    onPointerUp={e => {
+                        if (this.state.dragging) {
+                            if (this.props.simulationType != 'Pendulum' && this.props.simulationType != 'Suspension') {
+                                this.resetEverything();
+                            }
+                            this.setState({ dragging: false });
+                            let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
+                            if (newY > this.props.yMax - 2 * this.props.radius - 10) {
+                                newY = this.props.yMax - 2 * this.props.radius - 10;
+                            } else if (newY < 10) {
+                                newY = 10;
+                            }
+
+                            let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
+                            if (newX > this.props.xMax - 2 * this.props.radius - 10) {
+                                newX = this.props.xMax - 2 * this.props.radius - 10;
+                            } else if (newX < 10) {
+                                newX = 10;
+                            }
+                            if (this.props.simulationType == 'Spring') {
+                                this.props.setSpringLength(newY);
+                            }
+                            if (this.props.simulationType == 'Suspension') {
+                                const x1rod = (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200;
+                                const x2rod = (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius;
+                                const deltaX1 = this.state.xPosition + this.props.radius - x1rod;
+                                const deltaX2 = x2rod - (this.state.xPosition + this.props.radius);
+                                const deltaY = this.state.yPosition + this.props.radius;
+                                const dir1T = Math.PI - Math.atan(deltaY / deltaX1);
+                                const dir2T = Math.atan(deltaY / deltaX2);
+                                const tensionMag2 = (this.props.mass * this.props.gravity) / ((-Math.cos(dir2T) / Math.cos(dir1T)) * Math.sin(dir1T) + Math.sin(dir2T));
+                                const tensionMag1 = (-tensionMag2 * Math.cos(dir2T)) / Math.cos(dir1T);
+                                const tensionForce1: IForce = {
+                                    description: 'Tension',
+                                    magnitude: tensionMag1,
+                                    directionInDegrees: (dir1T * 180) / Math.PI,
+                                };
+                                const tensionForce2: IForce = {
+                                    description: 'Tension',
+                                    magnitude: tensionMag2,
+                                    directionInDegrees: (dir2T * 180) / Math.PI,
+                                };
+                                this.props.setForcesUpdated([tensionForce1, tensionForce2, this.gravityForce()]);
+                            }
+                        }
+                    }}>
+                    <div className="weight" style={this.weightStyle}>
+                        <p className="weightLabel">{this.props.mass} kg</p>
+                    </div>
+                </div>
+                {this.props.simulationType == 'Spring' && (
+                    <div className="spring">
+                        <svg width={this.panelWidth} height={this.panelHeight}>
+                            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(val => {
+                                const count = 10;
+                                const xPos1 = this.state.xPosition + this.props.radius + (val % 2 === 0 ? -20 : 20);
+                                const xPos2 = this.state.xPosition + this.props.radius + (val === 10 ? 0 : val % 2 === 0 ? 20 : -20);
+                                const yPos1 = (val * this.state.yPosition) / count;
+                                const yPos2 = val === 10 ? this.state.yPosition + this.props.radius : ((val + 1) * this.state.yPosition) / count;
+                                return <line key={val} x1={xPos1} strokeLinecap="round" y1={yPos1} x2={xPos2} y2={yPos2} stroke={'#808080'} strokeWidth="10" />;
+                            })}
+                        </svg>
+                    </div>
+                )}
+
+                {this.props.simulationType == 'Pulley' && (
+                    <div className="rod">
+                        <svg width={this.panelWidth} height={this.panelHeight}>
+                            <line //
+                                x1={this.state.xPosition + this.props.radius}
+                                y1={this.state.yPosition + this.props.radius}
+                                x2={this.state.xPosition + this.props.radius}
+                                y2={this.props.yMin}
+                                stroke={'#deb887'}
+                                strokeWidth="10"
+                            />
+                        </svg>
+                    </div>
+                )}
+                {this.props.simulationType == 'Pulley' && (
+                    <div className="wheel">
+                        <svg width={this.panelWidth} height={this.panelHeight}>
+                            <circle cx={(this.props.xMax + this.props.xMin) / 2} cy={this.props.radius} r={this.props.radius * 1.5} fill={'#808080'} />
+                        </svg>
+                    </div>
+                )}
+                {this.props.simulationType == 'Suspension' && (
+                    <div className="rod">
+                        <svg width={this.panelWidth} height={this.panelHeight}>
+                            <line
+                                x1={this.state.xPosition + this.props.radius}
+                                y1={this.state.yPosition + this.props.radius}
+                                x2={(this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200}
+                                y2={this.props.yMin}
+                                stroke={'#deb887'}
+                                strokeWidth="10"
+                            />
+                        </svg>
+                        <p
+                            style={{
+                                position: 'absolute',
+                                left: (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200 + 80 + 'px',
+                                top: 10 + 'px',
+                                backgroundColor: this.labelBackgroundColor,
+                            }}>
+                            {Math.round(
+                                ((Math.atan((this.state.yPosition + this.props.radius) / (this.state.xPosition + this.props.radius - ((this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200))) * 180) / Math.PI) * 100
+                            ) / 100}
+                            °
+                        </p>
+                        <div className="rod">
+                            <svg width={this.props.panelWidth() + 'px'} height={this.panelHeight}>
+                                <line
+                                    x1={this.state.xPosition + this.props.radius}
+                                    y1={this.state.yPosition + this.props.radius}
+                                    x2={(this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius}
+                                    y2={this.props.yMin}
+                                    stroke={'#deb887'}
+                                    strokeWidth="10"
+                                />
+                            </svg>
+                        </div>
+                        <p
+                            style={{
+                                position: 'absolute',
+                                left: (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - 80 + 'px',
+                                top: 10 + 'px',
+                                backgroundColor: this.labelBackgroundColor,
+                            }}>
+                            {Math.round(
+                                ((Math.atan((this.state.yPosition + this.props.radius) / ((this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - (this.state.xPosition + this.props.radius))) * 180) / Math.PI) * 100
+                            ) / 100}
+                            °
+                        </p>
+                    </div>
+                )}
+                {this.props.simulationType == 'Circular Motion' && (
+                    <div className="rod">
+                        <svg width={this.panelWidth} height={this.panelHeight}>
+                            <line
+                                x1={this.state.xPosition + this.props.radius}
+                                y1={this.state.yPosition + this.props.radius}
+                                x2={(this.props.xMin + this.props.xMax) / 2}
+                                y2={(this.props.yMin + this.props.yMax) / 2}
+                                stroke={'#deb887'}
+                                strokeWidth="10"
+                            />
+                        </svg>
+                    </div>
+                )}
+                {this.props.simulationType == 'Pendulum' && (
+                    <div className="rod">
+                        <svg width={this.panelWidth} height={this.panelHeight}>
+                            <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} x2={this.props.xMax / 2} y2={-5} stroke={'#deb887'} strokeWidth="10" />
+                        </svg>
+                        {!this.state.dragging && (
+                            <div>
+                                <p
+                                    style={{
+                                        position: 'absolute',
+                                        zIndex: 5,
+                                        left: this.state.xPosition + 'px',
+                                        top: this.state.yPosition - 70 + 'px',
+                                        backgroundColor: this.labelBackgroundColor,
+                                    }}>
+                                    {Math.round(this.props.pendulumLength)} m
+                                </p>
+                                <p
+                                    style={{
+                                        position: 'absolute',
+                                        left: this.props.xMax / 2 + 'px',
+                                        top: 30 + 'px',
+                                        backgroundColor: this.labelBackgroundColor,
+                                    }}>
+                                    {Math.round(this.props.pendulumAngle * 100) / 100}°
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                )}
+                {this.props.simulationType == 'Inclined Plane' && (
+                    <div>
+                        <div className="wedge">
+                            <svg width={this.panelWidth} height={this.props.yMax + 'px'}>
+                                <polygon points={this.state.coordinates} style={{ fill: 'burlywood' }} />
+                            </svg>
+                        </div>
+                        <p
+                            style={{
+                                position: 'absolute',
+                                left: Math.round(this.props.xMax * 0.25 + this.props.wedgeWidth / 3) + 'px',
+                                top: Math.round(this.props.yMax - 40) + 'px',
+                            }}>
+                            {Math.round(((Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI) * 100) / 100}°
+                        </p>
+                    </div>
+                )}
+                {!this.state.dragging &&
+                    this.props.showAcceleration &&
+                    this.renderVector(
+                        'accArrow',
+                        this.getNewAccelerationX(this.props.forcesUpdated()),
+                        this.getNewAccelerationY(this.props.forcesUpdated()),
+                        'green',
+                        `${Math.round(100 * Math.sqrt(this.state.xAccel * this.state.xAccel + this.state.yAccel * this.state.yAccel)) / 100} m/s^2`
+                    )}
+                {!this.state.dragging &&
+                    this.props.showVelocity &&
+                    this.renderVector(
+                        'velArrow',
+                        this.state.xVelocity,
+                        this.state.yVelocity,
+                        'blue',
+                        `${Math.round(100 * Math.sqrt(this.props.displayXVelocity * this.props.displayXVelocity + this.props.displayYVelocity * this.props.displayYVelocity)) / 100} m/s`
+                    )}
+                {!this.state.dragging && this.props.showComponentForces && this.props.componentForces().map((force, index) => this.renderForce(force, index, true))}
+                {!this.state.dragging && this.props.showForces && this.props.forcesUpdated().map((force, index) => this.renderForce(force, index, false))}
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/QueryBox.scss b/src/client/views/nodes/QueryBox.scss
deleted file mode 100644
index b5f90aa1e..000000000
--- a/src/client/views/nodes/QueryBox.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.queryBox, .queryBox-dragging {
-    width: 100%;
-    height: 100%; 
-    position: absolute;
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx
deleted file mode 100644
index 1b6056be6..000000000
--- a/src/client/views/nodes/QueryBox.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// import React = require("react");
-// import { IReactionDisposer } from "mobx";
-// import { observer } from "mobx-react";
-// import { documentSchema } from "../../../new_fields/documentSchemas";
-// import { Id } from '../../../new_fields/FieldSymbols';
-// import { makeInterface, listSpec } from "../../../new_fields/Schema";
-// import { StrCast, Cast } from "../../../new_fields/Types";
-// import { ViewBoxAnnotatableComponent } from '../DocComponent';
-// import { SearchBox } from "../search/SearchBox";
-// import { FieldView, FieldViewProps } from './FieldView';
-// import "./QueryBox.scss";
-// import { List } from "../../../new_fields/List";
-// import { SnappingManager } from "../../util/SnappingManager";
-
-// type QueryDocument = makeInterface<[typeof documentSchema]>;
-// const QueryDocument = makeInterface(documentSchema);
-
-// @observer
-// export class QueryBox extends ViewBoxAnnotatableComponent<FieldViewProps, QueryDocument>(QueryDocument) {
-//     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(QueryBox, fieldKey); }
-//     _docListChangedReaction: IReactionDisposer | undefined;
-//     componentDidMount() {
-//     }
-
-//     componentWillUnmount() {
-//         this._docListChangedReaction?.();
-//     }
-
-//     render() {
-//         const dragging = !SnappingManager.GetIsDragging() ? "" : "-dragging";
-//         return <div className={`queryBox${dragging}`} onWheel={(e) => e.stopPropagation()} >
-            
-//             <SearchBox  Document={this.props.Document}  />
-//         </div >;
-//     }
-// }
-
-// //<SearchBox id={this.props.Document[Id]} sideBar={side} Document={this.props.Document} searchQuery={StrCast(this.dataDoc.searchQuery)} filterQuery={this.dataDoc.filterQuery} />
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index f406ffbea..04f11a5df 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -11,6 +11,7 @@ import { DocumentType } from '../../../documents/DocumentTypes';
 import { Presentation } from '../../../util/TrackMovements';
 import { Doc } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
+import { DocCast } from '../../../../fields/Types';
 
 @observer
 export class RecordingBox extends ViewBoxBaseComponent() {
@@ -41,7 +42,7 @@ export class RecordingBox extends ViewBoxBaseComponent() {
     setResult = (info: Upload.AccessPathInfo, presentation?: Presentation) => {
         this.result = info;
         this.dataDoc.type = DocumentType.VID;
-        this.dataDoc[this.fieldKey + '-duration'] = this.videoDuration;
+        this.dataDoc[this.fieldKey + '_duration'] = this.videoDuration;
 
         this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
         this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client);
@@ -57,7 +58,7 @@ export class RecordingBox extends ViewBoxBaseComponent() {
     render() {
         return (
             <div className="recordingBox" ref={this._ref}>
-                {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id] || ''} />}
+                {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={DocCast(this.rootDoc.proto)?.[Id] || ''} />}
             </div>
         );
     }
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 424ebc384..51eb774e2 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -67,7 +67,7 @@ export function RecordingView(props: IRecordingViewProps) {
                 const videoFiles = videos.map((vid, i) => new File(vid.videoChunks, `segvideo${i}.mkv`, { type: vid.videoChunks[0].type, lastModified: Date.now() }));
 
                 // upload the segments to the server and get their server access paths
-                const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles)).map(res => (res.result instanceof Error ? '' : res.result.accessPaths.agnostic.server));
+                const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles.map(file => ({file})))).map(res => (res.result instanceof Error ? '' : res.result.accessPaths.agnostic.server));
 
                 // concat the segments together using post call
                 const result: Upload.AccessPathInfo | Error = await Networking.PostToServer('/concatVideos', serverPaths);
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index aa2b22e28..312b3c619 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -5,10 +5,11 @@ import { computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 // import { BufferAttribute, Camera, Vector2, Vector3 } from 'three';
 import { DateField } from '../../../fields/DateField';
-import { Doc, HeightSym, WidthSym } from '../../../fields/Doc';
+import { Doc } from '../../../fields/Doc';
+import { Height, Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { ComputedField } from '../../../fields/ScriptField';
-import { Cast, NumCast } from '../../../fields/Types';
+import { Cast, DocCast, NumCast } from '../../../fields/Types';
 import { AudioField, VideoField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction, returnFalse, returnOne, returnZero } from '../../../Utils';
@@ -24,6 +25,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import './ScreenshotBox.scss';
 import { VideoBox } from './VideoBox';
+
 declare class MediaRecorder {
     constructor(e: any, options?: any); // whatever MediaRecorder has
 }
@@ -129,7 +131,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         }
     }
     getAnchor = (addAsAnnotation: boolean) => {
-        const startTime = Cast(this.layoutDoc._currentTimecode, 'number', null) || (this._videoRec ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined);
+        const startTime = Cast(this.layoutDoc._layout_currentTimecode, 'number', null) || (this._videoRec ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined);
         return CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.annotationKey, startTime, startTime === undefined ? undefined : startTime + 3, undefined, addAsAnnotation) || this.rootDoc;
     };
 
@@ -140,7 +142,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         if (!nativeWidth || !nativeHeight) {
             if (!nativeWidth) Doc.SetNativeWidth(this.dataDoc, 1200);
             Doc.SetNativeHeight(this.dataDoc, (nativeWidth || 1200) / aspect);
-            this.layoutDoc._height = (this.layoutDoc[WidthSym]() || 0) / aspect;
+            this.layoutDoc._height = (this.layoutDoc[Width]() || 0) / aspect;
         }
     };
 
@@ -222,7 +224,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
             const aud_chunks: any = [];
             this._audioRec.ondataavailable = (e: any) => aud_chunks.push(e.data);
             this._audioRec.onstop = async (e: any) => {
-                const [{ result }] = await Networking.UploadFilesToServer(aud_chunks);
+                const [{ result }] = await Networking.UploadFilesToServer(aud_chunks.map((file: any) => ({file})));
                 if (!(result instanceof Error)) {
                     this.dataDoc[this.props.fieldKey + '-audio'] = new AudioField(result.accessPaths.agnostic.client);
                 }
@@ -235,14 +237,14 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
             this._videoRec.onstop = async (e: any) => {
                 console.log('screenshotbox: upload');
                 const file = new File(vid_chunks, `${this.rootDoc[Id]}.mkv`, { type: vid_chunks[0].type, lastModified: Date.now() });
-                const [{ result }] = await Networking.UploadFilesToServer(file);
-                this.dataDoc[this.fieldKey + '-duration'] = (new Date().getTime() - this.recordingStart!) / 1000;
+                const [{ result }] = await Networking.UploadFilesToServer({file});
+                this.dataDoc[this.fieldKey + '_duration'] = (new Date().getTime() - this.recordingStart!) / 1000;
                 if (!(result instanceof Error)) {
                     // convert this screenshotBox into normal videoBox
                     this.dataDoc.type = DocumentType.VID;
                     this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey);
                     this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined;
-                    this.layoutDoc._fitWidth = undefined;
+                    this.layoutDoc._layout_fitWidth = undefined;
                     this.dataDoc[this.props.fieldKey] = new VideoField(result.accessPaths.agnostic.client);
                 } else alert('video conversion failed');
             };
@@ -270,14 +272,14 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
     setupDictation = () => {
         if (this.dataDoc[this.fieldKey + '-dictation']) return;
         const dictationText = DocUtils.GetNewTextDoc('dictation', NumCast(this.rootDoc.x), NumCast(this.rootDoc.y) + NumCast(this.layoutDoc._height) + 10, NumCast(this.layoutDoc._width), 2 * NumCast(this.layoutDoc._height));
-        dictationText._autoHeight = false;
+        dictationText._layout_autoHeight = false;
         const dictationTextProto = Doc.GetProto(dictationText);
         dictationTextProto.recordingSource = this.dataDoc;
         dictationTextProto.recordingStart = ComputedField.MakeFunction(`self.recordingSource["${this.props.fieldKey}-recordingStart"]`);
         dictationTextProto.mediaState = ComputedField.MakeFunction('self.recordingSource.mediaState');
         this.dataDoc[this.fieldKey + '-dictation'] = dictationText;
     };
-    videoPanelHeight = () => (NumCast(this.dataDoc[this.fieldKey + '-nativeHeight'], this.layoutDoc[HeightSym]()) / NumCast(this.dataDoc[this.fieldKey + '-nativeWidth'], this.layoutDoc[WidthSym]())) * this.props.PanelWidth();
+    videoPanelHeight = () => (NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], this.layoutDoc[Height]()) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], this.layoutDoc[Width]())) * this.props.PanelWidth();
     formattedPanelHeight = () => Math.max(0, this.props.PanelHeight() - this.videoPanelHeight());
     render() {
         TraceMobx();
@@ -311,11 +313,11 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                             </>
                         </CollectionFreeFormView>
                     </div>
-                    <div style={{ position: 'relative', height: this.formattedPanelHeight() }}>
+                    <div style={{ background: 'white', position: 'relative', height: this.formattedPanelHeight() }}>
                         {!(this.dataDoc[this.fieldKey + '-dictation'] instanceof Doc) ? null : (
                             <FormattedTextBox
                                 {...this.props}
-                                Document={this.dataDoc[this.fieldKey + '-dictation']}
+                                Document={DocCast(this.dataDoc[this.fieldKey + '-dictation'])}
                                 fieldKey={'text'}
                                 PanelHeight={this.formattedPanelHeight}
                                 select={emptyFunction}
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index f09962b22..37fda14fc 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -167,7 +167,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
     // only included in buttons, transforms scripting UI to a button
     @action
     onFinish = () => {
-        this.rootDoc.layoutKey = 'layout';
+        this.rootDoc.layout_fieldKey = 'layout';
     };
 
     // displays error message
@@ -702,7 +702,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
 
     // toolbar (with compile and apply buttons) for scripting UI
     renderScriptingTools() {
-        const buttonStyle = 'scriptingBox-button' + (StrCast(this.rootDoc.layoutKey).startsWith('layout_on') ? '-finish' : '');
+        const buttonStyle = 'scriptingBox-button' + (StrCast(this.rootDoc.layout_fieldKey).startsWith('layout_on') ? '-finish' : '');
         return (
             <div className="scriptingBox-toolbar">
                 <button
@@ -730,7 +730,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
                     Save
                 </button>
 
-                {!StrCast(this.rootDoc.layoutKey).startsWith('layout_on') ? null : ( // onClick, onChecked, etc need a Finish button to return to their default layout
+                {!StrCast(this.rootDoc.layout_fieldKey).startsWith('layout_on') ? null : ( // onClick, onChecked, etc need a Finish button to return to their default layout
                     <button
                         className={buttonStyle}
                         onPointerDown={e => {
@@ -776,7 +776,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
 
     // toolbar (with edit and run buttons and error message) for params UI
     renderTools(toolSet: string, func: () => void) {
-        const buttonStyle = 'scriptingBox-button' + (StrCast(this.rootDoc.layoutKey).startsWith('layout_on') ? '-finish' : '');
+        const buttonStyle = 'scriptingBox-button' + (StrCast(this.rootDoc.layout_fieldKey).startsWith('layout_on') ? '-finish' : '');
         return (
             <div className="scriptingBox-toolbar">
                 <button
@@ -795,7 +795,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
                     }}>
                     {toolSet}
                 </button>
-                {!StrCast(this.rootDoc.layoutKey).startsWith('layout_on') ? null : (
+                {!StrCast(this.rootDoc.layout_fieldKey).startsWith('layout_on') ? null : (
                     <button
                         className={buttonStyle}
                         onPointerDown={e => {
diff --git a/src/client/views/nodes/SliderBox.tsx b/src/client/views/nodes/SliderBox.tsx
index b96977f32..430b20eb5 100644
--- a/src/client/views/nodes/SliderBox.tsx
+++ b/src/client/views/nodes/SliderBox.tsx
@@ -12,50 +12,56 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { Handle, Tick, TooltipRail, Track } from './SliderBox-components';
 import './SliderBox.scss';
 
-
 @observer
 export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SliderBox, fieldKey); }
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(SliderBox, fieldKey);
+    }
 
-    get minThumbKey() { return this.fieldKey + "-minThumb"; }
-    get maxThumbKey() { return this.fieldKey + "-maxThumb"; }
-    get minKey() { return this.fieldKey + "-min"; }
-    get maxKey() { return this.fieldKey + "-max"; }
+    get minThumbKey() {
+        return this.fieldKey + '-minThumb';
+    }
+    get maxThumbKey() {
+        return this.fieldKey + '-maxThumb';
+    }
+    get minKey() {
+        return this.fieldKey + '-min';
+    }
+    get maxKey() {
+        return this.fieldKey + '-max';
+    }
     specificContextMenu = (e: React.MouseEvent): void => {
         const funcs: ContextMenuProps[] = [];
-        funcs.push({ description: "Edit Thumb Change Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Thumb Change ...", this.props.Document, "onThumbChange", obj.x, obj.y) });
-        ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
-    }
-    onChange = (values: readonly number[]) => runInAction(() => {
-        this.dataDoc[this.minThumbKey] = values[0];
-        this.dataDoc[this.maxThumbKey] = values[1];
-        ScriptCast(this.layoutDoc.onThumbChanged, null)?.script.run({
-            self: this.rootDoc,
-            scriptContext: this.props.scriptContext, range: values, this: this.layoutDoc
+        funcs.push({ description: 'Edit Thumb Change Script', icon: 'edit', event: (obj: any) => ScriptBox.EditButtonScript('On Thumb Change ...', this.props.Document, 'onThumbChange', obj.x, obj.y) });
+        ContextMenu.Instance.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' });
+    };
+    onChange = (values: readonly number[]) =>
+        runInAction(() => {
+            this.dataDoc[this.minThumbKey] = values[0];
+            this.dataDoc[this.maxThumbKey] = values[1];
+            ScriptCast(this.layoutDoc.onThumbChanged, null)?.script.run({
+                self: this.rootDoc,
+                scriptContext: this.props.scriptContext,
+                range: values,
+                this: this.layoutDoc,
+            });
         });
-    })
 
     render() {
         const domain = [NumCast(this.layoutDoc[this.minKey]), NumCast(this.layoutDoc[this.maxKey])];
         const defaultValues = [NumCast(this.dataDoc[this.minThumbKey]), NumCast(this.dataDoc[this.maxThumbKey])];
-        return domain[1] <= domain[0] ? (null) : (
-            <div className="sliderBox-outerDiv" onContextMenu={this.specificContextMenu} onPointerDown={e => e.stopPropagation()}
-                style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}>
-                <div className="sliderBox-mainButton"
-                    onContextMenu={this.specificContextMenu} style={{
+        return domain[1] <= domain[0] ? null : (
+            <div className="sliderBox-outerDiv" onContextMenu={this.specificContextMenu} onPointerDown={e => e.stopPropagation()} style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}>
+                <div
+                    className="sliderBox-mainButton"
+                    onContextMenu={this.specificContextMenu}
+                    style={{
                         background: StrCast(this.layoutDoc.backgroundColor),
-                        color: StrCast(this.layoutDoc.color, "black"),
-                        fontSize: StrCast(this.layoutDoc._fontSize), letterSpacing: StrCast(this.layoutDoc.letterSpacing)
-                    }} >
-                    <Slider
-                        mode={2}
-                        step={Math.min(1, .1 * (domain[1] - domain[0]))}
-                        domain={domain}
-                        rootStyle={{ position: "relative", width: "100%" }}
-                        onChange={this.onChange}
-                        values={defaultValues}
-                    >
-
+                        color: StrCast(this.layoutDoc.color, 'black'),
+                        fontSize: StrCast(this.layoutDoc._text_fontSize),
+                        letterSpacing: StrCast(this.layoutDoc.letterSpacing),
+                    }}>
+                    <Slider mode={2} step={Math.min(1, 0.1 * (domain[1] - domain[0]))} domain={domain} rootStyle={{ position: 'relative', width: '100%' }} onChange={this.onChange} values={defaultValues}>
                         <Rail>{railProps => <TooltipRail {...railProps} />}</Rail>
                         <Handles>
                             {({ handles, activeHandleID, getHandleProps }) => (
@@ -64,13 +70,7 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         const value = i === 0 ? defaultValues[0] : defaultValues[1];
                                         return (
                                             <div title={String(value)}>
-                                                <Handle
-                                                    key={handle.id}
-                                                    handle={handle}
-                                                    domain={domain}
-                                                    isActive={handle.id === activeHandleID}
-                                                    getHandleProps={getHandleProps}
-                                                />
+                                                <Handle key={handle.id} handle={handle} domain={domain} isActive={handle.id === activeHandleID} getHandleProps={getHandleProps} />
                                             </div>
                                         );
                                     })}
@@ -81,13 +81,7 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {({ tracks, getTrackProps }) => (
                                 <div className="slider-tracks">
                                     {tracks.map(({ id, source, target }) => (
-                                        <Track
-                                            key={id}
-                                            source={source}
-                                            target={target}
-                                            disabled={false}
-                                            getTrackProps={getTrackProps}
-                                        />
+                                        <Track key={id} source={source} target={target} disabled={false} getTrackProps={getTrackProps} />
                                     ))}
                                 </div>
                             )}
@@ -95,13 +89,8 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <Ticks count={5}>
                             {({ ticks }) => (
                                 <div className="slider-ticks">
-                                    {ticks.map((tick) => (
-                                        <Tick
-                                            key={tick.id}
-                                            tick={tick}
-                                            count={ticks.length}
-                                            format={(val: number) => val.toString()}
-                                        />
+                                    {ticks.map(tick => (
+                                        <Tick key={tick.id} tick={tick} count={ticks.length} format={(val: number) => val.toString()} />
                                     ))}
                                 </div>
                             )}
@@ -111,4 +100,4 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 7a7d4fe37..1f52c2d92 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -3,7 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, untracked } from 'mobx';
 import { observer } from 'mobx-react';
 import { basename } from 'path';
-import { Doc, HeightSym, WidthSym } from '../../../fields/Doc';
+import { Doc, StrListCast } from '../../../fields/Doc';
+import { Height, Width } from '../../../fields/DocSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
@@ -14,6 +15,7 @@ import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Networking } from '../../Network';
 import { DocumentManager } from '../../util/DocumentManager';
+import { FollowLinkScript } from '../../util/LinkFollower';
 import { LinkManager } from '../../util/LinkManager';
 import { ReplayMovements } from '../../util/ReplayMovements';
 import { SelectionManager } from '../../util/SelectionManager';
@@ -33,8 +35,6 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { RecordingBox } from './RecordingBox';
 import { PinProps, PresBox } from './trails';
 import './VideoBox.scss';
-import { ScriptField } from '../../../fields/ScriptField';
-import { FollowLinkScript } from '../../util/LinkFollower';
 const path = require('path');
 
 /**
@@ -91,9 +91,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return LinkManager.Links(this.dataDoc);
     }
     @computed get heightPercent() {
-        return NumCast(this.layoutDoc._timelineHeightPercent, 100);
+        return NumCast(this.layoutDoc._layout_timelineHeightPercent, 100);
     } // current percent of video relative to VideoBox height
-    // @computed get rawDuration() { return NumCast(this.dataDoc[this.fieldKey + "-duration"]); }
+    // @computed get rawDuration() { return NumCast(this.dataDoc[this.fieldKey + "_duration"]); }
     @observable rawDuration: number = 0;
 
     @computed get youtubeVideoId() {
@@ -111,7 +111,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // returns the presentation data if it exists, null otherwise
     @computed get presentation() {
         const data = this.dataDoc[this.fieldKey + '-presentation'];
-        return data ? JSON.parse(data) : null;
+        return data ? JSON.parse(StrCast(data)) : null;
     }
 
     @computed private get timeline() {
@@ -325,14 +325,14 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 y: NumCast(this.layoutDoc.y, 1),
                 _width: 150,
                 _height: 50,
-                title: (this.layoutDoc._currentTimecode || 0).toString(),
+                title: (this.layoutDoc._layout_currentTimecode || 0).toString(),
                 onClick: FollowLinkScript(),
             });
             this.props.addDocument?.(b);
-            DocUtils.MakeLink(b, this.rootDoc, { linkRelationship: 'video snapshot' });
+            DocUtils.MakeLink(b, this.rootDoc, { link_relationship: 'video snapshot' });
             Networking.PostToServer('/youtubeScreenshot', {
                 id: this.youtubeVideoId,
-                timecode: this.layoutDoc._currentTimecode,
+                timecode: this.layoutDoc._layout_currentTimecode,
             }).then(response => {
                 const resolved = response?.accessPaths?.agnostic?.client;
                 if (resolved) {
@@ -345,7 +345,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
             // if you want to preview the captured image,
             const retitled = StrCast(this.rootDoc.title).replace(/[ -\.:]/g, '');
-            const encodedFilename = encodeURIComponent('snapshot' + retitled + '_' + (this.layoutDoc._currentTimecode || 0).toString().replace(/\./, '_'));
+            const encodedFilename = encodeURIComponent('snapshot' + retitled + '_' + (this.layoutDoc._layout_currentTimecode || 0).toString().replace(/\./, '_'));
             const filename = basename(encodedFilename);
             Utils.convertDataUri(dataUrl, filename).then((returnedFilename: string) => returnedFilename && (cb ?? this.createSnapshotLink)(returnedFilename, downX, downY));
         }
@@ -354,8 +354,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     updateIcon = () => {
         const makeIcon = (returnedfilename: string) => {
             this.dataDoc.icon = new ImageField(returnedfilename);
-            this.dataDoc['icon-nativeWidth'] = this.layoutDoc[WidthSym]();
-            this.dataDoc['icon-nativeHeight'] = this.layoutDoc[HeightSym]();
+            this.dataDoc.icon_nativeWidth = this.layoutDoc[Width]();
+            this.dataDoc.icon_nativeHeight = this.layoutDoc[Height]();
         };
         this.Snapshot(undefined, undefined, makeIcon);
     };
@@ -373,18 +373,18 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             onClick: FollowLinkScript(),
             _width: 150,
             _height: (height / width) * 150,
-            title: '--snapshot' + NumCast(this.layoutDoc._currentTimecode) + ' image-',
+            title: '--snapshot' + NumCast(this.layoutDoc._layout_currentTimecode) + ' image-',
         });
         Doc.SetNativeWidth(Doc.GetProto(imageSnapshot), Doc.NativeWidth(this.layoutDoc));
         Doc.SetNativeHeight(Doc.GetProto(imageSnapshot), Doc.NativeHeight(this.layoutDoc));
         this.props.addDocument?.(imageSnapshot);
-        const link = DocUtils.MakeLink(imageSnapshot, this.getAnchor(true), { linkRelationship: 'video snapshot' });
-        link && (Doc.GetProto(link.anchor2 as Doc).timecodeToHide = NumCast((link.anchor2 as Doc).timecodeToShow) + 3);
+        const link = DocUtils.MakeLink(imageSnapshot, this.getAnchor(true), { link_relationship: 'video snapshot' });
+        link && (Doc.GetProto(link.link_anchor_2 as Doc).timecodeToHide = NumCast((link.link_anchor_2 as Doc).timecodeToShow) + 3);
         setTimeout(() => downX !== undefined && downY !== undefined && DocumentManager.Instance.getFirstDocumentView(imageSnapshot)?.startDragging(downX, downY, 'move', true));
     };
 
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
-        const timecode = Cast(this.layoutDoc._currentTimecode, 'number', null);
+        const timecode = Cast(this.layoutDoc._layout_currentTimecode, 'number', null);
         const marquee = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation);
         if (!addAsAnnotation && marquee) marquee.backgroundColor = 'transparent';
         const anchor = CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.annotationKey, timecode ? timecode : undefined, undefined, marquee, addAsAnnotation) || this.rootDoc;
@@ -402,16 +402,16 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
         if (Number.isFinite(this.player!.duration)) {
             this.rawDuration = this.player!.duration;
-            this.dataDoc[this.fieldKey + '-duration'] = this.rawDuration;
-        } else this.rawDuration = NumCast(this.dataDoc[this.fieldKey + '-duration']);
+            this.dataDoc[this.fieldKey + '_duration'] = this.rawDuration;
+        } else this.rawDuration = NumCast(this.dataDoc[this.fieldKey + '_duration']);
     });
 
     // updates video time
     @action
     updateTimecode = () => {
-        this.player && (this.layoutDoc._currentTimecode = this.player.currentTime);
+        this.player && (this.layoutDoc._layout_currentTimecode = this.player.currentTime);
         try {
-            this._youtubePlayer && (this.layoutDoc._currentTimecode = this._youtubePlayer.getCurrentTime?.());
+            this._youtubePlayer && (this.layoutDoc._layout_currentTimecode = this._youtubePlayer.getCurrentTime?.());
         } catch (e) {
             console.log('Video Timecode Exception:', e);
         }
@@ -423,8 +423,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // extracts video thumbnails and saves them as field of doc
     getVideoThumbnails = () => {
-        if (this.dataDoc.thumbnails !== undefined) return;
-        this.dataDoc.thumbnails = new List<string>();
+        if (this.dataDoc[this.fieldKey + '_thumbnails'] !== undefined) return;
+        this.dataDoc[this.fieldKey + '_thumbnails'] = new List<string>();
         const thumbnailPromises: Promise<any>[] = [];
         const video = document.createElement('video');
 
@@ -442,7 +442,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             if (newTime < video.duration) {
                 video.currentTime = newTime;
             } else {
-                Promise.all(thumbnailPromises).then(thumbnails => (this.dataDoc.thumbnails = new List<string>(thumbnails)));
+                Promise.all(thumbnailPromises).then(thumbnails => (this.dataDoc[this.fieldKey + '_thumbnails'] = new List<string>(thumbnails)));
             }
         };
 
@@ -460,12 +460,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             // vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen);
             this._disposers.reactionDisposer?.();
             this._disposers.reactionDisposer = reaction(
-                () => NumCast(this.layoutDoc._currentTimecode),
+                () => NumCast(this.layoutDoc._layout_currentTimecode),
                 time => !this._playing && (vref.currentTime = time),
                 { fireImmediately: true }
             );
 
-            (!this.dataDoc.thumbnails || this.dataDoc.thumbnails.length != VideoBox.numThumbnails) && this.getVideoThumbnails();
+            (!this.dataDoc[this.fieldKey + '_thumbnails'] || StrListCast(this.dataDoc[this.fieldKey + '_thumbnails']).length != VideoBox.numThumbnails) && this.getVideoThumbnails();
         }
     };
 
@@ -531,7 +531,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         this.dataDoc.layout = RecordingBox.LayoutString(this.fieldKey);
                         // delete assoicated video data
                         this.dataDoc[this.props.fieldKey] = '';
-                        this.dataDoc[this.fieldKey + '-duration'] = '';
+                        this.dataDoc[this.fieldKey + '_duration'] = '';
                         // delete assoicated presentation data
                         this.dataDoc[this.fieldKey + '-presentation'] = '';
                     },
@@ -573,7 +573,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         key="video"
                         autoPlay={this._screenCapture}
                         ref={this.setVideoRef}
-                        style={this._fullScreen ? this.fullScreenSize() : this.isCropped ? { width: 'max-content', height: 'max-content', transform: `scale(${1 / NumCast(this.rootDoc._viewScale)})`, transformOrigin: 'top left' } : {}}
+                        style={this._fullScreen ? this.fullScreenSize() : this.isCropped ? { width: 'max-content', height: 'max-content', transform: `scale(${1 / NumCast(this.rootDoc._freeform_scale)})`, transformOrigin: 'top left' } : {}}
                         onCanPlay={this.videoLoad}
                         controls={VideoBox._nativeControls}
                         onPlay={() => this.Play()}
@@ -620,8 +620,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             this._disposers.reactionDisposer?.();
             this._disposers.youtubeReactionDisposer?.();
             this._disposers.reactionDisposer = reaction(
-                () => this.layoutDoc._currentTimecode,
-                () => !this._playing && this.Seek(NumCast(this.layoutDoc._currentTimecode))
+                () => this.layoutDoc._layout_currentTimecode,
+                () => !this._playing && this.Seek(NumCast(this.layoutDoc._layout_currentTimecode))
             );
             this._disposers.youtubeReactionDisposer = reaction(
                 () => Doc.ActiveTool === InkTool.None && this.props.isSelected(true) && !SnappingManager.GetIsDragging() && !DocumentDecorations.Instance.Interacting,
@@ -677,15 +677,15 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this._clicking = false;
                 if (this.props.isContentActive()) {
                     // const local = this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1).transformPoint(e.clientX, e.clientY);
-                    // this.layoutDoc._timelineHeightPercent = Math.max(0, Math.min(100, local[1] / this.props.PanelHeight() * 100));
+                    // this.layoutDoc._layout_timelineHeightPercent = Math.max(0, Math.min(100, local[1] / this.props.PanelHeight() * 100));
 
-                    this.layoutDoc._timelineHeightPercent = 80;
+                    this.layoutDoc._layout_timelineHeightPercent = 80;
                 }
                 return false;
             }),
             emptyFunction,
             () => {
-                this.layoutDoc._timelineHeightPercent = this.heightPercent !== 100 ? 100 : VideoBox.heightPercent;
+                this.layoutDoc._layout_timelineHeightPercent = this.heightPercent !== 100 ? 100 : VideoBox.heightPercent;
                 setTimeout(
                     action(() => (this._clicking = false)),
                     500
@@ -721,7 +721,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this._youtubeIframeId = VideoBox._youtubeIframeCounter++;
         this._youtubeContentCreated = this._forceCreateYouTubeIFrame ? true : true;
         const classname = 'videoBox-content-YouTube' + (this._fullScreen ? '-fullScreen' : '');
-        const start = untracked(() => Math.round(NumCast(this.layoutDoc._currentTimecode)));
+        const start = untracked(() => Math.round(NumCast(this.layoutDoc._layout_currentTimecode)));
         return (
             <iframe
                 key={this._youtubeIframeId}
@@ -740,7 +740,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @action.bound
     addDocWithTimecode(doc: Doc | Doc[]): boolean {
         const docs = doc instanceof Doc ? [doc] : doc;
-        const curTime = NumCast(this.layoutDoc._currentTimecode);
+        const curTime = NumCast(this.layoutDoc._layout_currentTimecode);
         docs.forEach(doc => (doc._timecodeToHide = (doc._timecodeToShow = curTime) + 1));
         return this.addDocument(doc);
     }
@@ -859,7 +859,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // starts marquee selection
     marqueeDown = (e: React.PointerEvent) => {
-        if (!e.altKey && e.button === 0 && NumCast(this.layoutDoc._viewScale, 1) === 1 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen].includes(Doc.ActiveTool)) {
+        if (!e.altKey && e.button === 0 && NumCast(this.layoutDoc._freeform_scale, 1) === 1 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen].includes(Doc.ActiveTool)) {
             setupMoveUpEvents(
                 this,
                 e,
@@ -870,6 +870,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 }),
                 returnFalse,
                 () => MarqueeAnnotator.clearAnnotations(this._savedAnnotations),
+                false,
                 false
             );
         }
@@ -890,7 +891,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             .scale(this.scaling())
             .translate(0, (-this.heightPercent / 100) * this.props.PanelHeight());
 
-    setPlayheadTime = (time: number) => (this.player!.currentTime = this.layoutDoc._currentTimecode = time);
+    setPlayheadTime = (time: number) => (this.player!.currentTime = this.layoutDoc._layout_currentTimecode = time);
 
     timelineHeight = () => (this.props.PanelHeight() * (100 - this.heightPercent)) / 100;
 
@@ -899,7 +900,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     scaling = () => this.props.NativeDimScaling?.() || 1;
 
     panelWidth = () => (this.props.PanelWidth() * this.heightPercent) / 100;
-    panelHeight = () => (this.layoutDoc._fitWidth ? this.panelWidth() / (Doc.NativeAspect(this.rootDoc) || 1) : (this.props.PanelHeight() * this.heightPercent) / 100);
+    panelHeight = () => (this.layoutDoc._layout_fitWidth ? this.panelWidth() / (Doc.NativeAspect(this.rootDoc) || 1) : (this.props.PanelHeight() * this.heightPercent) / 100);
 
     screenToLocalTransform = () => {
         const offset = (this.props.PanelWidth() - this.panelWidth()) / 2 / this.scaling();
@@ -912,7 +913,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     marqueeFitScaling = () => ((this.props.NativeDimScaling?.() || 1) * this.heightPercent) / 100;
     marqueeOffset = () => [((this.panelWidth() / 2) * (1 - this.heightPercent / 100)) / (this.heightPercent / 100), 0];
 
-    timelineDocFilter = () => [`_timelineLabel:true,${Utils.noRecursionHack}:x`];
+    timelineDocFilter = () => [`_isTimelineLabel:true,${Utils.noRecursionHack}:x`];
 
     // renders video controls
     componentUI = (boundsLeft: number, boundsTop: number) => {
@@ -956,9 +957,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <CollectionStackedTimeline
                     ref={action((r: any) => (this._stackedTimeline = r))}
                     {...this.props}
+                    dataFieldKey={this.fieldKey}
                     fieldKey={this.annotationKey}
                     dictationKey={this.fieldKey + '-dictation'}
                     mediaPath={this.audiopath}
+                    thumbnails={() => StrListCast(this.dataDoc[this.fieldKey + '_thumbnails'])}
                     renderDepth={this.props.renderDepth + 1}
                     startTag={'_timecodeToShow' /* videoStart */}
                     endTag={'_timecodeToHide' /* videoEnd */}
@@ -1003,7 +1006,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const anchy = NumCast(cropping.y);
         const anchw = NumCast(cropping._width);
         const anchh = NumCast(cropping._height);
-        const viewScale = NumCast(this.rootDoc[this.fieldKey + '-nativeWidth']) / anchw;
+        const viewScale = NumCast(this.rootDoc[this.fieldKey + '_nativeWidth']) / anchw;
         cropping.title = 'crop: ' + this.rootDoc.title;
         cropping.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc._width);
         cropping.y = NumCast(this.rootDoc.y);
@@ -1014,25 +1017,25 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         cropping.onClick = undefined;
         const croppingProto = Doc.GetProto(cropping);
         croppingProto.annotationOn = undefined;
-        croppingProto.isPrototype = true;
+        croppingProto.isDataDoc = true;
         croppingProto.proto = Cast(this.rootDoc.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO
         croppingProto.type = DocumentType.VID;
         croppingProto.layout = VideoBox.LayoutString('data');
         croppingProto.data = ObjectField.MakeCopy(this.rootDoc[this.fieldKey] as ObjectField);
-        croppingProto['data-nativeWidth'] = anchw;
-        croppingProto['data-nativeHeight'] = anchh;
+        croppingProto['data_nativeWidth'] = anchw;
+        croppingProto['data_nativeHeight'] = anchh;
         croppingProto.videoCrop = true;
-        croppingProto.currentTimecode = this.layoutDoc._currentTimecode;
-        croppingProto.viewScale = viewScale;
-        croppingProto.viewScaleMin = viewScale;
-        croppingProto.panX = anchx / viewScale;
-        croppingProto.panY = anchy / viewScale;
-        croppingProto.panXMin = anchx / viewScale;
-        croppingProto.panXMax = anchw / viewScale;
-        croppingProto.panYMin = anchy / viewScale;
-        croppingProto.panYMax = anchh / viewScale;
+        croppingProto.layout_currentTimecode = this.layoutDoc._layout_currentTimecode;
+        croppingProto.freeform_scale = viewScale;
+        croppingProto.freeform_scale_min = viewScale;
+        croppingProto.freeform_ = anchx / viewScale;
+        croppingProto.freeform_panY = anchy / viewScale;
+        croppingProto.freeform_panX_min = anchx / viewScale;
+        croppingProto.freeform_panX_max = anchw / viewScale;
+        croppingProto.freeform_panY_min = anchy / viewScale;
+        croppingProto.freeform_panY_max = anchh / viewScale;
         if (addCrop) {
-            DocUtils.MakeLink(region, cropping, { linkRelationship: 'cropped image' });
+            DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' });
         }
         this.props.bringToFront(cropping);
         return cropping;
@@ -1050,7 +1053,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 style={{
                     pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined,
                     borderRadius,
-                    overflow: this.props.docViewPath?.().slice(-1)[0].fitWidth ? 'auto' : undefined,
+                    overflow: this.props.docViewPath?.().slice(-1)[0].layout_fitWidth ? 'auto' : undefined,
                 }}
                 onWheel={e => {
                     e.stopPropagation();
@@ -1079,8 +1082,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                             PanelHeight={this.panelHeight}
                             isAnyChildContentActive={returnFalse}
                             ScreenToLocalTransform={this.screenToLocalTransform}
-                            docFilters={this.timelineDocFilter}
+                            childFilters={this.timelineDocFilter}
                             select={emptyFunction}
+                            focus={emptyFunction}
                             NativeDimScaling={returnOne}
                             whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                             removeDocument={this.removeDocument}
@@ -1116,7 +1120,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @computed get UIButtons() {
         const bounds = this.props.docViewPath().lastElement().getBounds();
         const width = (bounds?.right || 0) - (bounds?.left || 0);
-        const curTime = NumCast(this.layoutDoc._currentTimecode) - (this.timeline?.clipStart || 0);
+        const curTime = NumCast(this.layoutDoc._layout_currentTimecode) - (this.timeline?.clipStart || 0);
         return (
             <>
                 <div className="videobox-button" title={this._playing ? 'play' : 'pause'} onPointerDown={this.onPlayDown}>
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index e05b48c0b..2ff0245d2 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -2,16 +2,18 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as WebRequest from 'web-request';
-import { Doc, DocListCast, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
+import { Doc, DocListCast, Field, Opt } from '../../../fields/Doc';
+import { Height, Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { HtmlField } from '../../../fields/HtmlField';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
+import { RefField } from '../../../fields/RefField';
 import { listSpec } from '../../../fields/Schema';
-import { Cast, ImageCast, NumCast, StrCast } from '../../../fields/Types';
+import { Cast, ImageCast, NumCast, StrCast, WebCast } from '../../../fields/Types';
 import { ImageField, WebField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, getWordAtPoint, returnFalse, returnOne, returnZero, setupMoveUpEvents, smoothScroll, StopEvent, Utils } from '../../../Utils';
+import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, getWordAtPoint, returnFalse, returnOne, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from '../../util/DragManager';
@@ -31,7 +33,7 @@ import { Annotation } from '../pdf/Annotation';
 import { GPTPopup } from '../pdf/GPTPopup/GPTPopup';
 import { SidebarAnnos } from '../SidebarAnnos';
 import { StyleProp } from '../StyleProvider';
-import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from './DocumentView';
+import { DocComponentView, DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { LinkDocPreview } from './LinkDocPreview';
 import { PinProps, PresBox } from './trails';
@@ -47,6 +49,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
     public static openSidebarWidth = 250;
     public static sidebarResizerWidth = 5;
+    static webStyleSheet = addStyleSheet();
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean) => void);
     private _setBrushViewer: undefined | ((view: { width: number; height: number; panX: number; panY: number }) => void);
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
@@ -54,19 +57,19 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     private _keyInput = React.createRef<HTMLInputElement>();
-    private _initialScroll: Opt<number> = NumCast(this.layoutDoc.thumbScrollTop, NumCast(this.layoutDoc.scrollTop));
+    private _initialScroll: Opt<number> = NumCast(this.layoutDoc.thumbScrollTop, NumCast(this.layoutDoc.layout_scrollTop));
     private _sidebarRef = React.createRef<SidebarAnnos>();
     private _searchRef = React.createRef<HTMLInputElement>();
     private _searchString = '';
+    private _scrollTimer: any;
 
     private get _getAnchor() {
         return AnchorMenu.Instance?.GetAnchor;
     }
-    @observable private _webUrl = ''; // url of the src parameter of the embedded iframe but not necessarily the rendered page - eg, when following a link, the rendered page changes but we don't wan the src parameter to also change as that would cause an unnecessary re-render.
+    @observable private _webUrl = ''; // url of the src parameter of the embedded iframe but not necessarily the rendered page - eg, when following a link, the rendered page changes but we don't want the src parameter to also change as that would cause an unnecessary re-render.
     @observable private _hackHide = false; // apparently changing the value of the 'sandbox' prop doesn't necessarily apply it to the active iframe.  so thisforces the ifrmae to be rebuilt when allowScripts is toggled
     @observable private _searching: boolean = false;
     @observable private _showSidebar = false;
-    @observable private _scrollTimer: any;
     @observable private _webPageHasBeenRendered = false;
     @observable private _overlayAnnoInfo: Opt<Doc>;
     @observable private _marqueeing: number[] | undefined;
@@ -82,7 +85,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return this._url ? WebBox.urlHash(this._url) + '' : '';
     }
     @computed get scrollHeight() {
-        return Math.max(this.layoutDoc[HeightSym](), this._scrollHeight);
+        return Math.max(this.layoutDoc[Height](), this._scrollHeight);
     }
     @computed get allAnnotations() {
         return DocListCast(this.dataDoc[this.annotationKey]);
@@ -99,7 +102,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             ImageCast(
                 this.layoutDoc['thumb-frozen'],
                 ImageCast(
-                    this.layoutDoc.thumbScrollTop === this.layoutDoc._scrollTop && this.layoutDoc.thumbNativeWidth === NumCast(this.layoutDoc.nativeWidth) && this.layoutDoc.thumbNativeHeight === NumCast(this.layoutDoc.nativeHeight)
+                    this.layoutDoc.thumbScrollTop === this.layoutDoc._layout_scrollTop && this.layoutDoc.thumbNativeWidth === NumCast(this.layoutDoc.nativeWidth) && this.layoutDoc.thumbNativeHeight === NumCast(this.layoutDoc.nativeHeight)
                         ? this.layoutDoc.thumb
                         : undefined
                 )
@@ -141,87 +144,65 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
 
     updateThumb = async () => {
-        const imageBitmap = ImageCast(this.layoutDoc['thumb-frozen'])?.url.href;
-        const scrollTop = NumCast(this.layoutDoc._scrollTop);
+        if (!this._iframe) return;
+        const scrollTop = NumCast(this.layoutDoc._layout_scrollTop);
         const nativeWidth = NumCast(this.layoutDoc.nativeWidth);
         const nativeHeight = (nativeWidth * this.props.PanelHeight()) / this.props.PanelWidth();
-        if (
-            !this.props.isSelected(true) &&
-            !Doc.IsBrushedDegree(this.rootDoc) &&
-            !this.isAnyChildContentActive() &&
-            !this.rootDoc.thumbLockout &&
-            !this.props.dontRegisterView &&
-            this._iframe &&
-            !imageBitmap &&
-            (scrollTop !== this.layoutDoc.thumbScrollTop || nativeWidth !== this.layoutDoc.thumbNativeWidth || nativeHeight !== this.layoutDoc.thumbNativeHeight)
-        ) {
-            var htmlString = this._iframe.contentDocument && new XMLSerializer().serializeToString(this._iframe.contentDocument);
-            if (!htmlString) {
-                htmlString = await (await fetch(Utils.CorsProxy(this.webField!.href))).text();
-            }
-            this.layoutDoc.thumb = undefined;
-            this.rootDoc.thumbLockout = true; // lock to prevent multiple thumb updates.
-            CreateImage(this._webUrl.endsWith('/') ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl, this._iframe.contentDocument?.styleSheets ?? [], htmlString, nativeWidth, nativeHeight, scrollTop)
-                .then((data_url: any) => {
-                    if (data_url.includes('<!DOCTYPE')) {
-                        console.log('BAD DATA IN THUMB CREATION');
-                        return;
-                    }
-                    Utils.convertDataUri(data_url, this.layoutDoc[Id] + '-icon' + new Date().getTime(), true, this.layoutDoc[Id] + '-icon').then(returnedfilename =>
-                        setTimeout(
-                            action(() => {
-                                this.rootDoc.thumbLockout = false;
-                                this.layoutDoc.thumb = new ImageField(returnedfilename);
-                                this.layoutDoc.thumbScrollTop = scrollTop;
-                                this.layoutDoc.thumbNativeWidth = nativeWidth;
-                                this.layoutDoc.thumbNativeHeight = nativeHeight;
-                            }),
-                            500
-                        )
-                    );
-                })
-                .catch(function (error: any) {
-                    console.error('oops, something went wrong!', error);
-                });
+        var htmlString = this._iframe.contentDocument && new XMLSerializer().serializeToString(this._iframe.contentDocument);
+        if (!htmlString) {
+            htmlString = await (await fetch(Utils.CorsProxy(this.webField!.href))).text();
         }
+        this.layoutDoc.thumb = undefined;
+        this.rootDoc.thumbLockout = true; // lock to prevent multiple thumb updates.
+        CreateImage(this._webUrl.endsWith('/') ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl, this._iframe.contentDocument?.styleSheets ?? [], htmlString, nativeWidth, nativeHeight, scrollTop)
+            .then((data_url: any) => {
+                if (data_url.includes('<!DOCTYPE')) {
+                    console.log('BAD DATA IN THUMB CREATION');
+                    return;
+                }
+                Utils.convertDataUri(data_url, this.layoutDoc[Id] + '-icon' + new Date().getTime(), true, this.layoutDoc[Id] + '-icon').then(returnedfilename =>
+                    setTimeout(
+                        action(() => {
+                            this.rootDoc.thumbLockout = false;
+                            this.layoutDoc.thumb = new ImageField(returnedfilename);
+                            this.layoutDoc.thumbScrollTop = scrollTop;
+                            this.layoutDoc.thumbNativeWidth = nativeWidth;
+                            this.layoutDoc.thumbNativeHeight = nativeHeight;
+                        }),
+                        500
+                    )
+                );
+            })
+            .catch(function (error: any) {
+                console.error('oops, something went wrong!', error);
+            });
     };
-    _thumbTimer: any;
+
     async componentDidMount() {
         this.props.setContentView?.(this); // this tells the DocumentView that this WebBox is the "content" of the document.  this allows the DocumentView to call WebBox relevant methods to configure the UI (eg, show back/forward buttons)
 
         runInAction(() => {
-            this._annotationKeySuffix = () => this._urlHash + '-annotations';
+            this._annotationKeySuffix = () => this._urlHash + '_annotations';
             const reqdFuncs: { [key: string]: string } = {};
-            // bcz: need to make sure that doc.data-annotations points to the currently active web page's annotations (this could/should be when the doc is created)
-            reqdFuncs[this.fieldKey + '-annotations'] = `copyField(this["${this.fieldKey}-"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"-annotations"])`;
-            reqdFuncs[this.fieldKey + '-annotations-setter'] = `this["${this.fieldKey}-"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"-annotations"] = value`;
-            reqdFuncs[this.fieldKey + '-sidebar'] = `copyField(this["${this.fieldKey}-"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"-sidebar"])`;
-            DocUtils.AssignScripts(this.rootDoc, {}, reqdFuncs);
+            // bcz: need to make sure that doc.data_annotations points to the currently active web page's annotations (this could/should be when the doc is created)
+            reqdFuncs[this.fieldKey + '_annotations'] = `copyField(this["${this.fieldKey}_"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"_annotations"])`;
+            reqdFuncs[this.fieldKey + '_annotations-setter'] = `this["${this.fieldKey}_"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"_annotations"] = value`;
+            reqdFuncs[this.fieldKey + '_sidebar'] = `copyField(this["${this.fieldKey}_"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"_sidebar"])`;
+            DocUtils.AssignScripts(this.dataDoc, {}, reqdFuncs);
         });
-        reaction(
-            () => this.props.isSelected(true) || this.isAnyChildContentActive() || Doc.isBrushedHighlightedDegree(this.props.Document),
-            async selected => {
-                if (selected) {
-                    this._thumbTimer && clearTimeout(this._thumbTimer);
-                    this._webPageHasBeenRendered = true;
-                } else if (
-                    (!this.props.isContentActive(true) || SnappingManager.GetIsDragging()) && // update thumnail when unselected AND (no child annotation is active OR we've started dragging the document in which case no additional deselect will occur so this is the only chance to update the thumbnail)
-                    LightboxView.LightboxDoc !== this.rootDoc
-                ) {
-                    // don't create a thumbnail if entering Lightbox from maximize either, since thumb will be empty.
-                    this._thumbTimer && clearTimeout(this._thumbTimer);
-                    this._thumbTimer = setTimeout(this.updateThumb, 2000);
-                }
-            },
-            { fireImmediately: this.props.isSelected(true) || this.isAnyChildContentActive() || (Doc.isBrushedHighlightedDegreeUnmemoized(this.props.Document) ? true : false) }
+        this._disposers.urlchange = reaction(
+            () => WebCast(this.rootDoc.data),
+            url => {
+                this.submitURL(url.url.href, false, false);
+            }
         );
 
-        this._disposers.autoHeight = reaction(
-            () => this.layoutDoc._autoHeight,
-            autoHeight => {
-                if (autoHeight) {
-                    this.layoutDoc._nativeHeight = NumCast(this.props.Document[this.props.fieldKey + '-nativeHeight']);
-                    this.props.setHeight?.(NumCast(this.props.Document[this.props.fieldKey + '-nativeHeight']) * (this.props.NativeDimScaling?.() || 1));
+        this._disposers.layout_autoHeight = reaction(
+            () => this.layoutDoc._layout_autoHeight,
+            layout_autoHeight => {
+                if (layout_autoHeight) {
+                    this.layoutDoc._nativeHeight = NumCast(this.props.Document[this.props.fieldKey + '_nativeHeight']);
+                    this.props.setHeight?.(NumCast(this.props.Document[this.props.fieldKey + '_nativeHeight']) * (this.props.NativeDimScaling?.() || 1));
                 }
             }
         );
@@ -234,7 +215,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 if (!nativeWidth || !nativeHeight || Math.abs(nativeWidth / nativeHeight - youtubeaspect) > 0.05) {
                     if (!nativeWidth) Doc.SetNativeWidth(this.layoutDoc, 600);
                     Doc.SetNativeHeight(this.layoutDoc, (nativeWidth || 600) / youtubeaspect);
-                    this.layoutDoc._height = this.layoutDoc[WidthSym]() / youtubeaspect;
+                    this.layoutDoc._height = this.layoutDoc[Width]() / youtubeaspect;
                 }
             } // else it's an HTMLfield
         } else if (this.webField && !this.dataDoc.text) {
@@ -245,7 +226,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
 
         this._disposers.scrollReaction = reaction(
-            () => NumCast(this.layoutDoc._scrollTop),
+            () => NumCast(this.layoutDoc._layout_scrollTop),
             scrollTop => {
                 const viewTrans = StrCast(this.Document._viewTransition);
                 const durationMiliStr = viewTrans.match(/([0-9]*)ms/);
@@ -296,14 +277,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return this._savedAnnotations;
     };
 
-    menuControls = () => this.urlEditor; // controls to be added to the top bar when a document of this type is selected
-
     setBrushViewer = (func?: (view: { width: number; height: number; panX: number; panY: number }) => void) => (this._setBrushViewer = func);
     brushView = (view: { width: number; height: number; panX: number; panY: number }) => this._setBrushViewer?.(view);
     focus = (anchor: Doc, options: DocFocusOptions) => {
         if (anchor !== this.rootDoc && this._outerRef.current) {
             const windowHeight = this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
-            const scrollTo = Utils.scrollIntoView(NumCast(anchor.y), anchor[HeightSym](), NumCast(this.layoutDoc._scrollTop), windowHeight, windowHeight * 0.1, Math.max(NumCast(anchor.y) + anchor[HeightSym](), this._scrollHeight));
+            const scrollTo = Utils.scrollIntoView(NumCast(anchor.y), anchor[Height](), NumCast(this.layoutDoc._layout_scrollTop), windowHeight, windowHeight * 0.1, Math.max(NumCast(anchor.y) + anchor[Height](), this._scrollHeight));
             if (scrollTo !== undefined) {
                 if (this._initialScroll === undefined) {
                     const focusTime = options.zoomTime ?? 500;
@@ -316,15 +295,18 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     };
 
-    getView = async (doc: Doc) => {
-        if (this.rootDoc.layoutKey === 'layout_icon') this.props.DocumentView?.().iconify();
-        if (this._url && StrCast(doc.webUrl) !== this._url) this.submitURL(StrCast(doc.webUrl));
+    @action
+    getView = (doc: Doc) => {
+        if (Doc.AreProtosEqual(doc, this.rootDoc)) return new Promise<Opt<DocumentView>>(res => res(this.props.DocumentView?.()));
+        if (this.rootDoc.layout_fieldKey === 'layout_icon') this.props.DocumentView?.().iconify();
+        const webUrl = WebCast(doc.presData)?.url;
+        if (this._url && webUrl && webUrl.href !== this._url) this.setData(webUrl.href);
         if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(false);
         return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv)));
     };
 
     sidebarAddDocTab = (doc: Doc, where: OpenWhere) => {
-        if (DocListCast(this.props.Document[this.props.fieldKey + '-sidebar']).includes(doc) && !this.SidebarShown) {
+        if (DocListCast(this.props.Document[this.props.fieldKey + '_sidebar']).includes(doc) && !this.SidebarShown) {
             this.toggleSidebar(false);
             return true;
         }
@@ -341,13 +323,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         } catch (e) {}
         const anchor =
             this._getAnchor(this._savedAnnotations, false) ??
-            Docs.Create.WebanchorDocument(this._url, {
-                title: StrCast(this.rootDoc.title + ' ' + this.layoutDoc._scrollTop),
-                y: NumCast(this.layoutDoc._scrollTop),
-                unrendered: true,
+            Docs.Create.WebConfigDocument({
+                title: StrCast(this.rootDoc.title + ' ' + this.layoutDoc._layout_scrollTop),
+                y: NumCast(this.layoutDoc._layout_scrollTop),
                 annotationOn: this.rootDoc,
             });
-        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: true, pannable: true } }, this.rootDoc);
+        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: pinProps?.pinData ? true : false, pannable: true } }, this.rootDoc);
         anchor.text = ele?.textContent ?? '';
         anchor.textHtml = ele?.innerHTML;
         //addAsAnnotation &&
@@ -370,9 +351,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 this._selectionText = sel.toString();
                 AnchorMenu.Instance.setSelectedText(sel.toString());
                 this._textAnnotationCreator = () => this.createTextAnnotation(sel, !sel.isCollapsed ? sel.getRangeAt(0) : undefined);
-                AnchorMenu.Instance.jumpTo(e.clientX * scale + mainContBounds.translateX, e.clientY * scale + mainContBounds.translateY - NumCast(this.layoutDoc._scrollTop) * scale);
+                AnchorMenu.Instance.jumpTo(e.clientX * scale + mainContBounds.translateX, e.clientY * scale + mainContBounds.translateY - NumCast(this.layoutDoc._layout_scrollTop) * scale);
                 // Changing which document to add the annotation to (the currently selected WebBox)
-                GPTPopup.Instance.setSidebarId(`${this.props.fieldKey}-${this._urlHash}-sidebar`);
+                GPTPopup.Instance.setSidebarId(`${this.props.fieldKey}_${this._urlHash}_sidebar`);
                 GPTPopup.Instance.addDoc = this.sidebarAddDocument;
             }
         }
@@ -385,7 +366,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         const word = getWordAtPoint(e.target, e.clientX, e.clientY);
         this._setPreviewCursor?.(e.clientX, e.clientY, false, true);
         MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
-        e.button !== 2 && (this._marqueeing = [e.clientX * scale + mainContBounds.translateX, e.clientY * scale + mainContBounds.translateY - NumCast(this.layoutDoc._scrollTop) * scale]);
+        e.button !== 2 && (this._marqueeing = [e.clientX * scale + mainContBounds.translateX, e.clientY * scale + mainContBounds.translateY - NumCast(this.layoutDoc._layout_scrollTop) * scale]);
         if (word || ((e.target as any) || '').className.includes('rangeslider') || (e.target as any)?.onclick || (e.target as any)?.parentNode?.onclick) {
             setTimeout(
                 action(() => (this._marqueeing = undefined)),
@@ -413,7 +394,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     iframeClick = () => this._iframeClick;
     iframeScaling = () => 1 / this.props.ScreenToLocalTransform().Scale;
 
-    addStyleSheet(document: any, styleType: string = 'text/css') {
+    addWebStyleSheet(document: any, styleType: string = 'text/css') {
         if (document) {
             const style = document.createElement('style');
             style.type = styleType;
@@ -421,7 +402,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             return (sheets as any).sheet;
         }
     }
-    addStyleSheetRule(sheet: any, selector: any, css: any, selectorPrefix = '.') {
+    addWebStyleSheetRule(sheet: any, selector: any, css: any, selectorPrefix = '.') {
         const propText =
             typeof css === 'string'
                 ? css
@@ -438,8 +419,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         if (this._initialScroll !== undefined) {
             this.setScrollPos(this._initialScroll);
         }
-
-        this.addStyleSheetRule(this.addStyleSheet(this._iframe?.contentDocument), '::selection', { color: 'white', background: 'orange' }, '');
+        this._scrollHeight = this._iframe?.contentDocument?.body?.scrollHeight ?? 0;
+        this.addWebStyleSheetRule(this.addWebStyleSheet(this._iframe?.contentDocument), '::selection', { color: 'white', background: 'orange' }, '');
 
         let href: Opt<string>;
         try {
@@ -463,17 +444,24 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     .replace('search&', 'search?')
                     .replace('?gbv=1', '');
             }
-            this.submitURL(requrlraw, undefined, true);
+            this.setData(requrlraw);
         }
         const iframeContent = iframe?.contentDocument;
         if (iframeContent) {
             iframeContent.addEventListener('pointerup', this.iframeUp);
             iframeContent.addEventListener('pointerdown', this.iframeDown);
+            // iframeContent.addEventListener(
+            //     'wheel',
+            //     e => {
+            //         e.ctrlKey && e.preventDefault();
+            //     },
+            //     { passive: false }
+            // );
             const initHeights = () => {
                 this._scrollHeight = Math.max(this._scrollHeight, (iframeContent.body.children[0] as any)?.scrollHeight || 0);
                 if (this._scrollHeight) {
                     this.rootDoc.nativeHeight = Math.min(NumCast(this.rootDoc.nativeHeight), this._scrollHeight);
-                    this.layoutDoc.height = Math.min(this.layoutDoc[HeightSym](), (this.layoutDoc[WidthSym]() * NumCast(this.rootDoc.nativeHeight)) / NumCast(this.rootDoc.nativeWidth));
+                    this.layoutDoc.height = Math.min(this.layoutDoc[Height](), (this.layoutDoc[Width]() * NumCast(this.rootDoc.nativeHeight)) / NumCast(this.rootDoc.nativeWidth));
                 }
             };
             initHeights();
@@ -482,7 +470,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 action(() => initHeights),
                 5000
             );
-            iframe.setAttribute('enable-annotation', 'true');
             iframeContent.addEventListener(
                 'click',
                 undoBatch(
@@ -493,49 +480,63 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         }
                         const origin = this.webField?.origin;
                         if (href && origin) {
+                            const batch = UndoManager.StartBatch('webclick');
                             e.stopPropagation();
-                            setTimeout(() => this.submitURL(href.replace(Utils.prepend(''), origin)));
+                            setTimeout(() => {
+                                this.setData(href.replace(Utils.prepend(''), origin));
+                                batch.end();
+                            });
                             if (this._outerRef.current) {
-                                this._outerRef.current.scrollTop = NumCast(this.layoutDoc._scrollTop);
+                                this._outerRef.current.scrollTop = NumCast(this.layoutDoc._layout_scrollTop);
                                 this._outerRef.current.scrollLeft = 0;
                             }
                         }
                     })
                 )
             );
-            iframe.contentDocument.addEventListener('wheel', this.iframeWheel, false);
-            //iframe.contentDocument.addEventListener('scroll', () => !this.active() && this._iframe && (this._iframe.scrollTop = NumCast(this.layoutDoc._scrollTop), false));
+            iframe.contentDocument.addEventListener('wheel', this.iframeWheel, { passive: false });
         }
     };
 
     @action
-    iframeWheel = (e: any) => {
+    iframeWheel = (e: WheelEvent) => {
         if (!this._scrollTimer) {
-            this._scrollTimer = setTimeout(
-                action(() => (this._scrollTimer = undefined)),
-                250
-            ); // this turns events off on the iframe which allows scrolling to change direction smoothly
+            addStyleSheetRule(WebBox.webStyleSheet, 'webBox-iframe', { 'pointer-events': 'none' });
+            this._scrollTimer = setTimeout(() => {
+                this._scrollTimer = undefined;
+                clearStyleSheetRules(WebBox.webStyleSheet);
+            }, 250); // this turns events off on the iframe which allows scrolling to change direction smoothly
+        }
+        if (e.ctrlKey) {
+            if (this._innerCollectionView) {
+                this._innerCollectionView.zoom(e.screenX, e.screenY, e.deltaY);
+                const offset = e.clientY - NumCast(this.layoutDoc._layout_scrollTop);
+                this.layoutDoc.freeform_panY = offset - offset / NumCast(this.layoutDoc._freeform_scale) + NumCast(this.layoutDoc._layout_scrollTop) - NumCast(this.layoutDoc._layout_scrollTop) / NumCast(this.layoutDoc._freeform_scale);
+            }
+            e.preventDefault();
         }
     };
 
     @action
     setDashScrollTop = (scrollTop: number, timeout: number = 250) => {
         const iframeHeight = Math.max(scrollTop, this._scrollHeight - this.panelHeight());
-        this._scrollTimer && clearTimeout(this._scrollTimer);
-        this._scrollTimer = setTimeout(
-            action(() => {
-                this._scrollTimer = undefined;
-                const newScrollTop = scrollTop > iframeHeight ? iframeHeight : scrollTop;
-                if (!LinkDocPreview.LinkInfo && this._outerRef.current && newScrollTop !== this.layoutDoc.thumbScrollTop && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()))) {
-                    this.layoutDoc.thumb = undefined;
-                    this.layoutDoc.thumbScrollTop = undefined;
-                    this.layoutDoc.thumbNativeWidth = undefined;
-                    this.layoutDoc.thumbNativeHeight = undefined;
-                    this.layoutDoc.scrollTop = this._outerRef.current.scrollTop = newScrollTop;
-                } else if (this._outerRef.current) this._outerRef.current.scrollTop = newScrollTop;
-            }),
-            timeout
-        );
+        if (this._scrollTimer) {
+            clearTimeout(this._scrollTimer);
+            clearStyleSheetRules(WebBox.webStyleSheet);
+        }
+        addStyleSheetRule(WebBox.webStyleSheet, 'webBox-iframe', { 'pointer-events': 'none' });
+        this._scrollTimer = setTimeout(() => {
+            clearStyleSheetRules(WebBox.webStyleSheet);
+            this._scrollTimer = undefined;
+            const newScrollTop = scrollTop > iframeHeight ? iframeHeight : scrollTop;
+            if (!LinkDocPreview.LinkInfo && this._outerRef.current && newScrollTop !== this.layoutDoc.thumbScrollTop && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()))) {
+                this.layoutDoc.thumb = undefined;
+                this.layoutDoc.thumbScrollTop = undefined;
+                this.layoutDoc.thumbNativeWidth = undefined;
+                this.layoutDoc.thumbNativeHeight = undefined;
+                this.layoutDoc.layout_scrollTop = this._outerRef.current.scrollTop = newScrollTop;
+            } else if (this._outerRef.current) this._outerRef.current.scrollTop = newScrollTop;
+        }, timeout);
     };
 
     goTo = (scrollTop: number, duration: number, easeFunc: 'linear' | 'ease' | undefined) => {
@@ -551,14 +552,15 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
 
     forward = (checkAvailable?: boolean) => {
-        const future = Cast(this.rootDoc[this.fieldKey + '-future'], listSpec('string'), []);
-        const history = Cast(this.rootDoc[this.fieldKey + '-history'], listSpec('string'), []);
+        const future = Cast(this.rootDoc[this.fieldKey + '_future'], listSpec('string'), []);
+        const history = Cast(this.rootDoc[this.fieldKey + '_history'], listSpec('string'), []);
         if (checkAvailable) return future.length;
         runInAction(() => {
             if (future.length) {
                 const curUrl = this._url;
-                this.rootDoc[this.fieldKey + '-history'] = new List<string>([...history, this._url]);
-                this.rootDoc[this.fieldKey] = new WebField(new URL(future.pop()!));
+                this.dataDoc[this.fieldKey + '_history'] = new List<string>([...history, this._url]);
+                this.dataDoc[this.fieldKey] = new WebField(new URL(future.pop()!));
+                this._scrollHeight = 0;
                 if (this._webUrl === this._url) {
                     this._webUrl = curUrl;
                     setTimeout(action(() => (this._webUrl = this._url)));
@@ -572,15 +574,16 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
 
     back = (checkAvailable?: boolean) => {
-        const future = Cast(this.rootDoc[this.fieldKey + '-future'], listSpec('string'));
-        const history = Cast(this.rootDoc[this.fieldKey + '-history'], listSpec('string'), []);
+        const future = Cast(this.rootDoc[this.fieldKey + '_future'], listSpec('string'));
+        const history = Cast(this.rootDoc[this.fieldKey + '_history'], listSpec('string'), []);
         if (checkAvailable) return history.length;
         runInAction(() => {
             if (history.length) {
                 const curUrl = this._url;
-                if (future === undefined) this.rootDoc[this.fieldKey + '-future'] = new List<string>([this._url]);
-                else this.rootDoc[this.fieldKey + '-future'] = new List<string>([...future, this._url]);
-                this.layoutDoc[this.fieldKey] = new WebField(new URL(history.pop()!));
+                if (future === undefined) this.dataDoc[this.fieldKey + '_future'] = new List<string>([this._url]);
+                else this.dataDoc[this.fieldKey + '_future'] = new List<string>([...future, this._url]);
+                this.dataDoc[this.fieldKey] = new WebField(new URL(history.pop()!));
+                this._scrollHeight = 0;
                 if (this._webUrl === this._url) {
                     this._webUrl = curUrl;
                     setTimeout(action(() => (this._webUrl = this._url)));
@@ -607,23 +610,18 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         if (!newUrl) return;
         if (!newUrl.startsWith('http')) newUrl = 'http://' + newUrl;
         try {
-            const future = Cast(this.rootDoc[this.fieldKey + '-future'], listSpec('string'));
-            const history = Cast(this.rootDoc[this.fieldKey + '-history'], listSpec('string'));
-            const url = this.webField?.toString();
-            if (url && !preview) {
-                this.rootDoc[this.fieldKey + '-history'] = new List<string>([...(history || []), url]);
-                this.layoutDoc._scrollTop = 0;
+            if (!preview) {
                 if (this._webPageHasBeenRendered) {
                     this.layoutDoc.thumb = undefined;
                     this.layoutDoc.thumbScrollTop = undefined;
                     this.layoutDoc.thumbNativeWidth = undefined;
                     this.layoutDoc.thumbNativeHeight = undefined;
                 }
-                future && (future.length = 0);
             }
             if (!preview) {
-                this.layoutDoc[this.fieldKey] = new WebField(new URL(newUrl));
-                !dontUpdateIframe && (this._webUrl = this._url);
+                if (!dontUpdateIframe) {
+                    this._webUrl = this._url;
+                }
             }
         } catch (e) {
             console.log('WebBox URL error:' + this._url);
@@ -637,53 +635,34 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         const uri = dataTransfer.getData('text/uri-list');
         const url = uri || html || this._url || '';
         const newurl = url.startsWith(window.location.origin) ? url.replace(window.location.origin, this._url?.match(/http[s]?:\/\/[^\/]*/)?.[0] || '') : url;
-        this.submitURL(newurl);
+        this.setData(newurl);
         e.stopPropagation();
     };
+
+    @action
+    setData = (data: Field | Promise<RefField | undefined>) => {
+        if (!(typeof data === 'string') && !(data instanceof WebField)) return false;
+        if (Field.toString(data) === this._url) return false;
+        this._scrollHeight = 0;
+        const oldUrl = this._url;
+        const history = Cast(this.rootDoc[this.fieldKey + '_history'], listSpec('string'), []);
+        const weburl = new WebField(Field.toString(data));
+        this.dataDoc[this.fieldKey + '_future'] = new List<string>([]);
+        this.dataDoc[this.fieldKey + '_history'] = new List<string>([...(history || []), oldUrl]);
+        this.dataDoc[this.fieldKey] = weburl;
+        return true;
+    };
     onWebUrlValueKeyDown = (e: React.KeyboardEvent) => {
-        e.key === 'Enter' && this.submitURL(this._keyInput.current!.value);
+        if (e.key === 'Enter') this.setData(this._keyInput.current!.value);
         e.stopPropagation();
     };
 
-    @computed get urlEditor() {
-        return (
-            <div className="collectionMenu-webUrlButtons" onDrop={this.onWebUrlDrop} onDragOver={e => e.preventDefault()}>
-                <input
-                    className="collectionMenu-urlInput"
-                    key={this._url}
-                    placeholder="ENTER URL"
-                    defaultValue={this._url}
-                    onDrop={this.onWebUrlDrop}
-                    onDragOver={e => e.preventDefault()}
-                    onKeyDown={this.onWebUrlValueKeyDown}
-                    onClick={e => {
-                        this._keyInput.current!.select();
-                        e.stopPropagation();
-                    }}
-                    ref={this._keyInput}
-                />
-                <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', maxWidth: '250px' }}>
-                    <button className="submitUrl" onClick={() => this.submitURL(this._keyInput.current!.value)} onDragOver={e => e.stopPropagation()} onDrop={this.onWebUrlDrop}>
-                        GO
-                    </button>
-                    <button className="submitUrl" onClick={() => this.back}>
-                        {' '}
-                        <FontAwesomeIcon icon="caret-left" size="lg" />{' '}
-                    </button>
-                    <button className="submitUrl" onClick={() => this.forward}>
-                        {' '}
-                        <FontAwesomeIcon icon="caret-right" size="lg" />{' '}
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
     specificContextMenu = (e: React.MouseEvent | PointerEvent): void => {
         const cm = ContextMenu.Instance;
         const funcs: ContextMenuProps[] = [];
         if (!cm.findByDescription('Options...')) {
-            !Doc.noviceMode && funcs.push({ description: (this.layoutDoc.useCors ? "Don't Use" : 'Use') + ' Cors', event: () => (this.layoutDoc.useCors = !this.layoutDoc.useCors), icon: 'snowflake' });
+            !Doc.noviceMode &&
+                funcs.push({ description: (this.layoutDoc[this.fieldKey + '_useCors'] ? "Don't Use" : 'Use') + ' Cors', event: () => (this.layoutDoc[this.fieldKey + '_useCors'] = !this.layoutDoc[this.fieldKey + '_useCors']), icon: 'snowflake' });
             funcs.push({
                 description: (this.layoutDoc.allowScripts ? 'Prevent' : 'Allow') + ' Scripts',
                 event: () => {
@@ -696,16 +675,17 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 icon: 'snowflake',
             });
             funcs.push({
-                description: (!this.layoutDoc.forceReflow ? 'Force' : 'Prevent') + ' Reflow',
+                description: (!this.layoutDoc.layout_forceReflow ? 'Force' : 'Prevent') + ' Reflow',
                 event: () => {
-                    const nw = !this.layoutDoc.forceReflow ? undefined : Doc.NativeWidth(this.layoutDoc) - this.sidebarWidth() / (this.props.NativeDimScaling?.() || 1);
-                    this.layoutDoc.forceReflow = !nw;
+                    const nw = !this.layoutDoc.layout_forceReflow ? undefined : Doc.NativeWidth(this.layoutDoc) - this.sidebarWidth() / (this.props.NativeDimScaling?.() || 1);
+                    this.layoutDoc.layout_forceReflow = !nw;
                     if (nw) {
-                        Doc.SetInPlace(this.layoutDoc, this.fieldKey + '-nativeWidth', nw, true);
+                        Doc.SetInPlace(this.layoutDoc, this.fieldKey + '_nativeWidth', nw, true);
                     }
                 },
                 icon: 'snowflake',
             });
+            funcs.push({ description: 'Create Thumbnail', event: () => this.updateThumb(), icon: 'portrait' });
             cm.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' });
         }
     };
@@ -746,58 +726,43 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
 
     @computed get urlContent() {
-        if (this._hackHide || (this.webThumb && !this._webPageHasBeenRendered && LightboxView.LightboxDoc !== this.rootDoc)) return null;
-        this.props.thumbShown?.();
+        setTimeout(
+            action(() => {
+                if (this._initialScroll === undefined && !this._webPageHasBeenRendered) {
+                    this.setScrollPos(NumCast(this.layoutDoc.thumbScrollTop, NumCast(this.layoutDoc.layout_scrollTop)));
+                }
+                this._webPageHasBeenRendered = true;
+            })
+        );
         const field = this.rootDoc[this.props.fieldKey];
-        let view;
         if (field instanceof HtmlField) {
-            view = <span className="webBox-htmlSpan" contentEditable onPointerDown={e => e.stopPropagation()} dangerouslySetInnerHTML={{ __html: field.html }} />;
-        } else if (field instanceof WebField) {
-            const url = this.layoutDoc.useCors ? Utils.CorsProxy(this._webUrl) : this._webUrl;
-            view = (
+            return <span className="webBox-htmlSpan" contentEditable onPointerDown={e => e.stopPropagation()} dangerouslySetInnerHTML={{ __html: field.html }} />;
+        }
+        if (field instanceof WebField) {
+            const url = this.layoutDoc[this.fieldKey + '_useCors'] ? Utils.CorsProxy(this._webUrl) : this._webUrl;
+            return (
                 <iframe
                     className="webBox-iframe"
-                    enable-annotation={'true'}
-                    style={{ pointerEvents: this._scrollTimer ? 'none' : undefined }}
                     ref={action((r: HTMLIFrameElement | null) => (this._iframe = r))}
                     src={url}
                     onLoad={this.iframeLoaded}
+                    scrolling="no" // ugh.. on windows, I get an inner scroll bar for the iframe's body even though the scrollHeight should be set to the full height of the document.
                     // the 'allow-top-navigation' and 'allow-top-navigation-by-user-activation' attributes are left out to prevent iframes from redirecting the top-level Dash page
                     // sandbox={"allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts"} />;
                     sandbox={`${this.layoutDoc.allowScripts ? 'allow-scripts' : ''} allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin`}
                 />
             );
-        } else {
-            view = (
-                <iframe
-                    className="webBox-iframe"
-                    enable-annotation={'true'}
-                    style={{ pointerEvents: this._scrollTimer ? 'none' : undefined }} // if we allow pointer events when scrolling is on, then reversing direction does not work smoothly
-                    ref={action((r: HTMLIFrameElement | null) => (this._iframe = r))}
-                    src={'https://crossorigin.me/https://cs.brown.edu'}
-                />
-            );
         }
-        setTimeout(
-            action(() => {
-                this._scrollHeight = Math.max(this._scrollHeight, this._iframe && this._iframe.contentDocument && this._iframe.contentDocument.body ? this._iframe.contentDocument.body.scrollHeight : 0);
-                if (this._initialScroll === undefined && !this._webPageHasBeenRendered) {
-                    this.setScrollPos(NumCast(this.layoutDoc.thumbScrollTop, NumCast(this.layoutDoc.scrollTop)));
-                }
-                this._webPageHasBeenRendered = true;
-            })
-        );
-        return view;
+        return <iframe className="webBox-iframe" ref={action((r: HTMLIFrameElement | null) => (this._iframe = r))} src={'https://crossorigin.me/https://cs.brown.edu'} />;
     }
 
     addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => {
-        console.log(annotationKey);
-        (doc instanceof Doc ? [doc] : doc).forEach(doc => (doc.webUrl = this._url));
+        (doc instanceof Doc ? [doc] : doc).forEach(doc => (doc.presData = new WebField(this._url)));
         return this.addDocument(doc, annotationKey);
     };
 
     sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
-        if (!this.layoutDoc._showSidebar) this.toggleSidebar();
+        if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
         return this.addDocumentWrapper(doc, sidebarKey);
     };
     @observable _draggingSidebar = false;
@@ -813,15 +778,15 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     .ScreenToLocalTransform()
                     .scale(this.props.NativeDimScaling?.() || 1)
                     .transformDirection(delta[0], delta[1]);
-                const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth']);
-                const nativeHeight = NumCast(this.layoutDoc[this.fieldKey + '-nativeHeight']);
+                const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']);
+                const nativeHeight = NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight']);
                 const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth);
                 const ratio = (curNativeWidth + ((onButton ? 1 : -1) * localDelta[0]) / (this.props.NativeDimScaling?.() || 1)) / nativeWidth;
                 if (ratio >= 1) {
                     this.layoutDoc.nativeWidth = nativeWidth * ratio;
                     this.layoutDoc.nativeHeight = nativeHeight * (1 + ratio);
-                    onButton && (this.layoutDoc._width = this.layoutDoc[WidthSym]() + localDelta[0]);
-                    this.layoutDoc._showSidebar = nativeWidth !== this.layoutDoc._nativeWidth;
+                    onButton && (this.layoutDoc._width = this.layoutDoc[Width]() + localDelta[0]);
+                    this.layoutDoc._layout_showSidebar = nativeWidth !== this.layoutDoc._nativeWidth;
                 }
                 return false;
             }),
@@ -843,7 +808,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 title="Toggle Sidebar"
                 style={{
                     display: !this.props.isContentActive() ? 'none' : undefined,
-                    top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
+                    top: StrCast(this.layoutDoc._layout_showTitle) === 'title' ? 20 : 5,
                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
                 }}
                 onPointerDown={e => this.sidebarBtnDown(e, true)}>
@@ -854,41 +819,57 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @observable _previewNativeWidth: Opt<number> = undefined;
     @observable _previewWidth: Opt<number> = undefined;
     toggleSidebar = action((preview: boolean = false) => {
-        var nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth']);
+        var nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']);
         if (!nativeWidth) {
-            const defaultNativeWidth = this.rootDoc[this.fieldKey] instanceof WebField ? 850 : this.Document[WidthSym]();
+            const defaultNativeWidth = this.rootDoc[this.fieldKey] instanceof WebField ? 850 : this.Document[Width]();
             Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(this.dataDoc) || defaultNativeWidth);
-            Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || (this.Document[HeightSym]() / this.Document[WidthSym]()) * defaultNativeWidth);
-            nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth']);
+            Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || (this.Document[Height]() / this.Document[Width]()) * defaultNativeWidth);
+            nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']);
         }
         const sideratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? WebBox.openSidebarWidth : 0) + nativeWidth) / nativeWidth;
         const pdfratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? WebBox.openSidebarWidth + WebBox.sidebarResizerWidth : 0) + nativeWidth) / nativeWidth;
         const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth);
         if (preview) {
             this._previewNativeWidth = nativeWidth * sideratio;
-            this._previewWidth = (this.layoutDoc[WidthSym]() * nativeWidth * sideratio) / curNativeWidth;
+            this._previewWidth = (this.layoutDoc[Width]() * nativeWidth * sideratio) / curNativeWidth;
             this._showSidebar = true;
         } else {
-            this.layoutDoc._showSidebar = !this.layoutDoc._showSidebar;
-            this.layoutDoc._width = (this.layoutDoc[WidthSym]() * nativeWidth * pdfratio) / curNativeWidth;
-            if (!this.layoutDoc._showSidebar && !(this.dataDoc[this.fieldKey] instanceof WebField)) {
-                this.layoutDoc.nativeWidth = this.dataDoc[this.fieldKey + '-nativeWidth'] = undefined;
+            this.layoutDoc._layout_showSidebar = !this.layoutDoc._layout_showSidebar;
+            this.layoutDoc._width = (this.layoutDoc[Width]() * nativeWidth * pdfratio) / curNativeWidth;
+            if (!this.layoutDoc._layout_showSidebar && !(this.dataDoc[this.fieldKey] instanceof WebField)) {
+                this.layoutDoc.nativeWidth = this.dataDoc[this.fieldKey + '_nativeWidth'] = undefined;
             } else {
                 this.layoutDoc.nativeWidth = nativeWidth * pdfratio;
             }
         }
     });
+    @action
+    onZoomWheel = (e: React.WheelEvent) => {
+        if (this.props.isContentActive(true)) {
+            e.stopPropagation();
+        }
+    };
     sidebarWidth = () => {
         if (!this.SidebarShown) return 0;
         if (this._previewWidth) return WebBox.sidebarResizerWidth + WebBox.openSidebarWidth; // return default sidebar if previewing (as in viewing a link target)
         const nativeDiff = NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc);
         return WebBox.sidebarResizerWidth + nativeDiff * (this.props.NativeDimScaling?.() || 1);
     };
+    _innerCollectionView: CollectionFreeFormView | undefined;
+    zoomScaling = () => this._innerCollectionView?.zoomScaling() ?? 1;
+    setInnerContent = (component: DocComponentView) => (this._innerCollectionView = component as CollectionFreeFormView);
+
     @computed get content() {
         const interactive = this.props.isContentActive() && this.props.pointerEvents?.() !== 'none' && Doc.ActiveTool === InkTool.None;
         return (
-            <div className={'webBox-cont' + (interactive ? '-interactive' : '')} onKeyDown={e => e.stopPropagation()} style={{ width: !this.layoutDoc.forceReflow ? NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth']) || `100%` : '100%' }}>
-                {this.urlContent}
+            <div
+                className={'webBox-cont' + (interactive ? '-interactive' : '')}
+                onKeyDown={e => e.stopPropagation()}
+                style={{
+                    width: !this.layoutDoc.layout_forceReflow ? NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']) || `100%` : '100%',
+                    transform: `scale(${this.zoomScaling()})  translate(${-NumCast(this.layoutDoc.freeform_panX)}px, ${-NumCast(this.layoutDoc.freeform_panY)}px)`,
+                }}>
+                {this._hackHide || (this.webThumb && !this._webPageHasBeenRendered && LightboxView.LightboxDoc !== this.rootDoc) ? null : this.urlContent}
             </div>
         );
     }
@@ -896,7 +877,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @computed get annotationLayer() {
         TraceMobx();
         return (
-            <div className="webBox-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}>
+            <div
+                className="webBox-annotationLayer"
+                style={{
+                    transform: `scale(${this.zoomScaling()})  translate(${-NumCast(this.layoutDoc.freeform_panX)}px, ${-NumCast(this.layoutDoc.freeform_panY)}px)`,
+                    height: Doc.NativeHeight(this.Document) || undefined,
+                }}
+                ref={this._annotationLayer}>
                 {this.inlineTextAnnotations
                     .sort((a, b) => NumCast(a.y) - NumCast(b.y))
                     .map(anno => (
@@ -906,19 +893,21 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     }
     @computed get SidebarShown() {
-        return this._showSidebar || this.layoutDoc._showSidebar ? true : false;
+        return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false;
     }
 
     @computed get webpage() {
         const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
         const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this.props.pointerEvents?.() as any);
         const scale = previewScale * (this.props.NativeDimScaling?.() || 1);
-        const renderAnnotations = (docFilters: () => string[]) => (
+        const renderAnnotations = (childFilters: () => string[]) => (
             <CollectionFreeFormView
                 {...this.props}
-                setContentView={emptyFunction}
+                setContentView={this.setInnerContent}
                 NativeWidth={returnZero}
                 NativeHeight={returnZero}
+                originTopLeft={false}
+                isAnnotationOverlayScrollable={true}
                 renderDepth={this.props.renderDepth + 1}
                 isAnnotationOverlay={true}
                 fieldKey={this.annotationKey}
@@ -929,8 +918,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 ScreenToLocalTransform={this.scrollXf}
                 NativeDimScaling={returnOne}
                 focus={this.focus}
-                dropAction={'alias'}
-                docFilters={docFilters}
+                dropAction="embed"
+                childFilters={childFilters}
                 select={emptyFunction}
                 isAnyChildContentActive={returnFalse}
                 bringToFront={emptyFunction}
@@ -938,23 +927,24 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                 removeDocument={this.removeDocument}
                 moveDocument={this.moveDocument}
-                addDocument={this.addDocument}
+                addDocument={this.addDocumentWrapper}
                 childPointerEvents={this.props.isContentActive() ? 'all' : undefined}
                 pointerEvents={this.annotationPointerEvents}
             />
         );
         return (
             <div
-                className={'webBox-outerContent'}
+                className="webBox-outerContent"
                 ref={this._outerRef}
                 style={{
                     height: `${100 / scale}%`,
                     pointerEvents,
                 }}
-                onWheel={StopEvent} // block wheel events from propagating since they're handled by the iframe
+                // when active, block wheel events from propagating since they're handled by the iframe
+                onWheel={this.onZoomWheel}
                 onScroll={e => this.setDashScrollTop(this._outerRef.current?.scrollTop || 0)}
                 onPointerDown={this.onMarqueeDown}>
-                <div className={'webBox-innerContent'} style={{ height: this._webPageHasBeenRendered && this._scrollHeight ? this.scrollHeight : '100%', pointerEvents }}>
+                <div className="webBox-innerContent" style={{ height: (this._webPageHasBeenRendered && this._scrollHeight) || '100%', pointerEvents }}>
                     {this.content}
                     {<div style={{ display: DragManager.docsBeingDragged.length ? 'none' : undefined, mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>}
                     {renderAnnotations(this.opaqueFilter)}
@@ -1003,20 +993,19 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean) => void) => (this._setPreviewCursor = func);
     panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth() + WebBox.sidebarResizerWidth;
     panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
-    scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop));
+    scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
-    transparentFilter = () => [...this.props.docFilters(), Utils.IsTransparentFilter()];
-    opaqueFilter = () => [...this.props.docFilters(), Utils.noDragsDocFilter, ...(DragManager.docsBeingDragged.length ? [] : [Utils.IsOpaqueFilter()])];
+    transparentFilter = () => [...this.props.childFilters(), Utils.IsTransparentFilter()];
+    opaqueFilter = () => [...this.props.childFilters(), Utils.noDragsDocFilter, ...(DragManager.docsBeingDragged.length ? [] : [Utils.IsOpaqueFilter()])];
     childStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
         if (doc instanceof Doc && property === StyleProp.PointerEvents) {
-            if (doc.textInlineAnnotations) return 'none';
+            if (this.inlineTextAnnotations.includes(doc)) return 'none';
         }
         return this.props.styleProvider?.(doc, props, property);
     };
     pointerEvents = () => (!this._draggingSidebar && this.props.isContentActive() && this.props.pointerEvents?.() !== 'none' && !MarqueeOptionsMenu.Instance?.isShown() ? 'all' : SnappingManager.GetIsDragging() ? undefined : 'none');
     annotationPointerEvents = () => (this._isAnnotating || SnappingManager.GetIsDragging() || Doc.ActiveTool !== InkTool.None ? 'all' : 'none');
     render() {
-        setTimeout(() => DocListCast(this.rootDoc[this.annotationKey]).forEach(doc => (doc.webUrl = this._url)));
         const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
         const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this.props.pointerEvents?.() as any);
         const scale = previewScale * (this.props.NativeDimScaling?.() || 1);
@@ -1070,7 +1059,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         ref={this._sidebarRef}
                         {...this.props}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                        fieldKey={this.fieldKey + '-' + this._urlHash}
+                        fieldKey={this.fieldKey + '_' + this._urlHash}
                         rootDoc={this.rootDoc}
                         layoutDoc={this.layoutDoc}
                         dataDoc={this.dataDoc}
diff --git a/src/client/views/nodes/button/FontIconBadge.tsx b/src/client/views/nodes/button/FontIconBadge.tsx
index 3b5aac221..b50588ce2 100644
--- a/src/client/views/nodes/button/FontIconBadge.tsx
+++ b/src/client/views/nodes/button/FontIconBadge.tsx
@@ -1,10 +1,6 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { AclPrivate, Doc, DocListCast } from "../../../../fields/Doc";
-import { GetEffectiveAcl } from "../../../../fields/util";
-import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../../Utils";
-import { DragManager } from "../../../util/DragManager";
-import "./FontIconBadge.scss";
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import './FontIconBadge.scss';
 
 interface FontIconBadgeProps {
     value: string | undefined;
@@ -25,13 +21,17 @@ export class FontIconBadge extends React.Component<FontIconBadgeProps> {
     // }
 
     render() {
-        if (this.props.value === undefined) return (null);
-        return <div className="fontIconBadge-container" ref={this._notifsRef}>
-            <div className="fontIconBadge" style={{ "display": "initial" }}
-               // onPointerDown={this.onPointerDown} 
-               >
-                {this.props.value}
+        if (this.props.value === undefined) return null;
+        return (
+            <div className="fontIconBadge-container" ref={this._notifsRef}>
+                <div
+                    className="fontIconBadge"
+                    style={{ display: 'initial' }}
+                    // onPointerDown={this.onPointerDown}
+                >
+                    {this.props.value}
+                </div>
             </div>
-        </div>;
+        );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 26515da30..5bba51ec8 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -5,7 +5,8 @@ import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ColorState, SketchPicker } from 'react-color';
-import { Doc, HeightSym, StrListCast, WidthSym } from '../../../../fields/Doc';
+import { Doc, StrListCast } from '../../../../fields/Doc';
+import { Height, Width } from '../../../../fields/DocSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { ScriptField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
@@ -16,7 +17,7 @@ import { CollectionViewType, DocumentType } from '../../../documents/DocumentTyp
 import { LinkManager } from '../../../util/LinkManager';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
 import { SelectionManager } from '../../../util/SelectionManager';
-import { undoBatch, UndoManager } from '../../../util/UndoManager';
+import { undoable, undoBatch, UndoManager } from '../../../util/UndoManager';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
 import { ContextMenu } from '../../ContextMenu';
 import { DocComponent } from '../../DocComponent';
@@ -44,16 +45,12 @@ export enum ButtonType {
     ToggleButton = 'tglBtn',
     ColorButton = 'colorBtn',
     ToolButton = 'toolBtn',
-    NumberButton = 'numBtn',
+    NumberSliderButton = 'numSliderBtn',
+    NumberDropdownButton = 'numDropdownBtn',
+    NumberInlineButton = 'numInlineBtn',
     EditableText = 'editableText',
 }
 
-export enum NumButtonType {
-    Slider = 'slider',
-    DropdownOptions = 'list',
-    Inline = 'inline',
-}
-
 export interface ButtonProps extends FieldViewProps {
     type?: ButtonType;
 }
@@ -98,7 +95,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
 
     // Determining UI Specs
     @computed get label() {
-        return StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
+        return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
     }
     Icon = (color: string) => {
         const icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
@@ -132,112 +129,116 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     /**
      * Number button
      */
-    @computed get numberButton() {
-        const numBtnType: string = StrCast(this.rootDoc.numBtnType);
-        const numScript = ScriptCast(this.rootDoc.script);
-        const setValue = (value: number) => UndoManager.RunInBatch(() => numScript?.script.run({ self: this.rootDoc, value, _readOnly_: false }), 'set num value');
-
+    @computed get numberSliderButton() {
+        const numScript = (value?: number) => ScriptCast(this.rootDoc.script).script.run({ self: this.rootDoc, value, _readOnly_: value === undefined });
         // Script for checking the outcome of the toggle
-        const checkResult = Number(numScript?.script.run({ self: this.rootDoc, value: 0, _readOnly_: true }).result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3));
-
+        const checkResult = Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3));
         const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
 
-        if (numBtnType === NumButtonType.Slider) {
-            const dropdown = (
-                <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()}>
-                    <input
-                        type="range"
-                        step="1"
-                        min={NumCast(this.rootDoc.numBtnMin, 0)}
-                        max={NumCast(this.rootDoc.numBtnMax, 100)}
-                        value={checkResult}
-                        className="menu-slider"
-                        onPointerDown={() => (this._batch = UndoManager.StartBatch('presDuration'))}
-                        onPointerUp={() => this._batch?.end()}
-                        onChange={e => {
-                            e.stopPropagation();
-                            setValue(Number(e.target.value));
-                        }}
-                    />
+        const dropdown = (
+            <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()}>
+                <input
+                    className="menu-slider"
+                    type="range"
+                    step="1"
+                    min={NumCast(this.rootDoc.numBtnMin, 0)}
+                    max={NumCast(this.rootDoc.numBtnMax, 100)}
+                    //readOnly={true}
+                    value={checkResult}
+                    onPointerDown={() => (this._batch = UndoManager.StartBatch('num slider changing'))}
+                    onPointerUp={() => this._batch?.end()}
+                    onChange={undoable(e => {
+                        e.stopPropagation();
+                        numScript(Number(e.target.value));
+                    }, 'set num value')}
+                />
+            </div>
+        );
+        return (
+            <div
+                className="menuButton numBtn slider"
+                onPointerDown={e => e.stopPropagation()}
+                onClick={action(() => {
+                    this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
+                    this.noTooltip = this.rootDoc.dropDownOpen;
+                    Doc.UnBrushAllDocs();
+                })}>
+                {checkResult}
+                {label}
+                {this.rootDoc.dropDownOpen ? dropdown : null}
+            </div>
+        );
+    }
+    /**
+     * Number button
+     */
+    @computed get numberDropdownButton() {
+        const numScript = (value?: number) => ScriptCast(this.rootDoc.script)?.script.run({ self: this.rootDoc, value, _readOnly_: value === undefined });
+
+        const checkResult = Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3));
+
+        const items: number[] = [];
+        for (let i = 0; i < 100; i += 2) items.push(i);
+
+        const list = items.map(value => {
+            return (
+                <div
+                    className="list-item"
+                    key={`${value}`}
+                    style={{
+                        backgroundColor: value.toString() === checkResult ? Colors.LIGHT_BLUE : undefined,
+                    }}
+                    onClick={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}>
+                    {value}
                 </div>
             );
-            return (
+        });
+        return (
+            <div className="menuButton numBtn list">
+                <div className="button" onClick={undoable(e => numScript(Number(checkResult) - 1), `${this.rootDoc.title} decrement value`)}>
+                    <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon="minus" />
+                </div>
                 <div
-                    className={`menuButton ${this.type} ${numBtnType}`}
-                    onPointerDown={e => e.stopPropagation()}
+                    className={`button ${'number'}`}
+                    onPointerDown={e => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }}
                     onClick={action(() => {
                         this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
                         this.noTooltip = this.rootDoc.dropDownOpen;
                         Doc.UnBrushAllDocs();
                     })}>
-                    {checkResult}
-                    {label}
-                    {this.rootDoc.dropDownOpen ? dropdown : null}
+                    <input style={{ width: 30 }} className="button-input" type="number" value={checkResult} readOnly={true} onChange={undoable(e => numScript(Number(e.target.value)), `${this.rootDoc.title} button set value`)} />
+                </div>
+                <div className={`button`} onClick={undoable(e => numScript(Number(checkResult) + 1), `${this.rootDoc.title} increment value`)}>
+                    <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'plus'} />
                 </div>
-            );
-        } else if (numBtnType === NumButtonType.DropdownOptions) {
-            const items: number[] = [];
-            for (let i = 0; i < 100; i++) {
-                if (i % 2 === 0) {
-                    items.push(i);
-                }
-            }
-            const list = items.map(value => {
-                return (
-                    <div
-                        className="list-item"
-                        key={`${value}`}
-                        style={{
-                            backgroundColor: value.toString() === checkResult ? Colors.LIGHT_BLUE : undefined,
-                        }}
-                        onClick={() => setValue(value)}>
-                        {value}
-                    </div>
-                );
-            });
-            return (
-                <div className={`menuButton ${this.type} ${numBtnType}`}>
-                    <div className={`button`} onClick={action(e => setValue(Number(checkResult) - 1))}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'minus'} />
-                    </div>
-                    <div
-                        className={`button ${'number'}`}
-                        onPointerDown={e => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                        }}
-                        onClick={action(() => {
-                            this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
-                            this.noTooltip = this.rootDoc.dropDownOpen;
-                            Doc.UnBrushAllDocs();
-                        })}>
-                        <input style={{ width: 30 }} className="button-input" type="number" value={checkResult} onChange={undoBatch(action(e => setValue(Number(e.target.value))))} />
-                    </div>
-                    <div className={`button`} onClick={action(e => setValue(Number(checkResult) + 1))}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'plus'} />
-                    </div>
 
-                    {this.rootDoc.dropDownOpen ? (
-                        <div>
-                            <div className="menuButton-dropdownList" style={{ left: '25%' }}>
-                                {list}
-                            </div>
-                            <div
-                                className="dropbox-background"
-                                onClick={action(e => {
-                                    e.stopPropagation();
-                                    this.rootDoc.dropDownOpen = false;
-                                    this.noTooltip = false;
-                                    Doc.UnBrushAllDocs();
-                                })}
-                            />
+                {this.rootDoc.dropDownOpen ? (
+                    <div>
+                        <div className="menuButton-dropdownList" style={{ left: '25%' }}>
+                            {list}
                         </div>
-                    ) : null}
-                </div>
-            );
-        } else {
-            return <div />;
-        }
+                        <div
+                            className="dropbox-background"
+                            onClick={action(e => {
+                                e.stopPropagation();
+                                this.rootDoc.dropDownOpen = false;
+                                this.noTooltip = false;
+                                Doc.UnBrushAllDocs();
+                            })}
+                        />
+                    </div>
+                ) : null}
+            </div>
+        );
+    }
+    /**
+     * Number button
+     */
+    @computed get numberInlineButton() {
+        return <div />;
     }
 
     /**
@@ -290,7 +291,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 const selected = SelectionManager.Docs().lastElement();
                 if (selected) {
                     if (StrCast(selected.type) === DocumentType.COL) {
-                        text = StrCast(selected._viewType);
+                        text = StrCast(selected._type_collection);
                     } else {
                         dropdown = false;
                         text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
@@ -313,12 +314,12 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             .map(value => (
                 <div
                     className="list-item"
-                    key={`${value}`}
+                    key={value}
                     style={{
                         fontFamily: script.script.originalScript.startsWith('{ return setFont') ? value : undefined,
                         backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined,
                     }}
-                    onClick={undoBatch(() => script.script.run({ self: this.rootDoc, value }))}>
+                    onClick={undoable(() => script.script.run({ self: this.rootDoc, value }), value)}>
                     {value[0].toUpperCase() + value.slice(1)}
                 </div>
             ));
@@ -505,7 +506,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             <div className="menuButton editableText">
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} />
                 <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}>
-                    <EditableView GetValue={() => script?.script.run({ value: '', _readOnly_: true }).result} SetValue={setValue} contents={checkResult} />
+                    <EditableView GetValue={() => script?.script.run({ value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
                 </div>
             </div>
         );
@@ -528,7 +529,9 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             case ButtonType.EditableText: return this.editableText;
             case ButtonType.DropdownList: button = this.dropdownListButton; break;
             case ButtonType.ColorButton: button = this.colorButton; break;
-            case ButtonType.NumberButton: button = this.numberButton; break;
+            case ButtonType.NumberDropdownButton: button = this.numberDropdownButton; break;
+            case ButtonType.NumberInlineButton: button = this.numberInlineButton; break;
+            case ButtonType.NumberSliderButton: button = this.numberSliderButton; break;
             case ButtonType.DropdownButton: button = this.dropdownButton; break;
             case ButtonType.ToggleButton: button = this.toggleButton; break;
             case ButtonType.TextButton: 
@@ -568,7 +571,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setView(view: string) {
     const selected = SelectionManager.Docs().lastElement();
-    selected ? (selected._viewType = view) : console.log('[FontIconBox.tsx] changeView failed');
+    selected ? (selected._type_collection = view) : console.log('[FontIconBox.tsx] changeView failed');
 });
 
 // toggle: Set overlay status of selected document
@@ -613,7 +616,7 @@ ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boole
     }
     Doc.SharingDoc().userColor = undefined;
     Doc.GetProto(Doc.SharingDoc()).userColor = color;
-    Doc.UserDoc().showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().showTitle, 'creationDate');
+    Doc.UserDoc().layout_showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().layout_showTitle, 'author_date');
 });
 
 // toggle: Set overlay status of selected document
@@ -626,41 +629,42 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
-ScriptingGlobals.add(function showFreeform(attr: 'grid' | 'snapline' | 'clusters' | 'arrange' | 'viewAll', checkResult?: boolean) {
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll', checkResult?: boolean) {
     const selected = SelectionManager.Docs().lastElement();
     // prettier-ignore
-    const map: Map<'grid' | 'snapline' | 'clusters' | 'arrange'| 'viewAll', { undo: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc) => void;}> = new Map([
+    const map: Map<'flashcards' | 'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc) => void;}> = new Map([
         ['grid', {
-            undo: false,
-            checkResult: (doc:Doc) => doc._backgroundGridShow,
-            setDoc: (doc:Doc) => doc._backgroundGridShow = !doc._backgroundGridShow,
+            checkResult: (doc:Doc) => doc._freeform_backgroundGrid,
+            setDoc: (doc:Doc) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
         }],
-        ['snapline', {
-            undo: false,
-            checkResult: (doc:Doc) => doc.showSnapLines,
-            setDoc: (doc:Doc) => doc._showSnapLines = !doc._showSnapLines,
+        ['snaplines', {
+            checkResult: (doc:Doc) => doc._freeform_snapLines,
+            setDoc: (doc:Doc) => doc._freeform_snapLines = !doc._freeform_snapLines,
         }],
         ['viewAll', {
-            undo: false,
-            checkResult: (doc:Doc) => doc._fitContentsToBox,
-            setDoc: (doc:Doc) => doc._fitContentsToBox = !doc._fitContentsToBox,
+            checkResult: (doc:Doc) => doc._freeform_fitContentsToBox,
+            setDoc: (doc:Doc) => doc._freeform_fitContentsToBox = !doc._freeform_fitContentsToBox,
         }],
         ['clusters', {
-            undo: false,
-            checkResult: (doc:Doc) => doc._useClusters,
-            setDoc: (doc:Doc) => doc._useClusters = !doc._useClusters,
+            waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire
+            checkResult: (doc:Doc) => doc._freeform_useClusters,
+            setDoc: (doc:Doc) => doc._freeform_useClusters = !doc._freeform_useClusters,
         }],
         ['arrange', {
-            undo: true,
+            waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire
             checkResult: (doc:Doc) => doc._autoArrange,
             setDoc: (doc:Doc) => doc._autoArrange = !doc._autoArrange,
         }],
-    ]);
+        ['flashcards', {
+            checkResult: (doc:Doc) => Doc.UserDoc().defaultToFlashcards,
+            setDoc: (doc:Doc) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards,
+        }],
+   ]);
 
     if (checkResult) {
         return map.get(attr)?.checkResult(selected) ? Colors.MEDIUM_BLUE : 'transparent';
     }
-    const batch = map.get(attr)?.undo ? UndoManager.StartBatch('set feature') : { end: () => {} };
+    const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} };
     SelectionManager.Docs().map(dv => map.get(attr)?.setDoc(dv));
     setTimeout(() => batch.end(), 100);
 });
@@ -754,8 +758,8 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
                 action(d => {
                     const x = NumCast(d.x);
                     const y = NumCast(d.y);
-                    const width = d[WidthSym]();
-                    const height = d[HeightSym]();
+                    const width = d[Width]();
+                    const height = d[Height]();
                     bounds.push({ x, y, width, height });
                 })
             );
@@ -792,8 +796,8 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
             // TODO: nda - this is the code to actually get a new grouped collection
             const newCollection = marqViewRef?.getCollection(selected, undefined, true);
             if (newCollection) {
-                newCollection.height = newCollection[HeightSym]();
-                newCollection.width = newCollection[WidthSym]();
+                newCollection.height = newCollection[Height]();
+                newCollection.width = newCollection[Width]();
             }
 
             // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
@@ -850,8 +854,8 @@ ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | '
     // prettier-ignore
     const map: Map<'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([
         ['inkMask', {
-            checkResult: () => ((selected?.type === DocumentType.INK ? BoolCast(selected.isInkMask) : ActiveIsInkMask()) ? Colors.MEDIUM_BLUE : 'transparent'),
-            setInk: (doc: Doc) => (doc.isInkMask = !doc.isInkMask),
+            checkResult: () => ((selected?.type === DocumentType.INK ? BoolCast(selected.stroke_isInkMask) : ActiveIsInkMask()) ? Colors.MEDIUM_BLUE : 'transparent'),
+            setInk: (doc: Doc) => (doc.stroke_isInkMask = !doc.stroke_isInkMask),
             setMode: () => selected?.type !== DocumentType.INK && SetActiveIsInkMask(!ActiveIsInkMask()),
         }],
         ['fillColor', {
@@ -860,8 +864,8 @@ ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | '
             setMode: () => SetActiveFillColor(StrCast(value)),
         }],
         [ 'strokeWidth', {
-            checkResult: () => (selected?.type === DocumentType.INK ? NumCast(selected.strokeWidth) : ActiveInkWidth()),
-            setInk: (doc: Doc) => (doc.strokeWidth = NumCast(value)),
+            checkResult: () => (selected?.type === DocumentType.INK ? NumCast(selected.stroke_width) : ActiveInkWidth()),
+            setInk: (doc: Doc) => (doc.stroke_width = NumCast(value)),
             setMode: () => SetActiveInkWidth(value.toString()),
         }],
         ['strokeColor', {
@@ -889,7 +893,7 @@ ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) {
         if (checkResult) {
             return StrCast(selected.rootDoc.data, Cast(selected.rootDoc.data, WebField, null)?.url?.href);
         }
-        (selected.ComponentView as WebBox).submitURL(url);
+        selected.ComponentView?.setData?.(url);
         //selected.rootDoc.data = new WebField(url);
     }
 });
@@ -914,23 +918,32 @@ ScriptingGlobals.add(function webBack(checkResult?: boolean) {
 ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) {
     const selected = SelectionManager.Docs().lastElement();
     if (checkResult && selected) {
-        const result: boolean = NumCast(selected.schemaPreviewWidth) > 0;
+        const result: boolean = NumCast(selected.schema_previewWidth) > 0;
         if (result) return Colors.MEDIUM_BLUE;
         else return 'transparent';
     } else if (selected) {
-        if (NumCast(selected.schemaPreviewWidth) > 0) {
-            selected.schemaPreviewWidth = 0;
+        if (NumCast(selected.schema_previewWidth) > 0) {
+            selected.schema_previewWidth = 0;
         } else {
-            selected.schemaPreviewWidth = 200;
+            selected.schema_previewWidth = 200;
         }
     }
 });
+ScriptingGlobals.add(function toggleSingleLineSchema(checkResult?: boolean) {
+    const selected = SelectionManager.Docs().lastElement();
+    if (checkResult && selected) {
+        return NumCast(selected._schema_singleLine) > 0 ? Colors.MEDIUM_BLUE : 'transparent';
+    }
+    if (selected) {
+        selected._schema_singleLine = !selected._schema_singleLine;
+    }
+});
 
 /** STACK
  *      groupBy
  */
 ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) {
-    SelectionManager.Docs().map(doc => (doc._fontFamily = key));
+    SelectionManager.Docs().map(doc => (doc._text_fontFamily = key));
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
     if (checkResult) {
         return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index c05a30d1a..48f4c2afd 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -2,8 +2,9 @@ import { action, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { NodeSelection } from 'prosemirror-state';
 import * as ReactDOM from 'react-dom/client';
-import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc';
-import { Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { Doc } from '../../../../fields/Doc';
+import { Height, Width } from '../../../../fields/DocSymbols';
+import { NumCast, StrCast } from '../../../../fields/Types';
 import { emptyFunction, returnFalse, Utils } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
 import { Docs, DocUtils } from '../../../documents/Documents';
@@ -41,18 +42,33 @@ export class DashDocView {
 
         this.root = ReactDOM.createRoot(this.dom);
         this.root.render(
-            <DashDocViewInternal docId={node.attrs.docId} alias={node.attrs.alias} width={node.attrs.width} height={node.attrs.height} hidden={node.attrs.hidden} fieldKey={node.attrs.fieldKey} tbox={tbox} view={view} node={node} getPos={getPos} />
+            <DashDocViewInternal
+                docId={node.attrs.docId}
+                embedding={node.attrs.embedding}
+                width={node.attrs.width}
+                height={node.attrs.height}
+                hidden={node.attrs.hidden}
+                fieldKey={node.attrs.fieldKey}
+                tbox={tbox}
+                view={view}
+                node={node}
+                getPos={getPos}
+            />
         );
     }
     destroy() {
-        setTimeout(this.root.unmount);
+        setTimeout(() => {
+            try {
+                this.root.unmount();
+            } catch {}
+        });
     }
     selectNode() {}
 }
 
 interface IDashDocViewInternal {
     docId: string;
-    alias: string;
+    embedding: string;
     tbox: FormattedTextBox;
     width: string;
     height: string;
@@ -69,25 +85,18 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
     _textBox: FormattedTextBox;
     @observable _dashDoc: Doc | undefined;
     @observable _finalLayout: any;
-    @observable _resolvedDataDoc: any;
     @observable _width: number = 0;
     @observable _height: number = 0;
 
     updateDoc = action((dashDoc: Doc) => {
         this._dashDoc = dashDoc;
-        this._finalLayout = this.props.docId ? dashDoc : Doc.expandTemplateLayout(Doc.Layout(dashDoc), dashDoc);
+        this._finalLayout = dashDoc;
 
-        if (this._finalLayout) {
-            if (!Doc.AreProtosEqual(this._finalLayout, dashDoc)) {
-                this._finalLayout.rootDocument = dashDoc.aliasOf;
-            }
-            this._resolvedDataDoc = Cast(this._finalLayout.resolvedDataDoc, Doc, null);
-        }
         if (this.props.width !== (this._dashDoc?._width ?? '') + 'px' || this.props.height !== (this._dashDoc?._height ?? '') + 'px') {
             try {
                 this._width = NumCast(this._dashDoc?._width);
                 this._height = NumCast(this._dashDoc?._height);
-                // bcz: an exception will be thrown if two aliases are open at the same time when a doc view comment is made
+                // bcz: an exception will be thrown if two embeddings are open at the same time when a doc view comment is made
                 this.props.view.dispatch(
                     this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
                         ...this.props.node.attrs,
@@ -105,15 +114,15 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
         super(props);
         this._textBox = this.props.tbox;
 
-        DocServer.GetRefField(this.props.docId + this.props.alias).then(async dashDoc => {
+        DocServer.GetRefField(this.props.docId + this.props.embedding).then(async dashDoc => {
             if (!(dashDoc instanceof Doc)) {
-                this.props.alias &&
+                this.props.embedding &&
                     DocServer.GetRefField(this.props.docId).then(async dashDocBase => {
                         if (dashDocBase instanceof Doc) {
-                            const aliasedDoc = Doc.MakeAlias(dashDocBase, this.props.docId + this.props.alias);
-                            aliasedDoc.layoutKey = 'layout';
-                            this.props.fieldKey && DocUtils.makeCustomViewClicked(aliasedDoc, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
-                            this.updateDoc(aliasedDoc);
+                            const embedding = Doc.MakeEmbedding(dashDocBase, this.props.docId + this.props.embedding);
+                            embedding.layout_fieldKey = 'layout';
+                            this.props.fieldKey && DocUtils.makeCustomViewClicked(embedding, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
+                            this.updateDoc(embedding);
                         }
                     });
             } else {
@@ -191,7 +200,6 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                 onWheel={e => e.preventDefault()}>
                 <DocumentView
                     Document={this._finalLayout}
-                    DataDoc={this._resolvedDataDoc}
                     addDocument={returnFalse}
                     rootSelected={returnFalse} //{this._textBox.props.isSelected}
                     removeDocument={this.removeDoc}
@@ -203,14 +211,14 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                     addDocTab={this._textBox.props.addDocTab}
                     pinToPres={returnFalse}
                     renderDepth={this._textBox.props.renderDepth + 1}
-                    PanelWidth={this._finalLayout[WidthSym]}
-                    PanelHeight={this._finalLayout[HeightSym]}
+                    PanelWidth={this._finalLayout[Width]}
+                    PanelHeight={this._finalLayout[Height]}
                     focus={this.outerFocus}
                     whenChildContentsActiveChanged={returnFalse}
                     bringToFront={emptyFunction}
                     dontRegisterView={false}
-                    docFilters={this.props.tbox?.props.docFilters}
-                    docRangeFilters={this.props.tbox?.props.docRangeFilters}
+                    childFilters={this.props.tbox?.props.childFilters}
+                    childFiltersByRanges={this.props.tbox?.props.childFiltersByRanges}
                     searchFilterDocs={this.props.tbox?.props.searchFilterDocs}
                 />
             </div>
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index bf6fa2ec6..b4fb7a44e 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -2,18 +2,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { NodeSelection } from 'prosemirror-state';
 import * as ReactDOM from 'react-dom/client';
-import { DataSym, Doc, DocListCast, Field } from '../../../../fields/Doc';
+import { Doc } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { listSpec } from '../../../../fields/Schema';
 import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
-import { ComputedField } from '../../../../fields/ScriptField';
 import { Cast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
+import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
+import { SchemaTableCell } from '../../collections/collectionSchema/SchemaTableCell';
 import { OpenWhere } from '../DocumentView';
 import './DashFieldView.scss';
 import { FormattedTextBox } from './FormattedTextBox';
@@ -70,10 +69,10 @@ export class DashFieldView {
             } catch {}
         });
     }
-    deselectNode() {
+    @action deselectNode() {
         this.dom.classList.remove('ProseMirror-selectednode');
     }
-    selectNode() {
+    @action selectNode() {
         this.dom.classList.add('ProseMirror-selectednode');
     }
 }
@@ -98,6 +97,7 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
     _fieldKey: string;
     _fieldStringRef = React.createRef<HTMLSpanElement>();
     @observable _dashDoc: Doc | undefined;
+    @observable _expanded = false;
 
     constructor(props: IDashFieldViewInternal) {
         super(props);
@@ -114,139 +114,46 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
         this._reactionDisposer?.();
     }
 
-    public static multiValueDelimeter = ';';
-    public static fieldContent(textBoxDoc: Doc, dashDoc: Doc, fieldKey: string) {
-        const dashVal = dashDoc[fieldKey] ?? dashDoc[DataSym][fieldKey] ?? '';
-        const fval = dashVal instanceof List ? dashVal.join(DashFieldViewInternal.multiValueDelimeter) : StrCast(dashVal).startsWith(':=') || dashVal === '' ? Doc.Layout(textBoxDoc)[fieldKey] : dashVal;
-        return { boolVal: Cast(fval, 'boolean', null), strVal: Field.toString(fval as Field) || '' };
-    }
-
     // set the display of the field's value (checkbox for booleans, span of text for strings)
     @computed get fieldValueContent() {
-        if (this._dashDoc) {
-            const { boolVal, strVal } = DashFieldViewInternal.fieldContent(this._textBoxDoc, this._dashDoc, this._fieldKey);
-            // field value is a boolean, so use a checkbox or similar widget to display it
-            if (boolVal === true || boolVal === false) {
-                return (
-                    <input
-                        className="dashFieldView-fieldCheck"
-                        type="checkbox"
-                        checked={boolVal}
-                        onChange={e => {
-                            if (this._fieldKey.startsWith('_')) Doc.Layout(this._textBoxDoc)[this._fieldKey] = e.target.checked;
-                            Doc.SetInPlace(this._dashDoc!, this._fieldKey, e.target.checked, true);
-                        }}
-                    />
-                );
-            } // field value is a string, so display it as an editable span
-            else {
-                // bcz: this is unfortunate, but since this React component is nested within a non-React text box (prosemirror), we can't
-                // use React events.  Essentially, React events occur after native events have been processed, so corresponding React events
-                // will never fire because Prosemirror has handled the native events.  So we add listeners for native events here.
-                return (
-                    <span
-                        className="dashFieldView-fieldSpan"
-                        contentEditable={!this.props.unclickable()}
-                        style={{ display: strVal.length < 2 ? 'inline-block' : undefined }}
-                        suppressContentEditableWarning={true}
-                        defaultValue={strVal}
-                        ref={r => {
-                            r?.addEventListener('keydown', e => this.fieldSpanKeyDown(e, r));
-                            r?.addEventListener('blur', e => r && this.updateText(r.textContent!, false));
-                            r?.addEventListener(
-                                'pointerdown',
-                                action(e => {
-                                    // let target = e.target as any; // hrefs are stored on the dataset of the <a> node that wraps the hyerlink <span>
-                                    // while (target && !target.dataset?.targethrefs) target = target.parentElement;
-                                    this.props.tbox.EditorView!.dispatch(this.props.tbox.EditorView!.state.tr.setSelection(new NodeSelection(this.props.tbox.EditorView!.state.doc.resolve(this.props.getPos()))));
-                                    // FormattedTextBoxComment.update(this.props.tbox, this.props.tbox.EditorView!, undefined, target?.dataset?.targethrefs, target?.dataset.linkdoc);
-                                    // e.stopPropagation();
-                                })
-                            );
-                        }}>
-                        {strVal}
-                    </span>
-                );
-            }
-        }
+        return !this._dashDoc ? null : (
+            <div onClick={action(e => (this._expanded = !this.props.editable ? !this._expanded : true))} style={{ fontSize: 'smaller', width: this.props.hideKey ? this.props.tbox.props.PanelWidth() - 20 : undefined }}>
+                <SchemaTableCell
+                    Document={this._dashDoc}
+                    col={0}
+                    deselectCell={emptyFunction}
+                    selectCell={emptyFunction}
+                    maxWidth={this.props.hideKey ? undefined : () => 100}
+                    columnWidth={this.props.hideKey ? () => this.props.tbox.props.PanelWidth() - 20 : returnZero}
+                    selectedCell={() => [this._dashDoc!, 0]}
+                    fieldKey={this._fieldKey}
+                    rowHeight={returnZero}
+                    isRowActive={() => this._expanded && this.props.editable}
+                    padding={0}
+                    getFinfo={emptyFunction}
+                    setColumnValues={returnFalse}
+                    allowCRs={true}
+                    oneLine={!this._expanded}
+                    finishEdit={action(() => (this._expanded = false))}
+                />
+            </div>
+        );
     }
 
-    // we need to handle all key events on the input span or else they will propagate to prosemirror.
-    @action
-    fieldSpanKeyDown = (e: KeyboardEvent, span: HTMLSpanElement) => {
-        if (e.key === 'c' && (e.ctrlKey || e.metaKey)) {
-            navigator.clipboard.writeText(window.getSelection()?.toString() || '');
-            return;
-        }
-        if (e.key === 'Enter') {
-            // handle the enter key by "submitting" the current text to Dash's database.
-            this.updateText(span.textContent!, true);
-            e.preventDefault(); // prevent default to avoid a newline from being generated and wiping out this field view
-        }
-        if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {
-            // handle ctrl-A to select all the text within the span
-            if (window.getSelection) {
-                const range = document.createRange();
-                range.selectNodeContents(span);
-                window.getSelection()!.removeAllRanges();
-                window.getSelection()!.addRange(range);
-            }
-            e.preventDefault(); //prevent default so that all the text in the prosemirror text box isn't selected
-        }
-        if (!this.props.editable) {
-            e.preventDefault();
-        }
-        e.stopPropagation(); // we need to handle all events or else they will propagate to prosemirror.
-    };
-
-    @action
-    updateText = (nodeText: string, forceMatch: boolean) => {
-        if (nodeText) {
-            const newText = nodeText.startsWith(':=') || nodeText.startsWith('=:=') ? ':=-computed-' : nodeText;
-            // look for a document whose id === the fieldKey being displayed.  If there's a match, then that document
-            // holds the different enumerated values for the field in the titles of its collected documents.
-            // if there's a partial match from the start of the input text, complete the text --- TODO: make this an auto suggest box and select from a drop down.
-            DocServer.GetRefField(this._fieldKey).then(options => {
-                let modText = '';
-                options instanceof Doc && DocListCast(options.data).forEach(opt => (forceMatch ? StrCast(opt.title).startsWith(newText) : StrCast(opt.title) === newText) && (modText = StrCast(opt.title)));
-                if (modText) {
-                    //  elementfieldSpan.innerHTML = this._dashDoc![this._fieldKey as string] = modText;
-                    Doc.SetInPlace(this._dashDoc!, this._fieldKey, modText, true);
-                } // if the text starts with a ':=' then treat it as an expression by making a computed field from its value storing it in the key
-                else if (nodeText.startsWith(':=')) {
-                    this._dashDoc![DataSym][this._fieldKey] = ComputedField.MakeFunction(nodeText.substring(2));
-                } else if (nodeText.startsWith('=:=')) {
-                    Doc.Layout(this._textBoxDoc)[this._fieldKey] = ComputedField.MakeFunction(nodeText.substring(3));
-                } else {
-                    if (Number(newText).toString() === newText) {
-                        if (this._fieldKey.startsWith('_')) Doc.Layout(this._textBoxDoc)[this._fieldKey] = Number(newText);
-                        Doc.SetInPlace(this._dashDoc!, this._fieldKey, Number(newText), true);
-                    } else {
-                        const splits = newText.split(DashFieldViewInternal.multiValueDelimeter);
-                        if (!this._textBoxDoc[this._fieldKey]) {
-                            const strVal = splits.length > 1 ? new List<string>(splits) : newText;
-                            if (this._fieldKey.startsWith('_')) Doc.Layout(this._textBoxDoc)[this._fieldKey] = strVal;
-                            Doc.SetInPlace(this._dashDoc!, this._fieldKey, strVal, true);
-                        }
-                    }
-                }
-            });
-        }
-    };
-
     createPivotForField = (e: React.MouseEvent) => {
         let container = this.props.tbox.props.DocumentView?.().props.docViewPath().lastElement();
         if (container) {
-            const alias = Doc.MakeAlias(container.props.Document);
-            alias._viewType = CollectionViewType.Time;
-            let list = Cast(alias._columnHeaders, listSpec(SchemaHeaderField));
+            const embedding = Doc.MakeEmbedding(container.rootDoc);
+            embedding._type_collection = CollectionViewType.Time;
+            const colHdrKey = '_' + container.LayoutFieldKey + '_columnHeaders';
+            let list = Cast(embedding[colHdrKey], listSpec(SchemaHeaderField));
             if (!list) {
-                alias._columnHeaders = list = new List<SchemaHeaderField>();
+                embedding[colHdrKey] = list = new List<SchemaHeaderField>();
             }
             list.map(c => c.heading).indexOf(this._fieldKey) === -1 && list.push(new SchemaHeaderField(this._fieldKey, '#f1efeb'));
             list.map(c => c.heading).indexOf('text') === -1 && list.push(new SchemaHeaderField('text', '#f1efeb'));
-            alias._pivotField = this._fieldKey.startsWith('#') ? 'tags' : this._fieldKey;
-            this.props.tbox.props.addDocTab(alias, OpenWhere.addRight);
+            embedding._pivotField = this._fieldKey.startsWith('#') ? 'tags' : this._fieldKey;
+            this.props.tbox.props.addDocTab(embedding, OpenWhere.addRight);
         }
     };
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index b5a3c5d84..109b62e6f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -41,7 +41,7 @@ audiotag:hover {
     flex-direction: row;
     transition: opacity 1s;
     width: 100%;
-    position: absolute;
+    position: relative;
     top: 0;
     left: 0;
 }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 555944438..f4cecb1dc 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -12,7 +12,7 @@ import { Fragment, Mark, Node, Slice } from 'prosemirror-model';
 import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { DateField } from '../../../../fields/DateField';
-import { AclAdmin, AclAugment, AclEdit, CssSym, Doc, DocListCast, Field, ForceServerWrite, HeightSym, Opt, UpdatingFromServer, WidthSym } from '../../../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, CssSym, Doc, DocListCast, Field, ForceServerWrite, HeightSym, Opt, StrListCast, UpdatingFromServer, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
@@ -74,8 +74,11 @@ const translateGoogleApi = require('translate-google-api');
 export const GoogleRef = 'googleDocId';
 type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void;
 
+export interface FormattedTextBoxProps {
+    allowScroll?: boolean;
+}
 @observer
-export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps & FormattedTextBoxProps>() {
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(FormattedTextBox, fieldStr);
     }
@@ -115,38 +118,38 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         return this._editorView;
     }
     public get SidebarKey() {
-        return this.fieldKey + '-sidebar';
+        return this.fieldKey + '_sidebar';
     }
     @computed get allSidebarDocs() {
         return DocListCast(this.dataDoc[this.SidebarKey]);
     }
 
     @computed get noSidebar() {
-        return this.props.docViewPath().lastElement()?.props.hideDecorationTitle || this.props.noSidebar || this.Document._noSidebar;
+        return this.props.docViewPath().lastElement()?.props.hideDecorationTitle || this.props.noSidebar || this.Document._layout_noSidebar;
     }
-    @computed get sidebarWidthPercent() {
-        return this._showSidebar ? '20%' : StrCast(this.layoutDoc._sidebarWidthPercent, '0%');
+    @computed get layout_sidebarWidthPercent() {
+        return this._showSidebar ? '20%' : StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
     }
     @computed get sidebarColor() {
-        return StrCast(this.layoutDoc.sidebarColor, StrCast(this.layoutDoc[this.fieldKey + '-backgroundColor'], '#e4e4e4'));
+        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.fieldKey + '_backgroundColor'], '#e4e4e4'));
     }
-    @computed get autoHeight() {
-        return (this.props.forceAutoHeight || this.layoutDoc._autoHeight) && !this.props.ignoreAutoHeight;
+    @computed get layout_autoHeight() {
+        return (this.props.forceAutoHeight || this.layoutDoc._layout_autoHeight) && !this.props.ignoreAutoHeight;
     }
     @computed get textHeight() {
-        return NumCast(this.rootDoc[this.fieldKey + '-height']);
+        return NumCast(this.rootDoc[this.fieldKey + '_height']);
     }
     @computed get scrollHeight() {
-        return NumCast(this.rootDoc[this.fieldKey + '-scrollHeight']);
+        return NumCast(this.rootDoc[this.fieldKey + '_scrollHeight']);
     }
     @computed get sidebarHeight() {
-        return !this.sidebarWidth() ? 0 : NumCast(this.rootDoc[this.SidebarKey + '-height']);
+        return !this.sidebarWidth() ? 0 : NumCast(this.rootDoc[this.SidebarKey + '_height']);
     }
     @computed get titleHeight() {
         return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0;
     }
-    @computed get autoHeightMargins() {
-        return this.titleHeight + NumCast(this.layoutDoc._autoHeightMargins);
+    @computed get layout_autoHeightMargins() {
+        return this.titleHeight + NumCast(this.layoutDoc._layout_autoHeightMargins);
     }
     @computed get _recording() {
         return this.dataDoc?.mediaState === 'recording';
@@ -210,8 +213,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     public RemoveLinkFromDoc(linkDoc?: Doc) {
         this.unhighlightSearchTerms();
         const state = this._editorView?.state;
-        const a1 = linkDoc?.anchor1 as Doc;
-        const a2 = linkDoc?.anchor2 as Doc;
+        const a1 = linkDoc?.link_anchor_1 as Doc;
+        const a2 = linkDoc?.link_anchor_2 as Doc;
         if (state && a1 && a2 && this._editorView) {
             this.removeDocument(a1);
             this.removeDocument(a2);
@@ -240,7 +243,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         if (!pinProps && this._editorView?.state.selection.empty) return this.rootDoc;
-        const anchor = Docs.Create.TextanchorDocument({ annotationOn: this.rootDoc, unrendered: true });
+        const anchor = Docs.Create.TextConfigDocument({ annotationOn: this.rootDoc });
         this.addDocument(anchor);
         this.makeLinkAnchor(anchor, OpenWhere.addRight, undefined, 'Anchored Selection', false, addAsAnnotation);
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: true } }, this.rootDoc);
@@ -252,18 +255,18 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         AnchorMenu.Instance.Status = 'marquee';
 
         AnchorMenu.Instance.OnClick = (e: PointerEvent) => {
-            !this.layoutDoc.showSidebar && this.toggleSidebar();
+            !this.layoutDoc.layout_showSidebar && this.toggleSidebar();
             setTimeout(() => this._sidebarRef.current?.anchorMenuClick(this.makeLinkAnchor(undefined, OpenWhere.addRight, undefined, 'Anchored Selection', true))); // give time for sidebarRef to be created
         };
         AnchorMenu.Instance.OnAudio = (e: PointerEvent) => {
-            !this.layoutDoc.showSidebar && this.toggleSidebar();
+            !this.layoutDoc.layout_showSidebar && this.toggleSidebar();
             const anchor = this.makeLinkAnchor(undefined, OpenWhere.addRight, undefined, 'Anchored Selection', true, true);
             setTimeout(() => {
                 const target = this._sidebarRef.current?.anchorMenuClick(anchor);
                 if (target) {
                     anchor.followLinkAudio = true;
                     DocumentViewInternal.recordAudioAnnotation(Doc.GetProto(target), Doc.LayoutFieldKey(target));
-                    target.title = ComputedField.MakeFunction(`self["text-audioAnnotations-text"].lastElement()`);
+                    target.title = ComputedField.MakeFunction(`self["text_audioAnnotations_text"].lastElement()`);
                 }
             });
         };
@@ -303,7 +306,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             const curProto = Cast(Cast(dataDoc.proto, Doc, null)?.[this.fieldKey], RichTextField, null); // the default text inherited from a prototype
             const curLayout = this.rootDoc !== this.layoutDoc ? Cast(this.layoutDoc[this.fieldKey], RichTextField, null) : undefined; // the default text stored in a layout template
             const json = JSON.stringify(state.toJSON());
-            const effectiveAcl = GetEffectiveAcl(this.rootDoc);
+            const effectiveAcl = GetEffectiveAcl(dataDoc);
 
             const removeSelection = (json: string | undefined) => (json?.indexOf('"storedMarks"') === -1 ? json?.replace(/"selection":.*/, '') : json?.replace(/"selection":"\"storedMarks\""/, '"storedMarks"'));
 
@@ -317,29 +320,25 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 dataDoc.tags = accumTags.length ? new List<string>(Array.from(new Set<string>(accumTags))) : undefined;
 
                 let unchanged = true;
-                if (this._applyingChange !== this.fieldKey && removeSelection(json) !== removeSelection(curProto?.Data)) {
+                if (this._applyingChange !== this.fieldKey && removeSelection(newJson) !== removeSelection(prevData?.Data)) {
                     this._applyingChange = this.fieldKey;
-                    const textChange = curText !== Cast(dataDoc[this.fieldKey], RichTextField)?.Text;
-                    textChange && (dataDoc[this.fieldKey + '-lastModified'] = new DateField(new Date(Date.now())));
-                    if ((!curTemp && !curProto) || curText || json.includes('dash')) {
+                    const textChange = newText !== prevData?.Text;
+                    textChange && (dataDoc[this.fieldKey + '_modificationDate'] = new DateField(new Date(Date.now())));
+                    if ((!prevData && !protoData) || newText || (!newText && !protoData)) {
                         // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended)
-                        if (removeSelection(json) !== removeSelection(curLayout?.Data)) {
+                        if (removeSelection(newJson) !== removeSelection(prevLayoutData?.Data)) {
                             const numstring = NumCast(dataDoc[this.fieldKey], null);
-                            if (numstring !== undefined) {
-                                dataDoc[this.fieldKey] = Number(curText);
-                            } else {
-                                dataDoc[this.fieldKey] = new RichTextField(json, curText);
-                            }
-                            dataDoc[this.fieldKey + '-noTemplate'] = true; //(curTemp?.Text || "") !== curText; // mark the data field as being split from the template if it has been edited
-                            textChange && ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: curText });
+                            dataDoc[this.fieldKey] = numstring !== undefined ? Number(newText) : new RichTextField(newJson, newText);
+                            dataDoc[this.fieldKey + '_noTemplate'] = true; //(curTemp?.Text || "") !== curText; // mark the data field as being split from the template if it has been edited
+                            textChange && ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: newText });
                             unchanged = false;
                         }
                     } else {
                         // if we've deleted all the text in a note driven by a template, then restore the template data
                         dataDoc[this.fieldKey] = undefined;
-                        this._editorView.updateState(EditorState.fromJSON(this.config, JSON.parse((curProto || curTemp).Data)));
-                        dataDoc[this.fieldKey + '-noTemplate'] = undefined; // mark the data field as not being split from any template it might have
-                        ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: curText });
+                        this._editorView.updateState(EditorState.fromJSON(this.config, JSON.parse((protoData || prevData).Data)));
+                        dataDoc[this.fieldKey + '_noTemplate'] = undefined; // mark the data field as not being split from any template it might have
+                        ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: newText });
                         unchanged = false;
                     }
                     this._applyingChange = '';
@@ -368,7 +367,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         let linkAnchor;
         let link;
         LinkManager.Links(this.dataDoc).forEach((l, i) => {
-            const anchor = (l.anchor1 as Doc).annotationOn ? (l.anchor1 as Doc) : (l.anchor2 as Doc).annotationOn ? (l.anchor2 as Doc) : undefined;
+            const anchor = (l.link_anchor_1 as Doc).annotationOn ? (l.link_anchor_1 as Doc) : (l.link_anchor_2 as Doc).annotationOn ? (l.link_anchor_2 as Doc) : undefined;
             if (anchor && (anchor.annotationOn as Doc).mediaState === 'recording') {
                 linkTime = NumCast(anchor._timecodeToShow /* audioStart */);
                 linkAnchor = anchor;
@@ -404,7 +403,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
     autoLink = () => {
         const newAutoLinks = new Set<Doc>();
-        const oldAutoLinks = LinkManager.Links(this.props.Document).filter(link => link.linkRelationship === LinkManager.AutoKeywords);
+        const oldAutoLinks = LinkManager.Links(this.props.Document).filter(link => link.link_relationship === LinkManager.AutoKeywords);
         if (this._editorView?.state.doc.textContent) {
             const isNodeSel = this._editorView.state.selection instanceof NodeSelection;
             const f = this._editorView.state.selection.from;
@@ -416,7 +415,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             tr = tr.setSelection(isNodeSel && false ? new NodeSelection(tr.doc.resolve(f)) : new TextSelection(tr.doc.resolve(f), tr.doc.resolve(t)));
             this._editorView?.dispatch(tr);
         }
-        oldAutoLinks.filter(oldLink => !newAutoLinks.has(oldLink) && oldLink.anchor2 !== this.rootDoc).forEach(LinkManager.Instance.deleteLink);
+        oldAutoLinks.filter(oldLink => !newAutoLinks.has(oldLink) && oldLink.link_anchor_2 !== this.rootDoc).forEach(LinkManager.Instance.deleteLink);
     };
 
     updateTitle = () => {
@@ -425,7 +424,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             !this.props.dontRegisterView && // (this.props.Document.isTemplateForField === "text" || !this.props.Document.isTemplateForField) && // only update the title if the data document's data field is changing
             (title.startsWith('-') || title.startsWith('@')) &&
             this._editorView &&
-            !this.dataDoc['title-custom'] &&
+            !this.dataDoc.title_custom &&
             (Doc.LayoutFieldKey(this.rootDoc) === this.fieldKey || this.fieldKey === 'text')
         ) {
             let node = this._editorView.state.doc;
@@ -457,8 +456,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         if (node.firstChild === null && !node.marks.find((m: Mark) => m.type.name === schema.marks.noAutoLinkAnchor.name) && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) {
                             alink =
                                 alink ??
-                                (LinkManager.Links(this.Document).find(link => Doc.AreProtosEqual(Cast(link.anchor1, Doc, null), this.rootDoc) && Doc.AreProtosEqual(Cast(link.anchor2, Doc, null), target)) ||
-                                    DocUtils.MakeLink(this.props.Document, target, { linkRelationship: LinkManager.AutoKeywords })!);
+                                (LinkManager.Links(this.Document).find(link => Doc.AreProtosEqual(Cast(link.link_anchor_1, Doc, null), this.rootDoc) && Doc.AreProtosEqual(Cast(link.link_anchor_2, Doc, null), target)) ||
+                                    DocUtils.MakeLink(this.props.Document, target, { link_relationship: LinkManager.AutoKeywords })!);
                             newAutoLinks.add(alink);
                             const allAnchors = [{ href: Doc.localServerPath(target), title: 'a link', anchorId: this.props.Document[Id] }];
                             allAnchors.push(...(node.marks.find((m: Mark) => m.type.name === schema.marks.autoLinkAnchor.name)?.attrs.allAnchors ?? []));
@@ -525,7 +524,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             this.setupEditor(this.config, this.fieldKey);
             this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.layoutDoc);
         }
-        // if (this.autoHeight) this.tryUpdateScrollHeight();
+        // if (this.layout_autoHeight) this.tryUpdateScrollHeight();
     };
 
     @undoBatch
@@ -545,17 +544,17 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             } else if (de.embedKey) {
                 const target = dragData.droppedDocuments[0];
                 const node = schema.nodes.dashDoc.create({
-                    width: target[WidthSym](),
-                    height: target[HeightSym](),
+                    width: target[Width](),
+                    height: target[Height](),
                     title: 'dashDoc',
                     docId: target[Id],
                     float: 'unset',
                 });
-                if (!['alias', 'copy'].includes((dragData.dropAction ?? '') as any)) {
+                if (!['embed', 'copy'].includes((dragData.dropAction ?? '') as any)) {
                     dragData.removeDocument?.(dragData.draggedDocuments[0]);
                 }
-                target._fitContentsToBox = true;
-                target.context = this.rootDoc;
+                target._freeform_fitContentsToBox = true;
+                target.embedContainer = this.rootDoc;
                 const view = this._editorView!;
                 view.dispatch(view.state.tr.insert(view.posAtCoords({ left: de.x, top: de.y })!.pos, node));
                 e.stopPropagation();
@@ -612,7 +611,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         if (Array.from(highlights).join('') === FormattedTextBox._globalHighlightsCache) return;
         setTimeout(() => (FormattedTextBox._globalHighlightsCache = Array.from(highlights).join('')));
         clearStyleSheetRules(FormattedTextBox._userStyleSheet);
-        if (highlights.includes('Audio Tags')) {
+        if (!highlights.includes('Audio Tags')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'audiotag', { display: 'none' }, '');
         }
         if (highlights.includes('Text from Others')) {
@@ -647,24 +646,24 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             const hr = Math.round(Date.now() / 1000 / 60 / 60);
             numberRange(10).map(i => addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-hr-' + (hr - i), { opacity: ((10 - i - 1) / 10).toString() }));
         }
-        this.layoutDoc[CssSym] = this.layoutDoc[CssSym] + 1; // css changes happen outside of react/mobx.  so we need to set a flag that will notify anyone intereted in layout changes triggered by css changes (eg., CollectionLinkView)
+        this.layoutDoc[DocCss] = this.layoutDoc[DocCss] + 1; // css changes happen outside of react/mobx.  so we need to set a flag that will notify anyone intereted in layout changes triggered by css changes (eg., CollectionLinkView)
     };
 
     @observable _showSidebar = false;
     @computed get SidebarShown() {
-        return this._showSidebar || this.layoutDoc._showSidebar ? true : false;
+        return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false;
     }
 
     @action
     toggleSidebar = (preview: boolean = false) => {
         const prevWidth = 1 - this.sidebarWidth() / Number(getComputedStyle(this._ref.current!).width.replace('px', ''));
         if (preview) this._showSidebar = true;
-        else this.layoutDoc._showSidebar = (this.layoutDoc._sidebarWidthPercent = StrCast(this.layoutDoc._sidebarWidthPercent, '0%') === '0%' ? '50%' : '0%') !== '0%';
+        else this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? '50%' : '0%') !== '0%';
 
         this.layoutDoc._width = !preview && this.SidebarShown ? NumCast(this.layoutDoc._width) * 2 : Math.max(20, NumCast(this.layoutDoc._width) * prevWidth);
     };
     sidebarDown = (e: React.PointerEvent) => {
-        const batch = UndoManager.StartBatch('sidebar');
+        const batch = UndoManager.StartBatch('toggle sidebar');
         setupMoveUpEvents(
             this,
             e,
@@ -682,22 +681,23 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             .ScreenToLocalTransform()
             .scale(this.props.NativeDimScaling?.() || 1)
             .transformDirection(delta[0], delta[1]);
-        const sidebarWidth = (NumCast(this.layoutDoc._width) * Number(this.sidebarWidthPercent.replace('%', ''))) / 100;
-        const width = this.layoutDoc[WidthSym]() + localDelta[0];
-        this.layoutDoc._sidebarWidthPercent = Math.max(0, (sidebarWidth + localDelta[0]) / width) * 100 + '%';
+        const sidebarWidth = (NumCast(this.layoutDoc._width) * Number(this.layout_sidebarWidthPercent.replace('%', ''))) / 100;
+        const width = this.layoutDoc[Width]() + localDelta[0];
+        this.layoutDoc._layout_sidebarWidthPercent = Math.max(0, (sidebarWidth + localDelta[0]) / width) * 100 + '%';
         this.layoutDoc.width = width;
-        this.layoutDoc._showSidebar = this.layoutDoc._sidebarWidthPercent !== '0%';
+        this.layoutDoc._layout_showSidebar = this.layoutDoc._layout_sidebarWidthPercent !== '0%';
         e.preventDefault();
         return false;
     };
 
-    @undoBatch
     deleteAnnotation = (anchor: Doc) => {
+        const batch = UndoManager.StartBatch('delete link');
         LinkManager.Instance.deleteLink(LinkManager.Links(anchor)[0]);
         // const docAnnotations = DocListCast(this.props.dataDoc[this.fieldKey]);
         // this.props.dataDoc[this.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion));
         // AnchorMenu.Instance.fadeOut(true);
         this.props.select(false);
+        setTimeout(batch.end); // wait for reaction to remove link from document
     };
 
     @undoBatch
@@ -730,17 +730,22 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 .split(' ')
                 .filter(h => h);
             const anchorDoc = Array.from(hrefs).lastElement().replace(Doc.localServerPath(), '').split('?')[0];
+            const deleteMarkups = undoBatch(() => {
+                const sel = editor.state.selection;
+                editor.dispatch(editor.state.tr.removeMark(sel.from, sel.to, editor.state.schema.marks.linkAnchor));
+            });
             e.persist();
             anchorDoc &&
                 DocServer.GetRefField(anchorDoc).then(
                     action(anchor => {
+                        anchor && SelectionManager.SelectSchemaViewDoc(anchor as Doc);
                         AnchorMenu.Instance.Status = 'annotation';
-                        AnchorMenu.Instance.Delete = () => this.deleteAnnotation(anchor as Doc);
+                        AnchorMenu.Instance.Delete = !anchor && editor.state.selection.empty ? returnFalse : !anchor ? deleteMarkups : () => this.deleteAnnotation(anchor as Doc);
                         AnchorMenu.Instance.Pinned = false;
-                        AnchorMenu.Instance.PinToPres = () => this.pinToPres(anchor as Doc);
-                        AnchorMenu.Instance.MakeTargetToggle = () => this.makeTargetToggle(anchor as Doc);
-                        AnchorMenu.Instance.ShowTargetTrail = () => this.showTargetTrail(anchor as Doc);
-                        AnchorMenu.Instance.IsTargetToggler = () => this.isTargetToggler(anchor as Doc);
+                        AnchorMenu.Instance.PinToPres = !anchor ? returnFalse : () => this.pinToPres(anchor as Doc);
+                        AnchorMenu.Instance.MakeTargetToggle = !anchor ? returnFalse : () => this.makeTargetToggle(anchor as Doc);
+                        AnchorMenu.Instance.ShowTargetTrail = !anchor ? returnFalse : () => this.showTargetTrail(anchor as Doc);
+                        AnchorMenu.Instance.IsTargetToggler = !anchor ? returnFalse : () => this.isTargetToggler(anchor as Doc);
                         AnchorMenu.Instance.jumpTo(e.clientX, e.clientY, true);
                     })
                 );
@@ -754,7 +759,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             description: 'plain',
             event: undoBatch(() => {
                 Doc.setNativeView(this.rootDoc);
-                this.layoutDoc.autoHeightMargins = undefined;
+                this.layoutDoc.layout_autoHeightMargins = undefined;
             }),
             icon: 'eye',
         });
@@ -762,18 +767,18 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             description: 'metadata',
             event: undoBatch(() => {
                 this.dataDoc.layout_meta = Cast(Doc.UserDoc().emptyHeader, Doc, null)?.layout;
-                this.rootDoc.layoutKey = 'layout_meta';
-                setTimeout(() => (this.rootDoc._headerHeight = this.rootDoc._autoHeightMargins = 50), 50);
+                this.rootDoc.layout_fieldKey = 'layout_meta';
+                setTimeout(() => (this.rootDoc._headerHeight = this.rootDoc._layout_autoHeightMargins = 50), 50);
             }),
             icon: 'eye',
         });
-        const noteTypesDoc = Cast(Doc.UserDoc()['template-notes'], Doc, null);
+        const noteTypesDoc = Cast(Doc.UserDoc().template_notes, Doc, null);
         DocListCast(noteTypesDoc?.data).forEach(note => {
             const icon: IconProp = StrCast(note.icon) as IconProp;
             changeItems.push({
                 description: StrCast(note.title),
                 event: undoBatch(() => {
-                    this.layoutDoc.autoHeightMargins = undefined;
+                    this.layoutDoc.layout_autoHeightMargins = undefined;
                     Doc.setNativeView(this.rootDoc);
                     DocUtils.makeCustomViewClicked(this.rootDoc, Docs.Create.TreeDocument, StrCast(note.title), note);
                 }),
@@ -799,11 +804,15 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         );
 
         const uicontrols: ContextMenuProps[] = [];
-        uicontrols.push({ description: !this.Document._noSidebar ? 'Hide Sidebar Handle' : 'Show Sidebar Handle', event: () => (this.layoutDoc._noSidebar = !this.layoutDoc._noSidebar), icon: !this.Document._noSidebar ? 'eye-slash' : 'eye' });
         uicontrols.push({
-            description: (this.Document._showAltContentUI ? 'Hide' : 'Show') + ' Alt Content UI',
-            event: () => (this.layoutDoc._showAltContentUI = !this.layoutDoc._showAltContentUI),
-            icon: !this.Document._showAltContentUI ? 'eye-slash' : 'eye',
+            description: !this.Document._layout_noSidebar ? 'Hide Sidebar Handle' : 'Show Sidebar Handle',
+            event: () => (this.layoutDoc._layout_noSidebar = !this.layoutDoc._layout_noSidebar),
+            icon: !this.Document._layout_noSidebar ? 'eye-slash' : 'eye',
+        });
+        uicontrols.push({
+            description: (this.Document._layout_enableAltContentUI ? 'Hide' : 'Show') + ' Alt Content UI',
+            event: () => (this.layoutDoc._layout_enableAltContentUI = !this.layoutDoc._layout_enableAltContentUI),
+            icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye',
         });
         uicontrols.push({ description: 'Show Highlights...', noexpand: true, subitems: highlighting, icon: 'hand-point-right' });
         !Doc.noviceMode &&
@@ -834,10 +843,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         this.rootDoc.title = this.layoutDoc.isTemplateForField as string;
                         this.rootDoc.isTemplateDoc = false;
                         this.rootDoc.isTemplateForField = '';
-                        this.rootDoc.layoutKey = 'layout';
+                        this.rootDoc.layout_fieldKey = 'layout';
                         MakeTemplate(this.rootDoc, true, title);
                         setTimeout(() => {
-                            this.rootDoc._autoHeight = this.layoutDoc._autoHeight; // autoHeight, width and height
+                            this.rootDoc._layout_autoHeight = this.layoutDoc._layout_autoHeight; // layout_autoHeight, width and height
                             this.rootDoc._width = this.layoutDoc._width || 300; // are stored on the template, since we're getting rid of the old template
                             this.rootDoc._height = this.layoutDoc._height || 200; // we need to copy them over to the root.  This should probably apply to all '_' fields
                             this.rootDoc._backgroundColor = Cast(this.layoutDoc._backgroundColor, 'string', null);
@@ -845,7 +854,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         }, 10);
                     }
                     Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.rootDoc);
-                    Doc.AddDocToList(Cast(Doc.UserDoc()['template-notes'], Doc, null), 'data', this.rootDoc);
+                    Doc.AddDocToList(Cast(Doc.UserDoc().template_notes, Doc, null), 'data', this.rootDoc);
                 },
                 icon: 'eye',
             });
@@ -856,11 +865,16 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         optionItems.push({ description: `Generate Dall-E Image`, event: () => this.generateImage(), icon: 'star' });
         optionItems.push({ description: `Ask GPT-3`, event: () => this.askGPT(), icon: 'lightbulb' });
         optionItems.push({
-            description: !this.Document._singleLine ? 'Create New Doc on Carriage Return' : 'Allow Carriage Returns',
-            event: () => (this.layoutDoc._singleLine = !this.layoutDoc._singleLine),
-            icon: !this.Document._singleLine ? 'grip-lines' : 'bars',
+            description: !this.Document._createDocOnCR ? 'Create New Doc on Carriage Return' : 'Allow Carriage Returns',
+            event: () => (this.layoutDoc._createDocOnCR = !this.layoutDoc._createDocOnCR),
+            icon: !this.Document._createDocOnCR ? 'grip-lines' : 'bars',
         });
-        !Doc.noviceMode && optionItems.push({ description: `${this.Document._autoHeight ? 'Lock' : 'Auto'} Height`, event: () => (this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight), icon: this.Document._autoHeight ? 'lock' : 'unlock' });
+        !Doc.noviceMode &&
+            optionItems.push({
+                description: `${this.Document._layout_autoHeight ? 'Lock' : 'Auto'} Height`,
+                event: () => (this.layoutDoc._layout_autoHeight = !this.layoutDoc._layout_autoHeight),
+                icon: this.Document._layout_autoHeight ? 'lock' : 'unlock',
+            });
         optionItems.push({ description: `show markdown options`, event: RTFMarkup.Instance.open, icon: 'text' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
         this._downX = this._downY = Number.NaN;
@@ -900,18 +914,18 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     y: NumCast(this.rootDoc.y),
                     _height: 200,
                     _width: 200,
-                    'data-nativeWidth': result.nativeWidth,
-                    'data-nativeHeight': result.nativeHeight,
+                    data_nativeWidth: result.nativeWidth,
+                    data_nativeHeight: result.nativeHeight,
                 });
-                if (DocListCast(Doc.MyOverlayDocs?.data).includes(this.rootDoc)) {
+                if (Doc.IsInMyOverlay(this.rootDoc)) {
                     newDoc.overlayX = this.rootDoc.x;
                     newDoc.overlayY = NumCast(this.rootDoc.y) + NumCast(this.rootDoc._height);
-                    Doc.AddDocToList(Doc.MyOverlayDocs, undefined, newDoc);
+                    Doc.AddToMyOverlay(newDoc);
                 } else {
                     this.props.addDocument?.(newDoc);
                 }
                 // Create link between prompt and image
-                DocUtils.MakeLink(this.rootDoc, newDoc, { linkRelationship: 'Image Prompt' });
+                DocUtils.MakeLink(this.rootDoc, newDoc, { link_relationship: 'Image Prompt' });
             }
         } catch (err) {
             console.log(err);
@@ -948,14 +962,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         if (this._editorView && this._recordingStart) {
             if (this._break) {
                 const textanchorFunc = () => {
-                    const tanch = Docs.Create.TextanchorDocument({ title: 'dictation anchor', unrendered: true });
+                    const tanch = Docs.Create.TextConfigDocument({ title: 'dictation anchor' });
                     return this.addDocument(tanch) ? tanch : undefined;
                 };
                 const link = DocUtils.MakeLinkToActiveAudio(textanchorFunc, false).lastElement();
                 if (link) {
                     Doc.GetProto(link).isDictation = true;
-                    const audioanchor = Cast(link.anchor2, Doc, null);
-                    const textanchor = Cast(link.anchor1, Doc, null);
+                    const audioanchor = Cast(link.link_anchor_2, Doc, null);
+                    const textanchor = Cast(link.link_anchor_1, Doc, null);
                     if (audioanchor) {
                         audioanchor.backgroundColor = 'tan';
                         const audiotag = this._editorView.state.schema.nodes.audiotag.create({
@@ -986,7 +1000,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             const splitter = state.schema.marks.splitter.create({ id: Utils.GenerateGuid() });
             let tr = state.tr.addMark(sel.from, sel.to, splitter);
             if (sel.from !== sel.to) {
-                const anchor = anchorDoc ?? Docs.Create.TextanchorDocument({ title: '#' + this._editorView?.state.doc.textBetween(sel.from, sel.to), annotationOn: this.dataDoc, unrendered: true });
+                const anchor =
+                    anchorDoc ??
+                    Docs.Create.TextConfigDocument({
+                        //
+                        title: 'text(' + this._editorView?.state.doc.textBetween(sel.from, sel.to) + ')',
+                        annotationOn: this.dataDoc,
+                    });
                 const href = targetHref ?? Doc.localServerPath(anchor);
                 if (anchor !== anchorDoc && addAsAnnotation) this.addDocument(anchor);
                 tr.doc.nodesBetween(sel.from, sel.to, (node: any, pos: number, parent: any) => {
@@ -1010,7 +1030,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     }
 
     getView = async (doc: Doc) => {
-        if (DocListCast(this.rootDoc[this.SidebarKey]).find(anno => Doc.AreProtosEqual(doc.unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
+        if (DocListCast(this.rootDoc[this.SidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
             !this.SidebarShown && this.toggleSidebar(false);
             setTimeout(() => this._sidebarRef?.current?.makeDocUnfiltered(doc));
         }
@@ -1079,11 +1099,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         }
     };
 
-    // if the scroll height has changed and we're in autoHeight mode, then we need to update the textHeight component of the doc.
+    // if the scroll height has changed and we're in layout_autoHeight mode, then we need to update the textHeight component of the doc.
     // Since we also monitor all component height changes, this will update the document's height.
     resetNativeHeight = (scrollHeight: number) => {
         const nh = this.layoutDoc.isTemplateForField ? 0 : NumCast(this.layoutDoc._nativeHeight);
-        this.rootDoc[this.fieldKey + '-height'] = scrollHeight;
+        this.rootDoc[this.fieldKey + '_height'] = scrollHeight;
         if (nh) this.layoutDoc._nativeHeight = scrollHeight;
     };
 
@@ -1094,9 +1114,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         !this.props.dontSelectOnLoad && this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
         this._cachedLinks = LinkManager.Links(this.Document);
         this._disposers.breakupDictation = reaction(() => DocumentManager.Instance.RecordingEvent, this.breakupDictation);
-        this._disposers.autoHeight = reaction(
-            () => this.autoHeight,
-            autoHeight => autoHeight && this.tryUpdateScrollHeight()
+        this._disposers.layout_autoHeight = reaction(
+            () => this.layout_autoHeight,
+            layout_autoHeight => layout_autoHeight && this.tryUpdateScrollHeight()
         );
         this._disposers.highlights = reaction(
             () => Array.from(FormattedTextBox._globalHighlights).slice(),
@@ -1108,16 +1128,16 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             width => this.tryUpdateScrollHeight()
         );
         this._disposers.scrollHeight = reaction(
-            () => ({ scrollHeight: this.scrollHeight, autoHeight: this.autoHeight, width: NumCast(this.layoutDoc._width) }),
-            ({ width, scrollHeight, autoHeight }) => width && autoHeight && this.resetNativeHeight(scrollHeight),
+            () => ({ scrollHeight: this.scrollHeight, layout_autoHeight: this.layout_autoHeight, width: NumCast(this.layoutDoc._width) }),
+            ({ width, scrollHeight, layout_autoHeight }) => width && layout_autoHeight && this.resetNativeHeight(scrollHeight),
             { fireImmediately: true }
         );
         this._disposers.componentHeights = reaction(
-            // set the document height when one of the component heights changes and autoHeight is on
-            () => ({ sidebarHeight: this.sidebarHeight, textHeight: this.textHeight, autoHeight: this.autoHeight, marginsHeight: this.autoHeightMargins }),
-            ({ sidebarHeight, textHeight, autoHeight, marginsHeight }) => {
+            // set the document height when one of the component heights changes and layout_autoHeight is on
+            () => ({ sidebarHeight: this.sidebarHeight, textHeight: this.textHeight, layout_autoHeight: this.layout_autoHeight, marginsHeight: this.layout_autoHeightMargins }),
+            ({ sidebarHeight, textHeight, layout_autoHeight, marginsHeight }) => {
                 const newHeight = this.contentScaling * (marginsHeight + Math.max(sidebarHeight, textHeight));
-                if (autoHeight && newHeight && newHeight !== this.rootDoc.height && !this.props.dontRegisterView) {
+                if (layout_autoHeight && newHeight && newHeight !== this.rootDoc.height && !this.props.dontRegisterView) {
                     this.props.setHeight?.(newHeight);
                 }
             },
@@ -1142,8 +1162,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         this._disposers.editorState = reaction(
             () => {
                 const dataDoc = Doc.IsDelegateField(DocCast(this.layoutDoc?.proto), this.fieldKey) ? DocCast(this.layoutDoc?.proto) : this?.dataDoc;
-                const whichDoc = !this.dataDoc || !this.layoutDoc ? undefined : dataDoc?.[this.fieldKey + '-noTemplate'] || !this.layoutDoc[this.fieldKey] ? dataDoc : this.layoutDoc;
-                return !whichDoc ? undefined : { data: Cast(whichDoc[this.fieldKey], RichTextField, null), str: Field.toString(whichDoc[this.fieldKey]) };
+                const whichDoc = !this.dataDoc || !this.layoutDoc ? undefined : dataDoc?.[this.fieldKey + '_noTemplate'] || !this.layoutDoc[this.fieldKey] ? dataDoc : this.layoutDoc;
+                return !whichDoc ? undefined : { data: Cast(whichDoc[this.fieldKey], RichTextField, null), str: Field.toString(DocCast(whichDoc[this.fieldKey])) };
             },
             incomingValue => {
                 if (this._editorView && this._applyingChange !== this.fieldKey) {
@@ -1188,7 +1208,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             () => this.props.isSelected(),
             action(selected => {
                 if (FormattedTextBox._globalHighlights.has('Bold Text')) {
-                    this.layoutDoc[CssSym] = this.layoutDoc[CssSym] + 1; // css change happens outside of mobx/react, so this will notify anyone interested in the layout that it has changed
+                    this.layoutDoc[DocCss] = this.layoutDoc[DocCss] + 1; // css change happens outside of mobx/react, so this will notify anyone interested in the layout that it has changed
                 }
                 if (RichTextMenu.Instance?.view === this._editorView && !selected) {
                     RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined);
@@ -1220,7 +1240,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         }
         var quickScroll: string | undefined = '';
         this._disposers.scroll = reaction(
-            () => NumCast(this.layoutDoc._scrollTop),
+            () => NumCast(this.layoutDoc._layout_scrollTop),
             pos => {
                 if (!this._ignoreScroll && this._scrollRef.current && !this.props.dontSelectOnLoad) {
                     const viewTrans = quickScroll ?? StrCast(this.Document._viewTransition);
@@ -1297,7 +1317,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 }
             }, 0);
             dataDoc.title = exportState.title;
-            this.dataDoc['title-custom'] = true;
+            this.dataDoc.title_custom = true;
             dataDoc.googleDocUnchanged = true;
         } else {
             delete dataDoc[GoogleRef];
@@ -1354,7 +1374,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                             view.state.schema.marks.linkAnchor.create({
                                 allAnchors: [{ href: `/doc/${this.rootDoc[Id]}`, title: this.rootDoc.title, anchorId: `${this.rootDoc[Id]}` }],
                                 location: 'add:right',
-                                title: `from: ${DocCast(pdfAnchor.context).title}`,
+                                title: `from: ${DocCast(pdfAnchor.embedContainer).title}`,
                                 noPreview: true,
                                 docref: false,
                             }),
@@ -1363,7 +1383,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         ]),
                     ]);
 
-                    const link = DocUtils.MakeLink(pdfAnchor, this.rootDoc, { linkRelationship: 'PDF pasted' });
+                    const link = DocUtils.MakeLink(pdfAnchor, this.rootDoc, { link_relationship: 'PDF pasted' });
                     if (link) {
                         view.dispatch(view.state.tr.replaceSelectionWith(dashField, false).scrollIntoView().setMeta('paste', true).setMeta('uiEvent', 'paste'));
                     }
@@ -1451,7 +1471,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 if (startupText) {
                     dispatch(state.tr.insertText(startupText));
                 }
-                const textAlign = StrCast(this.dataDoc['text-align'], StrCast(Doc.UserDoc().textAlign, 'left'));
+                const textAlign = StrCast(this.dataDoc.text_align, StrCast(Doc.UserDoc().textAlign, 'left'));
                 if (textAlign !== 'left') {
                     selectAll(this._editorView.state, tr => {
                         this._editorView!.dispatch(tr.replaceSelectionWith(state.schema.nodes.paragraph.create({ align: textAlign })));
@@ -1462,11 +1482,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         }
 
         const selectOnLoad = this.rootDoc[Id] === FormattedTextBox.SelectOnLoad && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()));
-        if (selectOnLoad && !this.props.dontRegisterView && !this.props.dontSelectOnLoad && this.isActiveTab(this.ProseRef)) {
+        if (this._editorView && selectOnLoad && !this.props.dontRegisterView && !this.props.dontSelectOnLoad && this.isActiveTab(this.ProseRef)) {
             const selLoadChar = FormattedTextBox.SelectOnLoadChar;
             FormattedTextBox.SelectOnLoad = '';
             this.props.select(false);
-            if (selLoadChar && this._editorView) {
+            if (selLoadChar) {
                 const $from = this._editorView.state.selection.anchor ? this._editorView.state.doc.resolve(this._editorView.state.selection.anchor - 1) : undefined;
                 const mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) });
                 const curMarks = this._editorView.state.storedMarks ?? $from?.marksAcross(this._editorView.state.selection.$head) ?? [];
@@ -1476,10 +1496,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     .insertText(FormattedTextBox.SelectOnLoadChar, this._editorView.state.doc.content.size - 1, this._editorView.state.doc.content.size)
                     .setStoredMarks(storedMarks);
                 this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(tr.doc.content.size))));
-            } else if (this._editorView && curText && !FormattedTextBox.DontSelectInitialText) {
+            } else if (curText && !FormattedTextBox.DontSelectInitialText) {
                 selectAll(this._editorView.state, this._editorView?.dispatch);
-                this.startUndoTypingBatch();
-            } else if (this._editorView) {
+            } else {
                 this._editorView.dispatch(this._editorView.state.tr.addStoredMark(schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) })));
             }
         }
@@ -1488,18 +1507,20 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         if (this._editorView) {
             const tr = this._editorView.state.tr;
             const { from, to } = tr.selection;
-            // for some reason, the selection is sometimes lost in the sidebar view when prosemirror syncs the seledtion with the dom, so reset the selectoin after the document has ben fully instantiated.
+            // for some reason, the selection is sometimes lost in the sidebar view when prosemirror syncs the seledtion with the dom, so reset the selection after the document has ben fully instantiated.
             if (FormattedTextBox.DontSelectInitialText) setTimeout(() => this._editorView?.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(from), tr.doc.resolve(to)))), 250);
-            this._editorView.state.storedMarks = [
-                ...(this._editorView.state.storedMarks ?? []),
-                ...(!this._editorView.state.storedMarks?.some(mark => mark.type === schema.marks.user_mark) ? [schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) })] : []),
-                ...(Doc.UserDoc().fontColor !== 'transparent' && Doc.UserDoc().fontColor ? [schema.mark(schema.marks.pFontColor, { color: StrCast(Doc.UserDoc().fontColor) })] : []),
-                ...(Doc.UserDoc().fontStyle === 'italics' ? [schema.mark(schema.marks.em)] : []),
-                ...(Doc.UserDoc().textDecoration === 'underline' ? [schema.mark(schema.marks.underline)] : []),
-                ...(Doc.UserDoc().fontFamily ? [schema.mark(schema.marks.pFontFamily, { family: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontFamily) })] : []),
-                ...(Doc.UserDoc().fontSize ? [schema.mark(schema.marks.pFontSize, { fontSize: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontSize) })] : []),
-                ...(Doc.UserDoc().fontWeight === 'bold' ? [schema.mark(schema.marks.strong)] : []),
-            ];
+            this._editorView.dispatch(
+                this._editorView.state.tr.setStoredMarks([
+                    ...(this._editorView.state.storedMarks ?? []),
+                    ...(!this._editorView.state.storedMarks?.some(mark => mark.type === schema.marks.user_mark) ? [schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) })] : []),
+                    ...(Doc.UserDoc().fontColor !== 'transparent' && Doc.UserDoc().fontColor ? [schema.mark(schema.marks.pFontColor, { color: StrCast(Doc.UserDoc().fontColor) })] : []),
+                    ...(Doc.UserDoc().fontStyle === 'italics' ? [schema.mark(schema.marks.em)] : []),
+                    ...(Doc.UserDoc().textDecoration === 'underline' ? [schema.mark(schema.marks.underline)] : []),
+                    ...(Doc.UserDoc().fontFamily ? [schema.mark(schema.marks.pFontFamily, { family: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontFamily) })] : []),
+                    ...(Doc.UserDoc().fontSize ? [schema.mark(schema.marks.pFontSize, { fontSize: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontSize) })] : []),
+                    ...(Doc.UserDoc().fontWeight === 'bold' ? [schema.mark(schema.marks.strong)] : []),
+                ])
+            );
             if (FormattedTextBox.PasteOnLoad) {
                 const pdfAnchorId = FormattedTextBox.PasteOnLoad.clipboardData?.getData('dash/pdfAnchor');
                 FormattedTextBox.PasteOnLoad = undefined;
@@ -1524,7 +1545,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         } else (e.nativeEvent as any).handledByInnerReactInstance = true;
 
         if (this.Document.forceActive) e.stopPropagation();
-        this.tryUpdateScrollHeight(); // if a doc a fitWidth doc is being viewed in different context (eg freeform & lightbox), then it will have conflicting heights.  so when the doc is clicked on, we want to make sure it has the appropriate height for the selected view.
+        this.tryUpdateScrollHeight(); // if a doc a fitWidth doc is being viewed in different embedContainer (eg freeform & lightbox), then it will have conflicting heights.  so when the doc is clicked on, we want to make sure it has the appropriate height for the selected view.
         if ((e.target as any).tagName === 'AUDIOTAG') {
             e.preventDefault();
             e.stopPropagation();
@@ -1575,7 +1596,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         if (!state.selection.empty && !(state.selection instanceof NodeSelection)) this.setupAnchorMenu();
         else if (this.props.isContentActive(true)) {
             const pcords = editor.posAtCoords({ left: e.clientX, top: e.clientY });
-            !this.props.isSelected(true) && editor.dispatch(state.tr.setSelection(new TextSelection(state.doc.resolve(pcords?.pos || 0))));
+            // !this.props.isSelected(true) &&
+            editor.dispatch(state.tr.setSelection(new TextSelection(state.doc.resolve(pcords?.pos || 0))));
             let target = e.target as any; // hrefs are stored on the dataset of the <a> node that wraps the hyerlink <span>
             while (target && !target.dataset?.targethrefs) target = target.parentElement;
             FormattedTextBoxComment.update(this, editor, undefined, target?.dataset?.targethrefs, target?.dataset.linkdoc, target?.dataset.nopreview === 'true');
@@ -1611,7 +1633,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     onFocused = (e: React.FocusEvent): void => {
         //applyDevTools.applyDevTools(this._editorView);
         this.ProseRef?.children[0] === e.nativeEvent.target && this._editorView && RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this.props);
-        this.startUndoTypingBatch();
+        e.stopPropagation();
     };
 
     onClick = (e: React.MouseEvent): void => {
@@ -1686,13 +1708,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         }
     }
     startUndoTypingBatch() {
-        !this._undoTyping && (this._undoTyping = UndoManager.StartBatch('undoTyping'));
+        !this._undoTyping && (this._undoTyping = UndoManager.StartBatch('text edits on ' + this.rootDoc.title));
     }
     public endUndoTypingBatch() {
-        const wasUndoing = this._undoTyping;
         this._undoTyping?.end();
         this._undoTyping = undefined;
-        return wasUndoing;
     }
 
     @action
@@ -1720,13 +1740,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
         const state = this._editorView!.state;
         const curText = state.doc.textBetween(0, state.doc.content.size, ' \n');
-        if (this.layoutDoc.sidebarViewType === 'translation' && !this.fieldKey.includes('translation') && curText.endsWith(' ') && curText !== this._lastText) {
+        if (this.layoutDoc.sidebar_collectionType === 'translation' && !this.fieldKey.includes('translation') && curText.endsWith(' ') && curText !== this._lastText) {
             try {
                 translateGoogleApi(curText, { from: 'en', to: 'es' }).then((result1: any) => {
                     setTimeout(
                         () =>
                             translateGoogleApi(result1[0], { from: 'es', to: 'en' }).then((result: any) => {
-                                this.dataDoc[this.fieldKey + '-translation'] = result1 + '\r\n\r\n' + result[0];
+                                this.dataDoc[this.fieldKey + '_translation'] = result1 + '\r\n\r\n' + result[0];
                             }),
                         1000
                     );
@@ -1736,10 +1756,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             }
             this._lastText = curText;
         }
-        if (StrCast(this.rootDoc.title).startsWith('@') && !this.dataDoc['title-custom']) {
+        if (StrCast(this.rootDoc.title).startsWith('@') && !this.dataDoc.title_custom) {
             UndoManager.RunInBatch(() => {
-                this.dataDoc['title-custom'] = true;
-                this.dataDoc.showTitle = 'title';
+                this.dataDoc.title_custom = true;
+                this.dataDoc.layout_showTitle = 'title';
                 const tr = this._editorView!.state.tr;
                 this._editorView?.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(0), tr.doc.resolve(StrCast(this.rootDoc.title).length + 2))).deleteSelection());
             }, 'titler');
@@ -1802,7 +1822,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         if (!LinkDocPreview.LinkInfo && this._scrollRef.current) {
             if (!this.props.dontSelectOnLoad) {
                 this._ignoreScroll = true;
-                this.layoutDoc._scrollTop = this._scrollRef.current.scrollTop;
+                this.layoutDoc._layout_scrollTop = this._scrollRef.current.scrollTop;
                 this._ignoreScroll = false;
                 e.stopPropagation();
                 e.preventDefault();
@@ -1813,13 +1833,16 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         const margins = 2 * NumCast(this.layoutDoc._yMargin, this.props.yPadding || 0);
         const children = this.ProseRef?.children.length ? Array.from(this.ProseRef.children[0].children) : undefined;
         if (children) {
-            const proseHeight = !this.ProseRef
-                ? 0
-                : children.reduce((p, child) => p + Number(getComputedStyle(child).height.replace('px', '')) + Number(getComputedStyle(child).marginTop.replace('px', '')) + Number(getComputedStyle(child).marginBottom.replace('px', '')), margins);
-            const scrollHeight = this.ProseRef && Math.min(NumCast(this.layoutDoc.docMaxAutoHeight, proseHeight), proseHeight);
+            const toNum = (val: string) => Number(val.replace('px', '').replace('auto', '0'));
+            const toHgt = (node: Element) => {
+                const { height, marginTop, marginBottom } = getComputedStyle(node);
+                return toNum(height) + Math.max(0, toNum(marginTop)) + Math.max(0, toNum(marginBottom));
+            };
+            const proseHeight = !this.ProseRef ? 0 : children.reduce((p, child) => p + toHgt(child), margins);
+            const scrollHeight = this.ProseRef && Math.min(NumCast(this.layoutDoc.layout_maxAutoHeight, proseHeight), proseHeight);
             if (this.props.setHeight && scrollHeight && !this.props.dontRegisterView) {
                 // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation
-                const setScrollHeight = () => (this.rootDoc[this.fieldKey + '-scrollHeight'] = scrollHeight);
+                const setScrollHeight = () => (this.rootDoc[this.fieldKey + '_scrollHeight'] = scrollHeight);
                 if (this.rootDoc === this.layoutDoc || this.layoutDoc.resolvedDataDoc) {
                     setScrollHeight();
                 } else {
@@ -1828,21 +1851,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             }
         }
     };
-    fitContentsToBox = () => BoolCast(this.props.Document._fitContentsToBox);
-    sidebarContentScaling = () => (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._viewScale, 1);
+    fitContentsToBox = () => BoolCast(this.props.Document._freeform_fitContentsToBox);
+    sidebarContentScaling = () => (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1);
     sidebarAddDocument = (doc: Doc | Doc[], sidebarKey: string = this.SidebarKey) => {
-        if (!this.layoutDoc._showSidebar) this.toggleSidebar();
+        if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
         return this.addDocument(doc, sidebarKey);
     };
     sidebarMoveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.moveDocument(doc, targetCollection, addDocument, this.SidebarKey);
     sidebarRemDocument = (doc: Doc | Doc[]) => this.removeDocument(doc, this.SidebarKey);
-    setSidebarHeight = (height: number) => (this.rootDoc[this.SidebarKey + '-height'] = height);
-    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
+    setSidebarHeight = (height: number) => (this.rootDoc[this.SidebarKey + '_height'] = height);
+    sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
     sidebarScreenToLocal = () =>
         this.props
             .ScreenToLocalTransform()
             .translate(-(this.props.PanelWidth() - this.sidebarWidth()) / (this.props.NativeDimScaling?.() || 1), 0)
-            .scale(1 / NumCast(this.layoutDoc._viewScale, 1) / (this.props.NativeDimScaling?.() || 1));
+            .scale(1 / NumCast(this.layoutDoc._freeform_scale, 1) / (this.props.NativeDimScaling?.() || 1));
 
     @computed get audioHandle() {
         return !this._recording ? null : (
@@ -1876,7 +1899,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     color,
                     opacity: annotated ? 1 : undefined,
                 }}>
-                <FontAwesomeIcon icon={'comment-alt'} />
+                <FontAwesomeIcon icon="comment-alt" />
             </div>
         );
     }
@@ -1928,25 +1951,25 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         fitContentsToBox={this.fitContentsToBox}
                         noSidebar={true}
                         treeViewHideTitle={true}
-                        fieldKey={this.layoutDoc.sidebarViewType === 'translation' ? `${this.fieldKey}-translation` : `${this.fieldKey}-sidebar`}
+                        fieldKey={this.layoutDoc.sidebar_collectionType === 'translation' ? `${this.fieldKey}_translation` : `${this.fieldKey}_sidebar`}
                     />
                 </div>
             );
         };
         return (
-            <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
-                {renderComponent(StrCast(this.layoutDoc.sidebarViewType))}
+            <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+                {renderComponent(StrCast(this.layoutDoc.sidebar_collectionType))}
             </div>
         );
     }
     cycleAlternateText = () => {
-        if (this.layoutDoc._showAltContentUI) {
-            const usePath = this.rootDoc[`${this.props.fieldKey}-usePath`];
-            this.rootDoc[`_${this.props.fieldKey}-usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined;
+        if (this.layoutDoc._layout_enableAltContentUI) {
+            const usePath = this.rootDoc[`${this.props.fieldKey}_usePath`];
+            this.rootDoc[`_${this.props.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined;
         }
     };
     @computed get overlayAlternateIcon() {
-        const usePath = this.rootDoc[`${this.props.fieldKey}-usePath`];
+        const usePath = this.rootDoc[`${this.props.fieldKey}_usePath`];
         return (
             <Tooltip
                 title={
@@ -1978,41 +2001,42 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         );
     }
     @computed get fieldKey() {
-        const usePath = StrCast(this.rootDoc[`${this.props.fieldKey}-usePath`]);
-        return this.props.fieldKey + (usePath && (!usePath.includes(':hover') || this._isHovering) ? `-${usePath.replace(':hover', '')}` : '');
+        const usePath = StrCast(this.rootDoc[`${this.props.fieldKey}_usePath`]);
+        return this.props.fieldKey + (usePath && (!usePath.includes(':hover') || this._isHovering) ? `_${usePath.replace(':hover', '')}` : '');
     }
     @observable _isHovering = false;
+    onPassiveWheel = (e: WheelEvent) => {
+        // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
+        if (this.props.isContentActive() && !this.props.allowScroll) {
+            if (!NumCast(this.layoutDoc._layout_scrollTop) && e.deltaY <= 0) e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    _oldWheel: any;
     render() {
         TraceMobx();
         const active = this.props.isContentActive() || this.props.isSelected();
         const selected = active;
-        const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._viewScale, 1);
-        const rounded = StrCast(this.layoutDoc.borderRounding) === '100%' ? '-rounded' : '';
+        const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1);
+        const rounded = StrCast(this.layoutDoc.layout_borderRounding) === '100%' ? '-rounded' : '';
         const interactive = (Doc.ActiveTool === InkTool.None || SnappingManager.GetIsDragging()) && (this.layoutDoc.z || !this.layoutDoc._lockedPosition);
         if (!selected && FormattedTextBoxComment.textBox === this) setTimeout(FormattedTextBoxComment.Hide);
         const minimal = this.props.ignoreAutoHeight;
         const paddingX = NumCast(this.layoutDoc._xMargin, this.props.xPadding || 0);
         const paddingY = NumCast(this.layoutDoc._yMargin, this.props.yPadding || 0);
-        const selPad = (selected && !this.layoutDoc._singleLine) || minimal ? Math.min(paddingY, Math.min(paddingX, 10)) : 0;
-        const selPaddingClass = selected && !this.layoutDoc._singleLine && paddingY >= 10 ? '-selected' : '';
+        const selPad = (selected && !this.layoutDoc._createDocOnCR) || minimal ? Math.min(paddingY, Math.min(paddingX, 10)) : 0;
+        const selPaddingClass = selected && !this.layoutDoc._createDocOnCR && paddingY >= 10 ? '-selected' : '';
         const styleFromLayoutString = Doc.styleFromLayoutString(this.rootDoc, this.layoutDoc, this.props, scale); // this converts any expressions in the format string to style props.  e.g., <FormattedTextBox height='{this._headerHeight}px' >
         return styleFromLayoutString?.height === '0px' ? null : (
             <div
                 className="formattedTextBox"
                 onPointerEnter={action(() => (this._isHovering = true))}
                 onPointerLeave={action(() => (this._isHovering = false))}
-                ref={r =>
-                    r?.addEventListener(
-                        'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
-                        (e: WheelEvent) => {
-                            if (this.props.isContentActive()) {
-                                if (!NumCast(this.layoutDoc._scrollTop) && e.deltaY <= 0) e.preventDefault();
-                                e.stopPropagation();
-                            }
-                        },
-                        { passive: false }
-                    )
-                }
+                ref={r => {
+                    this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
+                    this._oldWheel = r;
+                    r?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
+                }}
                 style={{
                     ...(this.props.dontScale
                         ? {}
@@ -2024,7 +2048,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                           }),
                     display: !SnappingManager.GetIsDragging() && this.props.thumbShown?.() ? 'none' : undefined,
                     transition: 'inherit',
-                    // overflowY: this.layoutDoc._autoHeight ? "hidden" : undefined,
+                    // overflowY: this.layoutDoc._layout_autoHeight ? "hidden" : undefined,
                     color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color),
                     fontSize: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontSize),
                     fontFamily: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontFamily),
@@ -2035,8 +2059,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     className="formattedTextBox-cont"
                     ref={this._ref}
                     style={{
-                        overflow: this.autoHeight && this.props.CollectionFreeFormDocumentView?.() ? 'hidden' : undefined, //x this breaks viewing an autoHeight doc in its own tab, or in the lightbox
-                        height: this.props.height || (this.autoHeight && this.props.renderDepth && !this.props.suppressSetHeight ? 'max-content' : undefined),
+                        overflow: this.layout_autoHeight && this.props.CollectionFreeFormDocumentView?.() ? 'hidden' : undefined, //x this breaks viewing an layout_autoHeight doc in its own tab, or in the lightbox
+                        height: this.props.height || (this.layout_autoHeight && this.props.renderDepth && !this.props.suppressSetHeight ? 'max-content' : undefined),
                         pointerEvents: interactive ? undefined : 'none',
                     }}
                     onContextMenu={this.specificContextMenu}
@@ -2052,9 +2076,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         className={`formattedTextBox-outer${selected ? '-selected' : ''}`}
                         ref={this._scrollRef}
                         style={{
-                            width: this.props.dontSelectOnLoad ? '100%' : `calc(100% - ${this.sidebarWidthPercent})`,
+                            width: this.props.dontSelectOnLoad ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`,
                             pointerEvents: !active && !SnappingManager.GetIsDragging() ? 'none' : undefined,
-                            overflow: this.layoutDoc._singleLine ? 'hidden' : this.layoutDoc._autoHeight ? 'visible' : undefined,
+                            overflow: this.layoutDoc._createDocOnCR ? 'hidden' : this.layoutDoc._layout_autoHeight ? 'visible' : undefined,
                         }}
                         onScroll={this.onScroll}
                         onDrop={this.ondrop}>
@@ -2071,10 +2095,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                             }}
                         />
                     </div>
-                    {this.noSidebar || this.props.dontSelectOnLoad || !this.SidebarShown || this.sidebarWidthPercent === '0%' ? null : this.sidebarCollection}
-                    {this.noSidebar || this.Document._noSidebar || this.props.dontSelectOnLoad || this.Document._singleLine ? null : this.sidebarHandle}
+                    {this.noSidebar || this.props.dontSelectOnLoad || !this.SidebarShown || this.layout_sidebarWidthPercent === '0%' ? null : this.sidebarCollection}
+                    {this.noSidebar || this.Document._layout_noSidebar || this.props.dontSelectOnLoad || this.Document._createDocOnCR ? null : this.sidebarHandle}
                     {this.audioHandle}
-                    {this.layoutDoc._showAltContentUI ? this.overlayAlternateIcon : null}
+                    {this.layoutDoc._layout_enableAltContentUI ? this.overlayAlternateIcon : null}
                 </div>
             </div>
         );
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index f0caa1f4f..7c3e4baad 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -138,7 +138,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
 
         this.activeListType = this.getActiveListStyle();
         this._activeAlignment = this.getActiveAlignment();
-        this._activeFontFamily = !activeFamilies.length ? StrCast(this.TextView?.Document.fontFamily, StrCast(Doc.UserDoc().fontFamily, 'Arial')) : activeFamilies.length === 1 ? String(activeFamilies[0]) : 'various';
+        this._activeFontFamily = !activeFamilies.length ? StrCast(this.TextView?.Document._text_fontFamily, StrCast(Doc.UserDoc().fontFamily, 'Arial')) : activeFamilies.length === 1 ? String(activeFamilies[0]) : 'various';
         this._activeFontSize = !activeSizes.length ? StrCast(this.TextView?.Document.fontSize, StrCast(Doc.UserDoc().fontSize, '10px')) : activeSizes[0];
         this._activeFontColor = !activeColors.length ? StrCast(this.TextView?.Document.fontColor, StrCast(Doc.UserDoc().fontColor, 'black')) : activeColors.length > 0 ? String(activeColors[0]) : '...';
         this._activeHighlightColor = !activeHighlights.length ? '' : activeHighlights.length > 0 ? String(activeHighlights[0]) : '...';
@@ -221,7 +221,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
                 m.type === state.schema.marks.marker && activeHighlights.add(String(m.attrs.highlight));
             });
         } else if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) {
-            SelectionManager.Views().forEach(dv => StrCast(dv.rootDoc._fontSize) && activeSizes.add(StrCast(dv.rootDoc._fontSize)));
+            SelectionManager.Views().forEach(dv => StrCast(dv.rootDoc._text_fontSize) && activeSizes.add(StrCast(dv.rootDoc._text_fontSize)));
         }
         return { activeFamilies: Array.from(activeFamilies), activeSizes: Array.from(activeSizes), activeColors: Array.from(activeColors), activeHighlights: Array.from(activeHighlights) };
     }
@@ -345,8 +345,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
                 this.view.focus();
             }
         } else if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) {
-            SelectionManager.Views().forEach(dv => (dv.rootDoc._fontSize = fontSize));
-        } else Doc.UserDoc()._fontSize = fontSize;
+            SelectionManager.Views().forEach(dv => (dv.rootDoc._text_fontSize = fontSize));
+        } else Doc.UserDoc().fontSize = fontSize;
         this.updateMenu(this.view, undefined, this.props);
     };
 
@@ -355,7 +355,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
             const fmark = this.view.state.schema.marks.pFontFamily.create({ family: family });
             this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true);
             this.view.focus();
-        } else Doc.UserDoc()._fontFamily = family;
+        } else Doc.UserDoc().fontFamily = family;
         this.updateMenu(this.view, undefined, this.props);
     };
 
@@ -623,15 +623,15 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
                     if (linkclicked) {
                         const linkDoc = await DocServer.GetRefField(linkclicked);
                         if (linkDoc instanceof Doc) {
-                            const anchor1 = await Cast(linkDoc.anchor1, Doc);
-                            const anchor2 = await Cast(linkDoc.anchor2, Doc);
+                            const link_anchor_1 = await Cast(linkDoc.link_anchor_1, Doc);
+                            const link_anchor_2 = await Cast(linkDoc.link_anchor_2, Doc);
                             const currentDoc = SelectionManager.Docs().lastElement();
-                            if (currentDoc && anchor1 && anchor2) {
-                                if (Doc.AreProtosEqual(currentDoc, anchor1)) {
-                                    return StrCast(anchor2.title);
+                            if (currentDoc && link_anchor_1 && link_anchor_2) {
+                                if (Doc.AreProtosEqual(currentDoc, link_anchor_1)) {
+                                    return StrCast(link_anchor_2.title);
                                 }
-                                if (Doc.AreProtosEqual(currentDoc, anchor2)) {
-                                    return StrCast(anchor1.title);
+                                if (Doc.AreProtosEqual(currentDoc, link_anchor_2)) {
+                                    return StrCast(link_anchor_1.title);
                                 }
                             }
                         }
@@ -758,11 +758,11 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         //         <div className="collectionMenu-divider" key="divider 3" />
         //         {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size", action((val: string) => {
         //             this.activeFontSize = val;
-        //             SelectionManager.Views().map(dv => dv.props.Document._fontSize = val);
+        //             SelectionManager.Views().map(dv => dv.props.Document._text_fontSize = val);
         //         })),
         //         this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => {
         //             this.activeFontFamily = val;
-        //             SelectionManager.Views().map(dv => dv.props.Document._fontFamily = val);
+        //             SelectionManager.Views().map(dv => dv.props.Document._text_fontFamily = val);
         //         })),
         //         <div className="collectionMenu-divider" key="divider 4" />,
         //         this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", () => ({})),
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index cad56b14b..ac1e7ce5d 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -1,11 +1,11 @@
 import { ellipsis, emDash, InputRule, smartQuotes, textblockTypeInputRule } from 'prosemirror-inputrules';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import { DataSym, Doc, StrListCast } from '../../../../fields/Doc';
+import { Doc, StrListCast } from '../../../../fields/Doc';
+import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { ComputedField } from '../../../../fields/ScriptField';
-import { NumCast, StrCast } from '../../../../fields/Types';
-import { normalizeEmail } from '../../../../fields/util';
+import { NumCast } from '../../../../fields/Types';
 import { Utils } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
 import { Docs, DocUtils } from '../../../documents/Documents';
@@ -76,14 +76,23 @@ export class RichTextRules {
 
             //Create annotation to a field on the text document
             new InputRule(new RegExp(/>>$/), (state, match, start, end) => {
-                const textDoc = this.Document[DataSym];
+                const textDoc = this.Document[DocData];
                 const numInlines = NumCast(textDoc.inlineTextCount);
                 textDoc.inlineTextCount = numInlines + 1;
                 const inlineFieldKey = 'inline' + numInlines; // which field on the text document this annotation will write to
                 const inlineLayoutKey = 'layout_' + inlineFieldKey; // the field holding the layout string that will render the inline annotation
-                const textDocInline = Docs.Create.TextDocument('', { _layoutKey: inlineLayoutKey, _width: 75, _height: 35, annotationOn: textDoc, _fitWidth: true, _autoHeight: true, _fontSize: '9px', title: 'inline comment' });
+                const textDocInline = Docs.Create.TextDocument('', {
+                    _layout_fieldKey: inlineLayoutKey,
+                    _width: 75,
+                    _height: 35,
+                    annotationOn: textDoc,
+                    _layout_fitWidth: true,
+                    _layout_autoHeight: true,
+                    _text_fontSize: '9px',
+                    title: 'inline comment',
+                });
                 textDocInline.title = inlineFieldKey; // give the annotation its own title
-                textDocInline['title-custom'] = true; // And make sure that it's 'custom' so that editing text doesn't change the title of the containing doc
+                textDocInline.title_custom = true; // And make sure that it's 'custom' so that editing text doesn't change the title of the containing doc
                 textDocInline.isTemplateForField = inlineFieldKey; // this is needed in case the containing text doc is converted to a template at some point
                 textDocInline.proto = textDoc; // make the annotation inherit from the outer text doc so that it can resolve any nested field references, e.g., [[field]]
                 textDocInline._textContext = ComputedField.MakeFunction(`copyField(self.${inlineFieldKey})`);
@@ -249,7 +258,7 @@ export class RichTextRules {
                         this.TextBox.EditorView?.dispatch(rstate.tr.setSelection(new TextSelection(rstate.doc.resolve(start), rstate.doc.resolve(end - 3))));
                     }
 
-                    DocUtils.MakeLink(this.TextBox.getAnchor(true), target, { linkRelationship: 'portal to:portal from' });
+                    DocUtils.MakeLink(this.TextBox.getAnchor(true), target, { link_relationship: 'portal to:portal from' });
 
                     const fstate = this.TextBox.EditorView?.state;
                     if (fstate && selection) {
@@ -268,7 +277,7 @@ export class RichTextRules {
                 }
                 if (value !== '' && value !== undefined) {
                     const num = value.match(/^[0-9.]$/);
-                    this.Document[DataSym][fieldKey] = value === 'true' ? true : value === 'false' ? false : num ? Number(value) : value;
+                    this.Document[DocData][fieldKey] = value === 'true' ? true : value === 'false' ? false : num ? Number(value) : value;
                 }
                 const fieldView = state.schema.nodes.dashField.create({ fieldKey, docId, hideKey: false });
                 return state.tr.setSelection(new TextSelection(state.doc.resolve(start), state.doc.resolve(end))).replaceSelectionWith(fieldView, true);
@@ -299,37 +308,15 @@ export class RichTextRules {
                 return tr.setSelection(new NodeSelection(tr.doc.resolve(tr.selection.$from.pos - 1)));
             }),
 
-            // create an inline view of a document {{ <layoutKey> : <Doc> }}
-            // {{:Doc}} => show default view of document
-            // {{<layout>}} => show layout for this doc
-            // {{<layout> : Doc}} => show layout for another doc
-            new InputRule(new RegExp(/\{\{([a-zA-Z_ \-0-9]*)(\([a-zA-Z0-9…._/\-]*\))?(:[a-zA-Z_@\.\? \-0-9]+)?\}\}$/), (state, match, start, end) => {
-                const fieldKey = match[1] || '';
-                const fieldParam = match[2]?.replace('…', '...') || '';
-                const rawdocid = match[3]?.substring(1);
-                const docId = rawdocid ? (!rawdocid.includes('@') ? normalizeEmail(Doc.CurrentUserEmail) + '@' + rawdocid : rawdocid) : undefined;
-                if (!fieldKey && !docId) return state.tr;
-                docId &&
-                    DocServer.GetRefField(docId).then(docx => {
-                        if (!(docx instanceof Doc && docx)) {
-                            Docs.Create.FreeformDocument([], { title: rawdocid, _width: 500, _height: 500 }, docId);
-                        }
-                    });
-                const node = (state.doc.resolve(start) as any).nodeAfter;
-                const dashDoc = schema.nodes.dashDoc.create({ width: 75, height: 75, title: 'dashDoc', docId, fieldKey: fieldKey + fieldParam, float: 'unset', alias: Utils.GenerateGuid() });
-                const sm = state.storedMarks || undefined;
-                return node ? state.tr.replaceRangeWith(start, end, dashDoc).setStoredMarks([...node.marks, ...(sm ? sm : [])]) : state.tr;
-            }),
-
             // create an inline view of a tag stored under the '#' field
             new InputRule(new RegExp(/#([a-zA-Z_\-]+[a-zA-Z_\-0-9]*)\s$/), (state, match, start, end) => {
                 const tag = match[1];
                 if (!tag) return state.tr;
-                //this.Document[DataSym]['#' + tag] = '#' + tag;
-                const tags = StrListCast(this.Document[DataSym].tags);
+                //this.Document[DocData]['#' + tag] = '#' + tag;
+                const tags = StrListCast(this.Document[DocData].tags);
                 if (!tags.includes(tag)) {
                     tags.push(tag);
-                    this.Document[DataSym].tags = new List<string>(tags);
+                    this.Document[DocData].tags = new List<string>(tags);
                 }
                 const fieldView = state.schema.nodes.dashField.create({ fieldKey: '#' + tag });
                 return state.tr
diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts
index 5b47e8a70..7e17008bb 100644
--- a/src/client/views/nodes/formattedText/marks_rts.ts
+++ b/src/client/views/nodes/formattedText/marks_rts.ts
@@ -46,7 +46,7 @@ export const marks: { [index: string]: MarkSpec } = {
         toDOM(node: any) {
             const targethrefs = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.href : item.href), '');
             const anchorids = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.anchorId : item.anchorId), '');
-            return ['a', { class: anchorids, 'data-targethrefs': targethrefs, 'data-linkdoc': node.attrs.linkDoc, title: node.attrs.title, location: node.attrs.location, style: `background: lightBlue` }, 0];
+            return ['a', { class: anchorids, 'data-targethrefs': targethrefs, 'data-noPreview': 'true', 'data-linkdoc': node.attrs.linkDoc, title: node.attrs.title, location: node.attrs.location, style: `background: lightBlue` }, 0];
         },
     },
     noAutoLinkAnchor: {
diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts
index 6c9d5d31a..f27fb18e2 100644
--- a/src/client/views/nodes/formattedText/nodes_rts.ts
+++ b/src/client/views/nodes/formattedText/nodes_rts.ts
@@ -247,7 +247,7 @@ export const nodes: { [index: string]: NodeSpec } = {
             hidden: { default: false }, // whether dashComment node has toggle the dashDoc's display off
             fieldKey: { default: '' },
             docId: { default: '' },
-            alias: { default: '' },
+            embedding: { default: '' },
         },
         group: 'inline',
         draggable: false,
diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index eb91c82f3..bf56b4d9e 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -951,6 +951,7 @@
         margin-right: unset;
         height: 100%;
         position: relative;
+        user-select: none;
     }
 
     select {
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index bd2be8f11..505e39d97 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -3,9 +3,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
-import { AnimationSym, Doc, DocListCast, Field, FieldResult, Opt, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, FieldResult, Opt, StrListCast } from '../../../../fields/Doc';
+import { Animation } from '../../../../fields/DocSymbols';
 import { Copy, Id } from '../../../../fields/FieldSymbols';
-import { InkField, InkTool } from '../../../../fields/InkField';
+import { InkField } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
 import { ObjectField } from '../../../../fields/ObjectField';
 import { listSpec } from '../../../../fields/Schema';
@@ -41,7 +42,7 @@ export interface pinDataTypes {
     scrollable?: boolean;
     dataviz?: number[];
     pannable?: boolean;
-    viewType?: boolean;
+    type_collection?: boolean;
     inkable?: boolean;
     filters?: boolean;
     pivot?: boolean;
@@ -103,10 +104,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _presKeyEvents: boolean = false;
     @observable _forceKeyEvents: boolean = false;
     @computed get isTreeOrStack() {
-        return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._viewType) as any);
+        return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._type_collection) as any);
     }
     @computed get isTree() {
-        return this.layoutDoc._viewType === CollectionViewType.Tree;
+        return this.layoutDoc._type_collection === CollectionViewType.Tree;
     }
     @computed get presFieldKey() {
         return StrCast(this.layoutDoc.presFieldKey, 'data');
@@ -128,14 +129,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     public static targetRenderedDoc = (doc: Doc) => {
         const targetDoc = Cast(doc?.presentationTargetDoc, Doc, null);
-        return targetDoc?.unrendered ? DocCast(targetDoc.annotationOn) : targetDoc;
+        return targetDoc?.layout_unrendered ? DocCast(targetDoc.annotationOn) : targetDoc;
     };
     @computed get scrollable() {
-        if ([DocumentType.PDF, DocumentType.WEB, DocumentType.RTF].includes(this.targetDoc.type as DocumentType) || this.targetDoc._viewType === CollectionViewType.Stacking) return true;
+        if ([DocumentType.PDF, DocumentType.WEB, DocumentType.RTF].includes(this.targetDoc.type as DocumentType) || this.targetDoc._type_collection === CollectionViewType.Stacking) return true;
         return false;
     }
     @computed get panable() {
-        if ((this.targetDoc.type === DocumentType.COL && this.targetDoc._viewType === CollectionViewType.Freeform) || this.targetDoc.type === DocumentType.IMG) return true;
+        if ((this.targetDoc.type === DocumentType.COL && this.targetDoc._type_collection === CollectionViewType.Freeform) || this.targetDoc.type === DocumentType.IMG) return true;
         return false;
     }
     @computed get selectedDocumentView() {
@@ -196,7 +197,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.turnOffEdit(true);
         this._disposers.selection = reaction(
             () => SelectionManager.Views(),
-            views => views.some(view => view.props.Document === this.rootDoc) && this.updateCurrentPresentation()
+            views => (!PresBox.Instance || views.some(view => view.props.Document === this.rootDoc)) && this.updateCurrentPresentation(),
+            { fireImmediately: true }
         );
         this._disposers.editing = reaction(
             () => this.layoutDoc.presStatus === PresStatus.Edit,
@@ -273,8 +275,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     progressivizedItems = (doc: Doc) => {
         const targetList = PresBox.targetRenderedDoc(doc);
         if (doc.presIndexed !== 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.unrendered);
+            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);
         }
     };
     // Called when the user activates 'next' - to move to the next part of the pres. trail
@@ -330,7 +332,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     back = () => {
         const activeItem: Doc = this.activeItem;
-        const prevItem = Cast(this.childDocs[Math.max(0, this.itemIndex - 1)], Doc, null);
         let prevSelected = this.itemIndex;
         // Functionality for group with up
         let didZoom = activeItem.presMovement;
@@ -376,25 +377,25 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     static pinDataTypes(target?: Doc): pinDataTypes {
         const targetType = target?.type as any;
         const inkable = [DocumentType.INK].includes(targetType);
-        const scrollable = [DocumentType.PDF, DocumentType.RTF, DocumentType.WEB].includes(targetType) || target?._viewType === CollectionViewType.Stacking;
-        const pannable = [DocumentType.IMG, DocumentType.PDF].includes(targetType) || (targetType === DocumentType.COL && target?._viewType === CollectionViewType.Freeform);
+        const scrollable = [DocumentType.PDF, DocumentType.RTF, DocumentType.WEB].includes(targetType) || target?._type_collection === CollectionViewType.Stacking;
+        const pannable = [DocumentType.IMG, DocumentType.PDF].includes(targetType) || (targetType === DocumentType.COL && target?._type_collection === CollectionViewType.Freeform);
         const temporal = [DocumentType.AUDIO, DocumentType.VID].includes(targetType);
         const clippable = [DocumentType.COMPARISON].includes(targetType);
         const datarange = [DocumentType.FUNCPLOT].includes(targetType);
         const dataview = [DocumentType.INK, DocumentType.COL, DocumentType.IMG, DocumentType.RTF].includes(targetType) && target?.activeFrame === undefined;
         const poslayoutview = [DocumentType.COL].includes(targetType) && target?.activeFrame === undefined;
-        const viewType = targetType === DocumentType.COL;
+        const type_collection = targetType === DocumentType.COL;
         const filters = true;
         const pivot = true;
         const dataannos = false;
-        return { scrollable, pannable, inkable, viewType, pivot, filters, temporal, clippable, dataview, datarange, poslayoutview, dataannos };
+        return { scrollable, pannable, inkable, type_collection, pivot, filters, temporal, clippable, dataview, datarange, poslayoutview, dataannos };
     }
 
     @action
     playAnnotation = (anno: AudioField) => {};
     @action
     static restoreTargetDocView(bestTargetView: Opt<DocumentView>, activeItem: Doc, transTime: number, pinDocLayout: boolean = BoolCast(activeItem.presPinLayout), pinDataTypes?: pinDataTypes, targetDoc?: Doc) {
-        const bestTarget = bestTargetView?.rootDoc ?? (targetDoc?.unrendered ? DocCast(targetDoc?.annotationOn) : targetDoc);
+        const bestTarget = bestTargetView?.rootDoc ?? (targetDoc?.layout_unrendered ? DocCast(targetDoc?.annotationOn) : targetDoc);
         if (!bestTarget || activeItem === bestTarget) return;
         let changed = false;
         if (pinDocLayout) {
@@ -419,7 +420,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const activeFrame = activeItem.presActiveFrame ?? activeItem.presCurrentFrame;
         if (activeFrame !== undefined) {
             const transTime = NumCast(activeItem.presTransition, 500);
-            const acontext = activeItem.presActiveFrame !== undefined ? DocCast(DocCast(activeItem.presentationTargetDoc).context) : DocCast(activeItem.presentationTargetDoc);
+            const acontext = activeItem.presActiveFrame !== undefined ? DocCast(DocCast(activeItem.presentationTargetDoc).embedContainer) : DocCast(activeItem.presentationTargetDoc);
             const context = DocCast(acontext)?.annotationOn ? DocCast(DocCast(acontext).annotationOn) : acontext;
             if (context) {
                 const ffview = DocumentManager.Instance.getFirstDocumentView(context)?.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
@@ -429,6 +430,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 }
             }
         }
+        if ((pinDataTypes?.dataview && activeItem.presData !== undefined) || (!pinDataTypes && activeItem.presData !== 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;
+            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]();
@@ -440,14 +450,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             }
         }
         if (pinDataTypes?.clippable || (!pinDataTypes && activeItem.presClipWidth !== undefined)) {
-            if (bestTarget._clipWidth !== activeItem.presClipWidth) {
-                bestTarget._clipWidth = activeItem.presClipWidth;
+            const fkey = '_' + Doc.LayoutFieldKey(bestTarget);
+            if (bestTarget[fkey + '_clipWidth'] !== activeItem.presClipWidth) {
+                bestTarget[fkey + '_clipWidth'] = activeItem.presClipWidth;
                 changed = true;
             }
         }
         if (pinDataTypes?.temporal || (!pinDataTypes && activeItem.presStartTime !== undefined)) {
-            if (bestTarget._currentTimecode !== activeItem.presStartTime) {
-                bestTarget._currentTimecode = activeItem.presStartTime;
+            if (bestTarget._layout_currentTimecode !== activeItem.presStartTime) {
+                bestTarget._layout_currentTimecode = activeItem.presStartTime;
                 changed = true;
             }
         }
@@ -469,16 +480,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 changed = true;
             }
         }
-        if ((pinDataTypes?.viewType && activeItem.presViewType !== undefined) || (!pinDataTypes && activeItem.presViewType !== undefined)) {
-            if (bestTarget._viewType !== activeItem.presViewType) {
-                bestTarget._viewType = activeItem.presViewType;
+        if ((pinDataTypes?.type_collection && activeItem.presViewType !== undefined) || (!pinDataTypes && activeItem.presViewType !== undefined)) {
+            if (bestTarget._type_collection !== activeItem.presViewType) {
+                bestTarget._type_collection = activeItem.presViewType;
                 changed = true;
             }
         }
 
         if ((pinDataTypes?.filters && activeItem.presDocFilters !== undefined) || (!pinDataTypes && activeItem.presDocFilters !== undefined)) {
-            if (bestTarget.docFilters !== activeItem.presDocFilters) {
-                bestTarget.docFilters = ObjectField.MakeCopy(activeItem.presDocFilters as ObjectField) || new List<string>([]);
+            if (bestTarget.childFilters !== activeItem.presDocFilters) {
+                bestTarget.childFilters = ObjectField.MakeCopy(activeItem.presDocFilters as ObjectField) || new List<string>([]);
                 changed = true;
             }
         }
@@ -495,8 +506,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
 
         if (pinDataTypes?.scrollable || (!pinDataTypes && activeItem.presViewScroll !== undefined)) {
-            if (bestTarget._scrollTop !== activeItem.presViewScroll) {
-                bestTarget._scrollTop = activeItem.presViewScroll;
+            if (bestTarget._layout_scrollTop !== activeItem.presViewScroll) {
+                bestTarget._layout_scrollTop = activeItem.presViewScroll;
                 changed = true;
                 const contentBounds = Cast(activeItem.presPinViewBounds, listSpec('number'));
                 if (contentBounds) {
@@ -507,26 +518,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
         if (pinDataTypes?.dataannos || (!pinDataTypes && activeItem.presAnnotations !== undefined)) {
             const fkey = Doc.LayoutFieldKey(bestTarget);
-            const oldItems = DocListCast(bestTarget[fkey + '-annotations']).filter(doc => doc.unrendered);
+            const oldItems = DocListCast(bestTarget[fkey + '_annotations']).filter(doc => doc.layout_unrendered);
             const newItems = DocListCast(activeItem.presAnnotations).map(doc => {
                 doc.hidden = false;
                 return doc;
             });
-            const hiddenItems = DocListCast(bestTarget[fkey + '-annotations'])
-                .filter(doc => !doc.unrendered && !newItems.includes(doc))
+            const hiddenItems = DocListCast(bestTarget[fkey + '_annotations'])
+                .filter(doc => !doc.layout_unrendered && !newItems.includes(doc))
                 .map(doc => {
                     doc.hidden = true;
                     return doc;
                 });
             const newList = new List<Doc>([...oldItems, ...hiddenItems, ...newItems]);
-            Doc.GetProto(bestTarget)[fkey + '-annotations'] = newList;
-        }
-        if ((pinDataTypes?.dataview && activeItem.presData !== undefined) || (!pinDataTypes && activeItem.presData !== undefined)) {
-            bestTarget._dataTransition = `all ${transTime}ms`;
-            const fkey = Doc.LayoutFieldKey(bestTarget);
-            Doc.GetProto(bestTarget)[fkey] = activeItem.presData instanceof ObjectField ? activeItem.presData[Copy]() : activeItem.presData;
-            bestTarget[fkey + '-usePath'] = activeItem.presUsePath;
-            setTimeout(() => (bestTarget._dataTransition = undefined), transTime + 10);
+            Doc.GetProto(bestTarget)[fkey + '_annotations'] = newList;
         }
         if (pinDataTypes?.poslayoutview || (!pinDataTypes && activeItem.presPinLayoutData !== undefined)) {
             changed = true;
@@ -558,20 +562,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             const contentBounds = Cast(activeItem.presPinViewBounds, 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._panX = viewport.panX;
-                bestTarget._panY = viewport.panY;
+                bestTarget._freeform_panX = viewport.panX;
+                bestTarget._freeform_panY = viewport.panY;
                 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._viewScale = computedScale);
+                    activeItem.presMovement === PresMovement.Zoom && (bestTarget._freeform_scale = computedScale);
                     dv.ComponentView?.brushView?.(viewport);
                 }
             } else {
-                if (bestTarget._panX !== activeItem.presPanX || bestTarget._panY !== activeItem.presPanY || bestTarget._viewScale !== activeItem.presViewScale) {
-                    bestTarget._panX = activeItem.presPanX ?? bestTarget._panX;
-                    bestTarget._panY = activeItem.presPanY ?? bestTarget._panY;
-                    bestTarget._viewScale = activeItem.presViewScale ?? bestTarget._viewScale;
+                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;
                     changed = true;
                 }
             }
@@ -600,7 +604,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 pinProps.pinData.scrollable ||
                 pinProps.pinData.temporal ||
                 pinProps.pinData.pannable ||
-                pinProps.pinData.viewType ||
+                pinProps.pinData.type_collection ||
                 pinProps.pinData.clippable ||
                 pinProps.pinData.datarange ||
                 pinProps.pinData.dataview ||
@@ -608,12 +612,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 pinProps?.activeFrame !== undefined;
             const fkey = Doc.LayoutFieldKey(targetDoc);
             if (pinProps.pinData.dataview) {
-                pinDoc.presUsePath = targetDoc[fkey + '-usePath'];
+                pinDoc.presUsePath = targetDoc[fkey + '_usePath'];
                 pinDoc.presData = 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.unrendered));
+                pinDoc.presAnnotations = new List<Doc>(DocListCast(Doc.GetProto(targetDoc)[fkey + '_annotations']).filter(doc => !doc.layout_unrendered));
             }
             if (pinProps.pinData.inkable) {
                 pinDoc.presFillColor = targetDoc.fillColor;
@@ -621,8 +625,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 pinDoc.presWidth = targetDoc._width;
                 pinDoc.presHeight = targetDoc._height;
             }
-            if (pinProps.pinData.scrollable) pinDoc.presViewScroll = targetDoc._scrollTop;
-            if (pinProps.pinData.clippable) pinDoc.presClipWidth = targetDoc._clipWidth;
+            if (pinProps.pinData.scrollable) pinDoc.presViewScroll = targetDoc._layout_scrollTop;
+            if (pinProps.pinData.clippable) {
+                const fkey = Doc.LayoutFieldKey(targetDoc);
+                pinDoc.presClipWidth = targetDoc[fkey + '_clipWidth'];
+            }
             if (pinProps.pinData.datarange) {
                 pinDoc.presXRange = undefined; //targetDoc?.xrange;
                 pinDoc.presYRange = undefined; //targetDoc?.yrange;
@@ -643,17 +650,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         })
                     )
                 );
-            if (pinProps.pinData.viewType) pinDoc.presViewType = targetDoc._viewType;
-            if (pinProps.pinData.filters) pinDoc.presDocFilters = ObjectField.MakeCopy(targetDoc.docFilters as ObjectField);
+            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.pannable) {
-                pinDoc.presPanX = NumCast(targetDoc._panX);
-                pinDoc.presPanY = NumCast(targetDoc._panY);
-                pinDoc.presViewScale = NumCast(targetDoc._viewScale, 1);
+                pinDoc.presPanX = NumCast(targetDoc._freeform_panX);
+                pinDoc.presPanY = NumCast(targetDoc._freeform_panY);
+                pinDoc.presViewScale = NumCast(targetDoc._freeform_scale, 1);
             }
             if (pinProps.pinData.temporal) {
-                pinDoc.presStartTime = targetDoc._currentTimecode;
-                const duration = NumCast(pinDoc[`${Doc.LayoutFieldKey(pinDoc)}-duration`], NumCast(targetDoc.presStartTime) + 0.1);
+                pinDoc.presStartTime = targetDoc._layout_currentTimecode;
+                const duration = NumCast(pinDoc[`${Doc.LayoutFieldKey(pinDoc)}_duration`], NumCast(targetDoc.presStartTime) + 0.1);
                 pinDoc.presEndTime = NumCast(targetDoc.clipEnd, duration);
             }
         }
@@ -661,7 +668,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             // If pinWithView option set then update scale and x / y props of slide
             const bounds = pinProps.pinViewport;
             pinDoc.presPinView = true;
-            pinDoc.presViewScale = NumCast(targetDoc._viewScale, 1);
+            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]);
@@ -681,7 +688,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const finished = () => {
             afterNav?.();
             console.log('Finish Slide Nav: ' + targetDoc.title);
-            targetDoc[AnimationSym] = undefined;
+            targetDoc[Animation] = undefined;
         };
         const selViewCache = Array.from(this.selectedArray);
         const dragViewCache = Array.from(this._dragArray);
@@ -727,7 +734,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             }
         }
         if (targetDoc) {
-            if (activeItem.presentationTargetDoc instanceof Doc) activeItem.presentationTargetDoc[AnimationSym] = undefined;
+            if (activeItem.presentationTargetDoc instanceof Doc) activeItem.presentationTargetDoc[Animation] = undefined;
 
             DocumentManager.Instance.AddViewRenderedCb(LightboxView.LightboxDoc, dv => {
                 // if target or the doc it annotates is not in the lightbox, then close the lightbox
@@ -791,7 +798,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const savedStates = docs.map(doc => {
             switch (doc.type) {
                 case DocumentType.COL:
-                    if (doc._viewType === CollectionViewType.Freeform) return { type: CollectionViewType.Freeform, doc, x: NumCast(doc.panX), y: NumCast(doc.panY), s: NumCast(doc.viewScale) };
+                    if (doc._type_collection === CollectionViewType.Freeform) return { type: CollectionViewType.Freeform, doc, x: NumCast(doc.freeform_panX), y: NumCast(doc.freeform_panY), s: NumCast(doc.freeform_scale) };
                     break;
                 case DocumentType.INK:
                     if (doc.data instanceof InkField) {
@@ -809,9 +816,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         case CollectionViewType.Freeform:
                             {
                                 const { x, y, s, doc } = savedState!;
-                                doc._panX = x;
-                                doc._panY = y;
-                                doc._viewScale = s;
+                                doc._freeform_panX = x;
+                                doc._freeform_panY = y;
+                                doc._freeform_scale = s;
                             }
                             break;
                         case DocumentType.INK:
@@ -827,7 +834,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     }
                 });
             LightboxView.SetLightboxDoc(undefined);
-            Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, this.rootDoc);
+            Doc.RemFromMyOverlay(this.rootDoc);
             return PresStatus.Edit;
         };
     };
@@ -923,8 +930,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return PresBox.OpenPresMinimized(this.rootDoc, [pt[0] + (this.props.PanelWidth() - 250), pt[1] + 10]);
     };
     exitMinimize = () => {
-        if (DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc)) {
-            Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, this.rootDoc);
+        if (Doc.IsInMyOverlay(this.layoutDoc)) {
+            Doc.RemFromMyOverlay(this.rootDoc);
             CollectionDockingView.AddSplit(this.rootDoc, OpenWhereMod.right);
         }
         return PresStatus.Edit;
@@ -936,7 +943,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         doc.overlayY = pt[1];
         doc._height = 30;
         doc._width = PresBox.minimizedWidth;
-        Doc.AddDocToList(Doc.MyOverlayDocs, undefined, doc);
+        Doc.AddToMyOverlay(doc);
         PresBox.Instance?.initializePresState(PresBox.Instance.itemIndex);
         return (doc.presStatus = PresStatus.Manual);
     }
@@ -948,11 +955,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @undoBatch
     viewChanged = action((e: React.ChangeEvent) => {
         //@ts-ignore
-        const viewType = e.target.selectedOptions[0].value as CollectionViewType;
-        this.layoutDoc.presFieldKey = this.fieldKey + (viewType === CollectionViewType.Tree ? '-linearized' : '');
+        const type_collection = e.target.selectedOptions[0].value as CollectionViewType;
+        this.layoutDoc.presFieldKey = this.fieldKey + (type_collection === CollectionViewType.Tree ? '-linearized' : '');
         // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
-        [CollectionViewType.Tree || CollectionViewType.Stacking].includes(viewType) && (this.rootDoc._pivotField = undefined);
-        this.rootDoc._viewType = viewType;
+        [CollectionViewType.Tree || CollectionViewType.Stacking].includes(type_collection) && (this.rootDoc._pivotField = undefined);
+        this.rootDoc._type_collection = type_collection;
         if (this.isTreeOrStack) {
             this.layoutDoc._gridGap = 0;
         }
@@ -1006,17 +1013,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     return false;
                 }
             } else {
-                if (!doc.aliasOf) {
-                    const original = Doc.MakeAlias(doc);
-                    TabDocView.PinDoc(original, {});
-                    setTimeout(() => this.removeDocument(doc), 0);
-                    return false;
-                } else {
-                    if (!doc.presentationTargetDoc) doc.title = doc.title + ' - Slide';
-                    doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf);
-                    doc.presMovement = PresMovement.Zoom;
-                    if (this._expandBoolean) doc.presExpandInlineButton = true;
-                }
+                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;
             }
         });
         return true;
@@ -1084,7 +1084,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 this.rootDoc._itemIndex = index;
             }
         } else this.gotoDocument(this.childDocs.indexOf(doc), this.activeItem);
-        this.updateCurrentPresentation(DocCast(doc.context));
+        this.updateCurrentPresentation(DocCast(doc.embedContainer));
     };
 
     //Command click
@@ -1160,7 +1160,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 }
                 break;
             case 'Escape':
-                if (DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc)) {
+                if (Doc.IsInMyOverlay(this.layoutDoc)) {
                     this.exitClicked();
                 } else if (this.layoutDoc.presStatus === PresStatus.Edit) {
                     this.clearSelectedArray();
@@ -1238,7 +1238,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             .filter(doc => Cast(doc.presentationTargetDoc, Doc, null))
             .forEach((doc, index) => {
                 const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
-                const srcContext = Cast(tagDoc.context, Doc, null);
+                const srcContext = Cast(tagDoc.embedContainer, Doc, null);
                 const width = NumCast(tagDoc._width) / 10;
                 const height = Math.max(NumCast(tagDoc._height) / 10, 15);
                 const edge = Math.max(width, height);
@@ -1298,7 +1298,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     /**
      * Method called for viewing paths which adds a single line with
      * points at the center of each document added.
-     * Design choice: When this is called it sets _fitContentsToBox as true so the
+     * Design choice: When this is called it sets _freeform_fitContentsToBox as true so the
      * user can have an overview of all of the documents in the collection.
      * (Design needed for when documents in presentation trail are in another
      * collection)
@@ -1429,6 +1429,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 min={min}
                 max={max}
                 value={value}
+                readOnly={true}
                 style={{ marginLeft: hmargin, marginRight: hmargin, width: `calc(100% - ${2 * (hmargin ?? 0)}px)` }}
                 className={`toolbar-slider ${active ? '' : 'none'}`}
                 onPointerDown={e => {
@@ -1502,7 +1503,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             <div className="ribbon-doubleButton">
                                 <div className="presBox-subheading">Slide Duration</div>
                                 <div className="ribbon-property">
-                                    <input className="presBox-input" type="number" value={duration} onKeyDown={e => e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s
+                                    <input className="presBox-input" type="number" readOnly={true} value={duration} onKeyDown={e => e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s
                                 </div>
                                 <div className="ribbon-propertyUpDown">
                                     <div className="ribbon-propertyUpDownItem" onClick={() => this.updateDurationTime(String(duration), 1000)}>
@@ -1551,7 +1552,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 // 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 (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}"]`);
@@ -1655,7 +1656,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === PresMovement.Zoom ? 'inline-flex' : 'none' }}>
                             <div className="presBox-subheading">Zoom (% screen filled)</div>
                             <div className="ribbon-property">
-                                <input className="presBox-input" type="number" value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
+                                <input className="presBox-input" type="number" readOnly={true} value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
                             </div>
                             <div className="ribbon-propertyUpDown">
                                 <div className="ribbon-propertyUpDownItem" onClick={() => this.updateZoom(String(zoom), 0.1)}>
@@ -1670,7 +1671,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
                             <div className="presBox-subheading">Transition Time</div>
                             <div className="ribbon-property">
-                                <input className="presBox-input" type="number" value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
+                                <input className="presBox-input" type="number" readOnly={true} value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
                             </div>
                             <div className="ribbon-propertyUpDown">
                                 <div className="ribbon-propertyUpDownItem" onClick={() => this.updateTransitionTime(String(transitionSpeed), 1000)}>
@@ -1741,7 +1742,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const activeItem = this.activeItem;
         if (activeItem && this.targetDoc) {
             const clipStart = NumCast(activeItem.clipStart);
-            const clipEnd = NumCast(activeItem.clipEnd, NumCast(activeItem[Doc.LayoutFieldKey(activeItem) + '-duration']));
+            const clipEnd = NumCast(activeItem.clipEnd, NumCast(activeItem[Doc.LayoutFieldKey(activeItem) + '_duration']));
             return (
                 <div className={'presBox-ribbon'} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                     <div>
@@ -1757,6 +1758,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             className="presBox-input"
                                             style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
                                             type="number"
+                                            readOnly={true}
                                             value={NumCast(activeItem.presStartTime).toFixed(2)}
                                             onKeyDown={e => e.stopPropagation()}
                                             onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -1783,6 +1785,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             onKeyDown={e => e.stopPropagation()}
                                             style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
                                             type="number"
+                                            readOnly={true}
                                             value={NumCast(activeItem.presEndTime).toFixed(2)}
                                             onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
                                                 activeItem.presEndTime = Number(e.target.value);
@@ -2065,20 +2068,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     createTemplate = (layout: string, input?: string) => {
         const x = this.activeItem && this.targetDoc ? NumCast(this.targetDoc.x) : 0;
         const y = this.activeItem && this.targetDoc ? NumCast(this.targetDoc.y) + NumCast(this.targetDoc._height) + 20 : 0;
-        const title = () => Docs.Create.TextDocument('Click to change title', { title: 'Slide title', _width: 380, _height: 60, x: 10, y: 58, _fontSize: '24pt' });
-        const subtitle = () => Docs.Create.TextDocument('Click to change subtitle', { title: 'Slide subtitle', _width: 380, _height: 50, x: 10, y: 118, _fontSize: '16pt' });
-        const header = () => Docs.Create.TextDocument('Click to change header', { title: 'Slide header', _width: 380, _height: 65, x: 10, y: 80, _fontSize: '20pt' });
-        const contentTitle = () => Docs.Create.TextDocument('Click to change title', { title: 'Slide title', _width: 380, _height: 60, x: 10, y: 10, _fontSize: '24pt' });
-        const content = () => Docs.Create.TextDocument('Click to change text', { title: 'Slide text', _width: 380, _height: 145, x: 10, y: 70, _fontSize: '14pt' });
-        const content1 = () => Docs.Create.TextDocument('Click to change text', { title: 'Column 1', _width: 185, _height: 140, x: 10, y: 80, _fontSize: '14pt' });
-        const content2 = () => Docs.Create.TextDocument('Click to change text', { title: 'Column 2', _width: 185, _height: 140, x: 205, y: 80, _fontSize: '14pt' });
+        const title = () => Docs.Create.TextDocument('Click to change title', { title: 'Slide title', _width: 380, _height: 60, x: 10, y: 58, _text_fontSize: '24pt' });
+        const subtitle = () => Docs.Create.TextDocument('Click to change subtitle', { title: 'Slide subtitle', _width: 380, _height: 50, x: 10, y: 118, _text_fontSize: '16pt' });
+        const header = () => Docs.Create.TextDocument('Click to change header', { title: 'Slide header', _width: 380, _height: 65, x: 10, y: 80, _text_fontSize: '20pt' });
+        const contentTitle = () => Docs.Create.TextDocument('Click to change title', { title: 'Slide title', _width: 380, _height: 60, x: 10, y: 10, _text_fontSize: '24pt' });
+        const content = () => Docs.Create.TextDocument('Click to change text', { title: 'Slide text', _width: 380, _height: 145, x: 10, y: 70, _text_fontSize: '14pt' });
+        const content1 = () => Docs.Create.TextDocument('Click to change text', { title: 'Column 1', _width: 185, _height: 140, x: 10, y: 80, _text_fontSize: '14pt' });
+        const content2 = () => Docs.Create.TextDocument('Click to change text', { title: 'Column 2', _width: 185, _height: 140, x: 205, y: 80, _text_fontSize: '14pt' });
         // prettier-ignore
         switch (layout) {
             case 'blank': return Docs.Create.FreeformDocument([], { title: input ? input : 'Blank slide', _width: 400, _height: 225, x, y });
-            case 'title': return Docs.Create.FreeformDocument([title(), subtitle()], { title: input ? input : 'Title slide', _width: 400, _height: 225, _fitContentsToBox: true, x, y });
-            case 'header': return Docs.Create.FreeformDocument([header()], { title: input ? input : 'Section header', _width: 400, _height: 225, _fitContentsToBox: true, x, y });
-            case 'content': return Docs.Create.FreeformDocument([contentTitle(), content()], { title: input ? input : 'Title and content', _width: 400, _height: 225, _fitContentsToBox: true, x, y });
-            case 'twoColumns': return Docs.Create.FreeformDocument([contentTitle(), content1(), content2()], { title: input ? input : 'Title and two columns', _width: 400, _height: 225, _fitContentsToBox: true, x, y })
+            case 'title': return Docs.Create.FreeformDocument([title(), subtitle()], { title: input ? input : 'Title slide', _width: 400, _height: 225, _layout_fitContentsToBox: true, x, y });
+            case 'header': return Docs.Create.FreeformDocument([header()], { title: input ? input : 'Section header', _width: 400, _height: 225, _layout_fitContentsToBox: true, x, y });
+            case 'content': return Docs.Create.FreeformDocument([contentTitle(), content()], { title: input ? input : 'Title and content', _width: 400, _height: 225, _layout_fitContentsToBox: true, x, y });
+            case 'twoColumns': return Docs.Create.FreeformDocument([contentTitle(), content1(), content2()], { title: input ? input : 'Title and two columns', _width: 400, _height: 225, _layout_fitContentsToBox: true, x, y })
         }
     };
 
@@ -2127,12 +2130,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get toolbar() {
         const propIcon = SettingsManager.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left';
         const propTitle = SettingsManager.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel';
-        const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+        const mode = StrCast(this.rootDoc._type_collection) as CollectionViewType;
         const isMini: boolean = this.toolbarWidth <= 100;
-        const inOverlay = DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc);
         const activeColor = Colors.LIGHT_BLUE;
         const inactiveColor = Colors.WHITE;
-        return mode === CollectionViewType.Carousel3D || inOverlay ? null : (
+        return mode === CollectionViewType.Carousel3D || Doc.IsInMyOverlay(this.rootDoc) ? null : (
             <div id="toolbarContainer" className={'presBox-toolbar'}>
                 {/* <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
                     <FontAwesomeIcon icon={"plus"} />
@@ -2171,11 +2173,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
      * presentPanel: The button to start the presentation / open minimized view of the presentation
      */
     @computed get topPanel() {
-        const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+        const mode = StrCast(this.rootDoc._type_collection) as CollectionViewType;
         const isMini: boolean = this.toolbarWidth <= 100;
-        const inOverlay = DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc);
         return (
-            <div className={`presBox-buttons${inOverlay ? ' inOverlay' : ''}`} style={{ background: Doc.ActivePresentation === this.rootDoc ? Colors.LIGHT_BLUE : undefined, display: !this.rootDoc._chromeHidden ? 'none' : undefined }}>
+            <div
+                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}>
                         <option onPointerDown={StopEvent} value={CollectionViewType.Stacking}>
@@ -2225,7 +2228,7 @@ 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 presStart: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0;
-        const inOverlay = DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc);
+        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' }}>
@@ -2396,10 +2399,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     render() {
         // needed to ensure that the childDocs are loaded for looking up fields
         this.childDocs.slice();
-        const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+        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 presStart = !this.layoutDoc.presLoop && this.itemIndex === 0;
-        const inOverlay = DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc);
         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))}>
                 <div
@@ -2442,7 +2444,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </div>
             </div>
         ) : (
-            <div className="presBox-cont" style={{ minWidth: inOverlay ? PresBox.minimizedWidth : undefined }}>
+            <div className="presBox-cont" style={{ minWidth: Doc.IsInMyOverlay(this.rootDoc) ? PresBox.minimizedWidth : undefined }}>
                 {this.topPanel}
                 {this.toolbar}
                 {this.newDocumentToolbarDropdown}
@@ -2456,9 +2458,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 childIgnoreNativeSize={true}
                                 moveDocument={returnFalse}
                                 ignoreUnrendered={true}
-                                //childFitWidth={returnTrue}
+                                //childLayoutFitWidth={returnTrue}
                                 childOpacity={returnOne}
-                                //childLayoutString={PresElementBox.LayoutString('data')}
                                 childClickScript={PresBox.navigateToDocScript}
                                 childLayoutTemplate={this.childLayoutTemplate}
                                 childXPadding={Doc.IsComicStyle(this.rootDoc) ? 20 : undefined}
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 62e5314c3..34e069046 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -1,19 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
-import { Doc, DocListCast, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
+import { Height, Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
-import { Docs, DocUtils } from '../../../documents/Documents';
+import { Docs } from '../../../documents/Documents';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { Transform } from '../../../util/Transform';
-import { undoBatch } from '../../../util/UndoManager';
+import { undoable, undoBatch } from '../../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../../DocComponent';
 import { EditableView } from '../../EditableView';
 import { Colors } from '../../global/globalEnums';
@@ -61,7 +62,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     componentDidMount() {
-        this.layoutDoc.hideLinkButton = true;
+        this.layoutDoc.layout_hideLinkButton = true;
         this._heightDisposer = reaction(
             () => ({ expand: this.rootDoc.presExpandInlineButton, height: this.collapsedHeight }),
             ({ expand, height }) => (this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0)),
@@ -106,8 +107,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     ScreenToLocalTransform={Transform.Identity}
                     renderDepth={this.props.renderDepth + 1}
                     docViewPath={returnEmptyDoclist}
-                    docFilters={this.props.docFilters}
-                    docRangeFilters={this.props.docRangeFilters}
+                    childFilters={this.props.childFilters}
+                    childFiltersByRanges={this.props.childFiltersByRanges}
                     searchFilterDocs={this.props.searchFilterDocs}
                     rootSelected={returnTrue}
                     addDocument={returnFalse}
@@ -192,7 +193,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const dragData = new DragManager.DocumentDragData(this.presBoxView?.sortArray() ?? []);
         if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.rootDoc);
         dragData.dropAction = 'move';
-        dragData.treeViewDoc = this.presBox?._viewType === CollectionViewType.Tree ? this.presBox : undefined; // this.props.DocumentView?.()?.props.treeViewDoc;
+        dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this.props.DocumentView?.()?.props.treeViewDoc;
         dragData.moveDocument = this.props.moveDocument;
         const dragItem: HTMLElement[] = [];
         if (dragArray.length === 1) {
@@ -263,16 +264,15 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     };
 
-    @undoBatch
-    removeItem = action((e: React.MouseEvent) => {
+    removePresentationItem = undoable((e: React.MouseEvent) => {
         e.stopPropagation();
         if (this.presBox && this.indexInPres < (this.presBoxView?.itemIndex || 0)) {
-            this.presBox.itemIndex = (this.presBoxView?.itemIndex || 0) - 1;
+            runInAction(() => (this.presBox!.itemIndex = (this.presBoxView?.itemIndex || 0) - 1));
         }
         this.props.removeDocument?.(this.rootDoc);
         this.presBoxView?.removeFromSelectedArray(this.rootDoc);
         this.removeAllRecordingInOverlay();
-    });
+    }, 'Remove doc from pres trail');
 
     // set the value/title of the individual pres element
     @undoBatch
@@ -319,15 +319,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     // a previously recorded video will have timecode defined
     static videoIsRecorded = (activeItem: Opt<Doc>) => {
         const casted = Cast(activeItem?.recording, Doc, null);
-        return casted && 'currentTimecode' in casted;
+        return casted && 'layout_currentTimecode' in casted;
     };
 
     removeAllRecordingInOverlay = () => {
-        DocListCast(Doc.MyOverlayDocs.data).forEach(doc => {
-            if (doc.slides === this.rootDoc) {
-                Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, doc);
-            }
-        });
+        DocListCast(Doc.MyOverlayDocs.data)
+            .filter(doc => doc.slides === this.rootDoc)
+            .forEach(Doc.RemFromMyOverlay);
     };
 
     static removeEveryExistingRecordingInOverlay = () => {
@@ -335,9 +333,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         DocListCast(Doc.MyOverlayDocs.data).forEach(doc => {
             if (doc.slides !== null) {
                 // if it's a recording video, don't remove from overlay (user can lose data)
-                if (!PresElementBox.videoIsRecorded(DocCast(doc.slides))) return;
-
-                Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, doc);
+                if (PresElementBox.videoIsRecorded(DocCast(doc.slides))) {
+                    Doc.RemFromMyOverlay(doc);
+                }
             }
         });
     };
@@ -357,7 +355,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay();
 
         if (activeItem.recording) {
-            Doc.AddDocToList(Doc.MyOverlayDocs, undefined, DocCast(activeItem.recording));
+            Doc.AddToMyOverlay(DocCast(activeItem.recording));
         }
     };
 
@@ -369,7 +367,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
             // if we already have an existing recording
             this.showRecording(activeItem, true);
             //   // if we already have an existing recording
-            //   Doc.AddDocToList(Doc.MyOverlayDocs, undefined, Cast(activeItem.recording, Doc, null));
+            //   Doc.AddToMyOverlay(Cast(activeItem.recording, Doc, null));
         } else {
             // Remove every recording that already exists in overlay view
             // this is a design decision to clear to focus in on the recoding mode
@@ -379,11 +377,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
             const recording = Docs.Create.WebCamDocument('', {
                 _width: 384,
                 _height: 216,
-                hideDocumentButtonBar: true,
-                hideDecorationTitle: true,
-                hideOpenButton: true,
+                layout_hideDocumentButtonBar: true,
+                layout_hideDecorationTitle: true,
+                layout_hideOpenButton: true,
                 // hideDeleteButton: true,
-                cloneFieldFilter: new List<string>(['system']),
+                cloneFieldFilter: new List<string>(['isSystem']),
             });
 
             // attach the recording to the slide, and attach the slide to the recording
@@ -391,9 +389,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
             activeItem.recording = recording;
 
             // make recording box appear in the bottom right corner of the screen
-            recording.overlayX = window.innerWidth - recording[WidthSym]() - 20;
-            recording.overlayY = window.innerHeight - recording[HeightSym]() - 20;
-            Doc.AddDocToList(Doc.MyOverlayDocs, undefined, recording);
+            recording.overlayX = window.innerWidth - recording[Width]() - 20;
+            recording.overlayY = window.innerHeight - recording[Height]() - 20;
+            Doc.AddToMyOverlay(recording);
         }
     };
 
@@ -476,7 +474,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
         items.push(
             <Tooltip key="trash" title={<div className="dash-tooltip">Remove from presentation</div>}>
-                <div className={'slideButton'} onClick={this.removeItem}>
+                <div className={'slideButton'} onClick={this.removePresentationItem}>
                     <FontAwesomeIcon icon={'trash'} onPointerDown={e => e.stopPropagation()} />
                 </div>
             </Tooltip>
@@ -524,7 +522,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         style={{
                             display: 'infline-block',
                             backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
-                            //boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined,
+                            //layout_boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined,
                             border: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? presBoxColor + ' solid 2.5px' : undefined) : undefined,
                         }}>
                         <div
@@ -546,7 +544,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     }
                                 }}
                                 onClick={e => e.stopPropagation()}>{`${this.indexInPres + 1}.  `}</div>
-                            <EditableView ref={this._titleRef} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} />
+                            <EditableView ref={this._titleRef} oneLine={true} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} />
                         </div>
                         {/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */}
                         {/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */}