some tweaks

src/app.css

@@ -105,65 +105,6 @@ body {
     & > div {
       display: contents;
     }
-
-    .menu-item {
-      padding: .5em 1em;
-
-      background-color: inherit;
-      color: var(--text-1);
-      border: none;
-      cursor: pointer;
-
-      text-align: start;
-
-      &:hover {
-        background-color: var(--surface-2);
-      }
-    }
-
-    .menu-child {
-      position: fixed;
-      inset-inline-start: anchor(self-start);
-      inset-block-start: anchor(end);
-
-      grid-template-columns: auto auto;
-      place-content: start;
-
-      gap: .5em;
-      padding: .5em 0;
-      inline-size: max-content;
-
-      background-color: var(--surface-2);
-      border: 1px solid var(--surface-3);
-      border-block-start-width: 0;
-      margin: unset;
-
-      &:popover-open {
-        display: grid;
-      }
-
-      & > .menu-item {
-        grid-column: span 2;
-        display: grid;
-        grid-template-columns: subgrid;
-        align-items: center;
-
-        background-color: var(--surface-2);
-
-        &:hover {
-          background-color: var(--surface-3);
-        }
-
-        & > sub {
-          color: var(--text-2);
-          text-align: end;
-        }
-      }
-    }
-
-    :popover-open + .menu-item {
-      background-color: var(--surface-2);
-    }
   }
 }
 

src/features/command/contextMenu.module.css

@@ -1,15 +1,31 @@
 .menu {
     position: fixed;
     display: grid;
-    grid-template-columns: max-content;
+    grid-template-columns: auto auto;
+    place-content: start;
 
     inset-inline-start: anchor(start);
     inset-block-start: anchor(end);
+
     margin: 0;
+    gap: var(--padding-m);
+    padding: var(--padding-m);
+    font-size: var(--text-s);
 
     background-color: var(--surface-1);
     color: var(--text-1);
-    border: none;
+    border: 1px solid var(--text-1);
+    border-radius: var(--radii-m);
 
-    padding: var(--padding-m);
+    & > li {
+        grid-column: span 2;
+        display: grid;
+        grid-template-columns: subgrid;
+        align-items: center;
+
+        & > sub {
+            color: var(--text-2);
+            text-align: end;
+        }
+    }
 }

src/features/menu/index.module.css

@@ -21,8 +21,8 @@
     grid-template-columns: auto auto;
     place-content: start;
 
-    gap: .5em;
-    padding: .5em 0;
+    gap: var(--padding-m);
+    padding: var(--padding-m) 0;
     inline-size: max-content;
 
     background-color: var(--surface-2);

src/routes/(editor)/edit.tsx

@@ -117,6 +117,9 @@ export default function Edit(props: ParentProps) {
         selectAll: createCommand('select all', () => {
             api()?.selectAll();
         }, { key: 'a', modifier: Modifier.Control }),
+        clearSelection: createCommand('clear selection', () => {
+            api()?.clear();
+        }),
     } as const;
 
     const mutated = createMemo(() => Object.values(api()?.rows() ?? {}).filter(row => Object.values(row).some(lang => lang.original !== lang.value)));
@@ -144,6 +147,8 @@ export default function Edit(props: ParentProps) {
 
                 <Menu.Item label="selection">
                     <Menu.Item command={commands.selectAll} />
+
+                    <Menu.Item command={commands.clearSelection} />
                 </Menu.Item>
 
                 <Menu.Item label="view" command={noop} />