docs(gallery): add Monitor Switch (DDC) to the headline + refresh screenshots

README.md

@@ -1,7 +1,7 @@
 # <img src="branding/icon-transparent.png" alt="" width="40" align="top"> widgetsack
 
 <p align="center">
-  <img src="docs/img/demo.png" alt="widgetsack demo layout: clock, CPU/GPU gauges, a countdown timer, memory/VRAM bars, up/down network graphs, an audio spectrum, a now-playing card, a stock ticker, an analog clock, and Home Assistant temperature/climate/light tiles" width="900">
+  <img src="docs/img/demo.png" alt="widgetsack demo layout: clock, CPU/GPU gauges, a countdown timer, memory/VRAM bars, up/down network graphs, an audio spectrum, a now-playing card, a stock ticker, an analog clock, Home Assistant temperature/climate/light tiles, and a DDC monitor input switcher" width="900">
 </p>
 
 [**👉 installer download for the latest release**](https://github.com/gyng/widgetsack/releases/latest)
@@ -30,14 +30,16 @@ docs regenerate from the code with `npm run gen:docs`.
 - **Widgets:** gauges, bars, sparklines, text, digital + analog clocks, a month calendar, a per-core
   CPU grid, a GPU panel, a battery indicator, a disk/storage panel, a top-process monitor, an audio
   spectrum, a now-playing card, a weather card, a stock ticker, an application fence or zone, a web
-  iframe, action buttons, and Home Assistant tiles — sensor- or [formula-driven](docs/templating.md)
+  iframe, action buttons, a DDC monitor input switcher, an audio output switcher, and Home Assistant
+  tiles — sensor- or [formula-driven](docs/templating.md)
   and fully restylable ([reference](docs/widgets.md)).
 - **Sensors:** CPU (total/per-core/freq), memory + swap, network, disks (+ I/O), uptime, battery, the
   busiest process (by CPU/RAM/disk/GPU), and NVIDIA GPU (NVML) — demand-gated, so only what's on screen
   is sampled.
 - **Now playing:** Windows media via GSMTC — Spotify, foobar2000, browsers, and more
   ([support table](https://github.com/ModernFlyouts-Community/ModernFlyouts/blob/main/docs/GSMTC-Support-And-Popular-Apps.md)).
-- **Integrations:** Home Assistant (live states + light/climate controls), MQTT, stock quotes, and
+- **Integrations:** Home Assistant (live states + light/climate/fan/cover/lock/scene/switch/media
+  controls), MQTT, stock quotes, and
   weather (Open-Meteo, keyless).
 - **Overlay:** transparent, click-through, always-on-top, one per monitor — per-widget
   click-through still lets buttons/controls catch clicks. Single-instance, optional autostart.

client/gallery/Gallery.tsx

@@ -74,7 +74,8 @@ const OVERRIDES: Record<string, { sensor?: string; config?: Record<string, unkno
 	image: { config: { src: PHOTO, fit: 'cover' } },
 	'ha.sensor': { sensor: 'demo.temperature' },
 	'ha.light': { sensor: 'demo.light' },
-	'ha.climate': { sensor: 'demo.climate' }
+	'ha.climate': { sensor: 'demo.climate' },
+	monitorswitch: { config: { showStats: true } }
 };
 
 function buildInstance(
@@ -198,6 +199,12 @@ const DEMO: WidgetInstance[] = [
 	buildInstance('ha.light', 'd-ha-light', {
 		rect: { x: 748, y: 300, w: 128, h: 48 },
 		sensor: 'demo.light'
+	}),
+	// Column E (x 900, w 150) — DDC/CI monitor input switcher (VCP 0x60): the active input highlighted
+	// among the panel's supported sources, with the current display mode beneath.
+	buildInstance('monitorswitch', 'd-ddc', {
+		rect: { x: 900, y: 36, w: 150, h: 308 },
+		config: { showStats: true }
 	})
 ];
 

client/gallery/gallery.css

@@ -81,7 +81,7 @@ figcaption {
    Landscape (four columns) so it embeds well in the README — see the DEMO array in Gallery.tsx. */
 .demo-panel {
 	position: relative;
-	width: 900px;
+	width: 1074px;
 	height: 380px;
 	border-radius: 12px;
 	background: linear-gradient(180deg, rgba(12, 22, 28, 0.82), rgba(8, 14, 18, 0.88)), var(--shot-bg);

client/gallery/main.tsx

@@ -19,7 +19,21 @@ const GALLERY_INVOKE: Record<string, unknown> = {
 		{ id: 'hdmi', name: 'HDMI Display' }
 	],
 	default_audio_output: 'spk',
-	get_audio_volume: { level: 0.62, muted: false }
+	get_audio_volume: { level: 0.62, muted: false },
+	// The Monitor Switch sources its rows from list_monitor_inputs (DDC/CI VCP 0x60), not the hub —
+	// canned a representative 4K monitor (current = HDMI 1; DP/HDMI×2/USB-C supported) so it renders.
+	list_monitor_inputs: [
+		{
+			gdi: '\\\\.\\DISPLAY1',
+			friendly: 'Dell U2723QE',
+			primary: true,
+			current_input: 0x11, // HDMI 1
+			supported: [0x0f, 0x11, 0x12, 0x15], // DisplayPort 1, HDMI 1, HDMI 2, USB-C
+			width: 2560,
+			height: 1440,
+			refresh_hz: 144
+		}
+	]
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as any).__TAURI_INTERNALS__ = {