Merge branch 'canary' of https://github.com/gridaco/grida

Author: softmarshmallow

editor/grida-canvas-hosted/playground/uxhost-settings-keyboardshortcuts.tsx

@@ -25,6 +25,10 @@ import { SearchIcon } from "lucide-react";
 
 interface KeyboardShortcutRowProps {
   action: {
+    /**
+     * Stable unique identifier for the action (derived from the `actions` registry key).
+     */
+    id?: string;
     name: string;
     description: string;
     command: string;
@@ -119,12 +123,17 @@ export function KeyboardShortcuts() {
   const [searchQuery, setSearchQuery] = useState("");
 
   const filteredActions = useMemo(() => {
+    const actionsWithId = Object.entries(actions).map(([id, action]) => ({
+      id,
+      ...action,
+    }));
+
     if (!searchQuery.trim()) {
-      return Object.values(actions);
+      return actionsWithId;
     }
 
     const query = searchQuery.toLowerCase().trim();
-    return Object.values(actions).filter(
+    return actionsWithId.filter(
       (action) =>
         action.name.toLowerCase().includes(query) ||
         action.description.toLowerCase().includes(query) ||
@@ -175,9 +184,13 @@ export function KeyboardShortcuts() {
               No shortcuts found matching "{searchQuery}"
             </div>
           ) : (
-            filteredActions.map((action) => (
+            filteredActions.map((action, index) => (
               <KeyboardShortcutRow
-                key={action.command}
+                key={
+                  action.id ??
+                  // Fallback: deterministic-ish unique string to avoid React key collisions
+                  `${action.command}:${action.name}:${action.description}:${index}`
+                }
                 action={action}
                 selectedPlatform={selectedPlatform}
               />

editor/grida-canvas-hosted/playground/uxhost-shortcut-renderer.tsx

@@ -48,9 +48,9 @@ function sequenceToString(
 
 /**
  * Get the first keybinding as a string for an action
- * Returns empty string if not found
  *
- * @throws {Error} If actionId is not a valid action ID
+ * Returns an empty string when the action has no resolved keybinding for the
+ * requested platform (including when the `actionId` is unknown).
  */
 export function keyboardShortcutText(
   actionId: UXHostActionId,
@@ -82,6 +82,9 @@ export function keyboardShortcutTextAll(
 /**
  * Get keyboard shortcut as a formatted string with separators between chunks
  * Useful for display in tooltips or settings
+ *
+ * Returns an empty string when the action has no resolved keybinding for the
+ * requested platform (including when the `actionId` is unknown).
  */
 export function keyboardShortcutTextFormatted(
   actionId: UXHostActionId,

editor/grida-canvas/keybinding.ts

@@ -200,6 +200,11 @@ function isApplePlatform(): boolean {
  * mostly to determine cmdctrl key (and for cases that keybindings are fundamentally different, e.g. ctrl+c being color picker on mac, but copy on windows/linux)
  */
 export function getKeyboardOS(): "mac" | "windows" | "linux" {
+  // SSR / non-browser safety: `navigator` is not defined in Node.js environments.
+  // Pick a reasonable default for headless contexts.
+  if (typeof navigator === "undefined" || !navigator.platform) {
+    return "linux";
+  }
   if (isApplePlatform()) return "mac";
   const platform = navigator.platform.toLowerCase();
   if (platform.includes("win")) return "windows";
@@ -385,18 +390,20 @@ export function uikbdk(
 ): string {
   const targetPlatform = platform || getKeyboardOS();
 
-  // Check if it's a modifier bitmask (M enum values are small bitmasks: 1, 2, 4, 8, 16)
-  // KeyCodes are enum values that start from a much higher number
-  // We check if it's a valid modifier by trying to resolve it
-  // If it resolves to modifier keys, it's a modifier; otherwise treat as KeyCode
-  const resolvedMods = resolveMods(key, targetPlatform);
+  // Only treat *single* modifier constants as modifiers.
+  // Do NOT try to infer modifiers from bit overlap, as some KeyCode values can overlap by chance.
   if (
-    resolvedMods.length > 0 &&
-    key & (M.Ctrl | M.Shift | M.Alt | M.Meta | M.CtrlCmd)
+    key === M.Ctrl ||
+    key === M.Shift ||
+    key === M.Alt ||
+    key === M.Meta ||
+    key === M.CtrlCmd
   ) {
-    // It's a modifier bitmask - return the first resolved key's label
-    // In practice, most single modifiers resolve to a single key
-    return keycodeToPlatformUILabel(resolvedMods[0], targetPlatform);
+    const resolvedMods = resolveMods(key, targetPlatform);
+    // In practice, single modifiers resolve to a single key (Ctrl/Cmd/Shift/Alt).
+    if (resolvedMods.length > 0) {
+      return keycodeToPlatformUILabel(resolvedMods[0], targetPlatform);
+    }
   }
 
   // It's a KeyCode