Merge branch 'master' into task_nodes_aarav

84 files changed, 1189 insertions, 1250 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/documents/DocUtils.ts b/src/client/documents/DocUtils.ts
index df14dce5a..5aae50ee8 100644
--- a/src/client/documents/DocUtils.ts
+++ b/src/client/documents/DocUtils.ts
@@ -603,7 +603,7 @@ export namespace DocUtils {
                 layout_hideAllLinks: true,
                 _width: 15,
                 _height: 15,
-                _xPadding: 0,
+                _xMargin: 0,
                 onClick: FollowLinkScript(),
                 _timecodeToShow: Cast(doc._timecodeToShow, 'number', null),
             });
@@ -642,20 +642,27 @@ export namespace DocUtils {
         return dd;
     }
 
-    export function assignImageInfo(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[`${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;
@@ -677,15 +684,8 @@ export namespace DocUtils {
         const pathname = result.accessPaths.agnostic.client;
         const doc = await DocUtils.DocumentFromType(type, pathname, full, overwriteDoc);
         if (doc) {
-            const proto = Doc.GetProto(doc);
-            proto.text = result.rawText;
-            !(result instanceof Error) && DocUtils.assignImageInfo(result, proto);
-            if (Upload.isVideoInformation(result)) {
-                proto.data_duration = result.duration;
-            }
-            if (overwriteDoc) {
-                Doc.removeCurrentlyLoading(overwriteDoc);
-            }
+            DocUtils.assignUploadInfo(result, Doc.GetProto(doc));
+            overwriteDoc && Doc.removeCurrentlyLoading(overwriteDoc);
             generatedDocuments.push(doc);
         }
         return doc;
@@ -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),
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index a11f56143..b8a6453a6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -198,7 +198,6 @@ export class DocumentOptions {
     _height?: NUMt = new NumInfo("height of document in container's coordiantes");
     data_nativeWidth?: NUMt = new NumInfo('native width of data field contents (e.g., the pixel width of an image)', false);
     data_nativeHeight?: NUMt = new NumInfo('native height of data field contents (e.g., the pixel height of an image)', false);
-    linearBtnWidth?: NUMt = new NumInfo('unexpanded width of a linear menu button (button "width" changes when it expands)', false);
     _nativeWidth?: NUMt = new NumInfo('Deprecated: use nativeWidth. native width of document contents (e.g., the pixel width of an image)', false);
     _nativeHeight?: NUMt = new NumInfo('Deprecated: use nativeHeight. native height of document contents (e.g., the pixel height of an image)', false);
     nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)', false);
@@ -294,10 +293,8 @@ export class DocumentOptions {
     _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');
     _gridGap?: NUMt = new NumInfo('gap between items in masonry view', false);
-    _xMargin?: NUMt = new NumInfo('gap between left edge of document and start of masonry/stacking layouts', false);
-    _yMargin?: NUMt = new NumInfo('gap between top edge of dcoument and start of masonry/stacking layouts', false);
-    _xPadding?: NUMt = new NumInfo('x padding', false);
-    _yPadding?: NUMt = new NumInfo('y padding', false);
+    _xMargin?: NUMt = new NumInfo('gap between left edge of document and contents of freeform/masonry/stacking layouts', false);
+    _yMargin?: NUMt = new NumInfo('gap between top edge of dcoument and contents offreeform/masonry/stacking layouts', false);
     _createDocOnCR?: boolean; // whether carriage returns and tabs create new text documents
     _columnsHideIfEmpty?: BOOLt = new BoolInfo('whether stacking view column headings should be hidden');
     _caption_xMargin?: NUMt = new NumInfo('x margin of caption inside of a carousel collection', false, true);
@@ -364,7 +361,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');
@@ -404,6 +400,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');
@@ -427,10 +424,9 @@ export class DocumentOptions {
     badgeValue?: ScriptField;
 
     // LINEAR VIEW
-    linearView_IsOpen?: BOOLt = new BoolInfo('is linear view open');
-    linearView_Expandable?: BOOLt = new BoolInfo('can linear view be expanded');
-    linearView_Dropdown?: BOOLt = new BoolInfo('can linear view be opened as a dropdown');
-    linearView_SubMenu?: BOOLt = new BoolInfo('is doc a sub menu of more linear views');
+    linearView_btnWidth?: NUMt = new NumInfo('unexpanded width of a linear menu button (button "width" changes when it expands)', false);
+    linearView_isOpen?: BOOLt = new BoolInfo('is linear view open');
+    linearView_expandable?: BOOLt = new BoolInfo('can linear view be expanded');
     flexGap?: NUMt = new NumInfo('Linear view flex gap');
     flexDirection?: 'unset' | 'row' | 'column' | 'row-reverse' | 'column-reverse';
 
@@ -523,8 +519,9 @@ export class DocumentOptions {
     card_sort_isDesc?: BOOLt = new BoolInfo('whether the cards are sorted ascending or descending');
 
     ai?: string; // to mark items as ai generated
-    ai_firefly_seed?: number;
-    ai_firefly_prompt?: string;
+    ai_prompt_seed?: NUMt = new NumInfo('seed to GAI engine to make results deterministic');
+    ai_prompt?: STRt = new StrInfo('input prompt to GAI engine');
+    ai_generatedDocs?: List<Doc>; // list of documents generated by GAI engine
 
     // TASK MANAGER
     $startTime?: DateInfo | DateField = new DateInfo('start date and time', /*filterable*/ false);
@@ -1048,7 +1045,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 = {}) {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d378ca02f..a25c491d9 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -52,7 +52,7 @@ export interface Button {
     numBtnMax?: number;
     switchToggle?: boolean;
     width?: number;
-    linearBtnWidth?: number;
+    linearView_btnWidth?: number;
     toolType?: string; // type of pen tool
     expertMode?: boolean;// available only in expert mode
     btnList?: List<string>;
@@ -205,7 +205,7 @@ export class CurrentUserUtils {
         const templateIconsDoc = DocUtils.AssignOpts(DocCast(doc[field]), reqdOpts) ?? (doc[field] = Docs.Create.TreeDocument([], reqdOpts));
 
         const labelBox = (opts: DocumentOptions, fieldKey:string) => Docs.Create.LabelDocument({
-            layout: LabelBox.LayoutString(fieldKey), letterSpacing: "unset", _label_minFontSize: 14, _label_maxFontSize: 14, layout_borderRounding: "5px",  _width: 150, _height: 70, _xPadding: 10, _yPadding: 10, ...opts
+            layout: LabelBox.LayoutString(fieldKey), letterSpacing: "unset", _label_minFontSize: 14, _label_maxFontSize: 14, layout_borderRounding: "5px",  _width: 150, _height: 70, _xMargin: 10, _yMargin: 10, ...opts
         });
         const imageBox = (opts: DocumentOptions, fieldKey:string) => Docs.Create.ImageDocument( "http://www.cs.brown.edu/~bcz/noImage.png", { layout:ImageBox.LayoutString(fieldKey), "icon_nativeWidth": 360 / 4, "icon_nativeHeight": 270 / 4, iconTemplate:DocumentType.IMG,  _width: 360 / 4, _height: 270 / 4,  _layout_showTitle: "title", ...opts });
         const fontBox = (opts:DocumentOptions, fieldKey:string) => Docs.Create.FontIconDocument({ layout:FontIconBox.LayoutString(fieldKey), _nativeHeight: 30, _nativeWidth: 30, _width: 30, _height: 30, ...opts  });
@@ -402,7 +402,7 @@ pie title Minerals in my tap water
             {key: "Map",        creator: opts => Docs.Create.MapDocument([], opts),         opts: { _width: 800, _height: 600, _layout_fitWidth: true, }},
             {key: "Screengrab", creator: Docs.Create.ScreenshotDocument,                    opts: { _width: 400, _height: 200 }},
             {key: "WebCam",     creator: opts => Docs.Create.WebCamDocument("", opts),      opts: { _width: 400, _height: 200, recording:true, isSystem: true, cloneFieldFilter: new List<string>(["isSystem"]) }},
-            {key: "Button",     creator: Docs.Create.ButtonDocument,                        opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, title_custom: true,  waitForDoubleClickToClick: 'never'}, scripts: {onClick: FollowLinkScript()?.script.originalScript ?? ""}},
+            {key: "Button",     creator: Docs.Create.ButtonDocument,                        opts: { _width: 150, _height: 50, _xMargin: 10, _yMargin: 10, title_custom: true,  waitForDoubleClickToClick: 'never'}, scripts: {onClick: FollowLinkScript()?.script.originalScript ?? ""}},
             {key: "Script",     creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }},
             {key: "DataViz",    creator: opts => Docs.Create.DataVizDocument("", opts),     opts: { _width: 300, _height: 300, }},
             // AARAV ADD //
@@ -665,7 +665,7 @@ pie title Minerals in my tap water
     }
 
     static linearButtonList = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.LinearDocument(docs, {
-        ...opts, _gridGap: 0, _xMargin: 5, _yMargin: 5, layout_boxShadow: "0 0", _forceActive: true,
+        ...opts, _gridGap: 0, _xMargin: 5, _yMargin: 5, layout_boxShadow: "0 0", _forceActive: true, linearView: true,
         dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
         _lockedPosition: true, isSystem: true, flexDirection: "row"
     })
@@ -699,7 +699,7 @@ pie title Minerals in my tap water
         const btns = btnDescs.map(desc => dockBtn({_width: 30, _height: 30, defaultDoubleClick: 'ignore', undoIgnoreFields: new List<string>(['opacity']), _dragOnlyWithinContainer: true, ...desc.opts}, desc.scripts));
         const dockBtnsReqdOpts:DocumentOptions = {
             title: "docked buttons", _height: 40, flexGap: 0, layout_boxShadow: "standard", childDragAction: dropActionType.move,
-            childDontRegisterViews: true, linearView_IsOpen: true, linearView_Expandable: true, ignoreClick: true
+            childDontRegisterViews: true, linearView_isOpen: true, linearView_expandable: true, ignoreClick: true
         };
         reaction(() => UndoManager.redoStack.slice(), () => { Doc.GetProto(btns.find(btn => btn.title === "Redo")!).opacity = UndoManager.CanRedo() ? 1 : 0.4; }, { fireImmediately: true });
         reaction(() => UndoManager.undoStack.slice(), () => { Doc.GetProto(btns.find(btn => btn.title === "Undo")!).opacity = UndoManager.CanUndo() ? 1 : 0.4; }, { fireImmediately: true });
@@ -791,24 +791,24 @@ pie title Minerals in my tap water
             { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle",      toolType: Gestures.Circle,                           scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`,   onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square",      toolType: Gestures.Rectangle,                        scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`,   onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Line",   toolTip: "Line (double tap to lock mode)",   btnType: ButtonType.ToggleButton, icon: "minus",       toolType: Gestures.Line,                             scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`,   onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
-            { title: "Ink",    toolTip: "Ink",                              btnType: ButtonType.MultiToggleButton,                 toolType: InkTool.Ink,        showUntilToggle: true,  scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' }, 
+            { title: "Ink",    toolTip: "Ink",                              btnType: ButtonType.MultiToggleButton,                 toolType: InkTool.Ink,        showUntilToggle: true, scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' }, 
                 subMenu: [
                     { title: "Pen",      toolTip: "Pen (Ctrl+P)",           btnType: ButtonType.ToggleButton, icon: "pen-nib",     toolType: InkInkTool.Pen,         ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' }},
                     { title: "Highlight",toolTip: "Highlight (Ctrl+H)",     btnType: ButtonType.ToggleButton, icon: "highlighter", toolType: InkInkTool.Highlight,   ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' }},
                     { title: "Write",    toolTip: "Write (Ctrl+Shift+P)",   btnType: ButtonType.ToggleButton, icon: "pen",         toolType: InkInkTool.Write,       ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' },  funcs: {hidden:"IsNoviceMode()" }},      
                 ]},
-            { title: "Width",      toolTip: "Stroke width",                 btnType: ButtonType.NumberSliderButton,                toolType: InkProperty.StrokeWidth,ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"!activeInkTool()"}, numBtnMin: 1, linearBtnWidth:40},
+            { title: "Width",      toolTip: "Stroke width",                 btnType: ButtonType.NumberSliderButton,                toolType: InkProperty.StrokeWidth,ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"!activeInkTool()"}, numBtnMin: 1, linearView_btnWidth:40},
             { title: "Color",      toolTip: "Stroke color",                 btnType: ButtonType.ColorButton,  icon: "pen",         toolType: InkProperty.StrokeColor,ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"!activeInkTool()"}},
-            { title: "Eraser",     toolTip: "Eraser (Ctrl+E)",              btnType: ButtonType.MultiToggleButton,                 toolType: InkTool.Eraser,     showUntilToggle: true,  scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' },
+            { title: "Eraser",     toolTip: "Eraser (Ctrl+E)",              btnType: ButtonType.MultiToggleButton,                 toolType: InkTool.Eraser,     showUntilToggle: true, scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' },
               subMenu: [
                     { title: "Stroke",   toolTip: "Eraser complete strokes",btnType: ButtonType.ToggleButton, icon: "eraser",      toolType:InkEraserTool.Stroke,    ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}},
                     { title: "Segment",  toolTip: "Erase between intersections",btnType:ButtonType.ToggleButton,icon:"xmark",      toolType:InkEraserTool.Segment,   ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}},
                     { title: "Area",     toolTip: "Erase like a pencil",    btnType: ButtonType.ToggleButton, icon: "circle-xmark",toolType:InkEraserTool.Radius,    ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}},
             ]},
-            { title: " Size",      toolTip: "Size of area pencil eraser",   btnType: ButtonType.NumberSliderButton,                toolType: InkProperty.EraserWidth,ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"NotRadiusEraser()"}, numBtnMin: 1, linearBtnWidth:40},
+            { title: " Size",      toolTip: "Size of area pencil eraser",   btnType: ButtonType.NumberSliderButton,                toolType: InkProperty.EraserWidth,ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"NotRadiusEraser()"}, numBtnMin: 1, linearView_btnWidth:40},
             { title: "Mask",       toolTip: "Make Stroke a Stencil Mask",   btnType: ButtonType.ToggleButton, icon: "user-circle", toolType: InkProperty.Mask,                          scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"IsNoviceMode()" } },
             { title: "Labels",     toolTip: "Show Labels Inside Shapes",    btnType: ButtonType.ToggleButton, icon: "text-width",  toolType: InkProperty.Labels,                        scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}},
-            { title: "Smart Draw", toolTip: "Draw with AI",                btnType: ButtonType.ToggleButton, icon: "user-pen",    toolType: InkTool.SmartDraw,                         scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}'},  funcs: {hidden: "IsNoviceMode()"}},
+            { title: "Smart Draw", toolTip: "Draw with AI",                 btnType: ButtonType.ToggleButton, icon: "user-pen",    toolType: InkTool.SmartDraw,                         scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}'},  funcs: {hidden: "IsNoviceMode()"}},
         ];
     }
 
@@ -843,9 +843,10 @@ 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, linearBtnWidth:40},
+            { title: "B.Width",                        toolTip: "Border width",         btnType: ButtonType.NumberSliderButton,                                                                                                                       ignoreClick: true,             scripts: {script: '{ return setBorderWidth(value, _readOnly_);}'}, numBtnMin: 0, linearView_btnWidth:40},
             { title: "Overlay", icon: "layer-group",   toolTip: "Overlay",              btnType: ButtonType.ToggleButton, expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode, true)'},                        scripts: { onClick: '{ return toggleOverlay(_readOnly_); }'}}, // Only when floating document is selected in freeform
             { title: "Back",    icon: "chevron-left",  toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton,  expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'},                  width: 30,  scripts: { onClick: 'prevKeyFrame(_readOnly_)'}},
             { title: "Num",     icon:"", toolTip: "Frame # (click to toggle edit mode)",btnType: ButtonType.TextButton,   expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)', buttonText: 'selectedDocs()?.lastElement()?.currentFrame?.toString()'}, width: 20, scripts: { onClick: '{ return curKeyFrame(_readOnly_);}'}},
@@ -853,17 +854,17 @@ pie title Minerals in my tap water
             { title: "Chat",    icon: "lightbulb",     toolTip: "Toggle Chat Assistant",btnType: ButtonType.ToggleButton, expertMode: false, toolType:"toggle-chat",               funcs: {},                                                                            width: 30,  scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} },
             { title: "Filter",  icon: "=",             toolTip: "Filter cards by tags", btnType: ButtonType.MultiToggleButton, 
                                                                                         subMenu: this.filterTools(),      expertMode: false, toolType:DocumentType.COL,            funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'},ignoreClick:true, width: 30},
-            { title: "Sort",    icon: "Sort",          toolTip: "Sort Documents",       subMenu: this.sortTools(),        expertMode: false, toolType:DocumentType.COL,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
-            { title: "Text",    icon: "Text",          toolTip: "Text functions",       subMenu: this.textTools(),        expertMode: false, toolType:DocumentType.RTF,            funcs: {                                                            linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
-            { title: "Ink",     icon: "Ink",           toolTip: "Ink functions",        subMenu: this.inkTools(),         expertMode: false, toolType:DocumentType.INK,            funcs: {hidden: `IsExploreMode()`,                                  linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available
-            { title: "Doc",     icon: "Doc",           toolTip: "Freeform Doc tools",   subMenu: this.freeTools(),        expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode, true)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
-            { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: this.viewTools(),        expertMode: false, toolType:DocumentType.COL,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
-            { title: "Stack",   icon: "View",          toolTip: "Stacking tools",       subMenu: this.stackTools(),       expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "Sort",    icon: "Sort",          toolTip: "Sort Documents",       subMenu: this.sortTools(),        expertMode: false, toolType:DocumentType.COL,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "Text",    icon: "Text",          toolTip: "Text functions",       subMenu: this.textTools(),        expertMode: false, toolType:DocumentType.RTF,            funcs: {                                                            linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "Ink",     icon: "Ink",           toolTip: "Ink functions",        subMenu: this.inkTools(),         expertMode: false, toolType:DocumentType.INK,            funcs: {hidden: `IsExploreMode()`,                                  linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available
+            { title: "Doc",     icon: "Doc",           toolTip: "Freeform Doc tools",   subMenu: this.freeTools(),        expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode, true)`, linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: this.viewTools(),        expertMode: false, toolType:DocumentType.COL,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "Stack",   icon: "View",          toolTip: "Stacking tools",       subMenu: this.stackTools(),       expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
                    
-            { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: this.webTools(),         expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
-            { title: "Video",   icon: "Video",         toolTip: "Video functions",      subMenu: this.videoTools(),       expertMode: false, toolType:DocumentType.VID,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Only when video is selected
-            { title: "Image",   icon: "Image",         toolTip: "Image functions",      subMenu: this.imageTools(),       expertMode: false, toolType:DocumentType.IMG,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Only when image is selected
-            { title: "Schema",  icon: "Schema",        toolTip: "Schema functions",     subMenu: this.schemaTools(),      expertMode: false, toolType:CollectionViewType.Schema,   funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`}, linearBtnWidth:58 }, // Only when Schema is selected
+            { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: this.webTools(),         expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
+            { title: "Video",   icon: "Video",         toolTip: "Video functions",      subMenu: this.videoTools(),       expertMode: false, toolType:DocumentType.VID,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Only when video is selected
+            { title: "Image",   icon: "Image",         toolTip: "Image functions",      subMenu: this.imageTools(),       expertMode: false, toolType:DocumentType.IMG,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Only when image is selected
+            { title: "Schema",  icon: "Schema",        toolTip: "Schema functions",     subMenu: this.schemaTools(),      expertMode: false, toolType:CollectionViewType.Schema,   funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_isOpen: `SelectedDocType(this.toolType, this.expertMode)`}, linearView_btnWidth:58 }, // Only when Schema is selected
          ];
     }
 
@@ -874,7 +875,7 @@ pie title Minerals in my tap water
             ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit,
             color: Colors.WHITE, 
             _nativeWidth: params.width ?? 30, _width: params.width ?? 30,
-            _height: 30, _nativeHeight: 30, linearBtnWidth: params.linearBtnWidth,
+            _height: 30, _nativeHeight: 30, linearView_btnWidth: params.linearView_btnWidth,
             toolType: params.toolType, expertMode: params.expertMode,
             _dragOnlyWithinContainer: true, _lockedPosition: true,
             embedContainer: btnContainer
@@ -893,9 +894,9 @@ pie title Minerals in my tap water
             return this.setupContextMenuButton(params, menuBtnDoc, menuDoc);
         }  
         // linear view
-        const reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_IsOpen"]),
+        const reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_isOpen"]),
             childDontRegisterViews: true, flexGap: 0, _height: 30, _width: 30, ignoreClick: !params.scripts?.onClick,
-            linearView_SubMenu: true, linearView_Expandable: true, embedContainer: menuDoc};
+            linearView_expandable: true, embedContainer: menuDoc};
         
         const items = (menuBtn?:Doc) => !menuBtn ? [] : subMenu.map(sub => this.setupContextMenuBtn(sub, menuBtn) );
         const creator = params.btnType === ButtonType.MultiToggleButton ? this.multiToggleList : this.linearButtonList;
@@ -907,7 +908,7 @@ pie title Minerals in my tap water
 
     /// Initializes all the default buttons for the top bar context menu
     static setupContextMenuButtons(doc: Doc, field="myContextMenuBtns") {
-        const reqdCtxtOpts:DocumentOptions = { title: "context menu buttons", undoIgnoreFields:new List<string>(['width', "linearView_IsOpen"]), flexGap: 0, childDragAction: dropActionType.embed, childDontRegisterViews: true,  linearView_IsOpen: true, ignoreClick: true, linearView_Expandable: false, _height: 35 };
+        const reqdCtxtOpts:DocumentOptions = { title: "context menu buttons", undoIgnoreFields:new List<string>(['width', "linearView_isOpen"]), flexGap: 0, childDragAction: dropActionType.embed, childDontRegisterViews: true,  linearView_isOpen: true, ignoreClick: true, linearView_expandable: false, _height: 35 };
         const ctxtMenuBtnsDoc = DocUtils.AssignDocField(doc, field, (opts, items) => this.linearButtonList(opts, items??[]), reqdCtxtOpts, undefined);
         const ctxtMenuBtns = CurrentUserUtils.contextMenuTools().map(params => this.setupContextMenuBtn(params, ctxtMenuBtnsDoc) );
         return DocUtils.AssignOpts(ctxtMenuBtnsDoc, reqdCtxtOpts, ctxtMenuBtns);
@@ -934,7 +935,7 @@ pie title Minerals in my tap water
         const btns = btnDescs.map(desc => dockBtn({_width: desc.opts.width??30, _height: 30, defaultDoubleClick: 'ignore', undoIgnoreFields: new List<string>(['opacity']), _dragOnlyWithinContainer: true, ...desc.opts}, desc.scripts, desc.funcs));
         const dockBtnsReqdOpts:DocumentOptions = {
             title: "docked buttons", _height: 40, flexGap: 0, layout_boxShadow: "standard", childDragAction: dropActionType.move,
-            childDontRegisterViews: true, linearView_IsOpen: true, linearView_Expandable: false, ignoreClick: true
+            childDontRegisterViews: true, linearView_isOpen: true, linearView_expandable: false, ignoreClick: true
         };
         return DocUtils.AssignDocField(doc, field, (opts, items) => this.linearButtonList(opts, items??[]), dockBtnsReqdOpts, btns);
     }
@@ -1074,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 3bae2881e..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());
@@ -349,7 +350,7 @@ export class DocumentManager {
             // bcz: should this delay be an options parameter?
             setTimeout(() => {
                 Doc.linkFollowHighlight(viewSpec ? [docView.Document, viewSpec] : docView.Document, undefined, options.effect);
-                const zoomableText = StrCast(targetDoc.text_html, StrCast(targetDoc.ai_firefly_prompt));
+                const zoomableText = StrCast(targetDoc.text_html, StrCast(targetDoc.ai_prompt));
                 if (options.zoomTextSelections && Doc.IsUnhighlightTimerSet() && contextView && zoomableText) {
                     // if the docView is a text anchor, the contextView is the PDF/Web/Text doc
                     contextView.setTextHtmlOverlay(zoomableText, options.effect);
diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts
index b6b111930..1d4779d8a 100644
--- a/src/client/util/DropConverter.ts
+++ b/src/client/util/DropConverter.ts
@@ -41,7 +41,7 @@ function makeTemplate(doc: Doc, first: boolean = true): boolean {
     if (first && !docs.length) {
         // bcz: feels hacky : if the root level document has items, it's not a field template
         isTemplate = Doc.MakeMetadataFieldTemplate(doc, layoutDoc[DocData], true) || isTemplate;
-    } else if (docData instanceof RichTextField || docData instanceof ImageField) {
+    } else if (docData instanceof RichTextField || docData instanceof ImageField || (docData === undefined && doc.type === DocumentType.IMG)) {
         if (!StrCast(layoutDoc.title).startsWith('-')) {
             isTemplate = Doc.MakeMetadataFieldTemplate(layoutDoc, layoutDoc[DocData], true);
         }
@@ -86,6 +86,8 @@ export function makeUserTemplateButtonOrImage(doc: Doc, image?: string) {
     dbox.dragFactory = layoutDoc;
     dbox.dropPropertiesToRemove = doc.dropPropertiesToRemove instanceof ObjectField ? ObjectField.MakeCopy(doc.dropPropertiesToRemove) : undefined;
     dbox.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory)');
+    const userTemplatesDoc = DocCast(Doc.UserDoc().template_user);
+    userTemplatesDoc && Doc.AddDocToList(userTemplatesDoc, 'data', layoutDoc);
     return dbox;
 }
 
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index d8e0c4cbe..6461605a6 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -265,10 +265,10 @@ export function UPDATE_SERVER_CACHE() {
     cacheDocumentIds = newCacheUpdate;
 
     // print out cached docs
-    Doc.MyDockedBtns?.linearView_IsOpen && console.log('Set cached docs = ');
+    Doc.MyDockedBtns?.linearView_isOpen && console.log('Set cached docs = ');
     const isFiltered = filtered.filter(doc => !Doc.IsSystem(doc));
     const strings = isFiltered.map(doc => StrCast(doc.title) + ' ' + (Doc.IsDataProto(doc) ? '(data)' : '(embedding)'));
-    Doc.MyDockedBtns?.linearView_IsOpen && strings.sort().forEach((str, i) => console.log(i.toString() + ' ' + str));
+    Doc.MyDockedBtns?.linearView_isOpen && strings.sort().forEach((str, i) => console.log(i.toString() + ' ' + str));
 
     rp.post(ClientUtils.prepend('/setCacheDocumentIds'), {
         body: {
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 ab665e984..69c2467a3 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -58,7 +58,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';
@@ -349,13 +349,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
@@ -365,10 +366,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
@@ -377,7 +375,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');
@@ -393,17 +391,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,
@@ -411,34 +412,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
         );
     };
 
@@ -524,7 +508,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));
@@ -598,14 +582,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));
@@ -623,8 +607,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));
@@ -632,25 +618,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
                 }
             }
         }
@@ -695,7 +679,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;
@@ -737,7 +722,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 =
@@ -932,7 +917,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>
@@ -941,7 +926,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/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 0136f6abe..253db08de 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -497,8 +497,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             {...this._props}
                             setHeight={undefined}
                             setContentViewBox={this.setSubContentView} // this makes the inkingStroke the "dominant" component - ie, it will show the inking UI when selected (not text)
-                            yPadding={10}
-                            xPadding={10}
+                            yMargin={10}
+                            xMargin={10}
                             fieldKey="text"
                             // dontRegisterView={true}
                             noSidebar
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ab3757489..686f8ed88 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -173,7 +173,7 @@ export class MainView extends ObservableReactComponent<object> {
             views => views.length > 1 && document.activeElement instanceof HTMLElement && document.activeElement?.blur()
         );
         reaction(
-            () => Doc.MyDockedBtns?.linearView_IsOpen,
+            () => Doc.MyDockedBtns?.linearView_isOpen,
             open => SnappingManager.SetPrintToConsole(!!open)
         );
         const scriptTag = document.createElement('script');
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/ObservableReactComponent.tsx b/src/client/views/ObservableReactComponent.tsx
index 2290516dc..cf4bf991e 100644
--- a/src/client/views/ObservableReactComponent.tsx
+++ b/src/client/views/ObservableReactComponent.tsx
@@ -16,15 +16,13 @@ export abstract class ObservableReactComponent<T> extends React.Component<T, obj
         makeObservable(this);
     }
     __passiveWheel: HTMLElement | null = null;
-    _isContentActive: () => boolean | undefined = () => false;
+    __isContentActive: () => boolean | undefined = () => false;
 
     /**
      * default method to stop wheel events from bubbling up to parent components.
      * @param e
      */
-    onPassiveWheel = (e: WheelEvent) => {
-        if (this._isContentActive?.()) e.stopPropagation();
-    };
+    onPassiveWheel = (e: WheelEvent) => this.__isContentActive?.() && e.stopPropagation();
 
     /**
      * This fixes the problem where a component uses wheel events to scroll, but is nested inside another component that
@@ -36,7 +34,7 @@ export abstract class ObservableReactComponent<T> extends React.Component<T, obj
      * @param onPassiveWheel an optional function to call to handle the wheel event (and block its propagation. If omitted, the event won't propagate.
      */
     fixWheelEvents = (ele: HTMLElement | null, isContentActive: () => boolean | undefined, onPassiveWheel?: (e: WheelEvent) => void) => {
-        this._isContentActive = isContentActive;
+        this.__isContentActive = isContentActive;
         this.__passiveWheel?.removeEventListener('wheel', onPassiveWheel ?? this.onPassiveWheel);
         this.__passiveWheel = ele;
         ele?.addEventListener('wheel', onPassiveWheel ?? this.onPassiveWheel, { passive: false });
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 28566ba1d..2c84d7fe7 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -165,7 +165,7 @@ export class PropertiesButtons extends React.Component {
     //                 // containerDoc._forceActive =
     //                 //containerDoc._freeform_fitContentsToBox =
     //                 containerDoc._isLightbox = !containerDoc._isLightbox;
-    //                 //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
+    //                 //containerDoc._xMargin = containerDoc._yMargin = containerDoc._isLightbox ? 10 : undefined;
     //                 const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
     //                 //dv.Document.onClick = ScriptField.MakeScript('{this.data = undefined; documentView.select(false)}', { documentView: 'any' });
     //                 containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.layout_linkDisplay = false)));
@@ -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/ViewBoxInterface.ts b/src/client/views/ViewBoxInterface.ts
index 0ddac8914..d8dab8e89 100644
--- a/src/client/views/ViewBoxInterface.ts
+++ b/src/client/views/ViewBoxInterface.ts
@@ -64,5 +64,4 @@ export abstract class ViewBoxInterface<P> extends ObservableReactComponent<React
     dontRegisterView?: () => boolean; // KeyValueBox's don't want to register their views
     isUnstyledView?: () => boolean; // SchemaView and KeyValue are unstyled -- not titles, no opacity, no animations
     componentAIView?: () => JSX.Element;
-    componentAIViewHistory?: () => JSX.Element;
 }
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index d5edc3e0b..3dc7bc515 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -133,7 +133,7 @@ export class CollectionCardView extends CollectionSubView() {
     }
 
     @computed get yMargin() {
-        return this._props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
+        return this._props.yMargin || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
     }
 
     @computed get cardDeckWidth() {
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index ac1981012..3c5bc10de 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -206,7 +206,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                             marginLeft: this.captionMarginX,
                             width: `calc(100% - ${this.captionMarginX * 2}px)`,
                         }}>
-                        <FormattedTextBox xPadding={10} yPadding={10} {...captionProps} fieldKey={carouselShowsCaptions} styleProvider={this.captionStyleProvider} Document={this.curDoc()} TemplateDataDocument={undefined} />
+                        <FormattedTextBox xMargin={10} yMargin={10} {...captionProps} fieldKey={carouselShowsCaptions} styleProvider={this.captionStyleProvider} Document={this.curDoc()} TemplateDataDocument={undefined} />
                     </div>
                 )}
             </>
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 be570564b..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() {
@@ -89,7 +105,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this._props.PanelWidth()));
     }
     @computed get yMargin() {
-        return this._props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
+        return this._props.yMargin || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
     }
 
     @computed get gridGap() {
@@ -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));
@@ -381,8 +339,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 hideDecorations={this._props.childHideDecorations}
                 childFiltersByRanges={this.childDocRangeFilters}
                 searchFilterDocs={this.searchFilterDocs}
-                xPadding={NumCast(this.layoutDoc._childXPadding, this._props.childXPadding)}
-                yPadding={NumCast(this.layoutDoc._childYPadding, this._props.childYPadding)}
+                xMargin={NumCast(this.layoutDoc._childXPadding, this._props.childXPadding)}
+                yMargin={NumCast(this.layoutDoc._childYPadding, this._props.childYPadding)}
                 rejectDrop={this._props.childRejectDrop}
                 addDocument={this._props.addDocument}
                 moveDocument={this._props.moveDocument}
@@ -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 994669734..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 = '';
@@ -71,6 +71,8 @@ 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;
@@ -92,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._ele) this.props.refList.splice(this.props.refList.indexOf(this._ele), 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._ele && this.props.refList.push(this._ele);
+        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
@@ -107,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;
     }
 
@@ -191,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;
@@ -313,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.
@@ -363,9 +370,10 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
                         }}>
                         <div
                             key={`${heading}-stack`}
+                            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',
@@ -398,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 e79d0a76d..01a8da313 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -9,7 +9,7 @@ import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
 import { ScriptField } from '../../../fields/ScriptField';
-import { BoolCast, Cast, DateCast, NumCast, ScriptCast, StrCast, toList } from '../../../fields/Types';
+import { BoolCast, Cast, DateCast, DocCast, NumCast, ScriptCast, StrCast, toList } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
 import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
 import { GestureUtils } from '../../../pen-gestures/GestureUtils';
@@ -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];
@@ -561,7 +565,17 @@ export function CollectionSubView<X>() {
                             }
                             const loading = Docs.Create.LoadingDocument(file, options);
                             Doc.addCurrentlyLoading(loading);
-                            DocUtils.uploadFileToDoc(file, {}, loading);
+                            DocUtils.uploadFileToDoc(file, {}, loading).then(d => {
+                                if (d && d?.type === DocumentType.IMG) {
+                                    const imgTemplate = DocCast(Doc.UserDoc().defaultImageLayout);
+                                    if (imgTemplate) {
+                                        const templateFieldKey = StrCast(imgTemplate.title);
+                                        d.layout_fieldKey = templateFieldKey;
+                                        d[templateFieldKey] = imgTemplate;
+                                    }
+                                }
+                            });
+
                             return loading;
                         })
                     ))
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 4348bc7dc..c4373aaa7 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -163,8 +163,8 @@ export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps
                     childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyFilter}
                     searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
                     fitContentsToBox={returnTrue}
-                    xPadding={this.xPadding}
-                    yPadding={this.yPadding}
+                    xMargin={this.xPadding}
+                    yMargin={this.yPadding}
                 />
                 <div className="miniOverlay" onPointerDown={this.miniDown}>
                     <TabMiniThumb miniLeft={miniLeft} miniTop={miniTop} miniWidth={miniWidth} miniHeight={miniHeight} />
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index fb2d0955f..5b2f1ff81 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -1042,8 +1042,8 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
                 disableBrushing={this.treeView._props.disableBrushing}
                 hideLinkButton={BoolCast(this.treeView.Document.childHideLinkButton)}
                 dontRegisterView={BoolCast(this.treeView.Document.childDontRegisterViews, this._props.dontRegisterView)}
-                xPadding={NumCast(this.treeView.Document.childXPadding, this.treeView._props.childXPadding)}
-                yPadding={NumCast(this.treeView.Document.childYPadding, this.treeView._props.childYPadding)}
+                xMargin={NumCast(this.treeView.Document.childXPadding, this.treeView._props.childXPadding)}
+                yMargin={NumCast(this.treeView.Document.childYPadding, this.treeView._props.childYPadding)}
                 childFilters={returnEmptyFilter}
                 childFiltersByRanges={returnEmptyFilter}
                 searchFilterDocs={returnEmptyDoclist}
@@ -1148,8 +1148,8 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
                 moveDocument={this.move}
                 removeDocument={this._props.removeDoc}
                 whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
-                xPadding={NumCast(this.treeView.Document.childXPadding, this.treeView._props.childXPadding)}
-                yPadding={NumCast(this.treeView.Document.childYPadding, this.treeView._props.childYPadding)}
+                xMargin={NumCast(this.treeView.Document.childXPadding, this.treeView._props.childXPadding)}
+                yMargin={NumCast(this.treeView.Document.childYPadding, this.treeView._props.childYPadding)}
                 addDocTab={this._props.addDocTab}
                 pinToPres={this.treeView._props.pinToPres}
                 disableBrushing={this.treeView._props.disableBrushing}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 2364fd74a..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);
@@ -256,8 +256,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     override contentBounds = () => {
         const { x, y, r, b } = aggregateBounds(
             this._layoutElements.filter(e => e.bounds?.width && !e.bounds.z).map(e => e.bounds!),
-            NumCast(this.layoutDoc._xPadding, NumCast(this.layoutDoc._xMargin, this._props.xPadding ?? 0)),
-            NumCast(this.layoutDoc._yPadding, NumCast(this.layoutDoc._yMargin, this._props.yPadding ?? 0))
+            NumCast(this.layoutDoc._xMargin, this._props.xMargin ?? 0),
+            NumCast(this.layoutDoc._yMargin, this._props.yMargin ?? 0)
         );
         const [width, height] = [r - x, b - y];
         return {
@@ -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));
@@ -1259,15 +1259,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     /**
      * Adds the created drawing to the freeform canvas and sets the metadata.
      */
-    addDrawing = (doc: Doc, opts: DrawingOptions, gptRes: string, x?: number, y?: number) => {
-        doc.$title = opts.text;
-        doc.$width = opts.size;
-        doc.$ai_drawing_input = opts.text;
-        doc.$ai_drawing_complexity = opts.complexity;
-        doc.$ai_drawing_colored = opts.autoColor;
-        doc.$ai_drawing_size = opts.size;
-        doc.$ai_drawing_data = gptRes;
-        doc.$ai = 'gpt';
+    addDrawing = (doc: Doc, opts: DrawingOptions, x?: number, y?: number) => {
+        doc.$ai_prompt = opts.text;
         this._drawingContainer = doc;
         if (x !== undefined && y !== undefined) {
             [doc.x, doc.y] = this.screenToFreeformContentsXf.transformPoint(x, y);
@@ -1278,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);
@@ -1305,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();
@@ -1429,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;
@@ -1512,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;
@@ -1555,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}
@@ -1740,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;
@@ -1773,9 +1767,9 @@ 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._xPadding), NumCast(this.layoutDoc._yPadding));
+                            return aggregateBounds(clist, NumCast(this.layoutDoc._xMargin), NumCast(this.layoutDoc._yMargin));
                         }
                         return undefined;
                     },
@@ -1935,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;
@@ -1954,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;
@@ -1977,7 +1971,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 event: action(() => {
                     SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
                     SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
-                    !SmartDrawHandler.Instance.ShowRegenerate ? SmartDrawHandler.Instance.displayRegenerate(this._downX, this._downY - 10) : SmartDrawHandler.Instance.hideRegenerate();
+                    !SmartDrawHandler.Instance.ShowRegenerate ? SmartDrawHandler.Instance.displayRegenerate(this._downX, this._downY - 10, NumCast(this.layoutDoc[this.scaleFieldKey])) : SmartDrawHandler.Instance.hideRegenerate();
                 }),
                 icon: 'pen-to-square',
             });
@@ -2013,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;
@@ -2031,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] };
@@ -2039,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);
@@ -2137,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}
@@ -2182,9 +2178,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                             placeholder={this._drawingFillInput || StrCast(this.Document.title) || 'Describe image'}
                             type="text"
                             value={this._drawingFillInput}
-                            onChange={action(e => {
-                                this._drawingFillInput = e.target.value;
-                            })}
+                            onChange={action(e => (this._drawingFillInput = e.target.value))}
                         />
                         <div className="collectionFreeFormView-aiView-strength">
                             <span className="collectionFreeFormView-aiView-similarity">Similarity</span>
@@ -2213,11 +2207,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                                 onClick={undoable(
                                     action(() => {
                                         this._drawingFillLoading = true;
-                                        DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(
-                                            action(() => {
-                                                this._drawingFillLoading = false;
-                                            })
-                                        );
+                                        DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(action(() => (this._drawingFillLoading = false)));
                                     }),
                                     'create image'
                                 )}
@@ -2225,37 +2215,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         </div>
                     </div>
                 </div>
-                <div className="collectionfreeformview-aiView-regenerate-container">
-                    <span className="collectionfreeformview-aiView-subtitle">Regenerate</span>
-                    <div className="collectionfreeformview-aiView-regenerate">
-                        <input
-                            className="collectionfreeformview-aiView-input"
-                            aria-label="Edit instructions input"
-                            type="text"
-                            value={this._regenInput}
-                            onChange={action(e => {
-                                this._regenInput = e.target.value;
-                            })}
-                            placeholder="..under development.."
-                        />
-                        <div className="collectionFreeFormView-aiView-regenBtn">
-                            <Button
-                                text="Regenerate"
-                                type={Type.SEC}
-                                icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                                iconPlacement="right"
-                                // onClick={action(async () => {
-                                //     this._regenLoading = true;
-                                //     SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
-                                //     SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
-                                //     SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
-                                //     await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
-                                //     this._regenLoading = false;
-                                // })}
-                            />
-                        </div>
-                    </div>
-                </div>
             </div>
         );
     };
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 3cc7c0f2d..c120cddf0 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -190,6 +190,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();
         }
     };
@@ -372,7 +373,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;
@@ -508,7 +509,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/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 1d5e70be7..b837b3a86 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -58,7 +58,7 @@ export class CollectionGridView extends CollectionSubView() {
         return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this._props.PanelWidth()));
     }
     @computed get yMargin() {
-        return this._props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
+        return this._props.yMargin || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth()));
     }
     @computed get gridGap() {
         return NumCast(this.Document._gridGap, 10);
@@ -206,7 +206,7 @@ export class CollectionGridView extends CollectionSubView() {
             setContentViewBox={emptyFunction}
             whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
             onClickScript={this.onChildClickHandler}
-            dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as 'x' | 'y' | 'xy'}
+            dontCenter={StrCast(this.layoutDoc.layout_dontCenter, StrCast(childLayout.layout_dontCenter)) as 'x' | 'y' | 'xy'}
             showTags={BoolCast(this.layoutDoc.showChildTags) || BoolCast(this.Document._layout_showTags)}
         />
     );
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 3c2a99b1e..d0a1e6f0d 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -27,7 +27,7 @@ import './CollectionLinearView.scss';
 /**
  * CollectionLinearView is the class for rendering the horizontal collection
  * of documents, it useful for horizontal menus. It can either be expandable
- * or not using the linearView_Expandable field.
+ * or not using the linearView_expandable field.
  * It is used in the following locations:
  * - It is used in the popup menu on the bottom left (see docButtons() in MainView.tsx)
  * - It is used for the context sensitive toolbar at the top (see contMenuButtons() in CollectionMenu.tsx)
@@ -52,7 +52,7 @@ export class CollectionLinearView extends CollectionSubView() {
 
     componentDidMount() {
         this._widthDisposer = reaction(
-            () => 5 + NumCast(this.dataDoc.linearBtnWidth, this.dimension()) + (this.layoutDoc.linearView_IsOpen ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (NumCast(doc._width) || this.dimension()) + tot + 4, 0) : 0),
+            () => 5 + NumCast(this.dataDoc.linearView_btnWidth, this.dimension()) + (this.layoutDoc.linearView_isOpen ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (NumCast(doc._width) || this.dimension()) + tot + 4, 0) : 0),
             width => {
                 this.childDocs.length && (this.layoutDoc._width = width);
             },
@@ -208,7 +208,7 @@ export class CollectionLinearView extends CollectionSubView() {
     render() {
         const flexDir = StrCast(this.Document.flexDirection); // Specify direction of linear view content
         const flexGap = NumCast(this.Document.flexGap); // Specify the gap between linear view content
-        const isExpanded = BoolCast(this.layoutDoc.linearView_IsOpen);
+        const isExpanded = BoolCast(this.layoutDoc.linearView_isOpen);
 
         const menuOpener = (
             <Toggle
@@ -219,9 +219,9 @@ export class CollectionLinearView extends CollectionSubView() {
                 type={Type.TERT}
                 onPointerDown={e => e.stopPropagation()}
                 toggleType={ToggleType.BUTTON}
-                toggleStatus={BoolCast(this.layoutDoc.linearView_IsOpen)}
+                toggleStatus={BoolCast(this.layoutDoc.linearView_isOpen)}
                 onClick={() => {
-                    this.layoutDoc.linearView_IsOpen = !isExpanded;
+                    this.layoutDoc.linearView_isOpen = !isExpanded;
                     ScriptCast(this.Document.onClick)?.script.run({ this: this.Document }, console.log);
                 }}
                 tooltip={isExpanded ? 'Close' : 'Open'}
@@ -231,10 +231,10 @@ export class CollectionLinearView extends CollectionSubView() {
         );
 
         return (
-            <div className={`collectionLinearView-outer ${this.layoutDoc.linearView_SubMenu}`} style={{ backgroundColor: this.layoutDoc.linearView_IsOpen ? undefined : 'transparent' }}>
+            <div className="collectionLinearView-outer" style={{ backgroundColor: this.layoutDoc.linearView_isOpen ? undefined : 'transparent' }}>
                 <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension(), pointerEvents: 'all' }}>
-                    {!this.layoutDoc.linearView_Expandable ? null : menuOpener}
-                    {!this.layoutDoc.linearView_IsOpen ? null : (
+                    {!this.layoutDoc.linearView_expandable ? null : menuOpener}
+                    {!this.layoutDoc.linearView_isOpen && this.layoutDoc.linearView_expandable ? null : (
                         <div
                             className="collectionLinearView-content"
                             style={{
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index c06391f35..6442385c0 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -359,7 +359,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     addNewKey = (key: string, defaultVal: FieldType | undefined) => {
         this.childDocs.forEach(doc => {
-            doc[DocData][key] = defaultVal;
+            if (doc[DocData][key] === undefined) doc[DocData][key] = defaultVal;
         });
     };
 
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/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 940c4cb99..3805b0dca 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -148,7 +148,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public static getValues(doc: Doc, time: number, fillIn: boolean = true) {
         return CollectionFreeFormDocumentView.animFields.reduce(
             (p, val) => {
-                p[val.key] = Cast(doc[`${val.key}_indexed`], listSpec('number'), fillIn ? [NumCast(doc[val.key], val.val)] : []).reduce(
+                p[val.key] = Cast(doc[`${val.key}_indexed`], listSpec('number'), fillIn ? [NumCast(doc[val.key], val.val)] : [])!.reduce(
                     (prev, v, i) => ((i <= Math.round(time) && v !== undefined) || prev === undefined ? v : prev),
                     undefined as unknown as number
                 );
@@ -161,7 +161,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public static getStringValues(doc: Doc, time: number) {
         return CollectionFreeFormDocumentView.animStringFields.reduce(
             (p, val) => {
-                p[val] = Cast(doc[`${val}_indexed`], listSpec('string'), [StrCast(doc[val])]).reduce((prev, v, i) => ((i <= Math.round(time) && v !== undefined) || prev === undefined ? v : prev), undefined as unknown as string);
+                p[val] = Cast(doc[`${val}_indexed`], listSpec('string'), [StrCast(doc[val])])!.reduce((prev, v, i) => ((i <= Math.round(time) && v !== undefined) || prev === undefined ? v : prev), undefined as unknown as string);
                 return p;
             },
             {} as { [val: string]: Opt<string> }
@@ -171,7 +171,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public static setStringValues(time: number, d: Doc, vals: { [val: string]: Opt<string> }) {
         const timecode = Math.round(time);
         Object.keys(vals).forEach(val => {
-            const findexed = Cast(d[`${val}_indexed`], listSpec('string'), []).slice();
+            const findexed = Cast(d[`${val}_indexed`], listSpec('string'), [])!.slice();
             findexed[timecode] = vals[val] || '';
             d[`${val}_indexed`] = new List<string>(findexed);
         });
@@ -180,7 +180,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public static setValues(time: number, d: Doc, vals: { [val: string]: Opt<number> }) {
         const timecode = Math.round(time);
         Object.keys(vals).forEach(val => {
-            const findexed = Cast(d[`${val}_indexed`], listSpec('number'), []).slice();
+            const findexed = Cast(d[`${val}_indexed`], listSpec('number'), [])!.slice();
             findexed[timecode] = vals[val] as unknown as number;
             d[`${val}_indexed`] = new List<number>(findexed);
         });
@@ -204,15 +204,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         docs.forEach(doc => {
             this.animFields.forEach(val => {
                 const findexed = Cast(doc[`${val.key}_indexed`], listSpec('number'), null);
-                findexed?.length <= timecode + 1 && findexed.push(undefined as unknown as number);
+                (findexed?.length ?? 0) <= timecode + 1 && findexed?.push(undefined as unknown as number);
             });
             this.animStringFields.forEach(val => {
                 const findexed = Cast(doc[`${val}_indexed`], listSpec('string'), null);
-                findexed?.length <= timecode + 1 && findexed.push(undefined as unknown as string);
+                (findexed?.length ?? 0) <= timecode + 1 && findexed?.push(undefined as unknown as string);
             });
             this.animDataFields(doc).forEach(val => {
                 const findexed = Cast(doc[`${val}_indexed`], listSpec(InkField), null);
-                findexed?.length <= timecode + 1 && findexed.push(undefined as unknown as InkField);
+                (findexed?.length ?? 0) <= timecode + 1 && findexed?.push(undefined as unknown as InkField);
             });
         });
         return newTimer;
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.scss b/src/client/views/nodes/DocumentView.scss
index 5ac66f2cd..c4351a200 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -119,6 +119,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        margin: auto;
         position: relative; // allows contents to be positioned relative/below title
         > .formattedTextBox {
             position: absolute; // position a child text box
@@ -302,6 +303,6 @@
     background: transparent;
 
     .documentView-editorView-resizer {
-        height: 5px;
+        height: 2px;
     }
 }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 284014e54..9b73cc073 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -648,11 +648,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
 
     rootSelected = () => this._rootSelected;
     panelHeight = () => this._props.PanelHeight() - this.headerMargin - 2 * NumCast(this.Document.borderWidth);
-    screenToLocalContent = () =>
-        this._props
-            .ScreenToLocalTransform()
-            .translate(-NumCast(this.Document.borderWidth), -this.headerMargin - NumCast(this.Document.borderWidth))
-            .scale(this.viewingAiEditor() ? (this._props.PanelHeight() || 1) / this.aiContentsHeight() : 1);
+    aiShift = () => (!this.viewingAiEditor() ? 0 : (this._props.PanelWidth() - this.aiContentsWidth()) / 2);
+    aiScale = () => (this.viewingAiEditor() ? (this._props.PanelHeight() || 1) / this.aiContentsHeight() : 1);
     onClickFunc = () => (this.disableClickScriptFunc ? undefined : this.onClickHdlr);
     setHeight = (height: number) => { !this._props.suppressSetHeight && (this.layoutDoc._height = Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), height + 2 * NumCast(this.Document.borderWidth))); } // prettier-ignore
     setContentView = action((view: ViewBoxInterface<FieldViewProps>) => (this._componentView = view));
@@ -678,7 +675,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
         return this._props.styleProvider?.(doc, props, property);
     };
 
-    @observable _aiWinHeight = 88;
+    @observable _aiWinHeight = 32;
 
     TagsBtnHeight = 22;
     @computed get currentScale() {
@@ -703,33 +700,21 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
     @computed get uiBtnScaling() {  return Math.max(this.maxWidgetSize / this.TagsBtnHeight, 1) * Math.min(1, this.viewScaling); } // prettier-ignore
 
     aiContentsWidth = () => (this.aiContentsHeight() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1);
-    aiContentsHeight = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight * this.uiBtnScaling);
+    aiContentsHeight = () => Math.max(10, this._props.PanelHeight() - (this._aiWinHeight + (this.tagsOverlayFunc() ? 22 : 0)) * this.uiBtnScaling);
     @computed get aiEditor() {
         return (
-            <>
-                <div
-                    className="documentView-editorView-history"
-                    ref={r => this.historyRef(this._oldAiWheel, (this._oldAiWheel = r))}
-                    style={{
-                        transform: `scale(${this.uiBtnScaling})`,
-                        height: this.aiContentsHeight() / this.uiBtnScaling,
-                        width: ((this._props.PanelWidth() - this.aiContentsWidth()) * 0.95) / this.uiBtnScaling,
-                    }}>
-                    {this._componentView?.componentAIViewHistory?.() ?? null}
-                </div>
-                <div
-                    className="documentView-editorView"
-                    style={{
-                        background: SnappingManager.userVariantColor,
-                        width: `${100 / this.uiBtnScaling}%`, //
-                        transform: `scale(${this.uiBtnScaling})`,
-                    }}
-                    ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}>
-                    <div className="documentView-editorView-resizer" />
-                    {this._componentView?.componentAIView?.() ?? null}
-                    {this._props.DocumentView?.() ? <TagsView background={this.backgroundBoxColor} Views={[this._props.DocumentView?.()]} /> : null}
-                </div>
-            </>
+            <div
+                className="documentView-editorView"
+                style={{
+                    background: SnappingManager.userVariantColor,
+                    width: `${100 / this.uiBtnScaling}%`, //
+                    transform: `scale(${this.uiBtnScaling})`,
+                }}
+                ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}>
+                <div className="documentView-editorView-resizer" />
+                {this._componentView?.componentAIView?.() ?? null}
+                {this._props.DocumentView?.() ? <TagsView background={this.backgroundBoxColor} Views={[this._props.DocumentView?.()]} /> : null}
+            </div>
         );
     }
     @computed get tagsOverlay() {
@@ -755,11 +740,11 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
     }
     widgetOverlayFunc = () => (this.widgetDecorations ? this.widgetOverlay : null);
     viewingAiEditor = () => (this._props.showAIEditor && this._componentView?.componentAIView?.() !== undefined ? this.aiEditor : null);
-    _contentsRef = React.createRef<DocumentContentsView>();
+    @observable _contentsRef: DocumentContentsView | undefined = undefined;
     @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
@@ -771,7 +756,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
                     }}>
                     <DocumentContentsView
                         {...this._props}
-                        ref={this._contentsRef}
+                        ref={action((r: DocumentContentsView) => (this._contentsRef = r))}
                         layoutFieldKey={StrCast(this.Document.layout_fieldKey, 'layout')}
                         pointerEvents={this.contentPointerEvents}
                         setContentViewBox={this.setContentView}
@@ -780,7 +765,6 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
                         PanelHeight={this.viewingAiEditor() ? this.aiContentsHeight : this.panelHeight}
                         setHeight={this.setHeight}
                         isContentActive={this.isContentActive}
-                        ScreenToLocalTransform={this.screenToLocalContent}
                         rootSelected={this.rootSelected}
                         onClickScript={this.onClickFunc}
                         setTitleFocus={this.setTitleFocus}
@@ -913,8 +897,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
                 }}>
                 <FormattedTextBox
                     {...this._props}
-                    yPadding={10}
-                    xPadding={10}
+                    yMargin={10}
+                    xMargin={10}
                     fieldKey={this.showCaption}
                     styleProvider={this.captionStyleProvider}
                     dontRegisterView
@@ -1184,7 +1168,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
      * @returns boolean whether sub-component Doc is in synch with the layoutDoc that this view thinks its rendering
      */
     IsInvalid = (renderDoc?: Doc): boolean => {
-        const docContents = this._docViewInternal?._contentsRef.current;
+        const docContents = this._docViewInternal?._contentsRef;
         return !(
             (!renderDoc ||
                 (docContents?.layoutDoc === renderDoc && //
@@ -1291,7 +1275,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         if (this.ComponentView?.screenBounds?.()) {
             return this.ComponentView.screenBounds();
         }
-        const xf = this.screenToContentsTransform().scale(this.nativeScaling).inverse();
+        const xf = this.screenToContentBoundsTransform().inverse();
         const [[left, top], [right, bottom]] = [xf.transformPoint(0, 0), xf.transformPoint(this.panelWidth, this.panelHeight)];
 
         // transition is returned so that the bounds will 'update' at the end of an animated transition.  This is needed by xAnchor in LinkBox
@@ -1405,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.
@@ -1498,17 +1490,22 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     isHovering = () => this._isHovering;
     selfView = () => this;
     /**
-     * @returns Transform to the document view (in the coordinate system of whatever contains the DocumentView)
+     * @returns Transform to the document view's available panel space (in the coordinate system of whatever contains the DocumentView)
      */
     screenToViewTransform = () => this._props.ScreenToLocalTransform();
     /**
+     * @returns Transform to the document view after centering in available panel space(in the coordinate system of whatever contains the DocumentView)
+     */
+    private screenToContentBoundsTransform = () => this.screenToViewTransform().translate(-this.centeringX, -this.centeringY);
+    /**
      * @returns Transform to the coordinate system of the contents of the document view (includes native dimension scaling and centering)
      */
     screenToContentsTransform = () =>
         this._props
             .ScreenToLocalTransform()
             .translate(-this.centeringX, -this.centeringY)
-            .scale(1 / this.nativeScaling);
+            .translate(-(this._docViewInternal?.aiShift() ?? 0), 0)
+            .scale((this._docViewInternal?.aiScale() ?? 1) / this.nativeScaling);
 
     htmlOverlay = () => {
         const effect = StrCast(this._htmlOverlayEffect?.presentation_effect, StrCast(this._htmlOverlayEffect?.followLinkAnimEffect));
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 3cacb6692..8e48a0b54 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';
@@ -21,6 +21,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);
@@ -30,6 +31,8 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
     componentDidMount() {
         this._props.setContentViewBox?.(this);
         if (DocumentView.SelectOnLoad === this.Document && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.()))) {
+            this._liveTextUndo = FormattedTextBox.LiveTextUndo;
+            FormattedTextBox.LiveTextUndo = undefined;
             this._props.select(false);
 
             this._ref.current?.mathField.focus();
@@ -113,9 +116,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}%`,
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index a6872f8dc..f6b405a43 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -52,8 +52,8 @@ export interface FieldViewSharedProps {
     renderDepth: number;
     scriptContext?: unknown; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document
     screenXPadding?: (view: DocumentView | undefined) => number; // padding in screen space coordinates (used by text box to reflow around UI buttons in carouselView)
-    xPadding?: number;
-    yPadding?: number;
+    xMargin?: number;
+    yMargin?: number;
     dontRegisterView?: boolean;
     dropAction?: dropActionType;
     dragAction?: dropActionType;
diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx
index 0bbd6a0d3..d04ec3a10 100644
--- a/src/client/views/nodes/IconTagBox.tsx
+++ b/src/client/views/nodes/IconTagBox.tsx
@@ -58,16 +58,20 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
         const tag = StrCast(key.toolType);
         const color = dv._props.styleProvider?.(dv.layoutDoc, dv.ComponentView?._props, StyleProp.FontColor) as string;
         return (
-            <Toggle
-                tooltip={`Click to add/remove the tag ${tag}`}
-                toggleStatus={TagItem.docHasTag(dv.Document, tag)}
-                toggleType={ToggleType.BUTTON}
-                icon={<FontAwesomeIcon className={`fontIconBox-icon-${ToggleType.BUTTON}`} icon={icon} color={color} />}
-                size={Size.XSMALL}
-                type={Type.PRIM}
-                onClick={() => this.setIconTag(tag, !TagItem.docHasTag(this.View.Document, tag))}
-                color={color}
-            />
+            <div>
+                {' '}
+                {/* tooltips require the wrapped item to be an element ref */}
+                <Toggle
+                    tooltip={`Click to add/remove the tag ${tag}`}
+                    toggleStatus={TagItem.docHasTag(dv.Document, tag)}
+                    toggleType={ToggleType.BUTTON}
+                    icon={<FontAwesomeIcon className={`fontIconBox-icon-${ToggleType.BUTTON}`} icon={icon} color={color} />}
+                    size={Size.XSMALL}
+                    type={Type.PRIM}
+                    onClick={() => this.setIconTag(tag, !TagItem.docHasTag(this.View.Document, tag))}
+                    color={color}
+                />
+            </div>
         );
     };
 
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 9f7a5d03f..5a6292fab 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -236,7 +236,7 @@
     .imageBox-aiView-input {
         overflow: hidden;
         text-overflow: ellipsis;
-        max-width: 65%;
+        max-width: 80%;
         width: 100%;
         color: black;
     }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d16baada6..30fc44f62 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,6 +1,6 @@
-import { Button, Colors, EditableText, IconButton, Size, Toggle, ToggleType, Type } from '@dash/components';
+import { Button, Colors, EditableText, IconButton, NumberDropdown, Size, Toggle, ToggleType, Type } from '@dash/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Slider, Tooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
 import axios from 'axios';
 import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -37,7 +37,6 @@ import { OverlayView } from '../OverlayView';
 import { AnchorMenu } from '../pdf/AnchorMenu';
 import { PinDocView, PinProps } from '../PinFuncs';
 import { DrawingFillHandler } from '../smartdraw/DrawingFillHandler';
-import { FireflyImageData, isFireflyImageData } from '../smartdraw/FireflyConstants';
 import { SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
 import { StickerPalette } from '../smartdraw/StickerPalette';
 import { StyleProp } from '../StyleProp';
@@ -102,7 +101,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable private _regenInput = '';
     @observable private _canInteract = true;
     @observable private _regenerateLoading = false;
-    @observable private _prevImgs: FireflyImageData[] = StrCast(this.Document.ai_firefly_history) ? JSON.parse(StrCast(this.Document.ai_firefly_history)) : [];
 
     // Add these observable properties to the ImageBox class
     @observable private _outpaintingInProgress = false;
@@ -114,6 +112,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?.();
@@ -154,7 +174,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._disposers.path = reaction(
             () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width), height: this.layoutDoc._height }),
             ({ nativeSize, width, height }) => {
-                if (!this.layoutDoc._layout_nativeDimEditable || !height) {
+                if (!this.layoutDoc._layout_nativeDimEditable || !height || this.layoutDoc.layout_resetNativeDim) {
+                    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;
                 }
             },
@@ -171,7 +192,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 }
         );
@@ -227,19 +248,20 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     const drag = de.complete.docDragData.draggedDocuments.lastElement();
                     const dragField = drag[Doc.LayoutDataKey(drag)];
                     const descText = RTFCast(dragField)?.Text || StrCast(dragField) || RTFCast(drag.text)?.Text || StrCast(drag.text) || StrCast(this.Document.title);
-                    const oldPrompt = StrCast(this.Document.ai_firefly_prompt, StrCast(this.Document.title));
+                    const oldPrompt = StrCast(this.Document.ai_prompt, StrCast(this.Document.title));
                     const newPrompt = (text: string) => (oldPrompt ? `${oldPrompt} ~~~ ${text}` : text);
                     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();
@@ -258,18 +280,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;
@@ -281,13 +302,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;
     });
@@ -303,7 +322,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;
@@ -365,11 +384,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();
     };
 
@@ -417,8 +434,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,
@@ -455,8 +471,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.');
@@ -669,8 +684,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 };
     }
