Merge branch 'master' into lanyi-branch

92 files changed, 4118 insertions, 2868 deletions

diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts
index 03ff13924..8eb1a39ec 100644
--- a/src/ClientUtils.ts
+++ b/src/ClientUtils.ts
@@ -194,7 +194,7 @@ export namespace ClientUtils {
     }
 
     export function CorsProxy(url: string): string {
-        return prepend('/corsProxy/') + encodeURIComponent(url);
+        return prepend('/corsproxy/') + encodeURIComponent(url);
     }
 
     export function CopyText(text: string) {
@@ -670,7 +670,8 @@ export function setupMoveUpEvents(
 }
 
 export function DivHeight(ele: HTMLElement | null): number {
-    return ele ? Number(getComputedStyle(ele).height.replace('px', '')) : 0;
+    const hgt = ele ? Number(getComputedStyle(ele).height.replace('px', '')) : 0;
+    return Number.isNaN(hgt) ? 0 : hgt;
 }
 export function DivWidth(ele: HTMLElement | null): number {
     return ele ? Number(getComputedStyle(ele).width.replace('px', '')) : 0;
diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index fbded378b..7878e9bfe 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -132,20 +132,20 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         prompt: "BRIEFLY (<50 words) describe any differences between the rubric and the user's answer answer in second person. If there are no differences, say correct",
     },
     template: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'You will be given a list of field descriptions for one or more templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “template_title” is the templates title as specified in the description provided,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:',
     },
 
     vizsum: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.',
     },
     vizsum2: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.',
@@ -279,6 +279,7 @@ const gptAPICall = async (inputTextIn: string, callType: GPTCallType, prompt?: s
 const gptImageCall = async (prompt: string, n?: number) => {
     try {
         const response = await openai.images.generate({
+            model: 'dall-e-3',
             prompt: prompt,
             n: n ?? 1,
             size: '1024x1024',
diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts
index 36e03daed..dee929c89 100644
--- a/src/client/documents/DocUtils.ts
+++ b/src/client/documents/DocUtils.ts
@@ -642,27 +642,27 @@ export namespace DocUtils {
         return dd;
     }
 
-    export function assignUploadInfo(result: Upload.FileInformation, protoIn: Doc) {
+    export function assignUploadInfo(result: Upload.FileInformation, protoIn: Doc, fieldKey: string = 'data') {
         const proto = protoIn;
 
         if (Upload.isTextInformation(result)) {
             proto.text = result.rawText;
         }
         if (Upload.isVideoInformation(result)) {
-            proto.data_duration = result.duration;
+            proto[`${fieldKey}_duration`] = result.duration;
         }
         if (Upload.isImageInformation(result)) {
             const maxNativeDim = Math.max(result.nativeHeight, result.nativeWidth);
             const exifRotation = StrCast(result.exifData?.data?.Orientation).toLowerCase();
-            proto.data_nativeOrientation = result.exifData?.data?.image?.Orientation ?? (exifRotation.includes('rotate 90') || exifRotation.includes('rotate 270') ? 5 : undefined);
-            proto.data_nativeWidth = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim;
-            proto.data_nativeHeight = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight);
-            if (NumCast(proto.data_nativeOrientation) >= 5) {
-                proto.data_nativeHeight = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim;
-                proto.data_nativeWidth = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight);
+            proto[`${fieldKey}_nativeOrientation`] = result.exifData?.data?.image?.Orientation ?? (exifRotation.includes('rotate 90') || exifRotation.includes('rotate 270') ? 5 : undefined);
+            proto[`${fieldKey}_nativeWidth`] = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim;
+            proto[`${fieldKey}_nativeHeight`] = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight);
+            if (NumCast(proto[`${fieldKey}_nativeOrientation`]) >= 5) {
+                proto[`${fieldKey}_nativeHeight`] = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim;
+                proto[`${fieldKey}_nativeWidth`] = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight);
             }
-            proto.data_exif = JSON.stringify(result.exifData?.data);
-            proto.data_contentSize = result.contentSize;
+            proto[`${fieldKey}_exif`] = JSON.stringify(result.exifData?.data);
+            proto[`${fieldKey}_contentSize`] = result.contentSize;
             // exif gps data coordinates are stored in DMS (Degrees Minutes Seconds), the following operation converts that to decimal coordinates
             const latitude = result.exifData?.data?.GPSLatitude;
             const latitudeDirection = result.exifData?.data?.GPSLatitudeRef;
@@ -724,7 +724,7 @@ export namespace DocUtils {
                                 _width: width || BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 * 6 : 200,
                                 _height: BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 : 35,
                                 _layout_autoHeight: true,
-                                backgroundColor: StrCast(Doc.UserDoc().textBackgroundColor),
+                                backgroundColor: backgroundColor ?? StrCast(Doc.UserDoc().textBackgroundColor),
                                 borderColor: Doc.UserDoc().borderColor as string,
                                 borderWidth: Doc.UserDoc().borderWidth as number,
                                 text_centered: BoolCast(Doc.UserDoc().textCentered),
@@ -842,7 +842,7 @@ export namespace DocUtils {
             const {
                 source: { newFilename, mimetype },
                 result,
-            } = upfiles.lastElement() ?? { source: { newFilename: '', mimetype: '' }, result: new Error('upload failed') };
+            } = upfiles.lastElement() ?? { source: { newFilename: '', mimetype: '' }, result: upfiles[0]?.result ?? new Error('unknown error') };
             if (result instanceof Error) {
                 if (overwriteDoc) {
                     overwriteDoc.loadingError = result.message;
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index cef44e999..a73d8ba59 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -44,8 +44,9 @@ export enum DocumentType {
     SCRIPTDB = 'scriptdb', // database of scripts
     GROUPDB = 'groupdb', // database of groups
 
+    JOURNAL = 'journal', // AARAV ADD JOURNAL
+    TASK = 'task', // AARAV ADD TASK
     SCRAPBOOK = 'scrapbook',
-    JOURNAL = 'journal', // AARAV ADD
 }
 export enum CollectionViewType {
     // general collections
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 9b6acef7b..4ad9c9bd8 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -182,8 +182,6 @@ export class DocumentOptions {
     identifier?: STRt = new StrInfo('documentIcon displayed for each doc as "d[x]"', false);
     _rotation?: NUMt = new NumInfo('Amount of rotation on a document in degrees', false);
 
-    date_range?: STRt = new StrInfo('date range for calendar', false);
-
     chat?: STRt = new StrInfo('fields related to chatBox', false);
     chat_history?: STRt = new StrInfo('chat history for chatbox', false);
     chat_thread_id?: STRt = new StrInfo('thread id for chatbox', false);
@@ -289,6 +287,7 @@ export class DocumentOptions {
     _layout_showSidebar?: BOOLt = new BoolInfo('whether an annotationsidebar should be displayed for text docuemnts');
     _layout_showCaption?: string; // which field to display in the caption area.  leave empty to have no caption
     _layout_showTags?: BOOLt = new BoolInfo('whether to show the list of document tags at the bottom of a DocView');
+    _layout_hideScroll?: BOOLt = new BoolInfo('whether to hide scroll bars on the document');
 
     _chromeHidden?: BOOLt = new BoolInfo('whether the editing chrome for a document is hidden');
     hideClickBehaviors?: BOOLt = new BoolInfo('whether to hide click behaviors in context menu');
@@ -361,7 +360,6 @@ export class DocumentOptions {
     isBaseProto?: BOOLt = new BoolInfo('is doc a base level prototype for data documents as opposed to data documents which are prototypes for layout documents.  base protos are not cloned during a deep');
     isTemplateForField?: string; // the field key for which the containing document is a rendering template
     isTemplateDoc?: BOOLt = new BoolInfo('is the document a template for creating other documents');
-    isGroup?: BOOLt = new BoolInfo('should collection use a grouping UI behavior');
     isFolder?: BOOLt = new BoolInfo('is document a tree view folder');
     _isTimelineLabel?: BOOLt = new BoolInfo('is document a timeline label');
     isLightbox?: BOOLt = new BoolInfo('whether a collection acts as a lightbox by opening lightbox links by hiding all other documents in collection besides link target');
@@ -401,6 +399,7 @@ export class DocumentOptions {
 
     // freeform properties
     freeform?: STRt = new StrInfo('');
+    freeform_isGroup?: BOOLt = new BoolInfo('should collection use a grouping UI behavior');
     _freeform_backgroundGrid?: BOOLt = new BoolInfo('whether background grid is shown on freeform collections');
     _freeform_scale_min?: NUMt = new NumInfo('how far out a view can zoom (used by image/videoBoxes that are clipped');
     _freeform_scale_max?: NUMt = new NumInfo('how far in a view can zoom (used by sidebar freeform views');
@@ -523,6 +522,16 @@ export class DocumentOptions {
     ai_prompt?: STRt = new StrInfo('input prompt to GAI engine');
     ai_generatedDocs?: List<Doc>; // list of documents generated by GAI engine
 
+    // TASK MANAGER
+    $task_dateRange?: STRt = new StrInfo('date range for calendar', false);
+    $task_startTime?: DateInfo | DateField = new DateInfo('start date and time', /*filterable*/ false);
+    $task_endTime?: DateInfo | DateField = new DateInfo('end date and time', /*filterable*/ false);
+    $task_allDay?: BoolInfo | boolean = new BoolInfo('whether task is all-day or not', /*filterable*/ false);
+    $task_completed?: BoolInfo | boolean = new BoolInfo('whether the task is completed', /*filterable*/ false);
+
+    _calendar_date?: DateInfo | DateField = new DateInfo('current selected date of a calendar', /*filterable*/ false);
+    _calendar_dateRange?: STRt = new StrInfo('date range shown on a calendar', false);
+
     /**
      * JSON‐stringified slot configuration for ScrapbookBox
      */
@@ -581,6 +590,30 @@ export namespace Docs {
                     options: { acl: '' },
                 },
             ],
+
+            // AARAV ADD //
+            [
+                DocumentType.JOURNAL,
+                {
+                    layout: { view: EmptyBox, dataField: 'text' },
+                    options: {
+                        title: 'Daily Journal',
+                        acl_Guest: SharingPermissions.View,
+                    },
+                },
+            ],
+
+            [
+                DocumentType.TASK,
+                {
+                    layout: { view: EmptyBox, dataField: 'text' },
+                    options: {
+                        title: 'Task',
+                        acl_Guest: SharingPermissions.View,
+                    },
+                },
+            ],
+            // AARAV ADD //
         ]);
 
         const suffix = 'Proto';
@@ -935,31 +968,6 @@ export namespace Docs {
         // AARAV ADD //
 
         export function DailyJournalDocument(text: string | RichTextField, options: DocumentOptions = {}, fieldKey: string = 'text') {
-            // const getFormattedDate = () => {
-            //     const date = new Date().toLocaleDateString(undefined, {
-            //         weekday: 'long',
-            //         year: 'numeric',
-            //         month: 'long',
-            //         day: 'numeric',
-            //     });
-            //     return date;
-            // };
-
-            // const getDailyText = () => {
-            //     const placeholderText = 'Start writing here...';
-            //     const dateText = `${getFormattedDate()}`;
-
-            //     return RichTextField.textToRtfFormat(
-            //         [
-            //             { text: 'Journal Entry:', styles: { bold: true, color: 'black', fontSize: 20 } },
-            //             { text: dateText, styles: { italic: true, color: 'gray', fontSize: 15 } },
-            //             { text: placeholderText, styles: { fontSize: 14, color: 'gray' } },
-            //         ],
-            //         undefined,
-            //         placeholderText.length
-            //     );
-            // };
-
             return InstanceFromProto(
                 Prototypes.get(DocumentType.JOURNAL),
                 '',
@@ -972,7 +980,19 @@ export namespace Docs {
             );
         }
 
-        // AARAV ADD //
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        export function TaskDocument(text = '', options: DocumentOptions = {}, fieldKey = 'text') {
+            return InstanceFromProto(
+                Prototypes.get(DocumentType.TASK),
+                '',
+                {
+                    title: '',
+                    ...options,
+                },
+                undefined,
+                fieldKey
+            );
+        }
 
         export function LinkDocument(source: Doc, target: Doc, options: DocumentOptions = {}, id?: string) {
             const linkDoc = InstanceFromProto(
@@ -1029,7 +1049,7 @@ export namespace Docs {
             const nwid = options._nativeWidth || undefined;
             const nhght = options._nativeHeight || undefined;
             if (!nhght && width && height && nwid) options._nativeHeight = (Number(nwid) * Number(height)) / Number(width);
-            return InstanceFromProto(Prototypes.get(DocumentType.WEB), new WebField(url || 'https://www.wikipedia.org/'), options);
+            return InstanceFromProto(Prototypes.get(DocumentType.WEB), new WebField(url || 'https://wikipedia.org/'), options);
         }
 
         export function HtmlDocument(html: string, options: DocumentOptions = {}) {
@@ -1053,6 +1073,7 @@ export namespace Docs {
                 _layout_nativeDimEditable: true,
                 _layout_reflowHorizontal: true,
                 _layout_reflowVertical: true,
+                calendar: '',
                 ...options,
                 _type_collection: CollectionViewType.Calendar,
             });
diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx
index b50e39c02..a8460ed4b 100644
--- a/src/client/util/CalendarManager.tsx
+++ b/src/client/util/CalendarManager.tsx
@@ -156,7 +156,7 @@ export class CalendarManager extends ObservableReactComponent<object> {
             const subDocEmbedding = Doc.MakeEmbedding(targetDoc); // embedding
             console.log('subdoc embedding', subDocEmbedding);
             subDocEmbedding.embedContainer = calendar; // set embed container
-            subDocEmbedding.date_range = `${startDateStr}|${endDateStr}`; // set subDoc date range
+            subDocEmbedding.task_dateRange = `${startDateStr}|${endDateStr}`; // set subDoc date range
 
             Doc.AddDocToList(calendar, 'data', subDocEmbedding); // add embedded subDoc to calendar
 
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d460cd0d7..a25c491d9 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -407,7 +407,8 @@ pie title Minerals in my tap water
             {key: "DataViz",    creator: opts => Docs.Create.DataVizDocument("", opts),     opts: { _width: 300, _height: 300, }},
             // AARAV ADD //
             {key: "DailyJournal",creator:opts => Docs.Create.DailyJournalDocument("", opts),opts: { _width: 300, _height: 300, }},
-            {key: "Scrapbook",creator:opts => Docs.Create.ScrapbookDocument([], opts),opts:{ _width: 300, _height: 300}},
+            {key: "Task",       creator: opts => Docs.Create.TaskDocument("", opts),        opts: { _width: 300, _height: 300, _layout_autoHeight: true, title: "Task", }},
+            {key: "Scrapbook",  creator: opts => Docs.Create.ScrapbookDocument([], opts),   opts: { _width: 300, _height: 300}},
             //{key: "Scrapbook",creator:opts => Docs.Create.ScrapbookDocument([], opts),opts:{ _width: 300, _height: 300}},
             {key: "Chat",       creator: Docs.Create.ChatDocument,                          opts: { _width: 500, _height: 500, _layout_fitWidth: true, }},
             {key: "MetaNote",   creator: metaNoteTemplate,                                  opts: { _width: 300, _height: 120, _header_pointerEvents: "all", _header_height: 50, _header_fontSize: 9,_layout_autoHeightMargins: 50, _layout_autoHeight: true, treeView_HideUnrendered: true}},
@@ -453,6 +454,7 @@ pie title Minerals in my tap water
             { toolTip: "Tap or drag to create a data viz node",   title: "DataViz",     icon: "chart-bar",       dragFactory: doc.emptyDataViz as Doc,    clickFactory: DocCast(doc.emptyDataViz)},
             { toolTip: "Tap or drag to create a scrapbook template",   title: "Scrapbook", icon: "palette",       dragFactory: doc.emptyScrapbook as Doc,clickFactory:DocCast(doc.emptyScrapbook), },
             { toolTip: "Tap or drag to create a journal entry",   title: "Journal",     icon: "book",            dragFactory:doc.emptyDailyJournal as Doc,clickFactory: DocCast(doc.emptyDataJournal), },
+            { toolTip: "Tap or drag to create a task",            title: "Task",        icon: "check-square",    dragFactory: doc.emptyTask as Doc,       clickFactory: DocCast(doc.emptyTask), },
             { toolTip: "Tap or drag to create a bullet slide",    title: "PPT Slide",   icon:"person-chalkboard",dragFactory: doc.emptySlide as Doc,      clickFactory: DocCast(doc.emptySlide),     openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
             { toolTip: "Tap or drag to create a view slide",      title: "View Slide",  icon: "address-card",    dragFactory: doc.emptyViewSlide as Doc,  clickFactory: DocCast(doc.emptyViewSlide), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
             { toolTip: "Tap or drag to create a data note",       title: "MetaNote",    icon: "window-maximize", dragFactory: doc.emptyMetaNote as Doc,   clickFactory: DocCast(doc.emptyMetaNote),  openFactoryAsDelegate: true,            funcs: { hidden: "IsNoviceMode()"} },
@@ -841,6 +843,7 @@ pie title Minerals in my tap water
             { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,  expertMode: false,                                                                                                                             width: 30,  scripts: { onClick: 'pinWithView(altKey)'}, funcs: {hidden: "IsNoneSelected()"}},
             { title: "Header",  icon: "heading",       toolTip: "Doc Titlebar Color",   btnType: ButtonType.ColorButton,  expertMode: false,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'} },
             { title: "Template",icon: "scroll",        toolTip: "Default Note Template",btnType: ButtonType.ToggleButton, expertMode: false, toolType:DocumentType.RTF,                                                                                                              scripts: { onClick: '{ return setDefaultTemplate(_readOnly_); }'} },
+            { title: "Img Temp",icon: "portrait",      toolTip: "Default Image Template",btnType:ButtonType.ToggleButton, expertMode: false, toolType:DocumentType.IMG,                                                                                                              scripts: { onClick: '{ return setDefaultImageTemplate(_readOnly_); }'} },
             { title: "Fill",    icon: "fill-drip",     toolTip: "Fill/Background Color",btnType: ButtonType.ColorButton,  expertMode: false,                                                                                                          ignoreClick: true, width: 30,  scripts: { script:  'return setBackgroundColor(value, _readOnly_)'} }, // Only when a document is selected
             { title: "Border",  icon: "border-style",  toolTip: "Border Color",         btnType: ButtonType.ColorButton,  expertMode: false,                                                                                                          ignoreClick: true, width: 30,  scripts: { script:  'return setBorderColor(value, _readOnly_)'} }, // Only when a document is selected
             { title: "B.Width",                        toolTip: "Border width",         btnType: ButtonType.NumberSliderButton,                                                                                                                       ignoreClick: true,             scripts: {script: '{ return setBorderWidth(value, _readOnly_);}'}, numBtnMin: 0, linearView_btnWidth:40},
@@ -1072,7 +1075,7 @@ pie title Minerals in my tap water
             Doc.MyRecentlyClosed && Doc.AddDocToList(Doc.MyFilesystem, undefined, Doc.MyRecentlyClosed);
         }
 
-        DocCast(Doc.UserDoc().emptyWebpage) && (Doc.GetProto(DocCast(Doc.UserDoc().emptyWebpage)!).data = new WebField("https://www.wikipedia.org"));
+        DocCast(Doc.UserDoc().emptyWebpage) && (Doc.GetProto(DocCast(Doc.UserDoc().emptyWebpage)!).data = new WebField("https://wikipedia.org"));
 
         DocServer.CacheNeedsUpdate() && setTimeout(UPDATE_SERVER_CACHE, 2500);
         setInterval(UPDATE_SERVER_CACHE, 120000);
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index fc8f22cf3..1c2ffab1b 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -250,7 +250,7 @@ export class DocumentManager {
         const options = optionsIn;
         Doc.MyRecentlyClosed && Doc.RemoveDocFromList(Doc.MyRecentlyClosed, undefined, targetDoc);
         const docContextPath = DocumentManager.GetContextPath(targetDoc, true);
-        if (docContextPath.some(doc => doc.hidden)) options.toggleTarget = false;
+        if (docContextPath.some(doc => doc !== targetDoc && doc.hidden)) options.toggleTarget = false;
         let activatedTab = false;
         if (DocumentView.activateTabView(docContextPath[0])) {
             options.toggleTarget = false;
@@ -274,6 +274,7 @@ export class DocumentManager {
             // even if we found the document view, if the target is a lightbox, we try to open it in the lightbox to preserve lightbox semantics (eg, there's only one active doc in the lightbox)
             const target = DocCast(targetDoc.annotationOn, targetDoc)!;
             const compView = this.getDocumentView(DocCast(target.embedContainer))?.ComponentView;
+            options.didMove = target.hidden || options.didMove ? true : false;
             if ((compView?.addDocTab ?? compView?._props.addDocTab)?.(target, options.openLocation)) {
                 await new Promise<void>(waitres => {
                     setTimeout(() => waitres());
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index fc3bb99ab..2f23d07dc 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -8,6 +8,13 @@ import { DocOptions, FInfo } from '../documents/Documents';
 export namespace SearchUtil {
     export type HighlightingResult = { [id: string]: { [key: string]: string[] } };
 
+    /**
+     * Recursively search all Docs within the collection for the query string.
+     * @param {Doc} collectionDoc - The collection document to search within.
+     * @param {string} queryIn - The query string to search for.
+     * @param {boolean} matchKeyNames - Whether to match metadata field names in addition to field values
+     * @param {string[]} onlyKeys - Optional: restrict search to only look in the specified array of field names.
+     */
     export function SearchCollection(collectionDoc: Opt<Doc>, queryIn: string, matchKeyNames: boolean, onlyKeys?: string[]) {
         const blockedTypes = [DocumentType.PRESSLIDE, DocumentType.CONFIG, DocumentType.KVP, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING];
         const blockedKeys = matchKeyNames
@@ -27,11 +34,13 @@ export namespace SearchUtil {
                 const dtype = StrCast(doc.type) as DocumentType;
                 if (dtype && !blockedTypes.includes(dtype) && !docIDs.includes(doc[Id]) && depth >= 0) {
                     const hlights = new Set<string>();
-                    (onlyKeys ?? SearchUtil.documentKeys(doc)).forEach(
-                        key =>
-                            (val => (exact ? val === query.toLowerCase() : val.includes(query.toLowerCase())))(
-                            matchKeyNames ? key : Field.toString(doc[key] as FieldType)) 
-                        && hlights.add(key)
+                    const fieldsToSearch = onlyKeys ?? SearchUtil.documentKeys(doc);
+                    fieldsToSearch.forEach(
+                        key => {
+                            const val = (matchKeyNames ? key : Field.toString(doc[key] as FieldType)).toLowerCase();
+                            const accept = (exact ? val === query.toLowerCase() : val.includes(query.toLowerCase()));
+                            accept && hlights.add(key);
+                        }
                     ); // prettier-ignore
                     blockedKeys.forEach(key => hlights.delete(key));
 
@@ -45,18 +54,17 @@ export namespace SearchUtil {
         return results;
     }
     /**
-     * @param {Doc} doc - doc for which keys are returned
+     * @param {Doc} doc - Doc to search for used field names
      *
-     * This method returns a list of a document doc's keys.
+     * An array of all field names used by the Doc or its prototypes.
      */
     export function documentKeys(doc: Doc) {
-        const keys: { [key: string]: boolean } = {};
-        Doc.GetAllPrototypes(doc).map(proto =>
-            Object.keys(proto).forEach(key => {
-                keys[key] = false;
-            })
-        );
-        return Array.from(Object.keys(keys));
+        return Object.keys(Doc.GetAllPrototypes(doc).filter(proto => proto).reduce(
+            (keys, proto) => {
+                Object.keys(proto).forEach(keys.add.bind(keys));
+                return keys;
+            },
+            new Set<string>())); // prettier-ignore
     }
 
     /**
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index bc669fc4e..a845e4936 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -294,7 +294,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
                     {metaBtn('keywords', 'id-card')}
                 </div> */}
 
-                <Tooltip title={<div className="dash-keyword-button">Open keyword menu</div>}>
+                <Tooltip title={<div className="dash-keyword-button">Open tags menu</div>}>
                     <div
                         className="documentButtonBar-icon"
                         style={{ color: 'white' }}
@@ -511,7 +511,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
                 {!DocumentView.Selected().some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>}
                 <div className="documentButtonBar-button">{this.pinButton}</div>
                 <div className="documentButtonBar-button">{this.recordButton}</div>
-                <div className="documentButtonBar-button">{this.calendarButton}</div>
+                {Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.calendarButton}</div>}
                 {this.view0?.HasAIEditor ? <div className="documentButtonBar-button">{this.aiEditorButton}</div> : null}
                 <div className="documentButtonBar-button">{this.keywordButton}</div>
                 {!Doc.UserDoc().documentLinksButton_fullMenu ? null : <div className="documentButtonBar-button">{this.shareButton}</div>}
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 09a13634f..55eb0b127 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -32,8 +32,10 @@ $resizeHandler: 8px;
     }
     .documentDecorations-rotationCenter {
         position: absolute;
-        width: 6px;
-        height: 6px;
+        width: 9px;
+        height: 9px;
+        left: -4.5px;
+        top: -4.5px;
         pointer-events: all;
         background: green;
         border-radius: 50%;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 94e5e662c..f36312056 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -59,7 +59,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     private _inkDragDocs: { doc: Doc; x: number; y: number; width: number; height: number }[] = [];
     private _interactionLock?: boolean;
 
-    @observable _showNothing = true;
+    @observable private _showNothing = true;
     @observable private _forceRender = 0;
     @observable private _accumulatedTitle = '';
     @observable private _titleControlString: string = '$title';
@@ -350,13 +350,14 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
         e.stopPropagation();
     };
 
-    setRotateCenter = (seldocview: DocumentView, rotCenter: number[]) => {
+    setDocRotateCenter = (seldocview: DocumentView, rotCenter: number[]) => {
         const selDoc = seldocview.Document;
         const newloccentern = seldocview.screenToViewTransform().transformPoint(rotCenter[0], rotCenter[1]);
         const newlocenter = [newloccentern[0] - NumCast(seldocview.layoutDoc._width) / 2, newloccentern[1] - NumCast(seldocview.layoutDoc._height) / 2];
         const final = Utils.rotPt(newlocenter[0], newlocenter[1], -(NumCast(seldocview.Document._rotation) / 180) * Math.PI);
         selDoc._rotation_centerX = final.x / NumCast(seldocview.layoutDoc._width);
         selDoc._rotation_centerY = final.y / NumCast(seldocview.layoutDoc._height);
+        return false;
     };
 
     @action
@@ -366,10 +367,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
         setupMoveUpEvents(
             this,
             e,
-            (moveEv: PointerEvent, down: number[], delta: number[]) => {
-                this.setRotateCenter(seldocview, [this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]]);
-                return false;
-            }, 
+            (moveEv) => this.setDocRotateCenter(seldocview, [moveEv.clientX, moveEv.clientY]),
             action(() => { this._isRotating = false; }), // upEvent
             action(() => { seldocview.Document._rotation_centerX = seldocview.Document._rotation_centerY = 0; }),
             true
@@ -378,7 +376,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     };
 
     @action
-    onRotateDown = (e: React.PointerEvent): void => {
+    onRotateHdlDown = (e: React.PointerEvent): void => {
         this._isRotating = true;
         const rcScreen = { X: this.rotCenter[0], Y: this.rotCenter[1] };
         const rotateUndo = UndoManager.StartBatch('drag rotation');
@@ -394,17 +392,20 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
             const unrotatedDocPos = { x: NumCast(dv.Document.x) + localRotCtrOffset[0] - startRotCtr.x, y: NumCast(dv.Document.y) + localRotCtrOffset[1] - startRotCtr.y };
             infos.set(dv.Document, { unrotatedDocPos, startRotCtr, accumRot });
         });
-        const infoRot = (angle: number, isAbs = false) => {
-            DocumentView.Selected().forEach(
-                action(dv => {
-                    const { unrotatedDocPos, startRotCtr, accumRot } = infos.get(dv.Document)!;
-                    const endRotCtr = Utils.rotPt(startRotCtr.x, startRotCtr.y, isAbs ? angle : accumRot + angle);
-                    infos.set(dv.Document, { unrotatedDocPos, startRotCtr, accumRot: isAbs ? angle : accumRot + angle });
-                    dv.Document.x = infos.get(dv.Document)!.unrotatedDocPos.x - (endRotCtr.x - startRotCtr.x);
-                    dv.Document.y = infos.get(dv.Document)!.unrotatedDocPos.y - (endRotCtr.y - startRotCtr.y);
-                    dv.Document._rotation = ((isAbs ? 0 : NumCast(dv.Document._rotation)) + (angle * 180) / Math.PI) % 360; // Rotation between -360 and 360
-                })
-            );
+        const rotateDocs = (angle: number, isAbs = false) => {
+            if (selectedInk.length) {
+                InkStrokeProperties.Instance.rotateInk(selectedInk, angle, rcScreen); // rotate ink
+                return this.setDocRotateCenter(seldocview, centerPoint);
+            }
+            DocumentView.Selected().forEach(action(dv => {
+                const { unrotatedDocPos, startRotCtr, accumRot } = infos.get(dv.Document)!;
+                const endRotCtr = Utils.rotPt(startRotCtr.x, startRotCtr.y, isAbs ? angle : accumRot + angle);
+                infos.set(dv.Document, { unrotatedDocPos, startRotCtr, accumRot: isAbs ? angle : accumRot + angle });
+                dv.Document.x = infos.get(dv.Document)!.unrotatedDocPos.x - (endRotCtr.x - startRotCtr.x);
+                dv.Document.y = infos.get(dv.Document)!.unrotatedDocPos.y - (endRotCtr.y - startRotCtr.y);
+                dv.Document._rotation = ((isAbs ? 0 : NumCast(dv.Document._rotation)) + (angle * 180) / Math.PI) % 360; // Rotation between -360 and 360
+            })); // prettier-ignore
+            return false;
         };
         setupMoveUpEvents(
             this,
@@ -412,34 +413,17 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
             (moveEv: PointerEvent, down: number[], delta: number[]) => {
                 const previousPoint = { X: moveEv.clientX, Y: moveEv.clientY };
                 const movedPoint = { X: moveEv.clientX - delta[0], Y: moveEv.clientY - delta[1] };
-                const deltaAng = InkStrokeProperties.angleChange(movedPoint, previousPoint, rcScreen);
-                if (selectedInk.length) {
-                    deltaAng && InkStrokeProperties.Instance.rotateInk(selectedInk, deltaAng, rcScreen);
-                    this.setRotateCenter(seldocview, centerPoint);
-                } else {
-                    infoRot(deltaAng);
-                }
-                return false;
+                return rotateDocs(InkStrokeProperties.angleChange(movedPoint, previousPoint, rcScreen));
             }, // moveEvent
             action(() => {
                 const oldRotation = NumCast(seldocview.Document._rotation);
-                const diff = oldRotation - Math.round(oldRotation / 45) * 45;
-                if (Math.abs(diff) < 5) {
-                    if (selectedInk.length) {
-                        InkStrokeProperties.Instance.rotateInk(selectedInk, ((Math.round(oldRotation / 45) * 45 - oldRotation) / 180) * Math.PI, rcScreen);
-                    } else {
-                        infoRot(((Math.round(oldRotation / 45) * 45) / 180) * Math.PI, true);
-                    }
-                }
-                if (selectedInk.length) {
-                    this.setRotateCenter(seldocview, centerPoint);
-                }
+                if (Math.abs(oldRotation - Math.round(oldRotation / 45) * 45) < 5) { // rptation witihin 5deg of a 45deg angle multiple
+                    rotateDocs(((Math.round(oldRotation / 45) * 45) / 180) * Math.PI, true);
+                } // prettier-ignore
                 this._isRotating = false;
                 rotateUndo?.end();
             }), // upEvent
-            action(() => {
-                this._showRotCenter = !this._showRotCenter;
-            }) // clickEvent
+            action(() => (this._showRotCenter = !this._showRotCenter)) // clickEvent
         );
     };
 
@@ -525,7 +509,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     resizeViewForOutpainting = (docView: DocumentView, refPt: number[], scale: { x: number; y: number }, opts: { dragHdl: string; shiftKey: boolean }) => {
         const doc = docView.Document;
 
-        if (doc.isGroup) {
+        if (Doc.IsFreeformGroup(doc)) {
             DocListCast(doc.data)
                 .map(member => DocumentView.getDocumentView(member, docView)!)
                 .forEach(member => this.resizeViewForOutpainting(member, refPt, scale, opts));
@@ -599,14 +583,14 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     //
     // determines if anything being dragged directly or via a group has a fixed aspect ratio (in which case we resize uniformly)
     //
-    hasFixedAspect = (doc: Doc): boolean => (doc.isGroup ? DocListCast(doc.data).some(this.hasFixedAspect) : !BoolCast(doc._layout_nativeDimEditable));
+    hasFixedAspect = (doc: Doc): boolean => (Doc.IsFreeformGroup(doc) ? DocListCast(doc.data).some(this.hasFixedAspect) : !BoolCast(doc._layout_nativeDimEditable));
 
     //
     // resize a single DocumentView about the specified reference point, possibly setting/updating the native dimensions of the Doc
     //
     resizeView = (docView: DocumentView, refPt: number[], scale: { x: number; y: number }, opts: { dragHdl: string; freezeNativeDims: boolean }) => {
         const doc = docView.Document;
-        if (doc.isGroup) {
+        if (Doc.IsFreeformGroup(doc)) {
             DocListCast(doc.data)
                 .map(member => DocumentView.getDocumentView(member, docView)!)
                 .forEach(member => this.resizeView(member, refPt, scale, opts));
@@ -624,8 +608,10 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
             if (nwidth && nheight && !cornerReflow && !horizontalReflow && !verticalReflow) {
                 scale.x === 1 ? (scale.x = scale.y) : (scale.y = scale.x);
             }
+            if (NumCast(doc._height) * scale.y < NumCast(doc._height_min, 10)) scale.y = NumCast(doc._height_min, 10) / NumCast(doc._height);
+            if (NumCast(doc._width) * scale.x < NumCast(doc._width_min, 25)) scale.x = NumCast(doc._width_min, 25) / NumCast(doc._width);
 
-            if ((horizontalReflow || cornerReflow) && Doc.NativeWidth(doc)) {
+            if ((horizontalReflow || cornerReflow) && Doc.NativeWidth(doc) && scale.x > 0) {
                 const setData = Doc.NativeWidth(doc[DocData]) === doc.nativeWidth;
                 doc._nativeWidth = scale.x * Doc.NativeWidth(doc);
                 if (setData) Doc.SetNativeWidth(doc[DocData], NumCast(doc.nativeWidth));
@@ -633,25 +619,23 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                     doc._nativeHeight = (initHeight / initWidth) * nwidth; // initializes the nativeHeight for a PDF
                 }
             }
-            if ((verticalReflow || cornerReflow) && Doc.NativeHeight(doc)) {
+            if ((verticalReflow || cornerReflow) && Doc.NativeHeight(doc) && scale.y > 0) {
                 const setData = Doc.NativeHeight(doc[DocData]) === doc.nativeHeight && !doc.layout_reflowVertical;
                 doc._nativeHeight = scale.y * Doc.NativeHeight(doc);
                 if (setData) Doc.SetNativeHeight(doc[DocData], NumCast(doc._nativeHeight));
             }
 
-            doc._width = Math.max(NumCast(doc._width_min, 25), NumCast(doc._width) * scale.x);
-            doc._height = Math.max(NumCast(doc._height_min, 10), NumCast(doc._height) * scale.y);
+            doc._width = NumCast(doc._width) * scale.x;
+            doc._height = NumCast(doc._height) * scale.y;
             const { deltaX, deltaY } = this.realignRefPt(doc, refCent, initWidth || 1, initHeight || 1);
             doc.x = NumCast(doc.x) + deltaX;
             doc.y = NumCast(doc.y) + deltaY;
 
             doc._layout_modificationDate = new DateField();
-            if (scale.y !== 1) {
-                const docLayout = docView.layoutDoc;
-                docLayout._layout_autoHeight = undefined;
-                if (docView.layoutDoc._layout_autoHeight) {
-                    // if autoHeight is still on because of a prototype
-                    docLayout._layout_autoHeight = false; // then don't inherit, but explicitly set it to false
+            if (scale.y !== 1 && !opts.freezeNativeDims) {
+                doc._layout_autoHeight = undefined;
+                if (doc._layout_autoHeight) {
+                    doc._layout_autoHeight = false; // set explicitly to false if inherited from parent of layout
                 }
             }
         }
@@ -696,7 +680,8 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
         if (lastView) {
             const invXf = lastView.screenToViewTransform().inverse();
             const seldoc = lastView.layoutDoc;
-            const loccenter = Utils.rotPt(NumCast(seldoc._rotation_centerX) * NumCast(seldoc._width), NumCast(seldoc._rotation_centerY) * NumCast(seldoc._height), invXf.Rotate);
+            const rcent = this._showRotCenter ? [NumCast(seldoc._rotation_centerX), NumCast(seldoc._rotation_centerY)] : [0, 0];
+            const loccenter = Utils.rotPt(rcent[0] * NumCast(seldoc._width), rcent[1] * NumCast(seldoc._height), invXf.Rotate);
             return invXf.transformPoint(loccenter.x + NumCast(seldoc._width) / 2, loccenter.y + NumCast(seldoc._height) / 2);
         }
         return this._rotCenter;
@@ -738,7 +723,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
             hideDecorations ||
             seldocview._props.hideOpenButton ||
             seldocview.Document.layout_hideOpenButton ||
-            DocumentView.Selected().some(docView => docView.Document._dragOnlyWithinContainer || docView.Document.isGroup || docView.Document.layout_hideOpenButton) ||
+            DocumentView.Selected().some(docView => docView.Document._dragOnlyWithinContainer || docView.Document.layout_hideOpenButton) ||
             this._isRounding ||
             this._isRotating;
         const hideDeleteButton =
@@ -933,7 +918,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                                     }}>
                                     {this._isRotating ? null : (
                                         <Tooltip enterDelay={750} title={<div className="dash-tooltip">tap to set rotate center, drag to rotate</div>}>
-                                            <div className="documentDecorations-rotation" onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}>
+                                            <div className="documentDecorations-rotation" onPointerDown={this.onRotateHdlDown} onContextMenu={e => e.preventDefault()}>
                                                 <IconButton icon={<FaUndo />} color={SettingsManager.userColor} />
                                             </div>
                                         </Tooltip>
@@ -942,7 +927,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                                 {!this._showRotCenter ? null : (
                                     <div
                                         className="documentDecorations-rotationCenter"
-                                        style={{ transform: `translate(${this.rotCenter[0] - 3}px, ${this.rotCenter[1] - 3}px)` }}
+                                        style={{ transform: `translate(${this.rotCenter[0]}px, ${this.rotCenter[1]}px)` }}
                                         onPointerDown={this.onRotateCenterDown}
                                         onContextMenu={e => e.preventDefault()}
                                     />
diff --git a/src/client/views/FieldsDropdown.tsx b/src/client/views/FieldsDropdown.tsx
index e7ab6a180..0bdf92bbc 100644
--- a/src/client/views/FieldsDropdown.tsx
+++ b/src/client/views/FieldsDropdown.tsx
@@ -6,7 +6,7 @@
  *     this list is then pruned down to only include fields that are not marked in Documents.ts to be non-filterable
  */
 
-import { computed, makeObservable, observable, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import Select from 'react-select';
@@ -24,6 +24,7 @@ interface fieldsDropdownProps {
     placeholder?: string | (() => string);
     showPlaceholder?: true; // if true, then input field always shows the placeholder value; otherwise, it shows the current selection
     addedFields?: string[];
+    isInactive?: boolean;
 }
 
 @observer
@@ -57,8 +58,8 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
         const filteredOptions = ['author', ...(this._newField ? [this._newField] : []), ...(this._props.addedFields ?? []), ...this.fieldsOfDocuments.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
 
         Object.entries(DocOptions)
-            .filter(opts => opts[1].filterable)
-            .forEach((pair: [string, FInfo]) => filteredOptions.push(pair[0]));
+            .filter(opts => opts[1] instanceof FInfo && opts[1].filterable)
+            .forEach((pair: [string, unknown]) => filteredOptions.push(pair[0]));
         const options = filteredOptions.sort().map(facet => ({ value: facet, label: facet }));
 
         return (
@@ -77,11 +78,13 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
                         ...baseStyles,
                         color: SnappingManager.userColor,
                         background: SnappingManager.userBackgroundColor,
+                        display: this._props.isInactive ? 'none' : undefined,
                     }),
                     placeholder: (baseStyles /* , state */) => ({
                         ...baseStyles,
                         color: SnappingManager.userColor,
                         background: SnappingManager.userBackgroundColor,
+                        display: this._props.isInactive ? 'none' : undefined,
                     }),
                     input: (baseStyles /* , state */) => ({
                         ...baseStyles,
@@ -104,14 +107,12 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
                 options={options}
                 isMulti={false}
                 onChange={val => this._props.selectFunc((val as { value: string; label: string }).value)}
-                onKeyDown={e => {
+                onKeyDown={action(e => {
                     if (e.key === 'Enter') {
-                        runInAction(() => {
-                            this._props.selectFunc((this._newField = (e.nativeEvent.target as HTMLSelectElement)?.value));
-                        });
+                        this._props.selectFunc((this._newField = (e.nativeEvent.target as HTMLSelectElement)?.value));
                     }
                     e.stopPropagation();
-                }}
+                })}
                 onMenuClose={this._props.menuClose}
                 closeMenuOnSelect
                 value={this._props.showPlaceholder ? null : undefined}
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 41f38c008..9f2c1fc4e 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -209,17 +209,18 @@ export class InkStrokeProperties {
      * @param scrpt The center point of the rotation in screen coordinates
      */
     rotateInk = undoable((inkStrokes: DocumentView[], angle: number, scrpt: PointData) => {
-        this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData, xScale: number, yScale: number /* , inkStrokeWidth: number */) => {
-            const inkCenterPt = view.ComponentView?.ptFromScreen?.(scrpt);
-            return !inkCenterPt
-                ? ink
-                : ink.map(i => {
-                      const pt = { X: i.X - inkCenterPt.X, Y: i.Y - inkCenterPt.Y };
-                      const newX = Math.cos(angle) * pt.X - (Math.sin(angle) * pt.Y * yScale) / xScale;
-                      const newY = (Math.sin(angle) * pt.X * xScale) / yScale + Math.cos(angle) * pt.Y;
-                      return { X: newX + inkCenterPt.X, Y: newY + inkCenterPt.Y };
-                  });
-        });
+        angle &&
+            this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData, xScale: number, yScale: number /* , inkStrokeWidth: number */) => {
+                const inkCenterPt = view.ComponentView?.ptFromScreen?.(scrpt);
+                return !inkCenterPt
+                    ? ink
+                    : ink.map(i => {
+                          const pt = { X: i.X - inkCenterPt.X, Y: i.Y - inkCenterPt.Y };
+                          const newX = Math.cos(angle) * pt.X - (Math.sin(angle) * pt.Y * yScale) / xScale;
+                          const newY = (Math.sin(angle) * pt.X * xScale) / yScale + Math.cos(angle) * pt.Y;
+                          return { X: newX + inkCenterPt.X, Y: newY + inkCenterPt.Y };
+                      });
+            });
     }, 'rotate ink');
 
     /**
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b884eb8c8..33e930abf 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -31,6 +31,8 @@ import './global/globalScripts';
 import { AudioBox } from './nodes/AudioBox';
 import { ComparisonBox } from './nodes/ComparisonBox';
 import { DataVizBox } from './nodes/DataVizBox/DataVizBox';
+import { TemplateField } from './nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField';
+import { TemplateFieldUtils } from './nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateFieldUtils';
 import { DiagramBox } from './nodes/DiagramBox';
 import { DocumentContentsView, HTMLtag } from './nodes/DocumentContentsView';
 import { EquationBox } from './nodes/EquationBox';
@@ -48,6 +50,7 @@ import { PDFBox } from './nodes/PDFBox';
 import { RecordingBox } from './nodes/RecordingBox';
 import { ScreenshotBox } from './nodes/ScreenshotBox';
 import { ScriptingBox } from './nodes/ScriptingBox';
+import { TaskBox } from './nodes/TaskBox';
 import { VideoBox } from './nodes/VideoBox';
 import { WebBox } from './nodes/WebBox';
 import { CalendarBox } from './nodes/calendarBox/CalendarBox';
@@ -61,11 +64,11 @@ import { FootnoteView } from './nodes/formattedText/FootnoteView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { SummaryView } from './nodes/formattedText/SummaryView';
 import { ImportElementBox } from './nodes/importBox/ImportElementBox';
+import { ScrapbookBox } from './nodes/scrapbook/ScrapbookBox';
 import { PresBox, PresSlideBox } from './nodes/trails';
 import { FaceRecognitionHandler } from './search/FaceRecognitionHandler';
 import { SearchBox } from './search/SearchBox';
 import { StickerPalette } from './smartdraw/StickerPalette';
-import { ScrapbookBox } from './nodes/scrapbook/ScrapbookBox';
 
 dotenv.config();
 
@@ -101,6 +104,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
         new PingManager();
         new KeyManager();
         new FaceRecognitionHandler();
+        TemplateField.CreateField = TemplateFieldUtils.CreateField; // set the init function for fields
 
         // initialize plugins and classes that require plugins
         CollectionDockingView.Init(TabDocView);
@@ -120,6 +124,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
             StickerPalette: StickerPalette,
             FormattedTextBox,
             DailyJournal, // AARAV
+            TaskBox, // AARAV
             ImageBox,
             FontIconBox,
             LabelBox,
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c49b7e6de..686f8ed88 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -730,7 +730,8 @@ export class MainView extends ObservableReactComponent<object> {
                     style={{
                         width: `calc(100% - ${this._leftMenuFlyoutWidth + this.leftMenuWidth() + this.propertiesWidth()}px)`,
                         minWidth: `calc(100% - ${this._leftMenuFlyoutWidth + this.leftMenuWidth() + this.propertiesWidth()}px)`,
-                        transform: DocumentView.LightboxDoc() ? 'scale(0.0001)' : undefined,
+                        opacity: DocumentView.LightboxDoc() ? 0 : undefined,
+                        pointerEvents: DocumentView.LightboxDoc() ? 'none' : undefined,
                     }}>
                     {!this.mainContainer ? null : this.mainDocView}
                 </div>
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index e4811a902..d354dd2c0 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -194,13 +194,13 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
         AnchorMenu.Instance.StartDrag = action((e: PointerEvent, ele: HTMLElement) => {
             e.preventDefault();
             e.stopPropagation();
-            const sourceAnchorCreator = () => this.highlight(this.props.highlightDragSrcColor ?? 'rgba(173, 216, 230, 0.75)', true, undefined, true); // hyperlink color
-
             const targetCreator = (annotationOn: Doc | undefined) => {
                 const target = DocUtils.GetNewTextDoc('Note linked to ' + this.props.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
+                target.layout_fitWidth = true;
                 DocumentView.SetSelectOnLoad(target);
                 return target;
             };
+            const sourceAnchorCreator = () => this.highlight(this.props.highlightDragSrcColor ?? 'rgba(173, 216, 230, 0.75)', true, undefined, true); // hyperlink color
             DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docView(), sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
                 dragComplete: dragEv => {
                     if (!dragEv.aborted && dragEv.annoDragData && dragEv.annoDragData.linkSourceDoc && dragEv.annoDragData.dropDocument && dragEv.linkDocument) {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index ded342df0..2c84d7fe7 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -238,8 +238,8 @@ export class PropertiesButtons extends React.Component {
     //         on => `Display collection as a Group`,
     //         on => 'object-group',
     //         (dv, doc) => {
-    //             doc.isGroup = !doc.isGroup;
-    //             doc.forceActive = doc.isGroup;
+    //             docfreeform_isGroup = !docfreeform_isGroup;
+    //             doc.forceActive = docfreeform_isGroup;
     //         }
     //     );
     // }
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index acf6f928a..06463b2a2 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -81,7 +81,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     }
 
     @computed get selectedDoc() {
-        return DocumentView.SelectedSchemaDoc() || this.selectedDocumentView?.Document || Doc.ActiveDashboard;
+        return DocumentView.SelectedSchemaDoc() ?? this.selectedDocumentView?.Document ?? Doc.ActiveDashboard;
     }
 
     @computed get selectedLink() {
@@ -89,7 +89,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     }
 
     @computed get selectedLayoutDoc() {
-        return DocumentView.SelectedSchemaDoc() || this.selectedDocumentView?.layoutDoc || Doc.ActiveDashboard;
+        return DocumentView.SelectedSchemaDoc() ?? this.selectedDocumentView?.layoutDoc ?? Doc.ActiveDashboard;
     }
     @computed get selectedDocumentView() {
         return DocumentView.Selected().lastElement();
@@ -149,7 +149,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         return this.selectedDoc?.type === DocumentType.INK;
     }
     @computed get isGroup() {
-        return this.selectedDoc?.isGroup;
+        return Doc.IsFreeformGroup(this.selectedDoc);
     }
     @computed get isStack() {
         return [
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index 573c28ccf..71b479a22 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ClientUtils, returnFalse, returnOne, returnZero } from '../../ClientUtils';
 import { emptyFunction } from '../../Utils';
-import { Doc, DocListCast, Field, FieldResult, FieldType, StrListCast } from '../../fields/Doc';
+import { Doc, DocListCast, Field, FieldResult, FieldType, Opt, StrListCast } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
 import { RichTextField } from '../../fields/RichTextField';
@@ -19,6 +19,7 @@ import { StyleProp } from './StyleProp';
 import { CollectionStackingView } from './collections/CollectionStackingView';
 import { DocumentView } from './nodes/DocumentView';
 import { FieldViewProps } from './nodes/FieldView';
+import { FocusViewOptions } from './nodes/FocusViewOptions';
 
 interface ExtraProps {
     fieldKey: string;
@@ -149,15 +150,33 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr
     };
     makeDocUnfiltered = (doc: Doc) => {
         if (DocListCast(this._props.Doc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
-            if (this.childFilters()) {
+            if (this.childFilters().length) {
                 // if any child filters exist, get rid of them
                 this._props.layoutDoc._childFilters = new List<string>();
+                return true;
             }
-            return true;
         }
         return false;
     };
 
+    public static getView(sidebar: SidebarAnnos | null, sidebarShown: boolean, toggleSidebar: () => void, doc: Doc, options: FocusViewOptions) {
+        if (!sidebarShown) {
+            options.didMove = true;
+            toggleSidebar();
+        }
+        options.didMove = sidebar?.makeDocUnfiltered(doc) || options.didMove;
+
+        if (!doc.hidden) {
+            if (!options.didMove && options.toggleTarget) {
+                options.toggleTarget = false;
+                options.didMove = doc.hidden = true;
+            }
+        } else {
+            options.didMove = !(doc.hidden = false);
+        }
+        return new Promise<Opt<DocumentView>>(res => DocumentView.addViewRenderedCb(doc, res));
+    }
+
     get sidebarKey() {
         return this._props.fieldKey + '_sidebar';
     }
@@ -181,8 +200,8 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr
     layout_showTitle = () => 'title';
     setHeightCallback = (height: number) => this._props.setHeight?.(height + this.filtersHeight());
     sortByLinkAnchorY = (a: Doc, b: Doc) => {
-        const ay = Doc.Links(a).length && DocCast(Doc.Links(a)[0].link_anchor_1).y;
-        const by = Doc.Links(b).length && DocCast(Doc.Links(b)[0].link_anchor_1).y;
+        const ay = Doc.Links(a).length && DocCast(Doc.Links(a)[0].link_anchor_1)?.y;
+        const by = Doc.Links(b).length && DocCast(Doc.Links(b)[0].link_anchor_1)?.y;
         return NumCast(ay) - NumCast(by);
     };
     render() {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 9110e198f..b52f17102 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -154,7 +154,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                 const highlightStyle = ['solid', 'dashed', 'solid', 'solid', 'solid'][highlightIndex];
                 if (highlightIndex) {
                     return {
-                        highlightStyle: doc.isGroup ? "dotted": highlightStyle,
+                        highlightStyle: Doc.IsFreeformGroup(doc) ? "dotted": highlightStyle,
                         highlightColor,
                         highlightIndex,
                         highlightStroke: BoolCast(layoutDoc?.layout_isSvg),
@@ -284,7 +284,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                             ? SnappingManager.userBackgroundColor
                             : doc?.annotationOn
                             ? '#00000010' // faint interior for collections on PDFs, images, etc
-                            : doc?.isGroup
+                            : doc && Doc.IsFreeformGroup(doc)
                             ? undefined
                             : doc?._type_collection === CollectionViewType.Stacking ?
                             (Colors.DARK_GRAY)
@@ -308,7 +308,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                         doc?.layout_boxShadow,
                         doc?._type_collection === CollectionViewType.Pile
                             ? '4px 4px 10px 2px'
-                            : lockedPosition() || doc?.isGroup || LayoutTemplateString
+                            : lockedPosition() || (doc && Doc.IsFreeformGroup(doc)) || LayoutTemplateString
                             ? undefined // groups have no drop shadow -- they're supposed to be "invisible".  LayoutString's imply collection is being rendered as something else (e.g., title of a Slide)
                             : `${Colors.DARK_GRAY} ${StrCast(doc.layout_boxShadow, '0.2vw 0.2vw 0.8vw')}`
                     );
@@ -338,7 +338,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             if (SnappingManager.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all';
             if (pointerEvents?.() === 'none') return 'none';
             if (opacity() === 0) return 'none';
-            if (isGroupActive?.() ) return isInk()  ? 'visiblePainted':  (doc?.isGroup ) ? undefined: 'all';
+            if (isGroupActive?.()) return isInk()  ? 'visiblePainted':  doc && Doc.IsFreeformGroup(doc) ? undefined: 'all';
             if (isDocumentActive?.()) return isInk() ? 'visiblePainted' : 'all';
             return undefined; // fixes problem with tree view elements getting pointer events when the tree view is not active
         case StyleProp.Decorations: {
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 89ccf5a0f..d1f7971d4 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -28,12 +28,14 @@ interface CMVFieldRowProps {
     headingObject: SchemaHeaderField | undefined;
     docList: Doc[];
     parent: CollectionStackingView;
+    panelWidth: () => number;
+    columnWidth: () => number;
     pivotField: string;
     type: 'string' | 'number' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'object' | 'function' | undefined;
     createDropTarget: (ele: HTMLDivElement) => void;
     screenToLocalTransform: () => Transform;
     setDocHeight: (key: string, thisHeight: number) => void;
-    refList: Element[];
+    sectionRefs: Element[];
     showHandle: boolean;
 }
 
@@ -74,7 +76,7 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
     createRowDropRef = (ele: HTMLDivElement | null) => {
         this._dropDisposer?.();
         if (ele) this._dropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this), this._props.Doc);
-        else if (this._ele) this.props.refList.splice(this.props.refList.indexOf(this._ele), 1);
+        else if (this._ele) this.props.sectionRefs.splice(this.props.sectionRefs.indexOf(this._ele), 1);
         this._ele = ele;
     };
     @action
@@ -82,10 +84,10 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
         this.heading = this._props.headingObject?.heading || '';
         this.color = this._props.headingObject?.color || '#f1efeb';
         this.collapsed = this._props.headingObject?.collapsed || false;
-        this._ele && this.props.refList.push(this._ele);
+        this._ele && this.props.sectionRefs.push(this._ele);
     }
     componentWillUnmount() {
-        this._ele && this.props.refList.splice(this.props.refList.indexOf(this._ele), 1);
+        this._ele && this.props.sectionRefs.splice(this.props.sectionRefs.indexOf(this._ele), 1);
         this._ele = null;
     }
 
@@ -128,10 +130,8 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
         const key = this._props.pivotField;
         const castedValue = this.getValue(value);
         if (castedValue) {
-            if (this._props.parent.colHeaderData) {
-                if (this._props.parent.colHeaderData.map(i => i.heading).indexOf(castedValue.toString()) > -1) {
-                    return false;
-                }
+            if (this._props.parent.colHeaderData?.map(i => i.heading).indexOf(castedValue.toString()) || 0 > -1) {
+                return false;
             }
             key && this._props.docList.forEach(d => Doc.SetInPlace(d, key, castedValue, true));
             this._heading = castedValue.toString();
@@ -251,20 +251,11 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
     textCallback = (/* char: string */) => this.addDocument('', false);
 
     @computed get contentLayout() {
-        const rows = Math.max(1, Math.min(this._props.docList.length, Math.floor((this._props.parent._props.PanelWidth() - 2 * this._props.parent.xMargin) / (this._props.parent.columnWidth + this._props.parent.gridGap))));
-        const showChrome = !this._props.chromeHidden;
-        const stackPad = showChrome ? `0px ${this._props.parent.xMargin}px` : `${this._props.parent.yMargin}px ${this._props.parent.xMargin}px 0px ${this._props.parent.xMargin}px `;
+        const rows = Math.max(1, Math.min(this._props.docList.length, Math.floor(this._props.panelWidth() / this._props.columnWidth())));
         return this.collapsed ? null : (
             <div style={{ position: 'relative' }}>
-                {showChrome ? (
-                    <div
-                        className="collectionStackingView-addDocumentButton"
-                        style={
-                            {
-                                // width: style.columnWidth / style.numGroupColumns,
-                                // padding: `${NumCast(this._props.parent.layoutDoc._yPadding, this._props.parent.yMargin)}px 0px 0px 0px`,
-                            }
-                        }>
+                {!this._props.chromeHidden ? (
+                    <div className="collectionStackingView-addDocumentButton">
                         <EditableView GetValue={returnEmptyString} SetValue={this.addDocument} textCallback={this.textCallback} contents="+ NEW" />
                     </div>
                 ) : null}
@@ -272,11 +263,9 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
                     className="collectionStackingView-masonryGrid"
                     ref={this._contRef}
                     style={{
-                        padding: stackPad,
                         minHeight: this._props.showHandle && this._props.parent._props.isContentActive() ? '10px' : undefined,
-                        width: this._props.parent.NodeWidth,
                         gridGap: this._props.parent.gridGap,
-                        gridTemplateColumns: numberRange(rows).reduce(list => list + ` ${this._props.parent.columnWidth}px`, ''),
+                        gridTemplateColumns: numberRange(rows).reduce(list => list + ` ${this._props.columnWidth()}px`, ''),
                     }}>
                     {this._props.parent.children(this._props.docList)}
                 </div>
@@ -339,7 +328,12 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
     render() {
         const background = this._background;
         return (
-            <div className="collectionStackingView-masonrySection" style={{ width: this._props.parent.NodeWidth, background }} ref={this.createRowDropRef} onPointerEnter={this.pointerEnteredRow} onPointerLeave={this.pointerLeaveRow}>
+            <div
+                className="collectionStackingView-masonrySection"
+                style={{ width: this._props.pivotField ? this._props.panelWidth() : '100%', background }}
+                ref={this.createRowDropRef}
+                onPointerEnter={this.pointerEnteredRow}
+                onPointerLeave={this.pointerLeaveRow}>
                 {this.headingView}
                 {this.contentLayout}
             </div>
diff --git a/src/client/views/collections/CollectionPivotView.tsx b/src/client/views/collections/CollectionPivotView.tsx
index 4736070c3..5487315f0 100644
--- a/src/client/views/collections/CollectionPivotView.tsx
+++ b/src/client/views/collections/CollectionPivotView.tsx
@@ -102,13 +102,7 @@ export class CollectionPivotView extends CollectionSubView() {
             <div className="collectionTimeView-pivot" style={{ width: this._props.PanelWidth(), height: '100%' }}>
                 {this.contents}
                 <div style={{ right: 0, top: 0, position: 'absolute' }}>
-                    <FieldsDropdown
-                        Doc={this.Document}
-                        selectFunc={fieldKey => {
-                            this.layoutDoc._pivotField = fieldKey;
-                        }}
-                        placeholder={StrCast(this.layoutDoc._pivotField)}
-                    />
+                    <FieldsDropdown Doc={this.Document} isInactive={!this._props.isContentActive()} selectFunc={fieldKey => (this.layoutDoc._pivotField = fieldKey)} placeholder={StrCast(this.layoutDoc._pivotField)} />
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 05ac52ff9..d6e4943ff 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -2,10 +2,12 @@
 
 .collectionMasonryView {
     display: inline;
+    flex-wrap: wrap;
 }
 
 .collectionStackingView {
     display: flex;
+    justify-content: space-between;
 }
 
 .collectionStackingMasonry-cont {
@@ -56,7 +58,6 @@
         top: 0;
         overflow-y: auto;
         overflow-x: hidden;
-        flex-wrap: wrap;
         transition: top 0.5s;
 
         > div {
@@ -210,7 +211,6 @@
     .collectionStackingView-sectionHeader {
         text-align: center;
         margin: auto;
-        margin-bottom: 10px;
         background: global.$medium-gray;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
@@ -367,7 +367,6 @@
     .collectionStackingView-addGroupButton {
         display: flex;
         overflow: hidden;
-        margin: auto;
         width: 90%;
         overflow: ellipses;
 
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 25a222cbb..4a0ddc631 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -4,7 +4,7 @@ import { action, computed, IReactionDisposer, makeObservable, observable, Observ
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ClientUtils, DivHeight, returnNone, returnZero, setupMoveUpEvents, smoothScroll } from '../../../ClientUtils';
-import { Doc, Opt } from '../../../fields/Doc';
+import { Doc, Field, Opt } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
@@ -35,6 +35,7 @@ import { CollectionStackingViewFieldColumn } from './CollectionStackingViewField
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import { computedFn } from 'mobx-utils';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
+import { FieldsDropdown } from '../FieldsDropdown';
 
 export type collectionStackingViewProps = {
     sortFunc?: (a: Doc, b: Doc) => number;
@@ -48,15 +49,15 @@ export type collectionStackingViewProps = {
 @observer
 export class CollectionStackingView extends CollectionSubView<Partial<collectionStackingViewProps>>() {
     _disposers: { [key: string]: IReactionDisposer } = {};
+    _addGroupRef = React.createRef<HTMLDivElement>();
     _masonryGridRef: HTMLDivElement | null = null;
     // used in a column dragger, likely due for the masonry grid view. We want to use this
     _draggerRef = React.createRef<HTMLDivElement>();
     // keeping track of documents. Updated on internal and external drops. What's the difference?
     _docXfs: { height: () => number; width: () => number; stackedDocTransform: () => Transform }[] = [];
-    // Doesn't look like this field is being used anywhere. Obsolete?
-    _columnStart: number = 0;
 
-    @observable _refList: HTMLElement[] = [];
+    @observable _colStackRefs: HTMLElement[] = [];
+    @observable _colHdrRefs: HTMLElement[] = [];
     // map of node headers to their heights. Used in Masonry
     @observable _heightMap = new Map<string, number>();
     // Assuming that this is the current css cursor style
@@ -67,9 +68,24 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     @computed get chromeHidden() {
         return this._props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
     }
-    // it looks like this gets the column headers that Mehek was showing just now
     @computed get colHeaderData() {
-        return Cast(this.dataDoc['_' + this.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null);
+        return Cast(this.dataDoc[this.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null);
+    }
+
+    @computed get Sections() {
+        return this.filteredChildren.reduce(
+            (map, d) => {
+                const docHeader = d[this.pivotField] ? d[this.pivotField] : `NO ${this.pivotField.toUpperCase()} VALUE`;
+                const docHeaderString = docHeader !== undefined ? Field.toString(docHeader) : `NO ${this.pivotField.toUpperCase()} VALUE`;
+
+                // find existing header or create
+                const existingHeader = Array.from(map.keys()).find(sh => sh.heading === docHeaderString);
+                if (!existingHeader) map.set(new SchemaHeaderField(docHeaderString), [d]);
+                else map.get(existingHeader)!.push(d);
+                return map;
+            },
+            new ObservableMap<SchemaHeaderField, Doc[]>(this.colHeaderData?.map(hdata => [hdata, []] as [SchemaHeaderField, Doc[]]) ?? [])
+        );
     }
     // Still not sure what a pivot is, but it appears that we can actually filter docs somehow?
     @computed get pivotField() {
@@ -107,9 +123,12 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     @computed get showAddAGroup() {
         return this.pivotField && !this.chromeHidden;
     }
+    @computed get availableWidth() {
+        return this._props.PanelWidth() - 2 * this.xMargin - (this.isStackingView ? this.gridGap * ((this.numGroupColumns || 1) - 1) : 0);
+    }
     // columnWidth handles the margin on the left and right side of the documents
     @computed get columnWidth() {
-        const availableWidth = this._props.PanelWidth() - 2 * this.xMargin;
+        const availableWidth = this.availableWidth;
         const cwid = availableWidth / (NumCast(this.Document._layout_columnCount) || this._props.PanelWidth() / NumCast(this.Document._layout_columnWidth, this._props.PanelWidth() / 4));
         return Math.min(availableWidth, this.isStackingView ? availableWidth / (this.numGroupColumns || 1) : cwid - this.gridGap);
     }
@@ -121,28 +140,17 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
-        if (this.colHeaderData === undefined) {
-            // TODO: what is a layout doc? Is it literally how this document is supposed to be layed out?
-            // here we're making an empty list of column headers (again, what Mehek showed us)
-            this.dataDoc['_' + this.fieldKey + '_columnHeaders'] = new List<SchemaHeaderField>();
-        }
     }
 
+    availableWidthFn = () => this.availableWidth;
     columnWidthFn = () => this.columnWidth;
     columnDocHeightFn = (doc: Doc) => () => (this.isStackingView ? this.getDocHeight(doc)() : Math.min(this.getDocHeight(doc)(), this._props.PanelHeight()));
 
-    // TODO: plj - these are the children
     children = (docs: Doc[]) => {
-        // TODO: can somebody explain me to what exactly TraceMobX is?
         TraceMobx();
-        // appears that we are going to reset the _docXfs. TODO: what is Xfs?
         this._docXfs.length = 0;
-        this._renderCount < docs.length &&
-            setTimeout(
-                action(() => {
-                    this._renderCount = Math.min(docs.length, this._renderCount + 5);
-                })
-            );
+        this._renderCount < docs.length && 
+            setTimeout(action(() => (this._renderCount = Math.min(docs.length, this._renderCount + 5)))); // prettier-ignore
         return docs.map((d, i) => {
             // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
             const rowSpan = Math.ceil((this.getDocHeight(d)() + this.gridGap) / this.gridGap);
@@ -153,76 +161,28 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                       margin: undefined,
                       transition: this.getDocTransition(d)(),
                       width: this.columnWidth,
-                      marginTop: i ? this.gridGap : 0,
                       height: this.getDocHeight(d)(),
                       zIndex: DocumentView.getFirstDocumentView(d)?.IsSelected ? 1000 : 0,
                   }
                 : { gridRowEnd: `span ${rowSpan}`, zIndex: DocumentView.getFirstDocumentView(d)?.IsSelected ? 1000 : 0 };
             // So we're choosing whether we're going to render a column or a masonry doc
             return (
-                <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}>
+                <div className={`collectionStackingView${this.isStackingView ? '-columnDoc' : '-masonryDoc'}`} key={d[Id]} style={style}>
                     {this.getDisplayDoc(d, this.getDocTransition(d), i)}
                 </div>
             );
         });
     };
     @action
-    setDocHeight = (key: string, sectionHeight: number) => {
-        this._heightMap.set(key, sectionHeight);
+    setDocHeight = (key: string, sectionHeight: number) => this._heightMap.set(key, sectionHeight);
+
+    setAutoHeight = () => {
+        const maxHeader = this.isStackingView ? this._colHdrRefs.reduce((p, r) => Math.max(p, DivHeight(r)), 0) + (this._colHdrRefs.length ? this.gridGap : 0) : 0;
+        const maxCol = this.isStackingView
+            ? this._colStackRefs.reduce((p, r) => Math.max(p, DivHeight(r)), 0) + this.gridGap
+            : this._colStackRefs.reduce((p, r) => p + DivHeight(r), this._addGroupRef.current ? DivHeight(this._addGroupRef.current) : 0);
+        this._props.setHeight?.(this.headerMargin + 2 * this.yMargin + maxCol + maxHeader);
     };
-
-    // is sections that all collections inherit? I think this is how we show the masonry/columns
-    // TODO: this seems important
-    get Sections() {
-        // appears that pivot field IS actually for sorting
-        if (!this.pivotField || this.colHeaderData instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
-
-        if (this.colHeaderData === undefined) {
-            setTimeout(() => {
-                this.dataDoc['_' + this.fieldKey + '_columnHeaders'] = new List<SchemaHeaderField>();
-            });
-            return new Map<SchemaHeaderField, Doc[]>();
-        }
-        const colHeaderData = Array.from(this.colHeaderData);
-        const fields = new Map<SchemaHeaderField, Doc[]>(colHeaderData.map(sh => [sh, []] as [SchemaHeaderField, []]));
-        let changed = false;
-        this.filteredChildren.forEach(d => {
-            const sectionValue = (d[this.pivotField] ? d[this.pivotField] : `NO ${this.pivotField.toUpperCase()} VALUE`) as object;
-            // the next five lines ensures that floating point rounding errors don't create more than one section -syip
-            const parsed = parseInt(sectionValue.toString());
-            const castedSectionValue = !isNaN(parsed) ? parsed : sectionValue;
-
-            // look for if header exists already
-            const existingHeader = colHeaderData.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `NO ${this.pivotField.toUpperCase()} VALUE`));
-            if (existingHeader) {
-                fields.get(existingHeader)!.push(d);
-            } else {
-                const newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `NO ${this.pivotField.toUpperCase()} VALUE`);
-                fields.set(newSchemaHeader, [d]);
-                colHeaderData.push(newSchemaHeader);
-                changed = true;
-            }
-        });
-        // remove all empty columns if hideHeadings is set
-        // we will want to have something like this, so that we can hide columns and add them back in
-        if (this.layoutDoc._columnsHideIfEmpty) {
-            Array.from(fields.keys())
-                .filter(key => !fields.get(key)!.length)
-                .forEach(header => {
-                    fields.delete(header);
-                    colHeaderData.splice(colHeaderData.indexOf(header), 1);
-                    changed = true;
-                });
-        }
-        changed &&
-            setTimeout(
-                action(() => this.colHeaderData?.splice(0, this.colHeaderData.length, ...colHeaderData)),
-                0
-            );
-        return fields;
-    }
-
-    setAutoHeight = () => this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : 2 * this.yMargin + this._refList.reduce((p, r) => p + DivHeight(r), 0)));
     observer = new ResizeObserver(this.setAutoHeight);
 
     componentDidMount() {
@@ -232,9 +192,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         // reset section headers when a new filter is inputted
         this._disposers.pivotField = reaction(
             () => this.pivotField,
-            () => {
-                this.dataDoc['_' + this.fieldKey + '_columnHeaders'] = new List();
-            }
+            () => (this.dataDoc[this.fieldKey + '_columnHeaders'] = new List())
         );
         // reset section headers when a new filter is inputted
         this._disposers.width = reaction(
@@ -252,7 +210,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         );
 
         this._disposers.refList = reaction(
-            () => ({ refList: this._refList.slice(), autoHeight: this.layoutDoc._layout_autoHeight && !DocumentView.LightboxContains(this.DocumentView?.()) }),
+            () => ({ refList: this._colStackRefs.slice(), autoHeight: this.layoutDoc._layout_autoHeight && !DocumentView.LightboxContains(this.DocumentView?.()) }),
             ({ refList, autoHeight }) => {
                 this.observer.disconnect();
                 if (autoHeight) refList.forEach(r => this.observer.observe(r));
@@ -409,11 +367,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     getDocWidth = computedFn((d?: Doc) => () => {
         if (!d) return 0;
         const childLayoutDoc = Doc.LayoutDoc(d, this._props.childLayoutTemplate?.());
-        const maxWidth = this.columnWidth / this.numGroupColumns;
         if (!this.layoutDoc._columnsFill && !this.childFitWidth(childLayoutDoc)) {
-            return Math.min(NumCast(d._width), maxWidth);
+            return Math.min(NumCast(d._width), this.columnWidth);
         }
-        return maxWidth;
+        return this.columnWidth;
     });
     getDocTransition = computedFn((d?: Doc) => () => StrCast(d?.dataTransition));
     getDocHeight = computedFn((d?: Doc) => () => {
@@ -424,7 +381,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!this.childFitWidth(childLayoutDoc) ? NumCast(d._width) : 0);
         const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!this.childFitWidth(childLayoutDoc) ? NumCast(d._height) : 0);
         if (nw && nh) {
-            const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
+            const colWid = this.columnWidth;
             const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d)(), colWid);
             return Math.min(maxHeight, (docWid * nh) / nw);
         }
@@ -571,7 +528,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         }
         return (
             <CollectionStackingViewFieldColumn
-                refList={this._refList}
+                colStackRefs={this._colStackRefs}
+                colHeaderRefs={this._colHdrRefs}
                 addDocument={this.addDocument}
                 chromeHidden={this.chromeHidden}
                 colHeaderData={this.colHeaderData}
@@ -613,8 +571,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                         showHandle={first}
                         Doc={this.Document}
                         chromeHidden={this.chromeHidden}
+                        panelWidth={this.availableWidthFn}
+                        columnWidth={this.columnWidthFn}
                         pivotField={this.pivotField}
-                        refList={this._refList}
+                        sectionRefs={this._colStackRefs}
                         key={heading ? heading.heading : ''}
                         rows={rows}
                         headings={this.headings}
@@ -635,9 +595,11 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     /// add a new group category (column) to the active set of note categories.  (e.g., if the pivot field is 'transportation', groups might be 'car', 'plane', 'bike', etc)
     @action
     addGroup = (value: string) => {
+        if (!this.colHeaderData) {
+            this.dataDoc[this.fieldKey + '_columnHeaders'] = new List();
+        }
         if (value && this.colHeaderData) {
-            const schemaHdrField = new SchemaHeaderField(value);
-            this.colHeaderData.push(schemaHdrField);
+            this.colHeaderData.push(new SchemaHeaderField(value));
             return true;
         }
         return false;
@@ -745,7 +707,11 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                             this.fixWheelEvents(ele, this._props.isContentActive);
                         }}
                         style={{
-                            overflowY: this.isContentActive() ? 'auto' : 'hidden',
+                            paddingBottom: this.yMargin,
+                            paddingTop: this.yMargin,
+                            paddingLeft: this.xMargin,
+                            paddingRight: this.xMargin,
+                            overflowY: this.isContentActive() && !this.layoutDoc._layout_autoHeight ? 'auto' : 'hidden',
                             background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string,
                             pointerEvents: this._props.pointerEvents?.() ?? this.backgroundEvents,
                         }}
@@ -756,11 +722,12 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                         onContextMenu={this.onContextMenu}
                         onWheel={e => this.isContentActive() && e.stopPropagation()}>
                         {this.renderedSections}
-                        {!this.showAddAGroup ? null : (
-                            <div key={`${this.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" style={{ width: !this.isStackingView ? '100%' : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}>
-                                <EditableView {...editableViewProps} />
-                            </div>
-                        )}
+                        <div className="collectionStackingView-addGroupButton" ref={this._addGroupRef} style={{ width: !this.isStackingView ? '100%' : this.columnWidth, display: this.showAddAGroup ? undefined : 'none' }}>
+                            <EditableView {...editableViewProps} />
+                        </div>
+                        <div style={{ right: 0, top: 0, position: 'absolute', display: !this.layoutDoc._pivotField ? 'none' : undefined }}>
+                            <FieldsDropdown Doc={this.Document} isInactive={!this._props.isContentActive()} selectFunc={fieldKey => (this.layoutDoc._pivotField = fieldKey)} placeholder={StrCast(this.layoutDoc._pivotField)} />
+                        </div>
                     </div>
                 </div>
             </>
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 345f60e75..8c7cb8276 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DivHeight, DivWidth, returnEmptyString, returnTrue, setupMoveUpEvents } from '../../../ClientUtils';
@@ -50,14 +50,14 @@ interface CSVFieldColumnProps {
     addDocument: (doc: Doc | Doc[]) => boolean;
     createDropTarget: (ele: HTMLDivElement) => void;
     screenToLocalTransform: () => Transform;
-    refList: HTMLElement[];
+    colStackRefs: HTMLElement[];
+    colHeaderRefs: HTMLElement[];
 }
 
 @observer
 export class CollectionStackingViewFieldColumn extends ObservableReactComponent<CSVFieldColumnProps> {
     private dropDisposer?: DragManager.DragDropDisposer;
     private _disposers: { [name: string]: IReactionDisposer } = {};
-    private _headerRef: React.RefObject<HTMLDivElement> = React.createRef();
     @observable _background = 'inherit';
     @observable _paletteOn = false;
     @observable _heading = '';
@@ -72,6 +72,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
 
     _ele: HTMLElement | null = null;
     _eleMasonrySingle = React.createRef<HTMLDivElement>();
+    _headerRef: HTMLDivElement | null = null;
 
     protected onInternalPreDrop = (e: Event, de: DragManager.DropEvent, targetDropAction: dropActionType) => {
         const dragData = de.complete.docDragData;
@@ -93,13 +94,13 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
     createColumnDropRef = (ele: HTMLDivElement | null) => {
         this.dropDisposer?.();
         if (ele) this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this), this._props.Doc, this.onInternalPreDrop.bind(this));
-        else if (this._eleMasonrySingle.current) this.props.refList.splice(this.props.refList.indexOf(this._eleMasonrySingle.current), 1);
+        else if (this._eleMasonrySingle.current) runInAction(() => this.props.colStackRefs.splice(this.props.colStackRefs.indexOf(this._eleMasonrySingle.current!), 1));
         this._ele = ele;
     };
 
     @action
     componentDidMount() {
-        this._eleMasonrySingle.current && this.props.refList.push(this._eleMasonrySingle.current);
+        this._eleMasonrySingle.current && this.props.colStackRefs.push(this._eleMasonrySingle.current);
         this._disposers.collapser = reaction(
             () => this._props.headingObject?.collapsed,
             collapsed => { this.collapsed = collapsed !== undefined ? BoolCast(collapsed) : false; }, // prettier-ignore
@@ -108,7 +109,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
     }
     componentWillUnmount() {
         this._disposers.collapser?.();
-        this._ele && this.props.refList.splice(this.props.refList.indexOf(this._ele), 1);
+        this._ele && runInAction(() => this.props.colStackRefs.splice(this.props.colStackRefs.indexOf(this._ele!), 1));
         this._ele = null;
     }
 
@@ -192,7 +193,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
         value = typeof value === 'string' ? `"${value}"` : value;
         embedding.viewSpecScript = ScriptField.MakeFunction(`doc.${this._props.pivotField} === ${value}`, { doc: Doc.name });
         if (embedding.viewSpecScript) {
-            DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([embedding]), e.clientX, e.clientY);
+            DragManager.StartDocumentDrag([this._headerRef!], new DragManager.DocumentDragData([embedding]), e.clientX, e.clientY);
             return true;
         }
         return false;
@@ -314,9 +315,14 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
             <div
                 key={heading}
                 className="collectionStackingView-sectionHeader"
-                ref={this._headerRef}
+                ref={r => {
+                    if (this._headerRef && this._props.colHeaderRefs.includes(this._headerRef)) this._props.colHeaderRefs.splice(this._props.colStackRefs.indexOf(this._headerRef), 1);
+                    r && this._props.colHeaderRefs.push(r);
+                    this._headerRef = r;
+                }}
                 style={{
-                    marginTop: this._props.yMargin,
+                    marginTop: 0,
+                    marginBottom: this._props.gridGap,
                     width: this._props.columnWidth,
                 }}>
                 {/* the default bucket (no key value) has a tooltip that describes what it is.
@@ -367,7 +373,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
                             ref={this._eleMasonrySingle}
                             className="collectionStackingView-masonrySingle"
                             style={{
-                                padding: `${columnYMargin}px ${0}px ${this._props.yMargin}px ${0}px`,
+                                padding: `${columnYMargin}px ${0}px ${0}px ${0}px`,
                                 margin: this._props.dontCenter.includes('x') ? undefined : 'auto',
                                 height: 'max-content',
                                 position: 'relative',
@@ -400,15 +406,13 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
 
     render() {
         TraceMobx();
-        const headings = this._props.headings();
         const heading = this._heading;
-        const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         return (
             <div
                 className="collectionStackingViewFieldColumn"
                 key={heading}
                 style={{
-                    width: `${100 / (uniqueHeadings.length + (this._props.chromeHidden ? 0 : 1) || 1)}%`,
+                    width: this._props.columnWidth,
                     height: undefined,
                     background: this._background,
                 }}
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 4ac755b9d..01a8da313 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -356,12 +356,16 @@ export function CollectionSubView<X>() {
                 return !!added;
             }
             if (de.complete.annoDragData) {
-                const dropCreator = de.complete.annoDragData.dropDocCreator;
-                de.complete.annoDragData.dropDocCreator = () => {
-                    const dropped = dropCreator(this._props.isAnnotationOverlay ? this.Document : undefined);
-                    this.addDocument(dropped);
-                    return dropped;
-                };
+                if (![de.complete.annoDragData.dragDocument.embedContainer, de.complete.annoDragData.dragDocument].includes(this.Document)) {
+                    de.complete.annoDragData.dropDocCreator = () => this.getAnchor?.(true) || this.Document;
+                } else {
+                    const dropCreator = de.complete.annoDragData.dropDocCreator;
+                    de.complete.annoDragData.dropDocCreator = () => {
+                        const dropped = dropCreator(this._props.isAnnotationOverlay ? this.Document : undefined);
+                        this.addDocument(dropped);
+                        return dropped;
+                    };
+                }
                 return true;
             }
             return false;
@@ -415,7 +419,7 @@ export function CollectionSubView<X>() {
                     const tags = html.split('<');
                     if (tags[0] === '') tags.splice(0, 1);
                     let img = tags[0].startsWith('img') ? tags[0] : tags.length > 1 && tags[1].startsWith('img') ? tags[1] : '';
-                    const cors = img.includes('corsProxy') ? img.match(/http.*corsProxy\//)![0] : '';
+                    const cors = img.includes('corsproxy') ? img.match(/http.*corsproxy\//)![0] : '';
                     img = cors ? img.replace(cors, '') : img;
                     if (img) {
                         const imgSrc = img.split('src="')[1].split('"')[0];
@@ -563,10 +567,11 @@ export function CollectionSubView<X>() {
                             Doc.addCurrentlyLoading(loading);
                             DocUtils.uploadFileToDoc(file, {}, loading).then(d => {
                                 if (d && d?.type === DocumentType.IMG) {
-                                    const imgTemplate = DocListCast(DocCast(Doc.UserDoc().template_user)?.data).find(d => d.title === 'shower');
+                                    const imgTemplate = DocCast(Doc.UserDoc().defaultImageLayout);
                                     if (imgTemplate) {
-                                        d.layout_fieldKey = 'layout_shower';
-                                        d.layout_shower = imgTemplate;
+                                        const templateFieldKey = StrCast(imgTemplate.title);
+                                        d.layout_fieldKey = templateFieldKey;
+                                        d[templateFieldKey] = imgTemplate;
                                     }
                                 }
                             });
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index eb9caf29d..72c8c3f8c 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -113,7 +113,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
     };
 
     setupViewTypes(category: string, func: (type_collection: CollectionViewType) => Doc) {
-        if (!Doc.IsSystem(this.Document) && this.Document._type_collection !== CollectionViewType.Docking && !this.dataDoc.isGroup && !this.Document.annotationOn) {
+        if (!Doc.IsSystem(this.Document) && this.Document._type_collection !== CollectionViewType.Docking && !this.Document.annotationOn) {
             // prettier-ignore
             const subItems: ContextMenuProps[] = [
                 { description: 'Freeform',    event: () => func(CollectionViewType.Freeform), icon: 'signature' },
diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx
index 2f46c00bd..17b65334c 100644
--- a/src/client/views/collections/FlashcardPracticeUI.tsx
+++ b/src/client/views/collections/FlashcardPracticeUI.tsx
@@ -61,7 +61,8 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
     get practiceField() { return this._props.fieldKey + "_practice"; } // prettier-ignore
 
     @computed get filterDoc() { return DocListCast(Doc.MyContextMenuBtns?.data).find(doc => doc.title === 'Filter'); } // prettier-ignore
-    @computed get practiceMode() {  return this._props.allChildDocs().some(doc => doc._layout_flashcardType) ? StrCast(this._props.layoutDoc.practiceMode) : ''; } // prettier-ignore
+    @computed get hasFlashcards() { return this._props.allChildDocs().some(doc => doc._layout_flashcardType); } // prettier-ignore
+    @computed get practiceMode() { return this.hasFlashcards ? StrCast(this._props.layoutDoc.practiceMode) : ''; } // prettier-ignore
 
     btnHeight = () => NumCast(this.filterDoc?.height);
     btnWidth = () => (!this.filterDoc ? 1 : NumCast(this.filterDoc._width));
@@ -130,7 +131,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
         const setColor = (mode: practiceMode) => (StrCast(this.practiceMode) === mode ? 'white' : 'lightgray');
         const togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode);
 
-        return !this._props.allChildDocs().some(doc => doc._layout_flashcardType) ? null : (
+        return !this.hasFlashcards ? null : (
             <div
                 className="FlashcardPracticeUI-practiceModes"
                 style={{
@@ -141,8 +142,8 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
                     type={Type.PRIM}
                     color={SnappingManager.userColor}
                     background={SnappingManager.userVariantColor}
+                    showUntilToggle={false}
                     multiSelect={false}
-                    toggleStatus={!!this.practiceMode}
                     label="Practice"
                     items={[
                         [practiceMode.QUIZ, 'file-pen', 'Practice flashcards using GPT'],
@@ -160,8 +161,8 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
                     type={Type.PRIM}
                     color={SnappingManager.userColor}
                     background={SnappingManager.userVariantColor}
+                    showUntilToggle={false}
                     multiSelect={false}
-                    toggleStatus={!!this.practiceMode}
                     label={StrCast(this._props.layoutDoc.revealOp, flashcardRevealOp.FLIP)}
                     items={[
                         ['reveal', StrCast(this._props.layoutDoc.revealOp) === flashcardRevealOp.SLIDE ? 'expand' : 'question', StrCast(this._props.layoutDoc.revealOp, flashcardRevealOp.FLIP)],
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index c4373aaa7..897a86e7f 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -584,9 +584,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
     miniMapColor = () => Colors.MEDIUM_GRAY;
     tabView = () => this._view;
     disableMinimap = () => !this._document;
-    whenChildContentActiveChanges = (isActive: boolean) => {
-        this._isAnyChildContentActive = isActive;
-    };
+    whenChildContentActiveChanges = (isActive: boolean) => (this._isAnyChildContentActive = isActive);
     isContentActiveFunc = () => this.isContentActive;
     waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined);
     renderDocView = (doc: Doc) => (
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index bb3c59eae..3571dab1a 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -176,7 +176,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return renderableEles;
     }
     @computed get fitContentsToBox() {
-        return (this._props.fitContentsToBox?.() || this.Document._freeform_fitContentsToBox) && !this.isAnnotationOverlay;
+        return (this._props.fitContentsToBox?.() || this.Document._freeform_fitContentsToBox || this.Document.freeform_isGroup) && !this.isAnnotationOverlay;
     }
     @computed get nativeWidth() {
         return this._props.NativeWidth?.() || Doc.NativeWidth(this.Document);
@@ -342,7 +342,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      */
     focusOnPoint = (options: FocusViewOptions) => {
         const { pointFocus, zoomTime, didMove } = options;
-        if (!this.Document.isGroup && pointFocus && !didMove) {
+        if (!this.Document.freeform_isGroup && pointFocus && !didMove) {
             const dfltScale = this.isAnnotationOverlay ? 1 : 0.25;
             if (this.layoutDoc[this.scaleFieldKey] !== dfltScale) {
                 this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(pointFocus.X, pointFocus.Y), dfltScale, zoomTime);
@@ -380,7 +380,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      * @returns
      */
     focus = (anchor: Doc, options: FocusViewOptions) => {
-        if (anchor.isGroup && !options.docTransform && options.contextPath?.length) {
+        if (Doc.IsFreeformGroup(anchor) && !options.docTransform && options.contextPath?.length) {
             // don't focus on group if there's a context path because we're about to focus on a group item
             // which will override any group focus. (If we allowed the group to focus, it would mark didMove even if there were no net movement)
             return undefined;
@@ -395,7 +395,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
         const xfToCollection = options?.docTransform ?? Transform.Identity();
         const savedState = { panX: NumCast(this.Document[this.panXFieldKey]), panY: NumCast(this.Document[this.panYFieldKey]), scale: options?.willZoomCentered ? this.Document[this.scaleFieldKey] : undefined };
-        const cantTransform = this.fitContentsToBox || ((this.Document.isGroup || this.layoutDoc._lockedTransform) && !DocumentView.LightboxDoc());
+        const cantTransform = this.fitContentsToBox || ((this.Document.freeform_isGroup || this.layoutDoc._lockedTransform) && !DocumentView.LightboxDoc());
         const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? (options?.zoomScale ?? 0.75) : undefined);
 
         // focus on the document in the collection
@@ -514,7 +514,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this._downTime = Date.now();
         const scrollMode = e.altKey ? (Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan ? freeformScrollMode.Zoom : freeformScrollMode.Pan) : Doc.UserDoc().freeformScrollMode;
         if (e.button === 0 && (!(e.ctrlKey && !e.metaKey) || scrollMode !== freeformScrollMode.Pan) && this._props.isContentActive()) {
-            if (!this.Document.isGroup) {
+            if (!this.Document.freeform_isGroup) {
                 // group freeforms don't pan when dragged -- instead let the event go through to allow the group itself to drag
                 // prettier-ignore
                 const hit = this._clusters.handlePointerDown(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY));
@@ -1271,7 +1271,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @action
     zoom = (pointX: number, pointY: number, deltaY: number): void => {
-        if (this.Document.isGroup || this.Document[(this._props.viewField ?? '_') + 'freeform_noZoom']) return;
+        if (this.Document.freeform_isGroup || this.Document[(this._props.viewField ?? '_') + 'freeform_noZoom']) return;
         let deltaScale = deltaY > 0 ? 1 / 1.05 : 1.05;
         if (deltaScale < 0) deltaScale = -deltaScale;
         const [x, y] = this.screenToFreeformContentsXf.transformPoint(pointX, pointY);
@@ -1298,7 +1298,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @action
     onPointerWheel = (e: React.WheelEvent): void => {
-        if (this.Document.isGroup || !this.isContentActive()) return; // group style collections neither pan nor zoom
+        if (this.Document.freeform_isGroup || !this.isContentActive()) return; // group style collections neither pan nor zoom
         SnappingManager.TriggerUserPanned();
         if (this.layoutDoc._Transform || this.Document.treeView_OutlineMode === TreeViewType.outline) return;
         e.stopPropagation();
@@ -1422,7 +1422,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @action
     zoomSmoothlyAboutPt(docpt: number[], scale: number, transitionTime = 500) {
-        if (this.Document.isGroup) return;
+        if (this.Document.freeform_isGroup) return;
         this.setPanZoomTransition(transitionTime);
         const screenXY = this.screenToFreeformContentsXf.inverse().transformPoint(docpt[0], docpt[1]);
         this.layoutDoc[this.scaleFieldKey] = scale;
@@ -1505,7 +1505,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     removeDocument = (docs: Doc | Doc[], annotationKey?: string | undefined) => {
         const ret = !!this._props.removeDocument?.(docs, annotationKey);
         // if this is a group and we have fewer than 2 Docs, then just promote what's left to our parent and get rid of the group.
-        if (ret && DocListCast(this.dataDoc[annotationKey ?? this.fieldKey]).length < 2 && this.Document.isGroup) {
+        if (ret && DocListCast(this.dataDoc[annotationKey ?? this.fieldKey]).length < 2 && this.Document.freeform_isGroup) {
             this.promoteCollection();
         }
         return ret;
@@ -1548,7 +1548,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 searchFilterDocs={this.searchFilterDocs}
                 isDocumentActive={childLayout.pointerEvents === 'none' ? returnFalse : this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this.isContentActive}
                 isContentActive={this.childContentsActive}
-                focus={this.Document.isGroup ? this.groupFocus : this.isAnnotationOverlay ? this._props.focus : this.focus}
+                focus={this.Document.freeform_isGroup ? this.groupFocus : this.isAnnotationOverlay ? this._props.focus : this.focus}
                 addDocTab={this.addDocTab}
                 addDocument={this._props.addDocument}
                 removeDocument={this.removeDocument}
@@ -1733,15 +1733,16 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         });
         PinDocView(
             anchor,
-            { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ? { ...pinProps.pinData, poslayoutview: pinProps.pinData.dataview } : {}), pannable: !this.Document.isGroup, collectionType: true, filters: true } },
+            { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ? { ...pinProps.pinData, poslayoutview: pinProps.pinData.dataview } : {}), pannable: !this.Document.freeform_isGroup, collectionType: true, filters: true } },
             this.Document
         );
 
         if (addAsAnnotation) {
-            if (Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) {
-                Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), [])?.push(anchor);
+            const fieldKey = this._props.isAnnotationOverlay ? this._props.fieldKey : this._props.fieldKey + '_annotations';
+            if (Cast(this.dataDoc[fieldKey], listSpec(Doc), null) !== undefined) {
+                Cast(this.dataDoc[fieldKey], listSpec(Doc), [])?.push(anchor);
             } else {
-                this.dataDoc[this._props.fieldKey + '_annotations'] = new List<Doc>([anchor]);
+                this.dataDoc[fieldKey] = new List<Doc>([anchor]);
             }
         }
         return anchor;
@@ -1766,7 +1767,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 this._firstRender = false;
                 this._disposers.groupBounds = reaction(
                     () => {
-                        if (this.Document.isGroup && this.childDocs.length === this.childDocList?.length) {
+                        if (this.Document.freeform_isGroup && this.childDocs.length === this.childDocList?.length) {
                             const clist = this.childDocs.map(cd => ({ x: NumCast(cd.x), y: NumCast(cd.y), width: NumCast(cd._width), height: NumCast(cd._height) }));
                             return aggregateBounds(clist, NumCast(this.layoutDoc._xMargin), NumCast(this.layoutDoc._yMargin));
                         }
@@ -1928,8 +1929,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
         const appearance = ContextMenu.Instance.findByDescription('Appearance...');
         const appearanceItems = appearance?.subitems ?? [];
-        !this.Document.isGroup && appearanceItems.push({ description: 'Reset View', event: this.resetView, icon: 'compress-arrows-alt' });
-        !this.Document.isGroup && appearanceItems.push({ description: 'Toggle Auto Reset View', event: this.toggleResetView, icon: 'compress-arrows-alt' });
+        !this.Document.freeform_isGroup && appearanceItems.push({ description: 'Reset View', event: this.resetView, icon: 'compress-arrows-alt' });
+        !this.Document.freeform_isGroup && appearanceItems.push({ description: 'Toggle Auto Reset View', event: this.toggleResetView, icon: 'compress-arrows-alt' });
         if (this._props.setContentViewBox === emptyFunction) {
             !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
             return;
@@ -1947,7 +1948,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         !Doc.noviceMode && appearanceItems.push({ description: `update icon`, event: () => this.updateIcon(), icon: 'compress-arrows-alt' });
         this._props.renderDepth && appearanceItems.push({ description: 'Ungroup collection', event: this.promoteCollection, icon: 'table' });
 
-        this.Document.isGroup && this.Document.transcription && appearanceItems.push({ description: 'Ink to text', event: this.transcribeStrokes, icon: 'font' });
+        this.Document.freeform_isGroup && this.Document.transcription && appearanceItems.push({ description: 'Ink to text', event: this.transcribeStrokes, icon: 'font' });
 
         !Doc.noviceMode ? appearanceItems.push({ description: 'Arrange contents in grid', event: this.layoutDocsInGrid, icon: 'table' }) : null;
         !Doc.noviceMode ? appearanceItems.push({ description: (this.Document._freeform_useClusters ? 'Hide' : 'Show') + ' Clusters', event: () => this._clusters.updateClusters(!this.Document._freeform_useClusters), icon: 'braille' }) : null;
@@ -2006,7 +2007,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
 
     transcribeStrokes = undoable(() => {
-        if (this.Document.isGroup && this.Document.transcription) {
+        if (this.Document.freeform_isGroup && this.Document.transcription) {
             const text = StrCast(this.Document.transcription);
             const lines = text.split('\n');
             const height = 30 + 15 * lines.length;
@@ -2024,7 +2025,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     dragStarting = (snapToDraggedDoc: boolean = false, showGroupDragTarget: boolean = true, visited = new Set<Doc>()) => {
         if (visited.has(this.Document)) return;
         visited.add(this.Document);
-        showGroupDragTarget && (this.GroupChildDrag = BoolCast(this.Document.isGroup));
+        showGroupDragTarget && (this.GroupChildDrag = BoolCast(this.Document.freeform_isGroup));
         const activeDocs = this.getActiveDocuments();
         const size = this.screenToFreeformContentsXf.transformDirection(this._props.PanelWidth(), this._props.PanelHeight());
         const selRect = { left: this.panX() - size[0] / 2, top: this.panY() - size[1] / 2, width: size[0], height: size[1] };
@@ -2032,13 +2033,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const isDocInView = (doc: Doc, rect: { left: number; top: number; width: number; height: number }) => intersectRect(docDims(doc), rect);
 
         const snappableDocs = activeDocs.filter(doc => doc.z === undefined && isDocInView(doc, selRect)); // first see if there are any foreground docs to snap to
-        activeDocs.filter(doc => doc.isGroup && SnappingManager.IsResizing !== doc[Id] && !DragManager.docsBeingDragged.includes(doc)).forEach(doc => DocumentView.getDocumentView(doc)?.ComponentView?.dragStarting?.(snapToDraggedDoc, false, visited));
+        activeDocs
+            .filter(doc => Doc.IsFreeformGroup(doc) && SnappingManager.IsResizing !== doc[Id] && !DragManager.docsBeingDragged.includes(doc))
+            .forEach(doc => DocumentView.getDocumentView(doc)?.ComponentView?.dragStarting?.(snapToDraggedDoc, false, visited));
 
         const horizLines: number[] = [];
         const vertLines: number[] = [];
         const invXf = this.screenToFreeformContentsXf.inverse();
         snappableDocs
-            .filter(doc => !doc.isGroup && (snapToDraggedDoc || (SnappingManager.IsResizing !== doc[Id] && !DragManager.docsBeingDragged.includes(doc))))
+            .filter(doc => !Doc.IsFreeformGroup(doc) && (snapToDraggedDoc || (SnappingManager.IsResizing !== doc[Id] && !DragManager.docsBeingDragged.includes(doc))))
             .forEach(doc => {
                 const { left, top, width, height } = docDims(doc);
                 const topLeftInScreen = invXf.transformPoint(left, top);
@@ -2130,7 +2133,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 {...this._props}
                 ref={this._marqueeViewRef}
                 Doc={this.Document}
-                ungroup={this.Document.isGroup ? this.promoteCollection : undefined}
+                ungroup={this.Document.freeform_isGroup ? this.promoteCollection : undefined}
                 nudge={this.isAnnotationOverlay || this._props.renderDepth > 0 ? undefined : this.nudge}
                 addDocTab={this.addDocTab}
                 slowLoadDocuments={this.slowLoadDocuments}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index b644db0b3..b2b904509 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -203,6 +203,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             FormattedTextBox.SelectOnLoadChar = Doc.UserDoc().defaultTextLayout && !this._props.childLayoutString ? e.key : '';
             FormattedTextBox.LiveTextUndo = UndoManager.StartBatch('type new note');
             this._props.addLiveTextDocument(DocUtils.GetNewTextDoc('-typed text-', x, y, 200, 100));
+            setTimeout(() => FormattedTextBox.LiveTextUndo?.end(), 100);
             e.stopPropagation();
         }
     };
@@ -386,7 +387,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             ? creator(selected, { title: 'nested stack' })
             : ((doc: Doc) => {
                   doc.$data = new List<Doc>(selected);
-                  doc.$isGroup = makeGroup;
+                  doc.$freeform_isGroup = makeGroup;
                   doc.$title = makeGroup ? 'grouping' : 'nested freeform';
                   doc._freeform_panX = doc._freeform_panY = 0;
                   return doc;
@@ -522,7 +523,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             _layout_showSidebar: true,
             title: 'overview',
         });
-        const portal = Docs.Create.FreeformDocument(selected, { title: 'summarized documents', x: this.Bounds.left + 200, y: this.Bounds.top, isGroup: true, backgroundColor: 'transparent' });
+        const portal = Docs.Create.FreeformDocument(selected, { title: 'summarized documents', x: this.Bounds.left + 200, y: this.Bounds.top, freeform_isGroup: true, backgroundColor: 'transparent' });
         DocUtils.MakeLink(summary, portal, { link_relationship: 'summary of:summarized by' });
 
         portal.hidden = true;
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 16d33eb93..134f2ed31 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -115,12 +115,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         };
         const readOnly = this.getFinfo(fieldKey)?.readOnly ?? false;
         const cursor = !readOnly ? 'text' : 'default';
-        const pointerEvents: 'all' | 'none' = 'all';
-        return { color, fieldProps, cursor, pointerEvents };
+        return { color, fieldProps, cursor };
     };
 
     @computed get editableView() {
-        const { color, fieldProps, pointerEvents } = this.renderProps(this._props);
+        const { color, fieldProps } = this.renderProps(this._props);
 
         return (
             <div
@@ -132,7 +131,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 style={{
                     color,
                     width: '100%',
-                    pointerEvents,
                 }}>
                 <EditableView
                     ref={r => {
@@ -232,6 +230,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 className="schema-column-header"
                 style={{
                     width: this._props.columnWidths[this._props.columnIndex],
+                    pointerEvents: this.props.isContentActive() ? undefined : 'none',
                 }}
                 onPointerEnter={() => {
                     this.handlePointerEnter();
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index f4beb1004..cb3adae10 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -156,6 +156,11 @@ ScriptingGlobals.add(function setDefaultTemplate(checkResult?: boolean) {
 });
 // toggle: Set overlay status of selected document
 // eslint-disable-next-line prefer-arrow-callback
+ScriptingGlobals.add(function setDefaultImageTemplate(checkResult?: boolean) {
+    return DocumentView.setDefaultImageTemplate(checkResult);
+});
+// toggle: Set overlay status of selected document
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boolean) {
     if (checkResult) {
         return DocumentView.Selected().length ? StrCast(DocumentView.SelectedDocs().lastElement().layout_headingColor) : Doc.SharingDoc()?.headingColor;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index c984a7053..6c1ad568d 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -105,11 +105,7 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                     LinkManager.Instance.currentLinkAnchor = LinkManager.Instance.currentLink ? this.sourceAnchor : undefined;
 
                     if ((SnappingManager.PropertiesWidth ?? 0) < 100) {
-                        setTimeout(
-                            action(() => {
-                                SnappingManager.SetPropertiesWidth(250);
-                            })
-                        );
+                        setTimeout(action(() => SnappingManager.SetPropertiesWidth(250)));
                     }
                 }
             })
@@ -136,14 +132,14 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                     this._props.itemHandler?.(this._props.linkDoc);
                 } else {
                     const focusDoc =
-                        Cast(this._props.linkDoc.link_anchor_1, Doc, null)?.annotationOn === this._props.sourceDoc
-                            ? Cast(this._props.linkDoc.link_anchor_1, Doc, null)
-                            : Cast(this._props.linkDoc.link_anchor_2, Doc, null)?.annotationOn === this._props.sourceDoc
-                              ? Cast(this._props.linkDoc.link_anchor_12, Doc, null)
-                              : undefined;
+                        DocCast(this._props.linkDoc.link_anchor_1)?.annotationOn === this._props.sourceDoc
+                            ? DocCast(this._props.linkDoc.link_anchor_1)
+                      : DocCast(this._props.linkDoc.link_anchor_2)?.annotationOn === this._props.sourceDoc
+                            ? DocCast(this._props.linkDoc.link_anchor_2)
+                      : undefined; // prettier-ignore
 
                     if (focusDoc) this._props.docView._props.focus(focusDoc, { instant: true });
-                    DocumentView.FollowLink(this._props.linkDoc, this._props.sourceDoc, false);
+                    DocumentView.FollowLink(this._props.linkDoc, focusDoc ?? this._props.sourceDoc, false);
                 }
             }
         );
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
new file mode 100644
index 000000000..526fcf9c4
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
@@ -0,0 +1,91 @@
+import { action, makeAutoObservable } from 'mobx';
+import { Col } from '../DocCreatorMenu';
+import { FieldSettings, TemplateField } from '../TemplateFieldTypes/TemplateField';
+import { Template } from '../Template';
+import { NumListCast } from '../../../../../../fields/Doc';
+import { DataVizBox } from '../../DataVizBox';
+import { TemplateFieldType } from '../TemplateBackend';
+import { TemplateMenuAIUtils } from './TemplateMenuAIUtils';
+
+export type Conditional = {
+    field: string;
+    operator: '=' | '>' | '<' | 'contains';
+    condition: string;
+    target: string;
+    attribute: string;
+    value: string;
+};
+
+export class TemplateManager {
+    _templates: Template[] = [];
+
+    _conditionalFieldLogic: Record<string, Conditional[]> = {};
+
+    constructor(templateSettings: FieldSettings[]) {
+        makeAutoObservable(this);
+        this._templates = templateSettings.map(settings => new Template(settings));
+    }
+
+    getValidTemplates = (cols: Col[]) => this._templates.filter(template => template.isValidTemplate(cols));
+
+    addTemplate = (newTemplate: Template) => this._templates.push(newTemplate);
+
+    removeTemplate = (template: Template) => {
+        if (this._templates.includes(template)) {
+            this._templates.splice(this._templates.indexOf(template), 1);
+        }
+        template.cleanup();
+    };
+
+    addFieldCondition = (fieldTitle: string, condition: Conditional) => {
+        if (this._conditionalFieldLogic[fieldTitle] === undefined) {
+            this._conditionalFieldLogic[fieldTitle] = [condition];
+        } else {
+            this._conditionalFieldLogic[fieldTitle].push(condition);
+        }
+    };
+
+    removeFieldCondition = (fieldTitle: string, condition: Conditional) => (this._conditionalFieldLogic[fieldTitle] = this._conditionalFieldLogic[fieldTitle]?.filter(cond => cond !== condition));
+
+    addDataField = (title: string) => this._templates.forEach(template => template.addDataField(title));
+
+    removeDataField = (title: string) => this._templates.forEach(template => template.removeDataField(title));
+
+    createDocsFromTemplate = action((dv: DataVizBox, template: Template, cols: Col[], debug: boolean = false) => {
+        const csvFields = Array.from(Object.keys(dv.records[0]));
+
+        const processContent = (content: { [title: string]: string }) => {
+            const templateCopy = template.clone();
+
+            csvFields
+                .filter(title => title)
+                .forEach(title => {
+                    const field = templateCopy.getFieldByTitle(title);
+                    field?.setContent(content[title], field.viewType);
+                });
+
+            const gptFunc = (type: TemplateFieldType) => (type === TemplateFieldType.VISUAL ? TemplateMenuAIUtils.renderGPTImageCall : TemplateMenuAIUtils.renderGPTTextCall);
+
+            const generateGptContent = cols
+                .map(field => ({ field, templateField: field?.AIGenerated && templateCopy.getFieldByTitle(field.title) }))
+                .filter(({ templateField }) => templateField instanceof TemplateField)
+                .map(({ field, templateField }) => gptFunc(field.type)(templateCopy, field, (templateField as TemplateField).getID));
+
+            return Promise.all(generateGptContent).then(() => templateCopy.applyConditionalLogic(this._conditionalFieldLogic));
+        };
+
+        const rowContents = debug
+            ? [{}, {}, {}, {}]
+            : NumListCast(dv.layoutDoc.dataViz_selectedRows).map(row =>
+                  csvFields.reduce(
+                      (values, col) => {
+                          values[col] = dv.records[row][col];
+                          return values;
+                      },
+                      {} as { [title: string]: string }
+                  )
+              );
+
+        return Promise.all(rowContents.map(processContent));
+    });
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts
new file mode 100644
index 000000000..08818dd6c
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts
@@ -0,0 +1,122 @@
+import { ClientUtils } from '../../../../../../ClientUtils';
+import { Networking } from '../../../../../Network';
+import { gptImageCall, gptAPICall, GPTCallType } from '../../../../../apis/gpt/GPT';
+import { Col } from '../DocCreatorMenu';
+import { TemplateFieldSize, TemplateFieldType } from '../TemplateBackend';
+import { ViewType } from '../TemplateFieldTypes/TemplateField';
+import { Template } from '../Template';
+import { Upload } from '../../../../../../server/SharedMediaTypes';
+
+export class TemplateMenuAIUtils {
+    public static generateGPTImage = async (prompt: string): Promise<string | undefined> => {
+        try {
+            const res = await gptImageCall(prompt);
+
+            if (res) {
+                const result = (await Networking.PostToServer('/uploadRemoteImage', { sources: res })) as Upload.FileInformation[];
+                const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
+                return source;
+            }
+        } catch (e) {
+            console.log(e);
+        }
+    };
+
+    public static renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise<boolean> => {
+        const generateAndLoadImage = async (id: number, prompt: string) => {
+            const field = template.getFieldByID(id);
+            const url = await this.generateGPTImage(prompt);
+            field?.setContent(url ?? '', ViewType.IMG);
+            field?.setTitle(col.title);
+        };
+
+        const fieldContent: string = template.compiledContent;
+
+        try {
+            const sysPrompt =
+                `#${Math.random() * 100}: Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ` +
+                fieldContent +
+                ' **** The user prompt is: ' +
+                col.desc;
+
+            const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
+
+            await generateAndLoadImage(fieldNumber, prompt);
+        } catch (e) {
+            console.log(e);
+        }
+        return true;
+    };
+
+    public static renderGPTTextCall = async (template: Template, col: Col, fieldNum: number | undefined): Promise<boolean> => {
+        const wordLimit = (size: TemplateFieldSize) => {
+            switch (size) {
+                case TemplateFieldSize.TINY:
+                    return 2;
+                case TemplateFieldSize.SMALL:
+                    return 5;
+                case TemplateFieldSize.MEDIUM:
+                    return 20;
+                case TemplateFieldSize.LARGE:
+                    return 50;
+                case TemplateFieldSize.HUGE:
+                    return 100;
+                default:
+                    return 10;
+            }
+        };
+
+        const textAssignment = `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`;
+
+        const fieldContent: string = template.compiledContent;
+
+        try {
+            const prompt = fieldContent + textAssignment;
+
+            const res = await gptAPICall(`${Math.random() * 100000}: ${prompt}`, GPTCallType.FILL);
+
+            if (res) {
+                const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
+                Object.entries(assignments).forEach(([, /* title */ info]) => {
+                    const field = template.getFieldByID(Number(info.number));
+
+                    field?.setContent(info.content ?? '', ViewType.TEXT);
+                    field?.setTitle(col.title);
+                });
+            }
+        } catch (err) {
+            console.log(err);
+        }
+
+        return true;
+    };
+
+    /**
+     * Populates a preset template framework with content from a datavizbox or any AI-generated content.
+     * @param template the preloaded template framework being filled in
+     * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz
+     * @returns a doc containing the fully rendered template
+     */
+    public static applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template | undefined> => {
+        const GPTTextCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.TEXT && col.AIGenerated);
+        const GPTIMGCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.VISUAL && col.AIGenerated);
+
+        if (GPTTextCalls.length) {
+            const promises = GPTTextCalls.map(([id, col]) => {
+                return TemplateMenuAIUtils.renderGPTTextCall(template, col, Number(id));
+            });
+
+            await Promise.all(promises);
+        }
+
+        if (GPTIMGCalls.length) {
+            const promises = GPTIMGCalls.map(async ([id, col]) => {
+                return TemplateMenuAIUtils.renderGPTImageCall(template, col, Number(id));
+            });
+
+            await Promise.all(promises);
+        }
+
+        return template;
+    };
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 57f4a1e94..6eb7fa96a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -9,10 +9,10 @@
     position: absolute;
     z-index: 1000;
     // box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
-    // background: whitesmoke; 
+    // background: whitesmoke;
     // color: black;
     border-radius: 3px;
-}   
+}
 
 .docCreatorMenu-menu {
     display: flex;
@@ -24,57 +24,39 @@
 .docCreatorMenu-menu-button {
     width: 25px;
     height: 25px;
-    background: whitesmoke; 
+    background: whitesmoke;
     background-color: rgb(50, 50, 50);
     border-radius: 5px;
-    border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 13px;
     //box-shadow: 3px 3px rgb(29, 29, 31);
 
     &:hover {
         box-shadow: none;
-    }
-     
-    &.right{
-        margin-left: 0px;
-        font-size: 12px;
+        background-color: rgb(60, 60, 65);
     }
 
-    &.close-menu {
-        font-size: 12px;
-        width: 18px;
-        height: 18px;
-        font-size: 12px;
-        margin-left: auto;
-        margin-right: 5px;
-        margin-bottom: 3px;
+    &.no-margin {
+        margin: 0px;
     }
 
-    &.options {
-        margin-left: 0px;
+    &.border {
+        border: 1px solid rgb(180, 180, 180);
     }
 
-    &:hover {
-        background-color: rgb(60, 60, 65);
+    &.float-right {
+        float: right;
+        margin-left: auto;
     }
 
-    &.top-bar {
-        border-bottom: 25px solid #555;
-        border-left: 12px solid transparent;
-        border-right: 12px solid transparent;
-        // border-top-left-radius: 5px;
-        // border-top-right-radius: 5px;
-        border-radius: 0px;
-        height: 0;
-        width: 50px;
+    &.absolute-right {
+        position: absolute;
+        right: 0px;
     }
 
-    &.preview-toggle {
-        margin: 0px;
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-        border-left: 0px;
+    &.right {
+        margin-left: 0px;
+        font-size: 12px;
     }
 }
 
@@ -121,12 +103,12 @@
         }
     }
 
-    &:hover::before{
+    &:hover::before {
         border-bottom: 20px solid rgb(82, 82, 82);
     }
 
     &::before {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         left: 0;
@@ -138,7 +120,7 @@
     }
 
     &::after {
-        content: "";    
+        content: '';
         position: absolute;
         top: -1px;
         left: -1px;
@@ -161,7 +143,7 @@
     color: white;
 }
 
-.docCreatorMenu-menu-hr{
+.docCreatorMenu-menu-hr {
     margin-top: 0px;
     margin-bottom: 0px;
     color: rgb(180, 180, 180);
@@ -191,14 +173,14 @@
     align-items: center;
     width: 40px;
     height: 40px;
-    background-color: rgb(99, 148, 238); 
+    background-color: rgb(99, 148, 238);
     border: 2px solid rgb(80, 107, 152);
     border-radius: 5px;
     margin-bottom: 20px;
     font-size: 25px;
 
-    &:hover{
-        background-color: rgb(59, 128, 255);  
+    &:hover {
+        background-color: rgb(59, 128, 255);
         border: 2px solid rgb(53, 80, 127);
     }
 }
@@ -206,7 +188,7 @@
 .docCreatorMenu-create-docs-button {
     width: 40px;
     height: 40px;
-    background-color: rgb(176, 229, 149); 
+    background-color: rgb(176, 229, 149);
     border: 2px solid rgb(126, 219, 80);
     border-radius: 5px;
     padding: 0px;
@@ -217,7 +199,7 @@
 
     &:hover {
         background-color: rgb(129, 223, 83);
-        border: 2px solid rgb(80, 185, 28); 
+        border: 2px solid rgb(80, 185, 28);
     }
 }
 
@@ -230,6 +212,14 @@
     &.full {
         width: 100%;
     }
+
+    &.no-margin-bottom {
+        margin-bottom: 0px;
+    }
+
+    &.no-margin-top {
+        margin-top: 0px;
+    }
 }
 
 //------------------------------------------------------------------------------------------------------------------------------------------
@@ -240,17 +230,22 @@
     position: absolute;
     background-color: none;
 
-    &.top, &.bottom {
+    &.top,
+    &.bottom {
         height: 10px;
         cursor: ns-resize;
     }
 
-    &.right, &.left {
+    &.right,
+    &.left {
         width: 10px;
         cursor: ew-resize;
     }
 
-    &.topRight, &.topLeft, &.bottomRight, &.bottomLeft {
+    &.topRight,
+    &.topLeft,
+    &.bottomRight,
+    &.bottomLeft {
         height: 15px;
         width: 15px;
         background-color: none;
@@ -273,22 +268,10 @@
     height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
-    -ms-overflow-style: none; 
+    -ms-overflow-style: none;
     scrollbar-width: none;
 }
 
-.docCreatorMenu-preview-container {
-    display: grid;
-    grid-template-columns: repeat(2, 140px);
-    grid-template-rows: 140px;
-    grid-auto-rows: 141px;
-    overflow-y: scroll;
-    margin: 0px;
-    margin-top: 0px;
-    width: 100%;
-    height: 100%;
-}
-
 .docCreatorMenu-expanded-template-preview {
     display: flex;
     flex-direction: column;
@@ -297,8 +280,9 @@
     position: relative;
     width: 100%;
     height: 100%;
+    flex-grow: 1;
 
-    .top-panel{
+    .top-panel {
         width: 100%;
         height: 10px;
     }
@@ -307,7 +291,7 @@
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
-        height: 100%;
+        height: fit-content;
         position: absolute;
         right: 0px;
         top: 0px;
@@ -322,17 +306,15 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 113px;
-    height: 113px;
-    margin-top: 10px;
-    margin-left: 10px;
+    height: 100%;
+    width: 100%;
+    aspect-ratio: 1;
     color: none;
     border: 1px solid rgb(163, 163, 163);
     border-radius: 5px;
     box-shadow: 5px 5px rgb(29, 29, 31);
-    flex: 0 0 auto;
 
-    &:hover{
+    &:hover {
         background-color: rgb(72, 72, 73);
     }
 
@@ -377,21 +359,18 @@
     &:hover .option-button {
         display: block;
     }
-    
 }
 
-.docCreatorMenu-preview-image{ 
+.docCreatorMenu-preview-image {
     background-color: transparent;
-    height: 100px;
-    width: 100px;
+    height: 100%;
     display: block;
     object-fit: contain;
     border-radius: 5px;
+}
 
-    &.expanded {
-        height: 100%;
-        width: 100%;
-    }
+.docCreatorMenu-variations-tab {
+    flex-grow: 0.5;
 }
 
 .docCreatorMenu-section {
@@ -399,12 +378,12 @@
     flex-direction: column;
     align-items: center;
     position: relative;
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
     margin: 0px;
     margin-top: 0px;
     margin-bottom: 0px;
-    width: 100%;
-    height: 200;
-    flex: 0 0 auto;
 }
 
 .docCreatorMenu-GPT-options-container {
@@ -412,32 +391,33 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    position: relative;
-    width: auto;
+    position: absolute;
+    left: 50%;
+    bottom: 0px;
     margin: 0px;
+    margin-bottom: 10px;
     margin-top: 5px;
     padding: 0px;
 }
 
 .docCreatorMenu-templates-preview-window {
-    display: flex;
-    flex-direction: row;
-    //justify-content: center;
-    align-items: center;
-    overflow-y: scroll;
-    position: relative;
-    color: black;
-    height: 125px;
+    display: grid;
+    justify-content: space-evenly;
+    row-gap: 2rem;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 50%));
+    margin: 5px;
     width: calc(100% - 10px);
-    -ms-overflow-style: none; 
-    scrollbar-width: none;
+    height: 100%;
+    padding-bottom: 40px;
 
-    .loading-spinner {
-        justify-self: center;
+    &.scrolling {
+        overflow-y: scroll;
+        max-height: 300px;
+        padding-bottom: 0px;
     }
 }
 
-.divvv{
+.div {
     width: 200;
     height: 200;
     border: solid 1px white;
@@ -447,20 +427,14 @@
     position: relative;
     display: flex;
     flex-direction: row;
+    color: whitesmoke;
     width: 100%;
 }
 
-.section-reveal-options {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    margin-right: 0px;
-    margin-left: auto;
-    border: 0px;
-    background: none;
-
-    &.float-right {
-        float: right;
-    }
+.docCreatorMenu-templates-displays {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .docCreatorMenu-section-title {
@@ -478,7 +452,7 @@
 .docCreatorMenu-GPT-generate {
     height: 30px;
     width: 30px;
-    background-color: rgb(176, 229, 149); 
+    background-color: rgb(176, 229, 149);
     border: 1px solid rgb(126, 219, 80);
     border-radius: 5px;
     padding: 0px;
@@ -489,7 +463,7 @@
 
     &:hover {
         background-color: rgb(129, 223, 83);
-        border: 2px solid rgb(80, 185, 28); 
+        border: 2px solid rgb(80, 185, 28);
     }
 }
 
@@ -507,7 +481,7 @@
 // DocCreatorMenu options CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
 
-.docCreatorMenu-option-container{
+.docCreatorMenu-option-container {
     display: flex;
     width: 180px;
     height: 30px;
@@ -517,16 +491,16 @@
     margin-top: 10px;
     margin-bottom: 10px;
 
-    &.layout{
+    &.layout {
         z-index: 5;
     }
 }
 
-.docCreatorMenu-option-title{
+.docCreatorMenu-option-title {
     display: flex;
     width: 140px;
     height: 30px;
-    background: whitesmoke; 
+    background: whitesmoke;
     background-color: rgb(34, 34, 37);
     border-radius: 5px;
     border: 1px solid rgb(180, 180, 180);
@@ -543,7 +517,7 @@
         border-radius: 0px;
         width: auto;
         text-transform: none;
-         
+
         &.small {
             height: 20px;
             transform: translateY(-5px);
@@ -637,38 +611,38 @@
     height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
-    -ms-overflow-style: none; 
+    -ms-overflow-style: none;
     scrollbar-width: none;
 
-    .docCreatorMenu-option-container{
+    .docCreatorMenu-option-container {
         width: 180px;
         height: 30px;
 
         .docCreatorMenu-dropdown-hoverable {
             width: 140px;
             height: 30px;
-    
+
             &:hover .docCreatorMenu-dropdown-content {
                 display: block;
             }
-    
+
             &:hover .docCreatorMenu-option-title {
                 border-bottom-left-radius: 0px;
                 border-bottom-right-radius: 0px;
             }
-        
+
             .docCreatorMenu-dropdown-content {
                 display: none;
                 min-width: 100px;
                 height: 75px;
                 overflow-y: scroll;
-                -ms-overflow-style: none; 
+                -ms-overflow-style: none;
                 scrollbar-width: none;
                 border-bottom: 1px solid rgb(180, 180, 180);
                 border-bottom-left-radius: 5px;
                 border-bottom-right-radius: 5px;
-        
-                .docCreatorMenu-dropdown-option{
+
+                .docCreatorMenu-dropdown-option {
                     display: flex;
                     background-color: rgb(42, 42, 46);
                     border-left: 1px solid rgb(180, 180, 180);
@@ -679,17 +653,30 @@
                     justify-content: center;
                     justify-items: center;
                     padding-top: 3px;
-    
+
                     &:hover {
                         background-color: rgb(68, 68, 74);
                         cursor: pointer;
                     }
                 }
-            }    
+            }
         }
     }
 }
 
+.loading-spinner {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    z-index: 200;
+    font-size: 20px;
+    font-weight: bold;
+    color: #17175e;
+}
+
 .docCreatorMenu-layout-preview-window-wrapper {
     flex: 0 0 auto;
     display: flex;
@@ -727,7 +714,7 @@
         border: 1px solid rgb(180, 180, 180);
         border-radius: 5px;
         background-color: rgb(34, 34, 37);
-        -ms-overflow-style: none; 
+        -ms-overflow-style: none;
         scrollbar-width: none;
 
         &.small {
@@ -759,10 +746,10 @@
         z-index: 999;
     }
 
-    .docCreatorMenu-zoom-button{ 
+    .docCreatorMenu-zoom-button {
         width: 15px;
         height: 15px;
-        background: whitesmoke; 
+        background: whitesmoke;
         background-color: rgb(34, 34, 37);
         border-radius: 3px;
         border: 1px solid rgb(180, 180, 180);
@@ -793,10 +780,11 @@
     height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
-    -ms-overflow-style: none; 
+    -ms-overflow-style: none;
     scrollbar-width: none;
 
     .panels-container {
+        display: flex;
         height: 100%;
         width: 100%;
         flex-direction: column;
@@ -810,114 +798,12 @@
         background-color: rgb(50, 50, 50);
     }
 
-//     .field-panel {
-//         position: relative;
-//         display: flex;
-//         // align-items: flex-start;
-//         flex-direction: column;
-//         gap: 5px;
-//         padding: 5px;
-//         height: 100px;
-//         //width: 100%;
-//         border: 1px solid rgb(180, 180, 180);
-//         margin: 5px;
-//         margin-top: 0px;
-//         border-radius: 3px;
-//         flex: 0 0 auto;
-
-//         .properties-wrapper {
-//             display: flex;
-//             flex-direction: row;
-//             align-items: flex-start;
-//             gap: 5px;
-
-//             .field-property-container {
-//                 background-color: rgb(40, 40, 40);
-//                 border: 1px solid rgb(100, 100, 100);
-//                 border-radius: 3px;
-//                 width: 30%;
-//                 height: 25px;
-//                 padding-left: 3px;
-//                 align-items: center;
-//                 color: whitesmoke;
-//             }
-
-//             .field-type-selection-container {
-//                 display: flex;
-//                 flex-direction: row;
-//                 align-items: center;
-//                 background-color: rgb(40, 40, 40);
-//                 border: 1px solid rgb(100, 100, 100);
-//                 border-radius: 3px;
-//                 width: 31%;
-//                 height: 25px;
-//                 padding-left: 3px;
-//                 color: whitesmoke;
-
-//                 .placeholder {
-//                     color: gray;
-//                 }
-
-//                 &:hover .placeholder {
-//                     display: none;
-//                 }
-
-//                 .bubbles {
-//                     display: none;
-//                 }
-
-//                 .text {
-//                     margin-top: 5px;
-//                     margin-bottom: 5px;
-//                 }
-
-//                 &:hover .bubbles {
-//                     display: flex;
-//                     flex-direction: row;
-//                     align-items: flex-start;
-//                 }
-
-//                 &:hover .type-display {
-//                     display: none;
-//                 }
-
-//                 .bubble {
-//                     margin: 5px;
-//                 }
-
-//                 &:hover .bubble {
-//                     margin-top: 7px;
-//                 }
-//             }
-//         }
-
-//         .field-description-container {
-//             background-color: rgb(40, 40, 40);
-//             border: 1px solid rgb(100, 100, 100);
-//             border-radius: 3px;
-//             width: 100%;
-//             height: 100%;
-//             resize: none;
-
-//             ::-webkit-scrollbar-track {
-//                 background: none; 
-//             }
-//         }
-
-//         .top-right {
-//             position: absolute;
-//             top: 0px;
-//             right: 0px;
-//         }
-//     }
-// }
-
     .field-panel {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
-        height: 285px;
+        height: fit-content;
         width: calc(100% - 10px);
         border: 1px solid rgb(180, 180, 180);
         margin: 5px;
@@ -938,15 +824,22 @@
             border-top-right-radius: 5px;
             border-top-left-radius: 5px;
             width: 100%;
-            height: 20px;
+            height: fit-content;
             background-color: rgb(50, 50, 50);
             color: rgb(168, 167, 167);
+            font-size: medium;
 
             .field-title {
                 color: whitesmoke;
+                font-size: large;
             }
-        }  
-        
+
+            &:hover {
+                background-color: rgb(72, 72, 72);
+                cursor: pointer;
+            }
+        }
+
         .opts-bar {
             display: flex;
             flex-direction: row;
@@ -989,11 +882,11 @@
                     flex-direction: row;
                     align-items: flex-start;
                 }
-        
+
                 &:hover .type-display {
                     display: none;
                 }
-        
+
                 .bubble {
                     margin: 3px;
                 }
@@ -1028,7 +921,7 @@
                     flex-direction: row;
                     align-items: center;
                 }
-        
+
                 .bubble {
                     margin: 3px;
                     margin-right: 4px;
@@ -1038,23 +931,255 @@
 
         .desc-box {
             width: 88%;
-            height: 50px;
+            height: fit-content;
             border: 1px solid rgb(180, 180, 180);
             border-radius: 5px;
             background-color: rgb(50, 50, 50);
             box-shadow: 5px 5px rgb(29, 29, 31);
 
             .content {
-                height: calc(100% - 20px);
+                height: fit-content;
                 width: 100%;
                 background-color: rgb(50, 50, 50);
                 border-bottom-right-radius: 5px;
                 border-bottom-left-radius: 5px;
                 resize: none;
+            }
+        }
+    }
+
+    .conditionals-section {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 100%;
+
+        .conditionals-title {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+            margin: 5px;
+            margin-bottom: 20px;
+            font-size: large;
+        }
+    }
 
+    .form-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-start;
+        color: whitesmoke;
+        width: 100%;
+        height: fit-content;
+        margin-bottom: 15px;
+        flex-wrap: wrap;
+        gap: 5px;
+
+        .form-row-plain-text {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: fit-content;
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .operator-options-dropdown {
+            display: flex;
+            flex-direction: column;
+            height: fit-content;
+
+            .operator-dropdown-option {
+                display: none;
             }
+
+            .operator-dropdown-current {
+                border-radius: 5px;
+                background-color: rgb(50, 50, 50);
+                border: 1px solid rgb(180, 180, 180);
+                text-align: center;
+                padding: 2.25px;
+                padding-left: 4px;
+                padding-right: 4px;
+            }
+
+            &:hover .operator-dropdown-current {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover .operator-dropdown-option {
+                display: flex;
+                height: fit-content;
+                align-items: center;
+                border: 1px solid rgb(180, 180, 180);
+                background-color: rgb(50, 50, 50);
+                padding: 2.25px;
+                padding-left: 8px;
+                padding-right: 8px;
+                text-align: center;
+
+                &:hover {
+                    background-color: rgb(70, 70, 70);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .form-row-textarea {
+            height: 24px;
+            width: 110px;
+            border-radius: 5px;
+            background-color: rgb(50, 50, 50);
+            border: 1px solid rgb(180, 180, 180);
+            resize: none;
+            overflow-y: scroll;
+            white-space: nowrap;
         }
+    }
 
+    .form {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        width: 80%;
+
+        .form-action-button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 3px;
+            cursor: pointer;
+        }
     }
+}
+
+//------------------------------------------------------------------------------------------------------------------------------------------
+// EditingWindow CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
 
+.docCreatorMenu-editing-firefly-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: 5px;
+}
+
+.docCreatorMenu-firefly-options {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: fit-content;
+    width: 100%;
+}
+
+.docCreatorMenu-variation-prompt-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 15px;
+    height: fit-content;
+    width: 100%;
+}
+
+.docCreatorMenu-variation-prompt-input-textbox {
+    height: 40px;
+    width: 80%;
+    color: white;
+    margin-top: 1%;
+    margin-bottom: 1%;
+    margin-left: 5%;
+    background-color: rgb(50, 50, 50);
+    border-radius: 5px;
+    overflow: hidden;
+    resize: none;
+}
+
+.options‑menu {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    padding: 0.5rem 1rem;
+    background: rgb(50, 50, 50);
+    color: whitesmoke;
+    font-family: system-ui, sans-serif;
+    font-size: 0.9rem;
+    flex-wrap: wrap;
+}
+
+.menu‑item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+}
+
+.menu‑item input[type='range'] {
+    width: 7rem;
+    accent-color: whitesmoke;
+}
+
+.value {
+    min-width: 2ch;
+    text-align: right;
+}
+
+.switch {
+    gap: 0.75rem;
+    margin-bottom: 0px;
+}
+
+.switch .slider {
+    position: relative;
+    width: 2.2rem;
+    height: 1.1rem;
+    background: whitesmoke;
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.switch .slider::before {
+    content: '';
+    position: absolute;
+    top: 0.1rem;
+    left: 0.1rem;
+    width: 0.9rem;
+    height: 0.9rem;
+    background: rgb(50, 50, 50);
+    border-radius: 50%;
+    transition: transform 0.2s;
+}
+
+.switch input {
+    display: none;
+}
+
+.switch input:checked + .slider {
+    background: #78c2f1;
+}
+
+.switch input:checked + .slider::before {
+    transform: translateX(1.1rem);
+}
+
+.firefly-option-label {
+    padding: 0.2em 0.6em 0.3em;
+    font-size: 100%;
+    color: whitesmoke;
+    text-align: center;
+    margin-bottom: 0px;
+    font-weight: 500;
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 64416c26d..fb083ea75 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -1,36 +1,32 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Colors } from '@dash/components';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
-import { IDisposer } from 'mobx-utils';
 import * as React from 'react';
-import ReactLoading from 'react-loading';
-import { ClientUtils, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../../ClientUtils';
+import { returnFalse, setupMoveUpEvents } from '../../../../../ClientUtils';
 import { emptyFunction } from '../../../../../Utils';
-import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc';
+import { Doc, StrListCast } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
-import { ImageCast, StrCast } from '../../../../../fields/Types';
-import { ImageField } from '../../../../../fields/URLField';
-import { Networking } from '../../../../Network';
-import { GPTCallType, gptAPICall, gptImageCall } from '../../../../apis/gpt/GPT';
-import { Docs, DocumentOptions } from '../../../../documents/Documents';
+import { GPTCallType, gptAPICall } from '../../../../apis/gpt/GPT';
 import { DragManager } from '../../../../util/DragManager';
 import { SnappingManager } from '../../../../util/SnappingManager';
 import { UndoManager, undoable } from '../../../../util/UndoManager';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
 import { CollectionFreeFormView } from '../../../collections/collectionFreeForm/CollectionFreeFormView';
-import { DocumentView, DocumentViewInternal } from '../../DocumentView';
+import { DocumentView } from '../../DocumentView';
 import { OpenWhere } from '../../OpenWhere';
 import { DataVizBox } from '../DataVizBox';
 import './DocCreatorMenu.scss';
-import { DefaultStyleProvider } from '../../../StyleProvider';
-import { Transform } from '../../../../util/Transform';
-import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
-import { TemplateManager } from './TemplateManager';
+import { ViewType } from './TemplateFieldTypes/TemplateField';
 import { Template } from './Template';
-import { Field, FieldContentType } from './FieldTypes/Field';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { Upload } from '../../../../../server/SharedMediaTypes';
+import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
+import { TemplateManager } from './Backend/TemplateManager';
+import { TemplateMenuAIUtils } from './Backend/TemplateMenuAIUtils';
+import { TemplatePreviewGrid } from './Menu/TemplatePreviewGrid';
+import { FireflyStructureOptions, TemplateEditingWindow } from './Menu/TemplateEditingWindow';
+import { DocCreatorMenuButton } from './Menu/DocCreatorMenuButton';
+import { TemplatesRenderPreviewWindow } from './Menu/TemplateRenderPreviewWindow';
+import { TemplateMenuFieldOptions } from './Menu/TemplateMenuFieldOptions';
 
 export enum LayoutType {
     FREEFORM = 'Freeform',
@@ -61,6 +57,7 @@ export type Col = {
     title: string;
     type: TemplateFieldType;
     defaultContent?: string;
+    AIGenerated?: boolean;
 };
 
 interface DocCreateMenuProps {
@@ -72,33 +69,20 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     // eslint-disable-next-line no-use-before-define
     static Instance: DocCreatorMenu;
 
-    private _disposers: { [name: string]: IDisposer } = {};
-
+    DEBUG_MODE: boolean = false;
     private _ref: HTMLDivElement | null = null;
-
     private templateManager: TemplateManager;
 
-    @observable _fullyRenderedDocs: Doc[] = [];
-    @observable _renderedDocCollectionPreview: Doc | undefined = undefined;
-    @observable _renderedDocCollection: Doc | undefined = undefined;
-    @observable _docsRendering: boolean = false;
+    @observable _docsRendering: boolean = false; // dictates loading symbol
 
-    @observable _userTemplates: { template: Template; doc: Doc }[] = []; //!!! used to keep track of all templates, should be refactored to work with actual templates and not docs
+    @observable _userTemplates: Template[] = [];
     @observable _selectedTemplate: Template | undefined = undefined;
     @observable _currEditingTemplate: Template | undefined = undefined;
+    @observable _editedTemplateTrail: Template[] = [];
 
     @observable _userCreatedFields: Col[] = [];
-    @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
-
-    @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 3, repeat: 0 };
-    @observable _layoutPreviewScale: number = 1;
-    @observable _savedLayouts: DataVizTemplateLayout[] = [];
-    @observable _expandedPreview: Doc | undefined = undefined;
 
     @observable _suggestedTemplates: Template[] = [];
-    @observable _suggestedTemplatePreviews: { doc: Doc; template: Template }[] = [];
-    @observable _GPTOpt: boolean = false;
-    @observable _callCount: number = 0;
     @observable _GPTLoading: boolean = false;
 
     @observable _pageX: number = 0;
@@ -110,9 +94,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     @observable _startPos?: { x: number; y: number };
     @observable _shouldDisplay: boolean = false;
 
-    @observable _menuContent: 'templates' | 'options' | 'saved' | 'dashboard' = 'templates';
+    @observable _menuContent: 'templates' | 'renderPreview' | 'saved' | 'dashboard' | 'templateEditing' = 'templates';
     @observable _dragging: boolean = false;
-    @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
     @observable _interactionLock: boolean | undefined;
     @observable _snapPt: { x: number; y: number } = { x: 0, y: 0 };
@@ -122,7 +105,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
     @observable _initDimensions: { width: number; height: number; x?: number; y?: number } = { width: 300, height: 400, x: undefined, y: undefined };
     @observable _menuDimensions: { width: number; height: number } = { width: 400, height: 400 };
-    @observable _editing: boolean = false;
+
+    @observable _variations: Template[] = [];
 
     constructor(props: DocCreateMenuProps) {
         super(props);
@@ -134,56 +118,13 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     @action setDataViz = (dataViz: DataVizBox) => {
         this._dataViz = dataViz;
         this._selectedTemplate = undefined;
-        this._renderedDocCollection = undefined;
-        this._renderedDocCollectionPreview = undefined;
-        this._fullyRenderedDocs = [];
-        this._suggestedTemplatePreviews = [];
         this._suggestedTemplates = [];
         this._userCreatedFields = [];
     };
-    @action addUserTemplate = (template: Template) => {
-        this._userTemplates.push({ template: template.cloneBase(), doc: template.getRenderedDoc() });
-    };
-    @action removeUserTemplate = (template: Template) => {
-        this._userTemplates = this._userTemplates.filter(info => info.template !== template);
-    };
-    @action updateTemplatePreview = (template: Template) => {
-        template.renderUpdates();
-        const preview = { template: template, doc: template.getRenderedDoc() };
-        this._suggestedTemplatePreviews = this._suggestedTemplatePreviews.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
-        this._userTemplates = this._userTemplates.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
-    };
     @action setSuggestedTemplates = (templates: Template[]) => {
-        this._suggestedTemplates = templates;
-        this._suggestedTemplatePreviews = templates.map(template => {return {template: template, doc: template.getRenderedDoc()}}); //prettier-ignore
+        this._suggestedTemplates = templates; //prettier-ignore
     };
 
-    @computed get docsToRender() {
-        return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
-    }
-
-    @computed get rowsCount() {
-        switch (this._layout.type) {
-            case LayoutType.FREEFORM:
-                return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
-            case LayoutType.CAROUSEL3D:
-                return 1.8;
-            default:
-                return 1;
-        }
-    }
-
-    @computed get columnsCount() {
-        switch (this._layout.type) {
-            case LayoutType.FREEFORM:
-                return this._layout.columns ?? 0;
-            case LayoutType.CAROUSEL3D:
-                return 3;
-            default:
-                return 1;
-        }
-    }
-
     @computed get selectedFields() {
         return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
     }
@@ -210,10 +151,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
             .concat(this._userCreatedFields);
     }
 
-    @computed get canMakeDocs() {
-        return this._selectedTemplate !== undefined && this._layout !== undefined;
-    }
-
     get bounds(): { t: number; b: number; l: number; r: number } {
         const rect = this._ref?.getBoundingClientRect();
         const bounds = { t: rect?.top ?? 0, b: rect?.bottom ?? 0, l: rect?.left ?? 0, r: rect?.right ?? 0 };
@@ -221,17 +158,11 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     setUpButtonClick = (e: React.PointerEvent, func: () => void) => {
-        setupMoveUpEvents(
-            this,
-            e,
-            returnFalse,
-            emptyFunction,
-            undoable(clickEv => {
-                clickEv.stopPropagation();
-                clickEv.preventDefault();
-                func();
-            }, 'create docs')
-        );
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, clickEv => {
+            clickEv.stopPropagation();
+            clickEv.preventDefault();
+            undoable(func, 'create docs')();
+        });
     };
 
     @action
@@ -269,7 +200,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     componentWillUnmount() {
-        Object.values(this._disposers).forEach(disposer => disposer?.());
         document.removeEventListener('pointerdown', this.onPointerDown, true);
         document.removeEventListener('pointerup', this.onPointerUp);
     }
@@ -319,10 +249,10 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
         const { scale, refPt, transl } = this.getResizeVals(thisPt, dragHdl);
         !this._interactionLock && runInAction(async () => {   // resize selected docs if we're not in the middle of a resize (ie, throttle input events to frame rate)
-        this._interactionLock = true;
-        const scaleAspect = {x: scale.x, y: scale.y};
-        this.resizeView(refPt, scaleAspect, transl); // prettier-ignore
-        await new Promise<boolean | undefined>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
+            this._interactionLock = true;
+            const scaleAspect = {x: scale.x, y: scale.y};
+            this.resizeView(refPt, scaleAspect, transl); // prettier-ignore
+            await new Promise<boolean | undefined>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
         }); // prettier-ignore
         return true;
     };
@@ -365,66 +295,29 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         this._pageY = y + translation.y;
     };
 
-    async getIcon(doc: Doc) {
-        const docView = DocumentView.getDocumentView(doc);
-        if (docView) {
-            docView.ComponentView?.updateIcon?.();
-            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
-        }
-        return undefined;
+    async createDocsForPreview() {
+        return this._dataViz && this._selectedTemplate ? ((await this.templateManager.createDocsFromTemplate(this._dataViz, this._selectedTemplate, this.fieldsInfos, this.DEBUG_MODE)).filter(doc => doc).map(doc => doc!) ?? []) : [];
     }
 
-    @action updateSelectedTemplate = async (template: Template) => {
-        if (this._selectedTemplate === template) {
-            this._selectedTemplate = undefined;
-            return;
-        } else {
-            this._selectedTemplate = template;
-            template.renderUpdates();
-            this._fullyRenderedDocs = (await this.createDocsFromTemplate(template)) ?? [];
-            this.updateRenderedDocCollection();
-        }
-    };
-
-    @action updateSelectedSavedLayout = (layout: DataVizTemplateLayout) => {
-        this._layout.xMargin = layout.layout.xMargin;
-        this._layout.yMargin = layout.layout.yMargin;
-        this._layout.type = layout.layout.type;
-        this._layout.columns = layout.columns;
-    };
-
-    isSelectedLayout = (layout: DataVizTemplateLayout) => {
-        return this._layout.xMargin === layout.layout.xMargin && this._layout.yMargin === layout.layout.yMargin && this._layout.type === layout.layout.type && this._layout.columns === layout.columns;
+    @action updateSelectedTemplate = (template: Template) => {
+        this._selectedTemplate = this._selectedTemplate === template ? undefined : template; // toggle selection
     };
 
-    editTemplate = (doc: Doc) => {
-        DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight);
-        DocumentView.DeselectAll();
-        Doc.UnBrushDoc(doc);
-    };
+    // testTemplate = async () => {
+    //     this._suggestedTemplates = this.templateManager.templates; //prettier-ignore
+    // };
 
     @action addField = () => {
-        const newFields: Col[] = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [] }]);
-        this._userCreatedFields = newFields;
+        this._userCreatedFields = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [], AIGenerated: true }]);
     };
 
     @action removeField = (field: { title: string; type: string; desc: string }) => {
         if (this._dataViz?.axes.includes(field.title)) {
             this._dataViz.selectAxes(this._dataViz.axes.filter(col => col !== field.title));
         } else {
-            const toRemove = this._userCreatedFields.filter(f => f === field);
-            if (!toRemove) return;
-
-            if (toRemove.length > 1) {
-                while (toRemove.length > 1) {
-                    toRemove.pop();
-                }
-            }
-
-            if (this._userCreatedFields.length === 1) {
-                this._userCreatedFields = [];
-            } else {
-                this._userCreatedFields.splice(this._userCreatedFields.indexOf(toRemove[0]), 1);
+            const toRemove = this._userCreatedFields.findIndex(f => f === field);
+            if (toRemove !== -1) {
+                this._userCreatedFields.splice(toRemove, 1);
             }
         }
     };
@@ -439,11 +332,18 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     };
 
     @action setColType = (column: Col, type: TemplateFieldType) => {
+        if (type === TemplateFieldType.DATA) {
+            this.templateManager.addDataField(column.title);
+        } else if (column.type === TemplateFieldType.DATA) {
+            this.templateManager.removeDataField(column.title);
+        }
+
         if (this.selectedFields.includes(column.title)) {
             this._dataViz?.setColumnType(column.title, type);
         } else {
             column.type = type;
         }
+
         this.forceUpdate();
     };
 
@@ -469,81 +369,22 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         this.forceUpdate();
     };
 
-    generateGPTImage = async (prompt: string): Promise<string | undefined> => {
-        try {
-            const res = await gptImageCall(prompt);
-
-            if (res) {
-                const result = (await Networking.PostToServer('/uploadRemoteImage', { sources: res })) as Upload.FileInformation[];
-                const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
-                return source;
-            }
-        } catch (e) {
-            console.log(e);
-        }
-    };
-
-    /**
-     * Populates a preset template framework with content from a datavizbox or any AI-generated content.
-     * @param template the preloaded template framework being filled in
-     * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz
-     * @returns a doc containing the fully rendered template
-     */
-    applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template | undefined> => {
-        const GPTTextCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.TEXT && this._userCreatedFields.includes(col));
-        const GPTIMGCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.VISUAL && this._userCreatedFields.includes(col));
-
-        if (GPTTextCalls.length) {
-            const promises = GPTTextCalls.map(([str, col]) => {
-                return this.renderGPTTextCall(template, col, Number(str));
-            });
-
-            await Promise.all(promises);
-        }
-
-        if (GPTIMGCalls.length) {
-            const promises = GPTIMGCalls.map(async ([fieldNum, col]) => {
-                return this.renderGPTImageCall(template, col, Number(fieldNum));
-            });
-
-            await Promise.all(promises);
-        }
-
-        return template;
-    };
-
-    compileFieldDescriptions = (templates: Template[]): string => {
-        let descriptions: string = '';
-        templates.forEach(template => {
-            descriptions += `----------  NEW TEMPLATE TO INCLUDE: The title is: ${template.mainField.getTitle()}. Its fields are: `;
-            descriptions += template.descriptionSummary;
-        });
+    compileFieldDescriptions = (templates: Template[]) => 
+        templates.map(template => `----------  NEW TEMPLATE TO INCLUDE: The title is: ${template.title}. Its fields are: ` + template.descriptionSummary).join(''); // prettier-ignore
 
-        return descriptions;
-    };
+    compileColDescriptions = (cols: Col[]) => 
+        ' ------------- COL DESCRIPTIONS START HERE:' + cols.map(col => `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `).join(''); // prettier-ignore
 
-    compileColDescriptions = (cols: Col[]): string => {
-        let descriptions: string = ' ------------- COL DESCRIPTIONS START HERE:';
-        cols.forEach(col => (descriptions += `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `));
-
-        return descriptions;
-    };
-
-    getColByTitle = (title: string) => {
-        return this.fieldsInfos.filter(col => col.title === title)[0];
-    };
+    getColByTitle = (title: string): Col | undefined => this.fieldsInfos.filter(col => col.title === title)[0];
 
     @action
     assignColsToFields = async (templates: Template[], cols: Col[]): Promise<[Template, { [field: number]: Col }][]> => {
-        const fieldDescriptions: string = this.compileFieldDescriptions(templates);
-        const colDescriptions: string = this.compileColDescriptions(cols);
+        const fieldDescriptions = this.compileFieldDescriptions(templates);
+        const colDescriptions = this.compileColDescriptions(cols);
 
         const inputText = fieldDescriptions.concat(colDescriptions);
 
-        ++this._callCount;
-        const origCount = this._callCount;
-
-        const prompt: string = `(${origCount}) ${inputText}`;
+        const prompt = `(${Math.random() * 100000}) ${inputText}`;
 
         this._GPTLoading = true;
 
@@ -555,24 +396,26 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                 const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = [];
 
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
-                    const template = templates.filter(t => t.mainField.getTitle() === tempTitle)[0];
-                    if (!template) return;
-                    const toObj = Object.entries(assignment).reduce(
-                        (a, [fieldID, colTitle]) => {
-                            const col = this.getColByTitle(colTitle);
-                            if (!this._userCreatedFields.includes(col)) {
-                                // do the following for any fields not added by the user; will change in the future, for now only GPT content works with user-added fields
-                                const field = template.getFieldByID(Number(fieldID));
-                                field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? FieldContentType.IMAGE : FieldContentType.STRING);
-                                field.setTitle(col.title);
-                            } else {
-                                a[Number(fieldID)] = this.getColByTitle(colTitle);
-                            }
-                            return a;
-                        },
-                        {} as { [field: number]: Col }
-                    );
-                    brokenDownAssignments.push([template, toObj]);
+                    const template = templates.filter(temp => temp.title === tempTitle)[0];
+                    if (template) {
+                        const toObj = Object.entries(assignment).reduce(
+                            (a, [fieldID, colTitle]) => {
+                                const col = this.getColByTitle(colTitle);
+                                if (col) {
+                                    if (!col.AIGenerated) {
+                                        const field = template.getFieldByID(Number(fieldID));
+                                        field?.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT);
+                                        field?.setTitle(col.title);
+                                    } else {
+                                        a[Number(fieldID)] = col;
+                                    }
+                                }
+                                return a;
+                            },
+                            {} as { [field: number]: Col }
+                        );
+                        brokenDownAssignments.push([template, toObj]);
+                    }
                 });
 
                 return brokenDownAssignments;
@@ -584,777 +427,100 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         return [];
     };
 
-    generatePresetTemplates = async () => {
-        this._dataViz?.updateColDefaults();
-
-        const cols = this.fieldsInfos;
-        const templates = this.templateManager.getValidTemplates(cols);
-
-        const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
-
-        const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, asns]) => this.applyGPTContentToTemplate(template, asns));
-
-        await Promise.all(renderedTemplatePromises);
-
-        setTimeout(() => {
-            this.setSuggestedTemplates(templates);
+    generatePresetTemplates = action(() => {
+        if (this.DEBUG_MODE) {
+            this.setSuggestedTemplates(this.templateManager._templates);
             this._GPTLoading = false;
-        });
-    };
-
-    renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise<boolean> => {
-        const generateAndLoadImage = async (fieldNum: string, column: Col, prompt: string) => {
-            const url = await this.generateGPTImage(prompt);
-            const field: Field = template.getFieldByID(Number(fieldNum));
-
-            field.setContent(url ?? '', FieldContentType.IMAGE);
-            field.setTitle(column.title);
-        };
-
-        const fieldContent: string = template.compiledContent;
-
-        try {
-            const sysPrompt =
-                'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' +
-                fieldContent +
-                ' **** The user prompt is: ' +
-                col.desc;
-
-            const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
-
-            await generateAndLoadImage(String(fieldNumber), col, prompt);
-        } catch (e) {
-            console.log(e);
+        } else {
+            this._dataViz?.updateColDefaults();
+            const contentFields = this.fieldsInfos.filter(field => field.type !== TemplateFieldType.DATA);
+            const templates = this.templateManager.getValidTemplates(contentFields);
+
+            return this.assignColsToFields(templates, contentFields)
+                .then(pairs => 
+                    Promise.all(pairs.map(([templ, assgns]) => TemplateMenuAIUtils.applyGPTContentToTemplate(templ, assgns))))
+                .then(action(() => {
+                    this.setSuggestedTemplates(templates);
+                    this._GPTLoading = false;
+                })); // prettier-ignore
         }
-        return true;
-    };
-
-    renderGPTTextCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
-        const wordLimit = (size: TemplateFieldSize) => {
-            switch (size) {
-                case TemplateFieldSize.TINY:
-                    return 2;
-                case TemplateFieldSize.SMALL:
-                    return 5;
-                case TemplateFieldSize.MEDIUM:
-                    return 20;
-                case TemplateFieldSize.LARGE:
-                    return 50;
-                case TemplateFieldSize.HUGE:
-                    return 100;
-                default:
-                    return 10;
-            }
-        };
-
-        const textAssignment = `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`;
+    });
 
-        const fieldContent: string = template.compiledContent;
-
-        try {
-            const prompt = fieldContent + textAssignment;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    generateVariations = async (onDoc: Doc, prompt: string, options: FireflyStructureOptions) => {
+        // const { numVariations, temperature, useStyleRef } = options;
+        this.variations = [];
+        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
 
-            const res = await gptAPICall(`${++this._callCount}: ${prompt}`, GPTCallType.FILL);
+        const clone = Doc.MakeClone(onDoc).clone;
+        mainCollection.addDocument(clone);
+        clone.x = 10000;
+        clone.y = 10000;
 
-            if (res) {
-                const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
-                Object.entries(assignments).forEach(([title, info]) => {
-                    const field: Field = template.getFieldByID(Number(info.number));
-                    const column = this.getColByTitle(title);
-
-                    field.setContent(info.content ?? '', FieldContentType.STRING);
-                    field.setTitle(column.title);
-                });
-            }
-        } catch (err) {
-            console.log(err);
-        }
+        // await DrawingFillHandler.drawingToImage(clone, 100 - temperature, prompt, useStyleRef ? clone : undefined, this, numVariations)
 
-        return true;
+        return this.variations;
     };
 
-    createDocsFromTemplate = async (template: Template) => {
-        const dv = this._dataViz;
-
-        if (!dv) return;
-
-        this._docsRendering = true;
-
-        const fields: string[] = Array.from(Object.keys(dv.records[0]));
-        const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows);
-
-        const rowContents: { [title: string]: string }[] = selectedRows.map(row => {
-            const values: { [title: string]: string } = {};
-            fields.forEach(col => {
-                values[col] = dv.records[row][col];
-            });
+    variations: string[] = [];
 
-            return values;
-        });
-
-        const processContent = async (content: { [title: string]: string }) => {
-            const templateCopy = template.cloneBase();
-
-            fields
-                .filter(title => title)
-                .forEach(title => {
-                    const field = templateCopy.getFieldByTitle(title);
-                    if (field === undefined) {
-                        return;
-                    }
-                    field.setContent(content[title]);
-                });
-
-            const gptPromises = this._userCreatedFields
-                .filter(field => field.type === TemplateFieldType.TEXT)
-                .map(field => {
-                    const title = field.title;
-                    const templateField = templateCopy.getFieldByTitle(title);
-                    if (templateField === undefined) {
-                        return;
-                    }
-                    const templatefieldID = templateField.getID;
-
-                    return this.renderGPTTextCall(templateCopy, field, templatefieldID);
-                });
-
-            const imagePromises = this._userCreatedFields
-                .filter(field => field.type === TemplateFieldType.VISUAL)
-                .map(field => {
-                    const title = field.title;
-                    const templateField = templateCopy.getFieldByTitle(title);
-                    if (templateField === undefined) {
-                        return;
-                    }
-                    const templatefieldID = templateField.getID;
-
-                    return this.renderGPTImageCall(templateCopy, field, templatefieldID);
-                });
-
-            await Promise.all(gptPromises);
-
-            await Promise.all(imagePromises);
-
-            return templateCopy.getRenderedDoc();
-        };
-
-        const promises = rowContents.map(content => processContent(content));
-
-        const renderedDocs = await Promise.all(promises);
-
-        this._docsRendering = false;
+    @action addVariation = (url: string) => {
+        this.variations.push(url);
+    };
 
-        return renderedDocs;
+    addRenderedCollectionToMainview = (collection: Doc) => {
+        if (collection) {
+            const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+            collection.x = this._pageX - this._menuDimensions.width;
+            collection.y = this._pageY - this._menuDimensions.height;
+            mainCollection?.addDocument(collection);
+            this.closeMenu();
+        }
     };
 
-    addRenderedCollectionToMainview = () => {
-        const collection = this._renderedDocCollection;
-        if (!collection) return;
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        collection.x = this._pageX - this._menuDimensions.width;
-        collection.y = this._pageY - this._menuDimensions.height;
-        mainCollection.addDocument(collection);
-        this.closeMenu();
+    @action editLastTemplate = () => {
+        if (this._editedTemplateTrail.length) this._currEditingTemplate = this._editedTemplateTrail.pop();
     };
 
     @action setExpandedView = (template: Template | undefined) => {
         if (template) {
-            this._currEditingTemplate = template;
-            this._expandedPreview = template.mainField.renderedDoc(); //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
+            this._menuContent = 'templateEditing';
+            this._currEditingTemplate && this._editedTemplateTrail.push(this._currEditingTemplate);
         } else {
-            this._currEditingTemplate = undefined;
-            this._expandedPreview = undefined;
-        }
-    };
-
-    get editingWindow() {
-        const rendered = !this._expandedPreview ? null : (
-            <div className="docCreatorMenu-expanded-template-preview">
-                <DocumentView
-                    Document={this._expandedPreview}
-                    isContentActive={emptyFunction}
-                    addDocument={returnFalse}
-                    moveDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    PanelWidth={() => this._menuDimensions.width - 10}
-                    PanelHeight={() => this._menuDimensions.height - 60}
-                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
-                    renderDepth={5}
-                    whenChildContentsActiveChanged={emptyFunction}
-                    focus={emptyFunction}
-                    styleProvider={DefaultStyleProvider}
-                    addDocTab={DocumentViewInternal.addDocTabFunc}
-                    pinToPres={() => undefined}
-                    childFilters={returnEmptyFilter}
-                    childFiltersByRanges={returnEmptyFilter}
-                    searchFilterDocs={returnEmptyDoclist}
-                    fitContentsToBox={returnFalse}
-                    fitWidth={returnFalse}
-                />
-            </div>
-        );
-
-        return (
-            <div className="docCreatorMenu-expanded-template-preview">
-                <div className="top-panel" />
-                {rendered}
-                <div className="right-buttons-panel">
-                    <button
-                        className="docCreatorMenu-menu-button section-reveal-options top-right"
-                        onPointerDown={e =>
-                            this.setUpButtonClick(e, () => {
-                                this._currEditingTemplate && this.updateTemplatePreview(this._currEditingTemplate);
-                                this.setExpandedView(undefined);
-                            })
-                        }>
-                        <FontAwesomeIcon icon="minimize" />
-                    </button>
-                    <button
-                        className="docCreatorMenu-menu-button section-reveal-options top-right-lower"
-                        onPointerDown={e =>
-                            this.setUpButtonClick(e, () => {
-                                this._currEditingTemplate?.resetToBase();
-                                this.setExpandedView(this._currEditingTemplate);
-                            })
-                        }>
-                        <FontAwesomeIcon icon="arrows-rotate" color="white" />
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
-    get templatesPreviewContents() {
-        const GPTOptions = <div></div>;
-
-        return (
-            <div className={`docCreatorMenu-templates-view`}>
-                {this._expandedPreview ? (
-                    this.editingWindow
-                ) : (
-                    <div>
-                        <div className="docCreatorMenu-section" style={{ height: this._GPTOpt ? 200 : 200 }}>
-                            <div className="docCreatorMenu-section-topbar">
-                                <div className="docCreatorMenu-section-title">Suggested Templates</div>
-                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'dashboard')))}>
-                                    <FontAwesomeIcon icon="gear" />
-                                </button>
-                            </div>
-                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._GPTLoading || this._menuDimensions.width > 400 ? 'center' : '' }}>
-                                {this._GPTLoading ? (
-                                    <div className="loading-spinner">
-                                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-                                    </div>
-                                ) : (
-                                    this._suggestedTemplatePreviews.map(({ doc, template }) => (
-                                        <div
-                                            className="docCreatorMenu-preview-window"
-                                            key="0"
-                                            style={{
-                                                border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                                            }}
-                                            onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
-                                            <button
-                                                className="option-button left"
-                                                onPointerDown={e =>
-                                                    this.setUpButtonClick(e, () => {
-                                                        this.setExpandedView(template);
-                                                    })
-                                                }>
-                                                <FontAwesomeIcon icon="magnifying-glass" color="white" />
-                                            </button>
-                                            <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}>
-                                                <FontAwesomeIcon icon="plus" color="white" />
-                                            </button>
-                                            <DocumentView
-                                                Document={doc}
-                                                isContentActive={emptyFunction} // !!! should be return false
-                                                addDocument={returnFalse}
-                                                moveDocument={returnFalse}
-                                                removeDocument={returnFalse}
-                                                PanelWidth={() => (this._selectedTemplate === template ? 104 : 111)}
-                                                PanelHeight={() => (this._selectedTemplate === template ? 104 : 111)}
-                                                ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
-                                                renderDepth={1}
-                                                whenChildContentsActiveChanged={emptyFunction}
-                                                focus={emptyFunction}
-                                                styleProvider={DefaultStyleProvider}
-                                                addDocTab={this._props.addDocTab}
-                                                pinToPres={() => undefined}
-                                                childFilters={returnEmptyFilter}
-                                                childFiltersByRanges={returnEmptyFilter}
-                                                searchFilterDocs={returnEmptyDoclist}
-                                                fitContentsToBox={returnFalse}
-                                                fitWidth={returnFalse}
-                                                hideDecorations={true}
-                                            />
-                                        </div>
-                                    ))
-                                )}
-                            </div>
-                            <div className="docCreatorMenu-GPT-options">
-                                <div className="docCreatorMenu-GPT-options-container">
-                                    <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
-                                        <FontAwesomeIcon icon="arrows-rotate" />
-                                    </button>
-                                </div>
-                                {this._GPTOpt ? GPTOptions : null}
-                            </div>
-                        </div>
-                        <hr className="docCreatorMenu-option-divider full no-margin" />
-                        <div className="docCreatorMenu-section">
-                            <div className="docCreatorMenu-section-topbar">
-                                <div className="docCreatorMenu-section-title">Your Templates</div>
-                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => (this._GPTOpt = !this._GPTOpt))}>
-                                    <FontAwesomeIcon icon="gear" />
-                                </button>
-                            </div>
-                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._menuDimensions.width > 400 ? 'center' : '' }}>
-                                <div className="docCreatorMenu-preview-window empty">
-                                    <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
-                                </div>
-                                {this._userTemplates.map(({ template, doc }) => (
-                                    <div
-                                        className="docCreatorMenu-preview-window"
-                                        key="0"
-                                        style={{
-                                            border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                            boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                                        }}
-                                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
-                                        <button
-                                            className="option-button left"
-                                            onPointerDown={e =>
-                                                this.setUpButtonClick(e, () => {
-                                                    this.setExpandedView(template);
-                                                })
-                                            }>
-                                            <FontAwesomeIcon icon="magnifying-glass" color="white" />
-                                        </button>
-                                        <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.removeUserTemplate(template))}>
-                                            <FontAwesomeIcon icon="minus" color="white" />
-                                        </button>
-                                        <DocumentView
-                                            Document={doc}
-                                            isContentActive={emptyFunction} // !!! should be return false
-                                            addDocument={returnFalse}
-                                            moveDocument={returnFalse}
-                                            removeDocument={returnFalse}
-                                            PanelWidth={() => (this._selectedTemplate === template ? 104 : 111)}
-                                            PanelHeight={() => (this._selectedTemplate === template ? 104 : 111)}
-                                            ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
-                                            renderDepth={1}
-                                            whenChildContentsActiveChanged={emptyFunction}
-                                            focus={emptyFunction}
-                                            styleProvider={DefaultStyleProvider}
-                                            addDocTab={this._props.addDocTab}
-                                            pinToPres={() => undefined}
-                                            childFilters={returnEmptyFilter}
-                                            childFiltersByRanges={returnEmptyFilter}
-                                            searchFilterDocs={returnEmptyDoclist}
-                                            fitContentsToBox={returnFalse}
-                                            fitWidth={returnFalse}
-                                            hideDecorations={true}
-                                        />
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    @action updateXMargin = (input: string) => {
-        this._layout.xMargin = Number(input);
-        setTimeout(() => {
-            if (!this._renderedDocCollection || !this._fullyRenderedDocs) return;
-            this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs);
-        });
-    };
-    @action updateYMargin = (input: string) => {
-        this._layout.yMargin = Number(input);
-        setTimeout(() => {
-            if (!this._renderedDocCollection || !this._fullyRenderedDocs) return;
-            this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs);
-        });
-    };
-    @action updateColumns = (input: string) => {
-        this._layout.columns = Number(input);
-        this.updateRenderedDocCollection();
-    };
-
-    get layoutConfigOptions() {
-        const optionInput = (icon: string, func: (input: string) => void, def?: number, key?: string, noMargin?: boolean) => {
-            return (
-                <div className="docCreatorMenu-option-container small no-margin" key={key} style={{ marginTop: noMargin ? '0px' : '' }}>
-                    <div className="docCreatorMenu-option-title config layout-config">
-                        <FontAwesomeIcon icon={icon as IconProp} />
-                    </div>
-                    <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
-                </div>
-            );
-        };
-
-        switch (this._layout.type) {
-            case LayoutType.FREEFORM:
-                return (
-                    <div className="docCreatorMenu-configuration-bar">
-                        {optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')}
-                        {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '3')}
-                        {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
-                    </div>
-                );
-            default:
-                break;
+            this._menuContent = 'templates';
         }
-    }
 
-    applyLayout = (collection: Doc, docs: Doc[]) => {
-        const { horizontalSpan, verticalSpan } = this.previewInfo;
-        collection._height = verticalSpan;
-        collection._width = horizontalSpan;
-
-        const layout = this._layout;
-        const columns: number = layout.columns ?? this.columnsCount;
-        const xGap: number = layout.xMargin;
-        const yGap: number = layout.yMargin;
-        // const repeat: number = templateInfo.layout.repeat;
-        const startX: number = -Number(collection._width) / 2;
-        const startY: number = -Number(collection._height) / 2;
-        const docHeight: number = Number(docs[0]._height);
-        const docWidth: number = Number(docs[0]._width);
-
-        if (columns === 0 || docs.length === 0) {
-            return;
-        }
+        this._currEditingTemplate = template;
 
-        let i: number = 0;
-        let docsChanged: number = 0;
-        let curX: number = startX;
-        let curY: number = startY;
-
-        while (docsChanged < docs.length) {
-            while (i < columns && docsChanged < docs.length) {
-                docs[docsChanged].x = curX;
-                docs[docsChanged].y = curY;
-                curX += docWidth + xGap;
-                ++docsChanged;
-                ++i;
-            }
-            i = 0;
-            curX = startX;
-            curY += docHeight + yGap;
-        }
+        //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
     };
 
     @computed
-    get previewInfo() {
-        const docHeight: number = Number(this._fullyRenderedDocs[0]._height);
-        const docWidth: number = Number(this._fullyRenderedDocs[0]._width);
-        const layout = this._layout;
-        return {
-            docHeight: docHeight,
-            docWidth: docWidth,
-            horizontalSpan: (docWidth + layout.xMargin) * this.columnsCount - layout.xMargin,
-            verticalSpan: (docHeight + layout.yMargin) * this.rowsCount - layout.yMargin,
-        };
-    }
-
-    /**
-     * Updates the preview that shows how all docs will be rendered in the chosen collection type.
-    @type the type of collection the docs should render to (ie. freeform, carousel, card)
-     */
-    updateRenderedDocCollection = () => {
-        if (!this._fullyRenderedDocs) return;
-
-        const { horizontalSpan, verticalSpan } = this.previewInfo;
-
-        const collectionFactory = (): ((docs: Doc[], options: DocumentOptions) => Doc) => {
-            switch (this._layout.type) {
-                case LayoutType.CAROUSEL3D:
-                    return Docs.Create.Carousel3DDocument;
-                case LayoutType.FREEFORM:
-                    return Docs.Create.FreeformDocument;
-                case LayoutType.CARD:
-                    return Docs.Create.CardDeckDocument;
-                case LayoutType.MASONRY:
-                    return Docs.Create.MasonryDocument;
-                case LayoutType.CAROUSEL:
-                    return Docs.Create.CarouselDocument;
-                default:
-                    return Docs.Create.FreeformDocument;
-            }
-        };
-
-        const collection: Doc = collectionFactory()(this._fullyRenderedDocs, {
-            isDefaultTemplateDoc: true,
-            _height: verticalSpan,
-            _width: horizontalSpan,
-            title: 'title',
-            backgroundColor: 'gray',
-        });
-
-        this.applyLayout(collection, this._fullyRenderedDocs);
-
-        this._renderedDocCollection = collection;
-    };
-
-    layoutPreviewContents = () => {
-        return this._docsRendering ? (
-            <div className="docCreatorMenu-layout-preview-window-wrapper loading">
-                <div className="loading-spinner">
-                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-                </div>
-            </div>
-        ) : !this._renderedDocCollection ? null : (
-            <div className="docCreatorMenu-layout-preview-window-wrapper">
-                <DocumentView
-                    Document={this._renderedDocCollection}
-                    isContentActive={emptyFunction}
-                    addDocument={returnFalse}
-                    moveDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    PanelWidth={() => this._menuDimensions.width - 80}
-                    PanelHeight={() => this._menuDimensions.height - 105}
-                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
-                    renderDepth={5}
-                    whenChildContentsActiveChanged={emptyFunction}
-                    focus={emptyFunction}
-                    styleProvider={DefaultStyleProvider}
-                    addDocTab={this._props.addDocTab}
-                    pinToPres={() => undefined}
-                    childFilters={returnEmptyFilter}
-                    childFiltersByRanges={returnEmptyFilter}
-                    searchFilterDocs={returnEmptyDoclist}
-                    fitContentsToBox={returnFalse}
-                    fitWidth={returnFalse}
-                    hideDecorations={true}
-                />
-            </div>
-        );
-    };
-
-    get optionsMenuContents() {
-        const layoutOption = (option: LayoutType, optStyle?: object, specialFunc?: () => void) => {
-            return (
-                <div
-                    className="docCreatorMenu-dropdown-option"
-                    style={optStyle}
-                    onPointerDown={e =>
-                        this.setUpButtonClick(e, () => {
-                            specialFunc?.();
-                            runInAction(() => {
-                                this._layout.type = option;
-                                this.updateRenderedDocCollection();
-                            });
-                        })
-                    }>
-                    {option}
-                </div>
-            );
-        };
-
-        const selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
-            return (
-                <div className="docCreatorMenu-option-container">
-                    <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
-                        <FontAwesomeIcon icon={icon as IconProp} />
-                    </div>
-                    {manual ? (
-                        <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
-                    ) : (
-                        <select className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }}>
-                            {options}
-                        </select>
-                    )}
-                </div>
-            );
-        };
-
-        const repeatOptions = [0, 1, 2, 3, 4, 5];
-
+    get templatesView() {
         return (
-            <div className="docCreatorMenu-menu-container">
-                <div className="docCreatorMenu-option-container layout">
-                    <div className="docCreatorMenu-dropdown-hoverable">
-                        <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
-                        <div className="docCreatorMenu-dropdown-content">
-                            {layoutOption(LayoutType.FREEFORM, undefined, () => {
-                                if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-                            })}
-                            {layoutOption(LayoutType.CAROUSEL)}
-                            {layoutOption(LayoutType.CAROUSEL3D)}
-                            {layoutOption(LayoutType.MASONRY)}
+            <div className="docCreatorMenu-templates-view">
+                <div className="docCreatorMenu-templates-displays">
+                    <TemplatePreviewGrid title={'Suggested Templates'} menu={this} loading={this._GPTLoading} optionsButtonOpts={this.optionsButtonOpts} templates={this._suggestedTemplates} />
+                    <div className="docCreatorMenu-GPT-options">
+                        <div className="docCreatorMenu-GPT-options-container">
+                            <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generatePresetTemplates} />
                         </div>
                     </div>
                 </div>
-                {this._layout.type ? this.layoutConfigOptions : null}
-                {this.layoutPreviewContents()}
-                {selectionBox(
-                    60,
-                    20,
-                    'repeat',
-                    undefined,
-                    repeatOptions.map(num => <option key={num} onPointerDown={() => (this._layout.repeat = num)}>{`${num}x`}</option>)
-                )}
-                <hr className="docCreatorMenu-option-divider" />
-                <div className="docCreatorMenu-general-options-container">
-                    <button
-                        className="docCreatorMenu-save-layout-button"
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
-                                    const layout: DataVizTemplateLayout = {
-                                        template: this._selectedTemplate.getRenderedDoc(),
-                                        layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
-                                        columns: this.columnsCount,
-                                        rows: this.rowsCount,
-                                        docsNumList: this.docsToRender,
-                                    };
-                                    if (!this._savedLayouts.includes(layout)) {
-                                        this._savedLayouts.push(layout);
-                                    }
-                                }, 'make docs')
-                            )
-                        }>
-                        <FontAwesomeIcon icon="floppy-disk" />
-                    </button>
-                    <button
-                        className="docCreatorMenu-create-docs-button"
-                        style={{ backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)' }}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
-                                    this.addRenderedCollectionToMainview();
-                                }, 'make docs')
-                            )
-                        }>
-                        <FontAwesomeIcon icon="plus" />
-                    </button>
-                </div>
             </div>
         );
     }
 
-    get dashboardContents() {
-        const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
-
-        const fieldPanel = (field: Col, id: number) => {
-            return (
-                <div className="field-panel" key={id}>
-                    <div className="top-bar">
-                        <span className="field-title">{`${field.title} Field`}</span>
-                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
-                            <FontAwesomeIcon icon="minus" />
-                        </button>
-                    </div>
-                    <div className="opts-bar">
-                        <div className="opt-box">
-                            <div className="top-bar"> Title </div>
-                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} value={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
-                        </div>
-                        <div className="opt-box">
-                            <div className="top-bar"> Type </div>
-                            <div className="content">
-                                <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
-                                <div className="bubbles">
-                                    <input
-                                        className="bubble"
-                                        type="radio"
-                                        name="type"
-                                        onClick={() => {
-                                            this.setColType(field, TemplateFieldType.TEXT);
-                                        }}
-                                    />
-                                    <div className="text">Text</div>
-                                    <input
-                                        className="bubble"
-                                        type="radio"
-                                        name="type"
-                                        onClick={() => {
-                                            this.setColType(field, TemplateFieldType.VISUAL);
-                                        }}
-                                    />
-                                    <div className="text">File</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="sizes-box">
-                        <div className="top-bar"> Valid Sizes </div>
-                        <div className="content">
-                            <div className="bubbles">
-                                {sizes.map(size => (
-                                    <>
-                                        <input
-                                            className="bubble"
-                                            type="checkbox"
-                                            name="type"
-                                            checked={field.sizes.includes(size as TemplateFieldSize)}
-                                            onChange={e => {
-                                                this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked);
-                                            }}
-                                        />
-                                        <div className="text">{size}</div>
-                                    </>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                    <div className="desc-box">
-                        <div className="top-bar"> Prompt </div>
-                        <textarea
-                            className="content"
-                            onChange={e => this.setColDesc(field, e.target.value)}
-                            defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc}
-                            placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
-                        />
-                    </div>
-                </div>
-            );
-        };
-
-        return (
-            <div className="docCreatorMenu-dashboard-view">
-                <div className="topbar">
-                    <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
-                        <FontAwesomeIcon icon="plus" />
-                    </button>
-                    <button className="docCreatorMenu-menu-button section-reveal-options float-right" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'templates')))}>
-                        <FontAwesomeIcon icon="arrow-left" />
-                    </button>
-                </div>
-                <div className="panels-container">{this.fieldsInfos.map((field, i) => fieldPanel(field, i))}</div>
-            </div>
-        );
-    }
+    private optionsButtonOpts: [IconProp, () => void] = ['gear', () => (this._menuContent = 'dashboard')];
 
     get renderSelectedViewType() {
         switch (this._menuContent) {
-            case 'templates':
-                return this.templatesPreviewContents;
-            case 'options':
-                return this.optionsMenuContents;
-            case 'dashboard':
-                return this.dashboardContents;
-            default:
-                return undefined;
-        }
+            case 'templates':       return this.templatesView;
+            case 'templateEditing': return <TemplateEditingWindow template={this._currEditingTemplate as Template} menu={this} />;
+            case 'renderPreview':   return <TemplatesRenderPreviewWindow menu={this}/>;
+            case 'dashboard':       return <TemplateMenuFieldOptions menu={this} templateManager={this.templateManager}/>;
+        } // prettier-ignore
+        return undefined;
     }
 
     get resizePanes() {
@@ -1375,34 +541,17 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     render() {
-        const topButton = (icon: string, opt: string, func: () => void, tag: string) => {
-            return (
-                <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
-                    <div
-                        className="top-button-content"
-                        onPointerDown={e =>
-                            this.setUpButtonClick(e, () =>
-                                runInAction(() => {
-                                    func();
-                                })
-                            )
-                        }>
-                        <FontAwesomeIcon icon={icon as IconProp} />
-                    </div>
+        const topButton = (icon: string, opt: string, func: () => void, tag: string) => (
+            <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
+                <div className="top-button-content" onPointerDown={e => this.setUpButtonClick(e, action(func))}>
+                    <FontAwesomeIcon icon={icon as IconProp} />
                 </div>
-            );
-        };
+            </div>
+        );
 
-        const onPreviewSelected = () => {
-            this._menuContent = 'templates';
-        };
-        const onSavedSelected = () => {
-            this._menuContent = 'dashboard';
-        };
-        const onOptionsSelected = () => {
-            this._menuContent = 'options';
-            if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-        };
+        const onPreviewSelected = () => (this._menuContent = 'templates');
+        const onSavedSelected = () => (this._menuContent = 'dashboard');
+        const onOptionsSelected = () => (this._menuContent = 'renderPreview');
 
         return (
             <div className="docCreatorMenu">
@@ -1435,9 +584,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                         return true;
                                     },
                                     emptyFunction,
-                                    undoable(clickEv => {
-                                        clickEv.stopPropagation();
-                                    }, 'drag menu')
+                                    undoable(clickEv => clickEv.stopPropagation(), 'drag menu')
                                 )
                             }>
                             <div className="docCreatorMenu-top-buttons-container">
@@ -1445,9 +592,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                 {topButton('magnifying-glass', 'options', onOptionsSelected, 'middle')}
                                 {topButton('bars', 'saved', onSavedSelected, 'right')}
                             </div>
-                            <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
-                                <FontAwesomeIcon icon={'minus'} />
-                            </button>
+                            <DocCreatorMenuButton icon={'minus'} styles={'float-right'} function={this.closeMenu} />
                         </div>
                         {this.renderSelectedViewType}
                     </div>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
deleted file mode 100644
index c5254c17d..000000000
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Doc } from "../../../../../../fields/Doc";
-import { Docs } from "../../../../../documents/Documents";
-import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
-import { FieldUtils } from "./FieldUtils";
-import { StaticField } from "./StaticField";
-
-export class DynamicField implements Field {
-    private subfields: Field[] = [];
-
-    private id: number;
-    private settings: FieldSettings;
-    private title: string = '';
-
-    private parent: Field;
-    private dimensions: FieldDimensions;
-
-    constructor(settings: FieldSettings, id: number, parent?: Field) {
-        this.id = id;
-        this.settings = settings;
-        if (settings.title) { this.title = settings.title };
-        if (!parent) {
-            this.parent = this;
-            this.dimensions = {width: this.settings.br[0] - this.settings.tl[0], height: this.settings.br[1] - this.settings.tl[1], coord: {x: this.settings.tl[0], y: this.settings.tl[1]}};
-        } else {
-            this.parent = parent;
-            this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
-        }
-        this.subfields = this.setupSubfields();
-    }
-
-    setContent = () => { return };
-    getContent = () => { return '' };
-
-    setTitle = (title: string) => { this.title = title };
-    getTitle = () => { return this.title };
-
-    get getSubfields() { return this.subfields };
-    get getAllSubfields() {
-        let fields: Field[] = [];
-        this.subfields?.forEach(field => {
-            fields.push(field);
-            fields = fields.concat(field.getAllSubfields)
-        });
-        return fields;
-    };
-
-    get getDimensions() { return this.dimensions };
-    get getID() { return this.id };
-    get getViewType() { return this.settings.viewType };
-
-    get getDescription(): string {
-        return this.settings.description ?? '';
-    }
-
-    matches = (): Array<number> => {
-        return [];
-    }
-
-    updateRenderedDoc = () => {
-        return new Doc();
-    }
-
-    setupSubfields = (): Field[] => {
-        const fields: Field[] = [];
-        this.settings.subfields?.forEach((fieldSettings, index) => {
-            let field: Field;
-            const type = fieldSettings.viewType;
-
-            const id = Number(String(this.id) + String(index));
-
-            if (type == ViewType.CAROUSEL3D || type === ViewType.FREEFORM) {
-                field = new DynamicField(fieldSettings, id, this); 
-            } else {  
-                field = new StaticField(fieldSettings, this, id);
-            }
-            fields.push(field);
-        });
-        return fields;
-    }
-
-    applyAttributes = (field: Field) => {
-        field.setTitle(this.title);
-        field.updateRenderedDoc(this.renderedDoc());
-    }
-
-    getChildDimensions = (coords: { tl: [number, number]; br: [number, number] }): FieldDimensions => {
-        const l = (coords.tl[0] * this.dimensions.height) / 2;
-        const t = coords.tl[1] * this.dimensions.width / 2; //prettier-ignore
-        const r = (coords.br[0] * this.dimensions.height) / 2;
-        const b = coords.br[1] * this.dimensions.width / 2; //prettier-ignore
-        const width = r - l;
-        const height = b - t;
-        const coord = { x: l, y: t };
-        return { width, height, coord };
-    };
-
-    renderedDoc = (): Doc => {
-        let doc: Doc;
-        switch (this.settings.viewType) {
-            case ViewType.CAROUSEL3D:
-                doc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc()), {
-                    title: this.title,
-                });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
-                return doc;
-            case ViewType.FREEFORM:
-                doc = Docs.Create.FreeformDocument(this.subfields.map(field => field.renderedDoc()), {
-                    title: this.title,
-                });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
-                return doc;
-            default:
-                return new Doc();
-        }
-    }
-
-}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
deleted file mode 100644
index ea9b566b3..000000000
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Doc } from "../../../../../../fields/Doc";
-import { Col } from "../DocCreatorMenu";
-import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
-
-export enum FieldContentType {
-    STRING = 'string',
-    IMAGE = 'image',
-}
-
-export enum ViewType {
-    CAROUSEL3D = 'carousel3d',
-    FREEFORM = 'freeform',
-    STATIC = 'static',
-    DEC = 'decoration'
-}
-
-export type FieldDimensions = {
-    width: number;
-    height: number;
-    coord: {x: number, y: number};
-}
-
-export interface FieldOpts {
-    backgroundColor?: string;
-    color?: string;
-    cornerRounding?: number;
-    borderWidth?: string;
-    borderColor?: string;
-    contentXCentering?: 'h-left' | 'h-center' | 'h-right';
-    contentYCentering?: 'top' | 'center' | 'bottom';
-    opacity?: number;
-    rotation?: number;
-    fontBold?: boolean;
-    fontTransform?: 'uppercase' | 'lowercase';
-    fieldViewType?: 'freeform' | 'stacked';
-}
-
-export type FieldSettings = {
-    tl: [number, number];
-    br: [number, number];
-    opts: FieldOpts;
-    viewType: ViewType;
-    title?: string;
-    subfields?: FieldSettings[];
-    types?: TemplateFieldType[];
-    sizes?: TemplateFieldSize[];
-    description?: string;
-};
-
-export interface Field {
-    getContent: () => string;
-    setContent: (content: string, type?: FieldContentType) => void;
-    getDimensions: FieldDimensions;
-    getSubfields: Field[];
-    getAllSubfields: Field[];
-    getID: number;
-    getViewType: ViewType;
-    getDescription: string;
-    getTitle: () => string;
-    setTitle: (title: string) => void;
-    setupSubfields: () => Field[];
-    applyAttributes: (field: Field) => void;
-    renderedDoc: () => Doc;
-    matches: (cols: Col[]) => number[];
-    updateRenderedDoc: (oldDoc?: Doc) => Doc;
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
deleted file mode 100644
index 3886774d2..000000000
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Doc } from "../../../../../../fields/Doc";
-import { ComputedField, ScriptField } from "../../../../../../fields/ScriptField";
-import { Col } from "../DocCreatorMenu";
-import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from "../TemplateBackend";
-import { FieldDimensions, FieldSettings } from "./Field";
-
-export class FieldUtils {
-    public static getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => {
-        const l = (coords.tl[0] * parentDimensions.width) / 2;
-        const t = coords.tl[1] * parentDimensions.height / 2; //prettier-ignore
-        const r = (coords.br[0] * parentDimensions.width) / 2;
-        const b = coords.br[1] * parentDimensions.height / 2; //prettier-ignore
-        const width = r - l;
-        const height = b - t;
-        const coord = { x: l, y: t };
-        return { width, height, coord };
-    };
-
-    public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings, oldDoc?: Doc) => {
-        const opts = settings.opts;
-        doc.isDefaultTemplateDoc = oldDoc ? oldDoc.isDefaultTemplateDoc : true;
-        doc._layout_hideScroll = oldDoc ? oldDoc._layout_hideScroll : true;
-        doc.x = oldDoc ? oldDoc.x : parentDimensions.coord.x;
-        doc.y = oldDoc ? oldDoc.y : parentDimensions.coord.y;
-        doc._height = oldDoc ? oldDoc.height : parentDimensions.height;
-        doc._width = oldDoc ? oldDoc.width : parentDimensions.width;
-        doc.backgroundColor = oldDoc ? oldDoc.backgroundColor : opts.backgroundColor ?? '';
-        doc._layout_borderRounding = !opts.cornerRounding ? '0px' : ScriptField.MakeFunction(`${opts.cornerRounding} * this.width + 'px'`);
-        doc.borderColor = oldDoc ? oldDoc.borderColor : opts.borderColor;
-        doc.borderWidth = oldDoc ? oldDoc.borderWidth : opts.borderWidth;
-        doc.opacity = oldDoc ? oldDoc.opacity : opts.opacity;
-        doc._rotation = oldDoc ? oldDoc._rotation : opts.rotation;
-        doc.hCentering = oldDoc ? oldDoc.hCentering : opts.contentXCentering;
-        doc.nativeWidth = parentDimensions.width;
-        doc.nativeHeight = parentDimensions.height;
-        doc._layout_nativeDimEditable = true;
-    };
-
-    public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
-        const words: string[] = text.split(/\s+/).filter(Boolean);
-
-        let currFontSize = 1;
-        let rowsCount = 1;
-        let currTextHeight = currFontSize * rowsCount * 2;
-
-        while (currTextHeight <= contHeight) {
-            let wordIndex = 0;
-            let currentRowWidth = 0;
-            let wordsInCurrRow = 0;
-            rowsCount = 1;
-
-            while (wordIndex < words.length) {
-                const word = words[wordIndex];
-                const wordWidth = word.length * currFontSize * 0.7;
-
-                if (currentRowWidth + wordWidth <= contWidth) {
-                    currentRowWidth += wordWidth;
-                    ++wordsInCurrRow;
-                } else {
-                    if (words.length !== 1 && words.length > wordsInCurrRow) {
-                        rowsCount++;
-                        currentRowWidth = wordWidth;
-                        wordsInCurrRow = 1;
-                    } else {
-                        break;
-                    }
-                }
-
-                wordIndex++;
-            }
-
-            currTextHeight = rowsCount * currFontSize * 2;
-
-            currFontSize += 1;
-        }
-
-        return currFontSize - 1;
-    };
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
deleted file mode 100644
index 47b43f051..000000000
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Doc } from "../../../../../../fields/Doc";
-import { Docs } from "../../../../../documents/Documents";
-import { Col } from "../DocCreatorMenu";
-import { DynamicField } from "./DynamicField";
-import { FieldUtils } from "./FieldUtils";
-import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field";
-
-export class StaticField {
-    private content: string;
-    private contentType: FieldContentType | undefined;
-    private subfields: Field[] = [];
-    private renderedDocument: Doc;
-
-    private id: number;
-    private title: string = '';
-
-    private settings: FieldSettings;
-
-    private parent: Field;
-    private dimensions: FieldDimensions;
-
-    constructor(settings: FieldSettings, parent: Field, id: number) {
-        this.settings = settings;
-        if (settings.title) { this.title = settings.title };
-        this.id = id;
-        this.parent = parent;
-        this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
-        this.content = '';
-        this.subfields = this.setupSubfields();
-        this.renderedDocument = this.updateRenderedDoc();
-    };
-
-    get getSubfields(): Field[] { return this.subfields ?? []; };
-
-    get getAllSubfields(): Field[] {
-        let fields: Field[] = [];
-        this.subfields?.forEach(field => {
-            fields.push(field);
-            fields = fields.concat(field.getAllSubfields);
-        });
-        return fields;
-    };
-
-    get getDimensions() { return this.dimensions };
-    get getID() { return this.id };
-    get getViewType() { return this.settings.viewType };
-
-    get getDescription(): string {
-        return this.settings.description ?? '';
-    }
-
-    renderedDoc = () => {
-        return this.renderedDocument;
-    }
-
-    setContent = (newContent: string, type?: FieldContentType) => { 
-        this.content = newContent;
-        if (type) this.contentType = type;
-        this.updateRenderedDoc(this.renderedDocument);
-    };
-    getContent() { return this.content };
-
-    setTitle = (title: string) => { 
-        this.title = title;
-        this.renderedDocument.title = title;
-        this.updateRenderedDoc(this.renderedDocument);
-    };
-    getTitle = () => { return this.title };
-
-    applyAttributes = (field: Field) => { //!!! can be updated later for more robust clonign; this is all ythat's needed now
-        field.setTitle(this.title);
-        field.setContent('', this.contentType);
-        field.updateRenderedDoc(this.renderedDoc());
-    }
-
-    setupSubfields = (): Field[] => {
-        const fields: Field[] = [];
-        this.settings.subfields?.forEach((fieldSettings, index) => {
-            let field: Field;
-            const type = fieldSettings.viewType;
-
-            const id = Number(String(this.id) + String(index));
-
-            if (type === ViewType.FREEFORM || type === ViewType.CAROUSEL3D) { 
-                field = new DynamicField(fieldSettings, id, this); 
-            } else {
-                field = new StaticField(fieldSettings, this, id);
-            };
-
-            fields.push(field);
-        });
-        return fields;
-    };
-
-    matches = (cols: Col[]): number[] => {
-        const colMatchesField = (col: Col) => {
-            const isMatch: boolean = (
-                this.settings.sizes?.some(size => col.sizes?.includes(size)) 
-                && this.settings.types?.includes(col.type)) 
-                ?? false;
-            return isMatch;
-        }
-
-        const matches: Array<number> = [];
-
-        cols.forEach((col, v) => {
-            if (colMatchesField(col)) {
-                matches.push(v);
-            }
-        });
-
-        return matches;
-    };
-
-    updateRenderedDoc = (oldDoc?: Doc): Doc => {
-        const opts = this.settings.opts;
-
-        if (!this.contentType) { this.contentType = FieldContentType.STRING };
-
-        let doc: Doc;
-
-        switch (this.contentType) {
-            case FieldContentType.STRING:
-                doc = Docs.Create.TextDocument(String(this.content), {
-                    title: this.title,
-                    text_fontColor: oldDoc ? String(oldDoc.color) : opts.color,
-                    contentBold: oldDoc ? Boolean(oldDoc.fontBold) : opts.fontBold,
-                    textTransform: oldDoc ? String(oldDoc.fontTransform) : opts.fontTransform,
-                    color: oldDoc ? String(oldDoc.color) : opts.color,
-                    _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, String(this.content), true)}`
-                });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc);
-                break;
-            case FieldContentType.IMAGE:
-                doc = Docs.Create.ImageDocument(String(this.content), {
-                    title: this.title,
-                    _layout_fitWidth: false,
-                });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc);
-                break;
-        }   
-
-        this.renderedDocument = doc;
-
-        return doc;
-    };
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx
new file mode 100644
index 000000000..89c2e44ff
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx
@@ -0,0 +1,65 @@
+import { observer } from "mobx-react";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import { Conditional } from "../Backend/TemplateManager";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import React from "react";
+
+interface ConditionalsTextAreaProps {
+    conditional: Conditional;
+    property: keyof Conditional;
+}
+
+@observer
+export class ConditionalsTextArea extends ObservableReactComponent<ConditionalsTextAreaProps> {
+
+    private mirrorRef: HTMLSpanElement | null = null;
+
+    @observable private inputWidth: string = '60px';
+
+    constructor(props: ConditionalsTextAreaProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    setMirrorRef: React.LegacyRef<HTMLSpanElement> = (node) => { this.mirrorRef = node }
+
+    @action updateInputWidth() {
+        const mirror = this.mirrorRef;
+        if (mirror) {
+            const width = mirror.offsetWidth;
+            if ( width + 8 > 60) this.inputWidth = `${width + 8}px`;
+        }
+    }
+
+    render() {
+        return (
+            <div style={{ display: 'inline-block', position: 'relative' }}>
+                <span
+                    ref={this.setMirrorRef}
+                    style={{
+                        position: 'absolute',
+                        visibility: 'hidden',
+                        whiteSpace: 'pre',
+                        font: 'inherit',
+                        padding: 0,
+                    }}
+                >
+                    {this._props.conditional[this._props.property] || ' '}
+                </span>
+                <input
+                    className="form-row-input"
+                    value={this.props.conditional[this.props.property] ?? ''}
+                    onChange={e => {
+                        runInAction(() => {
+                        this.props.conditional[this.props.property] = e.target.value as "=" | ">" | "<" | "contains";
+                        });
+                        this.updateInputWidth();
+                    }}
+                    style={{ width: this.inputWidth }}
+                    placeholder={this.props.property}
+                />
+            </div>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
new file mode 100644
index 000000000..48d2de4de
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
@@ -0,0 +1,42 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { setupMoveUpEvents, returnFalse } from "../../../../../../ClientUtils";
+import { emptyFunction } from "../../../../../../Utils";
+import { undoable } from "../../../../../util/UndoManager";
+import { observer } from "mobx-react";
+
+interface DocCreatorMenuButtonProps {
+    icon: IconProp;
+    // eslint-disable-next-line
+    function: () => any;
+    styles?: string;
+}
+
+@observer
+export class DocCreatorMenuButton extends ObservableReactComponent<DocCreatorMenuButtonProps> {
+    // eslint-disable-next-line
+    setupButtonClick = (e: React.PointerEvent, func: (...args: any) => void) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            returnFalse,
+            emptyFunction,
+            undoable(clickEv => {
+                clickEv.stopPropagation();
+                clickEv.preventDefault();
+                func();
+            }, 'create docs')
+        );
+    };
+
+    render() {
+
+        return (
+            <button className={`docCreatorMenu-menu-button ${this._props.styles}`} onPointerDown={e => this.setupButtonClick(e, async () => this._props.function())}>
+                <FontAwesomeIcon icon={this._props.icon} />
+            </button>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
new file mode 100644
index 000000000..c35099e82
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -0,0 +1,220 @@
+import { action, makeObservable, observable, reaction } from 'mobx';
+import React from 'react';
+import { returnFalse, returnEmptyFilter } from '../../../../../../ClientUtils';
+import { emptyFunction } from '../../../../../../Utils';
+import { returnEmptyDoclist } from '../../../../../../fields/Doc';
+import { DefaultStyleProvider } from '../../../../StyleProvider';
+import { DocumentView, DocumentViewInternal } from '../../../DocumentView';
+import { DocCreatorMenu } from '../DocCreatorMenu';
+import { TemplatePreviewGrid } from './TemplatePreviewGrid';
+import { observer } from 'mobx-react';
+import { Transform } from '../../../../../util/Transform';
+import { Template } from '../Template';
+import { ObservableReactComponent } from '../../../../ObservableReactComponent';
+import { IDisposer } from 'mobx-utils';
+import { DocCreatorMenuButton } from './DocCreatorMenuButton';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export type FireflyStructureOptions = {
+    numVariations: number;
+    temperature: number;
+    useStyleRef: boolean;
+};
+
+interface FireflyVariationsTabProps {
+    menu: DocCreatorMenu;
+    template: Template;
+}
+
+@observer
+export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariationsTabProps> {
+    private _prompt: string = 'Use this template to generate an empty baseball card template.';
+    private _optionsButtonOpts: [IconProp, () => void] = ['gear', emptyFunction];
+    private _previewBoxRightButtonOpts: [IconProp, () => void] = ['gear', () => this.forceUpdate()];
+
+    @observable _fireflyOptions: FireflyStructureOptions = { numVariations: 3, temperature: 0, useStyleRef: false };
+    @observable _promptInput: HTMLTextAreaElement | null = null;
+    @observable _loading: boolean = false;
+    @observable _variationsTabOpen: boolean = false;
+    @observable _variationURLs: string[] = [];
+
+    constructor(props: FireflyVariationsTabProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    generateVariations = action(async () => {
+        this._props.menu._variations = [];
+        this._loading = true;
+        const cloneTemplate = this._props.template.clone(false);
+        cloneTemplate.setMatteBackground();
+        const doc = cloneTemplate.getRenderedDoc()!;
+        this._props.menu.generateVariations(doc, this._prompt, this._fireflyOptions).then(
+            action((urls: string[]) => {
+                (this._variationURLs = urls).forEach(url => {
+                    const template = this._props.template.clone(true);
+                    template.setImageAsBackground(url, true);
+                    this._props.menu._variations.push(template);
+                });
+                this._loading = false;
+            })
+        );
+    });
+
+    render() {
+        return (
+            <div className="docCreatorMenu-editing-firefly-section">
+                <div className="docCreatorMenu-option-divider full no-margin-bottom" />
+                <TemplatePreviewGrid
+                    menu={this._props.menu}
+                    title="Generate Variations"
+                    loading={this._loading}
+                    styles="scrolling"
+                    templates={this._props.menu._variations}
+                    optionsButtonOpts={this._optionsButtonOpts}
+                    previewBoxRightButtonOpts={this._previewBoxRightButtonOpts}
+                />
+                <div className="docCreatorMenu-firefly-options">
+                    <div className="docCreatorMenu-variation-prompt-row">
+                        <textarea
+                            className="docCreatorMenu-variation-prompt-input-textbox"
+                            ref={action((node: HTMLTextAreaElement | null) => (this._promptInput = node))}
+                            onChange={e => (this._prompt = e.target.value)}
+                            onInput={() => {
+                                if (this._promptInput !== null) {
+                                    this._promptInput.style.height = 'auto';
+                                    this._promptInput.style.height = this._promptInput.scrollHeight + 'px';
+                                }
+                            }}
+                            defaultValue=""
+                            placeholder="Enter a custom prompt here (optional)"
+                        />
+                        <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generateVariations} />
+                    </div>
+                    <nav className="options‑menu">
+                        <label className="menu‑item switch">
+                            <input type="checkbox" checked={this._fireflyOptions.useStyleRef} onChange={action(e => (this._fireflyOptions.useStyleRef = e.target.checked))} />
+                            <span className="slider round"></span>
+                            <span className="firefly-option-label">Use template as style guide</span>
+                        </label>
+                        <div className="menu‑item">
+                            <span className="firefly-option-label">Variations</span>
+                            <input type="range" id="variations" min="1" max="5" value={this._fireflyOptions.numVariations} onChange={action(e => (this._fireflyOptions.numVariations = Number(e.target.value)))} />
+                            <span className="value" id="varVal">
+                                {this._fireflyOptions.numVariations}
+                            </span>
+                        </div>
+                        <div className="menu‑item">
+                            <span className="firefly-option-label">Temperature</span>
+                            <input type="range" id="temperature" min="1" max="100" value={this._fireflyOptions.temperature} onChange={action(e => (this._fireflyOptions.temperature = Number(e.target.value)))} />
+                            <span className="value" id="tempVal">
+                                {this._fireflyOptions.temperature}
+                            </span>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        );
+    }
+}
+
+interface TemplateEditingWindowProps {
+    menu: DocCreatorMenu;
+    template: Template;
+}
+
+@observer
+export class TemplateEditingWindow extends ObservableReactComponent<TemplateEditingWindowProps> {
+    private disposers: { [name: string]: IDisposer } = {};
+
+    @observable private _previewWindow: HTMLDivElement | null = null;
+    @observable _variationsTabOpen: boolean = false;
+
+    constructor(props: TemplateEditingWindowProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    componentDidMount(): void {
+        this.disposers.windowDimensions = reaction(
+            () => this._props.menu._resizing,
+            () => this.forceUpdate(),
+            { fireImmediately: true }
+        );
+    }
+
+    componentWillUnmount() {
+        Object.values(this.disposers).forEach(disposer => disposer?.());
+    }
+
+    @action setVariationTab = (open: boolean) => {
+        this._variationsTabOpen = open;
+        if (this._previewWindow && open) {
+            this._previewWindow.style.height = String(Number(this._previewWindow.clientHeight) * 0.6);
+        } else if (this._previewWindow && !open) {
+            this._previewWindow.style.height = String((Number(this._previewWindow.clientHeight) * 5) / 3);
+        }
+    };
+
+    previewPanelWidth = () => this._previewWindow?.clientWidth ?? 500;
+    previewPanelHeight = () => this._previewWindow?.clientHeight ?? 500;
+    previewScreenToLocalXf = () => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1);
+    get renderedDocPreview() {
+        const doc = this._props.template.getRenderedDoc();
+        return (
+            <div className="docCreatorMenu-expanded-template-preview" ref={action((node: HTMLDivElement | null) => (this._previewWindow = node))}>
+                {this._previewWindow && doc ? (
+                    <DocumentView
+                        Document={doc}
+                        isContentActive={emptyFunction}
+                        addDocument={returnFalse}
+                        moveDocument={returnFalse}
+                        removeDocument={returnFalse}
+                        PanelWidth={this.previewPanelWidth}
+                        PanelHeight={this.previewPanelHeight}
+                        ScreenToLocalTransform={this.previewScreenToLocalXf}
+                        renderDepth={5}
+                        whenChildContentsActiveChanged={emptyFunction}
+                        focus={emptyFunction}
+                        styleProvider={DefaultStyleProvider}
+                        addDocTab={DocumentViewInternal.addDocTabFunc}
+                        pinToPres={emptyFunction}
+                        childFilters={returnEmptyFilter}
+                        childFiltersByRanges={returnEmptyFilter}
+                        searchFilterDocs={returnEmptyDoclist}
+                        // fitContentsToBox={returnFalse}
+                        // fitWidth={returnFalse}
+                    />
+                ) : null}
+            </div>
+        );
+    }
+
+    expandFunc = () => {
+        // if (this._props.template === this._props.menu._selectedTemplate) {
+        //     this._props.menu.updateRenderedPreviewCollection(this._props.template);
+        // }
+        this._props.menu.setExpandedView(undefined);
+    };
+    lastFunc = () => {
+        this._props.menu.editLastTemplate();
+        this.forceUpdate();
+    };
+    variationFunc = () => this.setVariationTab(!this._variationsTabOpen);
+    render() {
+        return (
+            <div className="docCreatorMenu-templates-view">
+                <div className="docCreatorMenu-expanded-template-preview">
+                    <div className="top-panel" />
+                    {this.renderedDocPreview}
+                    {this._variationsTabOpen ? <FireflyVariationsTab menu={this._props.menu} template={this._props.template} /> : null}
+                    <div className="right-buttons-panel">
+                        <DocCreatorMenuButton icon="minimize" function={this.expandFunc} />
+                        <DocCreatorMenuButton icon="lightbulb" function={this.variationFunc} />
+                        <DocCreatorMenuButton icon="arrow-rotate-backward" function={this.lastFunc} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateMenuFieldOptions.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateMenuFieldOptions.tsx
new file mode 100644
index 000000000..f0e20837c
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateMenuFieldOptions.tsx
@@ -0,0 +1,185 @@
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { ObservableReactComponent } from '../../../../ObservableReactComponent';
+import { Col, DocCreatorMenu } from '../DocCreatorMenu';
+import React from 'react';
+import { Conditional, TemplateManager } from '../Backend/TemplateManager';
+import { TemplateFieldType, TemplateFieldSize } from '../TemplateBackend';
+import { DocCreatorMenuButton } from './DocCreatorMenuButton';
+
+interface TemplateMenuFieldOptionsProps {
+    menu: DocCreatorMenu;
+    templateManager: TemplateManager;
+}
+
+@observer
+export class TemplateMenuFieldOptions extends ObservableReactComponent<TemplateMenuFieldOptionsProps> {
+    @observable _collapsedCols: string[] = []; //any columns whose options panels are hidden
+
+    constructor(props: TemplateMenuFieldOptionsProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @observable private _newCondCache: Record<string, Conditional> = {};
+
+    getParams = (title: string, parameters?: Conditional): Conditional => {
+        if (parameters) return parameters;
+
+        if (!this._newCondCache[title]) {
+            this._newCondCache[title] = observable<Conditional>({
+                field: title,
+                operator: '=',
+                condition: '',
+                target: 'Own',
+                attribute: '',
+                value: '',
+            });
+        }
+        return this._newCondCache[title];
+    };
+
+    conditionForm = (title: string, parameters?: Conditional, empty: boolean = false) => {
+        const contentFieldTitles = this._props.menu.fieldsInfos
+            .filter(field => field.type !== TemplateFieldType.DATA)
+            .map(field => field.title)
+            .concat('Template');
+        const params: Conditional = this.getParams(title, parameters);
+
+        return (
+            <div className="form">
+                <div className="form-row">
+                    <div className="form-row-plain-text">If</div>
+                    <div className="form-row-plain-text">{title}</div>
+                    <div className="operator-options-dropdown">
+                        <span className="operator-dropdown-current">{params.operator ?? '='}</span>
+                        <div className="operator-dropdown-option" onPointerDown={() => (params.operator = '=')}>
+                            {'='}
+                        </div>
+                    </div>
+                    <input className="form-row-textarea" onChange={action(e => (params.condition = e.target.value))} placeholder="value" value={params.condition} />
+                    <div className="form-row-plain-text">then</div>
+                    <div className="operator-options-dropdown">
+                        <span className="operator-dropdown-current">{params.target ?? 'Own'}</span>
+                        {contentFieldTitles.map((fieldTitle, i) => (
+                            <div className="operator-dropdown-option" key={i} onPointerDown={() => (params.target = fieldTitle)}>
+                                {fieldTitle === title ? 'Own' : fieldTitle}
+                            </div>
+                        ))}
+                    </div>
+                    <input className="form-row-textarea" onChange={action(e => (params.attribute = e.target.value))} placeholder="attribute" value={params.attribute} />
+                    <div className="form-row-plain-text">{'becomes'}</div>
+                    <input className="form-row-textarea" onChange={action(e => (params.value = e.target.value))} placeholder="value" value={params.value} />
+                </div>
+                {empty ? (
+                    <DocCreatorMenuButton
+                        icon={'plus'}
+                        styles={'float-right border'}
+                        function={() => {
+                            this._newCondCache[title] = observable<Conditional>({
+                                field: title,
+                                operator: '=',
+                                condition: '',
+                                target: 'Own',
+                                attribute: '',
+                                value: '',
+                            });
+                            this._props.templateManager.addFieldCondition(title, params);
+                        }}
+                    />
+                ) : (
+                    <DocCreatorMenuButton icon={'minus'} styles={'float-right border'} function={() => this._props.templateManager.removeFieldCondition(title, params)} />
+                )}
+            </div>
+        );
+    };
+
+    fieldPanel = (field: Col, id: number) => (
+        <div className="field-panel" key={id}>
+            <div
+                className="top-bar"
+                onPointerDown={e =>
+                    this._props.menu.setUpButtonClick(
+                        e,
+                        action(() => {
+                            if (this._collapsedCols.includes(field.title)) {
+                                this._collapsedCols = this._collapsedCols.filter(col => col !== field.title);
+                            } else {
+                                this._collapsedCols.push(field.title);
+                            }
+                        })
+                    )
+                }>
+                <span className="field-title">{`${field.title} Field`}</span>
+                <DocCreatorMenuButton icon={'minus'} styles={'no-margin absolute-right'} function={() => this._props.menu.removeField(field)} />
+            </div>
+            {this._collapsedCols.includes(field.title) ? null : (
+                <>
+                    <div className="opts-bar">
+                        <div className="opt-box">
+                            <div className="top-bar"> Title </div>
+                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} value={field.title} placeholder={'Enter title'} onChange={e => this._props.menu.setColTitle(field, e.target.value)} />
+                        </div>
+                        <div className="opt-box">
+                            <div className="top-bar"> Type </div>
+                            <div className="content">
+                                <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : field.type === TemplateFieldType.DATA ? 'Data Field' : ''}</span>
+                                <div className="bubbles">
+                                    <input className="bubble" type="radio" name="type" onClick={() => this._props.menu.setColType(field, TemplateFieldType.TEXT)} />
+                                    <div className="text">Text</div>
+                                    <input className="bubble" type="radio" name="type" onClick={() => this._props.menu.setColType(field, TemplateFieldType.VISUAL)} />
+                                    <div className="text">File</div>
+                                    <input className="bubble" type="radio" name="type" onClick={() => this._props.menu.setColType(field, TemplateFieldType.DATA)} />
+                                    <div className="text">Data</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {field.type === TemplateFieldType.DATA ? null : (
+                        <>
+                            <div className="sizes-box">
+                                <div className="top-bar"> Valid Sizes </div>
+                                <div className="content">
+                                    <div className="bubbles">
+                                        {Object.values(TemplateFieldSize).map(size => (
+                                            <div key={field + size}>
+                                                <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this._props.menu.modifyColSizes(field, size, e.target.checked)} />
+                                                <div className="text">{size}</div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="desc-box">
+                                <div className="top-bar"> Prompt </div>
+                                <textarea
+                                    className="content"
+                                    onChange={e => this._props.menu.setColDesc(field, e.target.value)}
+                                    defaultValue={field.desc === this._props.menu._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc}
+                                    placeholder={this._props.menu._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
+                                />
+                            </div>
+                        </>
+                    )}
+                    <div className="conditionals-section">
+                        <span className="conditionals-title">Conditional Logic</span>
+                        {this.conditionForm(field.title, undefined, true)}
+                        {this._props.templateManager._conditionalFieldLogic[field.title]?.map(condition => this.conditionForm(condition.field, condition))}
+                    </div>
+                </>
+            )}
+        </div>
+    );
+
+    render() {
+        return (
+            <div className="docCreatorMenu-dashboard-view">
+                <div className="topbar">
+                    <DocCreatorMenuButton icon="plus" function={this._props.menu.addField} />
+                    <DocCreatorMenuButton icon="arrow-left" styles="float-right" function={action(() => (this._props.menu._menuContent = 'templates'))} />
+                </div>
+                <div className="panels-container">{this._props.menu.fieldsInfos.map((field, i) => this.fieldPanel(field, i))}</div>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
new file mode 100644
index 000000000..7d02fff12
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -0,0 +1,89 @@
+import { Colors } from '@dash/components/src';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Template } from '../Template';
+import { action, makeObservable, observable } from 'mobx';
+import React from 'react';
+import { ObservableReactComponent } from '../../../../ObservableReactComponent';
+import { DocCreatorMenu } from '../DocCreatorMenu';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { DocumentView } from '../../../DocumentView';
+import { emptyFunction } from '../../../../../../Utils';
+import { returnEmptyFilter, returnFalse } from '../../../../../../ClientUtils';
+import { Transform } from '../../../../../util/Transform';
+import { DefaultStyleProvider } from '../../../../StyleProvider';
+import { Doc, returnEmptyDoclist } from '../../../../../../fields/Doc';
+import { observer } from 'mobx-react';
+
+export interface TemplatePreviewBoxProps {
+    template: Template;
+    menu: DocCreatorMenu; // eslint-disable-next-line
+    leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]; // eslint-disable-next-line
+    rightButtonOpts?: [icon: IconProp, func: (...args: any) => void];
+}
+
+@observer
+export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
+    @observable private previewWindow: HTMLDivElement | null = null;
+
+    constructor(props: TemplatePreviewBoxProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    get doc() {
+        return this._props.template.getRenderedDoc() as Doc;
+    }
+
+    docPanelWidth = () => this.previewWindow?.clientWidth ?? this._props.menu._menuDimensions.height * 0.3;
+    docPanelHeight = () => this.previewWindow?.clientHeight ?? this._props.menu._menuDimensions.height * 0.3;
+    docScreenToLocalXf = () => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1);
+
+    render() {
+        const template = this._props.template;
+
+        return (
+            <div
+                key={template.title}
+                className="docCreatorMenu-preview-window"
+                ref={action((node: HTMLDivElement | null) => (this.previewWindow = node))}
+                style={{
+                    border: this._props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                    boxShadow: this._props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                }}
+                onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.menu.updateSelectedTemplate(template))}>
+                {this._props.leftButtonOpts ? (
+                    <button className="option-button left" onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.leftButtonOpts![1](template))}>
+                        <FontAwesomeIcon icon={this._props.leftButtonOpts![0]} color="white" />
+                    </button>
+                ) : null}
+                {this._props.rightButtonOpts ? (
+                    <button className="option-button right" onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.rightButtonOpts![1](template))}>
+                        <FontAwesomeIcon icon={this._props.rightButtonOpts![0]} color="white" />
+                    </button>
+                ) : null}
+                <DocumentView
+                    Document={this.doc}
+                    isContentActive={emptyFunction} // !!! should be return false
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={this.docPanelWidth}
+                    PanelHeight={this.docPanelHeight}
+                    ScreenToLocalTransform={this.docScreenToLocalXf}
+                    renderDepth={1}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={this._props.menu._props.addDocTab}
+                    pinToPres={emptyFunction}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    // fitContentsToBox={returnFalse}
+                    // fitWidth={returnFalse}
+                    hideDecorations={true}
+                />
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
new file mode 100644
index 000000000..da4851f84
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
@@ -0,0 +1,60 @@
+import { makeObservable, runInAction } from "mobx";
+import React from "react";
+import ReactLoading from "react-loading";
+import { Doc } from "../../../../../../fields/Doc";
+import { StrCast } from "../../../../../../fields/Types";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import { Template } from "../Template";
+import { observer } from "mobx-react";
+import { DocCreatorMenu } from "../DocCreatorMenu";
+import { TemplatePreviewBox } from "./TemplatePreviewBox";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
+
+export interface SuggestedTemplatesProps {
+    menu: DocCreatorMenu;
+    loading?: boolean;
+    templates: Template[];
+    title: string;
+    styles?: string; // eslint-disable-next-line
+    optionsButtonOpts?: [IconProp, (...args: any) => any]; // eslint-disable-next-line
+    previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any]; // eslint-disable-next-line
+    previewBoxRightButtonOpts?: [IconProp, (...args: any) => any]; 
+}
+
+@observer
+export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTemplatesProps> {
+
+    constructor(props: SuggestedTemplatesProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    render() {
+        return (
+            <div className="docCreatorMenu-section">
+                <div className="docCreatorMenu-section-topbar">
+                    <div className="docCreatorMenu-section-title">{this.props.title}</div>
+                    {this._props.optionsButtonOpts ? 
+                        <DocCreatorMenuButton icon={this._props.optionsButtonOpts[0] as IconProp} styles={'float-right'} function={() => runInAction(this._props.optionsButtonOpts![1])}/> 
+                        : null}
+                </div>
+                <div className={"docCreatorMenu-templates-preview-window " + this._props.styles}>
+                    {this._props.loading ? 
+                    (<div className="loading-spinner">
+                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                    </div>)
+                    : this.props.templates.map((template, i) => (
+                        <TemplatePreviewBox 
+                        key={i}
+                        template={template} 
+                        menu={this.props.menu} 
+                        leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
+                        rightButtonOpts={this._props.previewBoxRightButtonOpts}
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx
new file mode 100644
index 000000000..9222d7349
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx
@@ -0,0 +1,346 @@
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import { ObservableReactComponent } from '../../../../ObservableReactComponent';
+import { DocCreatorMenu, LayoutType } from '../DocCreatorMenu';
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { setupMoveUpEvents, returnFalse, returnEmptyFilter } from '../../../../../../ClientUtils';
+import { emptyFunction } from '../../../../../../Utils';
+import { undoable } from '../../../../../util/UndoManager';
+import ReactLoading from 'react-loading';
+import { Doc, NumListCast, returnEmptyDoclist } from '../../../../../../fields/Doc';
+import { NumCast, StrCast } from '../../../../../../fields/Types';
+import { DefaultStyleProvider } from '../../../../StyleProvider';
+import { DocumentView } from '../../../DocumentView';
+import { Transform } from '../../../../../util/Transform';
+import { Docs, DocumentOptions } from '../../../../../documents/Documents';
+
+interface TemplatesRenderPreviewWindowProps {
+    menu: DocCreatorMenu;
+}
+
+@observer
+export class TemplatesRenderPreviewWindow extends ObservableReactComponent<TemplatesRenderPreviewWindowProps> {
+    @observable private _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 1, repeat: 0 };
+
+    @observable private renderedDocs: Doc[] = [];
+    @observable private renderedDocCollection: Doc | undefined = undefined;
+
+    @observable private loading: boolean = false;
+
+    constructor(props: TemplatesRenderPreviewWindowProps) {
+        super(props);
+        makeObservable(this);
+        this.updateRenderedPreviewCollection();
+    }
+
+    @computed get canMakeDocs() {
+        return this._props.menu._selectedTemplate !== undefined && this._layout !== undefined;
+    }
+
+    @computed get docsToRender() {
+        if (this._props.menu.DEBUG_MODE) {
+            return [1, 2, 3, 4];
+        } else {
+            return NumListCast(this._props.menu._dataViz?.layoutDoc.dataViz_selectedRows);
+        }
+    }
+
+    @computed get rowsCount() {
+        switch (this._layout.type) {
+            case LayoutType.FREEFORM:
+                return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
+            case LayoutType.CAROUSEL3D:
+                return 1.8;
+            default:
+                return 1;
+        }
+    }
+
+    @computed get columnsCount() {
+        switch (this._layout.type) {
+            case LayoutType.FREEFORM:
+                return this._layout.columns ?? 1;
+            case LayoutType.CAROUSEL3D:
+                return 3;
+            default:
+                return 1;
+        }
+    }
+
+    @action updateRenderedPreviewCollection = async () => {
+        this.loading = true;
+        this.renderedDocs = await this._props.menu.createDocsForPreview();
+        this.updateRenderedDocCollection();
+    };
+
+    /**
+     * Updates the preview that shows how all docs will be rendered in the chosen collection type.
+    @type the type of collection the docs should render to (ie. freeform, carousel, card)
+     */
+    updateRenderedDocCollection = () => {
+        if (!this.renderedDocs) return;
+
+        const collectionFactory = (): ((docs: Doc[], options: DocumentOptions) => Doc) => {
+            switch (this._layout.type) {
+                case LayoutType.CAROUSEL3D: return Docs.Create.Carousel3DDocument;
+                case LayoutType.FREEFORM:   return Docs.Create.FreeformDocument;
+                case LayoutType.CARD:       return Docs.Create.CardDeckDocument;
+                case LayoutType.MASONRY:    return Docs.Create.MasonryDocument;
+                case LayoutType.CAROUSEL:   return Docs.Create.CarouselDocument;
+                default:                    return Docs.Create.FreeformDocument;
+            } // prettier-ignore
+        };
+
+        const collection = collectionFactory()(this.renderedDocs, {
+            isDefaultTemplateDoc: true,
+            title: 'title',
+            backgroundColor: 'gray',
+            x: 200,
+            y: 200,
+            _width: 4000,
+            _height: 4000,
+        });
+
+        this.applyLayout(collection, this.renderedDocs);
+
+        this.renderedDocCollection = collection;
+
+        this.loading = false;
+
+        this.forceUpdate();
+    };
+
+    @action updateMargin = (input: string, xOrY: 'x' | 'y') => {
+        this._layout[`${xOrY}Margin`] = Number(input);
+        setTimeout(() => {
+            if (!this.renderedDocCollection || !this.renderedDocs) return;
+            this.applyLayout(this.renderedDocCollection, this.renderedDocs);
+        });
+    };
+
+    @action updateColumns = (input: string) => {
+        this._layout.columns = Number(input);
+        this.updateRenderedDocCollection();
+    };
+
+    applyLayout = (collection: Doc, docs: Doc[]) => {
+        const { horizontalSpan, verticalSpan } = this.previewInfo;
+        collection._height = verticalSpan;
+        collection._width = horizontalSpan;
+        collection.layout_fitWidth = true;
+        collection.freeform_fitContentsToBox = true;
+
+        const columns = (this._layout.columns ?? this.columnsCount) || 1;
+        const xGap = this._layout.xMargin;
+        const yGap = this._layout.yMargin;
+        const startX = -collection._width / 2;
+        const startY = -collection._height / 2;
+        const docHeight = NumCast(docs[0]?._height);
+        const docWidth = NumCast(docs[0]?._width);
+
+        let i = 0;
+        let docsChanged = 0;
+        let curX = startX;
+        let curY = startY;
+
+        while (docsChanged < docs.length) {
+            while (i < columns && docsChanged < docs.length) {
+                docs[docsChanged].x = curX;
+                docs[docsChanged].y = curY;
+                docs[docsChanged].layout_fitWidth = false;
+                curX += docWidth + xGap;
+                ++docsChanged;
+                ++i;
+            }
+            i = 0;
+            curX = startX;
+            curY += docHeight + yGap;
+        }
+    };
+
+    @computed
+    get previewInfo() {
+        const docHeight = NumCast(this.renderedDocs[0]?._height);
+        const docWidth = NumCast(this.renderedDocs[0]?._width);
+        const layout = this._layout;
+        return {
+            docHeight: docHeight,
+            docWidth: docWidth,
+            horizontalSpan: (docWidth + layout.xMargin) * this.columnsCount - layout.xMargin,
+            verticalSpan: (docHeight + layout.yMargin) * this.rowsCount - layout.yMargin,
+        };
+    }
+
+    get layoutConfigOptions() {
+        const optionInput = (icon: string, func: (input: string) => void, def?: number, key?: string, noMargin?: boolean) => {
+            return (
+                <div className="docCreatorMenu-option-container small no-margin" key={key} style={{ marginTop: noMargin ? '0px' : '' }}>
+                    <div className="docCreatorMenu-option-title config layout-config">
+                        <FontAwesomeIcon icon={icon as IconProp} />
+                    </div>
+                    <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
+                </div>
+            );
+        };
+
+        switch (this._layout.type) {
+            case LayoutType.FREEFORM:
+                return (
+                    <div className="docCreatorMenu-configuration-bar">
+                        {optionInput('arrows-up-down', (input: string) => this.updateMargin(input, 'y'), this._layout.xMargin, '2')}
+                        {optionInput('arrows-left-right', (input: string) => this.updateMargin(input, 'x'), this._layout.xMargin, '3')}
+                        {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
+                    </div>
+                );
+            default:
+                break;
+        }
+    }
+
+    layoutPanelWidth = () => this._props.menu._menuDimensions.width - 80;
+    layoutPanelHeight = () => this._props.menu._menuDimensions.height - 105;
+    layoutScreenToLocalXf = () => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1);
+
+    layoutPreviewContents = action(() => {
+        return this.loading ? (
+            <div className="docCreatorMenu-layout-preview-window-wrapper loading">
+                <div className="loading-spinner">
+                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                </div>
+            </div>
+        ) : !this.renderedDocCollection ? null : (
+            <div className="docCreatorMenu-layout-preview-window-wrapper">
+                <DocumentView
+                    Document={this.renderedDocCollection}
+                    isContentActive={emptyFunction}
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={this.layoutPanelWidth}
+                    PanelHeight={this.layoutPanelHeight}
+                    ScreenToLocalTransform={this.layoutScreenToLocalXf}
+                    renderDepth={5}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={this._props.menu._props.addDocTab}
+                    pinToPres={emptyFunction}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    hideDecorations={true}
+                />
+            </div>
+        );
+    });
+
+    selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
+        return (
+            <div className="docCreatorMenu-option-container">
+                <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
+                    <FontAwesomeIcon icon={icon as IconProp} />
+                </div>
+                {manual ? (
+                    <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
+                ) : (
+                    <select className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }}>
+                        {options}
+                    </select>
+                )}
+            </div>
+        );
+    };
+
+    layoutOption = (option: LayoutType, optStyle?: object, specialFunc?: () => void) => {
+        return (
+            <div
+                className="docCreatorMenu-dropdown-option"
+                style={optStyle}
+                onPointerDown={e =>
+                    this._props.menu.setUpButtonClick(e, () => {
+                        specialFunc?.();
+                        runInAction(() => {
+                            this._layout.type = option;
+                            this.updateRenderedDocCollection();
+                        });
+                    })
+                }>
+                {option}
+            </div>
+        );
+    };
+
+    get optionsMenuContents() {
+        const repeatOptions = [0, 1, 2, 3, 4, 5];
+
+        return (
+            <div className="docCreatorMenu-menu-container">
+                <div className="docCreatorMenu-option-container layout">
+                    <div className="docCreatorMenu-dropdown-hoverable">
+                        <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
+                        <div className="docCreatorMenu-dropdown-content">
+                            {this.layoutOption(LayoutType.FREEFORM, undefined, () => {
+                                if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+                            })}
+                            {this.layoutOption(LayoutType.CAROUSEL)}
+                            {this.layoutOption(LayoutType.CAROUSEL3D)}
+                            {this.layoutOption(LayoutType.MASONRY)}
+                        </div>
+                    </div>
+                </div>
+                {this._layout.type ? this.layoutConfigOptions : null}
+                {this.layoutPreviewContents()}
+                {this.selectionBox(
+                    60,
+                    20,
+                    'repeat',
+                    undefined,
+                    repeatOptions.map(num => <option key={num} onPointerDown={() => (this._layout.repeat = num)}>{`${num}x`}</option>)
+                )}
+                <hr className="docCreatorMenu-option-divider" />
+                <div className="docCreatorMenu-general-options-container">
+                    <button
+                        className="docCreatorMenu-save-layout-button"
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    //previous implementation deprecated; return later to add or scrap
+                                    return;
+                                }, 'save layout')
+                            )
+                        }>
+                        <FontAwesomeIcon icon="floppy-disk" />
+                    </button>
+                    <button
+                        className="docCreatorMenu-create-docs-button"
+                        style={{ backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)' }}
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    this.renderedDocCollection && this._props.menu.addRenderedCollectionToMainview(this.renderedDocCollection);
+                                }, 'make docs')
+                            )
+                        }>
+                        <FontAwesomeIcon icon="plus" />
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        return this.optionsMenuContents;
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
new file mode 100644
index 000000000..e2a2a3c1c
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -0,0 +1,179 @@
+import { makeAutoObservable } from 'mobx';
+import { Col } from './DocCreatorMenu';
+import { TemplateFieldType, TemplateLayouts } from './TemplateBackend';
+import { DynamicField } from './TemplateFieldTypes/DynamicField';
+import { FieldSettings, TemplateField, ViewType } from './TemplateFieldTypes/TemplateField';
+import { Conditional } from './Backend/TemplateManager';
+import { TemplateDataField } from './TemplateFieldTypes/DataField';
+
+export class Template {
+    _mainField: DynamicField;
+
+    private _dataFields: TemplateDataField[] = [];
+
+    /**
+     * A Template can be created from a description of its fields (FieldSettings) or from a DynamicField
+     * @param definition definition of template as settings or DynamicField
+     */
+    constructor(definition: FieldSettings | DynamicField) {
+        makeAutoObservable(this);
+        this._mainField = definition instanceof DynamicField ? definition : this.setupMainField(definition);
+    }
+
+    get childFields()        { return this._mainField?.getSubfields ?? []; } // prettier-ignore
+    get allFields()          { return this._mainField?.getAllSubfields ?? []; } // prettier-ignore
+    get contentFields()      { return this.allFields.filter(field => field.isContentField); } // prettier-ignore
+    get doc()                { return this._mainField?.renderedDoc; } // prettier-ignore
+    get title()              { return this._mainField?.getTitle(); } // prettier-ignore
+    get descriptionSummary() { return this.contentFields.map(f => `--- Field #${f.getID} (title: ${f.getTitle()}): ${f.getDescription ?? ''} ---`).join(); } // prettier-ignore
+    get compiledContent()    { return this.contentFields.map(f => `--- Field #${f.getID} (title: ${f.getTitle()}): ${f.getContent() ?? ''} ---`).join(); } // prettier-ignore
+
+    cleanup = () => {
+        //dispose each subfields disposers, etc.
+    };
+
+    clone = (withContent: boolean = false) => {
+        const clone = new Template(this._mainField?.makeClone(undefined, withContent) ?? TemplateLayouts.BasicSettings);
+        this._dataFields.forEach(field => clone.addDataField(field.title));
+        return clone;
+    };
+
+    getRenderedDoc = () => this.doc;
+
+    getFieldByID = (id: number): TemplateField | undefined => this.allFields.filter(field => field.getID === id)[0];
+
+    getFieldByTitle = (title: string) => [...this.allFields, ...this._dataFields].filter(field => field.getTitle() === title)[0];
+
+    setupMainField = (templateInfo: FieldSettings) => TemplateField.CreateField(templateInfo, 1, undefined) as DynamicField;
+
+    assignColToField = (fieldID: number, col: Col) => {
+        const field = this.getFieldByID(fieldID);
+        field?.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT);
+        field?.setTitle(col.title);
+    };
+
+    addDataField = (title: string, content?: string) => this._dataFields.push(new TemplateDataField(title, content));
+
+    removeDataField = (title: string) => (this._dataFields = this._dataFields.filter(field => field.title !== title));
+
+    isValidTemplate = (cols: Col[]) => this.title !== 'template_framework' && this.maxMatches(this.getMatches(cols)) === this.contentFields.length;
+
+    applyConditionalLogicToField = (field: TemplateField | TemplateDataField, logic: Record<string, Conditional[]>) => {
+        if (field instanceof DynamicField) return;
+        const fieldStatements = logic[field.getTitle()];
+        const content = field.getContent();
+        fieldStatements?.forEach(statement => {
+            if (content === statement.condition) {
+                if (statement.target === 'Template') {
+                    if (this._mainField.renderedDoc) {
+                        this._mainField.renderedDoc[statement.attribute] = statement.value;
+                        Object.assign(this._mainField.settings.opts, { [statement.attribute]: statement.value });
+                    }
+                } else {
+                    const targetField = this.getFieldByTitle(statement.target);
+                    if (targetField instanceof TemplateField && targetField.renderedDoc) {
+                        targetField.renderedDoc[statement.attribute] = statement.value;
+                        Object.assign(targetField.settings.opts, { [statement.attribute]: statement.value });
+                    }
+                }
+            }
+        });
+    };
+
+    applyConditionalLogic = (logic: Record<string, Conditional[]>) => {
+        [...this.allFields, ...this._dataFields].forEach(field => this.applyConditionalLogicToField(field, logic));
+        return this.getRenderedDoc();
+    };
+
+    setImageAsBackground(url: string, makeTransparent: boolean = false) {
+        const fieldSettings: FieldSettings = {
+            tl: [-1, -1],
+            br: [1, 1],
+            opts: {},
+            viewType: ViewType.IMG,
+        };
+
+        const field = TemplateField.CreateField(fieldSettings, Math.random() * 100 + 100, this._mainField);
+        field.setContent(url);
+
+        if (makeTransparent) {
+            this.allFields.forEach(aField => {
+                aField.updateDocSetting('backgroundColor', 'transparent');
+                aField.updateDocSetting('borderWidth', '0');
+            });
+        }
+
+        this._mainField.makeBackgroundField(field);
+    }
+
+    /**
+     * This function is just a hack for now to get around weird document icon stuff (specifically it misses the background)
+     */
+    setMatteBackground(makeTransparent: boolean = false) {
+        if (this._mainField.hasBackground) {
+            return;
+        }
+
+        const fieldSettings: FieldSettings = {
+            tl: [-1, -1],
+            br: [1, 1],
+            opts: { backgroundColor: String(this._mainField.renderedDoc!.backgroundColor) },
+            viewType: ViewType.TEXT,
+        };
+
+        const field = TemplateField.CreateField(fieldSettings, Math.random() * 100 + 100, this._mainField);
+
+        makeTransparent &&
+            this.allFields.forEach(aField => {
+                aField.updateDocSetting('backgroundColor', 'transparent');
+                aField.updateDocSetting('borderWidth', '0');
+            });
+
+        this._mainField.makeBackgroundField(field);
+    }
+
+    getMatches = (cols: Col[]): number[][] => {
+        const numFields = this.contentFields.length;
+
+        if (cols.length !== numFields) return [];
+
+        const matches = Array<number[]>(numFields);
+
+        this.contentFields.forEach((field, i) => (matches[i] = field.matches(cols)));
+
+        return matches;
+    };
+
+    maxMatches = (matches: number[][]) => {
+        if (matches.length === 0) return 0;
+
+        const fieldsCt = this.contentFields.length;
+        const used = Array<boolean>(fieldsCt).fill(false);
+        const mt = Array<number>(fieldsCt).fill(-1);
+
+        const augmentingPath = (v: number): boolean => {
+            if (!used[v]) {
+                used[v] = true;
+
+                for (const to of matches[v]) {
+                    if (mt[to] === -1 || augmentingPath(mt[to])) {
+                        mt[to] = v;
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+
+        for (let v = 0; v < fieldsCt; ++v) {
+            used.fill(false);
+            augmentingPath(v);
+        }
+
+        let count: number = 0;
+        for (let i = 0; i < fieldsCt; ++i) {
+            if (mt[i] !== -1) ++count;
+        }
+        return count;
+    };
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
deleted file mode 100644
index 0a5097d4a..000000000
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Doc, FieldType } from "../../../../../fields/Doc";
-import { Col } from "./DocCreatorMenu";
-import { DynamicField } from "./FieldTypes/DynamicField";
-import { Field, FieldSettings, ViewType } from "./FieldTypes/Field";
-import {  } from "./FieldTypes/FieldUtils";
-import { } from "./FieldTypes/StaticField";
-
-export class Template {
-
-    mainField: DynamicField;
-    settings: FieldSettings;
-
-    constructor(templateInfo: FieldSettings) {
-        this.mainField = this.setupMainField(templateInfo);
-        this.settings = templateInfo;
-    }
-
-    get childFields(): Field[] { return this.mainField.getSubfields };
-    get allFields(): Field[] { return this.mainField.getAllSubfields };
-    get contentFields(): Field[] { return this.allFields.filter(field => field.getViewType === ViewType.STATIC) };
-    get doc(){ return this.mainField.renderedDoc(); };
-
-    cloneBase = () => {
-        const clone: Template = new Template(this.settings);
-        clone.allFields.forEach(field => {
-            const matchingField: Field = this.allFields.filter(f => f.getID === field.getID)[0];
-            matchingField.applyAttributes(field);
-        })
-        return clone;
-    }
-
-    getRenderedDoc = () => {
-        const doc: Doc = this.mainField.renderedDoc();
-        this.contentFields.forEach(field => {
-            const title: string = field.getTitle();
-            const val: FieldType = field.getContent() as FieldType;
-            if (!title || !val) return;
-            doc[title] = val;
-        });
-        return doc;
-    }
-
-    getFieldByID = (id: number): Field => {
-        return this.allFields.filter(field => field.getID === id)[0];
-    }
-
-    getFieldByTitle = (title: string) => {
-        return this.allFields.filter(field => field.getTitle() === title)[0];
-    }
-
-    setupMainField = (templateInfo: FieldSettings) => {
-        return new DynamicField(templateInfo, 1);
-    }
-
-    get descriptionSummary(): string {
-        let summary: string = '';
-        this.contentFields.forEach(field => {
-            summary += `--- Field #${field.getID} (title: ${field.getTitle()}): ${field.getDescription ?? ''} ---`;
-        });
-        return summary;
-    }
-
-    get compiledContent(): string {
-        let summary: string = '';
-        this.contentFields.forEach(field => {
-            summary += `--- Field #${field.getID} (title: ${field.getTitle()}): ${field.getContent() ?? ''} ---`;
-        });
-        return summary;
-    }
-
-    renderUpdates = () => {
-        this.allFields.forEach(field => {
-            field.updateRenderedDoc(field.renderedDoc());
-        });
-    };
-
-    resetToBase = () => {
-        this.allFields.forEach(field => {
-            field.updateRenderedDoc();
-        })
-    }
-
-    isValidTemplate = (cols: Col[]) => {
-        const matches: number[][] = this.getMatches(cols);
-        const maxMatches: number = this.maxMatches(matches);
-        return maxMatches === this.contentFields.length;
-    }
-
-    getMatches = (cols: Col[]): number[][] => {
-        const numFields = this.contentFields.length;
-
-        if (cols.length !== numFields) return [];
-
-        const matches: number[][] = Array(numFields)
-            .fill([])
-            .map(() => []);
-
-        this.contentFields.forEach((field, i) => {
-            matches[i] = (field.matches(cols));
-        });
-
-        return matches;
-    }
-
-    maxMatches = (matches: number[][]) => {
-        if (matches.length === 0) return 0;
-
-        const fieldsCt = this.contentFields.length;
-        const used: boolean[] = Array(fieldsCt).fill(false);
-        const mt: number[] = Array(fieldsCt).fill(-1);
-
-        const augmentingPath = (v: number): boolean => {
-            if (used[v]) return false;
-            used[v] = true;
-
-            for (const to of matches[v]) {
-                if (mt[to] === -1 || augmentingPath(mt[to])) {
-                    mt[to] = v;
-                    return true;
-                }
-            }
-            return false;
-        };
-
-        for (let v = 0; v < fieldsCt; ++v) {
-            used.fill(false);
-            augmentingPath(v);
-        }
-
-        let count: number = 0;
-
-        for (let i = 0; i < fieldsCt; ++i) {
-            if (mt[i] !== -1) ++count;
-        }
-
-        return count;
-    };
-
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts
index d3282eda3..26fd3a8fc 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts
@@ -1,10 +1,10 @@
-import { FieldSettings, ViewType } from "./FieldTypes/Field";
-import { } from "./FieldTypes/StaticField";
+import { FieldSettings, ViewType } from './TemplateFieldTypes/TemplateField';
 
 export enum TemplateFieldType {
     TEXT = 'text',
     VISUAL = 'visual',
     UNSET = 'unset',
+    DATA = 'data',
 }
 
 export enum TemplateFieldSize {
@@ -20,6 +20,14 @@ export class TemplateLayouts {
         return Object.values(TemplateLayouts);
     }
 
+    public static BasicSettings: FieldSettings = {
+        title: 'template_framework',
+        tl: [0, 0],
+        br: [400, 700],
+        viewType: ViewType.FREEFORM,
+        opts: {},
+    };
+
     public static FourField001: FieldSettings = {
         title: 'fourfield001',
         tl: [0, 0],
@@ -27,7 +35,7 @@ export class TemplateLayouts {
         viewType: ViewType.FREEFORM,
         opts: {
             backgroundColor: '#C0B887',
-            cornerRounding: .05,
+            _layout_borderRounding: '.05',
             //borderColor: '#6B461F',
             //borderWidth: '12',
         },
@@ -41,9 +49,9 @@ export class TemplateLayouts {
                 description: 'A title field for very short text that contextualizes the content.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: '#F1F0E9',
-                    contentXCentering: 'h-center',
-                    fontBold: true,
+                    text_fontColor: '#F1F0E9',
+                    hCentering: 'h-center',
+                    contentBold: true,
                 },
             },
             {
@@ -54,9 +62,9 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'The main focus of the template; could be an image, long text, etc.',
                 opts: {
-                    cornerRounding: .05,
+                    _layout_borderRounding: '.05',
                     borderColor: '#8F5B25',
-                    borderWidth: '6',
+                    borderWidth: 6,
                     backgroundColor: '#CECAB9',
                 },
             },
@@ -69,8 +77,8 @@ export class TemplateLayouts {
                 description: 'A caption for field #2, very short text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
-                    color: '#F1F0E9',
+                    hCentering: 'h-center',
+                    text_fontColor: '#F1F0E9',
                 },
             },
             {
@@ -81,9 +89,9 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'A medium-sized field for medium/long text.',
                 opts: {
-                    cornerRounding: .05,
+                    _layout_borderRounding: '.05',
                     borderColor: '#8F5B25',
-                    borderWidth: '6',
+                    borderWidth: 6,
                     backgroundColor: '#CECAB9',
                 },
             },
@@ -93,7 +101,7 @@ export class TemplateLayouts {
     public static FourField002: FieldSettings = {
         title: 'fourfield002',
         viewType: ViewType.FREEFORM,
-        tl: [0,0],
+        tl: [0, 0],
         br: [425, 778],
         opts: {
             backgroundColor: '#242425',
@@ -107,10 +115,10 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                 description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
                 opts: {
-                    borderWidth: '8',
+                    borderWidth: 8,
                     borderColor: '#F8E71C',
                     backgroundColor: '#242425',
-                    color: 'white',
+                    text_fontColor: 'white',
                 },
             },
             {
@@ -122,9 +130,9 @@ export class TemplateLayouts {
                 description: 'A tiny field for just a word or two of plain text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
+                    text_fontColor: 'white',
+                    hCentering: 'h-center',
+                    text_transform: 'uppercase',
                 },
             },
             {
@@ -136,9 +144,9 @@ export class TemplateLayouts {
                 description: 'A tiny field for just a word or two of plain text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
+                    text_fontColor: 'white',
+                    hCentering: 'h-center',
+                    text_transform: 'uppercase',
                 },
             },
             {
@@ -149,9 +157,9 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'A medium to large-sized field suitable for longer text that should contextualize field 1.',
                 opts: {
-                    borderWidth: '8',
+                    borderWidth: 8,
                     borderColor: '#F8E71C',
-                    color: 'white',
+                    text_fontColor: 'white',
                     backgroundColor: '#242425',
                 },
             },
@@ -161,7 +169,7 @@ export class TemplateLayouts {
                 br: [-0.525, 0.075],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -170,7 +178,7 @@ export class TemplateLayouts {
                 br: [-0.2175, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -179,7 +187,7 @@ export class TemplateLayouts {
                 br: [0.045, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -188,7 +196,7 @@ export class TemplateLayouts {
                 br: [0.3075, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -197,7 +205,7 @@ export class TemplateLayouts {
                 br: [0.8, 0.075],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
         ],
@@ -266,8 +274,8 @@ export class TemplateLayouts {
     public static FourField004: FieldSettings = {
         title: 'fourfield04',
         viewType: ViewType.FREEFORM,
-        tl: [0,0],
-        br: [414,583],
+        tl: [0, 0],
+        br: [414, 583],
         opts: {
             backgroundColor: '#6CCAF0',
             //borderColor: '#1088C3',
@@ -283,9 +291,9 @@ export class TemplateLayouts {
                 description: 'A tiny field for just a word or two of plain text.',
                 opts: {
                     backgroundColor: '#E2B4F5',
-                    borderWidth: '9',
+                    borderWidth: 9,
                     borderColor: '#9222F1',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -297,9 +305,9 @@ export class TemplateLayouts {
                 description: 'A tiny field for just a word or two of plain text.',
                 opts: {
                     backgroundColor: '#F5B4DD',
-                    borderWidth: '9',
+                    borderWidth: 9,
                     borderColor: '#E260F3',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -310,7 +318,7 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'A large to huge field for visual content that is the main content of the template.',
                 opts: {
-                    borderWidth: '16',
+                    borderWidth: 16,
                     borderColor: '#A2BD77',
                 },
             },
@@ -322,7 +330,7 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                 description: 'A medium to large field for text that describes the visual content above',
                 opts: {
-                    borderWidth: '9',
+                    borderWidth: 9,
                     borderColor: '#F0D601',
                     backgroundColor: '#F3F57D',
                 },
@@ -334,7 +342,7 @@ export class TemplateLayouts {
                 opts: {
                     backgroundColor: 'transparent',
                     borderColor: '#007C0C',
-                    borderWidth: '10',
+                    borderWidth: 10,
                 },
             },
         ],
@@ -343,218 +351,229 @@ export class TemplateLayouts {
     public static FourField005: FieldSettings = {
         title: 'fourfield05',
         viewType: ViewType.FREEFORM,
-        tl: [0,0],
-        br: [400,550],
+        tl: [0, 0],
+        br: [400, 514],
         opts: {
             backgroundColor: '#95A575',
         },
         subfields: [
             {
                 viewType: ViewType.STATIC,
-                tl: [-0.9, -.925],
-                br: [-.075, -.775],
+                tl: [-0.9, -0.925],
+                br: [-0.075, -0.775],
                 types: [TemplateFieldType.TEXT],
                 sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                 description: 'A small text field for a title or word(s) that categorize the rest of the content.',
                 opts: {
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
-                    contentXCentering: "h-center",
+                    borderWidth: 8,
+                    hCentering: 'h-center',
                     backgroundColor: '#B8DC90',
                 },
             },
             {
                 viewType: ViewType.STATIC,
-                tl: [.075, -.925],
-                br: [.9, -.775],
+                tl: [0.075, -0.925],
+                br: [0.9, -0.775],
                 types: [TemplateFieldType.TEXT],
                 sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                 description: 'A small text field for a title that categorizes the rest of the content.',
                 opts: {
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
-                    contentXCentering: "h-center",
+                    borderWidth: 8,
+                    hCentering: 'h-center',
                     backgroundColor: '#B8DC90',
                 },
             },
             {
                 viewType: ViewType.DEC,
-                tl: [-.82, -.4],
-                br: [-.5, -.2],
+                tl: [-0.82, -0.4],
+                br: [-0.5, -0.2],
                 opts: {
                     backgroundColor: '#94B058',
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
+                    borderWidth: 8,
                 },
             },
             {
                 viewType: ViewType.STATIC,
-                tl: [-0.66, -.65],
-                br: [0.66, .25],
+                tl: [-0.66, -0.65],
+                br: [0.66, 0.25],
                 types: [TemplateFieldType.VISUAL],
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                 description: 'A medium to large field in the center of the template, for the main visual content.',
                 opts: {
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
+                    borderWidth: 8,
                     backgroundColor: '#B8DC90',
                 },
             },
             {
                 viewType: ViewType.STATIC,
-                tl: [-.875, .425],
-                br: [0.875, .925],
+                tl: [-0.875, 0.425],
+                br: [0.875, 0.925],
                 types: [TemplateFieldType.TEXT],
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                 description: 'A medium to large field at the bottom of the template, for the main text content.',
                 opts: {
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
-                    contentXCentering: "h-center",
+                    borderWidth: 8,
+                    hCentering: 'h-center',
                     backgroundColor: '#B8DC90',
                 },
             },
             {
                 viewType: ViewType.DEC,
-                tl: [-1.1, -.62],
-                br: [-.9, -.5],
+                tl: [-1.1, -0.62],
+                br: [-0.9, -0.5],
                 opts: {
                     backgroundColor: '#7A9D31',
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
+                    borderWidth: 8,
                 },
             },
             {
                 viewType: ViewType.DEC,
                 tl: [-1.1, 0],
-                br: [-.9, .15],
+                br: [-0.9, 0.15],
                 opts: {
                     backgroundColor: '#94B058',
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
+                    borderWidth: 8,
                 },
             },
             {
                 viewType: ViewType.DEC,
-                tl: [-.93, -.265],
-                br: [-.715, -.125],
+                tl: [-0.93, -0.265],
+                br: [-0.715, -0.125],
                 opts: {
                     backgroundColor: '#728745',
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
+                    borderWidth: 8,
                 },
             },
             {
                 viewType: ViewType.DEC,
-                tl: [.7, -.45],
-                br: [.85, -.3],
+                tl: [0.7, -0.45],
+                br: [0.85, -0.3],
                 opts: {
                     backgroundColor: '#7A9D31',
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
+                    borderWidth: 8,
                 },
             },
             {
                 viewType: ViewType.DEC,
-                tl: [.8, .03],
-                br: [1.2, .33],
+                tl: [0.8, 0.03],
+                br: [1.2, 0.33],
                 opts: {
                     backgroundColor: '#728745',
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
+                    borderWidth: 8,
                 },
             },
             {
                 viewType: ViewType.DEC,
-                tl: [.875, -.13],
-                br: [1.2, .12],
+                tl: [0.875, -0.13],
+                br: [1.2, 0.12],
                 opts: {
                     backgroundColor: '#94B058',
                     borderColor: '#3B4A2C',
-                    borderWidth: '8',
+                    borderWidth: 8,
                 },
             },
-        ]
-    }
+        ],
+    };
 
     public static FourFieldCarousel: FieldSettings = {
         title: 'title_fourfieldcarousel',
         viewType: ViewType.FREEFORM,
-        tl:[0,0],
-        br:[500, 600],
+        tl: [0, 0],
+        br: [500, 600],
         opts: {
-            backgroundColor: '#DDD3A9',
+            backgroundColor: '#D7CBAB',
         },
         subfields: [
             {
                 viewType: ViewType.STATIC,
-                tl: [-0.8, -.9],
-                br: [0.8, -.5],
+                tl: [-0.8, -0.9],
+                br: [0.8, -0.5],
                 types: [TemplateFieldType.TEXT],
                 sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                 description: 'A small text field for a title that categorizes the rest of the content.',
                 opts: {
-                    borderColor: 'yellow',
-                    borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: 'h-center',
                     backgroundColor: 'transparent',
+                    text_transform: 'uppercase',
                 },
             },
             {
                 viewType: ViewType.CAROUSEL3D,
-                tl: [-0.9, -.3],
-                br: [0.9, .9],
+                tl: [-0.9, -0.5],
+                br: [0.9, 0.25],
                 opts: {
-                    borderColor: 'yellow',
-                    borderWidth: '8',
-                    backgroundColor: 'transparent',
+                    borderColor: '#847F69',
+                    borderWidth: 8,
+                    backgroundColor: '#C8BA94',
                 },
                 subfields: [
                     {
                         viewType: ViewType.STATIC,
-                        tl: [-.3, -.6],
-                        br: [.3, .6],
+                        tl: [-0.4, -0.6],
+                        br: [0.4, 0.6],
                         types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
                         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                         description: 'A medium to large field for content that will share central focus with other content in the carousel.',
                         opts: {
-                            borderColor: 'yellow',
-                            borderWidth: '8',
+                            //borderColor: 'yellow',
+                            //borderWidth: '8',
                         },
                     },
                     {
                         viewType: ViewType.STATIC,
-                        tl: [-.3, -.6],
-                        br: [.3, .6],
+                        tl: [-0.4, -0.6],
+                        br: [0.4, 0.6],
                         types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
                         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                         description: 'A medium to large field for content that will share central focus with other content in the carousel.',
                         opts: {
-                            borderColor: 'black',
-                            borderWidth: '8',
+                            //borderColor: 'black',
+                            //borderWidth: '8',
                         },
                     },
                     {
                         viewType: ViewType.STATIC,
-                        tl: [-.3, -.6],
-                        br: [.3, .6],
+                        tl: [-0.4, -0.6],
+                        br: [0.4, 0.6],
                         types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
                         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                         description: 'A medium to large field for content that will share central focus with other content in the carousel.',
                         opts: {
-                            borderColor: 'yellow',
-                            borderWidth: '8',
+                            //borderColor: 'yellow',
+                            //borderWidth: '8',
                         },
                     },
-                ]
+                ],
             },
-        ]
-    }
+            {
+                viewType: ViewType.STATIC,
+                tl: [-0.9, 0.35],
+                br: [0.9, 0.9],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium text field for a description of the content in the carousel.',
+                opts: {
+                    hCentering: 'h-center',
+                    backgroundColor: 'transparent',
+                },
+            },
+        ],
+    };
 
     public static ThreeField001: FieldSettings = {
         title: 'threefield001',
         viewType: ViewType.FREEFORM,
-        tl: [0,0],
+        tl: [0, 0],
         br: [575, 770],
         opts: {
             backgroundColor: '#DDD3A9',
@@ -567,23 +586,23 @@ export class TemplateLayouts {
                 description: 'A medium to large field for visual content that is the central focus.',
                 opts: {
                     borderColor: 'yellow',
-                    borderWidth: '8',
+                    borderWidth: 8,
                     backgroundColor: '#DDD3A9',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
-                    viewType: ViewType.STATIC,
-                    tl: [-1.25, -1.25],
-                    br: [1.25, 1.25],
-                    types: [TemplateFieldType.VISUAL],
-                    sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                    description: 'A medium to large field for visual content that is the central focus.',
-                    opts: {
-                        rotation: -45,
+                        viewType: ViewType.STATIC,
+                        tl: [-1.25, -1.25],
+                        br: [1.25, 1.25],
+                        types: [TemplateFieldType.VISUAL],
+                        sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                        description: 'A medium to large field for visual content that is the central focus.',
+                        opts: {
+                            _rotation: -45,
+                        },
                     },
-                },
-            ]
+                ],
             },
             {
                 viewType: ViewType.STATIC,
@@ -594,7 +613,7 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. A good caption for the image.',
                 opts: {
                     backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -606,7 +625,7 @@ export class TemplateLayouts {
                 description: 'A medium to large text field for a thorough description of the image. ',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
+                    text_fontColor: 'white',
                 },
             },
             {
@@ -615,18 +634,18 @@ export class TemplateLayouts {
                 br: [1.8, -0.66],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
                         viewType: ViewType.DEC,
-                        tl: [-1, -.7],
-                        br: [1, -.625],
+                        tl: [-1, -0.7],
+                        br: [1, -0.625],
                         opts: {
                             backgroundColor: 'yellow',
                         },
                     },
-                ]
+                ],
             },
             {
                 viewType: ViewType.FREEFORM,
@@ -634,18 +653,18 @@ export class TemplateLayouts {
                 br: [-0.2, -0.66],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 135,
+                    _rotation: 135,
                 },
                 subfields: [
                     {
                         viewType: ViewType.DEC,
-                        tl: [-1, -.7],
-                        br: [1, -.625],
+                        tl: [-1, -0.7],
+                        br: [1, -0.625],
                         opts: {
                             backgroundColor: 'yellow',
                         },
                     },
-                ]
+                ],
             },
             {
                 viewType: ViewType.FREEFORM,
@@ -653,18 +672,18 @@ export class TemplateLayouts {
                 br: [1.66, 1.25],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 135,
+                    _rotation: 135,
                 },
                 subfields: [
                     {
                         viewType: ViewType.DEC,
-                        tl: [-1, -.7],
-                        br: [1, -.625],
+                        tl: [-1, -0.7],
+                        br: [1, -0.625],
                         opts: {
                             backgroundColor: 'yellow',
                         },
                     },
-                ]
+                ],
             },
             {
                 viewType: ViewType.FREEFORM,
@@ -672,18 +691,18 @@ export class TemplateLayouts {
                 br: [-0.33, 1.25],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
                         viewType: ViewType.DEC,
-                        tl: [-1, -.7],
-                        br: [1, -.625],
+                        tl: [-1, -0.7],
+                        br: [1, -0.625],
                         opts: {
                             backgroundColor: 'yellow',
                         },
                     },
-                ]
+                ],
             },
         ],
     };
@@ -691,7 +710,7 @@ export class TemplateLayouts {
     public static ThreeField002: FieldSettings = {
         title: 'threefield002',
         viewType: ViewType.FREEFORM,
-        tl: [0,0],
+        tl: [0, 0],
         br: [477, 662],
         opts: {
             backgroundColor: '#9E9C95',
@@ -705,7 +724,7 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'A medium to large visual field for the main content of the template',
                 opts: {
-                    borderWidth: '15',
+                    borderWidth: 15,
                     borderColor: '#E0E0DA',
                 },
             },
@@ -718,10 +737,10 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: '#AF0D0D',
-                    fontTransform: 'uppercase',
-                    fontBold: true,
-                    contentXCentering: 'h-left',
+                    text_fontColor: '#AF0D0D',
+                    text_transform: 'uppercase',
+                    contentBold: true,
+                    hCentering: 'h-left',
                 },
             },
             {
@@ -733,8 +752,8 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. The content should contextualize field 2.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'black',
-                    contentXCentering: 'h-right',
+                    text_fontColor: 'black',
+                    hCentering: 'h-right',
                 },
             },
             {
@@ -747,6 +766,4 @@ export class TemplateLayouts {
             },
         ],
     };
-}
-
-
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DataField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DataField.ts
new file mode 100644
index 000000000..6b4086483
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DataField.ts
@@ -0,0 +1,20 @@
+
+import { ViewType } from "./TemplateField";
+
+export class TemplateDataField {
+
+    viewType: ViewType = ViewType.NONE;
+
+    title: string = '';
+    content: string | undefined;
+
+    constructor(title: string, content?: string) {
+        this.title = title;
+        this.content = content;
+    }
+
+    setContent(content: string, viewType?: ViewType) { this.content = content }
+    getContent() { return this.content }
+
+    getTitle() { return this.title }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DecorationField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DecorationField.ts
new file mode 100644
index 000000000..98a9dc7a6
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DecorationField.ts
@@ -0,0 +1,3 @@
+import { DynamicField } from './DynamicField';
+
+export class DecorationField extends DynamicField {}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
new file mode 100644
index 000000000..b9042258b
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
@@ -0,0 +1,131 @@
+import { IDisposer } from 'mobx-utils';
+import { Doc } from '../../../../../../fields/Doc';
+import { DocData } from '../../../../../../fields/DocSymbols';
+import { List } from '../../../../../../fields/List';
+import { NumCast } from '../../../../../../fields/Types';
+import { Docs } from '../../../../../documents/Documents';
+import { DocumentType } from '../../../../../documents/DocumentTypes';
+import { FieldSettings, TemplateField, ViewType } from './TemplateField';
+
+export class DynamicField extends TemplateField {
+    protected _disposers: { [name: string]: IDisposer } = {};
+    protected _subfields: TemplateField[] = [];
+    protected backgroundField: TemplateField | undefined;
+
+    get getSubfields() {
+        return this._subfields;
+    }
+    get getAllSubfields(): TemplateField[] {
+        return this.getSubfields.flatMap(field => [field, ...((field as DynamicField).getAllSubfields ?? [])]);
+    }
+
+    get hasBackground() {
+        return this.backgroundField !== undefined;
+    }
+
+    handleFieldUpdate = (newDocsList: Doc[]) => {
+        const currRenderedDocs = new Set(this.getSubfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!));
+        newDocsList.forEach(doc => !currRenderedDocs.has(doc) && this.addFieldFromDoc(doc));
+        currRenderedDocs.forEach(doc => {
+            if (!newDocsList.includes(doc)) {
+                this._subfields.forEach(field => field.renderedDoc === doc && this.removeField(field));
+            }
+        });
+    };
+
+    addFieldFromDoc = (doc: Doc) => {
+        const par = this._renderDoc;
+        const settings: FieldSettings = {
+            tl: [Number(doc._x) / NumCast(par?._width, 1), Number(doc?._y) / NumCast(par?._height, 1)],
+            br: [(Number(doc._x) + Number(doc._width)) / NumCast(par?._width, 1), (Number(doc._y) + Number(doc._height)) / NumCast(par?._height, 1)],
+            viewType: doc.type === DocumentType.COL ? ViewType.FREEFORM : ViewType.STATIC,
+            opts: {},
+        };
+
+        this._subfields.push(TemplateField.CreateField(settings, this._subfields.length, this));
+    };
+
+    addField = (field: TemplateField, layer: number = 0) => {
+        if (!this._subfields.includes(field)) {
+            this._subfields.splice(layer, 0, field);
+        }
+    };
+
+    dispose = () => Object.values(this._disposers).forEach(disposer => disposer?.());
+
+    removeField = (field: TemplateField) => {
+        // field.renderedDoc && this._renderDoc && Doc.RemoveDocFromList(this._renderDoc, undefined, field.renderedDoc);
+        this._subfields.splice(this._subfields.indexOf(field), 1);
+        (field as DynamicField).dispose?.();
+    };
+
+    // implement Field's abstract method for replacing a subfield with a new one
+    exchangeFields(newField: TemplateField, oldField: TemplateField) {
+        this._subfields.splice(this._subfields.indexOf(oldField), 1, newField);
+        this.refreshRenderedDoc();
+    }
+
+    get isContentField(): boolean {
+        return false;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setContent(content: string, type: ViewType) {}
+
+    getContent = () => '';
+
+    addChildToDocument = (doc: Doc) => this._renderDoc && Doc.SetContainer(doc, this._renderDoc);
+
+    makeBackgroundField = (field: TemplateField) => {
+        if (this.backgroundField && this.backgroundField !== field) {
+            this.removeField(this.backgroundField);
+            this.backgroundField = undefined;
+        }
+        if (field && field !== this.backgroundField) {
+            this.addField(field);
+            this.backgroundField = field;
+        }
+        this.refreshRenderedDoc();
+    }
+
+    matches = (): Array<number> => [];
+
+    makeClone(parent?: DynamicField, withContent: boolean = false) {
+        const dynClone = super.makeClone(parent) as DynamicField;
+        dynClone._subfields = this.getSubfields.map(field => {
+            if (field === this.backgroundField) {
+                const backgroundField: TemplateField = field.makeClone(dynClone, true);
+                dynClone.makeBackgroundField(backgroundField);
+                return backgroundField;
+            } else {
+                return field.makeClone(dynClone, withContent)
+            }
+        });
+        if (dynClone._renderDoc) {
+            dynClone._renderDoc[DocData].data = new List<Doc>(dynClone.getSubfields.filter(sub => sub.renderedDoc).map(sub => sub.renderedDoc!));
+        }
+        return dynClone;
+    }
+
+    initRenderDoc = (settings: FieldSettings) => {
+        //this._disposers.fieldList = reaction(() => DocListCast(this._renderDoc?.[Doc.LayoutFieldKey(this._renderDoc)]), this.handleFieldUpdate);
+        this._subfields = settings.subfields?.map((fieldSettings, index) => {return TemplateField.CreateField(fieldSettings, index, this)}) || [];
+        const renderedSubfields = this._subfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!);
+        settings.opts.title = settings.title;
+        this._renderDoc = (() => { switch (settings.viewType) {
+            case ViewType.CAROUSEL3D: return Docs.Create.Carousel3DDocument(renderedSubfields, settings.opts);
+            case ViewType.FREEFORM:   
+            default:                  return Docs.Create.FreeformDocument(renderedSubfields, settings.opts);
+        }})(); // prettier-ignore
+        return this;
+    };
+
+    refreshRenderedDoc = () => {
+        const renderedSubfields = this._subfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!);
+        this._renderDoc = (() => { switch (this.settings.viewType) {
+            case ViewType.CAROUSEL3D: return Docs.Create.Carousel3DDocument(renderedSubfields, this.settings.opts);
+            case ViewType.FREEFORM:   
+            default:                  return Docs.Create.FreeformDocument(renderedSubfields, this.settings.opts);
+        }})(); 
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
new file mode 100644
index 000000000..569c43af4
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
@@ -0,0 +1,62 @@
+import { FieldResult } from '../../../../../../fields/Doc';
+import { DocData } from '../../../../../../fields/DocSymbols';
+import { RichTextField } from '../../../../../../fields/RichTextField';
+import { ImageField } from '../../../../../../fields/URLField';
+import { Docs } from '../../../../../documents/Documents';
+import { FieldSettings, TemplateField, ViewType } from './TemplateField';
+import { TemplateFieldUtils } from './TemplateFieldUtils';
+
+export abstract class StaticContentField extends TemplateField {
+    protected _content: string = '';
+
+    getContent = () => this._content ?? 'unset';
+    get isContentField(): boolean {
+        return true;
+    }
+    protected setDataContent(viewType: ViewType, fieldKey: string, data: FieldResult, content: string, type?: ViewType) {
+        super.setContent(content, type);
+
+        if (type === viewType || type === undefined) {
+            this._content = content;
+            this._renderDoc && (this._renderDoc[DocData][fieldKey] = data);
+        } else {
+            this.changeFieldType(type).setContent(content, type);
+        }
+    }
+}
+
+export class ImageTemplateField extends StaticContentField {
+    setContent(url: string, type?: ViewType) {
+        this.setDataContent(ViewType.IMG, 'data', new ImageField(url), url, type);
+        this._renderDoc!['backgroundColor'] = 'white';
+    }
+
+    initRenderDoc(settings: FieldSettings) {
+        settings.opts.title = settings.title ?? '';
+        settings.opts._layout_fitWidth = false;
+        this._renderDoc = Docs.Create.ImageDocument(this._content, settings.opts);
+        return this;
+    }
+
+    updateDocSetting(setting: string, newVal: string) {
+        if (this._renderDoc) this._renderDoc[setting] = newVal;
+        if (setting !== 'backgroundColor') {
+            const settings: {[s: string]: string } = {[setting]: newVal}
+            Object.assign(this.settings.opts, settings);
+        }
+    }
+}
+
+export class TextTemplateField extends StaticContentField {
+    setContent(text: string, type?: ViewType) {
+        const fontSize: number = TemplateFieldUtils.calculateFontSize(this._dimensions?.width ?? 10, this._dimensions?.height ?? 10, text, true);
+        this.setDataContent(ViewType.TEXT, 'text', RichTextField.textToRtf(text, undefined, {fontSize: fontSize}), text, type);
+    }
+
+    initRenderDoc(settings: FieldSettings) {
+        settings.opts.title = settings.title ?? '';
+        settings.opts.text_fontSize = TemplateFieldUtils.calculateFontSize(this._dimensions?.width ?? 10, this._dimensions?.height ?? 10, '', true) + '';
+        this._renderDoc = Docs.Create.TextDocument(this._content, settings.opts);
+        return this;
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
new file mode 100644
index 000000000..091ef834a
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
@@ -0,0 +1,172 @@
+/* eslint-disable no-use-before-define */
+import { Doc } from '../../../../../../fields/Doc';
+import { DocumentOptions } from '../../../../../documents/Documents';
+import { Col } from '../DocCreatorMenu';
+import { Template } from '../Template';
+import { TemplateFieldSize, TemplateFieldType } from '../TemplateBackend';
+
+export abstract class TemplateField {
+    /**
+     * Creates and initializes a new TemplateField based on the settings and parameters
+     *
+     * implemented in FieldUtils and assigned in main (to avoid import cycles)
+     *
+     * @param settings - specification of the field type and other parameters
+     * @param index -
+     * @param parent - TemplateField that contains the new field
+     * @param sameId -
+     * @returns TemplateField
+     */
+    static CreateField: (settings: FieldSettings, index: number, parent: TemplateField | undefined, sameId?: boolean) => TemplateField;
+
+    protected _parent?: TemplateField;
+    protected _id: number;
+    protected _title: string = '';
+    protected _settings: FieldSettings;
+    protected _renderDoc: Doc | undefined;
+    protected _dimensions: FieldDimensions | undefined;
+
+    constructor(settings: FieldSettings, id: number = 1, parent?: TemplateField) {
+        this._id = id;
+        this._parent = parent;
+        this._settings = settings;
+        this._title = settings.title ?? '';
+        this._dimensions = this.getLocalDimensions(this._settings, this._parent?.getDimensions);
+        this.applyBasicOpts(this._dimensions, settings);
+        return this;
+    }
+
+    get renderedDoc() {
+        return this._renderDoc;
+    }
+    get getDimensions() {
+        return this._dimensions;
+    }
+    get getID() {
+        return this._id;
+    }
+    get getDescription(): string {
+        return this._settings?.description ?? '';
+    }
+    get viewType(): ViewType | undefined {
+        return this._settings?.viewType;
+    }
+
+    get settings(): FieldSettings {
+        return this._settings;
+    }
+
+    abstract get isContentField(): boolean;
+    abstract initRenderDoc(settings: FieldSettings): TemplateField;
+    abstract getContent(): string;
+
+    setContent(content: string, type?: ViewType) {
+        if (type) this._settings.viewType = type;
+    }
+
+    setTitle = (title: string) => {
+        this._title = title;
+        this.settings.title = title;
+        if (this._renderDoc) this._renderDoc.title = title;
+    };
+    getTitle = () => this._title;
+
+    updateDocSetting(setting: string, newVal: string) {
+        if (this._renderDoc) this._renderDoc[setting] = newVal;
+        const settings: { [s: string]: string } = { [setting]: newVal };
+        Object.assign(this.settings.opts, settings);
+    }
+
+    makeClone(parent?: TemplateField, withContent: boolean = false) {
+        const settings: FieldSettings = structuredClone(this._settings);
+        const cloned = TemplateField.CreateField(settings, this._id, parent, true); // create a value for this.Document/subfields that we want to ignore
+        cloned.renderedDoc!.width = this.renderedDoc!.width;
+        cloned.renderedDoc!.height = this.renderedDoc!.height;
+        cloned.renderedDoc!.x = this.renderedDoc!.x;
+        cloned.renderedDoc!.y = this.renderedDoc!.y;
+        cloned.renderedDoc!.backgroundColor = this.renderedDoc!.backgroundColor;
+        cloned.setTitle(this._title);
+        cloned._dimensions = this._dimensions;
+        withContent && cloned.setContent(this.getContent());
+        return cloned;
+    }
+
+    exchangeFields(newField: TemplateField, oldField: TemplateField) {
+        throw new Error('Only DynamicField can exchange fields.' + newField._title + ' ' + oldField._title);
+    }
+
+    changeFieldType = (newType: ViewType): TemplateField => {
+        this._settings.viewType = newType;
+        const newField = TemplateField.CreateField(this._settings, this._id, this._parent, true);
+        this._parent?.exchangeFields(newField, this);
+        return newField;
+    };
+
+    matches = (cols: Col[]): number[] => {
+        const colMatchesField = (col: Col) => (this._settings?.sizes?.some(size => col.sizes?.includes(size)) && this._settings.types?.includes(col.type)) ?? false;
+
+        const matches: Array<number> = [];
+
+        cols.forEach((col, v) => {
+            if (colMatchesField(col)) {
+                matches.push(v);
+            }
+        });
+
+        return matches;
+    };
+
+    private getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions?: FieldDimensions): FieldDimensions => {
+        if (!parentDimensions) {
+            return { width: coords.br[0] - coords.tl[0], height: coords.br[1] - coords.tl[1], coord: { x: coords.tl[0], y: coords.tl[1] } };
+        }
+        const l = (coords.tl[0] * parentDimensions.width) / 2;
+        const t = coords.tl[1] * parentDimensions.height / 2; //prettier-ignore
+        const r = (coords.br[0] * parentDimensions.width) / 2;
+        const b = coords.br[1] * parentDimensions.height / 2; //prettier-ignore
+        return { width: r-l, height: b-t, coord: { x: l, y: t } }; //prettier-ignore
+    };
+
+    private applyBasicOpts = (dimensions: FieldDimensions, settings: FieldSettings | undefined) => {
+        const opts: DocumentOptions = settings?.opts ?? {};
+        opts.isDefaultTemplateDoc ??= true;
+        opts._layout_hideScroll ??= true;
+        opts.x ??= dimensions.coord.x;
+        opts.y ??= dimensions.coord.y;
+        opts._height ??= dimensions.height;
+        opts._width ??= dimensions.width;
+        opts._nativeWidth ??= dimensions.width;
+        opts._nativeHeight ??= dimensions.height;
+        opts._layout_nativeDimEditable ??= true;
+        opts.layout_boxShadow = 'none';
+    };
+}
+
+export type FieldSettings = {
+    tl: [number, number];
+    br: [number, number];
+    opts: DocumentOptions;
+    types?: TemplateFieldType[];
+    sizes?: TemplateFieldSize[];
+    title?: string;
+    viewType: ViewType;
+    template?: Template;
+    subfields?: FieldSettings[];
+    description?: string;
+};
+
+export enum ViewType {
+    CAROUSEL3D = 'carousel3d',
+    FREEFORM = 'freeform',
+    STATIC = 'static',
+    DEC = 'decoration',
+    IMG = 'image',
+    TEXT = 'text',
+    NONE = 'none',
+}
+
+export type FieldDimensions = {
+    width: number;
+    height: number;
+    coord: { x: number; y: number };
+};
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateFieldUtils.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateFieldUtils.ts
new file mode 100644
index 000000000..b0b531b57
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateFieldUtils.ts
@@ -0,0 +1,71 @@
+import { DecorationField } from './DecorationField';
+import { DynamicField } from './DynamicField';
+import { ImageTemplateField, TextTemplateField } from './StaticContentField';
+import { FieldSettings, TemplateField, ViewType } from './TemplateField';
+
+export class TemplateFieldUtils {
+    /**
+     * Creates and initializes a new TemplateField based on the settings and parameters
+     *
+     * implements Field.initField ... see main.tsx
+     *
+     * @param settings - specification of the field type and other parameters
+     * @param index -
+     * @param parent - optional TemplateField that contains the new field
+     * @param sameId -
+     * @returns TemplateField
+     */
+    public static CreateField = (settings: FieldSettings, index: number, parent?: TemplateField, sameId: boolean = false): TemplateField =>
+        ((...args) => {
+            switch (settings?.viewType) {
+                case ViewType.FREEFORM:
+                case ViewType.CAROUSEL3D: return new DynamicField(...args).initRenderDoc(settings);
+                case ViewType.IMG:        return new ImageTemplateField(...args).initRenderDoc(settings);
+                case ViewType.TEXT:       return new TextTemplateField(...args).initRenderDoc(settings);
+                case ViewType.DEC:        return new DecorationField(...args).initRenderDoc(settings);
+                default:                  return new TextTemplateField(...args).initRenderDoc(settings);
+            } // prettier-ignore
+        })(settings, sameId ? index : parent ? Number(`${parent.getID}${index}`) : 1, parent);
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
+        const words: string[] = text.split(/\s+/).filter(Boolean);
+
+        let currFontSize = 1;
+        let rowsCount = 1;
+        let currTextHeight = currFontSize * rowsCount * 2;
+
+        while (currTextHeight <= contHeight) {
+            let wordIndex = 0;
+            let currentRowWidth = 0;
+            let wordsInCurrRow = 0;
+            rowsCount = 1;
+
+            while (wordIndex < words.length) {
+                const word = words[wordIndex];
+                const wordWidth = word.length * currFontSize * 0.7;
+
+                if (currentRowWidth + wordWidth <= contWidth) {
+                    currentRowWidth += wordWidth;
+                    ++wordsInCurrRow;
+                } else {
+                    if (words.length !== 1 && words.length > wordsInCurrRow) {
+                        rowsCount++;
+                        currentRowWidth = wordWidth;
+                        wordsInCurrRow = 1;
+                    } else {
+                        break;
+                    }
+                }
+
+                wordIndex++;
+            }
+
+            currTextHeight = rowsCount * currFontSize * 2;
+
+            currFontSize += 1;
+        }
+
+        return currFontSize - 1;
+    };
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
deleted file mode 100644
index 50ae4d72a..000000000
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Col } from "./DocCreatorMenu";
-import { FieldSettings } from "./FieldTypes/Field";
-import { Template } from "./Template";
-
-export class TemplateManager {
-
-    templates: Template[] = [];
-
-    constructor(templateSettings: FieldSettings[]) {
-        this.templates = this.initializeTemplates(templateSettings);
-    }
-
-    initializeTemplates = (templateSettings: FieldSettings[]): Template[] => {
-        const initializedTemplates: Template[] = [];
-        templateSettings.forEach(settings => initializedTemplates.push(new Template(settings)));
-        return initializedTemplates;
-    }
-
-    getValidTemplates = (cols: Col[]): Template[] => {
-        return this.templates.filter(template => template.isValidTemplate(cols));
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index ad2731109..9e0868cd5 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -100,7 +100,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         return this._props.docView?.()?.screenToViewTransform().Scale || 1;
     }
     @computed get rowHeight() {
-        return (this.viewScale * this._tableHeight) / this._tableDataIds.length;
+        return (this.viewScale * this._tableHeight) / (this._tableDataIds.length + 1); // add 1 for header row
     }
     @computed get startID() {
         return this.rowHeight ? Math.max(Math.floor(this._scrollTop / this.rowHeight) - 1, 0) : 0;
@@ -400,12 +400,12 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                     this._tableHeight = r?.getBoundingClientRect().height ?? 0;
                                 }
                             })}>
-                            <div style={{ height: this.startID * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
                             <thead>
+                                <tr style={{ height: this.startID * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
                                 <tr>
-                                    {this.columns.map(col => (
+                                    {this.columns.map((col, i) => (
                                         <th
-                                            key={this.columns.indexOf(col)}
+                                            key={i}
                                             style={{
                                                 color:
                                                     this._props.axes.slice().reverse().lastElement() === col
@@ -440,7 +440,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                             <tbody>
                                 {this._tableDataIds
                                     .filter((rowId, i) => this.startID - 2 <= i && i <= this.endID + 2)
-                                    ?.map(rowId => (
+                                    .map(rowId => (
                                         <tr
                                             key={rowId}
                                             className={`tableBox-row ${this.columns[0]}`}
@@ -456,22 +456,22 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                             : '',
                                                 border: rowId === this._props.specHighlightedRow ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                                             }}>
-                                            {this.columns.map(col => {
+                                            {this.columns.map((col, i) => {
                                                 let colSelected = false;
                                                 if (this._props.axes.length > 2) colSelected = this._props.axes[0] === col || this._props.axes[1] === col || this._props.axes[2] === col;
                                                 else if (this._props.axes.length > 1) colSelected = this._props.axes[0] === col || this._props.axes[1] === col;
                                                 else if (this._props.axes.length > 0) colSelected = this._props.axes[0] === col;
                                                 if (this._props.titleCol === col) colSelected = true;
                                                 return (
-                                                    <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>
+                                                    <td key={i} style={{ border: (colSelected ? '3' : '1') + 'px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>
                                                         <div className="tableBox-cell">{this._props.records[rowId][col] as string | number}</div>
                                                     </td>
                                                 );
                                             })}
                                         </tr>
                                     ))}
+                                <tr style={{ display: this._tableDataIds.length - this.endID ? undefined : 'none', height: (this._tableDataIds.length - this.endID) * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
                             </tbody>
-                            <div style={{ height: (this._tableDataIds.length - this.endID) * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
                         </table>
                     </div>
                 </div>
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index c35a329c9..d30f00829 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -38,7 +38,6 @@ export class DocButtonState {
     // eslint-disable-next-line no-use-before-define
     public static _instance: DocButtonState | undefined;
     public static get Instance() {
-        // eslint-disable-next-line no-return-assign
         return DocButtonState._instance ?? (DocButtonState._instance = new DocButtonState());
     }
     constructor() {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f9c21451e..9b73cc073 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -744,7 +744,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
     @computed get viewBoxContents() {
         TraceMobx();
         const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString;
-        const noBackground = this.Document.isGroup && !this._componentView?.isUnstyledView?.() && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent');
+        const noBackground = Doc.IsFreeformGroup(this.Document) && !this._componentView?.isUnstyledView?.() && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent');
         return (
             <>
                 <div
@@ -1389,28 +1389,36 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         custom && DocUtils.makeCustomViewClicked(this.Document, Docs.Create.StackingDocument, layout, undefined);
     }, 'set custom view');
 
-    public static setDefaultTemplate(checkResult?: boolean) {
-        if (checkResult) {
-            return Doc.UserDoc().defaultTextLayout;
+    private static getTemplate(view: DocumentView | undefined) {
+        if (view) {
+            if (!view.layoutDoc.isTemplateDoc) {
+                MakeTemplate(view.Document);
+                Doc.AddDocToList(Doc.UserDoc(), 'template_user', view.Document);
+                Doc.AddDocToList(DocListCast(Doc.MyTools?.data)[1], 'data', makeUserTemplateButtonOrImage(view.Document));
+                DocCast(Doc.UserDoc().template_user) && view.Document && Doc.AddDocToList(DocCast(Doc.UserDoc().template_user)!, 'data', view.Document);
+                return view.Document;
+            }
+            return DocCast(Doc.LayoutField(view.Document)) ?? view.Document;
         }
+    }
+    public static setDefaultTemplate(checkResult?: boolean) {
+        if (checkResult) return Doc.UserDoc().defaultTextLayout;
         const view = DocumentView.Selected()[0]?._props.renderDepth > 0 ? DocumentView.Selected()[0] : undefined;
         undoable(() => {
-            let tempDoc: Opt<Doc>;
-            if (view) {
-                if (!view.layoutDoc.isTemplateDoc) {
-                    tempDoc = view.Document;
-                    MakeTemplate(tempDoc);
-                    Doc.AddDocToList(Doc.UserDoc(), 'template_user', tempDoc);
-                    Doc.AddDocToList(DocListCast(Doc.MyTools?.data)[1], 'data', makeUserTemplateButtonOrImage(tempDoc));
-                    DocCast(Doc.UserDoc().template_user) && tempDoc && Doc.AddDocToList(DocCast(Doc.UserDoc().template_user)!, 'data', tempDoc);
-                } else {
-                    tempDoc = DocCast(Doc.LayoutField(view.Document));
-                }
-            }
+            const tempDoc = DocumentView.getTemplate(view);
             Doc.UserDoc().defaultTextLayout = tempDoc ? new PrefetchProxy(tempDoc) : undefined;
         }, 'set default template')();
         return undefined;
     }
+    public static setDefaultImageTemplate(checkResult?: boolean) {
+        if (checkResult) return Doc.UserDoc().defaultImageLayout;
+        const view = DocumentView.Selected()[0]?._props.renderDepth > 0 || DocumentView.Selected()[0]?.Document.isTemplateDoc ? DocumentView.Selected()[0] : undefined;
+        undoable(() => {
+            const tempDoc = DocumentView.getTemplate(view);
+            Doc.UserDoc().defaultImageLayout = tempDoc ? new PrefetchProxy(tempDoc) : undefined;
+        }, 'set default image template')();
+        return undefined;
+    }
 
     /**
      * This switches between the current view of a Doc and a specified alternate layout view.
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 3cacb6692..e0ab04692 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -6,7 +6,7 @@ import { TraceMobx } from '../../../fields/util';
 import { DocUtils } from '../../documents/DocUtils';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
-import { undoBatch } from '../../util/UndoManager';
+import { undoBatch, UndoManager } from '../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../DocComponent';
 import { StyleProp } from '../StyleProp';
 import { DocumentView } from './DocumentView';
@@ -14,6 +14,7 @@ import './EquationBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import EquationEditor from './formattedText/EquationEditor';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
+import { Doc } from '../../../fields/Doc';
 
 @observer
 export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -21,6 +22,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return FieldView.LayoutString(EquationBox, fieldKey);
     }
     _ref: React.RefObject<EquationEditor> = React.createRef();
+    _liveTextUndo: UndoManager.Batch | undefined; // captured undo batch when typing a new text note into a collection
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -29,12 +31,17 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        if (DocumentView.SelectOnLoad === this.Document && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.()))) {
+        if (DocumentView.SelectOnLoad === this.rootDoc && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.()))) {
+            this._liveTextUndo = FormattedTextBox.LiveTextUndo;
+            FormattedTextBox.LiveTextUndo = undefined;
             this._props.select(false);
 
+            this.dataDoc[Doc.LayoutDataKey(this.Document)] = FormattedTextBox.SelectOnLoadChar ?? '';
+
             this._ref.current?.mathField.focus();
-            this.dataDoc.text === 'x' && this._ref.current?.mathField.select();
+            this.dataDoc[Doc.LayoutDataKey(this.Document)] === 'x' && this._ref.current?.mathField.select();
             DocumentView.SetSelectOnLoad(undefined);
+            FormattedTextBox.SelectOnLoadChar = '';
         }
         reaction(
             () => this._props.isSelected(),
@@ -53,7 +60,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     keyPressed = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
-            const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc.text) : '', {
+            const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc[Doc.LayoutDataKey(this.Document)]) : '', {
                 title: '# math',
                 _width: NumCast(this.layoutDoc._width),
                 _height: NumCast(this.layoutDoc._height),
@@ -70,9 +77,10 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             e.stopPropagation();
         }
         if (e.key === 'Tab') {
+            const target = this.Document.isTemplateDoc ? this.rootDoc : this.Document;
             const graph = Docs.Create.FunctionPlotDocument([this.Document], {
-                x: NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width),
-                y: NumCast(this.layoutDoc.y),
+                x: NumCast(target.x) + NumCast(this.layoutDoc._width),
+                y: NumCast(target.y),
                 _width: 400,
                 _height: 300,
                 backgroundColor: 'white',
@@ -82,11 +90,11 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             link && this._props.addDocument?.(link);
             e.stopPropagation();
         }
-        if (e.key === 'Backspace' && !this.dataDoc.text) this._props.removeDocument?.(this.Document);
+        if (e.key === 'Backspace' && !this.dataDoc[Doc.LayoutDataKey(this.Document)]) this._props.removeDocument?.(this.Document);
     };
     @undoBatch
     onChange = (str: string) => {
-        this.dataDoc.text = str;
+        this.dataDoc[Doc.LayoutDataKey(this.Document)] = str;
     };
 
     updateSize = (mathSpan: HTMLSpanElement) => {
@@ -103,6 +111,10 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
         this.layoutDoc._width = mathWidth * nScale;
         this.layoutDoc._height = mathHeight * nScale;
+        if (this.layoutDoc._nativeWidth) {
+            this.layoutDoc._nativeWidth = mathWidth;
+            this.layoutDoc._nativeHeight = mathHeight;
+        }
     };
     render() {
         TraceMobx();
@@ -113,9 +125,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 className="equationBox-cont"
                 onKeyDown={e => e.stopPropagation()}
                 onPointerDown={e => !e.ctrlKey && e.stopPropagation()}
-                onBlur={() => {
-                    FormattedTextBox.LiveTextUndo?.end();
-                }}
+                onBlur={() => this._liveTextUndo?.end()}
                 style={{
                     transform: `scale(${scale})`,
                     minWidth: `${100 / scale}%`,
@@ -128,7 +138,14 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     paddingTop: NumCast(this.layoutDoc.yMargin),
                     paddingBottom: NumCast(this.layoutDoc.yMargin),
                 }}>
-                <EquationEditor ref={this._ref} value={StrCast(this.dataDoc.text, '')} spaceBehavesLikeTab 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[Doc.LayoutDataKey(this.Document)], '')}
+                    spaceBehavesLikeTab
+                    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/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 79a218e45..1e16bbfc9 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -113,6 +113,28 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._props.setContentViewBox?.(this);
     }
 
+    @computed get oupaintOriginalSize(): { width: number; height: number } {
+        return {
+            width: NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']),
+            height: NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']),
+        };
+    }
+    set outpaintOriginalSize(prop: { width: number; height: number } | undefined) {
+        this.Document[this.fieldKey + '_outpaintOriginalWidth'] = prop?.width;
+        this.Document[this.fieldKey + '_outpaintOriginalHeight'] = prop?.height;
+    }
+
+    @computed get imgNativeSize() {
+        return {
+            nativeWidth: NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth'], 500)),
+            nativeHeight: NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight'], 500)),
+        };
+    }
+    set imgNativeSize(prop: { nativeWidth: number; nativeHeight: number }) {
+        this.dataDoc[this.fieldKey + '_nativeWidth'] = prop.nativeWidth;
+        this.dataDoc[this.fieldKey + '_nativeHeight'] = prop.nativeHeight;
+    }
+
     protected createDropTarget = (ele: HTMLDivElement) => {
         this._mainCont = ele;
         this._dropDisposer?.();
@@ -207,7 +229,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width), height: this.layoutDoc._height }),
             ({ nativeSize, width, height }) => {
                 if (!this.layoutDoc._layout_nativeDimEditable || !height || this.layoutDoc.layout_resetNativeDim) {
-                    this.layoutDoc.layout_resetNativeDim = undefined; // template images need to reset their dimensions when they are rendered with content.  afterwards, remove this flag.
+                    if (!this._props.TemplateDataDocument) this.layoutDoc._nativeWidth = this.layoutDoc._nativeHeight = undefined;
+                    this.layoutDoc.layout_resetNativeDim = undefined; // reset dimensions of templates rendered with content or if image changes.  afterwards, remove this flag.
                     this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
                 }
             },
@@ -224,7 +247,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             { fireImmediately: true }
         );
         this._disposers.outpaint = reaction(
-            () => this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined && !SnappingManager.ShiftKey,
+            () => this.outpaintOriginalSize?.width && !SnappingManager.ShiftKey,
             complete => complete && this.openOutpaintPrompt(),
             { fireImmediately: true }
         );
@@ -285,14 +308,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     DrawingFillHandler.drawingToImage(this.Document, 90, newPrompt(descText), drag)?.then(action(() => (this._regenerateLoading = false)));
                     added = false;
                 } else if (de.altKey || !this.dataDoc[this.fieldKey]) {
-                    const layoutDoc = de.complete.docDragData?.draggedDocuments[0];
-                    const targetField = Doc.LayoutDataKey(layoutDoc);
-                    const targetDoc = layoutDoc[DocData];
-                    if (targetDoc[targetField] instanceof ImageField) {
+                    const dropDoc = de.complete.docDragData?.draggedDocuments[0];
+                    const dropDocFieldKey = Doc.LayoutDataKey(dropDoc);
+                    const dropDataDoc = dropDoc[DocData];
+                    if (dropDataDoc[dropDocFieldKey] instanceof ImageField) {
                         added = true;
-                        this.dataDoc[this.fieldKey] = ObjectField.MakeCopy(targetDoc[targetField] as ImageField);
-                        Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(targetDoc), this.fieldKey);
-                        Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(targetDoc), this.fieldKey);
+                        this.dataDoc.layout_resetNativeDim = true;
+                        this.dataDoc[this.fieldKey] = ObjectField.MakeCopy(dropDataDoc[dropDocFieldKey] as ImageField);
+                        Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(dropDataDoc), this.fieldKey);
+                        Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(dropDataDoc), this.fieldKey);
                     }
                 }
                 added === false && e.preventDefault();
@@ -311,18 +335,17 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @undoBatch
     setNativeSize = action(() => {
-        const oldnativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']);
+        const oldnativeWidth = this.imgNativeSize.nativeWidth;
         const nscale = NumCast(this._props.PanelWidth()) * NumCast(this.layoutDoc._freeform_scale, 1);
         const nw = nscale / oldnativeWidth;
-        this.dataDoc[this.fieldKey + '_nativeHeight'] = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']) * nw;
-        this.dataDoc[this.fieldKey + '_nativeWidth'] = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) * nw;
+        this.imgNativeSize = { nativeWidth: this.imgNativeSize.nativeWidth * nw, nativeHeight: this.imgNativeSize.nativeHeight * nw };
         this.dataDoc.freeform_panX = nw * NumCast(this.dataDoc.freeform_panX);
         this.dataDoc.freeform_panY = nw * NumCast(this.dataDoc.freeform_panY);
         this.dataDoc.freeform_panX_max = this.dataDoc.freeform_panX_max ? nw * NumCast(this.dataDoc.freeform_panX_max) : undefined;
         this.dataDoc.freeform_panX_min = this.dataDoc.freeform_panX_min ? nw * NumCast(this.dataDoc.freeform_panX_min) : undefined;
         this.dataDoc.freeform_panY_max = this.dataDoc.freeform_panY_max ? nw * NumCast(this.dataDoc.freeform_panY_max) : undefined;
         this.dataDoc.freeform_panY_min = this.dataDoc.freeform_panY_min ? nw * NumCast(this.dataDoc.freeform_panY_min) : undefined;
-        const newnativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']);
+        const newnativeWidth = this.imgNativeSize.nativeWidth;
         DocListCast(this.dataDoc[this.annotationKey]).forEach(doc => {
             doc.x = (NumCast(doc.x) / oldnativeWidth) * newnativeWidth;
             doc.y = (NumCast(doc.y) / oldnativeWidth) * newnativeWidth;
@@ -334,13 +357,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     });
     @undoBatch
     rotate = action(() => {
-        const nw = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']);
-        const nh = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']);
+        const nativeSize = this.imgNativeSize;
         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.imgNativeSize = { nativeWidth: nativeSize.nativeHeight, nativeHeight: nativeSize.nativeWidth }; // swap width and height
         this.layoutDoc._width = h;
         this.layoutDoc._height = w;
     });
@@ -356,7 +377,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const anchy = NumCast(cropping.y);
         const anchw = NumCast(cropping._width);
         const anchh = NumCast(cropping._height);
-        const viewScale = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) / anchw;
+        const viewScale = this.nativeSize.nativeWidth / anchw;
         cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width);
         cropping.y = NumCast(this.Document.y);
         cropping.onClick = undefined;
@@ -418,11 +439,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     cancelOutpaintPrompt = () => {
-        const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']);
-        const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']);
-        this.Document._width = origWidth;
-        this.Document._height = origHeight;
+        [this.Document._width, this.Document._height] = [this.oupaintOriginalSize.width, this.oupaintOriginalSize.height];
         this._outpaintingInProgress = false;
+        this.outpaintOriginalSize = undefined;
         this.closeOutpaintPrompt();
     };
 
@@ -470,8 +489,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             loadingOverlay.innerHTML = '<div style="color: white; font-size: 16px;">Generating outpainted image...</div>';
             this._mainCont?.appendChild(loadingOverlay);
 
-            const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']);
-            const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']);
+            const { width: origWidth, height: origHeight } = this.oupaintOriginalSize;
             const response = await Networking.PostToServer('/outpaintImage', {
                 imageUrl: currentPath,
                 prompt: customPrompt,
@@ -508,8 +526,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     this.Document.$ai = true;
                     this.Document.$ai_outpainted = true;
                     this.Document.$ai_outpaint_prompt = customPrompt;
-                    this.Document[this.fieldKey + '_outpaintOriginalWidth'] = undefined;
-                    this.Document[this.fieldKey + '_outpaintOriginalHeight'] = undefined;
+                    this.outpaintOriginalSize = undefined;
                 } else {
                     this.cancelOutpaintPrompt();
                     alert('Failed to receive a valid image URL from server.');
@@ -722,8 +739,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @computed get nativeSize() {
         TraceMobx();
         if (this.paths.length && this.paths[0].includes(DefaultPath)) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0 };
-        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, nativeHeight } = this.imgNativeSize;
         const nativeOrientation = NumCast(this.dataDoc[this.fieldKey + '_nativeOrientation'], 1);
         return { nativeWidth, nativeHeight, nativeOrientation };
     }
@@ -743,7 +759,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @computed get overlayImageIcon() {
         const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`];
-        return (
+        return this._regenerateLoading ? null : (
             <Tooltip
                 title={
                     <div className="dash-tooltip">
@@ -785,7 +801,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         );
     }
     @computed get regenerateImageIcon() {
-        return (
+        return this._regenerateLoading ? null : (
             <Tooltip title={'click to show AI generations.  Drop an image on to create a new generation'}>
                 <div
                     className="imageBox-regenerateDropTarget"
@@ -874,7 +890,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             transform,
                             transformOrigin,
                             width: this._outpaintAlign ? 'max-content' : this._outpaintAlign ? '100%' : undefined,
-                            height: this._outpaintVAlign ? 'max-content' : this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined ? '100%' : undefined,
+                            height: this._outpaintVAlign ? 'max-content' : this.outpaintOriginalSize?.width ? '100%' : undefined,
                         }}
                         onError={action(e => (this._error = e.toString()))}
                         draggable={false}
@@ -997,6 +1013,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return { width, height };
     };
     savedAnnotations = () => this._savedAnnotations;
+    rejectDrop = (de: DragManager.DropEvent, subView?: DocumentView | undefined) => (this.dataDoc[this.fieldKey] === undefined ? true : (this._props.rejectDrop?.(de, subView) ?? false));
     render() {
         TraceMobx();
         const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string;
@@ -1040,7 +1057,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         ScreenToLocalTransform={this.screenToLocalTransform}
                         select={emptyFunction}
                         focus={this.focus}
-                        rejectDrop={this._props.rejectDrop}
+                        rejectDrop={this.rejectDrop}
                         getScrollHeight={this.getScrollHeight}
                         NativeDimScaling={returnOne}
                         isAnyChildContentActive={returnFalse}
@@ -1102,8 +1119,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 if (result instanceof Error) {
                     alert('Error uploading files - possibly due to unsupported file types');
                 } else {
-                    this.dataDoc[this.fieldKey] = new ImageField(result.accessPaths.agnostic.client);
-                    !(result instanceof Error) && DocUtils.assignUploadInfo(result, this.dataDoc);
+                    runInAction(() => {
+                        this.dataDoc.layout_resetNativeDim = true;
+                        !(result instanceof Error) && DocUtils.assignUploadInfo(result, this.dataDoc, this.fieldKey);
+                        this.dataDoc[this.fieldKey] = new ImageField(result.accessPaths.agnostic.client);
+                    });
                 }
                 disposer();
             } else {
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index aa66b5ba9..606f63d6d 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -273,15 +273,15 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     createFieldView = (templateDoc: Doc, row: KeyValuePair) => {
-        const metaKey = row._props.keyName;
-        const fieldTempDoc = Doc.IsDelegateField(templateDoc, metaKey) ? Doc.MakeDelegate(templateDoc) : Doc.MakeEmbedding(templateDoc);
-        fieldTempDoc.title = metaKey;
+        const keyName = row._props.keyName;
+        const fieldTempDoc = Doc.IsDelegateField(templateDoc, keyName) ? Doc.MakeDelegate(templateDoc) : Doc.MakeEmbedding(templateDoc);
+        fieldTempDoc.title = keyName;
         fieldTempDoc.layout_fitWidth = true;
         fieldTempDoc._xMargin = 10;
         fieldTempDoc._yMargin = 10;
         fieldTempDoc._width = 100;
         fieldTempDoc._height = 40;
-        fieldTempDoc.layout = this.inferType(templateDoc[metaKey], metaKey);
+        fieldTempDoc.layout = this.inferType(templateDoc[keyName], keyName);
         return fieldTempDoc;
     };
 
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 4cbe01b82..e1ecc2018 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -9,7 +9,7 @@ import { TraceMobx } from '../../../fields/util';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
-import { undoable } from '../../util/UndoManager';
+import { undoable, UndoManager } from '../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../DocComponent';
 import { PinDocView, PinProps } from '../PinFuncs';
 import { StyleProp } from '../StyleProp';
@@ -28,6 +28,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     private _timeout: NodeJS.Timeout | undefined;
     private _divRef: HTMLDivElement | null = null;
     private _disposers: { [key: string]: IReactionDisposer } = {};
+    private _liveTextUndo: UndoManager.Batch | undefined; // captured undo batch when typing a new text note into a collection
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -220,8 +221,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             this.setText(this._divRef?.innerText ?? '');
                             if (!FormattedTextBox.tryKeepingFocus(e.relatedTarget, () => this._divRef?.focus())) {
                                 RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined);
-                                FormattedTextBox.LiveTextUndo?.end();
-                                FormattedTextBox.LiveTextUndo = undefined;
+                                this._liveTextUndo?.end();
                             }
                         }}
                         dangerouslySetInnerHTML={{
@@ -236,6 +236,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
                                 if (DocumentView.SelectOnLoad === this.Document) {
                                     DocumentView.SetSelectOnLoad(undefined);
+                                    this._liveTextUndo = FormattedTextBox.LiveTextUndo;
+                                    FormattedTextBox.LiveTextUndo = undefined;
                                     this._divRef.focus();
                                 }
                                 this.fitTextToBox(this._divRef);
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 5026f52fb..5b07b303a 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -40,7 +40,6 @@ export class LinkInfo {
         LinkInfo._instance = this;
         makeObservable(this);
     }
-    // eslint-disable-next-line no-use-before-define
     @observable public LinkInfo: Opt<LinkDocPreviewProps> = undefined;
 
     public static get Instance() {
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index 325ab18b4..4220ce5f1 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -43,7 +43,7 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable progress = '';
     componentDidMount() {
         if (!Doc.CurrentlyLoading?.includes(this.Document)) {
-            this.Document.loadingError = 'Upload interrupted, please try again';
+            this.Document.loadingError ??= 'Upload interrupted, please try again';
         } else {
             const updateFunc = async () => {
                 const result = await Networking.QueryYoutubeProgress(StrCast(this.Document[Id])); // We use the guid of the overwriteDoc to track file uploads.
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index a563b7c1b..a279ccc48 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -13,7 +13,7 @@ import { CirclePicker, ColorResult } from 'react-color';
 import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl/mapbox';
 import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc, DocListCast, Field, LinkedTo, Opt, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, LinkedTo, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { DocCast, NumCast, StrCast, toList } from '../../../../fields/Types';
@@ -111,12 +111,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     // this list contains pushpins and configs
     @computed get allAnnotations() { return DocListCast(this.dataDoc[this.annotationKey]); } // prettier-ignore
-    @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); } // prettier-ignore
+    @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.sidebarKey]); } // prettier-ignore
     @computed get allPushpins() { return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN); } // prettier-ignore
     @computed get allRoutes() { return this.allAnnotations.filter(anno => anno.type === DocumentType.MAPROUTE); } // prettier-ignore
     @computed get SidebarShown() { return !!this.layoutDoc._layout_showSidebar; } // prettier-ignore
     @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } // prettier-ignore
-    @computed get SidebarKey() {  return this.fieldKey + '_sidebar'; } // prettier-ignore
+    @computed get sidebarKey() {  return this.fieldKey + '_sidebar'; } // prettier-ignore
     @computed get sidebarColor() {
         return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4'));
     }
@@ -260,7 +260,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     removeMapDocument = (doc: Doc | Doc[], annotationKey?: string) => {
         this.allAnnotations
-            .filter(anno => toList(doc).includes(DocCast(anno.mapPin)))
+            .filter(anno => toList(doc).includes(DocCast(anno.mapPin)!))
             .forEach(anno => {
                 anno.mapPin = undefined;
             });
@@ -339,27 +339,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     startAnchorDrag = (e: PointerEvent, ele: HTMLElement) => {
         e.preventDefault();
         e.stopPropagation();
-
-        const sourceAnchorCreator = action(() => {
-            const note = this.getAnchor(true);
-            if (note && this._selectedPinOrRoute) {
-                note.latitude = this._selectedPinOrRoute.latitude;
-                note.longitude = this._selectedPinOrRoute.longitude;
-                note.map = this._selectedPinOrRoute.map;
-            }
-            return note as Doc;
-        });
-
         const targetCreator = (annotationOn: Doc | undefined) => {
             const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
+            target.layout_fitWidth = true;
             DocumentView.SetSelectOnLoad(target);
             return target;
         };
+
+        const sourceAnchorCreator = () => this.getAnchor(true);
         const docView = this.DocumentView?.();
         docView &&
             DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
                 dragComplete: dragEv => {
-                    if (!dragEv.aborted && dragEv.annoDragData && dragEv.annoDragData.linkSourceDoc && dragEv.annoDragData.dropDocument && dragEv.linkDocument) {
+                    if (!dragEv.aborted && dragEv.annoDragData?.linkSourceDoc && dragEv.annoDragData.dropDocument && dragEv.linkDocument) {
                         dragEv.annoDragData.linkSourceDoc.followLinkToggle = dragEv.annoDragData.dropDocument.annotationOn === this.Document;
                         dragEv.annoDragData.linkSourceDoc.followLinkZoom = false;
                     }
@@ -368,17 +360,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     createNoteAnnotation = () => {
-        const createFunc = undoable(
-            action(() => {
-                const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(true), ['latitude', 'longitude', LinkedTo]);
-                if (note && this._selectedPinOrRoute) {
-                    note.latitude = this._selectedPinOrRoute.latitude;
-                    note.longitude = this._selectedPinOrRoute.longitude;
-                    note.map = this._selectedPinOrRoute.map;
-                }
-            }),
-            'create note annotation'
-        );
+        const createFunc = undoable(() => this._sidebarRef.current?.anchorMenuClick(this.getAnchor(true), ['latitude', 'longitude', LinkedTo]), 'create note annotation');
         if (!this.layoutDoc.layout_showSidebar) {
             this.toggleSidebar();
             setTimeout(createFunc);
@@ -428,14 +410,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
-    getView = (doc: Doc, options: FocusViewOptions) => {
-        if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) {
-            this.toggleSidebar();
-            options.didMove = true;
+    getView = async (doc: Doc, options: FocusViewOptions) => {
+        if (DocListCast(this.dataDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
+            SidebarAnnos.getView(this._sidebarRef.current, this.SidebarShown, this.toggleSidebar, doc, options);
         }
-        return new Promise<Opt<DocumentView>>(res => {
-            DocumentView.addViewRenderedCb(doc, dv => res(dv));
-        });
+        return undefined;
     };
 
     /*
@@ -476,13 +455,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     deleteSelectedPinOrRoute = undoable(() => {
-        if (this._selectedPinOrRoute) {
+        const selPin = DocCast(this._selectedPinOrRoute);
+        if (selPin) {
             // Removes filter
-            Doc.setDocFilter(this.Document, 'latitude', NumCast(this._selectedPinOrRoute.latitude), 'remove');
-            Doc.setDocFilter(this.Document, 'longitude', NumCast(this._selectedPinOrRoute.longitude), 'remove');
-            Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this._selectedPinOrRoute))}`, 'remove');
+            Doc.setDocFilter(this.Document, 'latitude', NumCast(selPin.latitude), 'remove');
+            Doc.setDocFilter(this.Document, 'longitude', NumCast(selPin.longitude), 'remove');
+            Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(selPin)}`, 'remove');
 
-            this.removePushpinOrRoute(this._selectedPinOrRoute);
+            this.removePushpinOrRoute(selPin);
         }
         MapAnchorMenu.Instance.fadeOut(true);
         document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
@@ -1299,7 +1279,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     <SidebarAnnos
                         ref={this._sidebarRef}
                         {...this._props}
-                        fieldKey={this.fieldKey}
                         Doc={this.Document}
                         layoutDoc={this.layoutDoc}
                         dataDoc={this.dataDoc}
diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
index e0efab576..0beefcb67 100644
--- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
+++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
@@ -145,7 +145,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
     removeMapDocument = (docsIn: Doc | Doc[], annotationKey?: string) => {
         const docs = toList(docsIn);
         this.allAnnotations
-            .filter(anno => docs.includes(DocCast(anno.mapPin)))
+            .filter(anno => docs.includes(DocCast(anno.mapPin)!))
             .forEach(anno => {
                 anno.mapPin = undefined;
             });
@@ -224,6 +224,12 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
     startAnchorDrag = (e: PointerEvent, ele: HTMLElement) => {
         e.preventDefault();
         e.stopPropagation();
+        const targetCreator = (annotationOn: Doc | undefined) => {
+            const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
+            target.layout_fitWidth = true;
+            DocumentView.SetSelectOnLoad(target);
+            return target;
+        };
 
         const sourceAnchorCreator = action(() => {
             const note = this.getAnchor(true);
@@ -235,11 +241,6 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
             return note as Doc;
         });
 
-        const targetCreator = (annotationOn: Doc | undefined) => {
-            const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
-            DocumentView.SetSelectOnLoad(target);
-            return target;
-        };
         const docView = this.DocumentView?.();
         docView &&
             DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
@@ -362,22 +363,22 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
 
     @action
     deselectPin = () => {
-        if (this.selectedPin) {
+        const selPin = DocCast(this.selectedPin);
+        if (selPin) {
             // Removes filter
-            Doc.setDocFilter(this.Document, 'latitude', NumCast(this.selectedPin.latitude), 'remove');
-            Doc.setDocFilter(this.Document, 'longitude', NumCast(this.selectedPin.longitude), 'remove');
-            Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove');
+            Doc.setDocFilter(this.Document, 'latitude', NumCast(selPin.latitude), 'remove');
+            Doc.setDocFilter(this.Document, 'longitude', NumCast(selPin.longitude), 'remove');
+            Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(selPin)}`, 'remove');
 
-            const temp = this.selectedPin;
             if (!this._unmounting) {
-                this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
+                this._bingMap.current.entities.remove(this.map_docToPinMap.get(selPin));
             }
-            const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude, temp.longitude));
-            this.MicrosoftMaps.Events.addHandler(newpin, 'click', () => this.pushpinClicked(temp as Doc));
+            const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(selPin.latitude, selPin.longitude));
+            this.MicrosoftMaps.Events.addHandler(newpin, 'click', () => this.pushpinClicked(selPin));
             if (!this._unmounting) {
                 this._bingMap.current.entities.push(newpin);
             }
-            this.map_docToPinMap.set(temp, newpin);
+            this.map_docToPinMap.set(selPin, newpin);
             this.selectedPin = undefined;
             this.bingSearchBarContents = this.Document.map;
         }
@@ -388,9 +389,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
             this.toggleSidebar();
             options.didMove = true;
         }
-        return new Promise<Opt<DocumentView>>(res => {
-            DocumentView.addViewRenderedCb(doc, dv => res(dv));
-        });
+        return new Promise<Opt<DocumentView>>(res => DocumentView.addViewRenderedCb(doc, res));
     };
     /*
      * Pushpin onclick
@@ -535,13 +534,14 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
 
     @action
     deleteSelectedPin = undoable(() => {
-        if (this.selectedPin) {
+        const selPin = this.selectedPin;
+        if (selPin) {
             // Removes filter
-            Doc.setDocFilter(this.Document, 'latitude', NumCast(this.selectedPin.latitude), 'remove');
-            Doc.setDocFilter(this.Document, 'longitude', NumCast(this.selectedPin.longitude), 'remove');
-            Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove');
+            Doc.setDocFilter(this.Document, 'latitude', NumCast(selPin.latitude), 'remove');
+            Doc.setDocFilter(this.Document, 'longitude', NumCast(selPin.longitude), 'remove');
+            Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(selPin)}`, 'remove');
 
-            this.removePushpin(this.selectedPin);
+            this.removePushpin(selPin);
         }
         MapAnchorMenu.Instance.fadeOut(true);
         document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
@@ -638,7 +638,10 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
         this._disposers.highlight = reaction(
             () => this.allAnnotations.map(doc => doc[Highlight]),
             () => {
-                const allConfigPins = this.allAnnotations.map(doc => ({ doc, pushpin: DocCast(doc.mapPin) })).filter(pair => pair.pushpin);
+                const allConfigPins = this.allAnnotations
+                    .map(doc => ({ doc, pushpin: DocCast(doc.mapPin) }))
+                    .filter(pair => pair.pushpin)
+                    .map(pair => ({ doc: pair.doc, pushpin: pair.pushpin! }));
                 allConfigPins.forEach(({ pushpin }) => {
                     if (!pushpin[Highlight] && this.map_pinHighlighted.get(pushpin)) {
                         this.recolorPin(pushpin);
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index eaea272dc..f09a2630a 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -198,7 +198,7 @@
             pointer-events: all;
 
             .pdfBox-searchBar {
-                width: 70%;
+                width: calc(100% - 120px); // less size of search buttons
                 font-size: 14px;
             }
         }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 282b06215..a0c7d8d22 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -10,7 +10,7 @@ import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { ComputedField } from '../../../fields/ScriptField';
-import { Cast, FieldValue, NumCast, StrCast, toList } from '../../../fields/Types';
+import { Cast, DocCast, FieldValue, NumCast, StrCast, toList } from '../../../fields/Types';
 import { ImageField, PdfField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction } from '../../../Utils';
@@ -27,7 +27,6 @@ import { Colors } from '../global/globalEnums';
 import { PDFViewer } from '../pdf/PDFViewer';
 import { PinDocView, PinProps } from '../PinFuncs';
 import { SidebarAnnos } from '../SidebarAnnos';
-import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
 import { ImageBox } from './ImageBox';
@@ -59,6 +58,9 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable private _pdf: Opt<Pdfjs.PDFDocumentProxy> = undefined;
     @observable private _pageControls = false;
 
+    @computed get sidebarKey() {
+        return this.fieldKey + '_sidebar';
+    }
     @computed get pdfUrl() {
         return Cast(this.dataDoc[this._props.fieldKey], PdfField);
     }
@@ -276,14 +278,11 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return this._pdfViewer?.scrollFocus(anchor, NumCast(anchor.y, NumCast(anchor.config_scrollTop)), options);
     };
 
-    getView = (doc: Doc, options: FocusViewOptions) => {
-        if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) {
-            options.didMove = true;
-            this.toggleSidebar(false);
+    getView = async (doc: Doc, options: FocusViewOptions) => {
+        if (DocListCast(this.dataDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
+            SidebarAnnos.getView(this._sidebarRef.current, this.SidebarShown, () => this.toggleSidebar(false), doc, options);
         }
-        return new Promise<Opt<DocumentView>>(res => {
-            DocumentView.addViewRenderedCb(doc, dv => res(dv));
-        });
+        return undefined;
     };
 
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
@@ -441,7 +440,15 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 onKeyDown={e => ([KeyCodes.BACKSPACE, KeyCodes.DELETE].includes(e.keyCode) ? e.stopPropagation() : true)}
                 onPointerDown={e => e.stopPropagation()}
                 style={{ display: this._props.isContentActive() ? 'flex' : 'none' }}>
-                <div className="pdfBox-overlayCont" onPointerDown={e => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
+                <div
+                    className="pdfBox-overlayCont"
+                    onPointerDown={e => e.stopPropagation()}
+                    style={{
+                        transformOrigin: 'bottom left',
+                        transform: `scale(${this._props.DocumentView?.().UIBtnScaling || 1})`,
+                        width: `${100 / (this._props.DocumentView?.().UIBtnScaling || 1)}%`,
+                        left: `${this._searching ? 0 : 100}%`,
+                    }}>
                     <button type="button" className="pdfBox-overlayButton" title={searchTitle} />
                     <input
                         className="pdfBox-searchBar"
@@ -467,17 +474,25 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     type="button"
                     className="pdfBox-overlayButton"
                     title={searchTitle}
+                    style={{
+                        transformOrigin: 'bottom right',
+                        transform: `scale(${this._props.DocumentView?.().UIBtnScaling || 1})`,
+                    }}
                     onClick={action(() => {
                         this._searching = !this._searching;
                         this.search('', true, true);
                     })}>
-                    <div className="pdfBox-overlayButton-arrow" onPointerDown={e => e.stopPropagation()} />
                     <div className="pdfBox-overlayButton-iconCont" onPointerDown={e => e.stopPropagation()}>
                         <FontAwesomeIcon icon={this._searching ? 'times' : 'search'} size="lg" />
                     </div>
                 </button>
 
-                <div className="pdfBox-pageNums">
+                <div
+                    className="pdfBox-pageNums"
+                    style={{
+                        transformOrigin: 'top left',
+                        transform: `scale(${this._props.DocumentView?.().UIBtnScaling || 1})`,
+                    }}>
                     <input
                         value={curPage}
                         style={{ width: `${curPage > 99 ? 4 : 3}ch`, pointerEvents: 'all' }}
@@ -681,19 +696,11 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const pdfView = !this._pdf ? null : this.renderPdfView;
         const href = this.pdfUrl?.url.href;
         if (!pdfView && href) {
-            if (PDFBox.pdfcache.get(href))
-                setTimeout(
-                    action(() => {
-                        this._pdf = PDFBox.pdfcache.get(href);
-                    })
-                );
+            if (PDFBox.pdfcache.get(href)) setTimeout(action(() => (this._pdf = PDFBox.pdfcache.get(href))));
             else {
-                if (!PDFBox.pdfpromise.get(href)) PDFBox.pdfpromise.set(href, Pdfjs.getDocument(href).promise);
-                PDFBox.pdfpromise.get(href)?.then(
-                    action(pdf => {
-                        PDFBox.pdfcache.set(href, (this._pdf = pdf));
-                    })
-                );
+                const pdfPromise = PDFBox.pdfpromise.get(href) ?? Pdfjs.getDocument(href).promise;
+                PDFBox.pdfpromise.set(href, pdfPromise);
+                pdfPromise.then(action(pdf => PDFBox.pdfcache.set(href, (this._pdf = pdf))));
             }
         }
         return pdfView ?? this.renderTitleBox;
diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
new file mode 100644
index 000000000..0fcc2f955
--- /dev/null
+++ b/src/client/views/nodes/TaskBox.scss
@@ -0,0 +1,72 @@
+.task-manager-container {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    gap: 10px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.task-manager-title {
+    width: 100%;
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding: 6px 10px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    box-sizing: border-box;
+}
+
+.task-manager-description {
+    width: 100%;
+    font-size: 1rem;
+    padding: 8px 10px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    min-height: 40px;
+    box-sizing: border-box;
+    vertical-align: top;
+    text-align: start;
+    resize: none;
+    line-height: 1.4;
+    resize: none;
+    flex-grow: 1
+}
+
+.task-manager-checkboxes {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.task-manager-allday, .task-manager-complete {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.95rem;
+}
+
+.task-manager-times {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+}
+
+.task-manager-times label {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.9rem;
+    font-weight: 500;
+    gap: 4px;
+}
+
+input[type="datetime-local"] {
+    width: 100%;
+    font-size: 0.9rem;
+    padding: 6px 8px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    box-sizing: border-box;
+}
diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
new file mode 100644
index 000000000..9d59746f8
--- /dev/null
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -0,0 +1,292 @@
+import { action, makeObservable, IReactionDisposer, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Docs } from '../../documents/Documents';
+import { DocumentType } from '../../documents/DocumentTypes';
+import { FieldView } from './FieldView';
+import { DateField } from '../../../fields/DateField';
+import { Doc } from '../../../fields/Doc';
+
+import './TaskBox.scss';
+
+/**
+ * Props (reference to document) for Task Box
+ */
+
+interface TaskBoxProps {
+    Document: Doc;
+}
+
+/**
+ * TaskBox class for adding task information + completing tasks
+ */
+@observer
+export class TaskBox extends React.Component<TaskBoxProps> {
+    /**
+     * Method to reuturn the
+     * @param fieldStr
+     * @returns
+     */
+    public static LayoutString(fieldStr: string) {
+        return FieldView.LayoutString(TaskBox, fieldStr);
+    }
+
+    /**
+     * Method to update the task description
+     * @param e - event of changing the description box input
+     */
+
+    @action
+    updateText = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        this.props.Document.text = e.target.value;
+    };
+
+    /**
+     * Method to update the task title
+     * @param e - event of changing the title box input
+     */
+    @action
+    updateTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.props.Document.title = e.target.value;
+    };
+
+    /**
+     * Method to update the all day status
+     * @param e - event of changing the all day checkbox
+     */
+    @action
+    updateAllDay = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.props.Document.$task_allDay = e.target.checked;
+
+        if (e.target.checked) {
+            delete this.props.Document.$task_startTime;
+            delete this.props.Document.$task_endTime;
+        }
+
+        this.setTaskDateRange();
+    };
+
+    /**
+     * Method to update the task start time
+     * @param e - event of changing the start time input
+     */
+    @action
+    updateStart = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newStart = new Date(e.target.value);
+
+        this.props.Document.$task_startTime = new DateField(newStart);
+
+        const endDate = this.props.Document.$task_endTime instanceof DateField ? this.props.Document.$task_endTime.date : undefined;
+        if (endDate && newStart > endDate) {
+            // Alert user
+            alert('Start time cannot be after end time. End time has been adjusted.');
+
+            // Fix end time
+            const adjustedEnd = new Date(newStart.getTime() + 60 * 60 * 1000);
+            this.props.Document.$task_endTime = new DateField(adjustedEnd);
+        }
+
+        this.setTaskDateRange();
+    };
+
+    /**
+     * Method to update the task end time
+     * @param e - event of changing the end time input
+     */
+    @action
+    updateEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newEnd = new Date(e.target.value);
+
+        this.props.Document.$task_endTime = new DateField(newEnd);
+
+        const startDate = this.props.Document.$task_startTime instanceof DateField ? this.props.Document.$task_startTime.date : undefined;
+        if (startDate && newEnd < startDate) {
+            // Alert user
+            alert('End time cannot be before start time. Start time has been adjusted.');
+
+            // Fix start time
+            const adjustedStart = new Date(newEnd.getTime() - 60 * 60 * 1000);
+            this.props.Document.$task_startTime = new DateField(adjustedStart);
+        }
+
+        this.setTaskDateRange();
+    };
+
+    /**
+     * Method to update the task date range
+     */
+    @action
+    setTaskDateRange() {
+        const doc = this.props.Document;
+
+        if (doc.$task_allDay) {
+            const range = typeof doc.$task_dateRange === 'string' ? doc.$task_dateRange.split('|') : [];
+            const dateStr = range[0] ?? new Date().toISOString().split('T')[0]; // default to today
+
+            doc.$task_dateRange = `${dateStr}|${dateStr}`;
+            doc.$task_allDay = true;
+        } else {
+            const startField = doc.$task_startTime;
+            const endField = doc.$task_endTime;
+            const startDate = startField instanceof DateField ? startField.date : null;
+            const endDate = endField instanceof DateField ? endField.date : null;
+
+            if (startDate && endDate && !isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
+                doc.$task_dateRange = `${startDate.toISOString()}|${endDate.toISOString()}`;
+                doc.$task_allDay = false;
+            }
+        }
+    }
+
+    /**
+     * Method to set task's completion status
+     * @param e - event of changing the "completed" input checkbox
+     */
+
+    @action
+    toggleComplete = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.props.Document.$task_completed = e.target.checked;
+    };
+
+    /**
+     * Constructor for the task box
+     * @param props - props containing the document reference
+     */
+
+    constructor(props: TaskBoxProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    _heightDisposer?: IReactionDisposer;
+    _widthDisposer?: IReactionDisposer;
+
+    componentDidMount() {
+        this.setTaskDateRange();
+
+        const doc = this.props.Document;
+        this._heightDisposer = reaction(
+            () => Number(doc._height),
+            height => {
+                const minHeight = Number(doc.height_min ?? 0);
+                if (!isNaN(height) && height < minHeight) {
+                    doc._height = minHeight;
+                }
+            }
+        );
+
+        this._widthDisposer = reaction(
+            () => Number(doc._width),
+            width => {
+                const minWidth = Number(doc.width_min ?? 0);
+                if (!isNaN(width) && width < minWidth) {
+                    doc._width = minWidth;
+                }
+            }
+        );
+    }
+
+    componentWillUnmount() {
+        this._heightDisposer?.();
+        this._widthDisposer?.();
+    }
+
+    /**
+     * Method to render the task box
+     * @returns - HTML with taskbox components
+     */
+
+    render() {
+        function toLocalDateTimeString(date: Date): string {
+            const pad = (n: number) => n.toString().padStart(2, '0');
+            return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()) + 'T' + pad(date.getHours()) + ':' + pad(date.getMinutes());
+        }
+
+        const doc = this.props.Document;
+
+        const taskDesc = typeof doc.text === 'string' ? doc.text : '';
+        const taskTitle = typeof doc.title === 'string' ? doc.title : '';
+        const allDay = !!doc.$task_allDay;
+        const isCompleted = !!this.props.Document.$task_completed;
+
+        const startTime = doc.$task_startTime instanceof DateField && doc.$task_startTime.date instanceof Date ? toLocalDateTimeString(doc.$task_startTime.date) : '';
+
+        const endTime = doc.$task_endTime instanceof DateField && doc.$task_endTime.date instanceof Date ? toLocalDateTimeString(doc.$task_endTime.date) : '';
+
+        return (
+            <div className="task-manager-container">
+                <input className="task-manager-title" type="text" placeholder="Task Title" value={taskTitle} onChange={this.updateTitle} disabled={isCompleted} style={{ opacity: isCompleted ? 0.7 : 1 }} />
+
+                <textarea className="task-manager-description" placeholder="What’s your task?" value={taskDesc} onChange={this.updateText} disabled={isCompleted} style={{ opacity: isCompleted ? 0.7 : 1 }} />
+
+                <div className="task-manager-checkboxes">
+                    <label className="task-manager-allday" style={{ opacity: isCompleted ? 0.7 : 1 }}>
+                        <input type="checkbox" checked={allDay} onChange={this.updateAllDay} disabled={isCompleted} />
+                        All day
+                        {allDay && (
+                            <input
+                                type="date"
+                                value={(() => {
+                                    const rawRange = doc.$task_dateRange;
+                                    if (typeof rawRange !== 'string') return '';
+                                    const datePart = rawRange.split('|')[0];
+                                    if (!datePart) return '';
+                                    const d = new Date(datePart);
+                                    return !isNaN(d.getTime()) ? d.toISOString().split('T')[0] : '';
+                                })()}
+                                onChange={e => {
+                                    const newDate = new Date(e.target.value);
+                                    if (!isNaN(newDate.getTime())) {
+                                        const dateStr = e.target.value;
+                                        if (dateStr) {
+                                            doc.$task_dateRange = `${dateStr}T00:00:00|${dateStr}T00:00:00`;
+                                        }
+                                    }
+                                }}
+                                disabled={isCompleted}
+                                style={{ marginLeft: '8px' }}
+                            />
+                        )}
+                    </label>
+
+                    <label className="task-manager-complete">
+                        <input type="checkbox" checked={isCompleted} onChange={this.toggleComplete} />
+                        Complete
+                    </label>
+                </div>
+
+                {!allDay && (
+                    <div className="task-manager-times" style={{ opacity: isCompleted ? 0.7 : 1 }}>
+                        <label>
+                            Start:
+                            <input type="datetime-local" value={startTime} onChange={this.updateStart} disabled={isCompleted} />
+                        </label>
+                        <label>
+                            End:
+                            <input type="datetime-local" value={endTime} onChange={this.updateEnd} disabled={isCompleted} />
+                        </label>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+Docs.Prototypes.TemplateMap.set(DocumentType.TASK, {
+    layout: { view: TaskBox, dataField: 'text' },
+    options: {
+        acl: '',
+        _height: 35,
+        _xMargin: 10,
+        _yMargin: 10,
+        _layout_autoHeight: true,
+        _layout_nativeDimEditable: true,
+        _layout_reflowVertical: true,
+        _layout_reflowHorizontal: true,
+        task: '',
+        defaultDoubleClick: 'ignore',
+        systemIcon: 'BsCheckSquare',
+        height_min: 300,
+        width_min: 300,
+    },
+});
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 404be6a1b..4d85b4942 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -390,12 +390,17 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const timecode = Cast(this.layoutDoc._layout_currentTimecode, 'number', null);
         const marquee = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation);
+        const docAnchor = () =>
+            Docs.Create.ConfigDocument({
+                title: '#' + timecode,
+                _timecodeToShow: timecode,
+                annotationOn: this.Document,
+            });
         if (!addAsAnnotation && marquee) marquee.backgroundColor = 'transparent';
-        const anchor =
-            addAsAnnotation && marquee
-                ? CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this.annotationKey, timecode || undefined, undefined, marquee, addAsAnnotation) || this.Document
-                : Docs.Create.ConfigDocument({ title: '#' + timecode, _timecodeToShow: timecode, annotationOn: this.Document });
+        const visibleAnchor = () => addAsAnnotation && marquee && (CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this.annotationKey, timecode || undefined, undefined, marquee, addAsAnnotation) || this.Document);
+        const anchor = visibleAnchor() || docAnchor();
         PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), temporal: true, pannable: true } }, this.Document);
+        addAsAnnotation && this.addDocument(anchor);
         return anchor;
     };
 
@@ -428,9 +433,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             }
             return this._stackedTimeline.getView(doc, options);
         }
-        return new Promise<Opt<DocumentView>>(res => {
-            DocumentView.addViewRenderedCb(doc, dv => res(dv));
-        });
+        return new Promise<Opt<DocumentView>>(res => DocumentView.addViewRenderedCb(doc, res));
     };
 
     // extracts video thumbnails and saves them as field of doc
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 5603786f0..aeabc6752 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -13,7 +13,7 @@ import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
 import { RefField } from '../../../fields/RefField';
 import { listSpec } from '../../../fields/Schema';
-import { Cast, NumCast, StrCast, toList, WebCast } from '../../../fields/Types';
+import { Cast, DocCast, NumCast, StrCast, toList, WebCast } from '../../../fields/Types';
 import { ImageField, WebField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction, stringHash } from '../../../Utils';
@@ -104,6 +104,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @computed get webField() {
         return Cast(this.Document[this._props.fieldKey], WebField)?.url;
     }
+    @computed get sidebarKey() {
+        return this.fieldKey + '_sidebar';
+    }
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -308,18 +311,17 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     @action
-    getView = (doc: Doc /* , options: FocusViewOptions */) => {
-        if (Doc.AreProtosEqual(doc, this.Document))
-            return new Promise<Opt<DocumentView>>(res => {
-                res(this.DocumentView?.());
-            });
+    getView = async (doc: Doc, options: FocusViewOptions) => {
+        if (Doc.AreProtosEqual(doc, this.Document)) return new Promise<Opt<DocumentView>>(res => res(this.DocumentView?.()));
+
         if (this.Document.layout_fieldKey === 'layout_icon') this.DocumentView?.().iconify();
         const webUrl = WebCast(doc.config_data)?.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 => {
-            DocumentView.addViewRenderedCb(doc, dv => res(dv));
-        });
+
+        if (DocListCast(this.dataDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
+            return SidebarAnnos.getView(this._sidebarRef.current, this.SidebarShown, () => this.toggleSidebar(false), doc, options);
+        }
+        return undefined;
     };
 
     sidebarAddDocTab = (doc: Doc, where: OpenWhere) => {
@@ -393,7 +395,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 .transformPoint(e.clientX, e.clientY - NumCast(this.layoutDoc.layout_scrollTop));
             if (!this._marqueeref.current?.isEmpty) this._marqueeref.current?.onEnd(theclick[0], theclick[1]);
             else {
-                if (!(e.target as HTMLElement)?.tagName?.includes('INPUT')) this.finishMarquee(theclick[0], theclick[1]);
+                if (!(e.target as HTMLElement)?.tagName?.includes('INPUT') && !(e.target as HTMLElement)?.tagName?.includes('TEXTAREA')) this.finishMarquee(theclick[0], theclick[1]);
                 this._getAnchor = AnchorMenu.Instance?.GetAnchor;
                 this.marqueeing = undefined;
             }
@@ -454,7 +456,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     iframeDown = (e: PointerEvent) => {
         this._textAnnotationCreator = undefined;
         const sel = this._url ? this._iframe?.contentDocument?.getSelection() : window.document.getSelection();
-        if (sel?.empty)
+        if (sel?.empty && !(e.target as HTMLElement).textContent)
             sel.empty(); // Chrome
         else if (sel?.removeAllRanges) sel.removeAllRanges(); // Firefox
 
@@ -465,6 +467,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             .transformPoint(e.clientX, e.clientY - NumCast(this.layoutDoc.layout_scrollTop));
         MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
         const target = e.target as HTMLElement;
+        if ((target as HTMLElement)?.tagName?.includes('INPUT') || (target as HTMLElement)?.tagName?.includes('TEXTAREA')) e.stopPropagation();
         const word = target && getWordAtPoint(target, e.clientX, e.clientY);
         if (!word && !target?.className?.includes('rangeslider') && !target?.onclick && !target?.parentElement?.onclick) {
             this.marqueeing = theclick;
@@ -509,10 +512,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         try {
             href = iframe?.contentWindow?.location.href;
         } catch {
-            runInAction(() => this._warning++);
+            //    runInAction(() => this._warning++);
             href = undefined;
         }
-        let requrlraw = decodeURIComponent(href?.replace(ClientUtils.prepend('') + '/corsProxy/', '') ?? this._url.toString());
+        let requrlraw = decodeURIComponent(href?.replace(ClientUtils.prepend('') + '/corsproxy/', '') ?? this._url.toString());
         if (requrlraw !== this._url.toString()) {
             if (requrlraw.match(/q=.*&/)?.length && this._url.toString().match(/q=.*&/)?.length) {
                 const matches = requrlraw.match(/[^a-zA-z]q=[^&]*/g);
@@ -565,9 +568,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 'click',
                 undoable(
                     action((e: MouseEvent) => {
-                        let eleHref = '';
+                        let eleHref = (e.target as HTMLElement)?.outerHTML?.split('"="')[1]?.split('"')[0];
                         for (let ele = e.target as HTMLElement | Element | null; ele; ele = ele.parentElement) {
-                            if (ele instanceof HTMLAnchorElement) {
+                            if ('href' in ele) {
                                 eleHref = (typeof ele.href === 'string' ? ele.href : eleHref) || (ele.parentElement && 'href' in ele.parentElement ? (ele.parentElement.href as string) : eleHref);
                             }
                         }
@@ -576,7 +579,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             const batch = UndoManager.StartBatch('webclick');
                             e.stopPropagation();
                             setTimeout(() => {
-                                this.setData(eleHref.replace(ClientUtils.prepend(''), origin));
+                                const url = eleHref.replace(ClientUtils.prepend(''), origin);
+                                this.setData(url);
                                 batch.end();
                             });
                             if (this._outerRef.current) {
@@ -858,7 +862,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             );
         }
         if (field instanceof WebField) {
-            const url = this.layoutDoc[this.fieldKey + '_useCors'] ? ClientUtils.CorsProxy(this._webUrl) : this._webUrl;
+            const url = this.layoutDoc[this.fieldKey + '_useCors'] ? '/corsproxy/' + this._webUrl : this._webUrl;
             const scripts = this.dataDoc[this.fieldKey + '_allowScripts'] || this._webUrl.includes('wikipedia.org') || this._webUrl.includes('google.com') || this._webUrl.startsWith('https://bing');
             // if (!scripts) console.log('No scripts for: ' + url);
             return (
@@ -1074,15 +1078,15 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     childPointerEvents = () => (this._props.isContentActive() ? 'all' : undefined);
     @computed get webpage() {
         TraceMobx();
-        const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
+        // const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
         const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as Property.PointerEvents | undefined);
-        const scale = previewScale * (this._props.NativeDimScaling?.() || 1);
+        // const scale = previewScale * (this._props.NativeDimScaling?.() || 1);
         return (
             <div
                 className="webBox-outerContent"
                 ref={this._outerRef}
                 style={{
-                    height: `${100 / scale}%`,
+                    height: '100%', //`${100 / scale}%`,
                     pointerEvents,
                 }}
                 // when active, block wheel events from propagating since they're handled by the iframe
@@ -1175,6 +1179,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     className="webBox-container"
                     style={{
                         width: `calc(${100 / scale}% - ${!this.SidebarShown ? 0 : ((this.sidebarWidth() - WebBox.sidebarResizerWidth) / scale) * (this._previewWidth ? scale : 1)}px)`,
+                        height: `${100 / scale}%`,
                         transform: `scale(${scale})`,
                         pointerEvents,
                     }}
diff --git a/src/client/views/nodes/WebBoxRenderer.js b/src/client/views/nodes/WebBoxRenderer.js
index b727107a9..ef465c453 100644
--- a/src/client/views/nodes/WebBoxRenderer.js
+++ b/src/client/views/nodes/WebBoxRenderer.js
@@ -21,7 +21,7 @@ const ForeignHtmlRenderer = function (styleSheets) {
         return window.location.origin + extension;
     }
     function CorsProxy(url) {
-        return prepend('/corsProxy/') + encodeURIComponent(url);
+        return prepend('/corsproxy/') + encodeURIComponent(url);
     }
     /**
      *
diff --git a/src/client/views/nodes/calendarBox/CalendarBox.scss b/src/client/views/nodes/calendarBox/CalendarBox.scss
index f8ac4b2d1..891db9d90 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.scss
+++ b/src/client/views/nodes/calendarBox/CalendarBox.scss
@@ -1,9 +1,12 @@
+.calendarBox-interactive,
 .calendarBox {
     display: flex;
     width: 100%;
     height: 100%;
     transform-origin: top left;
-    .calendarBox-wrapper {
+    overflow: auto;
+    > div {
+        pointer-events: none;
         width: 100%;
         height: 100%;
         .fc-timegrid-body {
@@ -23,3 +26,27 @@
         }
     }
 }
+
+// AARAV ADD
+
+/* Existing styles */
+.fc-event.mother {
+    font-weight: 500;
+    border-radius: 4px;
+    padding: 2px 4px;
+    border-width: 2px;
+  }
+  
+  /* New styles for completed tasks */
+  .fc-event.completed-task {
+    opacity: 1;
+    filter: grayscale(70%) brightness(90%);
+    text-decoration: line-through;
+    color: #ffffff;
+  }
+  
+.calendarBox-interactive {
+    > div {
+        pointer-events: unset;
+    }
+}
diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
index 2b20a666d..26aed72c3 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -1,15 +1,17 @@
-import { Calendar, EventClickArg, EventDropArg, EventSourceInput } from '@fullcalendar/core';
+import { Calendar, DateSelectArg, EventClickArg, EventDropArg, EventMountArg, EventSourceInput } from '@fullcalendar/core';
+import { EventResizeDoneArg } from '@fullcalendar/interaction';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import multiMonthPlugin from '@fullcalendar/multimonth';
 import timeGrid from '@fullcalendar/timegrid';
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
+import FullCalendar from '@fullcalendar/react';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction, untracked } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { dateRangeStrToDates } from '../../../../ClientUtils';
 import { Doc } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
-import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, StrCast } from '../../../../fields/Types';
 import { DocServer } from '../../../DocServer';
 import { DragManager } from '../../../util/DragManager';
 import { CollectionSubView, SubCollectionViewProps } from '../../collections/CollectionSubView';
@@ -17,26 +19,34 @@ import { ContextMenu } from '../../ContextMenu';
 import { DocumentView } from '../DocumentView';
 import { OpenWhere } from '../OpenWhere';
 import './CalendarBox.scss';
+import { DateField } from '../../../../fields/DateField';
+import { undoable } from '../../../util/UndoManager';
+import { DocumentType } from '../../../documents/DocumentTypes';
 
 type CalendarView = 'multiMonth' | 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay';
 
 @observer
 export class CalendarBox extends CollectionSubView() {
-    _calendarRef: HTMLDivElement | null = null;
+    _calendarRef: FullCalendar | null = null;
     _calendar: Calendar | undefined;
     _observer: ResizeObserver | undefined;
     _eventsDisposer: IReactionDisposer | undefined;
     _selectDisposer: IReactionDisposer | undefined;
+    _isMultiMonth: boolean | undefined;
+
+    @observable _multiMonth = 0;
 
     constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
     }
 
-    @observable _multiMonth = 0;
-    isMultiMonth: boolean | undefined;
+    @computed get calTypeFieldKey() {
+        return this.fieldKey + '_calendarType';
+    }
 
     componentDidMount(): void {
+        this.Document.$calendar = ''; // needed only to make the keyvalue view look nice.
         this._props.setContentViewBox?.(this);
         this._eventsDisposer = reaction(
             () => ({ events: this.calendarEvents }),
@@ -52,7 +62,7 @@ export class CalendarBox extends CollectionSubView() {
                         type: 'CHANGE_DATE',
                         dateMarker: state.dateEnv.createMarker(initialDate.start),
                     });
-                setTimeout(() => (initialDate.start.toISOString() !== initialDate.end.toISOString() ? this._calendar?.select(initialDate.start, initialDate.end) : this._calendar?.select(initialDate.start)));
+                setTimeout(() => initialDate.start.toISOString() !== initialDate.end.toISOString() && this._calendar?.select(initialDate.start, initialDate.end));
             },
             { fireImmediately: true }
         );
@@ -64,7 +74,8 @@ export class CalendarBox extends CollectionSubView() {
 
     @computed get calendarEvents(): EventSourceInput | undefined {
         return this.childDocs.map(doc => {
-            const { start, end } = dateRangeStrToDates(StrCast(doc.date_range));
+            const { start, end } = dateRangeStrToDates(StrCast(doc.$task_dateRange));
+            const isCompleted = BoolCast(doc.$task_completed); // AARAV ADD
             return {
                 title: StrCast(doc.title),
                 start,
@@ -72,8 +83,8 @@ export class CalendarBox extends CollectionSubView() {
                 groupId: doc[Id],
                 startEditable: true,
                 endEditable: true,
-                allDay: BoolCast(doc.allDay),
-                classNames: ['mother'], // will determine the style
+                allDay: BoolCast(doc.$task_allDay),
+                classNames: ['mother', isCompleted ? 'completed-task' : ''], // will determine the style
                 editable: true, // subject to change in the future
                 backgroundColor: this.eventToColor(doc),
                 borderColor: this.eventToColor(doc),
@@ -86,16 +97,16 @@ export class CalendarBox extends CollectionSubView() {
     }
 
     @computed get dateRangeStrDates() {
-        return dateRangeStrToDates(StrCast(this.Document.date_range));
+        return dateRangeStrToDates(StrCast(this.Document._calendar_dateRange));
     }
     get dateSelect() {
-        return dateRangeStrToDates(StrCast(this.Document.date));
+        return dateRangeStrToDates(StrCast(this.Document._calendar_date));
     }
 
     // Choose a calendar view based on the date range
     @computed get calendarViewType(): CalendarView {
-        if (this.dataDoc[this.fieldKey + '_calendarType']) return StrCast(this.dataDoc[this.fieldKey + '_calendarType']) as CalendarView;
-        if (this.isMultiMonth) return 'multiMonth';
+        if (this.dataDoc[this.calTypeFieldKey]) return StrCast(this.dataDoc[this.calTypeFieldKey]) as CalendarView;
+        if (this._isMultiMonth) return 'multiMonth';
         const { start, end } = this.dateRangeStrDates;
         if (start.getFullYear() !== end.getFullYear() || start.getMonth() !== end.getMonth()) return 'multiMonth';
         if (Math.abs(start.getDay() - end.getDay()) > 7) return 'dayGridMonth';
@@ -104,7 +115,9 @@ export class CalendarBox extends CollectionSubView() {
 
     // TODO: Return a different color based on the event type
     eventToColor = (event: Doc): string => {
-        return 'red' + event;
+        return StrCast(event.type) === DocumentType.TASK
+            ? '#20B2AA' // teal for tasks
+            : 'red';
     };
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -112,7 +125,7 @@ export class CalendarBox extends CollectionSubView() {
         if (!super.onInternalDrop(e, de)) return false;
         de.complete.docDragData?.droppedDocuments.forEach(doc => {
             const today = new Date().toISOString();
-            if (!doc.date_range) doc.$date_range = `${today}|${today}`;
+            if (!doc.$task_dateRange) doc.$task_dateRange = `${today}|${today}`;
         });
         return true;
     };
@@ -122,10 +135,31 @@ export class CalendarBox extends CollectionSubView() {
         return false;
     };
 
-    handleEventDrop = (arg: EventDropArg) => {
+    handleEventDrop = undoable((arg: EventDropArg | EventResizeDoneArg) => {
         const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
-        doc && arg.event.start && (doc.date_range = arg.event.start?.toString() + '|' + (arg.event.end ?? arg.event.start).toString());
-    };
+        // doc && arg.event.start && (doc.$task_dateRange = arg.event.start?.toString() + '|' + (arg.event.end ?? arg.event.start).toString());
+        if (!doc || !arg.event.start) return;
+
+        // get the new start and end dates
+        const startDate = new Date(arg.event.start);
+        const endDate = new Date(arg.event.end ?? arg.event.start);
+
+        // update date range, time range, and all day status
+        doc.$task_dateRange = `${startDate.toISOString()}|${endDate.toISOString()}`;
+
+        const allDayStatus = arg.event.allDay ?? false;
+        if (doc.$task_allDay !== allDayStatus) {
+            doc.$task_allDay = allDayStatus;
+        }
+
+        if (doc.$task_allDay) {
+            delete doc.$task_startTime;
+            delete doc.$task_endTime;
+        } else {
+            doc.$task_startTime = new DateField(startDate);
+            doc.task_endTime = new DateField(endDate);
+        }
+    }, 'change event date');
 
     handleEventClick = (arg: EventClickArg) => {
         const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
@@ -144,68 +178,129 @@ export class CalendarBox extends CollectionSubView() {
     };
 
     // https://fullcalendar.io
-    renderCalendar = () => {
-        const cal = !this._calendarRef
-            ? null
-            : (this._calendar = new Calendar(this._calendarRef, {
-                  plugins: [multiMonthPlugin, dayGridPlugin, timeGrid, interactionPlugin],
-                  headerToolbar: {
-                      left: 'prev,next today',
-                      center: 'title',
-                      right: 'multiMonth dayGridMonth timeGridWeek timeGridDay',
-                  },
-                  selectable: true,
-                  initialView: this.calendarViewType === 'multiMonth' ? undefined : this.calendarViewType,
-                  initialDate: this.dateSelect.start,
-                  navLinks: true,
-                  editable: false,
-                  displayEventTime: false,
-                  displayEventEnd: false,
-                  select: info => {
-                      const start = dateRangeStrToDates(info.startStr).start.toISOString();
-                      const end = dateRangeStrToDates(info.endStr).start.toISOString();
-                      this.dataDoc.date = start + '|' + end;
-                  },
-                  aspectRatio: NumCast(this.Document.width) / NumCast(this.Document.height),
-                  events: this.calendarEvents,
-                  eventClick: this.handleEventClick,
-                  eventDrop: this.handleEventDrop,
-                  eventDidMount: arg => {
-                      arg.el.addEventListener('pointerdown', ev => {
-                          ev.button && ev.stopPropagation();
-                      });
-                      if (navigator.userAgent.includes('Macintosh')) {
-                          arg.el.addEventListener('pointerup', ev => {
-                              ev.button && ev.stopPropagation();
-                              ev.button && this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId);
-                          });
-                      }
-                      arg.el.addEventListener('contextmenu', ev => {
-                          if (!navigator.userAgent.includes('Macintosh')) {
-                              this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId);
+    @computed get renderCalendar() {
+        const availableWidth = this._props.PanelWidth() / (this._props.DocumentView?.().UIBtnScaling ?? 1);
+        const btn = (text: string, view: string | (() => void), hint: string) => ({ text, hint, click: typeof view === 'string' ? () => this._calendarRef?.getApi().changeView(view) : view });
+        return (
+            <FullCalendar
+                ref={(r: unknown) => (this._calendarRef = r as FullCalendar)}
+                customButtons={{
+                    nowBtn: btn('Now', () => this._calendarRef?.getApi().gotoDate(new Date()), 'Go to Today'),
+                    multiBtn: btn('M+', 'multiMonth', 'Multiple Month View'),
+                    monthBtn: btn('M', 'dayGridMonth', 'Month View'),
+                    weekBtn: btn('W', 'timeGridWeek', 'Week View'),
+                    dayBtn: btn('D', 'timeGridDay', 'Day View'),
+                }}
+                headerToolbar={
+                    availableWidth > 450
+                        ? {
+                              left: 'prev,next nowBtn',
+                              center: 'title',
+                              right: 'multiBtn monthBtn weekBtn dayBtn',
                           }
-                          ev.stopPropagation();
-                          ev.preventDefault();
-                      });
-                  },
-              }));
-        cal?.render();
-        setTimeout(() => cal?.view.calendar.select(this.dateSelect.start, this.dateSelect.end));
-    };
+                        : availableWidth > 300
+                          ? {
+                                left: 'prev,next',
+                                center: 'title',
+                                right: '',
+                            }
+                          : {
+                                left: '',
+                                center: 'title',
+                                right: '',
+                            }
+                }
+                selectable={true}
+                initialView={this.calendarViewType === 'multiMonth' ? undefined : this.calendarViewType}
+                views={{
+                    multiMonth: {
+                        type: 'multiMonth',
+                        duration: { months: 12 },
+                    },
+                }}
+                initialDate={untracked(() => this.dateSelect.start)}
+                navLinks={true}
+                editable={false}
+                // expandRows={true}
+                // handleWindowResize={true}
+                displayEventTime={false}
+                displayEventEnd={false}
+                plugins={[multiMonthPlugin, dayGridPlugin, timeGrid, interactionPlugin]}
+                aspectRatio={this._props.PanelWidth() / this._props.PanelHeight()}
+                weekends={true}
+                events={this.calendarEvents}
+                eventClick={this.handleEventClick}
+                eventDrop={this.handleEventDrop}
+                unselectAuto={false}
+                // unselect={() => {}}
+                select={(info: DateSelectArg) => {
+                    const start = dateRangeStrToDates(info.startStr).start.toISOString();
+                    const end = info.allDay ? start : dateRangeStrToDates(info.endStr).start.toISOString();
+                    this.Document._calendar_date = start + '|' + end;
+                }}
+                // eventContent={() => {
+                //     return null;
+                // }}
+                eventDidMount={(arg: EventMountArg) => {
+                    const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
+                    if (!doc) return;
+
+                    if (doc.type === DocumentType.TASK) {
+                        const checkButton = document.createElement('button');
+                        checkButton.innerText = doc.$task_completed ? '✅' : '⬜';
+                        checkButton.style.position = 'absolute';
+                        checkButton.style.right = '5px';
+                        checkButton.style.top = '50%';
+                        checkButton.style.transform = 'translateY(-50%)';
+                        checkButton.style.background = 'transparent';
+                        checkButton.style.border = 'none';
+                        checkButton.style.cursor = 'pointer';
+                        checkButton.style.fontSize = '18px';
+                        checkButton.style.zIndex = '1000';
+                        checkButton.style.padding = '0';
+                        checkButton.style.margin = '0';
+
+                        checkButton.onclick = ev => {
+                            ev.stopPropagation();
+                            doc.$task_completed = !doc.$task_completed;
+                            this._calendar?.refetchEvents();
+                        };
+
+                        arg.el.style.position = 'relative';
+                        arg.el.appendChild(checkButton);
+                    }
+                    arg.el.addEventListener('pointerdown', ev => ev.button && ev.stopPropagation());
+                    if (navigator.userAgent.includes('Macintosh')) {
+                        arg.el.addEventListener('pointerup', ev => {
+                            ev.button && ev.stopPropagation();
+                            ev.button && this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId);
+                        });
+                    }
+                    arg.el.addEventListener('contextmenu', ev => {
+                        if (!navigator.userAgent.includes('Macintosh')) {
+                            this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId);
+                        }
+                        ev.stopPropagation();
+                        ev.preventDefault();
+                    });
+                }}
+            />
+        );
+    }
 
     render() {
         return (
             <div
                 key={this.calendarViewType}
-                className="calendarBox"
+                className={`calendarBox${this._props.isContentActive() ? '-interactive' : ''}`}
                 onPointerDown={e => {
                     setTimeout(
                         action(() => {
                             const cname = (e.nativeEvent.target as HTMLButtonElement)?.className ?? '';
-                            if (cname.includes('multiMonth')) this.dataDoc[this.fieldKey + '_calendarType'] = 'multiMonth';
-                            if (cname.includes('dayGridMonth')) this.dataDoc[this.fieldKey + '_calendarType'] = 'dayGridMonth';
-                            if (cname.includes('timeGridWeek')) this.dataDoc[this.fieldKey + '_calendarType'] = 'timeGridWeek';
-                            if (cname.includes('timeGridDay')) this.dataDoc[this.fieldKey + '_calendarType'] = 'timeGridDay';
+                            if (cname.includes('multiMonth')) this.dataDoc[this.calTypeFieldKey] = 'multiMonth';
+                            if (cname.includes('dayGridMonth')) this.dataDoc[this.calTypeFieldKey] = 'dayGridMonth';
+                            if (cname.includes('timeGridWeek')) this.dataDoc[this.calTypeFieldKey] = 'timeGridWeek';
+                            if (cname.includes('timeGridDay')) this.dataDoc[this.calTypeFieldKey] = 'timeGridDay';
                         })
                     );
                 }}
@@ -217,17 +312,8 @@ export class CalendarBox extends CollectionSubView() {
                 ref={r => {
                     this.createDashEventsTarget(r);
                     this.fixWheelEvents(r, this._props.isContentActive);
-
-                    if (r) {
-                        this._observer?.disconnect();
-                        (this._observer = new ResizeObserver(() => {
-                            this._calendar?.setOption('aspectRatio', NumCast(this.Document.width) / NumCast(this.Document.height));
-                            this._calendar?.updateSize();
-                        })).observe(r);
-                        this.renderCalendar();
-                    }
                 }}>
-                <div className="calendarBox-wrapper" ref={r => (this._calendarRef = r)} />
+                {this.renderCalendar}
             </div>
         );
     }
diff --git a/src/client/views/nodes/formattedText/DailyJournal.tsx b/src/client/views/nodes/formattedText/DailyJournal.tsx
index 871c556e6..564609494 100644
--- a/src/client/views/nodes/formattedText/DailyJournal.tsx
+++ b/src/client/views/nodes/formattedText/DailyJournal.tsx
@@ -9,14 +9,22 @@ import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { Plugin } from 'prosemirror-state';
 import { RTFCast } from '../../../../fields/Types';
+import { Mark } from 'prosemirror-model';
+import { observer } from 'mobx-react';
 
 export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable journalDate: string;
-    @observable typingTimeout: NodeJS.Timeout | null = null; // Track typing delay
-    @observable lastUserText: string = ''; // Store last user-entered text
+    @observable typingTimeout: NodeJS.Timeout | null = null; // track typing delay
+    @observable lastUserText: string = ''; // store last user-entered text
+    @observable isLoadingPrompts: boolean = false; // track if prompts are loading
+    @observable showPromptMenu = false;
+    @observable inlinePromptsEnabled = true;
+    @observable askPromptsEnabled = true;
+
     _ref = React.createRef<FormattedTextBox>(); // reference to the formatted textbox
     predictiveTextRange: { from: number; to: number } | null = null; // where predictive text starts and ends
     private predictiveText: string | null = ' ... why?';
+    private prePredictiveMarks: Mark[] = [];
 
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(DailyJournal, fieldStr);
@@ -40,7 +48,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
             month: 'long',
             day: 'numeric',
         });
-        console.log('getFormattedDate():', date);
+        // console.log('getFormattedDate():', date);
         return date;
     }
 
@@ -49,15 +57,15 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
      */
     @action
     setDailyTitle() {
-        console.log('setDailyTitle() called...');
-        console.log('Current title before update:', this.dataDoc.title);
+        // console.log('setDailyTitle() called...');
+        // console.log('Current title before update:', this.dataDoc.title);
 
         if (!this.dataDoc.title || this.dataDoc.title !== this.journalDate) {
-            console.log('Updating title to:', this.journalDate);
+            // console.log('Updating title to:', this.journalDate);
             this.dataDoc.title = this.journalDate;
         }
 
-        console.log('New title after update:', this.dataDoc.title);
+        // console.log('New title after update:', this.dataDoc.title);
     }
 
     /**
@@ -68,7 +76,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const placeholderText = 'Start writing here...';
         const dateText = `${this.journalDate}\n`;
 
-        console.log('Checking if dataDoc has text field...');
+        // console.log('Checking if dataDoc has text field...');
 
         this.dataDoc[this.fieldKey] = RichTextField.textToRtfFormat(
             [
@@ -80,7 +88,63 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
             placeholderText.length
         );
 
-        console.log('Current text field:', this.dataDoc[this.fieldKey]);
+        // console.log('Current text field:', this.dataDoc[this.fieldKey]);
+    }
+
+    /**
+     * Method to show/hide the prompts menu
+     */
+    @action.bound togglePromptMenu() {
+        this.showPromptMenu = !this.showPromptMenu;
+    }
+
+    /**
+     * Method to toggle on/off inline predictive prompts
+     */
+    @action.bound toggleInlinePrompts() {
+        this.inlinePromptsEnabled = !this.inlinePromptsEnabled;
+    }
+
+    /**
+     * Method to toggle on/off inline /ask prompts
+     */
+    @action.bound toggleAskPrompts() {
+        this.askPromptsEnabled = !this.askPromptsEnabled;
+    }
+
+    /**
+     * Method to handle click on document (to close prompt menu)
+     * @param e - a click on the document
+     */
+    @action.bound
+    handleDocumentClick(e: MouseEvent) {
+        const menu = document.getElementById('prompts-menu');
+        const button = document.getElementById('prompts-button');
+        if (this.showPromptMenu && menu && !menu.contains(e.target as Node) && button && !button.contains(e.target as Node)) {
+            this.showPromptMenu = false;
+        }
+    }
+
+    /**
+     * Method to set initial date of document in the calendar view
+     */
+
+    @action setInitialDateRange() {
+        if (!this.dataDoc.$task_dateRange && this.journalDate) {
+            const parsedDate = new Date(this.journalDate);
+            if (!isNaN(parsedDate.getTime())) {
+                const localStart = new Date(parsedDate.getFullYear(), parsedDate.getMonth(), parsedDate.getDate());
+                const localEnd = new Date(localStart); // same day
+
+                this.dataDoc.$task_dateRange = `${localStart.toISOString()}|${localEnd.toISOString()}`;
+                this.dataDoc.$task_allDay = true;
+                this.dataDoc.$task = ''; // needed only to make the keyvalue view look good.
+
+                // console.log('Set task_dateRange and task_allDay on journal (from local date):', this.dataDoc.$task_dateRange);
+            } else {
+                // console.log('Could not parse journalDate:', this.journalDate);
+            }
+        }
     }
 
     /**
@@ -94,8 +158,26 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
         if (this.typingTimeout) clearTimeout(this.typingTimeout);
 
-        this.typingTimeout = setTimeout(() => {
+        const { state } = editorView;
+        const cursorPos = state.selection.from;
+
+        // characters before cursor
+        const triggerText = state.doc.textBetween(Math.max(0, cursorPos - 4), cursorPos);
+
+        if (triggerText === '/ask' && this.askPromptsEnabled) {
+            // remove /ask text
+            const tr = state.tr.delete(cursorPos - 4, cursorPos);
+            editorView.dispatch(tr);
+
+            // insert predicted question
             this.insertPredictiveQuestion();
+            return;
+        }
+
+        this.typingTimeout = setTimeout(() => {
+            if (this.inlinePromptsEnabled) {
+                this.insertPredictiveQuestion();
+            }
         }, 3500);
     };
 
@@ -129,28 +211,38 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
         // Only insert if we're at end of node, or there's a newline node after
         if (!isAtEndOfParent && !hasNewlineAfter) return;
 
-        const fontSizeMark = schema.marks.pFontSize.create({ fontSize: '14px' });
+        // Save current marks at cursor
+        const currentMarks = state.storedMarks || resolvedPos.marks();
+        this.prePredictiveMarks = [...currentMarks];
+
+        // color and italics are preset for predictive question, font and size are adaptive
         const fontColorMark = schema.marks.pFontColor.create({ fontColor: 'lightgray' });
         const fontItalicsMark = schema.marks.em.create();
+        const fontSizeMark = this.prePredictiveMarks.find(m => m.type.name === 'pFontSize');
+        const fontFamilyMark = this.prePredictiveMarks.find(m => m.type.name === 'pFontFamily'); // if applicable
 
-        this.predictiveText = ' ...'; // placeholder for now
+        this.predictiveText = ' ...'; // placeholder
 
         const fullTextUpToCursor = state.doc.textBetween(0, state.selection.to, '\n', '\n');
-        const gptPrompt = `Given the following incomplete journal entry, generate a single 2-5 word question that continues the user's thought:\n\n"${fullTextUpToCursor}"`;
+        const gptPrompt = `Given the following incomplete journal entry, generate a single 2-5 word reflective question that continues the user's thought:\n\n"${fullTextUpToCursor}"`;
         const res = await gptAPICall(gptPrompt, GPTCallType.COMPLETION);
         if (!res) return;
 
         // styled text node
         const text = ` ... ${res.trim()}`;
-        const predictedText = schema.text(text, [fontSizeMark, fontColorMark, fontItalicsMark]);
+        const predictedText = schema.text(text, [fontColorMark, fontItalicsMark, ...(fontSizeMark ? [fontSizeMark] : []), ...(fontFamilyMark ? [fontFamilyMark] : [])]);
 
         // Insert styled text at cursor position
-        const transaction = state.tr.insert(insertPos, predictedText).setStoredMarks([state.schema.marks.pFontColor.create({ fontColor: 'gray' })]); // should probably instead inquire marks before predictive prompt
+        const transaction = state.tr.insert(insertPos, predictedText).setStoredMarks(this.prePredictiveMarks);
         dispatch(transaction);
 
         this.predictiveText = text;
     };
 
+    /**
+     * Method to remove the predictive question upon type/click
+     * @returns - once predictive text is found, or all text has been checked
+     */
     createPredictiveCleanupPlugin = () => {
         return new Plugin({
             view: () => {
@@ -168,15 +260,20 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 if (node.isText && node.text === textToRemove) {
                                     const tr = state.tr.delete(pos, pos + node.nodeSize);
 
-                                    // Set the desired default marks for future input
+                                    // default marks for input
                                     const fontSizeMark = state.schema.marks.pFontSize.create({ fontSize: '14px' });
                                     const fontColorMark = state.schema.marks.pFontColor.create({ fontColor: 'gray' });
                                     tr.setStoredMarks([]);
-                                    tr.setStoredMarks([fontSizeMark, fontColorMark]);
+                                    if (this.prePredictiveMarks.length > 0) {
+                                        tr.setStoredMarks(this.prePredictiveMarks);
+                                    } else {
+                                        tr.setStoredMarks([fontSizeMark, fontColorMark]);
+                                    }
 
                                     dispatch(tr);
 
                                     this.predictiveText = null;
+                                    this.prePredictiveMarks = [];
                                     return false;
                                 }
                                 return true;
@@ -194,8 +291,9 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     componentDidMount(): void {
-        console.log('componentDidMount() triggered...');
-        console.log('Text: ' + RTFCast(this.Document.text)?.Text);
+        // console.log('componentDidMount() triggered...');
+        document.addEventListener('mousedown', this.handleDocumentClick);
+        // console.log('Text: ' + RTFCast(this.Document.text)?.Text);
 
         const editorView = this._ref.current?.EditorView;
         if (editorView) {
@@ -214,15 +312,17 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const isDefaultTitle = isTitleString && currentTitle.includes('Untitled DailyJournal');
 
         if (isTextEmpty && isDefaultTitle) {
-            console.log('Journal title and text are default. Initializing...');
+            // console.log('Journal title and text are default. Initializing...');
             this.setDailyTitle();
             this.setDailyText();
+            this.setInitialDateRange();
         } else {
-            console.log('Journal already has content. Skipping initialization.');
+            // console.log('Journal already has content. Skipping initialization.');
         }
     }
 
     componentWillUnmount(): void {
+        document.removeEventListener('mousedown', this.handleDocumentClick);
         const editorView = this._ref.current?.EditorView;
         if (editorView) {
             editorView.dom.removeEventListener('input', this.onTextInput);
@@ -230,10 +330,20 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
         if (this.typingTimeout) clearTimeout(this.typingTimeout);
     }
 
+    /**
+     * Method to generate pormpts via GPT
+     * @returns - if failed
+     */
     @action handleGeneratePrompts = async () => {
+        if (this.isLoadingPrompts) {
+            return;
+        }
+
+        this.isLoadingPrompts = true;
+
         const rawText = RTFCast(this.Document.text)?.Text ?? '';
-        console.log('Extracted Journal Text:', rawText);
-        console.log('Before Update:', this.Document.text, 'Type:', typeof this.Document.text);
+        // console.log('Extracted Journal Text:', rawText);
+        // console.log('Before Update:', this.Document.text, 'Type:', typeof this.Document.text);
 
         if (!rawText.trim()) {
             alert('Journal is empty! Write something first.');
@@ -273,9 +383,15 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
             }
         } catch (err) {
             console.error('Error calling GPT:', err);
+        } finally {
+            this.isLoadingPrompts = false;
         }
     };
 
+    /**
+     * Method to render the styled DailyJournal
+     * @returns - the HTML component for the journal
+     */
     render() {
         return (
             <div
@@ -296,6 +412,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 }}>
                 {/* GPT Button */}
                 <button
+                    id="prompts-button"
                     style={{
                         position: 'absolute',
                         bottom: '5px',
@@ -308,9 +425,88 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         cursor: 'pointer',
                         zIndex: 10,
                     }}
-                    onClick={this.handleGeneratePrompts}>
+                    onClick={this.togglePromptMenu}>
                     Prompts
                 </button>
+                {this.showPromptMenu && (
+                    <div
+                        id="prompts-menu"
+                        style={{
+                            position: 'absolute',
+                            bottom: '45px',
+                            right: '5px',
+                            backgroundColor: 'white',
+                            border: '1px solid #ccc',
+                            borderRadius: '4px',
+                            padding: '10px',
+                            boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
+                            zIndex: 20,
+                            minWidth: '170px',
+                            maxWidth: 'fit-content',
+                            overflow: 'auto',
+                        }}>
+                        <div
+                            style={{
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                                alignItems: 'center',
+                                marginBottom: '10px',
+                            }}>
+                            <label
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    fontSize: '14px',
+                                    justifyContent: 'flex-end',
+                                    width: '100%',
+                                }}>
+                                /ask
+                                <input type="checkbox" checked={this.askPromptsEnabled} onChange={this.toggleAskPrompts} style={{ margin: 0 }} />
+                            </label>
+                        </div>
+
+                        <div
+                            style={{
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                                alignItems: 'center',
+                                marginBottom: '10px',
+                            }}>
+                            <label
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    fontSize: '14px',
+                                    justifyContent: 'flex-end',
+                                    width: '100%',
+                                }}>
+                                Inline Prompting
+                                <input type="checkbox" checked={this.inlinePromptsEnabled} onChange={this.toggleInlinePrompts} style={{ margin: 0 }} />
+                            </label>
+                        </div>
+
+                        <button
+                            onClick={() => {
+                                this.showPromptMenu = false;
+                                this.handleGeneratePrompts();
+                            }}
+                            disabled={this.isLoadingPrompts}
+                            style={{
+                                backgroundColor: '#9EAD7C',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: this.isLoadingPrompts ? 'not-allowed' : 'pointer',
+                                opacity: this.isLoadingPrompts ? 0.6 : 1,
+                                padding: '5px 10px',
+                                float: 'right',
+                            }}>
+                            Generate Prompts
+                        </button>
+                    </div>
+                )}
 
                 <FormattedTextBox ref={this._ref} {...this._props} fieldKey={'text'} Document={this.Document} TemplateDataDocument={undefined} />
             </div>
@@ -318,8 +514,10 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
     }
 }
 
+const ObservedDailyJournal = observer(DailyJournal);
+
 Docs.Prototypes.TemplateMap.set(DocumentType.JOURNAL, {
-    layout: { view: DailyJournal, dataField: 'text' },
+    layout: { view: ObservedDailyJournal, dataField: 'text' },
     options: {
         acl: '',
         _height: 35,
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index 7ea5d1fcf..d700a705a 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -262,7 +262,8 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
     render() {
         return (
             <div
-                className={`dashFieldView${this.isRowActive() ? '-active' : ''}`}
+                // eslint-disable-next-line no-use-before-define
+                className={`${DashFieldView.name}${this.isRowActive() ? '-active' : ''}`}
                 ref={this._fieldRef}
                 style={{
                     // width: this._props.width,
diff --git a/src/client/views/nodes/formattedText/EquationEditor.tsx b/src/client/views/nodes/formattedText/EquationEditor.tsx
index 48efa6e63..23d273523 100644
--- a/src/client/views/nodes/formattedText/EquationEditor.tsx
+++ b/src/client/views/nodes/formattedText/EquationEditor.tsx
@@ -72,6 +72,10 @@ class EquationEditor extends Component<EquationEditorProps> {
         this.mathField.latex(value || '');
     }
 
+    componentDidUpdate(prevProps: Readonly<EquationEditorProps>): void {
+        !prevProps.value && this.mathField.latex(this.props.value || '');
+    }
+
     render() {
         return <span ref={this.element} style={{ border: '0px', boxShadow: 'None' }} />;
     }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index ad75d320a..0c3179173 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -100,7 +100,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
     public static PasteOnLoad: ClipboardEvent | undefined;
     public static SelectOnLoadChar = '';
-    public static LiveTextUndo: UndoManager.Batch | undefined; // undo batch when typing a new text note into a collection
+    public static LiveTextUndo: UndoManager.Batch | undefined; // undo batch request when typing a new text note into a collection
+    private _liveTextUndo: UndoManager.Batch | undefined; // captured undo batch when typing a new text note into a collection
 
     private static _nodeViews: (self: FormattedTextBox) => { [key: string]: NodeViewConstructor };
     private _curHighlights = new ObservableSet<string>(['Audio Tags']);
@@ -272,13 +273,16 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             e.preventDefault();
             e.stopPropagation();
             const targetCreator = (annotationOn?: Doc) => {
-                const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn);
+                const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
+                target.layout_fitWidth = true;
                 DocumentView.SetSelectOnLoad(target);
                 return target;
             };
 
+            const sourceAnchorCreator = () => this.getAnchor(true);
+
             const docView = this.DocumentView?.();
-            docView && DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, () => this.getAnchor(true), targetCreator), e.pageX, e.pageY);
+            docView && DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY);
         });
 
         AnchorMenu.Instance.AddDrawingAnnotation = (drawing: Doc) => {
@@ -452,10 +456,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         const newAutoLinks = new Set<Doc>();
         const oldAutoLinks = Doc.Links(this.Document).filter(
             link => 
-                ((!Doc.isTemplateForField(this.Document) &&
-                    ((DocCast(link.link_anchor_1) && !Doc.isTemplateForField(DocCast(link.link_anchor_1)!)) || !Doc.AreProtosEqual(DocCast(link.link_anchor_1), this.Document)) &&
-                    ((DocCast(link.link_anchor_2) && !Doc.isTemplateForField(DocCast(link.link_anchor_2)!)) || !Doc.AreProtosEqual(DocCast(link.link_anchor_2), this.Document))) ||
-                 (Doc.isTemplateForField(this.Document) && (link.link_anchor_1 === this.Document || link.link_anchor_2 === this.Document))) &&
+                ((!Doc.IsTemplateForField(this.Document) &&
+                    ((DocCast(link.link_anchor_1) && !Doc.IsTemplateForField(DocCast(link.link_anchor_1)!)) || !Doc.AreProtosEqual(DocCast(link.link_anchor_1), this.Document)) &&
+                    ((DocCast(link.link_anchor_2) && !Doc.IsTemplateForField(DocCast(link.link_anchor_2)!)) || !Doc.AreProtosEqual(DocCast(link.link_anchor_2), this.Document))) ||
+                 (Doc.IsTemplateForField(this.Document) && (link.link_anchor_1 === this.Document || link.link_anchor_2 === this.Document))) &&
                 link.link_relationship === LinkManager.AutoKeywords
         ); // prettier-ignore
         if (this.EditorView?.state.doc.textContent) {
@@ -1097,15 +1101,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
     getView = (doc: Doc, options: FocusViewOptions) => {
         if (DocListCast(this.dataDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
-            if (!this.SidebarShown) {
-                this.toggleSidebar(false);
-                options.didMove = true;
-            }
-            setTimeout(() => this._sidebarRef?.current?.makeDocUnfiltered(doc));
+            return SidebarAnnos.getView(this._sidebarRef.current, this.SidebarShown, () => this.toggleSidebar(false), doc, options);
         }
-        return new Promise<Opt<DocumentView>>(res => {
-            DocumentView.addViewRenderedCb(doc, dv => res(dv));
-        });
+        return new Promise<Opt<DocumentView>>(res => DocumentView.addViewRenderedCb(doc, res));
     };
     focus = (textAnchor: Doc, options: FocusViewOptions) => {
         const focusSpeed = options.zoomTime ?? 500;
@@ -1172,13 +1170,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         return undefined;
     };
 
-    // 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 = action((scrollHeight: number) => {
-        this.layoutDoc['_' + this.fieldKey + '_height'] = scrollHeight;
-        if (!this.layoutDoc.isTemplateForField && NumCast(this.layoutDoc._nativeHeight)) this.layoutDoc._nativeHeight = scrollHeight;
-    });
-
     addPlugin = (plugin: Plugin) => {
         const editorView = this.EditorView;
         if (editorView) {
@@ -1209,21 +1200,31 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         this._disposers.width = reaction(this._props.PanelWidth, this.tryUpdateScrollHeight);
         this._disposers.scrollHeight = reaction(
             () => ({ scrollHeight: this.scrollHeight, layoutAutoHeight: this.layout_autoHeight, width: NumCast(this.layoutDoc._width) }),
-            ({ width, scrollHeight, layoutAutoHeight }) => width && layoutAutoHeight && this.resetNativeHeight(scrollHeight),
+            ({ width, scrollHeight, layoutAutoHeight }) => width && layoutAutoHeight && (this.layoutDoc['_' + this.fieldKey + '_height'] = scrollHeight),
             { fireImmediately: true }
         );
         this._disposers.componentHeights = reaction(
             // set the document height when one of the component heights changes and layout_autoHeight is on
-            () => ({ border: this._props.PanelHeight(), sidebarHeight: this.sidebarHeight, textHeight: this.textHeight, layoutAutoHeight: this.layout_autoHeight, marginsHeight: this.layout_autoHeightMargins }),
-            ({ border, sidebarHeight, textHeight, layoutAutoHeight, marginsHeight }) => {
+            () => ({
+                border: this._props.PanelHeight(),
+                scrollHeight: NumCast(this.layoutDoc['_' + this.fieldKey + '_height']),
+                sidebarHeight: this.sidebarHeight,
+                textHeight: this.textHeight,
+                layoutAutoHeight: this.layout_autoHeight,
+                marginsHeight: this.layout_autoHeightMargins,
+            }),
+            ({ border, sidebarHeight, scrollHeight, textHeight, layoutAutoHeight, marginsHeight }) => {
                 const newHeight = this.contentScaling * (marginsHeight + Math.max(sidebarHeight, textHeight));
                 if (
                     (!Array.from(this._curHighlights).includes('Bold Text') || this._props.isSelected()) && //
                     layoutAutoHeight &&
                     newHeight &&
-                    (newHeight !== this.layoutDoc.height || border < NumCast(this.layoutDoc.height)) &&
+                    (newHeight !== this.layoutDoc.height || border < NumCast(this.layoutDoc.height) || this.layoutDoc._nativeHeight !== scrollHeight) &&
                     !this._props.dontRegisterView
                 ) {
+                    if (NumCast(this.layoutDoc.nativeHeight)) {
+                        this.layoutDoc._nativeHeight = scrollHeight;
+                    }
                     this._props.setHeight?.(newHeight);
                 }
             },
@@ -1246,7 +1247,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 const protoTime = protoData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? (DateCast(DocCast(this.dataDoc.proto)?.[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0) : 0;
                 const recentData = dataTime >= layoutTime ? (protoTime >= dataTime ? protoData : dataData) : layoutTime >= protoTime ? layoutData : protoData;
                 const whichData = recentData ?? (this.layoutDoc.isTemplateDoc ? layoutData : protoData) ?? protoData;
-                return !whichData ? undefined : { data: RTFCast(whichData), str: Field.toString(DocCast(whichData) ?? StrCast(whichData)) };
+                return !whichData ? undefined : { data: RTFCast(whichData), str: Field.toString(DocCast(whichData) ?? NumCast(whichData)?.toString() ?? StrCast(whichData)) };
             },
             incomingValue => {
                 if (this.EditorView && this.ApplyingChange !== this.fieldKey) {
@@ -1560,7 +1561,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
         if (this.EditorView && selectOnLoad && !this._props.dontRegisterView && !this._props.dontSelectOnLoad && this.isActiveTab(this.ProseRef)) {
             const { $from } = this.EditorView.state.selection;
-            const mark = schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail(), modified: Math.floor(Date.now() / 1000) });
+            const mark = schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail() });
             const curMarks = this.EditorView.state.storedMarks ?? $from?.marksAcross(this.EditorView.state.selection.$head) ?? [];
             const storedMarks = [...curMarks.filter(m => m.type !== mark.type), mark];
             if (selLoadChar === 'Enter') {
@@ -1571,6 +1572,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             this.tryUpdateDoc(true); // calling select() above will make isContentActive() true only after a render .. which means the selectAll() above won't write to the Document and the incomingValue will overwrite the selection with the non-updated data
         }
         if (selectOnLoad) {
+            this._liveTextUndo = FormattedTextBox.LiveTextUndo;
+            FormattedTextBox.LiveTextUndo = undefined;
             this.EditorView!.focus();
         }
         if (this._props.isContentActive()) this.prepareForTyping();
@@ -1587,7 +1590,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             const { text, paragraph } = schema.nodes;
             const selNode = this.EditorView.state.selection.$anchor.node();
             if (this.EditorView.state.selection.from === 1 && this.EditorView.state.selection.empty && [undefined, text, paragraph].includes(selNode?.type)) {
-                const docDefaultMarks = [schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail(), modified: Math.floor(Date.now() / 1000) })];
+                const docDefaultMarks = [schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail() })];
                 this.EditorView.state.selection.empty && this.EditorView.state.selection.from === 1 && this.EditorView?.dispatch(this.EditorView?.state.tr.setStoredMarks(docDefaultMarks).removeStoredMark(schema.marks.pFontColor));
             }
         }
@@ -1600,8 +1603,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         removeStyleSheet(this._userStyleSheetElement);
         Object.values(this._disposers).forEach(disposer => disposer?.());
         this.endUndoTypingBatch();
-        FormattedTextBox.LiveTextUndo?.end();
-        FormattedTextBox.LiveTextUndo = undefined;
+        this._liveTextUndo?.end();
         this.unhighlightSearchTerms();
         this.EditorView?.destroy();
         RichTextMenu.Instance?.TextView === this && RichTextMenu.Instance.updateMenu(undefined, undefined, undefined, undefined);
@@ -1723,7 +1725,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 if (e.clientX > boundsRect.left && e.clientX < boundsRect.right && e.clientY > boundsRect.bottom) {
                     // if we clicked below the last prosemirror div, then set the selection to be the end of the document
                     editorView.focus();
-                    editorView.dispatch(editorView.state.tr.setSelection(TextSelection.create(editorView.state.doc, editorView.state.doc.content.size)));
+                    // editorView.dispatch(editorView.state.tr.setSelection(TextSelection.create(editorView.state.doc, editorView.state.doc.content.size)));
                 }
             } else if (node && [editorView.state.schema.nodes.ordered_list, editorView.state.schema.nodes.listItem].includes(node.type) && node !== (editorView.state.selection as NodeSelection)?.node && pcords) {
                 editorView.dispatch(editorView.state.tr.setSelection(NodeSelection.create(editorView.state.doc, pcords.pos)));
@@ -1805,7 +1807,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         if (this.ProseRef?.children[0] !== e.nativeEvent.target) return;
         if (!(this.EditorView?.state.selection instanceof NodeSelection) || this.EditorView.state.selection.node.type !== this.EditorView.state.schema.nodes.footnote) {
             const stordMarks = this.EditorView?.state.storedMarks?.slice();
-            if (!(this.EditorView?.state.selection instanceof NodeSelection)) {
+            if (!(this.EditorView?.state.selection instanceof NodeSelection) && typeof this.dataDoc[this.fieldKey] !== 'number') {
                 this.autoLink();
                 if (this.EditorView?.state.tr) {
                     const tr = stordMarks?.reduce((tr2, m) => {
@@ -1830,8 +1832,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
         this.endUndoTypingBatch();
 
-        FormattedTextBox.LiveTextUndo?.end();
-        FormattedTextBox.LiveTextUndo = undefined;
+        this._liveTextUndo?.end();
 
         // if the text box blurs and none of its contents are focused(), then pass the blur along
         setTimeout(() => !this.ProseRef?.contains(document.activeElement) && this._props.onBlur?.());
@@ -1852,7 +1853,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             return;
         }
         if (this._enteringStyle && 'tix!'.includes(e.key)) {
-            const tag = e.key === 't' ? 'todo' : e.key === 'i' ? 'ignore' : e.key === 'x' ? 'disagree' : e.key === '!' ? 'important' : '??';
             const node = state.selection.$from.nodeAfter;
             const start = state.selection.from;
             const end = state.selection.to;
@@ -1861,9 +1861,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 StopEvent(e);
                 _editorView.dispatch(
                     state.tr
-                        .removeMark(start, end, schema.marks.user_mark)
-                        .addMark(start, end, schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail(), modified: Math.floor(Date.now() / 1000) }))
-                        .addMark(start, end, schema.marks.user_tag.create({ userid: ClientUtils.CurrentUserEmail(), tag, modified: Math.round(Date.now() / 1000 / 60) }))
+                        .removeMark(start, end, schema.marks.user_mark) //
+                        .addMark(start, end, schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail() }))
                 );
                 return;
             }
@@ -1896,9 +1895,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 break;
             default:
                 if ([AclEdit, AclAugment, AclAdmin].includes(GetEffectiveAcl(this.Document))) {
-                    const modified = Math.floor(Date.now() / 1000);
-                    const mark = state.selection.$to.marks().find(m => m.type === schema.marks.user_mark && m.attrs.modified === modified);
-                    _editorView.dispatch(state.tr.removeStoredMark(schema.marks.user_mark).addStoredMark(mark ?? schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail(), modified })));
+                    const mark = state.selection.$to.marks().find(m => m.type === schema.marks.user_mark);
+                    _editorView.dispatch(
+                        state.tr
+                            .removeStoredMark(schema.marks.user_mark) //
+                            .addStoredMark(mark ?? schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail() }))
+                    );
                 }
                 break;
         }
@@ -1922,14 +1924,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         const margins = 2 * NumCast(this.layoutDoc._yMargin, this._props.yMargin || 0);
         const children = this.ProseRef?.children.length ? Array.from(this.ProseRef.children[0].children) : undefined;
         if (this.EditorView && children && !SnappingManager.IsDragging) {
-            const getChildrenHeights = (kids: Element[] | undefined) => kids?.reduce((p, child) => p + toHgt(child), margins) ?? 0;
+            const getChildrenHeights = (kids: Element[] | undefined) => kids?.reduce((p, child) => p + toHgt(child), 0) ?? 0;
             const toNum = (val: string) => Number(val.replace('px', ''));
             const toHgt = (node: Element): number => {
                 const { height, marginTop, marginBottom } = getComputedStyle(node);
                 const childHeight = height === 'auto' ? getChildrenHeights(Array.from(node.children)) : toNum(height);
                 return childHeight + Math.max(0, toNum(marginTop)) + Math.max(0, toNum(marginBottom));
             };
-            const proseHeight = !this.ProseRef ? 0 : getChildrenHeights(children);
+            const proseHeight = !this.ProseRef ? 0 : getChildrenHeights(children) + margins;
             const scrollHeight = this.ProseRef && proseHeight;
             if (this._props.setHeight && !this._props.suppressSetHeight && 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
diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts
index b7dae1ca3..333ee6be8 100644
--- a/src/client/views/nodes/formattedText/marks_rts.ts
+++ b/src/client/views/nodes/formattedText/marks_rts.ts
@@ -330,20 +330,6 @@ export const marks: { [index: string]: MarkSpec } = {
             return ['span', { class: 'UM-' + uid + remote + ' UM-min-' + min + ' UM-hr-' + hr + ' UM-day-' + day }, 0];
         },
     },
-    // the id of the user who entered the text
-    user_tag: {
-        attrs: {
-            userid: { default: '' },
-            modified: { default: 'when?' }, // 1 second intervals since 1970
-            tag: { default: '' },
-        },
-        group: 'inline',
-        inclusive: false,
-        toDOM: node => {
-            const uid = node.attrs.userid.replace('.', '').replace('@', '');
-            return ['span', { class: 'UT-' + uid + ' UT-' + node.attrs.tag }, 0];
-        },
-    },
 
     // :: MarkSpec Code font mark. Represented as a `<code>` element.
     code: {
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 11f35b8ef..cb2a1f13f 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -702,7 +702,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 transTime + 10
             );
         }
-        if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.config_viewBounds !== undefined || activeItem.config_panX !== undefined || activeItem.config_viewScale !== undefined))) && !bestTarget.isGroup) {
+        if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.config_viewBounds !== undefined || activeItem.config_panX !== undefined || activeItem.config_viewScale !== undefined))) && !Doc.IsFreeformGroup(bestTarget)) {
             const contentBounds = Cast(activeItem.config_viewBounds, listSpec('number'));
             if (contentBounds) {
                 const viewport = { panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] };
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index 1aab2b853..a54505443 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -118,6 +118,9 @@
 
 .pdfViewerDash-interactive {
     pointer-events: all;
+    &::-webkit-scrollbar {
+        width: 40px;
+    }
 }
 
 .loading-spinner {
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index fc2567fbc..97fe183dd 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -359,12 +359,6 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        // const hit = document.elementFromPoint(e.clientX, e.clientY);
-        // bcz: Change. drag selecting requires that preventDefault is NOT called.  This used to happen in DocumentView,
-        //      but that's changed, so this shouldn't be needed.
-        // if (hit && hit.localName === "span" && this.annotationsActive(true)) {  // drag selecting text stops propagation
-        //     e.button === 0 && e.stopPropagation();
-        // }
         // if alt+left click, drag and annotate
         this._downX = e.clientX;
         this._downY = e.clientY;
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 3976ec39e..b7ff5fff7 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -330,8 +330,9 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                 switch (doc.type) {
                     case DocumentType.IMG: {
                         const func = changeInPlace ? this.recreateImageWithFirefly : this.createImageWithFirefly;
-                        const newPrompt = doc.ai_prompt && doc.ai_prompt !== this._regenInput ? `${doc.ai_prompt} ~~~ ${this._regenInput}` : this._regenInput;
-                        return this._regenInput ? func(newPrompt, NumCast(doc?.ai_prompt_seed)) : func(this._lastInput.text || StrCast(doc.ai_prompt));
+                        const promptChange = doc.ai_prompt && doc.ai_prompt !== this._regenInput;
+                        const newPrompt = promptChange ? `${doc.ai_prompt} ~~~ ${this._regenInput}` : this._regenInput;
+                        return this._regenInput ? func(newPrompt, promptChange ? NumCast(doc?.ai_prompt_seed) : undefined) : func(this._lastInput.text || StrCast(doc.ai_prompt));
                     }
                     case DocumentType.COL: {
                         try {
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 990b6606f..6e0c3d112 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -536,23 +536,35 @@ export namespace Doc {
     export function GetT<T extends FieldType>(doc: Doc, key: string, ctor: ToConstructor<T>, ignoreProto: boolean = false): FieldResult<T> {
         return Cast(Get(doc, key, ignoreProto), ctor) as FieldResult<T>;
     }
-    export function isTemplateDoc(doc: Doc) {
-        return GetT(doc, 'isTemplateDoc', 'boolean', true);
-    }
-    export function isTemplateForField(doc: Doc) {
-        return GetT(doc, 'isTemplateForField', 'string', true);
-    }
-    export function IsDataProto(doc: Doc) {
-        return GetT(doc, 'isDataDoc', 'boolean', true);
-    }
-    export function IsBaseProto(doc: Doc) {
-        return GetT(doc, 'isBaseProto', 'boolean', true);
-    }
-    export function IsSystem(doc: Doc) {
-        return GetT(doc, 'isSystem', 'boolean', true);
-    }
-    export function IsDelegateField(doc: Doc, fieldKey: string) {
-        return doc && Get(doc, fieldKey, true) !== undefined;
+    /**
+     * Tests whether the Doc is flagged as being a template.
+     * Templates can be set as a layout for another target Doc. When rendered by the target Doc, the template
+     * creates an instance of itself that holds rendering data specific to the target
+     * @param doc
+     */
+    export function IsTemplateDoc(doc: Doc)      { return GetT(doc, 'isTemplateDoc', 'boolean', true); } // prettier-ignore
+    /**
+     * Tests whether the Doc is flagged as being a template for rendering a specific field  of a Doc
+     * When flagged as field template and rendered, the template will redirect its componentView to write to the
+     * specified template field.  In general, a compound Doc template will contain multiple field templates, one for each of the
+     * data fields rendered by the compound template.
+     * @param doc
+     * @returns
+     */
+    export function IsTemplateForField(doc: Doc) { return GetT(doc, 'isTemplateForField', 'string', true); } // prettier-ignore
+    export function IsDataProto(doc: Doc)        { return GetT(doc, 'isDataDoc', 'boolean', true); } // prettier-ignore
+    export function IsBaseProto(doc: Doc)        { return GetT(doc, 'isBaseProto', 'boolean', true); } // prettier-ignore
+    export function IsSystem(doc: Doc)           { return GetT(doc, 'isSystem', 'boolean', true); } // prettier-ignore
+    export function IsDelegateField(doc: Doc, fieldKey: string) { return doc && Get(doc, fieldKey, true) !== undefined; } // prettier-ignore
+    /**
+     * Tests whether a doc is a freeform collection that renders as a group.
+     * The group variant of a collection automatically resizes so that none of its contents
+     * are ever hidden.
+     * @param doc doc to test for being a freeform group
+     * @returns boolean
+     */
+    export function IsFreeformGroup(doc: Doc) {
+        return doc.freeform_isGroup && doc.type_collection === CollectionViewType.Freeform;
     }
     //
     // this will write the value to the key on either the data doc or the embedding doc.  The choice
@@ -596,9 +608,6 @@ export namespace Doc {
             const value = (fields as { [key: string]: Opt<FieldType> })[key];
             if (!skipUndefineds || value !== undefined) {
                 // Do we want to filter out undefineds?
-                if (typeof value === 'object' && 'values' in value) {
-                    console.log(value);
-                }
                 doc[key] = value;
             }
         });
@@ -734,7 +743,7 @@ export namespace Doc {
     const FindDocsInRTF = new RegExp(/(audioId|textId|anchorId|docId)"\s*:\s*"(.*?)"/g);
 
     export function makeClone(doc: Doc, cloneMap: Map<string, Doc>, linkMap: Map<string, Doc>, rtfs: { copy: Doc; key: string; field: RichTextField }[], exclusions: string[], pruneDocs: Doc[], cloneLinks: boolean, cloneTemplates: boolean): Doc {
-        if (Doc.IsBaseProto(doc) || ((Doc.isTemplateDoc(doc) || Doc.isTemplateForField(doc)) && !cloneTemplates)) {
+        if (Doc.IsBaseProto(doc) || ((Doc.IsTemplateDoc(doc) || Doc.IsTemplateForField(doc)) && !cloneTemplates)) {
             return doc;
         }
         if (cloneMap.get(doc[Id])) return cloneMap.get(doc[Id])!;
@@ -808,7 +817,7 @@ export namespace Doc {
                 const docAtKey = DocCast(clone[key]);
                 if (docAtKey && !Doc.IsSystem(docAtKey)) {
                     if (!Array.from(cloneMap.values()).includes(docAtKey)) {
-                        clone[key] = !cloneTemplates && (Doc.isTemplateDoc(docAtKey) || Doc.isTemplateForField(docAtKey)) ? docAtKey : cloneMap.get(docAtKey[Id]);
+                        clone[key] = !cloneTemplates && (Doc.IsTemplateDoc(docAtKey) || Doc.IsTemplateForField(docAtKey)) ? docAtKey : cloneMap.get(docAtKey[Id]);
                     } else {
                         repairClone(docAtKey, cloneMap, cloneTemplates, visited);
                     }
@@ -859,7 +868,7 @@ export namespace Doc {
      */
     export function expandTemplateLayout(templateLayoutDoc: Doc, targetDoc?: Doc, layoutFieldKey?: string) {
         // nothing to do if the layout isn't a template or we don't have a target that's different than the template
-        if (!targetDoc || templateLayoutDoc === targetDoc || (!Doc.isTemplateForField(templateLayoutDoc) && !Doc.isTemplateDoc(templateLayoutDoc))) {
+        if (!targetDoc || templateLayoutDoc === targetDoc || (!Doc.IsTemplateForField(templateLayoutDoc) && !Doc.IsTemplateDoc(templateLayoutDoc))) {
             return templateLayoutDoc;
         }
 
@@ -922,7 +931,7 @@ export namespace Doc {
             console.log('Warning: GetLayoutDataDocPair childDoc not defined');
             return { layout: childDoc, data: childDoc };
         }
-        const data = Doc.AreProtosEqual(containerDataDoc, containerDoc) || (!Doc.isTemplateDoc(childDoc) && !Doc.isTemplateForField(childDoc)) ? undefined : containerDataDoc;
+        const data = Doc.AreProtosEqual(containerDataDoc, containerDoc) || (!Doc.IsTemplateDoc(childDoc) && !Doc.IsTemplateForField(childDoc)) ? undefined : containerDataDoc;
         const templateRoot = DocCast(containerDoc?.rootDocument);
         return { layout: Doc.expandTemplateLayout(childDoc, templateRoot, layoutFieldKey), data };
     }
@@ -1190,14 +1199,14 @@ export namespace Doc {
     }
     export function NativeWidth(doc?: Doc, dataDoc?: Doc, useWidth?: boolean) {
         // if this is a field template, then don't use the doc's nativeWidth/height
-        return !doc ? 0 : NumCast(doc.isTemplateForField ? undefined : doc._nativeWidth, NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeWidth'], !doc.isTemplateForField && useWidth ? NumCast(doc._width) : 0));
+        return !doc ? 0 : NumCast(doc._nativeWidth, doc[DocLayout].isTemplateDoc ? 0 : NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeWidth'], useWidth ? NumCast(doc._width) : 0));
     }
     export function NativeHeight(doc?: Doc, dataDoc?: Doc, useHeight?: boolean) {
         if (!doc) return 0;
         const nheight = (Doc.NativeWidth(doc, dataDoc, useHeight) / NumCast(doc._width)) * NumCast(doc._height); // divide before multiply to avoid floating point errrorin case nativewidth = width
-        const dheight = NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeHeight'], useHeight ? NumCast(doc._height) : 0);
+        const dheight = doc[DocLayout].isTemplateDoc ? 0 : NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeHeight'], useHeight ? NumCast(doc._height) : 0);
         // if this is a field template, then don't use the doc's nativeWidth/height
-        return NumCast(doc.isTemplateForField ? undefined : doc._nativeHeight, nheight || dheight);
+        return NumCast(doc._nativeHeight, nheight || dheight);
     }
 
     export function OutpaintingWidth(doc?: Doc, dataDoc?: Doc, useWidth?: boolean) {
@@ -1467,7 +1476,6 @@ export namespace Doc {
                 layoutDoc._nativeWidth = undefined;
                 layoutDoc._nativeHeight = undefined;
             } else {
-                layoutDoc._layout_autoHeight = false;
                 if (!Doc.NativeWidth(layoutDoc)) {
                     layoutDoc._nativeWidth = NumCast(layoutDoc._width, panelWidth);
                     layoutDoc._nativeHeight = NumCast(layoutDoc._height, panelHeight);
@@ -1833,7 +1841,3 @@ ScriptingGlobals.add(function setDocRangeFilter(container: Doc, key: string, ran
 ScriptingGlobals.add(function toJavascriptString(str: string) {
     return Field.toJavascriptString(str as FieldType);
 });
-// eslint-disable-next-line prefer-arrow-callback
-ScriptingGlobals.add(function getDescription(doc: Doc) {
-    return Doc.getDescription(doc);
-});
diff --git a/src/server/ApiManagers/FireflyManager.ts b/src/server/ApiManagers/FireflyManager.ts
index e934e635b..07ef271a1 100644
--- a/src/server/ApiManagers/FireflyManager.ts
+++ b/src/server/ApiManagers/FireflyManager.ts
@@ -23,7 +23,7 @@ export default class FireflyManager extends ApiManager {
             return undefined;
         });
 
-    generateImageFromStructure = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, structureUrl: string, strength: number = 50, styles: string[], styleUrl: string | undefined) =>
+    generateImageFromStructure = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, structureUrl: string, strength: number = 50, styles: string[], styleUrl: string | undefined, variations: number = 4) =>
         this.getBearerToken().then(response =>
             response?.json().then((data: { access_token: string }) =>
                 //prettier-ignore
@@ -37,7 +37,7 @@ export default class FireflyManager extends ApiManager {
                     ],
                     body: JSON.stringify({
                         prompt,
-                        numVariations: 4,
+                        numVariations: variations,
                         detailLevel: 'preview', 
                         modelVersion: 'image3_fast',
                         size: { width, height },
@@ -107,10 +107,7 @@ export default class FireflyManager extends ApiManager {
         });
 
     generateImage = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, seed?: number) => {
-        let body = `{  "prompt": "${prompt}", "size": { "width": ${width}, "height": ${height}} }`;
-        if (seed) {
-            body = `{  "prompt": "${prompt}", "size": { "width": ${width}, "height": ${height}}, "seeds": [${seed}]}`;
-        }
+        const body = `{  "prompt": "${prompt}", "size": { "width": ${width}, "height": ${height}} ${seed ? ', "seeds": [' + seed + ']' : ''}}`;
         const fetched = this.getBearerToken().then(response =>
             response?.json().then((data: { access_token: string }) =>
                 fetch('https://firefly-api.adobe.io/v3/images/generate', {
diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts
index a56ab5d18..514e2ce1e 100644
--- a/src/server/server_Initialization.ts
+++ b/src/server/server_Initialization.ts
@@ -1,19 +1,15 @@
 import * as bodyParser from 'body-parser';
-import * as brotli from 'brotli';
 import { blue, yellow } from 'colors';
 import * as flash from 'connect-flash';
 import * as MongoStoreConnect from 'connect-mongo';
-import * as cors from 'cors';
 import * as express from 'express';
 import * as expressFlash from 'express-flash';
 import * as session from 'express-session';
 import { createServer } from 'https';
 import * as passport from 'passport';
-import * as request from 'request';
 import * as webpack from 'webpack';
 import * as wdm from 'webpack-dev-middleware';
 import * as whm from 'webpack-hot-middleware';
-import * as zlib from 'zlib';
 import * as config from '../../webpack.config';
 import { logPort } from './ActionUtilities';
 import RouteManager from './RouteManager';
@@ -23,6 +19,8 @@ import { SSL } from './apis/google/CredentialsLoader';
 import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLogin, postReset, postSignup } from './authentication/AuthenticationManager';
 import { Database } from './database';
 import { WebSocket } from './websocket';
+import axios from 'axios';
+import { JSDOM } from 'jsdom';
 
 /* RouteSetter is a wrapper around the server that prevents the server
    from being exposed. */
@@ -84,142 +82,96 @@ function buildWithMiddleware(server: express.Express) {
     return server;
 }
 
-function registerEmbeddedBrowseRelativePathHandler(server: express.Express) {
-    server.use('*', (req, res) => {
-        // res.setHeader('Access-Control-Allow-Origin', '*');
-        // res.header('Access-Control-Allow-Methods', 'GET, PUT, PATCH, POST, DELETE');
-        // res.header('Access-Control-Allow-Headers', req.header('access-control-request-headers'));
-        const relativeUrl = req.originalUrl;
-        if (!res.headersSent && req.headers.referer?.includes('corsProxy')) {
-            if (!req.user) res.redirect('/home'); // When no user is logged in, we interpret a relative URL as being a reference to something they don't have access to and redirect to /home
-            // a request for something by a proxied referrer means it must be a relative reference.  So construct a proxied absolute reference here.
-            try {
-                const proxiedRefererUrl = decodeURIComponent(req.headers.referer); // (e.g., http://localhost:<port>/corsProxy/https://en.wikipedia.org/wiki/Engelbart)
-                const dashServerUrl = proxiedRefererUrl.match(/.*corsProxy\//)![0]; // the dash server url (e.g.: http://localhost:<port>/corsProxy/ )
-                const actualReferUrl = proxiedRefererUrl.replace(dashServerUrl, ''); // the url of the referer without the proxy (e.g., : https://en.wikipedia.org/wiki/Engelbart)
-                const absoluteTargetBaseUrl = actualReferUrl.match(/https?:\/\/[^/]*/)![0]; // the base of the original url (e.g.,  https://en.wikipedia.org)
-                const redirectedProxiedUrl = dashServerUrl + encodeURIComponent(absoluteTargetBaseUrl + relativeUrl); // the new proxied full url (e.g., http://localhost:<port>/corsProxy/https://en.wikipedia.org/<somethingelse>)
-                const redirectUrl = relativeUrl.startsWith('//') ? 'http:' + relativeUrl : redirectedProxiedUrl;
-                res.redirect(redirectUrl);
-            } catch (e) {
-                console.log('Error embed: ', e);
+function registerCorsProxy(server: express.Express) {
+    // .replace('<head>', '<head> <style>[id ^= "google"] { display: none; } </style>')
+    server.use('/corsproxy', async (req, res) => {
+        try {
+            // Extract URL from either query param or path
+            let targetUrl: string;
+
+            if (req.query.url) {
+                // Case 1: URL passed as query parameter (/corsproxy?url=...)
+                targetUrl = req.query.url as string;
+            } else {
+                // Case 2: URL passed as path (/corsproxy/http://example.com)
+                const path = req.originalUrl.replace(/^\/corsproxy\/?/, '');
+                targetUrl = decodeURIComponent(path);
+
+                // Add protocol if missing (assuming https as default)
+                if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
+                    targetUrl = `https://${targetUrl}`;
+                }
+            }
+
+            if (!targetUrl) {
+                res.send(`<html><body bgcolor="red" link="006666" alink="8B4513" vlink="006666">
+                                    <title>Error</title>
+                                    <div align="center"><h1>Failed to load: ${targetUrl} </h1></div>
+                                    <p>URL is required</p>
+                                </body></html>`);
+                //  res.status(400).json({ error: 'URL is required' });
+                return;
             }
-        } else if (relativeUrl.startsWith('/search') && !req.headers.referer?.includes('corsProxy')) {
-            // detect search query and use default search engine
-            res.redirect(req.headers.referer + 'corsProxy/' + encodeURIComponent('http://www.google.com' + relativeUrl));
-        } else {
-            res.status(404).json({ error: 'no such file or endpoint: try /home /logout /login' });
-        }
-    });
-}
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function proxyServe(req: any, requrl: string, response: any) {
-    // eslint-disable-next-line  @typescript-eslint/no-require-imports
-    const htmlBodyMemoryStream = new (require('memorystream'))();
-    let wasinBrFormat = false;
-    const sendModifiedBody = () => {
-        const header = response.headers['content-encoding'];
-        const refToCors = (match: string, tag: string, sym: string, href: string) => `${tag}=${sym + resolvedServerUrl}/corsProxy/${href + sym}`;
-        // const relpathToCors = (match: any, href: string, offset: any, string: any) => `="${resolvedServerUrl + '/corsProxy/' + decodeURIComponent(req.originalUrl.split('/corsProxy/')[1].match(/https?:\/\/[^\/]*/)?.[0] ?? '') + '/' + href}"`;
-        if (header) {
+            // Validate URL format
             try {
-                const bodyStream = htmlBodyMemoryStream.read();
-                if (bodyStream) {
-                    const htmlInputText = wasinBrFormat ? Buffer.from(brotli.decompress(bodyStream)) : header.includes('gzip') ? zlib.gunzipSync(bodyStream) : bodyStream;
-                    const htmlText = htmlInputText
-                        .toString('utf8')
-                        .replace('<head>', '<head> <style>[id ^= "google"] { display: none; } </style>')
-                        .replace(/(src|href)=(['"])(https?[^\n]*)\1/g, refToCors) // replace src or href='http(s)://...' or href="http(s)://.."
-                        // .replace(/= *"\/([^"]*)"/g, relpathToCors)
-                        .replace(/data-srcset="[^"]*"/g, '')
-                        .replace(/srcset="[^"]*"/g, '')
-                        .replace(/target="_blank"/g, '');
-                    response.send(header?.includes('gzip') ? zlib.gzipSync(htmlText) : htmlText);
-                } else {
-                    req.pipe(request(requrl))
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        .on('error', (e: any) => console.log('requrl ', e))
-                        .pipe(response)
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        .on('error', (e: any) => console.log('response pipe error', e));
-                    console.log('EMPTY body:' + req.url);
-                }
+                new URL(targetUrl);
             } catch (e) {
-                console.log('ERROR?: ', e);
-            }
-        } else {
-            req.pipe(htmlBodyMemoryStream)
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .on('error', (e: any) => console.log('html body memorystream error', e))
-                .pipe(response)
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .on('error', (e: any) => console.log('html body memory stream response error', e));
-        }
-    };
-    const retrieveHTTPBody = () => {
-        // req.headers.cookie = '';
-        req.pipe(request(requrl))
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            .on('error', (e: any) => {
-                console.log(`CORS url error: ${requrl}`, e);
-                response.send(`<html><body bgcolor="red" link="006666" alink="8B4513" vlink="006666">
+                res.send(`<html><body bgcolor="red" link="006666" alink="8B4513" vlink="006666">
                                     <title>Error</title>
-                                    <div align="center"><h1>Failed to load: ${requrl} </h1></div>
+                                    <div align="center"><h1>Failed to load: ${targetUrl} </h1></div>
                                     <p>${e}</p>
                                 </body></html>`);
-            })
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            .on('response', (res: any) => {
-                res.headers;
-                const headers = Object.keys(res.headers);
-                const headerCharRegex = /[^\t\x20-\x7e\x80-\xff]/;
-                headers.forEach(headerName => {
-                    const header = res.headers[headerName];
-                    if (Array.isArray(header)) {
-                        res.headers[headerName] = header.filter(h => !headerCharRegex.test(h));
-                    } else if (headerCharRegex.test(header || '')) {
-                        delete res.headers[headerName];
-                    } else res.headers[headerName] = header;
-                    if (headerName === 'content-encoding') {
-                        wasinBrFormat = res.headers[headerName] === 'br';
-                        res.headers[headerName] = 'gzip';
-                    }
+                //res.status(400).json({ error: 'Invalid URL format' });
+                return;
+            }
+
+            const response = await axios.get(targetUrl as string, {
+                headers: { 'User-Agent': req.headers['user-agent'] || 'Mozilla/5.0' },
+                responseType: 'text',
+            });
+
+            const baseUrl = new URL(targetUrl as string);
+
+            if (response.headers['content-type']?.includes('text/html')) {
+                const dom = new JSDOM(response.data);
+                const document = dom.window.document;
+
+                // Process all elements with href/src
+                const elements = document.querySelectorAll('[href],[src]');
+                elements.forEach(elem => {
+                    const attrs = [];
+                    if (elem.hasAttribute('href')) attrs.push('href');
+                    if (elem.hasAttribute('src')) attrs.push('src');
+
+                    attrs.forEach(attr => {
+                        const originalUrl = elem.getAttribute(attr);
+                        if (!originalUrl || originalUrl.startsWith('http://') || originalUrl.startsWith('https://') || originalUrl.startsWith('data:') || /^[a-z]+:/.test(originalUrl)) {
+                            return;
+                        }
+
+                        const resolvedUrl = new URL(originalUrl, baseUrl).toString();
+                        elem.setAttribute(attr, resolvedUrl);
+                    });
                 });
-                res.headers['x-permitted-cross-domain-policies'] = 'all';
-                res.headers['x-frame-options'] = '';
-                res.headers['content-security-policy'] = '';
-                response.headers = response._headers = res.headers;
-            })
-            .on('end', sendModifiedBody)
-            .pipe(htmlBodyMemoryStream)
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            .on('error', (e: any) => console.log('http body pipe error', e));
-    };
-    retrieveHTTPBody();
-}
 
-function registerCorsProxy(server: express.Express) {
-    server.use('/corsProxy', async (req, res) => {
-        res.setHeader('Access-Control-Allow-Origin', '*');
-        res.header('Access-Control-Allow-Methods', 'GET, PUT, PATCH, POST, DELETE');
-        res.header('Access-Control-Allow-Headers', req.header('access-control-request-headers'));
-        const referer = req.headers.referer ? decodeURIComponent(req.headers.referer) : '';
-        let requrlraw = decodeURIComponent(req.url.substring(1));
-        const qsplit = requrlraw.split('?q=');
-        const newqsplit = requrlraw.split('&q=');
-        if (qsplit.length > 1 && newqsplit.length > 1) {
-            const lastq = newqsplit[newqsplit.length - 1];
-            requrlraw = qsplit[0] + '?q=' + lastq.split('&')[0] + '&' + qsplit[1].split('&')[1];
-        }
-        const requrl = requrlraw.startsWith('/') ? referer + requrlraw : requrlraw;
-        // cors weirdness here...
-        // if the referer is a cors page and the cors() route (I think) redirected to /corsProxy/<path> and the requested url path was relative,
-        // then we redirect again to the cors referer and just add the relative path.
-        if (!requrl.startsWith('http') && req.originalUrl.startsWith('/corsProxy') && referer?.includes('corsProxy')) {
-            res.redirect(referer + (referer.endsWith('/') ? '' : '/') + requrl);
-        } else {
-            proxyServe(req, requrl, res);
+                // Handle base tag
+                const baseTags = document.querySelectorAll('base');
+                baseTags.forEach(tag => tag.remove());
+
+                const newBase = document.createElement('base');
+                newBase.setAttribute('href', `${baseUrl}/`);
+                document.head.insertBefore(newBase, document.head.firstChild);
+
+                response.data = dom.serialize();
+            }
+
+            res.set({
+                'Access-Control-Allow-Origin': '*',
+                'Content-Type': response.headers['content-type'],
+            }).send(response.data);
+        } catch (error: unknown) {
+            res.status(500).json({ error: 'Proxy error', details: (error as { message: string }).message });
         }
     });
 }
@@ -255,13 +207,11 @@ export default async function InitializeServer(routeSetter: RouteSetter) {
     app.use(whm(compiler));
     app.get(/^\/+$/, (req, res) => res.redirect(req.user ? '/home' : '/login')); // target urls that consist of one or more '/'s with nothing in between
     app.use(express.static(publicDirectory, { setHeaders: res => res.setHeader('Access-Control-Allow-Origin', '*') })); // all urls that start with dash's public directory: /files/  (e.g., /files/images, /files/audio, etc)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    app.use(cors({ origin: (_origin: any, callback: any) => callback(null, true) }));
+    // app.use(cors({ origin: (_origin: any, callback: any) => callback(null, true) }));
     registerAuthenticationRoutes(app); // this adds routes to authenticate a user (login, etc)
-    registerCorsProxy(app); // this adds a /corsProxy/ route to allow clients to get to urls that would otherwise be blocked by cors policies
+    registerCorsProxy(app); // this adds a /corsproxy/ route to allow clients to get to urls that would otherwise be blocked by cors policies
     isRelease && !SSL.Loaded && SSL.exit();
     routeSetter(new RouteManager(app, isRelease)); // this sets up all the regular supervised routes (things like /home, download/upload api's, pdf, search, session, etc)
-    registerEmbeddedBrowseRelativePathHandler(app); // this allows renered web pages which internally have relative paths to find their content
     isRelease && process.env.serverPort && (resolvedPorts.server = Number(process.env.serverPort));
     const server = isRelease ? createServer(SSL.Credentials, app) : app;
     await new Promise<void>(resolve => {