@deck.gl/widgets 9.3.0-alpha.6 → 9.3.0-beta.2

package/dist/dist.dev.js

@@ -659,25 +659,65 @@ var __exports__ = (() => {
       ] });
       B(ui, rootElement);
     }
-    handleZoom(viewId, nextZoom) {
+    isOrthographicView(viewId) {
+      const deck = this.deck;
+      const view = deck?.isInitialized && deck.getView(viewId);
+      return view instanceof import_core2.OrthographicView;
+    }
+    handleZoom(viewId, delta) {
       const viewState = this.getViewState(viewId);
-      if (viewState) {
-        const { minZoom, maxZoom } = viewState;
-        if (Number.isFinite(minZoom)) {
-          nextZoom = Math.max(minZoom, nextZoom);
-        }
-        if (Number.isFinite(maxZoom)) {
-          nextZoom = Math.min(maxZoom, nextZoom);
+      const newViewState = {};
+      if (this.isOrthographicView(viewId)) {
+        const { zoomAxis } = this.props;
+        const { zoomX, minZoomX, maxZoomX, zoomY, minZoomY, maxZoomY } = normalizeOrthographicViewState(
+          viewState
+        );
+        let nextZoom;
+        let nextZoomY;
+        if (zoomAxis === "X") {
+          nextZoom = clamp(zoomX + delta, minZoomX, maxZoomX);
+          nextZoomY = zoomY;
+        } else if (zoomAxis === "Y") {
+          nextZoom = zoomX;
+          nextZoomY = clamp(zoomY + delta, minZoomY, maxZoomY);
+        } else {
+          const clampedDelta = clamp(
+            delta,
+            Math.max(minZoomX - zoomX, minZoomY - zoomY),
+            Math.min(maxZoomX - zoomX, maxZoomY - zoomY)
+          );
+          nextZoom = zoomX + clampedDelta;
+          nextZoomY = zoomY + clampedDelta;
         }
+        newViewState.zoom = [nextZoom, nextZoomY];
+        newViewState.zoomX = nextZoom;
+        newViewState.zoomY = nextZoomY;
+        this.props.onZoom?.({
+          viewId,
+          delta,
+          // `zoom` will not match the new state if using 2D zoom. Deprecated behavior for backward compatibility.
+          zoom: zoomAxis === "Y" ? nextZoomY : nextZoom,
+          zoomX: nextZoom,
+          zoomY: nextZoomY
+        });
+      } else {
+        const { zoom = 0, minZoom, maxZoom } = viewState;
+        const nextZoom = clamp(zoom + delta, minZoom, maxZoom);
+        newViewState.zoom = nextZoom;
+        this.props.onZoom?.({
+          viewId,
+          delta,
+          zoom: nextZoom
+        });
       }
       const nextViewState = {
         ...viewState,
-        zoom: nextZoom
+        ...newViewState
       };
       if (this.props.transitionDuration > 0) {
         nextViewState.transitionDuration = this.props.transitionDuration;
         nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core2.FlyToInterpolator() : new import_core2.LinearInterpolator({
-          transitionProps: ["zoom"]
+          transitionProps: "zoomX" in newViewState ? ["zoomX", "zoomY"] : ["zoom"]
         });
       }
       this.setViewState(viewId, nextViewState);
@@ -685,15 +725,13 @@ var __exports__ = (() => {
     handleZoomIn() {
       const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.id) ?? [];
       for (const viewId of viewIds) {
-        const viewState = this.getViewState(viewId);
-        this.handleZoom(viewId, viewState.zoom + 1);
+        this.handleZoom(viewId, 1);
       }
     }
     handleZoomOut() {
       const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.id) ?? [];
       for (const viewId of viewIds) {
-        const viewState = this.getViewState(viewId);
-        this.handleZoom(viewId, viewState.zoom - 1);
+        this.handleZoom(viewId, -1);
       }
     }
   };
@@ -705,8 +743,29 @@ var __exports__ = (() => {
     transitionDuration: 200,
     zoomInLabel: "Zoom In",
     zoomOutLabel: "Zoom Out",
-    viewId: null
+    zoomAxis: "all",
+    viewId: null,
+    onZoom: () => {
+    }
   };
+  function clamp(zoom, minZoom, maxZoom) {
+    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
+  }
+  function normalizeOrthographicViewState({
+    zoom = 0,
+    zoomX,
+    zoomY,
+    minZoom = -Infinity,
+    maxZoom = Infinity,
+    minZoomX = minZoom,
+    maxZoomX = maxZoom,
+    minZoomY = minZoom,
+    maxZoomY = maxZoom
+  }) {
+    zoomX = zoomX ?? (Array.isArray(zoom) ? zoom[0] : zoom);
+    zoomY = zoomY ?? (Array.isArray(zoom) ? zoom[1] : zoom);
+    return { zoomX, zoomY, minZoomX, minZoomY, maxZoomX, maxZoomY };
+  }
 
   // src/reset-view-widget.tsx
   var import_core3 = __toESM(require_core(), 1);
@@ -748,6 +807,7 @@ var __exports__ = (() => {
           // transitionDuration: this.props.transitionDuration,
           // transitionInterpolator: new FlyToInterpolator()
         };
+        this.props.onReset?.({ viewId, viewState: nextViewState });
         this.setViewState(viewId, nextViewState);
       }
     }
@@ -758,7 +818,9 @@ var __exports__ = (() => {
     placement: "top-left",
     label: "Reset View",
     initialViewState: void 0,
-    viewId: null
+    viewId: null,
+    onReset: () => {
+    }
   };
 
   // src/gimbal-widget.tsx
@@ -857,6 +919,7 @@ var __exports__ = (() => {
       const viewId = this.viewId || viewport?.id || "OrbitView";
       const viewState = this.getViewState(viewId);
       if ("rotationOrbit" in viewState || "rotationX" in viewState) {
+        this.props.onReset?.({ viewId, rotationOrbit: 0, rotationX: 0 });
         const nextViewState = {
           ...viewState,
           rotationOrbit: 0,
@@ -891,7 +954,9 @@ var __exports__ = (() => {
     viewId: null,
     label: "Gimbal",
     strokeWidth: 1.5,
-    transitionDuration: 200
+    transitionDuration: 200,
+    onReset: () => {
+    }
   };
   function normalizeAndClampAngle(angle) {
     let normalized = ((angle + 180) % 360 + 360) % 360 - 180;
@@ -975,10 +1040,14 @@ var __exports__ = (() => {
       const viewId = this.viewId || viewport.id;
       if (viewport instanceof import_core5.WebMercatorViewport) {
         const viewState = this.getViewState(viewId);
+        const resetPitch = this.getRotation(viewport)[0] === 0;
+        const nextBearing = 0;
+        const nextPitch = resetPitch ? 0 : viewport.pitch;
+        this.props.onReset?.({ viewId, bearing: nextBearing, pitch: nextPitch });
         const nextViewState = {
           ...viewState,
-          bearing: 0,
-          ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
+          bearing: nextBearing,
+          ...resetPitch ? { pitch: nextPitch } : {},
           transitionDuration: this.props.transitionDuration,
           transitionInterpolator: new import_core5.FlyToInterpolator()
         };
@@ -992,7 +1061,9 @@ var __exports__ = (() => {
     placement: "top-left",
     viewId: null,
     label: "Reset Compass",
-    transitionDuration: 200
+    transitionDuration: 200,
+    onReset: () => {
+    }
   };
 
   // src/scale-widget.tsx
@@ -1506,6 +1577,16 @@ var __exports__ = (() => {
     flyTo(viewState) {
       const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.id) ?? [];
       for (const viewId of viewIds) {
+        if ("longitude" in viewState && "latitude" in viewState) {
+          this.props.onGeocode?.({
+            viewId,
+            coordinates: {
+              longitude: viewState.longitude,
+              latitude: viewState.latitude,
+              zoom: viewState.zoom
+            }
+          });
+        }
         const currentViewState = this.getViewState(viewId);
         const nextViewState = {
           ...currentViewState,
@@ -1529,7 +1610,9 @@ var __exports__ = (() => {
     geocoder: "coordinates",
     customGeocoder: CoordinatesGeocoder,
     apiKey: "",
-    _geolocation: false
+    _geolocation: false,
+    onGeocode: () => {
+    }
   };
   function getGeocoder(props) {
     switch (props.geocoder) {
@@ -1568,6 +1651,7 @@ var __exports__ = (() => {
       document.removeEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
     }
     onRenderHTML(rootElement) {
+      const isFullscreen = this.getFullscreen();
       B(
         /* @__PURE__ */ u2(
           IconButton,
@@ -1575,8 +1659,8 @@ var __exports__ = (() => {
             onClick: () => {
               this.handleClick().catch((err) => import_core9.log.error(err)());
             },
-            label: this.fullscreen ? this.props.exitLabel : this.props.enterLabel,
-            className: this.fullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter"
+            label: isFullscreen ? this.props.exitLabel : this.props.enterLabel,
+            className: isFullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter"
           }
         ),
         rootElement
@@ -1590,21 +1674,24 @@ var __exports__ = (() => {
     getContainer() {
       return this.props.container || this.deck?.props.parent || this.deck?.getCanvas()?.parentElement;
     }
+    getFullscreen() {
+      return this.fullscreen;
+    }
     onFullscreenChange() {
-      const prevFullscreen = this.fullscreen;
       const fullscreen = document.fullscreenElement === this.getContainer();
-      if (prevFullscreen !== fullscreen) {
-        this.fullscreen = !this.fullscreen;
+      if (fullscreen !== this.fullscreen) {
+        this.fullscreen = fullscreen;
+        this.props.onFullscreenChange?.(fullscreen);
+        this.updateHTML();
       }
-      this.updateHTML();
     }
     async handleClick() {
-      if (this.fullscreen) {
+      const isFullscreen = this.getFullscreen();
+      if (isFullscreen) {
         await this.exitFullscreen();
       } else {
         await this.requestFullscreen();
       }
-      this.updateHTML();
     }
     async requestFullscreen() {
       const container = this.getContainer();
@@ -1623,6 +1710,9 @@ var __exports__ = (() => {
     }
     togglePseudoFullscreen() {
       this.getContainer()?.classList.toggle("deck-pseudo-fullscreen");
+      this.fullscreen = !this.fullscreen;
+      this.props.onFullscreenChange?.(this.fullscreen);
+      this.updateHTML();
     }
   };
   FullscreenWidget.defaultProps = {
@@ -1632,7 +1722,9 @@ var __exports__ = (() => {
     viewId: null,
     enterLabel: "Enter Fullscreen",
     exitLabel: "Exit Fullscreen",
-    container: void 0
+    container: void 0,
+    onFullscreenChange: () => {
+    }
   };
 
   // src/splitter-widget.tsx
@@ -1885,7 +1977,7 @@ var __exports__ = (() => {
     bottom: "top",
     top: "bottom"
   };
-  function clamp(start, value, end) {
+  function clamp2(start, value, end) {
     return max(start, min(value, end));
   }
   function evaluate(value, param) {
@@ -2245,7 +2337,7 @@ var __exports__ = (() => {
       const min$1 = minPadding;
       const max2 = clientSize - arrowDimensions[length] - maxPadding;
       const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-      const offset3 = clamp(min$1, center, max2);
+      const offset3 = clamp2(min$1, center, max2);
       const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset3 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
       const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
       return {
@@ -2483,14 +2575,14 @@ var __exports__ = (() => {
           const maxSide = mainAxis === "y" ? "bottom" : "right";
           const min2 = mainAxisCoord + overflow[minSide];
           const max2 = mainAxisCoord - overflow[maxSide];
-          mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+          mainAxisCoord = clamp2(min2, mainAxisCoord, max2);
         }
         if (checkCrossAxis) {
           const minSide = crossAxis === "y" ? "top" : "left";
           const maxSide = crossAxis === "y" ? "bottom" : "right";
           const min2 = crossAxisCoord + overflow[minSide];
           const max2 = crossAxisCoord - overflow[maxSide];
-          crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+          crossAxisCoord = clamp2(min2, crossAxisCoord, max2);
         }
         const limitedCoords = limiter.fn({
           ...state,
@@ -3708,7 +3800,7 @@ var __exports__ = (() => {
 
   // src/lib/components/range-input.tsx
   var wheelListenerOptions = { passive: false };
-  var clamp2 = (value, min2, max2) => {
+  var clamp3 = (value, min2, max2) => {
     if (value < min2) {
       return min2;
     }
@@ -3764,7 +3856,7 @@ var __exports__ = (() => {
     const range = max2 - min2;
     const rangeSize = Math.max(0, value[1] - value[0]);
     const maxStart = Math.max(0, range - rangeSize);
-    const clampedStart = clamp2(value[0], min2, min2 + maxStart);
+    const clampedStart = clamp3(value[0], min2, min2 + maxStart);
     const { thumbLength, thumbOffset } = T2(() => {
       if (trackLength <= 0 || range <= 0) {
         return { thumbLength: 0, thumbOffset: 0 };
@@ -3774,7 +3866,7 @@ var __exports__ = (() => {
       }
       const nextThumbLength = rangeSize / range;
       const travel = Math.max(0, 1 - nextThumbLength);
-      const ratio = maxStart <= 0 ? 0 : clamp2((clampedStart - min2) / maxStart, 0, 1);
+      const ratio = maxStart <= 0 ? 0 : clamp3((clampedStart - min2) / maxStart, 0, 1);
       return {
         thumbLength: Math.max(0, Math.min(nextThumbLength, 1)),
         thumbOffset: travel * ratio
@@ -3785,7 +3877,7 @@ var __exports__ = (() => {
         if (!onChange) {
           return;
         }
-        const clamped = clamp2(nextStart, min2, min2 + maxStart);
+        const clamped = clamp3(nextStart, min2, min2 + maxStart);
         onChange([clamped, clamped + rangeSize]);
       },
       [onChange, min2, maxStart, rangeSize]
@@ -3823,7 +3915,7 @@ var __exports__ = (() => {
         const coordinate = vertical ? event.clientY - trackStart : event.clientX - trackStart;
         const span = Math.max(1, 1 - thumbLength) * trackLength;
         const thumbCenter = thumbLength / 2 * trackLength;
-        const ratio = span <= 0 ? 0 : clamp2((coordinate - thumbCenter) / span, 0, 1);
+        const ratio = span <= 0 ? 0 : clamp3((coordinate - thumbCenter) / span, 0, 1);
         emitRange(min2 + ratio * maxStart);
       },
       [vertical, trackLength, thumbLength, emitRange, min2, maxStart]
@@ -3858,7 +3950,7 @@ var __exports__ = (() => {
         const coordinate = vertical ? event.clientY : event.clientX;
         const delta = coordinate - state.startCoord;
         const ratio = state.startRatio + delta / trackLength2;
-        const nextStart = clamp2(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
+        const nextStart = clamp3(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
         emitRange(nextStart);
         event.preventDefault();
       },
@@ -4048,7 +4140,7 @@ var __exports__ = (() => {
   }
 
   // src/scrollbar-widget.tsx
-  var clamp3 = (value, min2, max2) => {
+  var clamp4 = (value, min2, max2) => {
     if (value < min2) {
       return min2;
     }
@@ -4177,7 +4269,7 @@ var __exports__ = (() => {
     }
     getClampedOffset() {
       const maxScroll = this.getMaxScroll();
-      return clamp3(this.scrollOffset, 0, maxScroll);
+      return clamp4(this.scrollOffset, 0, maxScroll);
     }
     isVertical() {
       return this.props.orientation !== "horizontal";
@@ -4196,7 +4288,7 @@ var __exports__ = (() => {
     }
     emitScroll(next) {
       const maxScroll = this.getMaxScroll();
-      const target = clamp3(Math.round(next), 0, maxScroll);
+      const target = clamp4(Math.round(next), 0, maxScroll);
       const viewport = this.viewport;
       if (viewport && target !== this.getClampedOffset()) {
         const pixel = viewport.project(viewport.position);
@@ -4429,20 +4521,27 @@ var __exports__ = (() => {
       this.id = "timeline";
       this.className = "deck-widget-timeline";
       this.placement = "fill";
-      this.playing = false;
+      this._playing = false;
       this.timerId = null;
       this.handlePlayPause = () => {
-        if (this.playing) {
-          this.stop();
-        } else {
-          this.play();
+        const isPlaying = this.getPlaying();
+        const nextPlaying = !isPlaying;
+        this.props.onPlayingChange?.(nextPlaying);
+        if (this.props.playing === void 0) {
+          if (nextPlaying) {
+            this.play();
+          } else {
+            this.stop();
+          }
         }
       };
       this.handleTimeChange = ([value]) => {
-        this.currentTime = value;
-        this.props.timeline?.setTime(value);
         this.props.onTimeChange(value);
-        this.updateHTML();
+        if (this.props.time === void 0) {
+          this.currentTime = value;
+          this.props.timeline?.setTime(value);
+          this.updateHTML();
+        }
       };
       this.tick = () => {
         const {
@@ -4451,51 +4550,90 @@ var __exports__ = (() => {
           loop
         } = this.props;
         if (step > 0) {
-          let next = Math.round(this.currentTime / step) * step + step;
+          const currentTime = this.getTime();
+          let next = Math.round(currentTime / step) * step + step;
           if (next > max2) {
-            if (this.currentTime < max2) {
+            if (currentTime < max2) {
               next = max2;
             } else if (loop) {
               next = min2;
             } else {
               next = max2;
-              this.playing = false;
+              this._playing = false;
+              this.props.onPlayingChange?.(false);
             }
           }
-          this.currentTime = next;
           this.props.onTimeChange(next);
+          if (this.props.time === void 0) {
+            this.currentTime = next;
+            this.props.timeline?.setTime(next);
+          }
           this.updateHTML();
         }
-        if (this.playing) {
+        if (this._playing) {
           this.timerId = window.setTimeout(this.tick, this.props.playInterval);
         } else {
           this.timerId = null;
         }
       };
       this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
-      this.props.timeline?.setTime(this.currentTime);
+      const syncTime = this.props.time ?? this.currentTime;
+      this.props.timeline?.setTime(syncTime);
       this.setProps(this.props);
     }
+    /**
+     * Returns the current time value.
+     * In controlled mode, returns the time prop.
+     * In uncontrolled mode, returns the internal state.
+     */
+    getTime() {
+      return this.props.time ?? this.currentTime;
+    }
+    /**
+     * Returns the current playing state.
+     * In controlled mode, returns the playing prop.
+     * In uncontrolled mode, returns the internal state.
+     */
+    getPlaying() {
+      return this.props.playing ?? this._playing;
+    }
     setProps(props) {
+      const { playing: prevPlaying, time: prevTime } = this.props;
       this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
+      if (props.time !== void 0 && props.time !== prevTime) {
+        this.props.timeline?.setTime(props.time);
+      }
+      if (props.playing !== void 0 && props.playing !== prevPlaying) {
+        if (props.playing && !this._playing) {
+          this._startTimer();
+        } else if (!props.playing && this._playing) {
+          this._stopTimer();
+        }
+      }
     }
     onAdd() {
-      this.playing = false;
+      this._playing = false;
       this.timerId = null;
-      if (this.props.autoPlay)
-        this.play();
+      if (this.props.autoPlay) {
+        if (this.props.playing !== void 0) {
+          this.props.onPlayingChange?.(true);
+        } else {
+          this.play();
+        }
+      }
     }
     onRemove() {
       this.stop();
     }
     onRenderHTML(rootElement) {
       const { timeRange, step, formatLabel } = this.props;
-      const currentTime = this.currentTime;
+      const isPlaying = this.getPlaying();
+      const currentTime = this.getTime();
       rootElement.dataset.placement = this.props.placement;
       B(
         /* @__PURE__ */ u2("div", { className: "deck-widget-button-group", children: [
-          this.playing ? /* @__PURE__ */ u2(
+          isPlaying ? /* @__PURE__ */ u2(
             IconButton,
             {
               label: "Pause",
@@ -4532,24 +4670,34 @@ var __exports__ = (() => {
       );
     }
     play() {
-      this.playing = true;
+      this._playing = true;
       const {
         timeRange: [min2, max2]
       } = this.props;
-      if (this.currentTime >= max2) {
+      if (this.props.time === void 0 && this.getTime() >= max2) {
         this.currentTime = min2;
         this.props.onTimeChange(min2);
+        this.props.timeline?.setTime(min2);
       }
       this.updateHTML();
       this.tick();
     }
     stop() {
-      this.playing = false;
+      this._stopTimer();
+      this.updateHTML();
+    }
+    /** Start the playback timer (used internally) */
+    _startTimer() {
+      this._playing = true;
+      this.tick();
+    }
+    /** Stop the playback timer (used internally) */
+    _stopTimer() {
+      this._playing = false;
       if (this.timerId !== null) {
         window.clearTimeout(this.timerId);
         this.timerId = null;
       }
-      this.updateHTML();
     }
   };
   TimelineWidget.defaultProps = {
@@ -4561,11 +4709,15 @@ var __exports__ = (() => {
     timeRange: [0, 100],
     step: 1,
     initialTime: void 0,
+    time: void 0,
     onTimeChange: () => {
     },
     autoPlay: false,
     loop: false,
     playInterval: 1e3,
+    playing: void 0,
+    onPlayingChange: () => {
+    },
     formatLabel: String
   };
 
@@ -4760,53 +4912,72 @@ var __exports__ = (() => {
     }
     // eslint-disable-next-line complexity
     setProps(props) {
-      const { lightModeTheme, darkModeTheme } = this.props;
+      const { lightModeTheme, darkModeTheme, themeMode: prevThemeMode } = this.props;
       this.placement = props.placement ?? this.placement;
       this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
-      switch (this.themeMode) {
+      const currentMode = this.getThemeMode();
+      if (props.themeMode !== void 0 && props.themeMode !== prevThemeMode) {
+        this._applyTheme(props.themeMode);
+        return;
+      }
+      switch (currentMode) {
         case "light":
           if (props.lightModeTheme && !(0, import_core21._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
-            this._setThemeMode("light");
+            this._applyTheme("light");
           }
           break;
         case "dark":
           if (props.darkModeTheme && !(0, import_core21._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
-            this._setThemeMode("dark");
+            this._applyTheme("dark");
           }
           break;
         default:
-          import_core21.log.warn(`Invalid theme mode ${this.themeMode}`)();
+          import_core21.log.warn(`Invalid theme mode ${currentMode}`)();
       }
     }
     onRenderHTML(rootElement) {
       const { lightModeLabel, darkModeLabel } = this.props;
+      const currentMode = this.getThemeMode();
       B(
         /* @__PURE__ */ u2(
           IconButton,
           {
             onClick: this._handleClick.bind(this),
-            label: this.themeMode === "dark" ? darkModeLabel : lightModeLabel,
-            className: this.themeMode === "dark" ? "deck-widget-moon" : "deck-widget-sun"
+            label: currentMode === "dark" ? darkModeLabel : lightModeLabel,
+            className: currentMode === "dark" ? "deck-widget-moon" : "deck-widget-sun"
           }
         ),
         rootElement
       );
     }
     onAdd() {
-      this._setThemeMode(this.themeMode);
+      this._applyTheme(this.getThemeMode());
+    }
+    /**
+     * Returns the current theme mode.
+     * In controlled mode, returns the themeMode prop.
+     * In uncontrolled mode, returns the internal state.
+     */
+    getThemeMode() {
+      return this.props.themeMode ?? this.themeMode;
     }
     _handleClick() {
-      const newThemeMode = this.themeMode === "dark" ? "light" : "dark";
-      this._setThemeMode(newThemeMode);
+      const currentMode = this.getThemeMode();
+      const nextMode = currentMode === "dark" ? "light" : "dark";
+      this.props.onThemeModeChange?.(nextMode);
+      if (this.props.themeMode === void 0) {
+        this.themeMode = nextMode;
+        this._applyTheme(nextMode);
+      }
     }
-    _setThemeMode(themeMode) {
-      this.themeMode = themeMode;
+    /** Apply theme styling without changing internal state */
+    _applyTheme(themeMode) {
       const container = this.rootElement?.closest(".deck-widget-container");
       if (container) {
         const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
         (0, import_core21._applyStyles)(container, themeStyle);
-        const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
+        const label = themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
         import_core21.log.log(1, `Switched theme to ${label}`, themeStyle)();
         this.updateHTML();
       }
@@ -4832,7 +5003,10 @@ var __exports__ = (() => {
     lightModeTheme: LightGlassTheme,
     darkModeLabel: "Dark Mode",
     darkModeTheme: DarkGlassTheme,
-    initialThemeMode: "auto"
+    initialThemeMode: "auto",
+    themeMode: void 0,
+    onThemeModeChange: () => {
+    }
   };
 
   // src/loading-widget.tsx
@@ -4868,6 +5042,7 @@ var __exports__ = (() => {
       const loading = layers.some((layer) => !layer.isLoaded);
       if (loading !== this.loading) {
         this.loading = loading;
+        this.props.onLoadingChange?.(loading);
         this.updateHTML();
       }
     }
@@ -4880,7 +5055,9 @@ var __exports__ = (() => {
     id: "loading",
     placement: "top-left",
     viewId: null,
-    label: "Loading layer data"
+    label: "Loading layer data",
+    onLoadingChange: () => {
+    }
   };
 
   // src/stats-widget.tsx
@@ -4907,19 +5084,31 @@ var __exports__ = (() => {
       this.className = "deck-widget-stats";
       this.placement = "top-left";
       this._counter = 0;
-      this.collapsed = true;
-      this._toggleCollapsed = () => {
-        this.collapsed = !this.collapsed;
-        this.updateHTML();
+      this._expanded = false;
+      this._toggleExpanded = () => {
+        const nextExpanded = !this.getExpanded();
+        this.props.onExpandedChange?.(nextExpanded);
+        if (this.props.expanded === void 0) {
+          this._expanded = nextExpanded;
+          this.updateHTML();
+        }
       };
       this._getFps = () => {
         return Math.round(this.deck?.metrics.fps ?? 0);
       };
       this._formatters = { ...DEFAULT_FORMATTERS };
       this._resetOnUpdate = { ...this.props.resetOnUpdate };
-      this.collapsed = !props.defaultIsExpanded;
+      this._expanded = Boolean(props.initialExpanded);
       this.setProps(props);
     }
+    /**
+     * Returns the current expanded state.
+     * In controlled mode, returns the expanded prop.
+     * In uncontrolled mode, returns the internal state.
+     */
+    getExpanded() {
+      return this.props.expanded ?? this._expanded;
+    }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
       this.viewId = props.viewId ?? this.viewId;
@@ -4940,9 +5129,9 @@ var __exports__ = (() => {
       }
     }
     onRenderHTML(rootElement) {
-      const collapsed = this.collapsed;
-      if (collapsed) {
-        B(/* @__PURE__ */ u2(FpsIcon, { getFps: this._getFps, onClick: this._toggleCollapsed }), rootElement);
+      const isExpanded = this.getExpanded();
+      if (!isExpanded) {
+        B(/* @__PURE__ */ u2(FpsIcon, { getFps: this._getFps, onClick: this._toggleExpanded }), rootElement);
         return;
       }
       const stats = this._getStats();
@@ -4969,7 +5158,7 @@ var __exports__ = (() => {
             {
               className: "deck-widget-stats-header",
               style: { cursor: "pointer", pointerEvents: "auto" },
-              onClick: this._toggleCollapsed,
+              onClick: this._toggleExpanded,
               children: [
                 /* @__PURE__ */ u2("b", { children: title }),
                 deviceLabel && /* @__PURE__ */ u2("span", { className: "deck-widget-stats-device", children: deviceLabel }),
@@ -4983,7 +5172,7 @@ var __exports__ = (() => {
       );
     }
     onRedraw() {
-      if (!this.collapsed) {
+      if (this.getExpanded()) {
         const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
         if (this._counter++ % framesPerUpdate === 0) {
           this.updateHTML();
@@ -5036,13 +5225,16 @@ var __exports__ = (() => {
     type: "deck",
     placement: "top-left",
     viewId: null,
-    defaultIsExpanded: false,
+    initialExpanded: false,
     stats: void 0,
     title: "Stats",
     framesPerUpdate: 1,
     formatters: {},
     resetOnUpdate: {},
-    id: "stats"
+    id: "stats",
+    expanded: void 0,
+    onExpandedChange: () => {
+    }
   };
   function FpsIcon({ getFps, onClick }) {
     const [fps, setFps] = h2(getFps());