pomium 1.0.0

package/src/renderer/styles.css

@@ -0,0 +1,148 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #1e1f24;
+  color: #e8e8ec;
+  display: flex;
+  flex-direction: column;
+}
+
+#tab-strip {
+  display: flex;
+  align-items: center;
+  background: #17181c;
+  padding: 6px 6px 0 6px;
+  -webkit-app-region: drag;
+}
+
+#tabs {
+  display: flex;
+  flex: 1;
+  overflow-x: auto;
+  -webkit-app-region: no-drag;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin-right: 4px;
+  border-radius: 8px 8px 0 0;
+  background: #26282f;
+  color: #b7b8c2;
+  font-size: 12px;
+  max-width: 180px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tab.active {
+  background: #33353e;
+  color: #fff;
+}
+
+.tab-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tab-close {
+  opacity: 0.6;
+  padding: 0 2px;
+}
+
+.tab-close:hover {
+  opacity: 1;
+}
+
+#new-tab-btn {
+  -webkit-app-region: no-drag;
+  border: none;
+  background: transparent;
+  color: #b7b8c2;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px 10px;
+}
+
+#new-tab-btn:hover {
+  color: #fff;
+}
+
+#toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #33353e;
+  padding: 8px;
+}
+
+#toolbar button {
+  border: none;
+  background: #26282f;
+  color: #e8e8ec;
+  border-radius: 6px;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+#toolbar button:hover {
+  background: #3d3f49;
+}
+
+#address-bar {
+  flex: 1;
+  height: 30px;
+  border-radius: 6px;
+  border: none;
+  padding: 0 12px;
+  background: #1e1f24;
+  color: #e8e8ec;
+  font-size: 13px;
+}
+
+#address-bar:focus {
+  outline: 2px solid #e0a95e;
+}
+
+#content {
+  position: relative;
+  flex: 1;
+}
+
+.webview-pane {
+  position: absolute;
+  inset: 0;
+  display: none;
+}
+
+.webview-pane.active {
+  display: block;
+}
+
+.browser-webview {
+  width: 100%;
+  height: 100%;
+}
+
+/* Spans the whole window so poms fly over the tab strip and toolbar too.
+   pointer-events:none keeps every click reaching what it landed on. */
+#pom-overlay {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 2147483647;
+}

package/src/webview-preload.js

@@ -0,0 +1,68 @@
+// Runs inside each <webview> page, isolated from the host chrome. A webview
+// is a separate frame, so its clicks never reach the host document — they are
+// forwarded here and translated into window coordinates by the renderer.
+//
+// Press, move and release are forwarded separately rather than as a single
+// click, because holding and dragging streams poms continuously and a click
+// event cannot express that.
+const { ipcRenderer } = require('electron');
+
+// Listeners are passive and never call preventDefault or stopPropagation, so
+// the page keeps receiving every event exactly as it would without Pomium.
+const OPTS = { capture: true, passive: true };
+
+window.addEventListener('DOMContentLoaded', () => {
+  // The preload script is ours, but the DOM events it listens to are the
+  // page's — a page can dispatch synthetic pointer events on its own
+  // document to hold this flag forever. isTrusted rejects anything that
+  // did not come from a real input device.
+  let held = false;
+
+  document.addEventListener('pointerdown', (e) => {
+    if (!e.isTrusted) return;
+    if (e.button !== undefined && e.button !== 0) return;
+    held = true;
+    ipcRenderer.sendToHost('pom-down', { x: e.clientX, y: e.clientY });
+  }, OPTS);
+
+  document.addEventListener('pointermove', (e) => {
+    if (!e.isTrusted) return;
+    if (!held) return;
+    ipcRenderer.sendToHost('pom-move', { x: e.clientX, y: e.clientY });
+  }, OPTS);
+
+  document.addEventListener('pointerup', (e) => {
+    if (!e.isTrusted) return;
+    // Mirror the pointerdown filter: a chorded right-click release must not
+    // end a drag the user is still physically holding.
+    if (e.button !== undefined && e.button !== 0) return;
+    held = false;
+    ipcRenderer.sendToHost('pom-up');
+  }, OPTS);
+
+  document.addEventListener('pointercancel', (e) => {
+    if (!e.isTrusted) return;
+    held = false;
+    ipcRenderer.sendToHost('pom-up');
+  }, OPTS);
+
+  // A drag can end without pointerup: alt-tabbing away, or a native drag
+  // starting on an image or link. Without these the stream never stops.
+  // Left unconditional on isTrusted (unlike the pointer handlers above): a
+  // page firing these itself can only end a drag early, never extend one,
+  // so an isTrusted guard here would add nothing.
+  //
+  // The `held` guard is load-bearing, though. Pressing on the host chrome
+  // while this page had focus blurs it, and reporting a release for a drag
+  // this page never started would cancel the chrome's drag instead.
+  function release() {
+    if (!held) return;
+    held = false;
+    ipcRenderer.sendToHost('pom-up');
+  }
+
+  window.addEventListener('blur', release, OPTS);
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) release();
+  }, OPTS);
+});