@domicile-desktop/manganese-window-management 1.0.0 → 1.2.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "dependencies": {
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/component-library": "1.0.0",
-    "@domicile-desktop/manganese-address": "1.0.0",
-    "@domicile-desktop/manganese-bar": "1.0.0",
-    "@domicile-desktop/manganese-host": "1.0.0",
-    "@domicile-desktop/manganese-page-requests": "1.0.0",
-    "@domicile-desktop/sdk": "1.0.0",
-    "@domicile-desktop/system-apps": "1.0.0",
+    "@domicile-desktop/component-library": "2.0.1",
+    "@domicile-desktop/manganese-address": "1.0.2",
+    "@domicile-desktop/manganese-bar": "1.1.1",
+    "@domicile-desktop/manganese-host": "2.0.1",
+    "@domicile-desktop/manganese-page-requests": "1.1.1",
+    "@domicile-desktop/sdk": "2.1.0",
+    "@domicile-desktop/system-apps": "1.1.1",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10",
     "react": "^19.2.8",
@@ -16,7 +16,7 @@
   "description": "Manganese's window management: sway's layout tree, tiling, floating, workspaces, keybindings and the windows' chrome.",
   "devDependencies": {
     "@cprussin/tsconfig": "^5.0.0",
-    "@domicile-desktop/test-support": "0.0.1",
+    "@domicile-desktop/test-support": "0.0.2",
     "@pandacss/preset-panda": "^1.12.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
@@ -85,5 +85,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "1.0.0"
+  "version": "1.2.0"
 }

package/src/BrowserWindow.tsx

@@ -657,9 +657,15 @@ export const BrowserWindow = ({
             onBack={drive((loaded) => {
               loaded.goBack();
             })}
+            onBackInNewWindow={drive((loaded) => {
+              loaded.goBackInNewWindow();
+            })}
             onForward={drive((loaded) => {
               loaded.goForward();
             })}
+            onForwardInNewWindow={drive((loaded) => {
+              loaded.goForwardInNewWindow();
+            })}
             onNavigate={navigate}
             onReload={drive((loaded) => {
               loaded.reload();

package/src/browser/AddressBar.tsx

@@ -22,7 +22,7 @@ import { ClockCounterClockwiseIcon } from "@phosphor-icons/react/dist/ssr/ClockC
 import { DetectiveIcon } from "@phosphor-icons/react/dist/ssr/Detective";
 import { GlobeSimpleIcon } from "@phosphor-icons/react/dist/ssr/GlobeSimple";
 import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
-import type { CSSProperties, FormEvent } from "react";
+import type { CSSProperties, FormEvent, MouseEvent } from "react";
 import { useState } from "react";
 import { css } from "../../styled-system/css";
 import { hstack } from "../../styled-system/patterns";
@@ -61,7 +61,11 @@ type Props = {
   /** Whether a page is loading, which turns Reload into Stop. */
   loading: boolean;
   onBack: () => void;
+  /** Goes back in a new window, for a middle click on Back. */
+  onBackInNewWindow: () => void;
   onForward: () => void;
+  /** Goes forward in a new window, for a middle click on Forward. */
+  onForwardInNewWindow: () => void;
   /** Loads `url`, already resolved from what was typed. */
   onNavigate: (url: string) => void;
   onReload: () => void;
@@ -103,7 +107,9 @@ export const AddressBar = ({
   loading,
   mediaDevices,
   onBack,
+  onBackInNewWindow,
   onForward,
+  onForwardInNewWindow,
   onNavigate,
   onReload,
   onSetSitePermission,
@@ -148,6 +154,7 @@ export const AddressBar = ({
         <Button
           disabled={!canGoBack}
           label="Back"
+          onAuxClick={onMiddleClick(onBackInNewWindow)}
           onClick={onBack}
           rounded
           size="sm"
@@ -158,6 +165,7 @@ export const AddressBar = ({
         <Button
           disabled={!canGoForward}
           label="Forward"
+          onAuxClick={onMiddleClick(onForwardInNewWindow)}
           onClick={onForward}
           rounded
           size="sm"
@@ -267,6 +275,21 @@ export const AddressBar = ({
   );
 };
 
+/** `MouseEvent.button` for the middle button. */
+const MIDDLE_BUTTON = 1;
+
+/**
+ * An `onAuxClick` that calls `open` for a middle click, as Chrome opens a
+ * middle-clicked Back or Forward in a new tab. A right click is left alone.
+ */
+const onMiddleClick =
+  (open: () => void) =>
+  (event: MouseEvent): void => {
+    if (event.button === MIDDLE_BUTTON) {
+      open();
+    }
+  };
+
 /**
  * Inline style handing `progress` to `loadingStyles` as `--load-progress`.
  * Inline because Panda only extracts build-time literals.