From ef0217e4807b81dfebe3a1ea60eadadd3ceb3b52 Mon Sep 17 00:00:00 2001
From: Michael Heller <21163552+mdheller@users.noreply.github.com>
Date: Tue, 4 Aug 2026 03:45:16 -0400
Subject: [PATCH] =?UTF-8?q?feat(extensions):=20Bear=20Split=20=E2=80=94=20?=
 =?UTF-8?q?side-by-side=20split=20view=20tabs=20(Arc=20gap=20closure)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

extensions/bear-split/ — MV2 WebExtension for LibreWolf/Firefox:

manifest.json:
- CMD+SHIFT+\ / Ctrl+Shift+\ keyboard shortcut to open split view
- browser_action toolbar button
- web_accessible_resources: split.html
- gecko id: bear-split@bearbrowser.local

background.js:
- commands.onCommand("open-split"): opens split.html?left=<current-url>&right=about:blank
- browserAction.onClicked: same; takes current tab URL as left pane seed

split.html (fully self-contained, no external deps):
- Two URL bars (LEFT/RIGHT labels) + two iframes side by side
- Draggable divider: mousedown → mousemove adjusts flex widths; iframes
  get pointer-events:none during drag to prevent event capture
- Min pane width 80px; divider highlights teal (#39C5CF) on hover/drag
- URL input: Enter or Go button navigates; auto-prefixes https:// if no scheme
- sandbox: allow-scripts allow-forms allow-same-origin allow-popups allow-downloads
- Memory mesh ping on open + on each navigation (POST localhost:7788/api/append)

icons/split-48.svg:
- Two rectangles with dashed center divider, brand teal
---
 extensions/bear-split/background.js      |  23 ++++
 extensions/bear-split/icons/split-48.svg |   5 +
 extensions/bear-split/manifest.json      |  45 +++++++
 extensions/bear-split/split.html         | 163 +++++++++++++++++++++++
 4 files changed, 236 insertions(+)
 create mode 100644 extensions/bear-split/background.js
 create mode 100644 extensions/bear-split/icons/split-48.svg
 create mode 100644 extensions/bear-split/manifest.json
 create mode 100644 extensions/bear-split/split.html

diff --git a/extensions/bear-split/background.js b/extensions/bear-split/background.js
new file mode 100644
index 0000000..e7d44b2
--- /dev/null
+++ b/extensions/bear-split/background.js
@@ -0,0 +1,23 @@
+// MIT License — BearBrowser Bear Split
+// Opens the current tab in a side-by-side split view.
+"use strict";
+
+function openSplit(currentUrl) {
+  const base = browser.runtime.getURL("split.html");
+  const url  = base
+    + "?left="  + encodeURIComponent(currentUrl || "about:blank")
+    + "&right=" + encodeURIComponent("about:blank");
+  browser.tabs.create({ url });
+}
+
+browser.commands.onCommand.addListener((cmd) => {
+  if (cmd === "open-split") {
+    browser.tabs.query({ active: true, currentWindow: true }).then(([tab]) => {
+      openSplit(tab ? tab.url : "about:blank");
+    });
+  }
+});
+
+browser.browserAction.onClicked.addListener((tab) => {
+  openSplit(tab ? tab.url : "about:blank");
+});
diff --git a/extensions/bear-split/icons/split-48.svg b/extensions/bear-split/icons/split-48.svg
new file mode 100644
index 0000000..ae5b7e0
--- /dev/null
+++ b/extensions/bear-split/icons/split-48.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
+  <rect x="2" y="8" width="19" height="32" rx="3" fill="none" stroke="#39C5CF" stroke-width="2.5"/>
+  <rect x="27" y="8" width="19" height="32" rx="3" fill="none" stroke="#39C5CF" stroke-width="2.5"/>
+  <line x1="24" y1="10" x2="24" y2="38" stroke="#39C5CF" stroke-width="2.5" stroke-dasharray="3 2"/>
+</svg>
diff --git a/extensions/bear-split/manifest.json b/extensions/bear-split/manifest.json
new file mode 100644
index 0000000..ba923d6
--- /dev/null
+++ b/extensions/bear-split/manifest.json
@@ -0,0 +1,45 @@
+{
+  "manifest_version": 2,
+  "name": "Bear Split",
+  "version": "1.0.0",
+  "description": "Side-by-side split view tabs for BearBrowser. Closes the Arc split-view gap.",
+  "author": "mdheller",
+  "license": "MIT",
+
+  "permissions": ["tabs", "storage", "commands"],
+
+  "commands": {
+    "open-split": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Backslash",
+        "mac": "Command+Shift+Backslash"
+      },
+      "description": "Open current tab in split view"
+    }
+  },
+
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
+
+  "web_accessible_resources": ["split.html"],
+
+  "browser_action": {
+    "default_title": "Bear Split",
+    "default_icon": {
+      "48": "icons/split-48.svg"
+    }
+  },
+
+  "icons": {
+    "48": "icons/split-48.svg"
+  },
+
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "bear-split@bearbrowser.local",
+      "strict_min_version": "114.0"
+    }
+  }
+}
diff --git a/extensions/bear-split/split.html b/extensions/bear-split/split.html
new file mode 100644
index 0000000..573beeb
--- /dev/null
+++ b/extensions/bear-split/split.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Bear Split</title>
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; background: #0d1117; color: #e6edf3; font-family: system-ui, -apple-system, sans-serif; overflow: hidden; }
+#container { display: flex; height: 100vh; }
+.pane { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-width: 80px; }
+.urlbar { background: #161b22; border-bottom: 1px solid #30363d; display: flex; align-items: center; gap: 5px; padding: 4px 8px; flex-shrink: 0; }
+.urlbar label { font-size: 10px; color: #8b949e; white-space: nowrap; }
+.urlbar input { flex: 1; background: #0d1117; border: 1px solid #30363d; border-radius: 4px; color: #e6edf3; font-size: 12px; padding: 3px 7px; outline: none; min-width: 0; }
+.urlbar input:focus { border-color: #39C5CF; }
+.urlbar button { background: none; border: 1px solid #30363d; border-radius: 3px; color: #8b949e; cursor: pointer; font-size: 11px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
+.urlbar button:hover { border-color: #39C5CF; color: #39C5CF; }
+.pane iframe { flex: 1; border: none; background: #ffffff; display: block; }
+#divider {
+  width: 6px; background: #21262d; cursor: col-resize; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  transition: background 0.1s; position: relative;
+}
+#divider:hover, #divider.dragging { background: #39C5CF; }
+#divider::after {
+  content: "⋮⋮"; color: rgba(255,255,255,0.4); font-size: 10px;
+  writing-mode: vertical-lr; letter-spacing: -2px;
+}
+#divider.dragging::after { color: rgba(255,255,255,0.8); }
+</style>
+</head>
+<body>
+<div id="container">
+  <div class="pane" id="pane-left" style="flex:1">
+    <div class="urlbar">
+      <label>LEFT</label>
+      <input id="url-left" type="url" placeholder="https://" spellcheck="false">
+      <button id="btn-left">Go</button>
+    </div>
+    <iframe id="frame-left"
+      sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-downloads"
+      referrerpolicy="no-referrer-when-downgrade"></iframe>
+  </div>
+
+  <div id="divider" title="Drag to resize"></div>
+
+  <div class="pane" id="pane-right" style="flex:1">
+    <div class="urlbar">
+      <label>RIGHT</label>
+      <input id="url-right" type="url" placeholder="https://" spellcheck="false">
+      <button id="btn-right">Go</button>
+    </div>
+    <iframe id="frame-right"
+      sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-downloads"
+      referrerpolicy="no-referrer-when-downgrade"></iframe>
+  </div>
+</div>
+
+<script>
+(function () {
+  "use strict";
+
+  const params   = new URLSearchParams(location.search);
+  const leftUrl  = params.get("left")  || "about:blank";
+  const rightUrl = params.get("right") || "about:blank";
+
+  const urlL = document.getElementById("url-left");
+  const urlR = document.getElementById("url-right");
+  const fL   = document.getElementById("frame-left");
+  const fR   = document.getElementById("frame-right");
+  const btnL = document.getElementById("btn-left");
+  const btnR = document.getElementById("btn-right");
+
+  // Load initial URLs
+  urlL.value = leftUrl;
+  fL.src     = leftUrl;
+  if (rightUrl && rightUrl !== "about:blank") {
+    urlR.value = rightUrl;
+    fR.src     = rightUrl;
+  }
+
+  function navigate(frame, input) {
+    let url = input.value.trim();
+    if (!url) return;
+    if (!/^[a-z][a-z0-9+\-.]*:/i.test(url)) url = "https://" + url;
+    input.value = url;
+    frame.src   = url;
+    // Memory mesh ping (fire-and-forget)
+    try {
+      fetch("http://localhost:7788/api/append", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          ts: new Date().toISOString(),
+          type: "split-navigate",
+          title: "split view navigate",
+          data: { url }
+        })
+      }).catch(() => {});
+    } catch (_) {}
+  }
+
+  btnL.addEventListener("click", () => navigate(fL, urlL));
+  btnR.addEventListener("click", () => navigate(fR, urlR));
+  urlL.addEventListener("keydown", e => { if (e.key === "Enter") navigate(fL, urlL); });
+  urlR.addEventListener("keydown", e => { if (e.key === "Enter") navigate(fR, urlR); });
+
+  // Draggable divider
+  const divider   = document.getElementById("divider");
+  const container = document.getElementById("container");
+  const paneL     = document.getElementById("pane-left");
+  const paneR     = document.getElementById("pane-right");
+
+  let dragging = false, startX = 0, startLW = 0, totalW = 0;
+
+  divider.addEventListener("mousedown", e => {
+    dragging = true;
+    startX   = e.clientX;
+    startLW  = paneL.getBoundingClientRect().width;
+    totalW   = paneL.getBoundingClientRect().width + paneR.getBoundingClientRect().width;
+    divider.classList.add("dragging");
+    document.body.style.userSelect = "none";
+    document.body.style.cursor     = "col-resize";
+    fL.style.pointerEvents = "none";
+    fR.style.pointerEvents = "none";
+  });
+
+  document.addEventListener("mousemove", e => {
+    if (!dragging) return;
+    const newL = Math.max(80, Math.min(totalW - 80, startLW + (e.clientX - startX)));
+    const newR = totalW - newL;
+    paneL.style.flex  = "none";
+    paneR.style.flex  = "none";
+    paneL.style.width = newL + "px";
+    paneR.style.width = newR + "px";
+  });
+
+  document.addEventListener("mouseup", () => {
+    if (!dragging) return;
+    dragging = false;
+    divider.classList.remove("dragging");
+    document.body.style.userSelect = "";
+    document.body.style.cursor     = "";
+    fL.style.pointerEvents = "";
+    fR.style.pointerEvents = "";
+  });
+
+  // Mesh ping on open
+  try {
+    fetch("http://localhost:7788/api/append", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        ts: new Date().toISOString(),
+        type: "split-view",
+        title: "split view opened",
+        data: { left: leftUrl, right: rightUrl }
+      })
+    }).catch(() => {});
+  } catch (_) {}
+})();
+</script>
+</body>
+</html>