feat(honeybar): the HoneyOS bar, loaded at runtime

A strip along the top that leads to the other apps of the same system. It is
served by HoneyOS; InkNote only says where to find it, through
INKNOTE_HONEYBAR_ORIGIN. Empty means no bar and no change at all.

The origin is served by the API rather than built into the page, because an
image is pulled ready-made and a service worker keeps whole responses: anything
frozen into index.html would outlive the setting.

Layout follows the bar through --honeybar-h. The body has overflow:hidden, so
the surplus height would not have scrolled but been cut off at the bottom; and
#root padded itself around the notch that the bar now covers, which would have
counted that gap twice.

Unit 263/263, all fourteen browser suites green.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/index.html

@@ -38,7 +38,20 @@
     </script>
     <style>
       body { margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; }
-      #root { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); height: 100vh; }
+      /* --honeybar-h is set by the HoneyOS bar while it is on the page, and is
+         0 when it is not. The bar sits above the app and pushes it down, so the
+         app has that much less room; body has overflow:hidden, which means the
+         difference would not scroll but simply be cut off at the bottom.
+
+         It also covers the notch itself, so the padding above must give way —
+         otherwise the gap is counted twice. max() keeps that from going
+         negative when there is no bar. */
+      #root {
+        box-sizing: border-box;
+        padding: max(0px, calc(env(safe-area-inset-top) - var(--honeybar-h, 0px)))
+                 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+        height: calc(100vh - var(--honeybar-h, 0px));
+      }
       #splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: #0d1117; z-index: 9999; transition: opacity 0.3s; }
       #splash.hide { opacity: 0; pointer-events: none; }
       #splash .logo { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #388bfd, #a855f7); display: flex; align-items: center; justify-content: center; font-size: 32px; animation: pulse 1.5s infinite; }