fixed more errors.

1 files changed, 213 insertions, 135 deletions

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 35415ae4e..a9770d253 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -1,13 +1,11 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import 'golden-layout/src/css/goldenlayout-base.css';
-import 'golden-layout/src/css/goldenlayout-dark-theme.css';
 import { action, runInAction } from 'mobx';
 import { extname } from 'path';
-import { Doc, Opt, StrListCast } from "../../fields/Doc";
+import { Doc, Opt, StrListCast } from '../../fields/Doc';
 import { List } from '../../fields/List';
 import { listSpec } from '../../fields/Schema';
-import { BoolCast, Cast, ImageCast, NumCast, StrCast } from "../../fields/Types";
+import { BoolCast, Cast, ImageCast, NumCast, StrCast } from '../../fields/Types';
 import { DashColor, lightOrDark } from '../../Utils';
 import { DocumentType } from '../documents/DocumentTypes';
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
@@ -16,227 +14,307 @@ import { ColorScheme } from '../util/SettingsManager';
 import { SnappingManager } from '../util/SnappingManager';
 import { undoBatch, UndoManager } from '../util/UndoManager';
 import { CollectionViewType } from './collections/CollectionView';
+import { TreeSort } from './collections/TreeView';
 import { Colors } from './global/globalEnums';
+import { InkingStroke } from './InkingStroke';
 import { MainView } from './MainView';
-import { DocumentViewProps } from "./nodes/DocumentView";
+import { DocumentViewProps } from './nodes/DocumentView';
 import { FieldViewProps } from './nodes/FieldView';
 import { SliderBox } from './nodes/SliderBox';
-import "./StyleProvider.scss";
-import React = require("react");
-import { InkingStroke } from './InkingStroke';
-import { TreeSort } from './collections/TreeView';
+import './StyleProvider.scss';
+import React = require('react');
 
 export enum StyleProp {
-    TreeViewIcon = "treeViewIcon",
-    TreeViewSortings = "treeViewSortings",// options for how to sort tree view items
-    DocContents = "docContents",          // when specified, the JSX returned will replace the normal rendering of the document view
-    Opacity = "opacity",                  // opacity of the document view
-    Hidden = "hidden",                    // whether the document view should not be isplayed
-    BoxShadow = "boxShadow",              // box shadow - used for making collections standout and for showing clusters in free form views
-    BorderRounding = "borderRounding",    // border radius of the document view
-    Color = "color",                      // foreground color of Document view items
-    BackgroundColor = "backgroundColor",  // background color of a document view
-    WidgetColor = "widgetColor",          // color to display UI widgets on a document view -- used for the sidebar divider dragger on a text note
-    HideLinkButton = "hideLinkButton",    // hides the blue-dot link button.  used when a document acts like a button
-    LinkSource = "linkSource",            // source document of a link -- used by LinkAnchorBox
-    PointerEvents = "pointerEvents",      // pointer events for DocumentView -- inherits pointer events if not specified
-    Decorations = "decorations",          // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background
-    HeaderMargin = "headerMargin",        // margin at top of documentview, typically for displaying a title -- doc contents will start below that
-    TitleHeight = "titleHeight",          // Height of Title area
-    ShowTitle = "showTitle",              // whether to display a title on a Document (optional :hover suffix)
-    JitterRotation = "jitterRotation",    // whether documents should be randomly rotated
-    BorderPath = "customBorder",          // border path for document view
-    FontSize = "fontSize",                // size of text font
-    FontFamily = "fontFamily",                // size of text font
+    TreeViewIcon = 'treeViewIcon',
+    TreeViewSortings = 'treeViewSortings', // options for how to sort tree view items
+    DocContents = 'docContents', // when specified, the JSX returned will replace the normal rendering of the document view
+    Opacity = 'opacity', // opacity of the document view
+    Hidden = 'hidden', // whether the document view should not be isplayed
+    BoxShadow = 'boxShadow', // box shadow - used for making collections standout and for showing clusters in free form views
+    BorderRounding = 'borderRounding', // border radius of the document view
+    Color = 'color', // foreground color of Document view items
+    BackgroundColor = 'backgroundColor', // background color of a document view
+    WidgetColor = 'widgetColor', // color to display UI widgets on a document view -- used for the sidebar divider dragger on a text note
+    HideLinkButton = 'hideLinkButton', // hides the blue-dot link button.  used when a document acts like a button
+    LinkSource = 'linkSource', // source document of a link -- used by LinkAnchorBox
+    PointerEvents = 'pointerEvents', // pointer events for DocumentView -- inherits pointer events if not specified
+    Decorations = 'decorations', // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background
+    HeaderMargin = 'headerMargin', // margin at top of documentview, typically for displaying a title -- doc contents will start below that
+    TitleHeight = 'titleHeight', // Height of Title area
+    ShowTitle = 'showTitle', // whether to display a title on a Document (optional :hover suffix)
+    JitterRotation = 'jitterRotation', // whether documents should be randomly rotated
+    BorderPath = 'customBorder', // border path for document view
+    FontSize = 'fontSize', // size of text font
+    FontFamily = 'fontFamily', // size of text font
 }
 