@@ -690,7 +704,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">
@@ -732,14 +746,14 @@ 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"
                     ref={this._regenerateIconRef}
-                    onClick={() => DocCast(this.Document.ai_firefly_generatedDocs) && DocumentView.showDocument(DocCast(this.Document.ai_firefly_generatedDocs)!, { openLocation: OpenWhere.addRight })}
+                    onClick={() => DocCast(this.Document.ai_generatedDocs) && DocumentView.showDocument(DocCast(this.Document.ai_generatedDocs)!, { openLocation: OpenWhere.addRight })}
                     style={{
-                        display: (this._props.isContentActive() && (SnappingManager.CanEmbed || this.Document.ai_firefly_generatedDocs)) || this._regenerateLoading ? 'block' : 'none',
+                        display: (this._props.isContentActive() && (SnappingManager.CanEmbed || this.Document.ai_generatedDocs)) || this._regenerateLoading ? 'block' : 'none',
                         transform: `scale(${this.uiBtnScaling})`,
                         width: this._sideBtnWidth,
                         height: this._sideBtnWidth,
@@ -821,7 +835,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}
@@ -845,34 +859,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined;
     @observable private _fireflyRefStrength = 0;
 
-    componentAIViewHistory = () => (
-        <div className="imageBox-aiView-history">
-            <Button text="Clear History" type={Type.SEC} size={Size.XSMALL} />
-            {this._prevImgs.map(img => (
-                <div key={img.pathname}>
-                    <img
-                        className="imageBox-aiView-img"
-                        src={ClientUtils.prepend(img.pathname.replace(extname(img.pathname), '_s' + extname(img.pathname)))}
-                        onClick={() => {
-                            this.dataDoc[this.fieldKey] = new ImageField(img.pathname);
-                            this.dataDoc.ai_firefly_prompt = img.prompt;
-                            this.dataDoc.ai_firefly_seed = img.seed;
-                        }}
-                    />
-                    <span>{img.prompt}</span>
-                </div>
-            ))}
-        </div>
-    );
-
     componentAIView = () => {
-        const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey]));
         return (
             <div className="imageBox-aiView">
                 <div className="imageBox-aiView-regenerate">
-                    <span className="imageBox-aiView-firefly" style={{ color: SnappingManager.userColor }}>
-                        Firefly:
-                    </span>
                     <input
                         style={{ color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}
                         className="imageBox-aiView-input"
@@ -886,57 +876,39 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         <Button
                             text="Create"
                             type={Type.TERT}
+                            size={Size.XSMALL}
                             color={SnappingManager.userColor}
                             background={SnappingManager.userBackgroundColor}
                             // style={{ alignSelf: 'flex-end' }}
                             icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                             iconPlacement="right"
-                            onClick={action(async () => {
+                            onClick={action(() => {
                                 this._regenerateLoading = true;
-                                if (this._fireflyRefStrength) {
-                                    DrawingFillHandler.drawingToImage(this.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title))?.then(action(() => (this._regenerateLoading = false)));
-                                } else {
-                                    SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput || StrCast(this.Document.title), true).then(
-                                        action(newImgs => {
-                                            const firstImg = newImgs[0];
-                                            if (isFireflyImageData(firstImg)) {
-                                                const url = firstImg.pathname;
-                                                const imgField = new ImageField(url);
-                                                this._prevImgs.length === 0 &&
-                                                    this._prevImgs.push({ prompt: StrCast(this.dataDoc.ai_firefly_prompt), seed: this.dataDoc.ai_firefly_seed as number, href: this.paths.lastElement(), pathname: field?.url.pathname ?? '' });
-                                                this._prevImgs.unshift({ prompt: firstImg.prompt, seed: firstImg.seed, pathname: url });
-                                                this.dataDoc.ai_firefly_history = JSON.stringify(this._prevImgs);
-                                                this.dataDoc.ai_firefly_prompt = firstImg.prompt;
-                                                this.dataDoc[this.fieldKey] = imgField;
-                                                this._regenerateLoading = false;
-                                                this._regenInput = '';
-                                            }
-                                        })
-                                    );
-                                }
+                                DrawingFillHandler.drawingToImage(this.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title))?.then(action(() => (this._regenerateLoading = false)));
                             })}
                         />
                     </div>
-                </div>
-                <div className="imageBox-aiView-strength">
-                    <span className="imageBox-aiView-similarity" style={{ color: SnappingManager.userColor }}>
-                        Similarity
-                    </span>
-                    <Slider
-                        className="imageBox-aiView-slider"
-                        sx={{
-                            '& .MuiSlider-track': { color: SettingsManager.userColor },
-                            '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
-                            '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
-                        }}
-                        min={0}
-                        max={100}
-                        step={1}
-                        size="small"
-                        value={this._fireflyRefStrength}
-                        onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
-                        valueLabelDisplay="auto"
-                    />
+                    <div>
+                        <NumberDropdown
+                            color={SnappingManager.userColor}
+                            background={SnappingManager.userBackgroundColor}
+                            numberDropdownType="slider"
+                            showPlusMinus={false}
+                            formLabel="similarity"
+                            tooltip="structure similarity of created images to current image"
+                            type={Type.PRIM}
+                            width={75}
+                            min={0}
+                            max={100}
+                            number={this._fireflyRefStrength}
+                            size={Size.XXSMALL}
+                            setNumber={undoable(
+                                action(val => this._canInteract && (this._fireflyRefStrength = val as number)),
+                                `${this.Document.title} button set from list`
+                            )}
+                            fillWidth
+                        />
+                    </div>
                 </div>
             </div>
         );
@@ -986,6 +958,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;
@@ -1029,7 +1002,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}
@@ -1091,8 +1064,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.assignImageInfo(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 b08ed84b7..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';
@@ -27,7 +27,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     private dropDisposer?: DragManager.DragDropDisposer;
     private _timeout: NodeJS.Timeout | undefined;
     private _divRef: HTMLDivElement | null = null;
-    private _reaction: IReactionDisposer | undefined;
+    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);
@@ -43,7 +44,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        this._reaction = reaction(
+        this._disposers.active = reaction(
             () => this.Title,
             () => document.activeElement !== this._divRef && this._forceRerender++
         );
@@ -51,7 +52,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     componentWillUnMount() {
         this._timeout && clearTimeout(this._timeout);
         this.setText(this._divRef?.innerText ?? '');
-        this._reaction?.();
+        Object.values(this._disposers).forEach(disposer => disposer());
     }
 
     @observable _forceRerender = 0;
@@ -171,20 +172,21 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     render() {
         TraceMobx();
         const boxParams = this.fitTextToBox(undefined); // this causes mobx to trigger re-render when data changes
+        const [xmargin, ymargin] = [NumCast(this.layoutDoc._xMargin), NumCast(this.layoutDoc._uMargin)];
         return (
             <div className="labelBox-outerDiv" ref={this.createDropTarget} style={{ boxShadow: this.boxShadow }}>
                 <div
                     className="labelBox-mainButton"
                     style={{
                         backgroundColor: this.backgroundColor,
-                        color: StrCast(this.layoutDoc._text_fontColor, StrCast(this.layoutDoc._color)),
-                        fontFamily: StrCast(this.layoutDoc._text_fontFamily, StrCast(Doc.UserDoc().fontFamily)) || 'inherit',
+                        color: StrCast(this.layoutDoc[`${this.fieldKey}_fontColor`], StrCast(this.layoutDoc._color)),
+                        fontFamily: StrCast(this.layoutDoc[`${this.fieldKey}_fontFamily`], StrCast(Doc.UserDoc().fontFamily)) || 'inherit',
                         letterSpacing: StrCast(this.layoutDoc.letterSpacing),
-                        textTransform: StrCast(this.layoutDoc[this.fieldKey + '_transform']) as Property.TextTransform,
-                        paddingLeft: NumCast(this.layoutDoc._xPadding),
-                        paddingRight: NumCast(this.layoutDoc._xPadding),
-                        paddingTop: NumCast(this.layoutDoc._yPadding),
-                        paddingBottom: NumCast(this.layoutDoc._yPadding),
+                        textTransform: StrCast(this.layoutDoc[`${this.fieldKey}_transform`]) as Property.TextTransform,
+                        paddingLeft: xmargin,
+                        paddingRight: xmargin,
+                        paddingTop: ymargin,
+                        paddingBottom: ymargin,
                         width: this._props.PanelWidth(),
                         height: this._props.PanelHeight(),
                         whiteSpace: boxParams.multiLine ? 'pre-wrap' : 'pre',
@@ -192,8 +194,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     <div
                         key={this._forceRerender}
                         style={{
-                            width: this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xPadding),
-                            height: this._props.PanelHeight() - 2 * NumCast(this.layoutDoc._yPadding),
+                            width: this._props.PanelWidth() - 2 * xmargin,
+                            height: this._props.PanelHeight() - 2 * ymargin,
                             outline: 'unset !important',
                         }}
                         onKeyDown={e => {
@@ -214,12 +216,13 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             this._divRef?.removeEventListener('focusout', this.keepFocus);
                             this._divRef?.addEventListener('focusout', this.keepFocus);
                         }}
-                        onBlur={() => {
+                        onBlur={e => {
                             this._divRef?.removeEventListener('focusout', this.keepFocus);
                             this.setText(this._divRef?.innerText ?? '');
-                            RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined);
-                            FormattedTextBox.LiveTextUndo?.end();
-                            FormattedTextBox.LiveTextUndo = undefined;
+                            if (!FormattedTextBox.tryKeepingFocus(e.relatedTarget, () => this._divRef?.focus())) {
+                                RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined);
+                                this._liveTextUndo?.end();
+                            }
                         }}
                         dangerouslySetInnerHTML={{
                             __html: `<span class="textFitted textFitAlignVert" style="display: inline-block; text-align: center; font-size: 100px; height: 0px;">${this.Title?.startsWith('#') ? '' : (this.Title ?? '')}</span>`,
@@ -233,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/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 83c44c80f..45fa5cc12 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';
@@ -56,6 +55,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);
     }
@@ -232,14 +234,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) => {
@@ -397,7 +396,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"
@@ -423,17 +430,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' }}
@@ -557,8 +572,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         NativeHeight={this.sidebarNativeHeightFunc}
                         PanelHeight={this._props.PanelHeight}
                         PanelWidth={this.sidebarWidth}
-                        xPadding={0}
-                        yPadding={0}
+                        xMargin={0}
+                        yMargin={0}
                         viewField={this.SidebarKey}
                         isAnnotationOverlay={false}
                         originTopLeft
@@ -637,19 +652,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/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index 4f02d68d6..603dcad5c 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -335,8 +335,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 select={emptyFunction}
                                 isContentActive={emptyFunction}
                                 NativeDimScaling={returnOne}
-                                xPadding={25}
-                                yPadding={10}
+                                xMargin={25}
+                                yMargin={10}
                                 whenChildContentsActiveChanged={emptyFunction}
                                 removeDocument={returnFalse}
                                 moveDocument={returnFalse}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fa099178c..b3cb0e1db 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -338,12 +338,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;
     };
 
@@ -376,9 +381,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 f5d3613e3..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 {
@@ -41,4 +44,9 @@
     text-decoration: line-through;
     color: #ffffff;
   }
-  
\ No newline at end of file
+  
+.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 df505eb16..40064ad4d 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -4,13 +4,14 @@ 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';
@@ -19,25 +20,26 @@ import { DocumentView } from '../DocumentView';
 import { OpenWhere } from '../OpenWhere';
 import './CalendarBox.scss';
 import { DateField } from '../../../../fields/DateField';
+import { undoable } from '../../../util/UndoManager';
 
 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;
-
     componentDidMount(): void {
         this._props.setContentViewBox?.(this);
         this._eventsDisposer = reaction(
@@ -54,7 +56,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 }
         );
@@ -98,7 +100,7 @@ export class CalendarBox extends CollectionSubView() {
     // 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._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';
@@ -129,7 +131,7 @@ export class CalendarBox extends CollectionSubView() {
         return false;
     };
 
-    handleEventDrop = (arg: EventDropArg | EventResizeDoneArg) => {
+    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());
         if (!doc || !arg.event.start) return;
@@ -153,7 +155,7 @@ export class CalendarBox extends CollectionSubView() {
             doc.$startTime = new DateField(startDate);
             doc.$endTime = new DateField(endDate);
         }
-    };
+    }, 'change event date');
 
     handleEventClick = (arg: EventClickArg) => {
         const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
@@ -172,89 +174,114 @@ 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,
-                  eventResize: this.handleEventDrop,
-                  eventDidMount: arg => {
-                      const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
-                      if (!doc) return;
-
-                      if (doc.type === 'task') {
-                          const checkButton = document.createElement('button');
-                          checkButton.innerText = doc.$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';
+    @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:any) => (this._calendarRef = r)}
+                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',
+                          }
+                        : availableWidth > 300
+                          ? {
+                                left: 'prev,next',
+                                center: 'title',
+                                right: '',
+                            }
+                          : {
+                                left: '',
+                                center: 'title',
+                                right: '',
+                            }
+                }
+                selectable={true}
+                initialView={this.calendarViewType === 'multiMonth' ? undefined : this.calendarViewType}
+                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={false}
+                events={this.calendarEvents}
+                eventClick={this.handleEventClick}
+                eventDrop={this.handleEventDrop}
+                unselectAuto={false}
+                // unselect={() => {}}
+                select={(info:any) => {
+                    const start = dateRangeStrToDates(info.startStr).start.toISOString();
+                    const end = info.allDay ? start : dateRangeStrToDates(info.endStr).start.toISOString();
+                    this.dataDoc.date = start + '|' + end;
+                }}
+                // eventContent={() => {
+                //     return null;
+                // }}
+                eventDidMount={(arg:any) => { const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
+                    if (!doc) return;
 
-                          checkButton.onclick = ev => {
-                              ev.stopPropagation();
-                              doc.$completed = !doc.$completed;
-                              this._calendar?.refetchEvents();
-                          };
+                    if (doc.type === 'task') {
+                        const checkButton = document.createElement('button');
+                        checkButton.innerText = doc.$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';
 
-                          arg.el.style.position = 'relative';
-                          arg.el.appendChild(checkButton);
-                      }
+                        checkButton.onclick = ev => {
+                            ev.stopPropagation();
+                            doc.$completed = !doc.$completed;
+                            this._calendar?.refetchEvents();
+                        };
 
-                      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();
-                      });
-                  },
-              }));
-        cal?.render();
-        setTimeout(() => cal?.view.calendar.select(this.dateSelect.start, this.dateSelect.end));
-    };
+                        arg.el.style.position = 'relative';
+                        arg.el.appendChild(checkButton);
+                    }
+                    arg.el.addEventListener('pointerdown', (ev:any) => ev.button && ev.stopPropagation());
+                    if (navigator.userAgent.includes('Macintosh')) {
+                        arg.el.addEventListener('pointerup', (ev:any) => {
+                            ev.button && ev.stopPropagation();
+                            ev.button && this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId);
+                        });
+                    }
+                    arg.el.addEventListener('contextmenu', (ev:any) => {
+                        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(() => {
@@ -274,17 +301,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/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/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index c51f6c38b..c8df6e50f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -98,7 +98,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']);
@@ -270,13 +271,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) => {
@@ -425,10 +429,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) {
@@ -1070,15 +1074,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;
@@ -1145,13 +1143,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) {
@@ -1164,7 +1155,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     };
 
     @computed get tagsHeight() {
-        return this.DocumentView?.().showTags ? Math.max(0, 20 - Math.max(this._props.yPadding ?? 0, NumCast(this.layoutDoc._yMargin))) * this.ScreenToLocalBoxXf().Scale : 0;
+        return this.DocumentView?.().showTags ? Math.max(0, 20 - Math.max(this._props.yMargin ?? 0, NumCast(this.layoutDoc._yMargin))) * this.ScreenToLocalBoxXf().Scale : 0;
     }
 
     @computed get contentScaling() {
@@ -1182,21 +1173,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);
                 }
             },
@@ -1219,18 +1220,19 @@ 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) {
                     if (incomingValue?.data) {
-                        const updatedState = JSON.parse(incomingValue.data.Data);
+                        const updatedState = JSON.parse(incomingValue.data.Data.replace(/\n/g, ''));
                         if (JSON.stringify(this.EditorView.state.toJSON()) !== JSON.stringify(updatedState)) {
                             this.EditorView.updateState(EditorState.fromJSON(this.config, updatedState));
                             this.tryUpdateScrollHeight();
                         }
                     } else if (this.EditorView.state.doc.textContent !== (incomingValue?.str ?? '')) {
                         selectAll(this.EditorView.state, tx => this.EditorView?.dispatch(tx.insertText(incomingValue?.str ?? '')));
+                        this.tryUpdateScrollHeight();
                     }
                 }
             },
