From 69c17a786b59b989c98836e3a5130053025587d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Denis=20=C5=A0vara?= <denis.svara@gmail.com>
Date: Wed, 7 Jan 2026 09:39:12 +0100
Subject: [PATCH] Add bridge insets controller.

---
 .../controllers/bridge/insets_controller.js   | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 app/javascript/controllers/bridge/insets_controller.js

diff --git a/app/javascript/controllers/bridge/insets_controller.js b/app/javascript/controllers/bridge/insets_controller.js
new file mode 100644
index 000000000..6f63a9550
--- /dev/null
+++ b/app/javascript/controllers/bridge/insets_controller.js
@@ -0,0 +1,31 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+
+// Bridge component to control custom safe-area insets from native apps.
+// Sets CSS variables --injected-safe-inset-(top|right|bottom|left).
+export default class extends BridgeComponent {
+  static component = "insets"
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.send("disconnect")
+  }
+
+  notifyBridgeOfConnect() {
+    this.send("connect", {}, message => {
+      this.setInsets(message.data)
+    })
+  }
+
+  setInsets({ top, right, bottom, left }) {
+    const root = document.documentElement.style
+    root.setProperty("--injected-safe-inset-top", `${top}px`)
+    root.setProperty("--injected-safe-inset-right", `${right}px`)
+    root.setProperty("--injected-safe-inset-bottom", `${bottom}px`)
+    root.setProperty("--injected-safe-inset-left", `${left}px`)
+  }
+}