-function darkScheme() { return CurrentUserUtils.ActiveDashboard?.colorScheme === ColorScheme.Dark; }
+function darkScheme() {
+    return CurrentUserUtils.ActiveDashboard?.colorScheme === ColorScheme.Dark;
+}
 
 function toggleLockedPosition(doc: Doc) {
-    UndoManager.RunInBatch(() => runInAction(() => {
-        doc._lockedPosition = !doc._lockedPosition;
-        doc._pointerEvents = doc._lockedPosition ? "none" : undefined;
-    }), "toggleBackground");
+    UndoManager.RunInBatch(
+        () =>
+            runInAction(() => {
+                doc._lockedPosition = !doc._lockedPosition;
+                doc._pointerEvents = doc._lockedPosition ? 'none' : undefined;
+            }),
+        'toggleBackground'
+    );
 }
 
 export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps {
-    return (toBeDetermined?.isContentActive) ? toBeDetermined : undefined;
+    return toBeDetermined?.isContentActive ? toBeDetermined : undefined;
 }
 
 export function wavyBorderPath(pw: number, ph: number, inset: number = 0.05) {
-    return `M ${pw * .5} ${ph * inset}   C ${pw * .6} ${ph * inset} ${pw * (1 - 2 * inset)} 0 ${pw * (1 - inset)} ${ph * inset}   C ${pw} ${ph * (2 * inset)} ${pw * (1 - inset)} ${ph * .25} ${pw * (1 - inset)} ${ph * .3}   C ${pw * (1 - inset)} ${ph * .4} ${pw} ${ph * (1 - 2 * inset)} ${pw * (1 - inset)} ${ph * (1 - inset)}  C ${pw * (1 - 2 * inset)} ${ph} ${pw * .6} ${ph * (1 - inset)} ${pw * .5} ${ph * (1 - inset)}   C ${pw * .3} ${ph * (1 - inset)} ${pw * (2 * inset)} ${ph} ${pw * inset} ${ph * (1 - inset)}  C 0 ${ph * (1 - 2 * inset)} ${pw * inset} ${ph * .8} ${pw * inset} ${ph * .75}   C ${pw * inset} ${ph * .7} 0 ${ph * (2 * inset)} ${pw * inset} ${ph * inset}   C ${pw * (2 * inset)} 0 ${pw * .25} ${ph * inset} ${pw * .5} ${ph * inset}`;
+    return `M ${pw * 0.5} ${ph * inset}   C ${pw * 0.6} ${ph * inset} ${pw * (1 - 2 * inset)} 0 ${pw * (1 - inset)} ${ph * inset}   C ${pw} ${ph * (2 * inset)} ${pw * (1 - inset)} ${ph * 0.25} ${pw * (1 - inset)} ${ph * 0.3}   C ${
+        pw * (1 - inset)
+    } ${ph * 0.4} ${pw} ${ph * (1 - 2 * inset)} ${pw * (1 - inset)} ${ph * (1 - inset)}  C ${pw * (1 - 2 * inset)} ${ph} ${pw * 0.6} ${ph * (1 - inset)} ${pw * 0.5} ${ph * (1 - inset)}   C ${pw * 0.3} ${ph * (1 - inset)} ${pw * (2 * inset)} ${ph} ${
+        pw * inset
+    } ${ph * (1 - inset)}  C 0 ${ph * (1 - 2 * inset)} ${pw * inset} ${ph * 0.8} ${pw * inset} ${ph * 0.75}   C ${pw * inset} ${ph * 0.7} 0 ${ph * (2 * inset)} ${pw * inset} ${ph * inset}   C ${pw * (2 * inset)} 0 ${pw * 0.25} ${ph * inset} ${
+        pw * 0.5
+    } ${ph * inset}`;
 }
 
 // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab
