@emuanalytics/flow-rdf-core 4.0.0-preview.2 → 4.0.0-preview.3

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as mobx from 'mobx';
-import { isObservable, isComputed, isObservableArray, isObservableSet, isObservableMap, configure, makeObservable, observable as observable$1, computed as computed$1, action, runInAction, onBecomeObserved, onBecomeUnobserved, reaction, trace } from 'mobx';
+import { isObservable, isComputed, isObservableArray, isObservableSet, isObservableMap, configure, makeObservable, observable as observable$1, computed as computed$1, action, runInAction, onBecomeObserved, onBecomeUnobserved, reaction, toJS, trace } from 'mobx';
 export { makeAutoObservable, makeObservable } from 'mobx';
 import Debug from 'debug';
 import { Client } from '@emuanalytics/flow-engine-client';
@@ -9,12 +9,13 @@ import maplibre from '@emuanalytics/maplibre-gl';
 import EventEmitter from 'eventemitter3';
 import { toStream } from 'mobx-utils';
 import { t as throttle, a as debounceWithArgs } from './shared/flow-rdf-core.2e456f93.mjs';
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string';
 import '@emuanalytics/maplibre-gl-style-spec';
 import 'parsimmon';
 import 'colorbrewer';
 import 'nanoid';
 
-const version = "4.0.0-preview.2";
+const version = "4.0.0-preview.3";
 
 const CONSOLE_HIGHLIGHT_STYLE$1 = `
   padding: 2px 4px;
@@ -50,10 +51,10 @@ function deferred() {
   return Object.assign(promise, methods);
 }
 
-var __defProp$d = Object.defineProperty;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$d = (obj, key, value) => {
-  __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$c = Object.defineProperty;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$c = (obj, key, value) => {
+  __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const FLOW_GLOBAL = "FDBG";
@@ -74,8 +75,8 @@ class Debugger {
    */
   constructor(context) {
     this.context = context;
-    __publicField$d(this, "spyDisposer");
-    __publicField$d(this, "watchDisposers", {});
+    __publicField$c(this, "spyDisposer");
+    __publicField$c(this, "watchDisposers", {});
   }
   /**
    * Install a 'watch' for the specified context state property path.
@@ -191,6 +192,7 @@ function installGlobalDebugger(dbg) {
   );
   const g = typeof global !== "undefined" ? global : window;
   g[FLOW_GLOBAL] = g[FLOW_GLOBAL] || {
+    context: dbg.context,
     watch: dbg.watch.bind(dbg),
     unwatch: dbg.unwatch.bind(dbg),
     set: dbg.set.bind(dbg),
@@ -284,16 +286,16 @@ function toJSHelper(source, options, __alreadySeen = null) {
   return res;
 }
 
-var __defProp$c = Object.defineProperty;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$c = (obj, key, value) => {
-  __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$b = Object.defineProperty;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$b = (obj, key, value) => {
+  __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const debug$4 = Debug("flow:map-registry");
 class MapRegistry {
   constructor() {
-    __publicField$c(this, "_maps", /* @__PURE__ */ new Map());
+    __publicField$b(this, "_maps", /* @__PURE__ */ new Map());
   }
   /**
    * Register a Flo.w map.
@@ -335,16 +337,16 @@ class MapRegistry {
   }
 }
 
-var __defProp$b = Object.defineProperty;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$b = (obj, key, value) => {
-  __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$a = Object.defineProperty;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$a = (obj, key, value) => {
+  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const debug$3 = Debug("flow:query-registry");
 class QueryRegistry {
   constructor() {
-    __publicField$b(this, "_queries", /* @__PURE__ */ new Map());
+    __publicField$a(this, "_queries", /* @__PURE__ */ new Map());
   }
   /**
    * Register a Flo.w reactive query.
@@ -384,10 +386,10 @@ class QueryRegistry {
   }
 }
 
-var __defProp$a = Object.defineProperty;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$a = (obj, key, value) => {
-  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$9 = Object.defineProperty;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$9 = (obj, key, value) => {
+  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const DEFAULT_FLOW_HOST = "https://flow.emu-analytics.net";
@@ -404,13 +406,13 @@ const _FlowContext = class _FlowContext {
    * @param enableDebug Set to `true` to enable the debugger.
    */
   constructor(options) {
-    __publicField$a(this, "_options");
-    __publicField$a(this, "flowClient");
-    __publicField$a(this, "state");
-    __publicField$a(this, "maps", new MapRegistry());
-    __publicField$a(this, "queries", new QueryRegistry());
+    __publicField$9(this, "_options");
+    __publicField$9(this, "flowClient");
+    __publicField$9(this, "state");
+    __publicField$9(this, "maps", new MapRegistry());
+    __publicField$9(this, "queries", new QueryRegistry());
     /** The Flo.w debugger. Available as `window.FDBG` in the browser's web developer console. */
-    __publicField$a(this, "debugger");
+    __publicField$9(this, "debugger");
     this._options = {
       ..._FlowContext._defaultOptions,
       ...options
@@ -434,23 +436,23 @@ const _FlowContext = class _FlowContext {
     return expression.value;
   }
 };
-__publicField$a(_FlowContext, "_defaultOptions", {
+__publicField$9(_FlowContext, "_defaultOptions", {
   id: DEFAULT_CONTEXT_ID,
   host: DEFAULT_FLOW_HOST,
   enableDebug: false
 });
 let FlowContext = _FlowContext;
 
-var __defProp$9 = Object.defineProperty;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$9 = (obj, key, value) => {
-  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$8 = (obj, key, value) => {
+  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const debug$2 = Debug("flow:context-registry");
 const _ContextRegistry = class _ContextRegistry {
   constructor() {
-    __publicField$9(this, "_contexts", /* @__PURE__ */ new Map());
+    __publicField$8(this, "_contexts", /* @__PURE__ */ new Map());
   }
   /**
    * Initialize a new Flo.w context.
@@ -493,16 +495,16 @@ const _ContextRegistry = class _ContextRegistry {
     return deferredContext?.deferred;
   }
 };
-__publicField$9(_ContextRegistry, "_defaultOptions", {
+__publicField$8(_ContextRegistry, "_defaultOptions", {
   id: DEFAULT_CONTEXT_ID,
   host: "https://flow.emu-analytics.net"
 });
 let ContextRegistry = _ContextRegistry;
 
-var __defProp$8 = Object.defineProperty;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => {
-  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => {
+  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class FlowRdfCoreGlobals {
@@ -514,8 +516,8 @@ class FlowRdfCoreGlobals {
      *
      * N.B: this version is unrelated to the package version.
      */
-    __publicField$8(this, "version", 1);
-    __publicField$8(this, "globalContextRegistry", new ContextRegistry());
+    __publicField$7(this, "version", 1);
+    __publicField$7(this, "globalContextRegistry", new ContextRegistry());
   }
 }
 let canMergeGlobalState = true;
@@ -563,15 +565,15 @@ function getGlobalState() {
   return globalState;
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$7 = (obj, key, value) => {
-  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class MapLayerStyleBuilder {
   constructor() {
-    __publicField$7(this, "_styles", /* @__PURE__ */ new Map());
+    __publicField$6(this, "_styles", /* @__PURE__ */ new Map());
   }
   static registerStyleBuilder(layerType, builder) {
     this._styleBuilders.set(layerType, builder);
@@ -629,11 +631,11 @@ class MapLayerStyleBuilder {
     }
   }
 }
-__publicField$7(MapLayerStyleBuilder, "_styleBuilders", /* @__PURE__ */ new Map());
+__publicField$6(MapLayerStyleBuilder, "_styleBuilders", /* @__PURE__ */ new Map());
 class StyleExpression {
   constructor(_expr) {
     this._expr = _expr;
-    __publicField$7(this, "__styleExpression", "styleexpression");
+    __publicField$6(this, "__styleExpression", "styleexpression");
   }
   toString() {
     return this._expr;
@@ -1950,19 +1952,19 @@ function layerStyle(layerType) {
   return MapLayerStyleBuilder.createStyleBuilder(layerType);
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$6 = (obj, key, value) => {
-  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const _MapStyle = class _MapStyle {
   constructor() {
-    __publicField$6(this, "_state", null);
-    __publicField$6(this, "_baseStyle");
-    __publicField$6(this, "_sources", {});
-    __publicField$6(this, "_layers", {});
-    __publicField$6(this, "_layerOrder", []);
+    __publicField$5(this, "_state", null);
+    __publicField$5(this, "_baseStyle");
+    __publicField$5(this, "_sources", {});
+    __publicField$5(this, "_layers", {});
+    __publicField$5(this, "_layerOrder", []);
     this._baseStyle = _MapStyle._defaultBaseStyle;
     makeObservable(
       this,
@@ -2114,7 +2116,7 @@ const _MapStyle = class _MapStyle {
     return insertionIndex;
   }
 };
-__publicField$6(_MapStyle, "_defaultBaseStyle", Object.freeze({
+__publicField$5(_MapStyle, "_defaultBaseStyle", Object.freeze({
   version: 8,
   id: "default",
   name: "Default base style",
@@ -2123,18 +2125,18 @@ __publicField$6(_MapStyle, "_defaultBaseStyle", Object.freeze({
 }));
 let MapStyle = _MapStyle;
 
-var __defProp$5 = Object.defineProperty;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => {
-  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 Debug("flow:image-registry");
 const unknownImageSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='flowicon'%3E%3C!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm0 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32s-14.9 32-32 32zm69.1-142L280 286v2c0 13-11 24-24 24s-24-11-24-24v-16c0-8 4-16 12-21l57-34c7-4 11-11 11-19 0-12-10.9-22-22.9-22H238c-12.9 0-22 10-22 22 0 13-11 24-24 24s-24-11-24-24c0-39 31-70 69.1-70h51.1c40.8 0 71.8 31 71.8 70 0 24-13 47-34.9 60z'/%3E%3C/svg%3E`;
 class ImageRegistry {
   constructor() {
-    __publicField$5(this, "_registry", /* @__PURE__ */ new Map());
-    __publicField$5(this, "_unknownImage", null);
+    __publicField$4(this, "_registry", /* @__PURE__ */ new Map());
+    __publicField$4(this, "_unknownImage", null);
   }
   get unknownImage() {
     if (!this._unknownImage) {
@@ -2202,10 +2204,10 @@ class ImageRegistry {
   }
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const debug$1 = Debug("flow:map");
@@ -2213,24 +2215,24 @@ const MOUSE_MOVE_THROTTLE_DURATION = 100;
 const _FlowMap = class _FlowMap extends EventEmitter {
   constructor(options) {
     super();
-    __publicField$4(this, "_context");
-    __publicField$4(this, "_initialized");
-    __publicField$4(this, "_loading", true);
-    __publicField$4(this, "_debouncedEmitSourceEvent");
-    __publicField$4(this, "_imageRegistry", new ImageRegistry());
-    __publicField$4(this, "_options");
-    __publicField$4(this, "_pluginManager");
-    __publicField$4(this, "_resolveInitialized", () => {
+    __publicField$3(this, "_context");
+    __publicField$3(this, "_initialized");
+    __publicField$3(this, "_loading", true);
+    __publicField$3(this, "_debouncedEmitSourceEvent");
+    __publicField$3(this, "_imageRegistry", new ImageRegistry());
+    __publicField$3(this, "_options");
+    __publicField$3(this, "_pluginManager");
+    __publicField$3(this, "_resolveInitialized", () => {
     });
-    __publicField$4(this, "_style");
-    __publicField$4(this, "_styleUpdateSubscription", null);
-    __publicField$4(this, "_throttledMouseMove", throttle(this.handleMouseMove, {
+    __publicField$3(this, "_style");
+    __publicField$3(this, "_styleUpdateSubscription", null);
+    __publicField$3(this, "_throttledMouseMove", throttle(this.handleMouseMove, {
       delay: MOUSE_MOVE_THROTTLE_DURATION,
       noLeading: true,
       context: this
     }));
-    __publicField$4(this, "maplibreMap");
-    __publicField$4(this, "updateMapStyle", (style) => {
+    __publicField$3(this, "maplibreMap");
+    __publicField$3(this, "updateMapStyle", (style) => {
       const oldStyle = this.maplibreMap.getStyle();
       const beforeEvent = new MapStyleChangeEvent("beforeStyleChanged", this, oldStyle, style);
       style = this._pluginManager.forwardStyleChangeEvent(
@@ -2273,6 +2275,14 @@ const _FlowMap = class _FlowMap extends EventEmitter {
   get styleSpecification() {
     return this._style.styleSpecification;
   }
+  /**
+   * @internal
+   *
+   * Used by map export to get images added to map.
+   */
+  get imageRegistry() {
+    return this._imageRegistry;
+  }
   addLayer(layerOrOptions) {
     const layer = isPlainObject(layerOrOptions) ? new MapLayer(layerOrOptions) : layerOrOptions;
     this._style.addLayer(layer);
@@ -2433,9 +2443,9 @@ const _FlowMap = class _FlowMap extends EventEmitter {
     }
     const options = {
       center: lngLat,
-      ...center.zoom && { zoom: center.zoom },
-      ...center.bearing && { bearing: center.bearing },
-      ...center.pitch && { pitch: center.pitch },
+      ...isDefined(center.zoom) && { zoom: center.zoom },
+      ...isDefined(center.bearing) && { bearing: center.bearing },
+      ...isDefined(center.pitch) && { pitch: center.pitch },
       ...animationOptions
     };
     method.call(this.maplibreMap, options);
@@ -2453,6 +2463,17 @@ const _FlowMap = class _FlowMap extends EventEmitter {
     };
     this.maplibreMap.fitBounds(bounds, fitBoundsOptions);
   }
+  getVisibleBounds() {
+    const parentEl = this.container.parentElement;
+    if (!parentEl) {
+      return this.getBounds();
+    }
+    const mapRect = parentEl.getBoundingClientRect();
+    const topLeft = this.maplibreMap.unproject([mapRect.x, mapRect.y]);
+    const bottomRight = this.maplibreMap.unproject([mapRect.x + mapRect.width, mapRect.y + mapRect.height]);
+    const bounds = [topLeft.lng, bottomRight.lat, bottomRight.lng, topLeft.lat];
+    return bounds;
+  }
   /**
    * Programmatically set feature state properties for a map feature.
    *
@@ -2627,23 +2648,23 @@ const _FlowMap = class _FlowMap extends EventEmitter {
     return requestParameters;
   }
 };
-__publicField$4(_FlowMap, "_defaultOptions", {
+__publicField$3(_FlowMap, "_defaultOptions", {
   boxZoom: false,
   doubleClickZoom: false,
   featureClickTolerance: 0
 });
 let FlowMap = _FlowMap;
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class AsyncCommitter {
   constructor() {
-    __publicField$3(this, "_requestId", 0);
-    __publicField$3(this, "_commitId", 0);
+    __publicField$2(this, "_requestId", 0);
+    __publicField$2(this, "_commitId", 0);
   }
   async resolve(promise) {
     this._requestId += 1;
@@ -2663,10 +2684,10 @@ class AsyncCommitter {
   }
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const debug = Debug("flow:query");
@@ -2674,13 +2695,13 @@ const DEFAULT_DELAY = 100;
 const _Query = class _Query {
   constructor(queryFn, transformFn, options) {
     this.queryFn = queryFn;
-    __publicField$2(this, "_options");
-    __publicField$2(this, "_committer", new AsyncCommitter());
-    __publicField$2(this, "_disposer", null);
-    __publicField$2(this, "_transformFn", (results) => results);
-    __publicField$2(this, "results", null);
-    __publicField$2(this, "busy", false);
-    __publicField$2(this, "error", null);
+    __publicField$1(this, "_options");
+    __publicField$1(this, "_committer", new AsyncCommitter());
+    __publicField$1(this, "_disposer", null);
+    __publicField$1(this, "_transformFn", (results) => results);
+    __publicField$1(this, "results", null);
+    __publicField$1(this, "busy", false);
+    __publicField$1(this, "error", null);
     this._options = {
       ..._Query._defaultOptions,
       ...options
@@ -2791,7 +2812,7 @@ const _Query = class _Query {
     }
   }
 };
-__publicField$2(_Query, "_defaultOptions", {
+__publicField$1(_Query, "_defaultOptions", {
   fireImmediately: true,
   delay: DEFAULT_DELAY
 });
@@ -2877,67 +2898,59 @@ function hasProp(target, prop) {
 
 const SYNC_ANNOTATION_TYPE = "state-sync-annotation";
 const REACTIVE_ANNOTATION_TYPE = "state-reactive-annotation";
-const serializeString = {
+const serializeRaw = {
   annotationType: SYNC_ANNOTATION_TYPE,
   serialize(val) {
-    return val.toString();
+    return toJS(val);
   },
   deserialize(val) {
-    return val.toString();
+    return val;
   }
 };
-const serializeNumber = {
+const serializeString = {
   annotationType: SYNC_ANNOTATION_TYPE,
   serialize(val) {
     return val.toString();
   },
   deserialize(val) {
-    return +val;
+    return val;
   }
 };
-const serializeStringArray = {
+const serializeNumber = {
   annotationType: SYNC_ANNOTATION_TYPE,
   serialize(val) {
-    return val.join(",");
+    return val.toString();
   },
   deserialize(val) {
-    return val.split(",");
+    return +val;
   }
 };
-const serializeNumberArray = {
+const serializeJson = {
   annotationType: SYNC_ANNOTATION_TYPE,
   serialize(val) {
-    return val.join(",");
+    return JSON.stringify(val);
   },
   deserialize(val) {
-    return val.split(",").map((n) => +n);
+    return JSON.parse(val);
   }
 };
 const serializeState = {
   annotationType: SYNC_ANNOTATION_TYPE,
   serialize(val) {
-    const props = val.serialize();
-    const entries = Object.entries(props).map((entry) => `${entry[0]}=${entry[1]}`);
-    return entries.join(",");
+    return val.serialize();
   },
   deserialize(val, target) {
-    const entries = val.split(",").reduce((accum, entry) => {
-      const parts = entry.split("=");
-      assert(parts.length === 2);
-      accum[parts[0]] = parts[1];
-      return accum;
-    }, {});
-    target.deserialize(entries);
+    target.deserialize(val);
     return target;
   }
 };
-const serialize = {
+const serialize = Object.assign(createDecoratorAnnotation(serializeRaw), {
+  raw: createDecoratorAnnotation(serializeRaw),
   string: createDecoratorAnnotation(serializeString),
   number: createDecoratorAnnotation(serializeNumber),
-  stringArray: createDecoratorAnnotation(serializeStringArray),
-  numberArray: createDecoratorAnnotation(serializeNumberArray),
+  json: createDecoratorAnnotation(serializeJson),
   state: createDecoratorAnnotation(serializeState)
-};
+});
 function createReactiveAnnotation(mobxAnnotation) {
   return createDecoratorAnnotation({
     annotationType: REACTIVE_ANNOTATION_TYPE,
@@ -2945,45 +2958,15 @@ function createReactiveAnnotation(mobxAnnotation) {
   });
 }
 const observable = Object.assign(createReactiveAnnotation(mobx.observable), {
+  deep: createReactiveAnnotation(mobx.observable.deep),
   ref: createReactiveAnnotation(mobx.observable.ref),
-  struct: createReactiveAnnotation(mobx.observable.ref),
+  struct: createReactiveAnnotation(mobx.observable.struct),
   shallow: createReactiveAnnotation(mobx.observable.shallow)
 });
 const computed = Object.assign(createReactiveAnnotation(mobx.computed), {
   struct: createReactiveAnnotation(mobx.computed.struct)
 });
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class Serializer {
-  constructor(target) {
-    __publicField$1(this, "target");
-    this.target = target;
-  }
-}
-class UrlSerializer extends Serializer {
-  constructor(target) {
-    super(target);
-  }
-  serialize(vals) {
-    const searchParams = new URLSearchParams(window.location.search);
-    Object.keys(vals).forEach((key) => searchParams.set(key, vals[key]));
-    const queryString = searchParams.toString();
-    const newUrl = queryString.length ? `${location.pathname}?${queryString}` : location.pathname;
-    window.history.replaceState(vals, "", newUrl);
-  }
-  deserialize() {
-    const searchParams = new URLSearchParams(window.location.search);
-    const values = {};
-    searchParams.forEach((val, key) => values[key] = val);
-    return values;
-  }
-}
-
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -2995,7 +2978,6 @@ const StateStorCache = Symbol("FlowCoreStateStorCache");
 class StateStore {
   constructor() {
     __publicField(this, "serializationAnnotations", {});
-    __publicField(this, "serializer", new UrlSerializer(this));
     __publicField(this, "id");
     this.id = randomId("state");
   }
@@ -3113,7 +3095,7 @@ class StateStore {
     if (!annotations) {
       annotations = {};
       let current = target;
-      while (current && !current.hasOwnProperty(StateStoreMarker)) {
+      while (current && !Object.prototype.hasOwnProperty.call(current, StateStoreMarker)) {
         Reflect.ownKeys(current).forEach((k) => {
           annotations[k] = !overrides ? true : k in overrides ? overrides[k] : true;
         });
@@ -3133,33 +3115,48 @@ class StateStore {
     };
     return mobx.makeObservable(target, annotations, { name: this.formattedName });
   }
-  serialize() {
+  serialize(format = "raw") {
     const annotations = this.serializationAnnotations;
     const serializedProps = Object.keys(annotations).reduce((accum, prop) => {
-      accum[prop] = annotations[prop].serialize(this[prop]);
+      const val = this[prop];
+      if (isDefined(val)) {
+        const serializedValue = annotations[prop].serialize(val);
+        accum[prop] = serializedValue;
+      }
       return accum;
     }, {});
-    return serializedProps;
-  }
-  deserialize(values) {
+    switch (format) {
+      case "json":
+        return JSON.stringify(serializedProps);
+      case "lz":
+        return compressToEncodedURIComponent(JSON.stringify(serializedProps));
+      default:
+        return serializedProps;
+    }
+  }
+  deserialize(value, format = "raw") {
+    let deserializedValue;
+    switch (format) {
+      case "json":
+        deserializedValue = JSON.parse(value);
+        break;
+      case "lz":
+        deserializedValue = JSON.parse(decompressFromEncodedURIComponent(value));
+        break;
+      default:
+        deserializedValue = value;
+        break;
+    }
     this.transaction(() => {
       const annotations = this.serializationAnnotations;
-      Object.keys(values).forEach((prop) => {
+      Object.keys(deserializedValue).forEach((prop) => {
         const annotation = annotations[prop];
         if (annotation) {
-          this[prop] = annotation.deserialize(values[prop], this[prop]);
+          this[prop] = annotation.deserialize(deserializedValue[prop], this[prop]);
         }
       });
     });
   }
-  startSerialization() {
-    const deserializedValues = this.serializer.deserialize();
-    this.deserialize(deserializedValues);
-    this.autorun(() => {
-      const serialiedValues = this.serialize();
-      this.serializer.serialize(serialiedValues);
-    });
-  }
   checkInitialized() {
     if (!this.initialized) {
       throw new FlowError(