feat: hierarchical command palette

src/ui/command_palette.css

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2026 Google Inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.neuroglancer-command-palette.overlay-content {
+  background: #222;
+  color: #fff;
+  padding: 0;
+  width: 500px;
+  max-width: 90vw;
+  display: flex;
+  flex-direction: column;
+  max-height: 60vh;
+}
+
+.neuroglancer-command-palette-input-row {
+  border-bottom: 1px solid #444;
+}
+
+.neuroglancer-command-palette-input {
+  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.neuroglancer-command-palette-results {
+  overflow-y: auto;
+}
+
+.neuroglancer-command-palette-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.neuroglancer-command-palette-row:hover,
+.neuroglancer-command-palette-row[data-active] {
+  background: #444;
+}
+
+.neuroglancer-command-palette-shortcut {
+  color: #aaa;
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+.neuroglancer-command-palette-empty {
+  padding: 8px;
+  color: #888;
+}
+
+.neuroglancer-command-palette-picker-header {
+  padding: 4px 8px;
+  color: #aaa;
+  font-size: 12px;
+  cursor: pointer;
+  border-bottom: 1px solid #333;
+}
+
+.neuroglancer-command-palette-picker-header:hover {
+  color: #fff;
+}

src/ui/command_palette.spec.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2026 Google Inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from "vitest";
+import {
+  collectActionBindings,
+  CommandCatalog,
+} from "#src/ui/command_palette.js";
+import { EventActionMap } from "#src/util/event_action_map.js";
+import type { Viewer } from "#src/viewer.js";
+
+function makeViewer(
+  global: EventActionMap,
+  sliceView = new EventActionMap(),
+  perspectiveView = new EventActionMap(),
+): Viewer {
+  return {
+    inputEventBindings: { global, sliceView, perspectiveView },
+    globalToolBinder: { bindings: new Map(), localBinders: new Set() },
+  } as unknown as Viewer;
+}
+
+describe("collectActionBindings", () => {
+  it("collects keyboard bindings", () => {
+    const map = new EventActionMap();
+    map.set("keya", "some-action");
+    const bindings = collectActionBindings(makeViewer(map));
+    expect(bindings.map((binding) => binding.actionId)).toContain("some-action");
+  });
+
+  it("excludes mouse and wheel events", () => {
+    const map = new EventActionMap();
+    map.set("at:mousedown0", "mouse-action");
+    map.set("at:wheel", "wheel-action");
+    map.set("keya", "keyboard-action");
+    const ids = collectActionBindings(makeViewer(map)).map((b) => b.actionId);
+    expect(ids).toContain("keyboard-action");
+    expect(ids).not.toContain("mouse-action");
+    expect(ids).not.toContain("wheel-action");
+  });
+
+  it("keeps only the first binding when an action appears in multiple maps", () => {
+    const globalMap = new EventActionMap();
+    globalMap.set("keya", "shared-action");
+    const sliceMap = new EventActionMap();
+    sliceMap.set("keyb", "shared-action");
+    const bindings = collectActionBindings(makeViewer(globalMap, sliceMap));
+    const forAction = bindings.filter((b) => b.actionId === "shared-action");
+    expect(forAction).toHaveLength(1);
+    expect(forAction[0].eventAction.originalEventIdentifier).toBe("keya");
+  });
+
+  it("excludes open-command-palette", () => {
+    const map = new EventActionMap();
+    map.set("f1", "open-command-palette");
+    map.set("keya", "some-action");
+    const ids = collectActionBindings(makeViewer(map)).map((b) => b.actionId);
+    expect(ids).not.toContain("open-command-palette");
+    expect(ids).toContain("some-action");
+  });
+});
+
+describe("CommandCatalog.filter", () => {
+  // With empty bindings the catalog contains only the two supplemental commands:
+  // "Edit JSON State" and "Screenshot".
+  function makeCatalog() {
+    return new CommandCatalog(
+      {
+        globalToolBinder: { bindings: new Map(), localBinders: new Set() },
+      } as unknown as Viewer,
+      [],
+    );
+  }
+
+  it("returns all commands for an empty query", () => {
+    const catalog = makeCatalog();
+    expect(catalog.filter("")).toStrictEqual(catalog.commands);
+  });
+
+  it("is case-insensitive", () => {
+    expect(makeCatalog().filter("EDIT")).toHaveLength(1);
+    expect(makeCatalog().filter("edit")).toHaveLength(1);
+  });
+
+  it("ranks prefix matches before substring matches", () => {
+    // "Screenshot" is a prefix match; "Edit JSON State" is a substring match.
+    // Verify all prefix matches appear before all substring matches.
+    const results = makeCatalog().filter("s");
+    const screenshotIndex = results.findIndex((r) => r.label === "Screenshot");
+    const stateIndex = results.findIndex((r) => r.label === "Edit JSON State");
+    expect(screenshotIndex).toBeGreaterThanOrEqual(0);
+    expect(stateIndex).toBeGreaterThanOrEqual(0);
+    expect(screenshotIndex).toBeLessThan(stateIndex);
+  });
+
+  it("returns empty for a non-matching query", () => {
+    expect(makeCatalog().filter("xyz")).toHaveLength(0);
+  });
+});