@@ -1524,7 +1526,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') {
@@ -1535,6 +1537,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();
@@ -1551,7 +1555,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));
             }
         }
@@ -1564,8 +1568,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);
@@ -1687,7 +1690,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)));
@@ -1750,23 +1753,26 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
      * When a text box loses focus, it might be because a text button was clicked (eg, bold, italics) or color picker.
      * In these cases, force focus back onto the text box.
      * @param target
+     * @returns true if focus was kept on the text box, false otherwise
      */
-    tryKeepingFocus = (target: Element | null) => {
+    public static tryKeepingFocus(target: Element | null, refocusFunc?: () => void) {
         for (let newFocusEle = target instanceof HTMLElement ? target : null; newFocusEle; newFocusEle = newFocusEle?.parentElement) {
             // bcz: HACK!! test if parent of new focused element is a UI button (should be more specific than testing className)
             if (['fonticonbox', 'antimodeMenu-cont', 'popup-container'].includes(newFocusEle?.className ?? '')) {
-                return this.EditorView?.focus(); // keep focus on text box
+                refocusFunc?.(); // keep focus on text box
+                return true;
             }
         }
-    };
+        return false;
+    }
 
     @action
     onBlur = (e: React.FocusEvent) => {
-        this.tryKeepingFocus(e.relatedTarget);
+        FormattedTextBox.tryKeepingFocus(e.relatedTarget, () => this.EditorView?.focus());
         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) => {
@@ -1791,8 +1797,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?.());
@@ -1813,7 +1818,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;
@@ -1822,9 +1826,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;
             }
