fix widget focus interactions

packages/widgets/src/app/index.ts

@@ -15,6 +15,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("app", {
   icon: IconApps,
+  supportsAdvancedFocus: false,
   queryKeys: [[["app", "byId"]], [["widget", "app", "ping"]]],
   createOptions(settings) {
     return optionsBuilder.from(

packages/widgets/src/beszel-system-grid/index.ts

@@ -6,6 +6,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemGrid", {
   icon: IconLayoutGrid,
+  supportsAdvancedFocus: false,
   queryKey: [["widget", "beszel", "getSystems"]],
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,

packages/widgets/src/beszel-system-table/index.ts

@@ -25,6 +25,7 @@ const sortDirectionOptions = [
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemTable", {
   icon: IconTable,
+  supportsAdvancedFocus: false,
   queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
   queryMatcher: (query, scope) =>
     query.path.at(-1) === "getSystems"

packages/widgets/src/beszel/_shared/disk-usage.tsx

@@ -1,4 +1,4 @@
-import { Box, Group, HoverCard, Progress, Stack, Text, UnstyledButton } from "@mantine/core";
+import { Box, getDefaultZIndex, Group, HoverCard, Progress, Stack, Text, UnstyledButton } from "@mantine/core";
 
 import type { BeszelSystemRow } from "./types";
 import { thresholdColor } from "./colors";
@@ -28,6 +28,7 @@ export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap =
         {formatPercent(system.disk)}
       </Text>
       <HoverCard
+        zIndex={getDefaultZIndex("popover") - 3}
         position="right"
         withArrow
         shadow="md"

packages/widgets/src/definition.spec.ts

@@ -1,6 +1,14 @@
 import { describe, expect, test } from "vitest";
 
-import { getWidgetQueryKeys, getWidgetRuntimeQueries, setWidgetRuntimeQueries } from "./definition";
+import { definition as appDefinition } from "./app";
+import { definition as beszelSystemGridDefinition } from "./beszel-system-grid";
+import { definition as beszelSystemTableDefinition } from "./beszel-system-table";
+import {
+  getWidgetQueryKeys,
+  getWidgetRuntimeQueries,
+  setWidgetRuntimeQueries,
+  supportsAdvancedFocus,
+} from "./definition";
 
 const togglePolling = () => undefined;
 
@@ -32,3 +40,22 @@ describe("getWidgetQueryKeys", () => {
     expect(getWidgetRuntimeQueries(widgetStateRef)).toEqual(runtimeQueries);
   });
 });
+
+describe("supportsAdvancedFocus", () => {
+  const definition = { supportsAdvancedFocus: undefined } as Parameters<typeof supportsAdvancedFocus>[0];
+
+  test("defaults to enabled", () => {
+    expect(supportsAdvancedFocus(definition)).toBe(true);
+  });
+
+  test("allows widgets to opt out", () => {
+    expect(supportsAdvancedFocus({ ...definition, supportsAdvancedFocus: false })).toBe(false);
+  });
+
+  test.each([appDefinition, beszelSystemGridDefinition, beszelSystemTableDefinition])(
+    "keeps non-enhanced widgets compact",
+    (widgetDefinition) => {
+      expect(supportsAdvancedFocus(widgetDefinition)).toBe(false);
+    },
+  );
+});

packages/widgets/src/index.tsx

@@ -79,6 +79,7 @@ export {
   getWidgetQueryKeys,
   getWidgetRuntimeQueries,
   normalizeWidgetQuery,
+  supportsAdvancedFocus,
   widgetQueryValueEquals,
 } from "./definition";
 export type { WidgetComponentProps };