-// 
+//
 export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any {
-    const remoteDocHeader = "author;creationDate;noMargin";
+    const remoteDocHeader = 'author;creationDate;noMargin';
     const docProps = testDocProps(props) ? props : undefined;
-    const selected = property.includes(":selected");
-    const isCaption = property.includes(":caption");
-    const isAnchor = property.includes(":anchor");
-    const isAnnotated = property.includes(":annotated");
-    const isOpen = property.includes(":open");
-    const fieldKey = props?.fieldKey ? props.fieldKey + "-" : isCaption ? "caption-" : "";
-    const comicStyle = () => doc && !Doc.IsSystem(doc) && Doc.UserDoc().renderStyle === "comic";
+    const selected = property.includes(':selected');
+    const isCaption = property.includes(':caption');
+    const isAnchor = property.includes(':anchor');
+    const isAnnotated = property.includes(':annotated');
+    const isOpen = property.includes(':open');
+    const fieldKey = props?.fieldKey ? props.fieldKey + '-' : isCaption ? 'caption-' : '';
+    const comicStyle = () => doc && !Doc.IsSystem(doc) && Doc.UserDoc().renderStyle === 'comic';
     const isBackground = () => doc && BoolCast(doc._lockedPosition);
     const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor);
     const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity);
     const showTitle = () => props?.styleProvider?.(doc, props, StyleProp.ShowTitle);
