@deck.gl/widgets 9.1.12 → 9.2.0-alpha.2

package/src/stylesheet.css

@@ -35,7 +35,7 @@
   flex-direction: column;
 }
 
-/* Common button styles */
+/* Common button background styles */
 .deck-widget-button-group button,
 .deck-widget-button button {
   width: calc(var(--button-size, 28px) - 2px);
@@ -79,7 +79,7 @@
   border-bottom-left-radius: 0;
 }
 
-/* Icon button styles */
+/* Icon button foreground styles */
 .deck-widget button .deck-widget-icon {
   background-color: var(--button-icon-idle, #616166);
   background-position: 50%;
@@ -116,6 +116,16 @@
   );
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.deck-widget.deck-widget-loading button.deck-widget-spinner-icon .deck-widget-icon {
+  animation: spin 1s linear infinite;
+}
+
 .deck-pseudo-fullscreen {
   height: 100% !important;
   left: 0 !important;
@@ -152,10 +162,117 @@
 .deck-widget.deck-widget-screenshot button.deck-widget-camera .deck-widget-icon {
   mask-image: var(
     --icon-camera,
-    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
   );
   -webkit-mask-image: var(
     --icon-camera,
-    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
+  );
+}
+
+/* Theme widget styles */
+.deck-widget.deck-widget-theme button.deck-widget-sun .deck-widget-icon {
+  mask-image: var(
+    --icon-sun,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="black" stroke="black"><g ><circle cx="12" cy="12" r="6" /><line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" /><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /><line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" /><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /></g></svg>')
   );
 }
+
+.deck-widget.deck-widget-theme button.deck-widget-moon .deck-widget-icon {
+  mask-image: var(
+    --icon-moon,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" ><circle cx="12" cy="12" r="6" fill="black" mask="url(%23moon-mask)" /><mask id="moon-mask" viewBox="0 0 24 24" ><rect x="0" y="0" width="24" height="24" fill="white" /><circle cx="24" cy="10" r="12" fill="black"/></mask></svg>')
+  );
+  -webbit-mask-image: var(
+    --icon-moon,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><circle x="12" cy="12" r="6" /></svg>')
+  );
+}
+
+/* Reset view styles */
+.deck-widget.deck-widget-reset-view button.deck-widget-reset-focus .deck-widget-icon {
+  mask-image: var(
+    --icon-camera,
+      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-camera,
+      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/></svg>')
+  );
+}
+ 
+/* Timeline widget styles */
+.deck-widget.deck-widget-timeline {
+  display: flex;
+  align-items: center;
+  pointer-events: 'auto';
+}
+
+.deck-widget.deck-widget-timeline .timeline-slider {
+  margin: 0 8px;
+  flex: 1;
+  pointer-events: 'auto';
+  cursor: pointer;
+}
+
+.deck-widget.deck-widget-timeline button.timeline-play-pause {
+  background: var(--button-background, #fff);
+  border: var(--button-inner-stroke, unset);
+  border-radius: var(--button-corner-radius, 4px);
+  width: var(--button-size, 28px);
+  height: var(--button-size, 28px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  pointer-events: 'auto';
+}
+
+.deck-widget-spinner-icon {
+  mask-image: var(
+    --loading-icon, 
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>')
+  );
+  -webkit-mask-image: var(
+    --loading-icon,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>')
+  );
+}
+
+.deck-widget .deck-widget-scale {
+  background-color: var(--button-icon-idle, #616166);
+  background-position: 50%;
+  display: block;
+}
+
+.deck-widget .deck-widget-geolocate {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/**
+ * Reusable styles for widgets
+ */
+.deck-widget-common {
+  font-family:
+    'SF Mono',
+    /* macOS */
+    'Menlo',
+    /* macOS */
+    'Consolas',
+    /* Windows */
+    'DejaVu Sans Mono',
+    /* Linux */
+    'Liberation Mono',
+    /* Linux */
+    monospace;
+  background-color: var(--button-background, #fff);
+  color: #333;
+}
+
+.deck-widget-stats-container {
+  font-size: 0.7rem;
+  /* Approximately 14px */
+  line-height: 1.6;
+}

package/src/theme-widget.tsx

@@ -0,0 +1,120 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {log, _deepEqual as deepEqual, _applyStyles as applyStyles} from '@deck.gl/core';
+import {Widget, WidgetProps, WidgetPlacement} from '@deck.gl/core';
+import {render} from 'preact';
+// import {useCallback} from 'preact/hooks';
+import {IconButton} from './lib/components/icon-button';
+import type {DeckWidgetTheme} from './themes';
+import {LightGlassTheme, DarkGlassTheme} from './themes';
+
+export type ThemeWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'top-left'. */
+  placement?: WidgetPlacement;
+  /** Tooltip message when dark mode is selected. */
+  lightModeLabel?: string;
+  /** Styles for light mode theme */
+  lightModeTheme?: DeckWidgetTheme;
+  /** Tooltip message when light mode is selected. */
+  darkModeLabel?: string;
+  /** Styles for dark mode theme */
+  darkModeTheme?: DeckWidgetTheme;
+  /** Initial theme mode. 'auto' reads the browser default setting */
+  initialThemeMode?: 'auto' | 'light' | 'dark';
+};
+
+export class ThemeWidget extends Widget<ThemeWidgetProps> {
+  static defaultProps: Required<ThemeWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'theme',
+    placement: 'top-left',
+    lightModeLabel: 'Light Mode',
+    lightModeTheme: LightGlassTheme,
+    darkModeLabel: 'Dark Mode',
+    darkModeTheme: DarkGlassTheme,
+    initialThemeMode: 'auto'
+  };
+
+  className = 'deck-widget-theme';
+  placement: WidgetPlacement = 'top-left';
+  themeMode: 'light' | 'dark' = 'dark';
+
+  constructor(props: ThemeWidgetProps = {}) {
+    super(props, ThemeWidget.defaultProps);
+    this.placement = props.placement ?? this.placement;
+    this.themeMode = this._getInitialThemeMode();
+  }
+
+  // eslint-disable-next-line complexity
+  setProps(props: Partial<ThemeWidgetProps>) {
+    const {lightModeTheme, darkModeTheme} = this.props;
+    this.placement = props.placement ?? this.placement;
+    super.setProps(props);
+
+    // Update if current theme definition changed
+    switch (this.themeMode) {
+      case 'light':
+        if (props.lightModeTheme && !deepEqual(props.lightModeTheme, lightModeTheme, 1)) {
+          this._setThemeMode('light');
+        }
+        break;
+      case 'dark':
+        if (props.darkModeTheme && !deepEqual(props.darkModeTheme, darkModeTheme, 1)) {
+          this._setThemeMode('dark');
+        }
+        break;
+    }
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const {lightModeLabel, darkModeLabel} = this.props;
+    // const onClick = useCallback(this._handleClick.bind(this), [this._handleClick]);
+
+    render(
+      <IconButton
+        onClick={this._handleClick.bind(this)}
+        label={this.themeMode === 'dark' ? darkModeLabel : lightModeLabel}
+        className={this.themeMode === 'dark' ? 'deck-widget-moon' : 'deck-widget-sun'}
+      />,
+      rootElement
+    );
+  }
+
+  onAdd() {
+    // Note: theme styling is applied in here onAdd() once DOM element is created
+    this._setThemeMode(this.themeMode);
+  }
+
+  _handleClick() {
+    const newThemeMode = this.themeMode === 'dark' ? 'light' : 'dark';
+    this._setThemeMode(newThemeMode);
+  }
+
+  _setThemeMode(themeMode: 'light' | 'dark') {
+    this.themeMode = themeMode;
+    const container = this.rootElement?.closest<HTMLDivElement>('.deck-widget-container');
+    if (container) {
+      const themeStyle =
+        themeMode === 'dark' ? this.props.darkModeTheme : this.props.lightModeTheme;
+      applyStyles(container, themeStyle);
+
+      const label =
+        this.themeMode === 'dark' ? this.props.darkModeLabel : this.props.lightModeLabel;
+      log.log(1, `Switched theme to ${label}`, themeStyle);
+
+      this.updateHTML();
+    }
+  }
+
+  /** Read browser preference */
+  _getInitialThemeMode(): 'light' | 'dark' {
+    const {initialThemeMode} = this.props;
+    return initialThemeMode === 'auto'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+      : initialThemeMode;
+  }
+}

package/src/themes.ts

@@ -2,7 +2,31 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+/**
+ * A Deck Theme is a set of CSS variables that control CSS styling of the official widgets.
+ */
+export type DeckWidgetTheme = {
+  // layout
+  '--widget-margin'?: string;
+  // button and button group
+  '--button-size'?: string;
+  '--button-corner-radius'?: string;
+  '--button-background'?: string;
+  '--button-stroke'?: string;
+  '--button-inner-stroke'?: string;
+  '--button-shadow'?: string;
+  '--button-backdrop-filter'?: string;
+  '--button-icon-idle'?: string;
+  '--button-icon-hover'?: string;
+  // inter-icon color
+  '--icon-compass-north-color'?: string;
+  '--icon-compass-south-color'?: string;
+};
+
 export const LightTheme = {
+  '--widget-margin': '12px',
+  '--button-size': '28px',
+  '--button-corner-radius': '8px',
   '--button-background': '#fff',
   '--button-stroke': 'rgba(255, 255, 255, 0.3)',
   '--button-inner-stroke': 'unset',
@@ -10,11 +34,14 @@ export const LightTheme = {
   '--button-backdrop-filter': 'unset',
   '--button-icon-idle': 'rgba(97, 97, 102, 1)',
   '--button-icon-hover': 'rgba(24, 24, 26, 1)',
-  '--icon-compass-north-color': '#F05C44',
-  '--icon-compass-south-color': '#C2C2CC'
-};
+  '--icon-compass-north-color': 'rgb(240, 92, 68)',
+  '--icon-compass-south-color': 'rgb(204, 204, 204)'
+} as const satisfies Required<DeckWidgetTheme>;
 
 export const DarkTheme = {
+  '--widget-margin': '12px',
+  '--button-size': '28px',
+  '--button-corner-radius': '8px',
   '--button-background': 'rgba(18, 18, 20, 1)',
   '--button-stroke': 'rgba(18, 18, 20, 0.30)',
   '--button-inner-stroke': 'unset',
@@ -22,11 +49,14 @@ export const DarkTheme = {
   '--button-backdrop-filter': 'unset',
   '--button-icon-idle': 'rgba(158, 157, 168, 1)',
   '--button-icon-hover': 'rgba(215, 214, 229, 1)',
-  '--icon-compass-north-color': '#F05C44',
-  '--icon-compass-south-color': '#C2C2CC'
-};
+  '--icon-compass-north-color': 'rgb(240, 92, 68)',
+  '--icon-compass-south-color': 'rgb(200, 199, 209)'
+} as const satisfies Required<DeckWidgetTheme>;
 
 export const LightGlassTheme = {
+  '--widget-margin': '12px',
+  '--button-size': '28px',
+  '--button-corner-radius': '8px',
   '--button-background': 'rgba(255, 255, 255, 0.6)',
   '--button-stroke': 'rgba(255, 255, 255, 0.3)',
   '--button-inner-stroke': '1px solid rgba(255, 255, 255, 0.6)',
@@ -35,11 +65,14 @@ export const LightGlassTheme = {
   '--button-backdrop-filter': 'blur(4px)',
   '--button-icon-idle': 'rgba(97, 97, 102, 1)',
   '--button-icon-hover': 'rgba(24, 24, 26, 1)',
-  '--icon-compass-north-color': '#F05C44',
-  '--icon-compass-south-color': '#C2C2CC'
-};
+  '--icon-compass-north-color': 'rgb(240, 92, 68)',
+  '--icon-compass-south-color': 'rgb(204, 204, 204)'
+} as const satisfies Required<DeckWidgetTheme>;
 
 export const DarkGlassTheme = {
+  '--widget-margin': '12px',
+  '--button-size': '28px',
+  '--button-corner-radius': '8px',
   '--button-background': 'rgba(18, 18, 20, 0.75)',
   '--button-stroke': 'rgba(18, 18, 20, 0.30)',
   '--button-inner-stroke': '1px solid rgba(18, 18, 20, 0.75)',
@@ -48,6 +81,6 @@ export const DarkGlassTheme = {
   '--button-backdrop-filter': 'blur(4px)',
   '--button-icon-idle': 'rgba(158, 157, 168, 1)',
   '--button-icon-hover': 'rgba(215, 214, 229, 1)',
-  '--icon-compass-north-color': '#F05C44',
-  '--icon-compass-south-color': '#C2C2CC'
-};
+  '--icon-compass-north-color': 'rgb(240, 92, 68)',
+  '--icon-compass-south-color': 'rgb(200, 199, 209)'
+} as const satisfies Required<DeckWidgetTheme>;

package/src/timeline-widget.tsx

@@ -0,0 +1,155 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Widget, type WidgetPlacement} from '@deck.gl/core';
+import {render} from 'preact';
+
+export type TimelineWidgetProps = {
+  /**
+   * Widget id
+   */
+  id?: string;
+  /**
+   * CSS inline style overrides.
+   */
+  style?: Partial<CSSStyleDeclaration>;
+  /**
+   * Additional CSS class.
+   */
+  className?: string;
+  /**
+   * Widget placement.
+   */
+  placement?: WidgetPlacement;
+  /**
+   * Slider timeRange [min, max].
+   */
+  timeRange?: [number, number];
+  /**
+   * Slider step.
+   */
+  step?: number;
+  /**
+   * Initial slider value.
+   */
+  initialTime?: number;
+  /**
+   * Callback when value changes.
+   */
+  onTimeChange?: (value: number) => void;
+  /**
+   * Play interval in milliseconds.
+   */
+  playInterval?: number;
+};
+
+export class TimelineWidget extends Widget<TimelineWidgetProps> {
+  id = 'timeline';
+  className = 'deck-widget-timeline';
+  placement: WidgetPlacement = 'bottom-left';
+
+  private playing = false;
+  private timerId: number | null = null;
+  currentTime: number;
+
+  static defaultProps: Required<TimelineWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'timeline',
+    placement: 'bottom-left' as const,
+    timeRange: [0, 100],
+    step: 1,
+    initialTime: undefined!,
+    onTimeChange: () => {},
+    playInterval: 1000
+  };
+
+  constructor(props: TimelineWidgetProps = {}) {
+    super(props, TimelineWidget.defaultProps);
+    this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+  }
+
+  setProps(props: Partial<TimelineWidgetProps>): void {
+    this.placement = props.placement || this.placement;
+    super.setProps(props);
+  }
+
+  onAdd(): void {
+    this.playing = false;
+    this.timerId = null;
+  }
+
+  onRemove(): void {
+    this.stop();
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    render(
+      <div style={{display: 'flex', alignItems: 'center', pointerEvents: 'auto'}}>
+        <button
+          type="button"
+          className="timeline-play-pause"
+          title={this.playing ? 'Pause' : 'Play'}
+          onClick={this.handlePlayPause}
+        >
+          {this.playing ? '⏸' : '▶'}
+        </button>
+        <input
+          type="range"
+          className="timeline-slider"
+          min={this.props.timeRange[0]}
+          max={this.props.timeRange[1]}
+          step={this.props.step}
+          value={this.currentTime}
+          onInput={this.handleSliderChange}
+        />
+      </div>,
+      rootElement
+    );
+  }
+
+  private handlePlayPause = (): void => {
+    if (this.playing) {
+      this.stop();
+    } else {
+      this.start();
+    }
+  };
+
+  private handleSliderChange = (e: Event): void => {
+    const input = e.target as HTMLInputElement;
+    const val = Number(input.value);
+    this.currentTime = val;
+    this.props.onTimeChange(val);
+    this.updateHTML();
+  };
+
+  private start(): void {
+    this.playing = true;
+    this.updateHTML();
+    this.tick();
+  }
+
+  private stop(): void {
+    this.playing = false;
+    if (this.timerId !== null) {
+      window.clearTimeout(this.timerId);
+      this.timerId = null;
+    }
+    this.updateHTML();
+  }
+
+  private tick = (): void => {
+    const [min, max] = this.props.timeRange;
+    let next = this.currentTime + this.props.step;
+    if (next > max) {
+      next = min;
+    }
+    this.currentTime = next;
+    this.props.onTimeChange(next);
+    this.updateHTML();
+    if (this.playing) {
+      this.timerId = window.setTimeout(this.tick, this.props.playInterval);
+    }
+  };
+}

package/src/view-selector-widget.tsx

@@ -0,0 +1,108 @@
+// ViewSelectorWidget.tsx
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {render, JSX} from 'preact';
+import {Widget, type WidgetProps, type WidgetPlacement} from '@deck.gl/core';
+import {IconMenu} from './lib/components/icon-menu';
+
+/** The available view modes */
+export type ViewMode = 'single' | 'split-horizontal' | 'split-vertical';
+
+/** Properties for the ViewSelectorWidget */
+export type ViewSelectorWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'top-left'. */
+  placement?: WidgetPlacement;
+  /** Tooltip label */
+  label?: string;
+  /** The initial view mode. Defaults to 'single'. */
+  initialViewMode?: ViewMode;
+  /** Callback invoked when the view mode changes */
+  onViewModeChange?: (mode: ViewMode) => void;
+};
+
+/**
+ * A widget that renders a popup menu for selecting a view mode.
+ * It displays a button with the current view mode icon. Clicking the button
+ * toggles a popup that shows three icons for:
+ * - Single view
+ * - Two views, split horizontally
+ * - Two views, split vertically
+ */
+export class ViewSelectorWidget extends Widget<ViewSelectorWidgetProps> {
+  static defaultProps: Required<ViewSelectorWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'view-selector-widget',
+    placement: 'top-left',
+    label: 'Split View',
+    initialViewMode: 'single',
+    onViewModeChange: (viewMode: string) => {
+      // eslint-disable-next-line no-console
+      console.log(viewMode);
+    }
+  };
+
+  className = 'deck-widget-view-selector';
+  placement: WidgetPlacement = 'top-left';
+  viewMode: ViewMode;
+
+  constructor(props: ViewSelectorWidgetProps = {}) {
+    super(props, ViewSelectorWidget.defaultProps);
+    this.placement = this.props.placement;
+    this.viewMode = this.props.initialViewMode;
+  }
+
+  setProps(props: Partial<ViewSelectorWidgetProps>) {
+    super.setProps(props);
+    this.placement = props.placement ?? this.placement;
+  }
+
+  onRenderHTML(rootElement: HTMLElement) {
+    render(
+      <IconMenu<ViewMode>
+        className="deck-widget-view-selector"
+        menuItems={MENU_ITEMS}
+        initialItem={this.props.initialViewMode}
+        onItemSelected={this.handleSelectMode}
+      />,
+      rootElement
+    );
+  }
+
+  handleSelectMode = (viewMode: ViewMode) => {
+    this.viewMode = viewMode;
+    this.updateHTML();
+  };
+}
+
+// Define common icon style.
+const ICON_STYLE = {width: '24px', height: '24px'};
+
+// Define inline SVG icons for each view mode.
+const ICONS: Record<ViewMode, () => JSX.Element> = {
+  single: () => (
+    <svg width="24" height="24" style={ICON_STYLE}>
+      <rect x="4" y="4" width="16" height="16" stroke="black" fill="none" strokeWidth="2" />
+    </svg>
+  ),
+  'split-horizontal': () => (
+    <svg width="24" height="24" style={ICON_STYLE}>
+      <rect x="4" y="4" width="16" height="7" stroke="black" fill="none" strokeWidth="2" />
+      <rect x="4" y="13" width="16" height="7" stroke="black" fill="none" strokeWidth="2" />
+    </svg>
+  ),
+  'split-vertical': () => (
+    <svg width="24" height="24" style={ICON_STYLE}>
+      <rect x="4" y="4" width="7" height="16" stroke="black" fill="none" strokeWidth="2" />
+      <rect x="13" y="4" width="7" height="16" stroke="black" fill="none" strokeWidth="2" />
+    </svg>
+  )
+};
+
+// Define menu items for the popup menu.
+const MENU_ITEMS: Array<{value: ViewMode; icon: () => JSX.Element; label: string}> = [
+  {value: 'single', icon: ICONS.single, label: 'Single View'},
+  {value: 'split-horizontal', icon: ICONS['split-horizontal'], label: 'Split Horizontal'},
+  {value: 'split-vertical', icon: ICONS['split-vertical'], label: 'Split Vertical'}
+];