querysub 0.352.0 → 0.353.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.352.0",
+  "version": "0.353.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",
@@ -50,9 +50,9 @@
     "js-sha512": "^0.9.0",
     "node-forge": "https://github.com/sliftist/forge#e618181b469b07bdc70b968b0391beb8ef5fecd6",
     "pako": "^2.1.0",
-    "socket-function": "^1.0.1",
+    "socket-function": "^1.0.4",
     "terser": "^5.31.0",
-    "typesafecss": "^0.25.0",
+    "typesafecss": "^0.28.0",
     "yaml": "^2.5.0",
     "yargs": "^15.3.1"
   },

package/src/-a-archives/archiveCache.ts

@@ -504,11 +504,13 @@ export function wrapArchivesWithCache(archives: Archives): Archives & {
             //  way to check)
             //  - TODO: Set hash in file metadata (maybe for all archive writes?), and use this to
             //      compare it against our cache file (which can have the hash in the file name).
-            let info = await archives.getInfo(fileName);
-            if (!info) {
-                // If it is gone remotely, remove it from the cache, to save space.
-                await metrics.delCacheFile(archives, fileName);
-                return;
+            if (!config?.fastRead) {
+                let info = await archives.getInfo(fileName);
+                if (!info) {
+                    // If it is gone remotely, remove it from the cache, to save space.
+                    await metrics.delCacheFile(archives, fileName);
+                    return;
+                }
             }
             let buffer = await metrics.getCacheFile(archives, fileName, config);
             if (buffer) return buffer;

package/src/-a-archives/archives.ts

@@ -12,7 +12,12 @@ import { Args } from "socket-function/src/types";
 export interface Archives {
     getDebugName(): string;
 
-    get(path: string, config?: { range?: { start: number; end: number; }; retryCount?: number }): Promise<Buffer | undefined>;
+    get(path: string, config?: {
+        range?: { start: number; end: number; };
+        retryCount?: number;
+        // Skips checking if the file exists on the remote. Only appropriate when the file name is fresh (recently obtained from find).
+        fastRead?: boolean;
+    }): Promise<Buffer | undefined>;
     set(path: string, data: Buffer): Promise<void>;
     del(path: string): Promise<void>;
 

package/src/-a-archives/archivesBackBlaze.ts

@@ -520,7 +520,9 @@ export class ArchivesBackblaze {
                 (err.stack.includes(`503`)
                     || err.stack.includes(`"service_unavailable"`)
                     || err.stack.includes(`"internal_error"`)
+                    || err.stack.includes(`ENOBUFS`)
                 ) && Date.now() - this.last503Reset > 60 * 1000) {
+                console.error("503 error, waiting a minute and resetting: " + err.message);
                 this.log("503 error, waiting a minute and resetting: " + err.message);
                 await delay(10 * 1000);
                 // We check again in case, and in the very likely case that this is being run in parallel, we only want to reset once. 
@@ -552,7 +554,9 @@ export class ArchivesBackblaze {
                 || err.stack.includes(`getaddrinfo ENOTFOUND`)
                 || err.stack.includes(`ECONNRESET`)
                 || err.stack.includes(`ECONNREFUSED`)
+                || err.stack.includes(`ENOBUFS`)
             ) {
+                console.error("Retrying in 5s: " + err.message);
                 this.log(err.message + " retrying in 5s");
                 await delay(5000);
                 return this.apiRetryLogic(fnc, retries - 1);

package/src/0-path-value-core/pathValueArchives.ts

@@ -232,8 +232,9 @@ export class PathValueArchives {
             //  (we read the target dest, find no file, read a bunch of other files over a few minutes, get to
             //  the source file, but by now it has moved, so we don't see either file, even though at all times
             //  both files existed).
+            let time = Date.now();
             dataPaths = await this.getValuePaths(authority);
-            console.log(blue(`    ${dataPaths.length} data paths`));
+            console.log(green(`${dataPaths.length} data paths in ${formatTime(Date.now() - time)}`));
             // NOTE: If the notMatched count is high enough, it is possible NodePathAuthorities.ts:authoritiesMightOverlap is
             //  too loose, and should be removing more cases.
 
@@ -244,7 +245,7 @@ export class PathValueArchives {
                 while (pendingDataPaths.length > 0) {
                     let dataPath = pendingDataPaths.pop()!;
                     if (readCache.has(dataPath)) continue;
-                    let data = await archives().get(dataPath);
+                    let data = await archives().get(dataPath, { fastRead: true });
                     if (!data) continue;
                     readCache.set(dataPath, data);
                 }

package/src/0-path-value-core/pathValueCore.ts

@@ -696,7 +696,7 @@ class AuthorityPathValueStorage {
         }
         return true;
     }
-    public isSynced(path: string) {
+    public isSynced(path: string, ignoreParentSync = false) {
         if (pathValueAuthority2.isSelfAuthority(path)) return true;
 
         if (this.isSyncedCache.has(path)) return true;
@@ -716,8 +716,7 @@ class AuthorityPathValueStorage {
         //  parent is synced
         //  - See PathWatcher.watchPath, where when !noInitialTrigger (aka, initialTrigger),
         //      we get all paths via authorityStorage.getPathsFromParent, and send their values.
-        let parentPath = getParentPathStr(path);
-        if (this.isParentSynced(parentPath)) {
+        if (!ignoreParentSync && this.isParentSynced(getParentPathStr(path))) {
             return true;
         }
 
@@ -970,6 +969,7 @@ class AuthorityPathValueStorage {
             //  and while the values are undefined and so we are deleting them... we have definitely
             //  received values!
             let path = values[0].path;
+
             this.isSyncedCache.add(path);
             this.removePathFromStorage(path, "value is undefined and golden");
             values.splice(0, values.length);
@@ -1493,6 +1493,7 @@ class PathWatcher {
                     changes = new Set();
                     changedPerCallbacks.set(watcher, changes);
                 }
+                // @ts-ignore
                 changes.add(value);
             }
 

package/src/1-path-client/RemoteWatcher.ts

@@ -19,11 +19,7 @@ import debugbreak from "debugbreak";
 import { isDevDebugbreak } from "../config";
 import { auditLog } from "../0-path-value-core/auditLogs";
 
-// NOTE: In some cases this can half our the PathValues sent. AND, it can reduce our sync requests
-//  by N, and as those are uploads those are event more expensive. However, it also complicates
-//  other code, requiring not just checking if a value is synced, but also the parent path. We should
-//  try to make this stable, but worst case scenario, we can set this to false, and it will make
-//  our synchronization a lot easier to verify.
+// NOTE: In some cases this can half our the PathValues sent. AND, it can reduce our sync requests by N, and as those are uploads those are event more expensive. However, it also complicates other code, requiring not just checking if a value is synced, but also the parent path. We should try to make this stable, but worst case scenario, we can set this to false, and it will make our synchronization a lot easier to verify.
 const STOP_KEYS_DOUBLE_SENDS = true;
 
 export class RemoteWatcher {

package/src/1-path-client/pathValueClientWatcher.ts

@@ -175,9 +175,9 @@ export class ClientWatcher {
         };
         const triggerWatcherParent = (spec: WatchSpec, parent: string) => {
             if (this.ignoreWatch?.(spec, parent)) return;
-            onTrigger(spec, parent);
             let trigger = this.triggerWatcher(spec);
             trigger.newParentsSynced.add(parent);
+            onTrigger(spec, parent);
         };
         for (let value of values) {
             let watchers = this.valueFunctionWatchers.get(value.path);
@@ -214,6 +214,25 @@ export class ClientWatcher {
                 }
             }
         }
+        // Trigger all children of parents synced
+        // NOTE: This is the counterpointer to RemoteWatcher's removal of extra requests when we are already syncing the parent path. If it's not going to request them, we're not going to get the paths, so we need to trigger based on parents.
+        //  - We ignore hack paths here (that path in range requests in parent paths), because RemoteWatcher also ignores them (so hacked parent paths won't stop value path syncs there), so they will be received normally.
+        // NOTE: This will probably be slow, but we shouldn't be receiving parent syncs very frequently. Or maybe we will, and maybe this will just be incredibly slow. 
+        if (parentsSynced.length > 0) {
+            measureBlock(() => {
+                for (let parentPath of parentsSynced) {
+                    for (let [path, lookup] of this.valueFunctionWatchers.entries()) {
+                        if (!path.startsWith(parentPath)) continue;
+                        if (getParentPathStr(path) !== parentPath) continue;
+                        for (let watch of lookup.values()) {
+                            let trigger = this.triggerWatcher(watch);
+                            trigger.paths.add(path);
+                            onTrigger(watch, path);
+                        }
+                    }
+                }
+            }, "ClientWatcher|triggerChildrenOfParentsSynced");
+        }
     }
 
     public debugBreakOnNextTrigger() {
@@ -536,85 +555,89 @@ export class ClientWatcher {
         });
     });
 
-    // NOTE: The promise USUALLY doesn't resolve until all the watches have synced (except in certain error cases).
-    // NOTE: The callback is only called when synced values change (so if they are already synced, and don't change,
-    //  the callback won't be called).
-    // NOTE: Doesn't call the callback until all requested values have finished their initial sync, to prevent
-    //  too many callback callbacks.
+
+    // TODO: EVENTUALLY! We should accept a delta on the watches, which should allow for more efficient updates.
+
+    // NOTE: The callback is only called when synced values change (so if they are already synced, and don't change, the callback won't be called).
+    // NOTE: Doesn't call the callback until all requested values have finished their initial sync, to prevent too many callback callbacks.
     //  - You can just fragment your writes into different components to isolate any slow loading parts, so partial
     //      loading of data really isn't needed.
     // NOTE: Takes ownership of paths and parentPaths, so... don't mutate them after calling this!
     @measureFnc
     public setWatches(watchSpec: WatchSpec) {
-        let callback = watchSpec.callback;
-        let paths = watchSpec.paths;
-        let parentPaths = watchSpec.parentPaths;
+        // NOTE: Yes, setWatches shows up as being slow in the profiler. I added measureBlock to every single section, and none of them showed up as being slow.
+        //  - My best guess is that after we clobber values in various lookups, but BEFORE we return, the destructor for those old resources runs. So their destruct time gets put in our profiler?
+        //      - Or maybe hack_stripPackedPath, decodeParentFilter, or other functions with heavy temporary allocations.
+        //  - measureBlock also has overhead (which is why I commented them all out), but... It's not nearly enough to account for this.
+
+
+        //measureBlock(() => {
         watchSpec.order = watchSpec.order ?? nextWatchSpecOrder++;
+        //}, "ClientWatcher()|watchSpec.order = ...");
 
+        //measureBlock(() => {
         this.updateUnwatches(watchSpec);
+        //}, "ClientWatcher()|updateUnwatches wrapper?");
 
-        this.allWatchers.set(callback, watchSpec);
-        measureBlock(() => {
-            for (let path of paths) {
-                let watchers = this.valueFunctionWatchers.get(path);
-                if (!watchers) {
-                    watchers = new Map();
-                    this.valueFunctionWatchers.set(path, watchers);
-                }
-                watchers.set(callback, watchSpec);
-                this.pendingUnwatches.delete(path);
+        //measureBlock(() => {
+        this.allWatchers.set(watchSpec.callback, watchSpec);
+        //}, "ClientWatcher()|setWatches|this.allWatcher.set");
+        //measureBlock(() => {
+        for (let path of watchSpec.paths) {
+            let watchers = this.valueFunctionWatchers.get(path);
+            if (!watchers) {
+                watchers = new Map();
+                this.valueFunctionWatchers.set(path, watchers);
             }
-        }, "ClientWatcher()|setWatches|paths");
-        measureBlock(() => {
-            for (let path of parentPaths) {
-                let basePath = hack_stripPackedPath(path);
-                let watchersBase = this.parentValueFunctionWatchers.get(basePath);
-                if (!watchersBase) {
-                    watchersBase = new Map();
-                    this.parentValueFunctionWatchers.set(basePath, watchersBase);
-                }
-                let watchers = watchersBase.get(path);
-                if (!watchers) {
-                    let range = decodeParentFilter(path) || { start: 0, end: 1 };
-                    watchers = {
-                        start: range.start,
-                        end: range.end,
-                        lookup: new Map()
-                    };
-                    watchersBase.set(path, watchers);
-                }
-                watchers.lookup.set(callback, watchSpec);
-                this.pendingParentUnwatches.delete(path);
+            watchers.set(watchSpec.callback, watchSpec);
+            this.pendingUnwatches.delete(path);
+        }
+        //}, "ClientWatcher()|setWatches|paths");
+        //measureBlock(() => {
+        for (let path of watchSpec.parentPaths) {
+            let basePath = hack_stripPackedPath(path);
+            let watchersBase = this.parentValueFunctionWatchers.get(basePath);
+            if (!watchersBase) {
+                watchersBase = new Map();
+                this.parentValueFunctionWatchers.set(basePath, watchersBase);
             }
-        }, "ClientWatcher()|setWatches|parentPaths");
-
-        let pathsArray!: string[];
-        let parentPathsArray!: string[];
-        measureBlock(() => {
-            pathsArray = Array.from(paths);
-            parentPathsArray = Array.from(parentPaths);
-        }, "ClientWatcher()|setWatches|Array.from");
-        let debugName = watchSpec.callback.name;
+            let watchers = watchersBase.get(path);
+            if (!watchers) {
+                let range = decodeParentFilter(path) || { start: 0, end: 1 };
+                watchers = {
+                    start: range.start,
+                    end: range.end,
+                    lookup: new Map()
+                };
+                watchersBase.set(path, watchers);
+            }
+            watchers.lookup.set(watchSpec.callback, watchSpec);
+            this.pendingParentUnwatches.delete(path);
+        }
+        //}, "ClientWatcher()|setWatches|parentPaths");
 
-        if (pathsArray.length === 0 && parentPathsArray.length === 0) {
+        if (watchSpec.paths.size === 0 && watchSpec.parentPaths.size === 0) {
             return;
         }
 
-        measureBlock(() => {
-            // Watch it locally as well, so when we get the value we know to trigger the client callback
-            pathWatcher.watchPath({
-                callback: getOwnNodeId(),
-                paths: pathsArray,
-                parentPaths: parentPathsArray,
-                debugName,
-                noInitialTrigger: watchSpec.noInitialTrigger,
-            });
-            remoteWatcher.watchLatest({
-                paths: pathsArray,
-                parentPaths: parentPathsArray,
-                debugName,
-            });
-        }, "ClientWatcher()|setWatches|watchCalls");
+        //measureBlock(() => {
+        let pathsArray = Array.from(watchSpec.paths);
+        let parentPathsArray = Array.from(watchSpec.parentPaths);
+        let debugName = watchSpec.callback.name;
+        // Watch it locally as well, so when we get the value we know to trigger the client callback
+        pathWatcher.watchPath({
+            callback: getOwnNodeId(),
+            paths: pathsArray,
+            parentPaths: parentPathsArray,
+            debugName,
+            noInitialTrigger: watchSpec.noInitialTrigger,
+        });
+        remoteWatcher.watchLatest({
+            paths: pathsArray,
+            parentPaths: parentPathsArray,
+            debugName,
+        });
+        //}, "ClientWatcher()|setWatches|watchCalls");
     }
 
     private lastVersions = registerResource("paths|lastVersion", new Map<number, number>());

package/src/2-proxy/PathValueProxyWatcher.ts

@@ -1,6 +1,6 @@
 import { measureCode, measureWrap, registerMeasureInfo } from "socket-function/src/profiling/measure";
 import { SocketFunction } from "socket-function/SocketFunction";
-import { binarySearchBasic, binarySearchBasic2, binarySearchIndex, deepCloneJSON, getKeys, insertIntoSortedList, isNode, recursiveFreeze, timeInMinute, timeInSecond } from "socket-function/src/misc";
+import { binarySearchBasic, binarySearchBasic2, binarySearchIndex, deepCloneJSON, getKeys, insertIntoSortedList, isNode, recursiveFreeze, sort, timeInMinute, timeInSecond } from "socket-function/src/misc";
 import { canHaveChildren, MaybePromise } from "socket-function/src/types";
 import { blue, green, magenta, red, yellow } from "socket-function/src/formatting/logColors";
 import { cache, cacheLimited, lazy } from "socket-function/src/caching";
@@ -32,7 +32,7 @@ import { DEPTH_TO_DATA, MODULE_INDEX, getCurrentCall, getCurrentCallObj } from "
 import { inlineNestedCalls } from "../3-path-functions/syncSchema";
 import { interceptCallsBase, runCall } from "../3-path-functions/PathFunctionHelpers";
 import { deepCloneCborx } from "../misc/cloneHelpers";
-import { formatPercent, formatTime } from "socket-function/src/formatting/format";
+import { formatNumber, formatPercent, formatTime } from "socket-function/src/formatting/format";
 import { addStatPeriodic, interceptCalls, onAllPredictionsFinished, onTimeProfile } from "../-0-hooks/hooks";
 import { onNextPaint } from "../functional/onNextPaint";
 import { isAsyncFunction } from "../misc";
@@ -142,6 +142,9 @@ export interface WatcherOptions<Result> {
     */
     runImmediately?: boolean;
 
+    /** By default we call pathValueCommitter.waitForValuesToCommit. This skips that check. */
+    noWaitForCommit?: boolean;
+
     /** HACK: Used in conjuction with specific callers to prevent disposing, so the watcher
      *      can be reused for specific cases.
      */
@@ -1183,7 +1186,9 @@ export class PathValueProxyWatcher {
             );
         };
         const getReadyToCommit = () => {
-            let blocked = isProxyBlockedByOrder(watcher);
+            if (watcher.options.commitAllRuns) {
+                return true;
+            }
             return (
                 watcher.lastUnsyncedAccesses.size === 0
                 && watcher.lastUnsyncedParentAccesses.size === 0
@@ -1192,10 +1197,17 @@ export class PathValueProxyWatcher {
             );
         };
         function afterTrigger() {
-            let callbacks = watcher.onAfterTriggered;
-            watcher.onAfterTriggered = [];
-            for (let callback of callbacks) {
-                logErrors(((async () => { await callback(); }))());
+            for (let i = 0; i < 10; i++) {
+                let callbacks = watcher.onAfterTriggered;
+                watcher.onAfterTriggered = [];
+                for (let callback of callbacks) {
+                    logErrors(((async () => { await callback(); }))());
+                }
+                if (watcher.onAfterTriggered.length === 0) break;
+            }
+            if (watcher.onAfterTriggered.length > 0) {
+                console.warn(`Watcher ${watcher.debugName} keeps adding after trigger callbacks during after trigger. We reached our iteration limit 
+                    and will be ignoring triggers remaining triggers.`);
             }
         }
 
@@ -1204,16 +1216,25 @@ export class PathValueProxyWatcher {
             watcher.disposed = true;
             clientWatcher.unwatch(trigger);
             self.allWatchers.delete(watcher);
-            let disposeCallbacks = watcher.onInnerDisposed;
-            watcher.onInnerDisposed = [];
-            for (let callback of disposeCallbacks) {
-                logErrors(((async () => { await callback(); }))());
-            }
-
-            self.allWatchersLookup.delete(trigger);
 
+            // NOTE: We trigger next before onInnerDisposed, as onInnerDispose often run more commits, and if we proxy block it causes proxies to run twice.
             // TODO: Is this guaranteed to be called all the time? What about nested proxy watchers?
             void finishProxyAndTriggerNext(watcher);
+
+            for (let i = 0; i < 10; i++) {
+                let disposeCallbacks = watcher.onInnerDisposed;
+                watcher.onInnerDisposed = [];
+                for (let callback of disposeCallbacks) {
+                    logErrors(((async () => { await callback(); }))());
+                }
+                if (watcher.onInnerDisposed.length === 0) break;
+            }
+            if (watcher.onInnerDisposed.length > 0) {
+                console.warn(`Watcher ${watcher.debugName} keeps adding inner disposed callbacks during dispose. We reached our iteration limit 
+                    and will be ignoring dispose callbacks remaining dispose callbacks.`);
+            }
+
+            self.allWatchersLookup.delete(trigger);
         }
         function runWatcher() {
             watcher.pendingWrites.clear();
@@ -1485,12 +1506,13 @@ export class PathValueProxyWatcher {
                 parentPaths: watcher.pendingWatches.parentPaths,
             };
 
+            // NOTE: I don't see the reason for this. How many watchers do we have that aren't watching anything? 
             // If nothing is being watched, and nothing was... then don't bother updating the watchers
-            if (
-                !initialTriggerWatch
-                && watcher.lastWatches.paths.size === 0 && watcher.lastWatches.parentPaths.size === 0
-                && watcher.pendingWatches.paths.size === 0 && watcher.pendingWatches.parentPaths.size === 0
-            ) return;
+            // if (
+            //     !initialTriggerWatch
+            //     && watcher.lastWatches.paths.size === 0 && watcher.lastWatches.parentPaths.size === 0
+            //     && watcher.pendingWatches.paths.size === 0 && watcher.pendingWatches.parentPaths.size === 0
+            // ) return;
 
             clientWatcher.setWatches({
                 debugName: watcher.debugName,
@@ -1649,6 +1671,7 @@ export class PathValueProxyWatcher {
 
         }
         const hasUnsyncedBefore = measureWrap(function proxyWatchHasUnsyncedBefore() {
+            if (watcher.options.commitAllRuns) return false;
             // NOTE: We COULD remove any synced values from lastUnsyncedAccesses, however... we will generally sync all values at once, so we don't really need to optimize the cascading case here. Also... deleting values requires cloning while we iterate, as well as mutating the set, which probably makes the non-cascading case slower.
             for (let path of watcher.lastUnsyncedAccesses) {
                 if (!authorityStorage.isSynced(path)) {
@@ -1840,11 +1863,10 @@ export class PathValueProxyWatcher {
             }
 
             if (SHOULD_TRACE) {
-                console.log(green(`Committing ${values?.length || 0} watcher writes ${watcher.debugName} at ${time}`), watcher.triggeredByChanges);
+                console.log(green(`Committing ${values?.length || 0} watcher writes ${watcher.debugName} at ${time}`), watcher.triggeredByChanges, watcher.lastUnsyncedAccesses, watcher.lastUnsyncedParentAccesses);
             }
 
-            // ONLY clear triggeredByChanges when we have a succesful run, otherwise delta based
-            //  watchers won't work!
+            // ONLY clear triggeredByChanges when we have a succesful run, otherwise delta based watchers won't work!
             watcher.triggeredByChanges = undefined;
             options.onResultUpdated?.(result, values, watcher);
         };
@@ -1978,7 +2000,7 @@ export class PathValueProxyWatcher {
         let result = await resultPromise;
         // NOTE: Now we ALWAYS wait, to prevent services from terminating their process before their writes finish.
         //  It is just too hard to remember to call pathValueCommitter.waitForValuesToCommit in every service.
-        if (options.canWrite && anyWrites && !options.dryRun) {
+        if (options.canWrite && anyWrites && !options.dryRun && !options.noWaitForCommit) {
             await pathValueCommitter.waitForValuesToCommit();
         }
         return result;
@@ -2414,7 +2436,7 @@ const finishProxyAndTriggerNext = runInSerial(
             return;
         }
 
-        // NOTE: We have to wait to the next tick, as finish order code is most often on for async functions, in which case, even though we will have called onResultUpdated, the caller He's waiting on a promise, so we need to give it a tick to actually receive the value. 
+        // NOTE: We have to wait to the next tick, as finish order code is most often on for async functions, in which case, even though we will have called onResultUpdated, the caller's waiting on a promise, so we need to give it a tick to actually receive the value. 
         //  - This shouldn't cause any actual slowdown because people are calling the functions and usually awaiting them, so they won't notice a difference. 
         // HACK: We wait 10 times because I guess there's a lot of change promises. I found five works, but adding more is fine. This is pretty bad, but... I don't think there's anything that can possibly be expecting an ordered function to finish synchronously. Anything that is waiting on the ordered function is going to actually be waiting with an await, so we could iterate 100 times here and it wouldn't break anything.
         for (let i = 0; i < 10; i++) {
@@ -2460,4 +2482,27 @@ export function getCurrentCallCreationProxy() {
     return currentCallCreationProxy;
 }
 
+
+registerPeriodic(function logWatcherTypes() {
+    let allWatchers = proxyWatcher.getAllWatchers();
+    let counts = new Map<string, { count: number; }>();
+    for (let watcher of allWatchers) {
+        let type = watcher.debugName.split("|")[0] || "no debug name";
+        let countObj = counts.get(type);
+        if (!countObj) {
+            countObj = { count: 0 };
+            counts.set(type, countObj);
+        }
+        countObj.count++;
+    }
+    let sorted = sort(Array.from(counts.entries()), x => -x[1].count);
+
+    console.log(`${formatNumber(allWatchers.size)} watchers | ${formatNumber(sorted.length)} types`);
+    // Log the top 5
+    for (let [type, countObj] of sorted.slice(0, 5)) {
+        let countText = `${formatPercent(countObj.count / allWatchers.size)} (${formatNumber(countObj.count)})`;
+        console.log(`    ${countText.padEnd(15, " ")}    ${type}`);
+    }
+});
+
 // #endregion Proxy Ordering

package/src/3-path-functions/PathFunctionRunner.ts

@@ -15,7 +15,7 @@ import { __getRoutingHash, authorityStorage, compareTime, debugTime, epochTime,
 import { getModuleFromSpec, watchModuleHotreloads } from "./pathFunctionLoader";
 import debugbreak from "debugbreak";
 import { parseArgs } from "./PathFunctionHelpers";
-import { PERMISSIONS_FUNCTION_ID, getAllDevelopmentModulesIds, getDevelopmentModule, getExportPath, getModuleRelativePath, getSchemaObject } from "./syncSchema";
+import { FunctionMetadata, PERMISSIONS_FUNCTION_ID, getAllDevelopmentModulesIds, getDevelopmentModule, getExportPath, getModuleRelativePath, getSchemaObject } from "./syncSchema";
 import { formatTime } from "socket-function/src/formatting/format";
 import { getControllerNodeIdList, set_debug_getFunctionRunnerShards } from "../-g-core-values/NodeCapabilities";
 import { FilterSelector, Filterable, doesMatch } from "../misc/filterable";
@@ -511,6 +511,14 @@ export class PathFunctionRunner {
                     throw new Error(`Export at ${JSON.stringify(exportPath.join("."))} was not a function (it was ${typeof baseFunction})`);
                 }
 
+                let devFunctionMetadata: FunctionMetadata | undefined;
+
+                let devModule = getDevelopmentModule(functionSpec.ModuleId);
+                if (devModule) {
+                    let schemaObj = getSchemaObject(devModule);
+                    devFunctionMetadata = schemaObj?.functionMetadata?.[functionSpec.FunctionId];
+                }
+
                 await proxyWatcher.commitFunction({
                     canWrite: true,
                     debugName: getDebugName(callPath, functionSpec),
@@ -518,7 +526,7 @@ export class PathFunctionRunner {
                     getPermissionsCheck: PermissionsChecker && (() => new PermissionsChecker(callPath)),
                     nestedCalls: "inline",
                     temporary: true,
-                    maxLocksOverride: functionSpec.maxLocksOverride,
+                    maxLocksOverride: devFunctionMetadata ? devFunctionMetadata.maxLocksOverride : functionSpec.maxLocksOverride,
                     watchFunction: function runCallWatcher() {
                         runCount++;
                         if (PathFunctionRunner.DEBUG_CALLS) {

package/src/4-dom/qreact.tsx

@@ -164,6 +164,7 @@ export class qreact {
     public static Component = Component;
     public static createElement = createElement;
     public static Fragment = Fragment;
+    public static inline = setInlineRenderFlag;
 
     /** See QComponentStatic.jsonComparePropUpdates */
     public static ComponentJSONCompare = ComponentJSONCompare;
@@ -208,7 +209,7 @@ export class qreact {
 
     public static cancelRender = cancelRender;
     public static isInRender = isInRender;
-    public static globalOnMountWatch = globalOnMountWatch;
+    public static globalAfterRenderWatch = globalAfterRenderWatch;
     public static allComponents = new Set<ExternalRenderClass>();
 
     /** The threshold at which we log component render times
@@ -222,7 +223,6 @@ export class qreact {
 (globalThis as any).qreact = qreact;
 
 
-
 export namespace qreact {
     export type VNode = preact.ComponentChildren;
     export type ComponentChildren = preact.ComponentChildren;
@@ -300,6 +300,23 @@ module.remapExports = (exports, callingModule) => {
 };
 
 
+
+type InlineFunction = {
+    /** NOTE: TypeScript will get unhappy if the function returns just component children, as in a string or something. Just forcefully cast it if this happens. It'll work fine, an inline function which returns a string, undefined, etc, will render without issue. */
+    (props: any, parentContext: any | undefined): preact.VNode;
+    isInlineFunction?: true;
+}
+/** Used to set a flag on a function which will cause it to render inline, which means it will be evaluated immediately, the same as if you called a function.
+ */
+export function setInlineRenderFlag(fnc: InlineFunction) {
+    fnc.isInlineFunction = true;
+    return fnc;
+}
+function isInlineFunction(fnc: Function): fnc is InlineFunction {
+    return (fnc as InlineFunction).isInlineFunction === true;
+}
+
+
 const elementCtor = heapTagObj("JSXElement");
 function createElement(
     type: qreact.ComponentClass | string,
@@ -317,8 +334,15 @@ function createElementBase(
 ): preact.VNode<{ [key: string]: unknown }> {
     props = props || {};
     if (children.length) {
+        if (children.length === 1 && !Array.isArray(children[0])) {
+            children = [children[0]];
+        }
         props.children = children;
     }
+    // TODO: Support nested inline calls as well
+    if (typeof type === "function" && isInlineFunction(type)) {
+        return type(props, getRenderingComponent());
+    }
     return elementCtor({
         type,
         props: props as any,
@@ -1432,7 +1456,7 @@ class QRenderClass {
                     contextCommit(() => props.ref?.(self.instance as any));
                 }
 
-                triggerGlobalOnMountWatch(self);
+                triggerGlobalAfterRenderWatch(self);
 
                 if (Querysub.anyUnsynced()) {
                     debugger;
@@ -2735,36 +2759,36 @@ registerMeasureInfo(() => {
 // #endregion
 
 
-let pendingGlobalOnMountWatches: QRenderClass[] = [];
+let pendingGlobalAfterRenderWatches: QRenderClass[] = [];
 
-let globalOnMountWatches: ((component: QRenderClass[]) => void)[] = [];
-function globalOnMountWatch(callback: (component: ExternalRenderClass[]) => void) {
-    globalOnMountWatches.push(callback);
+let globalAfterRenderWatches: ((component: QRenderClass[]) => void)[] = [];
+function globalAfterRenderWatch(callback: (component: ExternalRenderClass[]) => void) {
+    globalAfterRenderWatches.push(callback);
     return () => {
-        let index = globalOnMountWatches.indexOf(callback);
+        let index = globalAfterRenderWatches.indexOf(callback);
         if (index !== -1) {
-            globalOnMountWatches.splice(index, 1);
+            globalAfterRenderWatches.splice(index, 1);
         }
     };
 }
 let baseTrigger = lazy(async () => {
     await clientWatcher.waitForTriggerFinished();
     baseTrigger.reset();
-    let current = pendingGlobalOnMountWatches;
-    pendingGlobalOnMountWatches = [];
-    for (let callback of globalOnMountWatches) {
+    let current = pendingGlobalAfterRenderWatches;
+    pendingGlobalAfterRenderWatches = [];
+    for (let callback of globalAfterRenderWatches) {
         try {
             Querysub.commit(() => {
                 callback(current);
             });
         } catch (error) {
-            console.error(`Error in globalOnMountWatch callback: ${error}`, error);
+            console.error(`Error in globalAfterRenderWatch callback: ${error}`, error);
         }
     }
 });
-function triggerGlobalOnMountWatch(component: QRenderClass) {
+function triggerGlobalAfterRenderWatch(component: QRenderClass) {
     qreact.domUpdateCount++;
-    pendingGlobalOnMountWatches.push(component);
+    pendingGlobalAfterRenderWatches.push(component);
     void baseTrigger();
 }
 

package/src/4-querysub/Querysub.ts

@@ -270,7 +270,7 @@ export class Querysub {
     /** Calls the callback any time components are mounted to do the DOM (which happens after
      *      time they render, not just the first time).
      */
-    public static globalOnMountWatch = (callback: (components: ExternalRenderClass[]) => void) => qreact.globalOnMountWatch(callback);
+    public static globalAfterRenderWatch = (callback: (components: ExternalRenderClass[]) => void) => qreact.globalAfterRenderWatch(callback);
 
     public static doAtomicWrites = <T>(callback: () => T): T => doAtomicWrites(callback);
 
@@ -319,10 +319,14 @@ export class Querysub {
     public static runSynced = Querysub.serviceWriteDetached;
     public static commit = Querysub.serviceWriteDetached;
     public static write = Querysub.serviceWriteDetached;
+
+    // NOTE: We might want to add a kind of commit function that has finish and start order set by default, as this is kind of what most people assume. However, it adds so much lag that it definitely shouldn't be the default, even when we're client-side. 
     public static serviceWriteDetached(fnc: () => unknown, options?: Partial<WatcherOptions<unknown>>) {
         logErrors(proxyWatcher.commitFunction({
             canWrite: true,
             watchFunction: fnc,
+            //finishInStartOrder: isClient(),
+            noWaitForCommit: isClient(),
             ...options,
         }));
     }
@@ -342,18 +346,16 @@ export class Querysub {
     public static syncedCommit = Querysub.serviceWrite;
     public static commitSynced = Querysub.serviceWrite;
     public static commitAsync = Querysub.serviceWrite;
-    /** IMPORTANT! Functions called with commitAsync will finish in their call order, allowing you to use this to read remote values and commit to either remote state or local state, and have the writes be applied in the same order as if they all happened in serial. If you don't want this, or don't need this, you can either use Querysub.commit (If you don't need to wait for it to finish or access the result), or you can pass { finishInStartOrder: false }
-     *  - ONLY DEFAULTED WHEN isClient()
-     */
     public static async serviceWrite<T>(fnc: () => T, options?: Partial<WatcherOptions<T>>) {
         let calls: CallSpec[] = [];
         let result = await proxyWatcher.commitFunction({
             canWrite: true,
             watchFunction: fnc,
-            finishInStartOrder: isClient(),
             onCallCommit(call, metadata) {
                 calls.push(call);
             },
+            // The only reason we really wait for the commit is for server side so we don't terminate the process before the write finishes. But if we are client side this isn't an issue.
+            noWaitForCommit: isClient(),
             ...options,
         });
         // Wait for calls to predict. This SHOULDN'T take very long. This allows us to use serviceWrite
@@ -373,7 +375,7 @@ export class Querysub {
         });
     }
     public static fastReadAsync<T>(fnc: () => T, options?: Partial<WatcherOptions<T>>) {
-        return Querysub.serviceWrite(fnc, { ...options, allowProxyResults: true });
+        return Querysub.serviceWrite(fnc, { ...options, allowProxyResults: true, noWaitForCommit: true });
     }
     public static localRead<T>(fnc: () => T, options?: Partial<WatcherOptions<T>>) {
         return proxyWatcher.runOnce({

package/src/5-diagnostics/Modal.tsx

@@ -102,7 +102,7 @@ export function closeAllModals() {
     });
 }
 export function isShowingModal() {
-    return Object.values(data().modals).length > 0;
+    return Object.values(data().modals).filter(x => !x.onlyExplicitClose).length > 0;
 }
 
 

package/src/diagnostics/logs/injectFileLocationToConsole.ts

@@ -36,7 +36,7 @@ if (isNode()) {
         }
 
         // IMPORTANT! No newlines, so we don't break sourcemaps
-        return `var console = (${shimConsole.toString().replaceAll("\n", " ")})(); ${contents}`;
+        return `"use strict"; var console = (${shimConsole.toString().replaceAll("\n", " ")})(); ${contents}`;
     });
 
     let diskShimConsoleLogs = require("./diskShimConsoleLogs") as typeof import("./diskShimConsoleLogs");

package/src/errors.ts

@@ -110,6 +110,7 @@ export function errorify(error: any, messageOverride?: string) {
     let errorObj = new Error();
     if (typeof error === "string" && error.includes("\n")) {
         errorObj.stack = error;
+        errorObj.message = error.split("\n")[0];
     } else {
         errorObj.message = error;
         errorObj.stack = error + "\n" + errorObj.stack;

package/src/functional/throttleRender.ts

@@ -2,10 +2,16 @@
 
 // NOTE: Many cases we don't know if we want to throttle, or how long we want to throttle for, until we start the watcher, so this has to be done inside our render, instead of in ProxyWatcher.
 
-import { cache } from "socket-function/src/caching";
+import { cache, lazy } from "socket-function/src/caching";
 import { proxyWatcher, SyncWatcher } from "../2-proxy/PathValueProxyWatcher";
 import { qreact } from "../4-dom/qreact";
 import { onNextPaint } from "./onNextPaint";
+import { Querysub } from "../4-querysub/QuerysubController";
+
+let disabled = false;
+export function setThrottleRenderDisabled(value: boolean) {
+    disabled = value;
+}
 
 // Throttles calls that have the same throttleKey
 /** Used near the start of your render, like so:
@@ -26,6 +32,7 @@ export function throttleRender(config: {
     // Delays for additional frames. Ex, set frameDelay to 0, smear to 60, and count to 30. The first delay is 0, then 30, then 60
     frameDelayCount?: number;
 }): boolean {
+    if (disabled) return false;
     let watcher = proxyWatcher.getTriggeredWatcher();
     // Never throttle the first render, as that would be noticeable and always unintended
     if (watcher.syncRunCount === 0) return false;

package/src/library-components/Button.tsx

@@ -186,8 +186,9 @@ export function getAnimationFrames() {
     return frames;
 }
 
+
+
 export class Button extends qreact.Component<ButtonProps> {
-    onFocusText = "";
     element: HTMLButtonElement | null = null;
     componentDidMount(): void {
         registeredWatches.add(this);
@@ -195,150 +196,162 @@ export class Button extends qreact.Component<ButtonProps> {
     componentWillUnmount(): void {
         registeredWatches.delete(this);
     }
-    static renderInline(props: ButtonProps) { return true; }
-    render() {
-        let { square, flavor, children, className, style, hue, showHotkeys, hotkeys, hotkeyPosition: typeHotkeyPosition, ...props } = this.props;
+    render(): preact.ComponentChildren {
+        return ButtonInline(this.props, this, true);
+    }
+}
+
 
-        delete props["class"];
+qreact.inline(ButtonInline);
 
-        let flavorOverrides: preact.JSX.CSSProperties = {};
+export function ButtonInline(inputProps: ButtonProps, parentContext: Button | undefined, isNotInline?: boolean): preact.VNode {
+    let { square, flavor, children, className, style, hue, showHotkeys, hotkeys, hotkeyPosition: typeHotkeyPosition, ...props } = inputProps;
+    let context = isNotInline ? parentContext as Button : undefined;
+
+    if (hotkeys?.length && !isNotInline) {
+        debugger;
+        throw new Error(`Hotkeys are not supported for inline buttons. Tried to use ${JSON.stringify(hotkeys)}`);
+    }
+
+    delete props["class"];
+
+    let flavorOverrides: preact.JSX.CSSProperties = {};
+    if (square) {
+        flavorOverrides.padding = "1px";
+    }
+    if (flavor === "large") {
+        flavorOverrides = {
+            fontSize: 18,
+            padding: "10px 15px",
+        };
         if (square) {
-            flavorOverrides.padding = "1px";
+            flavorOverrides.padding = "10px";
         }
-        if (flavor === "large") {
-            flavorOverrides = {
-                fontSize: 18,
-                padding: "10px 15px",
-            };
-            if (square) {
-                flavorOverrides.padding = "10px";
-            }
-        }
-        if (flavor === "small") {
-            flavorOverrides = {
-                fontSize: 12,
-                padding: "5px 10px",
-            };
-            if (square) {
-                flavorOverrides.padding = "5px";
-            }
+    }
+    if (flavor === "small") {
+        flavorOverrides = {
+            fontSize: 12,
+            padding: "5px 10px",
+        };
+        if (square) {
+            flavorOverrides.padding = "5px";
         }
-        if (flavor === "tiny") {
-            flavorOverrides = {
-                fontSize: 10,
-                padding: "3px 6px",
-            };
-            if (square) {
-                flavorOverrides.padding = "3px";
-            }
+    }
+    if (flavor === "tiny") {
+        flavorOverrides = {
+            fontSize: 10,
+            padding: "3px 6px",
+        };
+        if (square) {
+            flavorOverrides.padding = "3px";
         }
+    }
 
-        let colorStyle = (
-            hue !== undefined &&
-            css.background(`hsl(${hue}, 50%, 50%)`, "soft")
-                .background(`hsl(${hue}, 50%, 40%)`, "active", "soft")
-                .border(`1px solid hsl(${hue}, 0%, 50%)`, "soft")
-                .outline(`3px solid hsl(204, 100%, 50%)`, "focus", "soft")
-                .color("white")
-            || css.background("hsl(0, 0%, 39%)", "soft")
-                .background("hsl(0, 0%, 50%)", "hover", "soft")
-                .background("hsl(0, 0%, 50%)", "active", "soft")
-                .border("1px solid hsl(0, 0%, 50%)", "soft")
-                .outline("3px solid hsl(204, 100%, 50%)", "focus", "soft")
-                .color("white")
-        );
+    let colorStyle = (
+        hue !== undefined &&
+        css.background(`hsl(${hue}, 50%, 50%)`, "soft")
+            .background(`hsl(${hue}, 50%, 40%)`, "active", "soft")
+            .border(`1px solid hsl(${hue}, 0%, 50%)`, "soft")
+            .outline(`3px solid hsl(204, 100%, 50%)`, "focus", "soft")
+            .color("white")
+        || css.background("hsl(0, 0%, 39%)", "soft")
+            .background("hsl(0, 0%, 50%)", "hover", "soft")
+            .background("hsl(0, 0%, 50%)", "active", "soft")
+            .border("1px solid hsl(0, 0%, 50%)", "soft")
+            .outline("3px solid hsl(204, 100%, 50%)", "focus", "soft")
+            .color("white")
+    );
 
 
-        let type = this.props.typeOverride || this.props.flavor === "noui" && "div" || "button";
-        return qreact.createElement(
-            type,
-            {
-                ...props,
-                className: (
-                    (className || this.props.class || "")
-                    + " trigger-hover"
-                    + css.zIndex(1, "hover").position("relative", "soft")
-                    + (
-                        flavor !== "noui" && (
-                            colorStyle.display("flex", "soft")
-                                .cursor("pointer")
-                                .padding("4px 6px" as "1px")
-                                .filter("brightness(1.1)", "hover", "soft")
-                        )
+    let type = inputProps.typeOverride || inputProps.flavor === "noui" && "div" || "button";
+    return qreact.createElement(
+        type,
+        {
+            ...props,
+            className: (
+                (className || inputProps.class || "")
+                + " trigger-hover"
+                + css.zIndex(1, "hover").position("relative", "soft")
+                + (
+                    flavor !== "noui" && (
+                        colorStyle.display("flex", "soft")
+                            .cursor("pointer")
+                            .padding("4px 6px" as "1px")
+                            .filter("brightness(1.1)", "hover", "soft")
                     )
+                )
+            ),
+            style: flavor === "noui" ? {} : {
+                alignItems: "center",
+                userSelect: inputProps.useLegacySelection ? "none" : undefined,
+                flexDirection: (
+                    inputProps.showHotkeys === "vertical" && "column"
+                    || inputProps.showHotkeys === "reverse" && "row-reverse"
+                    || "row"
                 ),
-                style: flavor === "noui" ? {} : {
-                    alignItems: "center",
-                    userSelect: this.props.useLegacySelection ? "none" : undefined,
-                    flexDirection: (
-                        this.props.showHotkeys === "vertical" && "column"
-                        || this.props.showHotkeys === "reverse" && "row-reverse"
-                        || "row"
-                    ),
-                    ...flavorOverrides,
-                    ...style as any,
-                },
-                ref: (x: any) => this.element = x,
-                onMouseDown: ((e: MouseEvent) => {
-                    // NOTE: THIS is the correct way to prevent selection. This prevent clicking
-                    //  on a button from accidentally selecting text (EVEN other text), while
-                    //  still allowing the user to select the button text if they want to.
-                    if (!this.props.useLegacySelection) {
-                        e.preventDefault();
-                    }
-                    return this.props.onMouseDown?.(e as any);
-                })
+                ...flavorOverrides,
+                ...style as any,
             },
-            <>
-                {children}
-                {
-                    <div class={
-                        ((this.props.hideHotkeys && " ")
-                            || showHotkeys && hotkeys?.length && css.marginLeft(10).vbox(6).pointerEvents("none")
-                            || (
-                                css.absolute.zIndex(1).pointerEvents("none")
+            ref: (x: any) => context && (context.element = x),
+            onMouseDown: ((e: MouseEvent) => {
+                // NOTE: THIS is the correct way to prevent selection. This prevent clicking
+                //  on a button from accidentally selecting text (EVEN other text), while
+                //  still allowing the user to select the button text if they want to.
+                if (!inputProps.useLegacySelection) {
+                    e.preventDefault();
+                }
+                return inputProps.onMouseDown?.(e as any);
+            })
+        },
+        <>
+            {children}
+            {
+                <div class={
+                    ((inputProps.hideHotkeys && " ")
+                        || showHotkeys && hotkeys?.length && css.marginLeft(10).vbox(6).pointerEvents("none")
+                        || (
+                            css.absolute.zIndex(1).pointerEvents("none")
 
+                                .whiteSpace("nowrap")
+                            + " show-on-hover"
+                            + (
+                                typeHotkeyPosition === "left" && css.pos("0%", "50%").offset("-100%", "-50%")
+                                || typeHotkeyPosition === "above" && css.pos("50%", "0%").offset("-50%", "-100%")
+                                || css.pos("100%", "50%").offset("6px", "-50%")
+                            )
+                        )
+                    ) + (inputProps.hotkeyClassname || "")
+                }>
+                    {inputProps.hotkeys?.map((x, i) =>
+                        <div class={
+                            "" + (
+                                css
+                                    .center
+                                    .height(showHotkeys ? 20 : 35)
+                                    .minWidth(showHotkeys ? 20 : 35)
+                                    .pad(0, 10)
+                                    .fontSize(14)
+                                    .color("hsl(0, 0%, 20%)")
+                                    .background("hsl(0, 0%, 90%)")
+                                    .background("hsl(0, 0%, 70%)", "hover")
+                                    .background("hsl(0, 0%, 60%)", "active")
+                                    .borderRadius(3)
+                                    .boxShadow("0px 2px 4px rgba(0, 0, 0, 0.5)")
+                                    .boxShadow("0px 2px 4px rgba(0, 0, 0, 0.9)", "active")
+                                    .transition("all 0.2s ease-in-out")
                                     .whiteSpace("nowrap")
-                                + " show-on-hover"
-                                + (
-                                    typeHotkeyPosition === "left" && css.pos("0%", "50%").offset("-100%", "-50%")
-                                    || typeHotkeyPosition === "above" && css.pos("50%", "0%").offset("-50%", "-100%")
-                                    || css.pos("100%", "50%").offset("6px", "-50%")
-                                )
                             )
-                        ) + (this.props.hotkeyClassname || "")
-                    }>
-                        {this.props.hotkeys?.map((x, i) =>
-                            <div class={
-                                "" + (
-                                    css
-                                        .center
-                                        .height(showHotkeys ? 20 : 35)
-                                        .minWidth(showHotkeys ? 20 : 35)
-                                        .pad(0, 10)
-                                        .fontSize(14)
-                                        .color("hsl(0, 0%, 20%)")
-                                        .background("hsl(0, 0%, 90%)")
-                                        .background("hsl(0, 0%, 70%)", "hover")
-                                        .background("hsl(0, 0%, 60%)", "active")
-                                        .borderRadius(3)
-                                        .boxShadow("0px 2px 4px rgba(0, 0, 0, 0.5)")
-                                        .boxShadow("0px 2px 4px rgba(0, 0, 0, 0.9)", "active")
-                                        .transition("all 0.2s ease-in-out")
-                                        .whiteSpace("nowrap")
-                                )
 
-                            }
-                            >
-                                {formatHotkey(x)}
-                            </div>
-                        )}
-                    </div>
-                }
-            </>
+                        }
+                        >
+                            {formatHotkey(x)}
+                        </div>
+                    )}
+                </div>
+            }
+        </>
 
-        );
-    }
+    );
 }
 
 function formatHotkey(key: string) {

package/src/library-components/drag.ts

@@ -69,6 +69,10 @@ export function performDrag2(
 
     const onMouseMove = (e: MouseEvent) => {
         if (finished) return;
+        if (e.buttons === 0) {
+            finish();
+            return;
+        }
         if (lastMouseX === e.clientX && lastMouseY === e.clientY) return;
         lastMouseX = e.clientX;
         lastMouseY = e.clientY;
@@ -82,6 +86,7 @@ export function performDrag2(
             dragCount--;
             window.removeEventListener("mousemove", onMouseMove);
             window.removeEventListener("mouseup", finish, { capture: true });
+            window.removeEventListener("blur", onBlur);
             document.removeEventListener("keydown", keyDown);
             // Call trigger, to reset the state back to the original state.
             triggerMove();
@@ -116,8 +121,14 @@ export function performDrag2(
         }
     };
 
+    const onBlur = () => {
+        if (finished) return;
+        cancel();
+    };
+
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", finish, { capture: true });
+    window.addEventListener("blur", onBlur);
     document.addEventListener("keydown", keyDown);
     selfCancelCallback.add(cancel);