From 7bb783f866ba6513c5216e9f1200f3c2ee58387f Mon Sep 17 00:00:00 2001
From: Almar Klein <almar@almarklein.org>
Date: Thu, 2 Apr 2026 21:55:10 +0200
Subject: [PATCH] show visible hint when view has focus

---
 src/renderview.css |  6 ++++++
 src/renderview.js  | 19 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/renderview.css b/src/renderview.css
index 9f7544e..403f84a 100644
--- a/src/renderview.css
+++ b/src/renderview.css
@@ -10,6 +10,7 @@ div.renderview-wrapper {
     --line-radius: 6px;
     --line-thickness: 2px;
     --line-color: rgba(127, 127, 127, 0.3);
+    --line-color-focus: rgba(127, 127, 127, 0.5);
     --titlebar-height: 1.7em;
     display: inline-block;
     position: relative;
@@ -63,6 +64,11 @@ div.renderview-wrapper .renderview-resizer {
     cursor: nwse-resize;
 }
 
+div.renderview-wrapper.has-focus,
+div.renderview-wrapper.has-focus .renderview-top {
+    border-color: var(--line-color-focus);
+}
+
 div.renderview-wrapper.has-titlebar {
     margin-top: 2em !important;
 }
diff --git a/src/renderview.js b/src/renderview.js
index 598c594..1dfbd66 100644
--- a/src/renderview.js
+++ b/src/renderview.js
@@ -389,7 +389,7 @@ class BaseRenderView {
     const viewElement = this.viewElement
     const signal = this._abortController.signal // to unregister/abort stuff
 
-    // ----- visibility ---------------
+    // ----- visibility and focus ---------------
 
     this._intersectionObserver = new IntersectionObserver((entries, observer) => {
       // This gets called when one of the observed elements becomes visible/invisible.
@@ -409,6 +409,23 @@ class BaseRenderView {
     })
     this._intersectionObserver.observe(viewElement)
 
+    this._focusElement.addEventListener('focus', (ev) => {
+      if (this.wrapperElement) {
+        this.wrapperElement.classList.add('has-focus')
+      }
+      // at the moment the spec does not define focus and blur events, so only used internally for styling purposeses
+    },
+    { signal }
+    )
+
+    this._focusElement.addEventListener('blur', (ev) => {
+      if (this.wrapperElement) {
+        this.wrapperElement.classList.remove('has-focus')
+      }
+    },
+    { signal }
+    )
+
     // ----- resize ---------------
 
     this._resizeObserver = new ResizeObserver((entries) => {