-    const random = (min: number, max: number, x: number, y: number) => /* min should not be equal to max */ min + ((Math.abs(x * y) * 9301 + 49297) % 233280 / 233280) * (max - min);
-    switch (property.split(":")[0]) {
+    const random = (min: number, max: number, x: number, y: number) => /* min should not be equal to max */ min + (((Math.abs(x * y) * 9301 + 49297) % 233280) / 233280) * (max - min);
+    switch (property.split(':')[0]) {
         case StyleProp.TreeViewIcon:
             const img = ImageCast(doc?.icon, ImageCast(doc?.data));
             if (img) {
                 const ext = extname(img.url.href);
-                const url = doc?.icon ? img.url.href : img.url.href.replace(ext, "_s" + ext);
-                return <img src={url} width={20} height={15} style={{ margin: "auto", display: "block", objectFit: "contain" }} />;
+                const url = doc?.icon ? img.url.href : img.url.href.replace(ext, '_s' + ext);
+                return <img src={url} width={20} height={15} style={{ margin: 'auto', display: 'block', objectFit: 'contain' }} />;
             }
             return Doc.toIcon(doc, isOpen);
 
         case StyleProp.TreeViewSortings:
-            const allSorts: { [key: string]: { color: string, label: string } | undefined } = {};
-            allSorts[TreeSort.Down] = { color: "blue", label: "↓" };
-            allSorts[TreeSort.Up] = { color: "crimson", label: "↑" };
-            if (doc?._viewType === CollectionViewType.Freeform) allSorts[TreeSort.Zindex] = { color: "green", label: "z" };
-            allSorts[TreeSort.None] = { color: "darkgray", label: '\u00A0\u00A0\u00A0' };
+            const allSorts: { [key: string]: { color: string; label: string } | undefined } = {};
+            allSorts[TreeSort.Down] = { color: 'blue', label: '↓' };
+            allSorts[TreeSort.Up] = { color: 'crimson', label: '↑' };
+            if (doc?._viewType === CollectionViewType.Freeform) allSorts[TreeSort.Zindex] = { color: 'green', label: 'z' };
+            allSorts[TreeSort.None] = { color: 'darkgray', label: '\u00A0\u00A0\u00A0' };
             return allSorts;
-        case StyleProp.DocContents: return undefined;
-        case StyleProp.WidgetColor: return isAnnotated ? Colors.LIGHT_BLUE : darkScheme() ? "lightgrey" : "dimgrey";
-        case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null));
-        case StyleProp.HideLinkButton: return props?.hideLinkButton || (!selected && (doc?.isLinkButton || doc?.hideLinkButton));
-        case StyleProp.FontSize: return StrCast(doc?.[fieldKey + "fontSize"], StrCast(doc?.fontSize, StrCast(Doc.UserDoc().fontSize)));
-        case StyleProp.FontFamily: return StrCast(doc?.[fieldKey + "fontFamily"], StrCast(doc?.fontFamily, StrCast(Doc.UserDoc().fontFamily)));
-        case StyleProp.ShowTitle: return (doc && !doc.presentationTargetDoc &&
-            StrCast(doc._showTitle,
-                props?.showTitle?.() ||
-                (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any) ?
-                    (doc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) :
-                        remoteDocHeader) : "")) || "");
+        case StyleProp.DocContents:
+            return undefined;
+        case StyleProp.WidgetColor:
+            return isAnnotated ? Colors.LIGHT_BLUE : darkScheme() ? 'lightgrey' : 'dimgrey';
+        case StyleProp.Opacity:
+            return Cast(doc?._opacity, 'number', Cast(doc?.opacity, 'number', null));
+        case StyleProp.HideLinkButton:
+            return props?.hideLinkButton || (!selected && (doc?.isLinkButton || doc?.hideLinkButton));
+        case StyleProp.FontSize:
+            return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(doc?.fontSize, StrCast(Doc.UserDoc().fontSize)));
+        case StyleProp.FontFamily:
+            return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(doc?.fontFamily, StrCast(Doc.UserDoc().fontFamily)));
+        case StyleProp.ShowTitle:
+            return (
+                (doc &&
+                    !doc.presentationTargetDoc &&
+                    StrCast(
+                        doc._showTitle,
+                        props?.showTitle?.() ||
+                            (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any)
+                                ? doc.author === Doc.CurrentUserEmail
+                                    ? StrCast(Doc.UserDoc().showTitle)
+                                    : remoteDocHeader
+                                : '')
+                    )) ||
+                ''
+            );
         case StyleProp.Color:
             if (MainView.Instance.LastButton === doc) return Colors.DARK_GRAY;
-            const docColor: Opt<string> = StrCast(doc?.[fieldKey + "color"], StrCast(doc?._color));
+            const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color));
             if (docColor) return docColor;
             const docView = props?.DocumentView?.();
-            const backColor = backgroundCol() || docView?.props.styleProvider?.(docView.props.treeViewDoc, docView.props, "backgroundColor");
+            const backColor = backgroundCol() || docView?.props.styleProvider?.(docView.props.treeViewDoc, docView.props, 'backgroundColor');
             if (!backColor) return undefined;
             return lightOrDark(backColor);
