gantry-web 0.3.6 → 0.4.0

package/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "gantry-web",
-  "version": "0.3.6",
-  "description": "Frontend half of the Gantry desktop app framework: window chrome, native bridge, Tea runtime, Vite plugin",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/B-Commissions/Gantry.git",
-    "directory": "web"
-  },
-  "homepage": "https://github.com/B-Commissions/Gantry",
-  "keywords": [
-    "gantry",
-    "desktop",
-    "webview",
-    "go",
-    "react",
-    "vite-plugin"
-  ],
-  "type": "module",
-  "exports": {
-    ".": "./src/index.ts",
-    "./tea": "./src/tea/index.ts",
-    "./vite": "./src/vite/index.js",
-    "./styles.css": "./src/styles.css",
-    "./types": "./types/index.d.ts"
-  },
-  "files": [
-    "src",
-    "types"
-  ],
-  "peerDependencies": {
-    "lucide-react": "*",
-    "react": ">=18",
-    "react-dom": ">=18",
-    "vite": ">=5"
-  },
-  "peerDependenciesMeta": {
-    "vite": {
-      "optional": true
-    }
-  }
-}
+{
+  "name": "gantry-web",
+  "version": "0.4.0",
+  "description": "Frontend half of the Gantry desktop app framework: window chrome, native bridge, Tea runtime, Vite plugin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/B-Commissions/Gantry.git",
+    "directory": "web"
+  },
+  "homepage": "https://github.com/B-Commissions/Gantry",
+  "keywords": [
+    "gantry",
+    "desktop",
+    "webview",
+    "go",
+    "react",
+    "vite-plugin"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./tea": "./src/tea/index.ts",
+    "./vite": "./src/vite/index.js",
+    "./styles.css": "./src/styles.css",
+    "./types": "./types/index.d.ts"
+  },
+  "files": [
+    "src",
+    "types"
+  ],
+  "peerDependencies": {
+    "lucide-react": "*",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "vite": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  }
+}

package/src/ResizeFrame.tsx

@@ -1,40 +1,43 @@
-import { useShell, useShellCaps } from "./hooks";
-
-const EDGES = [
-  { edge: "n", style: { top: 0, left: 8, right: 8, height: 5, cursor: "ns-resize" } },
-  { edge: "s", style: { bottom: 0, left: 8, right: 8, height: 5, cursor: "ns-resize" } },
-  { edge: "w", style: { left: 0, top: 8, bottom: 8, width: 5, cursor: "ew-resize" } },
-  { edge: "e", style: { right: 0, top: 8, bottom: 8, width: 5, cursor: "ew-resize" } },
-  { edge: "nw", style: { top: 0, left: 0, width: 10, height: 10, cursor: "nwse-resize" } },
-  { edge: "ne", style: { top: 0, right: 0, width: 10, height: 10, cursor: "nesw-resize" } },
-  { edge: "sw", style: { bottom: 0, left: 0, width: 10, height: 10, cursor: "nesw-resize" } },
-  { edge: "se", style: { bottom: 0, right: 0, width: 10, height: 10, cursor: "nwse-resize" } },
-] as const;
-
-/**
- * ResizeFrame renders invisible edge strips that start a native
- * interactive resize - needed on Linux, where a frameless window has
- * no OS hit-test to re-implement edges (Windows handles this natively,
- * so there the component renders nothing). createApp adds one
- * automatically on frameless Linux windows.
- */
-export function ResizeFrame({ prefix }: { prefix?: string }) {
-  const shell = useShell(prefix);
-  const caps = useShellCaps(prefix);
-  if (caps?.platform !== "linux" || !caps.frameless) return null;
-  return (
-    <>
-      {EDGES.map(({ edge, style }) => (
-        <div
-          key={edge}
-          style={{ position: "fixed", zIndex: 40, ...style }}
-          onMouseDown={(e) => {
-            if (e.button !== 0) return;
-            e.preventDefault();
-            shell.resizeEdge(edge);
-          }}
-        />
-      ))}
-    </>
-  );
-}
+import { useShell, useShellCaps } from "./hooks";
+
+const EDGES = [
+  { edge: "n", style: { top: 0, left: 8, right: 8, height: 5, cursor: "ns-resize" } },
+  { edge: "s", style: { bottom: 0, left: 8, right: 8, height: 5, cursor: "ns-resize" } },
+  { edge: "w", style: { left: 0, top: 8, bottom: 8, width: 5, cursor: "ew-resize" } },
+  { edge: "e", style: { right: 0, top: 8, bottom: 8, width: 5, cursor: "ew-resize" } },
+  { edge: "nw", style: { top: 0, left: 0, width: 10, height: 10, cursor: "nwse-resize" } },
+  { edge: "ne", style: { top: 0, right: 0, width: 10, height: 10, cursor: "nesw-resize" } },
+  { edge: "sw", style: { bottom: 0, left: 0, width: 10, height: 10, cursor: "nesw-resize" } },
+  { edge: "se", style: { bottom: 0, right: 0, width: 10, height: 10, cursor: "nwse-resize" } },
+] as const;
+
+/**
+ * ResizeFrame renders invisible edge strips that start a native
+ * interactive resize and carry the resize cursor. A frameless window has
+ * no draggable OS frame: on Linux the compositor offers no hit-test, and
+ * on Windows the WebView2 child covers the client area and swallows the
+ * parent's WM_NCHITTEST resize margin - so on both the frontend draws the
+ * strips and calls the ResizeEdge binding on mousedown. Framed windows
+ * (and the browser) render nothing.
+ */
+export function ResizeFrame({ prefix }: { prefix?: string }) {
+  const shell = useShell(prefix);
+  const caps = useShellCaps(prefix);
+  const native = caps?.platform === "linux" || caps?.platform === "windows";
+  if (!native || !caps?.frameless) return null;
+  return (
+    <>
+      {EDGES.map(({ edge, style }) => (
+        <div
+          key={edge}
+          style={{ position: "fixed", zIndex: 40, ...style }}
+          onMouseDown={(e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            shell.resizeEdge(edge);
+          }}
+        />
+      ))}
+    </>
+  );
+}