@@ -1857,9 +1860,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;
         }
@@ -1880,17 +1886,17 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
     };
     tryUpdateScrollHeight = () => {
-        const margins = 2 * NumCast(this.layoutDoc._yMargin, this._props.yPadding || 0);
+        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
@@ -2112,8 +2118,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         const rounded = StrCast(this.layoutDoc._layout_borderRounding) === '100%' ? '-rounded' : '';
         setTimeout(() => !this._props.isContentActive() && FormattedTextBoxComment.textBox === this && FormattedTextBoxComment.Hide);
 
-        const paddingX = Math.max(NumCast(this.layoutDoc._xMargin), 0, this._props.xPadding ?? 0, this._props.screenXPadding?.(this._props.DocumentView?.()) ?? 0);
-        const paddingY = Math.max(NumCast(this.layoutDoc._yMargin), 0, this._props.yPadding ?? 0); // prettier-ignore
+        const paddingX = Math.max(NumCast(this.layoutDoc._xMargin), 0, this._props.xMargin ?? 0, this._props.screenXPadding?.(this._props.DocumentView?.()) ?? 0);
+        const paddingY = Math.max(NumCast(this.layoutDoc._yMargin), 0, this._props.yMargin ?? 0); // prettier-ignore
         const styleFromLayout = styleFromLayoutString(this.Document, this._props, scale); // this converts any expressions in the format string to style props.  e.g., <FormattedTextBox height='{this._header_height}px' >
         return this.isLabel ? (
             <LabelBox {...this._props} />
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/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx
index 85bd95d15..198b8e713 100644
--- a/src/client/views/nodes/imageEditor/ImageEditor.tsx
+++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx
@@ -281,11 +281,14 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
         try {
             const canvasOriginalImg = ImageUtility.getCanvasImg(img);
             if (!canvasOriginalImg) return;
-            const canvasMask = ImageUtility.getCanvasMask(canvas, canvasOriginalImg);
+            const canvasMask = ImageUtility.getCanvasMask(canvas, canvas);
             if (!canvasMask) return;
             const maskBlob = await ImageUtility.canvasToBlob(canvasMask);
             const imgBlob = await ImageUtility.canvasToBlob(canvasOriginalImg);
             const res = await ImageUtility.getEdit(imgBlob, maskBlob, input || 'Fill in the image in the same style', 2);
+            if ((res as any).status == 'error') {
+                alert((res as any).message);
+            }
 
             // create first image
             if (!newCollectionRef.current) {
diff --git a/src/client/views/nodes/imageEditor/imageEditorUtils/ImageHandler.ts b/src/client/views/nodes/imageEditor/imageEditorUtils/ImageHandler.ts
index 1c6a38a24..d6093c6eb 100644
--- a/src/client/views/nodes/imageEditor/imageEditorUtils/ImageHandler.ts
+++ b/src/client/views/nodes/imageEditor/imageEditorUtils/ImageHandler.ts
@@ -75,7 +75,7 @@ export class ImageUtility {
         fd.append('mask', maskBlob, 'mask.png');
         fd.append('prompt', prompt);
         fd.append('size', '1024x1024');
-        fd.append('n', n ? JSON.stringify(n) : '1');
+        fd.append('n', n ? n + '' : '1');
         fd.append('response_format', 'b64_json');
 
         try {
@@ -268,14 +268,14 @@ export class ImageUtility {
             ctx.drawImage(img, xOffset, 0, width, height);
 
             // draw reflected image padding
-            this.drawHorizontalReflection(ctx, canvas, xOffset);
+            // this.drawHorizontalReflection(ctx, canvas, xOffset);
         } else {
             // vertical padding, y offset
             const yOffset = Math.floor((canvasSize - height) / 2);
             ctx.drawImage(img, 0, yOffset, width, height);
 
             // draw reflected image padding
-            this.drawVerticalReflection(ctx, canvas, yOffset);
+            //  this.drawVerticalReflection(ctx, canvas, yOffset);
         }
         return canvas;
     };
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/nodes/trails/PresSlideBox.tsx b/src/client/views/nodes/trails/PresSlideBox.tsx
index 3dbb3da88..55a655c7a 100644
--- a/src/client/views/nodes/trails/PresSlideBox.tsx
+++ b/src/client/views/nodes/trails/PresSlideBox.tsx
@@ -559,10 +559,10 @@ export class PresSlideBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 style={{
                     backgroundColor: presColorBool ? (isSelected ? 'rgba(250,250,250,0.3)' : 'transparent') : isSelected ? Colors.LIGHT_BLUE : 'transparent',
                     opacity: this._dragging ? 0.3 : 1,
-                    paddingLeft: NumCast(this.layoutDoc._xPadding, this._props.xPadding),
-                    paddingRight: NumCast(this.layoutDoc._xPadding, this._props.xPadding),
-                    paddingTop: NumCast(this.layoutDoc._yPadding, this._props.yPadding),
-                    paddingBottom: NumCast(this.layoutDoc._yPadding, this._props.yPadding),
+                    paddingLeft: NumCast(this.layoutDoc._xMargin, this._props.xMargin),
+                    paddingRight: NumCast(this.layoutDoc._xMargin, this._props.xMargin),
+                    paddingTop: NumCast(this.layoutDoc._yPadding, this._props.yMargin),
+                    paddingBottom: NumCast(this.layoutDoc._yPadding, this._props.yMargin),
                 }}
                 onDoubleClick={action(() => {
                     this.toggleProperties();
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index bb43291ee..f6fa45221 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -7,6 +7,11 @@ $highlightedText: #82e0ff;
 $inputHeight: 60px;
 $headingHeight: 32px;
 
+.gptPopup-sortBox {
+    display: block;
+    max-height: calc(100% - 45px); // leave room for input
+}
+
 .gptPopup-summary-box {
     position: fixed;
     padding-left: 10px;
@@ -87,6 +92,7 @@ $headingHeight: 32px;
     }
     .btns-wrapper-gpt {
         height: 100%;
+        width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -97,7 +103,6 @@ $headingHeight: 32px;
             flex-direction: column;
             width: 100%;
             height: 100%;
-            overflow-y: auto;
             padding-right: 5px;
         }
 
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index c45d8e052..568e48edf 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -93,7 +93,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
                     this.onGptResponse = (sortResult: string, questionType: GPTDocCommand, args?: string) => this.processGptResponse(selDoc, this._textToDocMap, sortResult, questionType, args);
                     this.onQuizRandom = () => this.randomlyChooseDoc(selDoc.Document, hasChildDocs());
                     this._documentDescriptions = Promise.all(hasChildDocs().map(doc =>
-                            Doc.getDescription(doc).then(text => this._textToDocMap.set(text.trim(), doc) && `${DescriptionSeperator}${text}${DescriptionSeperator}`)
+                            Doc.getDescription(doc).then(text => this._textToDocMap.set(text.replace(/\n/g, ' ').trim(), doc) && `${DescriptionSeperator}${text}${DescriptionSeperator}`)
                         )).then(docDescriptions => docDescriptions.join()); // prettier-ignore
                 }
             },
@@ -211,7 +211,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
         const selView = DocumentView.Selected().lastElement();
         const selDoc = selView?.Document;
         if (selDoc && (selView._props.renderDepth > 1 || selDoc[Doc.LayoutDataKey(selDoc)] instanceof ImageField)) {
-            const oldPrompt = StrCast(selDoc.ai_firefly_prompt, StrCast(selDoc.title));
+            const oldPrompt = StrCast(selDoc.ai_prompt, StrCast(selDoc.title));
             const newPrompt = oldPrompt ? `${oldPrompt} ~~~ ${imgDesc}` : imgDesc;
             return DrawingFillHandler.drawingToImage(selDoc, 100, newPrompt, selDoc)
                 .then(action(() => (this._userPrompt = '')))
@@ -406,73 +406,80 @@ export class GPTPopup extends ObservableReactComponent<object> {
     scrollToBottom = () => setTimeout(() => this._messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' }), 50);
 
     gptMenu = () => (
-        <div className="btns-wrapper-gpt">
-            <Button
-                tooltip="Ask Firefly to create images"
-                text="Ask Firefly"
-                onClick={() => this.setMode(GPTPopupMode.FIREFLY)}
-                color={SettingsManager.userColor}
-                background={SettingsManager.userVariantColor}
-                type={Type.TERT}
-                style={{
-                    width: '100%',
-                    height: '40%',
-                    textAlign: 'center',
-                    color: '#ffffff',
-                    fontSize: '16px',
-                    marginBottom: '10px',
-                }}
-            />
-            <Button
-                tooltip="Ask GPT to sort, tag, define, or filter your Docs!"
-                text="Ask GPT"
-                onClick={() => this.setMode(GPTPopupMode.USER_PROMPT)}
-                color={SettingsManager.userColor}
-                background={SettingsManager.userVariantColor}
-                type={Type.TERT}
-                style={{
-                    width: '100%',
-                    height: '40%',
-                    textAlign: 'center',
-                    color: '#ffffff',
-                    fontSize: '16px',
-                    marginBottom: '10px',
-                }}
-            />
-            <Button
-                tooltip="Test your knowledge by verifying answers with ChatGPT"
-                text="Take Quiz"
-                onClick={() => {
-                    this._conversationArray = ['Define the selected card!'];
-                    this.setMode(GPTPopupMode.QUIZ_RESPONSE);
-                    this.onQuizRandom?.();
-                }}
-                color={SettingsManager.userColor}
-                background={SettingsManager.userVariantColor}
-                type={Type.TERT}
-                style={{
-                    width: '100%',
-                    height: '40%',
-                    textAlign: 'center',
-                    color: '#ffffff',
-                    fontSize: '16px',
-                }}
-            />
+        <div style={{ display: 'flex', maxHeight: 'calc(100% - 32px)', overflow: 'auto' }}>
+            <div className="btns-wrapper-gpt">
+                <Button
+                    tooltip="Ask Firefly to create images"
+                    text="Ask Firefly"
+                    onClick={() => this.setMode(GPTPopupMode.FIREFLY)}
+                    color={SettingsManager.userColor}
+                    background={SettingsManager.userVariantColor}
+                    type={Type.TERT}
+                    style={{
+                        width: '100%',
+                        height: '40%',
+                        textAlign: 'center',
+                        color: '#ffffff',
+                        fontSize: '16px',
+                        marginBottom: '10px',
+                    }}
+                />
+                <Button
+                    tooltip="Ask GPT to sort, tag, define, or filter your Docs!"
+                    text="Ask GPT"
+                    onClick={() => this.setMode(GPTPopupMode.USER_PROMPT)}
+                    color={SettingsManager.userColor}
+                    background={SettingsManager.userVariantColor}
+                    type={Type.TERT}
+                    style={{
+                        width: '100%',
+                        height: '40%',
+                        textAlign: 'center',
+                        color: '#ffffff',
+                        fontSize: '16px',
+                        marginBottom: '10px',
+                    }}
+                />
+                <Button
+                    tooltip="Test your knowledge by verifying answers with ChatGPT"
+                    text="Take Quiz"
+                    onClick={() => {
+                        this._conversationArray = ['Define the selected card!'];
+                        this.setMode(GPTPopupMode.QUIZ_RESPONSE);
+                        this.onQuizRandom?.();
+                    }}
+                    color={SettingsManager.userColor}
+                    background={SettingsManager.userVariantColor}
+                    type={Type.TERT}
+                    style={{
+                        width: '100%',
+                        height: '40%',
+                        textAlign: 'center',
+                        color: '#ffffff',
+                        fontSize: '16px',
+                    }}
+                />
+            </div>
         </div>
     );
 
     callGpt = action((mode: GPTPopupMode) => {
         this.setGptProcessing(true);
+        const reset = action(() => {
+            this.setGptProcessing(false);
+            this._userPrompt = '';
+            this._quizAnswer = '';
+        });
         switch (mode) {
             case GPTPopupMode.FIREFLY:
                 this._fireflyArray.push(this._userPrompt);
-                return this.generateFireflyImage(this._userPrompt).then(action(() => (this._userPrompt = '')));
+                return this.generateFireflyImage(this._userPrompt).then(reset);
             case GPTPopupMode.USER_PROMPT:
                 this._conversationArray.push(this._userPrompt);
-                return this.generateUserPromptResponse(this._userPrompt).then(action(() => (this._userPrompt = '')));
+                return this.generateUserPromptResponse(this._userPrompt).then(reset);
             case GPTPopupMode.QUIZ_RESPONSE:
                 this._conversationArray.push(this._quizAnswer);
-                return this.generateQuizAnswerAnalysis(DocumentView.SelectedDocs().lastElement(), this._quizAnswer).then(action(() => (this._quizAnswer = '')));
+                return this.generateQuizAnswerAnalysis(DocumentView.SelectedDocs().lastElement(), this._quizAnswer).then(reset);
         }
     });
 
@@ -490,18 +497,20 @@ export class GPTPopup extends ObservableReactComponent<object> {
     };
 
     gptUserInput = () => (
-        <div className="btns-wrapper-gpt">
-            <div className="chat-wrapper">
-                <div className="chat-bubbles">
-                    {(this._mode === GPTPopupMode.FIREFLY ? this._fireflyArray : this._conversationArray).map((message, index) => (
-                        <div key={index} className={`chat-bubble ${index % 2 === 1 ? 'user-message' : 'chat-message'}`}>
-                            {message}
-                        </div>
-                    ))}
-                    {this._gptProcessing && <div className="chat-bubble chat-message">...</div>}
-                </div>
+        <div style={{ display: 'flex', maxHeight: 'calc(100% - 32px)', overflow: 'auto' }}>
+            <div className="btns-wrapper-gpt">
+                <div className="chat-wrapper">
+                    <div className="chat-bubbles">
+                        {(this._mode === GPTPopupMode.FIREFLY ? this._fireflyArray : this._conversationArray).map((message, index) => (
+                            <div key={index} className={`chat-bubble ${index % 2 === 1 ? 'user-message' : 'chat-message'}`}>
+                                {message}
+                            </div>
+                        ))}
+                        {this._gptProcessing && <div className="chat-bubble chat-message">...</div>}
+                    </div>
 
-                <div ref={this._messagesEndRef} style={{ height: '100px' }} />
+                    <div ref={this._messagesEndRef} style={{ height: '40px' }} />
+                </div>
             </div>
         </div>
     );
@@ -520,7 +529,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
                     onChange={e => onChange(e.target.value)}
                     onKeyDown={e => this.handleKeyPress(e, this._mode)}
                     type="text"
-                    style={{ color: SnappingManager.userColor }}
+                    style={{ color: 'black' }}
                     placeholder={placeholder}
                 />
                 <Button //
@@ -744,7 +753,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
                         onClick={() => this._collectionContext && Doc.setDocFilter(this._collectionContext, 'tags', GPTPopup.ChatTag, 'remove')}
                     />
                     {[GPTPopupMode.USER_PROMPT, GPTPopupMode.QUIZ_RESPONSE, GPTPopupMode.FIREFLY].includes(this._mode) && (
-                        <IconButton color={SettingsManager.userVariantColor} background={SettingsManager.userColor} tooltip="back" icon={<CgCornerUpLeft size="16px" />} onClick={() => (this._mode = GPTPopupMode.GPT_MENU)} />
+                        <IconButton color={SettingsManager.userVariantColor} background={SettingsManager.userColor} tooltip="back" icon={<CgCornerUpLeft size="16px" />} onClick={action(() => (this._mode = GPTPopupMode.GPT_MENU))} />
                     )}
                 </>
             )}
@@ -753,12 +762,12 @@ export class GPTPopup extends ObservableReactComponent<object> {
 
     render() {
         return (
-            <div className="gptPopup-summary-box" style={{ background: SnappingManager.userColor, color: SnappingManager.userBackgroundColor, display: SnappingManager.ChatVisible ? 'flex' : 'none', overflow: 'auto' }}>
+            <div className="gptPopup-summary-box" style={{ background: SnappingManager.userColor, color: SnappingManager.userBackgroundColor, display: SnappingManager.ChatVisible ? 'flex' : 'none' }}>
                 {(() => {
                     //prettier-ignore
                     switch (this._mode) {
                         case GPTPopupMode.USER_PROMPT:   return this.promptBox("ASK", this._userPrompt, this.setUserPrompt, 'Ask GPT to sort, tag, define, or filter your documents for you!');
-                        case GPTPopupMode.FIREFLY:       return this.promptBox("CREATE", this._userPrompt, this.setUserPrompt, StrCast(DocumentView.Selected().lastElement()?.Document.ai_firefly_prompt, 'Ask Firefly to generate images'));
+                        case GPTPopupMode.FIREFLY:       return this.promptBox("CREATE", this._userPrompt, this.setUserPrompt, StrCast(DocumentView.Selected().lastElement()?.Document.ai_prompt, 'Ask Firefly to generate images'));
                         case GPTPopupMode.QUIZ_RESPONSE: return this.promptBox("QUIZ", this._quizAnswer, this.setQuizAnswer, 'Describe/answer the selected document!');
                         case GPTPopupMode.GPT_MENU:      return this.menuBox();
                         case GPTPopupMode.SUMMARY:       return this.summaryBox();
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/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index 2c69284db..f773957e7 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -51,19 +51,19 @@ export class DrawingFillHandler {
                             if (error.includes('Dropbox') && confirm('Create image failed. Try authorizing DropBox?\r\n' + error.replace(/^[^"]*/, ''))) {
                                 return DrawingFillHandler.authorizeDropbox();
                             }
-                            const genratedDocs = DocCast(drawing.ai_firefly_generatedDocs) ?? Docs.Create.MasonryDocument([], { title: StrCast(drawing.title) + ' AI Images', _width: 400, _height: 400 });
-                            drawing.$ai_firefly_generatedDocs = genratedDocs;
+                            const genratedDocs = DocCast(drawing.ai_generatedDocs) ?? Docs.Create.MasonryDocument([], { title: StrCast(drawing.title) + ' AI Images', _width: 400, _height: 400 });
+                            drawing.$ai_generatedDocs = genratedDocs;
                             (res as Upload.ImageInformation[]).map(info =>
                                 Doc.AddDocToList(
                                     genratedDocs,
                                     undefined,
                                     Docs.Create.ImageDocument(info.accessPaths.agnostic.client, {
                                         ai: 'firefly',
+                                        ai_prompt: newPrompt,
                                         tags: new List<string>(['@ai']),
                                         title: newPrompt,
                                         _data_usePath: 'alternate:hover',
                                         data_alternates: new List<Doc>([drawing]),
-                                        ai_firefly_prompt: newPrompt,
                                         _width: 500,
                                         data_nativeWidth: info.nativeWidth,
                                         data_nativeHeight: info.nativeHeight,
diff --git a/src/client/views/smartdraw/SmartDrawHandler.scss b/src/client/views/smartdraw/SmartDrawHandler.scss
index cca7d77c7..e80f1122b 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.scss
+++ b/src/client/views/smartdraw/SmartDrawHandler.scss
@@ -73,5 +73,6 @@
     .edit-box {
         display: flex;
         flex-direction: row;
+        color: black;
     }
 }
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 4f0cd3978..b7ff5fff7 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -61,7 +61,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
     static Instance: SmartDrawHandler;
 
     private _lastInput: DrawingOptions = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
-    private _lastResponse: string = '';
     private _selectedDocs: Doc[] = [];
 
     @observable private _display: boolean = false;
@@ -97,7 +96,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         CollectionFreeForm, FormattedTextBox, StickerPalette) to define how a drawing document should be added
         or removed in their respective locations (to the freeform canvas, to the sticker palette's preview, etc.)
     */
-    public AddDrawing: (doc: Doc, opts: DrawingOptions, gptRes: string, x?: number, y?: number) => void = unimplementedFunction;
+    public AddDrawing: (doc: Doc, opts: DrawingOptions, x?: number, y?: number) => void = unimplementedFunction;
     public RemoveDrawing: (useLastContainer: boolean, doc?: Doc) => void = unimplementedFunction;
     /**
      * This creates the ink document that represents a drawing, so it goes through the strokes that make up the drawing,
@@ -105,7 +104,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      * classes to customize the way the drawing docs get created. For example, the freeform canvas has a different way of
      * defining document bounds, so CreateDrawingDoc is redefined when that class calls gpt draw functions.
      */
-    public static CreateDrawingDoc: (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string, containerDoc?: Doc) => Doc | undefined = (strokeList: [InkData, string, string][], opts: DrawingOptions) => {
+    public static CreateDrawingDoc: (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string, containerDoc?: Doc) => Doc | undefined = (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string) => {
         const drawing: Doc[] = [];
         strokeList.forEach((stroke: [InkData, string, string]) => {
             const bounds = InkField.getBounds(stroke[0]);
@@ -130,7 +129,14 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
             drawing.push(inkDoc);
         });
 
-        return MarqueeView.getCollection(drawing, undefined, true, { left: 1, top: 1, width: 1, height: 1 });
+        const drawn = MarqueeView.getCollection(drawing, undefined, true, { left: 1, top: 1, width: 1, height: 1 });
+
+        drawn.$ai_drawing = true;
+        drawn.$ai_drawing_complexity = opts.complexity;
+        drawn.$ai_drawing_colored = opts.autoColor;
+        drawn.$ai_drawing_size = opts.size;
+        drawn.$ai_drawing_data = gptRes;
+        return drawn;
     };
 
     @action
@@ -146,15 +152,16 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      * the regenerate popup show by user command.
      */
     @action
-    displayRegenerate = (x: number, y: number) => {
+    displayRegenerate = (x: number, y: number, scale: number) => {
         this._selectedDocs = [DocumentView.SelectedDocs()?.lastElement()];
         [this._pageX, this._pageY] = [x, y];
+        this._scale = scale;
         this._display = false;
         this.ShowRegenerate = true;
         this._showEditBox = false;
         const docData = this._selectedDocs[0];
-        this._lastResponse = StrCast(docData.$drawingData);
-        this._lastInput = { text: StrCast(docData.$ai_drawing_input), complexity: NumCast(docData.$ai_drawing_complexity), size: NumCast(docData.$ai_drawing_size), autoColor: BoolCast(docData.$ai_drawing_colored), x: this._pageX, y: this._pageY };
+        this._regenInput = StrCast(docData.$ai_prompt, StrCast(docData.title));
+        this._lastInput = { text: StrCast(docData.$ai_prompt), complexity: NumCast(docData.$ai_drawing_complexity), size: NumCast(docData.$ai_drawing_size), autoColor: BoolCast(docData.$ai_drawing_colored), x: this._pageX, y: this._pageY };
     };
 
     /**
@@ -168,9 +175,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
             this._isLoading = false;
             this._showOptions = false;
             this._userInput = '';
-            this._complexity = 5;
-            this._size = 350;
-            this._autoColor = true;
             Doc.ActiveTool = InkTool.None;
         }
     };
@@ -184,7 +188,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
             this.ShowRegenerate = false;
             this._isLoading = false;
             this._regenInput = '';
-            this._lastInput = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
         }
     };
 
@@ -208,7 +211,9 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         this._isLoading = true;
         this._canInteract = false;
         if (this.ShowRegenerate) {
-            await this.regenerate(this._selectedDocs, undefined, undefined, this._regenInput).then(action(() => (this._showEditBox = false)));
+            this._lastInput.x = X;
+            this._lastInput.y = Y;
+            await this.regenerate(this._selectedDocs).then(action(() => (this._showEditBox = false)));
         } else {
             this._showOptions = false;
             try {
@@ -234,13 +239,15 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      */
     drawWithGPT = async (screenPt: { X: number; Y: number }, input: string, complexity: number, size: number, autoColor: boolean) => {
         if (input) {
-            this._lastInput = { text: input, complexity: complexity, size: size, autoColor: autoColor, x: screenPt.X, y: screenPt.Y };
+            this._lastInput = { text: input, complexity, size, autoColor, x: screenPt.X, y: screenPt.Y };
             const res = await gptAPICall(`"${input}", "${complexity}", "${size}"`, GPTCallType.DRAW, undefined, true);
             if (res) {
                 const strokeData = await this.parseSvg(res, { X: 0, Y: 0 }, false, autoColor);
                 const drawingDoc = strokeData && SmartDrawHandler.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
-                drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res, screenPt.X, screenPt.Y);
-                drawingDoc && this._selectedDocs.push(drawingDoc);
+                if (drawingDoc) {
+                    this.AddDrawing(drawingDoc, this._lastInput, screenPt.X, screenPt.Y);
+                    this._selectedDocs.push(drawingDoc);
+                }
                 return strokeData;
             } else {
                 console.error('GPT call failed');
@@ -255,7 +262,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
     createImageWithFirefly = (input: string, seed?: number): Promise<FireflyImageData | Doc | undefined> => {
         this._lastInput.text = input;
         return SmartDrawHandler.CreateWithFirefly(input, this._imgDims, seed).then(doc => {
-            doc instanceof Doc && this.AddDrawing(doc, this._lastInput, input, this._pageX, this._pageY);
+            doc instanceof Doc && this.AddDrawing(doc, this._lastInput, this._pageX, this._pageY);
             return doc;
         });
     }; /**
@@ -301,8 +308,8 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                     _width: Math.min(400, dims.width),
                     _height: (Math.min(400, dims.width) * dims.height) / dims.width,
                     ai: 'firefly',
-                    ai_firefly_seed: +(newseed ?? 0),
-                    ai_firefly_prompt: input,
+                    ai_prompt_seed: +(newseed ?? 0),
+                    ai_prompt: input,
                 });
             })
             .catch(e => {
@@ -316,33 +323,31 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      * @param doc the drawing Docs to regenerate
      */
     @action
-    regenerate = (drawingDocs: Doc[], lastInput?: DrawingOptions, lastResponse?: string, regenInput?: string, changeInPlace?: boolean) => {
-        if (lastInput) this._lastInput = lastInput;
-        if (lastResponse) this._lastResponse = lastResponse;
+    regenerate = (drawingDocs: Doc[], regenInput?: string, changeInPlace?: boolean) => {
         if (regenInput) this._regenInput = regenInput;
         return Promise.all(
             drawingDocs.map(async doc => {
                 switch (doc.type) {
                     case DocumentType.IMG: {
                         const func = changeInPlace ? this.recreateImageWithFirefly : this.createImageWithFirefly;
-                        const newPrompt = doc.ai_firefly_prompt ? `${doc.ai_firefly_prompt} ~~~ ${this._regenInput}` : this._regenInput;
-                        return this._regenInput ? func(newPrompt, NumCast(doc?.ai_firefly_seed)) : func(this._lastInput.text || StrCast(doc.ai_firefly_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 {
                             const res = await (async () => {
                                 if (this._regenInput) {
-                                    const prompt = `This is your previously generated svg code: ${this._lastResponse} for the user input "${this._lastInput.text}". Please regenerate it with the provided specifications.`;
+                                    const prompt = `This is your previously generated svg code: ${doc.$ai_drawing_data} for the user input "${doc.ai_prompt}". Please regenerate it with the provided specifications.`;
                                     this._lastInput.text = `${this._lastInput.text} ~~~ ${this._regenInput}`;
                                     return gptAPICall(`"${this._regenInput}"`, GPTCallType.DRAW, prompt, true);
                                 }
-                                return gptAPICall(`"${this._lastInput.text}", "${this._lastInput.complexity}", "${this._lastInput.size}"`, GPTCallType.DRAW, undefined, true);
+                                return gptAPICall(`"${doc.$ai_prompt}", "${doc.$ai_drawing_complexity}", "${doc.$ai_drawing_size}"`, GPTCallType.DRAW, undefined, true);
                             })();
                             if (res) {
-                                const strokeData = await this.parseSvg(res, { X: this._lastInput.x ?? 0, Y: this._lastInput.y ?? 0 }, true, lastInput?.autoColor || this._autoColor);
-                                this.RemoveDrawing !== unimplementedFunction && this.RemoveDrawing(true, doc);
+                                const strokeData = await this.parseSvg(res, { X: 0, Y: 0 }, true, this._autoColor);
                                 const drawingDoc = strokeData && SmartDrawHandler.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes);
-                                drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res);
+                                drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, this._lastInput.x, this._lastInput.y);
                             } else {
                                 console.error('GPT call failed');
                             }
@@ -363,7 +368,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
         const svg = res.match(/<svg[^>]*>([\s\S]*?)<\/svg>/g);
 
         if (svg) {
-            this._lastResponse = svg[0];
             const svgObject = await parse(svg[0]);
             console.log(res, svgObject);
             const svgStrokes: INode[] = svgObject.children;
@@ -398,7 +402,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
      */
     colorWithGPT = async (drawing: Doc) => {
         const img = await DocumentView.GetDocImage(drawing);
-        const { href } = ImageCast(img).url;
+        const { href } = ImageCast(img)?.url ?? { href: '' };
         const hrefParts = href.split('.');
         const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
         try {
@@ -664,7 +668,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
             <div className="regenerate-box">
                 <IconButton
                     tooltip="Regenerate"
-                    icon={this._isLoading && this._regenInput === '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <FontAwesomeIcon icon={'rotate'} />}
+                    icon={this._isLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <FontAwesomeIcon icon={'rotate'} />}
                     color={SettingsManager.userColor}
                     onClick={() => this.handleSendClick(this._pageX, this._pageY)}
                 />
diff --git a/src/client/views/smartdraw/StickerPalette.tsx b/src/client/views/smartdraw/StickerPalette.tsx
index 0e234e966..6ef3d26ad 100644
--- a/src/client/views/smartdraw/StickerPalette.tsx
+++ b/src/client/views/smartdraw/StickerPalette.tsx
@@ -9,7 +9,7 @@ import ReactLoading from 'react-loading';
 import { returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils';
 import { emptyFunction, numberRange } from '../../../Utils';
 import { Doc, DocListCast, returnEmptyDoclist } from '../../../fields/Doc';
-import { ImageCast, NumCast } from '../../../fields/Types';
+import { ImageCast, NumCast, StrCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
@@ -147,9 +147,9 @@ export class StickerPalette extends ObservableReactComponent<StickerPaletteProps
         SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
         this._canInteract = false;
         Promise.all(
-            numberRange(3).map(i => {
+            numberRange(3).map(() => {
                 return this._showRegenerate
-                    ? SmartDrawHandler.Instance.regenerate(prevDrawings, this._opts, this._gptRes[i], this._userInput)
+                    ? SmartDrawHandler.Instance.regenerate(prevDrawings, this._userInput)
                     : SmartDrawHandler.Instance.drawWithGPT({ X: 0, Y: 0 }, this._userInput, this._opts.complexity || 0, this._opts.size || 0, !!this._opts.autoColor);
             })
         ).then(() => {
@@ -161,8 +161,8 @@ export class StickerPalette extends ObservableReactComponent<StickerPaletteProps
     });
 
     @action
-    addDrawing = (drawing: Doc, opts: DrawingOptions, gptRes: string) => {
-        this._gptRes.push(gptRes);
+    addDrawing = (drawing: Doc) => {
+        this._gptRes.push(StrCast(drawing.$ai_drawing_data));
         drawing.$freeform_fitContentsToBox = true;
         Doc.AddDocToList(this._props.Doc, 'data', drawing);
     };
@@ -176,7 +176,7 @@ export class StickerPalette extends ObservableReactComponent<StickerPaletteProps
         const cIndex = NumCast(this._props.Doc.carousel_index);
         const focusedDrawing = DocListCast(this._props.Doc.data)[cIndex];
         focusedDrawing.$title = this._opts.text?.match(/^(.*?)~~~.*$/)?.[1] || this._opts.text;
-        focusedDrawing.$ai_drawing_input = this._opts.text;
+        focusedDrawing.$ai_prompt = this._opts.text;
         focusedDrawing.$ai_drawing_complexity = this._opts.complexity;
         focusedDrawing.$ai_drawing_colored = this._opts.autoColor;
         focusedDrawing.$ai_drawing_size = this._opts.size;
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index ba94f0504..25e70d950 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -25,6 +25,7 @@ import { ComputedField, ScriptField } from './ScriptField';
 import { BoolCast, Cast, DocCast, FieldValue, ImageCastWithSuffix, NumCast, RTFCast, StrCast, ToConstructor, toList } from './Types';
 import { containedFieldChangedHandler, deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, setter, SharingPermissions } from './util';
 import { gptImageLabel } from '../client/apis/gpt/GPT';
+import { DateField } from './DateField';
 
 export let ObjGetRefField: (id: string, force?: boolean) => Promise<Doc | undefined>;
 export let ObjGetRefFields: (ids: string[]) => Promise<Map<string, Doc | undefined>>;
@@ -535,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
@@ -733,7 +746,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])!;
@@ -807,7 +820,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);
                     }
@@ -858,7 +871,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;
         }
 
@@ -921,7 +934,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 };
     }
@@ -1109,6 +1122,10 @@ export namespace Doc {
             Cast(templateFieldValue, listSpec(Doc), [])?.map(d => d instanceof Doc && MakeMetadataFieldTemplate(d, templateDoc));
             Doc.GetProto(templateField)[metadataFieldKey] = ObjectField.MakeCopy(templateFieldValue);
         }
+        if (templateField.type === DocumentType.IMG) {
+            // bcz: should be a better way .. but, if the image is a template, then we can't expect to know the aspect ratio. When the image is replaced by data and rendered, we want to recomputed the native dimensions.
+            templateField[DocData].layout_resetNativeDim = true;
+        }
         // get the layout string that the template uses to specify its layout
         const templateFieldLayoutString = StrCast(Doc.LayoutField(templateField[DocLayout]));
 
@@ -1184,12 +1201,14 @@ export namespace Doc {
         return Doc.NativeWidth(doc, dataDoc, useDim) / (Doc.NativeHeight(doc, dataDoc, useDim) || 1);
     }
     export function NativeWidth(doc?: Doc, dataDoc?: Doc, useWidth?: boolean) {
-        return !doc ? 0 : NumCast(doc._nativeWidth, NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeWidth'], useWidth ? NumCast(doc._width) : 0));
+        // if this is a field template, then don't use the doc's nativeWidth/height
+        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._nativeHeight, nheight || dheight);
     }
 
@@ -1460,7 +1479,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);
@@ -1504,7 +1522,13 @@ export namespace Doc {
                 case DocumentType.RTF: return RTFCast(tdoc[Doc.LayoutDataKey(tdoc)])?.Text ?? StrCast(tdoc[Doc.LayoutDataKey(tdoc)]);
                 default:               return StrCast(tdoc.title).startsWith("Untitled") ? "" : StrCast(tdoc.title);
         }}); // prettier-ignore
-        return docText(doc).then(text => (doc['$' + Doc.LayoutDataKey(doc) + '_description'] = text));
+        return docText(doc).then(
+            action(text => {
+                // set the time when the date changes.  This also allows a live textbox view to react to the update, otherwise, it wouldn't take effect until the next time the view is rerendered.
+                doc['$' + Doc.LayoutDataKey(doc) + '_description_modificationDate'] = new DateField();
+                return (doc['$' + Doc.LayoutDataKey(doc) + '_description'] = text);
+            })
+        );
     }
 
     // prettier-ignore
diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts
index b27816f55..df832d088 100644
--- a/src/fields/documentSchemas.ts
+++ b/src/fields/documentSchemas.ts
@@ -35,8 +35,6 @@ export const documentSchema = createSchema({
     _nativeHeight: 'number', // "
     _width: 'number', // width of document in its container's coordinate system
     _height: 'number', // "
-    _xPadding: 'number', // pixels of padding on left/right of collectionfreeformview contents when freeform_fitContentsToBox is set
-    _yPadding: 'number', // pixels of padding on top/bottom of collectionfreeformview contents when freeform_fitContentsToBox is set
     _xMargin: 'number', // margin added on left/right of most documents to add separation from their container
     _yMargin: 'number', // margin added on top/bottom of most documents to add separation from their container
     _overflow: 'string', // sets overflow behvavior for CollectionFreeForm views
diff --git a/src/server/ApiManagers/FireflyManager.ts b/src/server/ApiManagers/FireflyManager.ts
index e934e635b..effc81d9b 100644
--- a/src/server/ApiManagers/FireflyManager.ts
+++ b/src/server/ApiManagers/FireflyManager.ts
@@ -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/SharedMediaTypes.ts b/src/server/SharedMediaTypes.ts
index 9aa4b120f..43a9ce963 100644
--- a/src/server/SharedMediaTypes.ts
+++ b/src/server/SharedMediaTypes.ts
@@ -19,6 +19,9 @@ export enum AudioAnnoState {
 }
 
 export namespace Upload {
+    export function isTextInformation(uploadResponse: Upload.FileInformation): uploadResponse is Upload.ImageInformation {
+        return 'rawText' in uploadResponse;
+    }
     export function isImageInformation(uploadResponse: Upload.FileInformation): uploadResponse is Upload.ImageInformation {
         return 'nativeWidth' in uploadResponse;
     }
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 => {