-        case StyleProp.Hidden: return BoolCast(doc?.hidden);
-        case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"], StrCast(doc?.borderRounding, doc?._viewType === CollectionViewType.Pile ? "50%" : ""));
-        case StyleProp.TitleHeight: return 15;
-        case StyleProp.BorderPath: return comicStyle() && props?.renderDepth && doc?.type !== DocumentType.INK ? { path: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0), fill: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0, .08), width: 3 } : { path: undefined, width: 0 };
-        case StyleProp.JitterRotation: return comicStyle() ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0;
-        case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) ||
-            (doc?.type === DocumentType.RTF && !showTitle()?.includes("noMargin")) || doc?.type === DocumentType.LABEL) && showTitle() && !StrCast(doc?.showTitle).includes(":hover") ? 15 : 0;
+        case StyleProp.Hidden:
+            return BoolCast(doc?.hidden);
+        case StyleProp.BorderRounding:
+            return StrCast(doc?.[fieldKey + 'borderRounding'], StrCast(doc?.borderRounding, doc?._viewType === CollectionViewType.Pile ? '50%' : ''));
+        case StyleProp.TitleHeight:
+            return 15;
+        case StyleProp.BorderPath:
+            return comicStyle() && props?.renderDepth && doc?.type !== DocumentType.INK
+                ? { path: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0), fill: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0, 0.08), width: 3 }
+                : { path: undefined, width: 0 };
+        case StyleProp.JitterRotation:
+            return comicStyle() ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0;
+        case StyleProp.HeaderMargin:
+            return ([CollectionViewType.Stacking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) || (doc?.type === DocumentType.RTF && !showTitle()?.includes('noMargin')) || doc?.type === DocumentType.LABEL) &&
+                showTitle() &&
+                !StrCast(doc?.showTitle).includes(':hover')
+                ? 15
+                : 0;
         case StyleProp.BackgroundColor: {
             if (MainView.Instance.LastButton === doc) return Colors.LIGHT_GRAY;
-            let docColor: Opt<string> =
-                StrCast(doc?.[fieldKey + "backgroundColor"],
-                    StrCast(doc?._backgroundColor,
-                        StrCast(props?.Document.backgroundColor, isCaption ? "rgba(0,0,0,0.4)" : "")));
+            let docColor: Opt<string> = StrCast(doc?.[fieldKey + 'backgroundColor'], StrCast(doc?._backgroundColor, StrCast(props?.Document.backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : '')));
             switch (doc?.type) {
-                case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break;
-                case DocumentType.PRES: docColor = docColor || (darkScheme() ? "transparent" : "transparent"); break;
-                case DocumentType.FONTICON: docColor = docColor || Colors.DARK_GRAY; break;
-                case DocumentType.RTF: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
-                case DocumentType.FILTER: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : "rgba(105, 105, 105, 0.432)"); break;
-                case DocumentType.INK: docColor = doc?.isInkMask ? "rgba(0,0,0,0.7)" : undefined; break;
-                case DocumentType.SLIDER: break;
-                case DocumentType.EQUATION: docColor = docColor || "transparent"; break;
-                case DocumentType.LABEL: docColor = docColor || (doc.annotationOn !== undefined ? "rgba(128, 128, 128, 0.18)" : undefined) || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
-                case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
-                case DocumentType.LINKANCHOR: docColor = isAnchor ? Colors.LIGHT_BLUE : "transparent"; break;
-                case DocumentType.LINK: docColor = (isAnchor ? docColor : "") || "transparent"; break;
+                case DocumentType.PRESELEMENT:
+                    docColor = docColor || (darkScheme() ? '' : '');
+                    break;
+                case DocumentType.PRES:
+                    docColor = docColor || (darkScheme() ? 'transparent' : 'transparent');
+                    break;
+                case DocumentType.FONTICON:
+                    docColor = docColor || Colors.DARK_GRAY;
+                    break;
+                case DocumentType.RTF:
+                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
+                    break;
+                case DocumentType.FILTER:
+                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : 'rgba(105, 105, 105, 0.432)');
+                    break;
+                case DocumentType.INK:
+                    docColor = doc?.isInkMask ? 'rgba(0,0,0,0.7)' : undefined;
+                    break;
+                case DocumentType.SLIDER:
+                    break;
+                case DocumentType.EQUATION:
+                    docColor = docColor || 'transparent';
+                    break;
+                case DocumentType.LABEL:
+                    docColor = docColor || (doc.annotationOn !== undefined ? 'rgba(128, 128, 128, 0.18)' : undefined) || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
+                    break;
+                case DocumentType.BUTTON:
+                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
+                    break;
+                case DocumentType.LINKANCHOR:
+                    docColor = isAnchor ? Colors.LIGHT_BLUE : 'transparent';
+                    break;
+                case DocumentType.LINK:
+                    docColor = (isAnchor ? docColor : '') || 'transparent';
+                    break;
                 case DocumentType.IMG:
                 case DocumentType.WEB:
                 case DocumentType.PDF:
                 case DocumentType.MAP:
                 case DocumentType.SCREENSHOT:
-                case DocumentType.VID: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
+                case DocumentType.VID:
+                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
+                    break;
                 case DocumentType.COL:
                     if (StrCast(Doc.LayoutField(doc)).includes(SliderBox.name)) break;
-                    docColor = docColor ||
-                        (doc?._viewType === CollectionViewType.Pile || Doc.IsSystem(doc) ? (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY) : // system docs (seen in treeView) get a grayish background
-                            doc.annotationOn ? "#00000015" : // faint interior for collections on PDFs, images, etc
-                                (doc?._isGroup ? undefined :
-                                    Cast((props?.renderDepth || 0) > 0 ?
-                                        Doc.UserDoc().activeCollectionNestedBackground :
-                                        Doc.UserDoc().activeCollectionBackground, "string") ?? (darkScheme() ?
-                                            Colors.BLACK :
-                                            "linear-gradient(#065fff, #85c1f9)"))
-                        );
+                    docColor =
+                        docColor ||
+                        (doc?._viewType === CollectionViewType.Pile || Doc.IsSystem(doc)
+                            ? darkScheme()
+                                ? Colors.DARK_GRAY
+                                : Colors.LIGHT_GRAY // system docs (seen in treeView) get a grayish background
+                            : doc.annotationOn
+                            ? '#00000015' // faint interior for collections on PDFs, images, etc
+                            : doc?._isGroup
+                            ? undefined
+                            : Cast((props?.renderDepth || 0) > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground, 'string') ?? (darkScheme() ? Colors.BLACK : 'linear-gradient(#065fff, #85c1f9)'));
                     break;
                 //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
-                default: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break;
+                default:
+                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE);
+                    break;
             }
             if (docColor && !doc) docColor = DashColor(docColor).fade(0.5).toString();
             return docColor;
         }
         case StyleProp.BoxShadow: {
-            if (!doc || opacity() === 0) return undefined;  // if it's not visible, then no shadow)
+            if (!doc || opacity() === 0) return undefined; // if it's not visible, then no shadow)
 
-            if (doc?.isLinkButton && ![DocumentType.LINK, DocumentType.INK].includes(doc.type as any)) return StrCast(doc?._linkButtonShadow, "lightblue 0em 0em 1em");
+            if (doc?.isLinkButton && ![DocumentType.LINK, DocumentType.INK].includes(doc.type as any)) return StrCast(doc?._linkButtonShadow, 'lightblue 0em 0em 1em');
 
             switch (doc?.type) {
                 case DocumentType.COL:
-                    return StrCast(doc?.boxShadow,
-                        doc?._viewType === CollectionViewType.Pile ? "4px 4px 10px 2px" :
-                            isBackground() || doc?._isGroup || docProps?.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)
-                                `${darkScheme() ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`);
+                    return StrCast(
+                        doc?.boxShadow,
+                        doc?._viewType === CollectionViewType.Pile
+                            ? '4px 4px 10px 2px'
+                            : isBackground() || doc?._isGroup || docProps?.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)
+                            : `${darkScheme() ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY} ${StrCast(doc.boxShadow, '0.2vw 0.2vw 0.8vw')}`
+                    );
 
                 case DocumentType.LABEL:
-                    if (doc?.annotationOn !== undefined) return "black 2px 2px 1px";
+                    if (doc?.annotationOn !== undefined) return 'black 2px 2px 1px';
                 default:
-                    return doc.z ? `#9c9396  ${StrCast(doc?.boxShadow, "10px 10px 0.9vw")}` :  // if it's a floating doc, give it a big shadow
-                        props?.ContainingCollectionDoc?._useClusters && doc.type !== DocumentType.INK ? (`${backgroundCol()} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (docProps?.ContentScaling?.() || 1)}px`)}`) :  // if it's just in a cluster, make the shadown roughly match the cluster border extent
-                            NumCast(doc.group, -1) !== -1 && doc.type !== DocumentType.INK ? (`gray ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (docProps?.ContentScaling?.() || 1)}px`)}`) :  // if it's just in a cluster, make the shadown roughly match the cluster border extent
-                                isBackground() ? undefined :  // if it's a background & has a cluster color, make the shadow spread really big
-                                    StrCast(doc.boxShadow, "");
+                    return doc.z
+                        ? `#9c9396  ${StrCast(doc?.boxShadow, '10px 10px 0.9vw')}` // if it's a floating doc, give it a big shadow
+                        : props?.ContainingCollectionDoc?._useClusters && doc.type !== DocumentType.INK
+                        ? `${backgroundCol()} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (docProps?.ContentScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent
+                        : NumCast(doc.group, -1) !== -1 && doc.type !== DocumentType.INK
+                        ? `gray ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (docProps?.ContentScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent
+                        : isBackground()
+                        ? undefined // if it's a background & has a cluster color, make the shadow spread really big
+                        : StrCast(doc.boxShadow, '');
             }
         }
         case StyleProp.PointerEvents:
             if (doc?.pointerEvents) return StrCast(doc.pointerEvents);
-            if (props?.pointerEvents?.() === "none") return "none";
+            if (props?.pointerEvents?.() === 'none') return 'none';
             const isInk = doc && StrCast(Doc.Layout(doc).layout).includes(InkingStroke.name);
-            if (opacity() === 0 || (isInk && !docProps?.treeViewDoc) || doc?.isInkMask) return "none";
-            if (!isInk) return "all";
+            if (opacity() === 0 || (isInk && !docProps?.treeViewDoc) || doc?.isInkMask) return 'none';
+            if (!isInk) return 'all';
             return undefined;
         case StyleProp.Decorations:
             if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform || doc?.x !== undefined || doc?.y !== undefined) {
-                return doc && (isBackground() || selected) && !Doc.IsSystem(doc) && (props?.renderDepth || 0) > 0 &&
-                    ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ?
+                return doc &&
+                    (isBackground() || selected) &&
+                    !Doc.IsSystem(doc) &&
+                    (props?.renderDepth || 0) > 0 &&
+                    ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ? (
                     <div className="styleProvider-lock" onClick={() => toggleLockedPosition(doc)}>
-                        <FontAwesomeIcon icon={isBackground() ? "lock" : "unlock"} style={{ color: isBackground() ? "red" : undefined }} size="lg" />
+                        <FontAwesomeIcon icon={isBackground() ? 'lock' : 'unlock'} style={{ color: isBackground() ? 'red' : undefined }} size="lg" />
                     </div>
-                    : (null);
+                ) : null;
             }
     }
 }
 
 export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) {
-    return <div title={field} className={`styleProvider-treeView-icon${doc[field] ? "-active" : ""}`}
-        onClick={undoBatch(action((e: React.MouseEvent) => {
-            e.stopPropagation();
-            clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true);
-        }))}>
-        <FontAwesomeIcon icon={(doc[field] ? onIcon as any : offIcon) as IconProp} size="sm" />
-    </div>;
+    return (
+        <div
+            title={field}
+            className={`styleProvider-treeView-icon${doc[field] ? '-active' : ''}`}
+            onClick={undoBatch(
+                action((e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true);
+                })
+            )}>
+            <FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} size="sm" />
+        </div>
+    );
 }
 /**
  * add lock and hide button decorations for the "Dashboards" flyout TreeView
  */
 export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
-
-    if (doc && property.split(":")[0] === StyleProp.Decorations) {
-        return doc._viewType === CollectionViewType.Docking ? (null) :
+    if (doc && property.split(':')[0] === StyleProp.Decorations) {
+        return doc._viewType === CollectionViewType.Docking ? null : (
             <>
-                {DashboardToggleButton(doc, "hidden", "eye-slash", "eye", () => {
+                {DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => {
                     doc.hidden = doc.hidden ? undefined : true;
                     if (!doc.hidden) {
                         DocFocusOrOpen(doc, props?.ContainingCollectionDoc);
                     }
                 })}
-            </>;
+            </>
+        );
     }
     return DefaultStyleProvider(doc, props, property);
 }