refactor: Use consistent naming of the meta key

apps/builder/app/builder/features/command-panel/command-panel.stories.tsx

@@ -81,7 +81,7 @@ export const CommandPanel: StoryFn = () => {
       <button onClick={openCommandPanel}>Open command panel</button>
       <br />
       <input
-        defaultValue="Press cmd+k to open command panel"
+        defaultValue="Press meta+k to open command panel"
         style={{ width: 300 }}
       />
       <CommandPanelComponent />

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -349,9 +349,7 @@ const $shortcutOptions = computed([$commandMetas], (commandMetas) => {
   for (const [name, meta] of commandMetas) {
     if (!meta.hidden) {
       const label = humanizeString(name);
-      const keys = meta.defaultHotkeys?.[0]
-        ?.split("+")
-        .map((key) => (key === "meta" ? "cmd" : key));
+      const keys = meta.defaultHotkeys?.[0]?.split("+");
       shortcutOptions.push({
         tokens: ["shortcuts", "commands", label],
         type: "shortcut",

apps/builder/app/builder/features/style-panel/shared/modifier-keys.ts

@@ -39,7 +39,7 @@ export const useModifierKeys = () => {
     window.addEventListener("keydown", handler);
     window.addEventListener("keyup", handler);
     // The use of only the keyup/keydown events may not be sufficient.
-    // on a Mac, when the cmd-shift-4 (printscreen) combination is triggered, there is a possibility of losing the keyup event.
+    // on a Mac, when the meta-shift-4 (printscreen) combination is triggered, there is a possibility of losing the keyup event.
     window.addEventListener("mousemove", handler);
 
     return () => {

apps/builder/app/builder/features/topbar/builder-mode.tsx

@@ -44,14 +44,14 @@ export const BuilderModeDropDown = () => {
       icon: <PaintBrushIcon />,
       description: "Edit components, styles, and properties",
       title: "Design",
-      shortcut: ["cmd", "shift", "d"],
+      shortcut: ["meta", "shift", "d"],
       enabled: isDesignModeAllowed,
     },
     content: {
       icon: <NotebookAndPenIcon />,
       description: "Modify the page content",
       title: "Content",
-      shortcut: ["cmd", "shift", "c"],
+      shortcut: ["meta", "shift", "c"],
       enabled: isContentModeAllowed,
     },
   } as const;
@@ -74,7 +74,7 @@ export const BuilderModeDropDown = () => {
         content={
           <Flex gap="1">
             <Text variant="regular">Toggle preview</Text>
-            <Kbd value={["cmd", "shift", "p"]} />
+            <Kbd value={["meta", "shift", "p"]} />
           </Flex>
         }
       >

apps/builder/app/builder/features/topbar/menu/menu.tsx

@@ -107,13 +107,13 @@ export const Menu = () => {
         <DropdownMenuItem onSelect={() => emitCommand("undo")}>
           Undo
           <DropdownMenuItemRightSlot>
-            <Kbd value={["cmd", "z"]} />
+            <Kbd value={["meta", "z"]} />
           </DropdownMenuItemRightSlot>
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={() => emitCommand("redo")}>
           Redo
           <DropdownMenuItemRightSlot>
-            <Kbd value={["cmd", "shift", "z"]} />
+            <Kbd value={["meta", "shift", "z"]} />
           </DropdownMenuItemRightSlot>
         </DropdownMenuItem>
         {/* https://github.com/webstudio-is/webstudio/issues/499
@@ -124,15 +124,15 @@ export const Menu = () => {
             }}
           >
             Copy
-            <DropdownMenuItemRightSlot><Kbd value={["cmd", "c"]} /></DropdownMenuItemRightSlot>
+            <DropdownMenuItemRightSlot><Kbd value={["meta", "c"]} /></DropdownMenuItemRightSlot>
           </DropdownMenuItem>
           <DropdownMenuItem
             onSelect={() => {
               // TODO
             }}
           >
             Paste
-            <DropdownMenuItemRightSlot><Kbd value={["cmd", "v"]} /></DropdownMenuItemRightSlot>
+            <DropdownMenuItemRightSlot><Kbd value={["meta", "v"]} /></DropdownMenuItemRightSlot>
           </DropdownMenuItem>
 
           */}
@@ -146,7 +146,7 @@ export const Menu = () => {
         <DropdownMenuItem onSelect={() => emitCommand("togglePreviewMode")}>
           Preview
           <DropdownMenuItemRightSlot>
-            <Kbd value={["cmd", "shift", "p"]} />
+            <Kbd value={["meta", "shift", "p"]} />
           </DropdownMenuItemRightSlot>
         </DropdownMenuItem>
 
@@ -242,7 +242,7 @@ export const Menu = () => {
           <DropdownMenuItem onSelect={() => emitCommand("openCommandPanel")}>
             Search & Commands
             <DropdownMenuItemRightSlot>
-              <Kbd value={["cmd", "k"]} />
+              <Kbd value={["meta", "k"]} />
             </DropdownMenuItemRightSlot>
           </DropdownMenuItem>
         )}

apps/builder/app/builder/shared/code-editor-base.tsx

@@ -402,7 +402,7 @@ export const EditorContent = ({
       {showShortcuts && (
         <Flex align="center" justify="end" gap="1" className={shortcutStyle()}>
           <Text variant="small">Submit</Text>
-          <Kbd value={["cmd", "enter"]} />
+          <Kbd value={["meta", "enter"]} />
         </Flex>
       )}
     </div>

apps/builder/app/builder/shared/commands.ts

@@ -513,7 +513,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
 
     {
       name: "undo",
-      // safari use cmd+z to reopen closed tabs, here added ctrl as alternative
+      // safari use meta+z to reopen closed tabs, here added ctrl as alternative
       defaultHotkeys: ["meta+z", "ctrl+z"],
       disableOnInputLikeControls: true,
       handler: () => {
@@ -522,7 +522,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
     },
     {
       name: "redo",
-      // safari use cmd+z to reopen closed tabs, here added ctrl as alternative
+      // safari use meta+z to reopen closed tabs, here added ctrl as alternative
       defaultHotkeys: ["meta+shift+z", "ctrl+shift+z"],
       disableOnInputLikeControls: true,
       handler: () => {

apps/builder/app/shared/commands-emitter.ts

@@ -17,7 +17,7 @@ type CommandMeta<CommandName extends string> = {
    **/
   disableOnInputLikeControls?: boolean;
   /**
-   * hide the command in cmd+k panel
+   * hide the command in meta+k panel
    */
   hidden?: boolean;
 };

packages/design-system/src/components/command.stories.tsx

@@ -67,7 +67,7 @@ const CommandContent = () => {
               </CommandIcon>
               <Text variant="labelsTitleCase">Profile</Text>
             </Flex>
-            <Kbd value={["cmd", "p"]} />
+            <Kbd value={["meta", "p"]} />
           </CommandItem>
           <CommandItem>
             <Flex gap={2}>
@@ -76,7 +76,7 @@ const CommandContent = () => {
               </CommandIcon>
               <Text variant="labelsTitleCase">Billing</Text>
             </Flex>
-            <Kbd value={["cmd", "b"]} />
+            <Kbd value={["meta", "b"]} />
           </CommandItem>
           <CommandItem>
             <Flex gap={2}>
@@ -85,7 +85,7 @@ const CommandContent = () => {
               </CommandIcon>
               <Text variant="labelsTitleCase">Settings</Text>
             </Flex>
-            <Kbd value={["cmd", "s"]} />
+            <Kbd value={["meta", "s"]} />
           </CommandItem>
         </CommandGroup>
       </CommandList>

packages/design-system/src/components/kbd.stories.tsx

@@ -4,6 +4,6 @@ export default {
   title: "Library/Kbd",
 };
 
-const KbdStory = () => <Kbd value={["cmd", "z"]} />;
+const KbdStory = () => <Kbd value={["meta", "z"]} />;
 
 export { KbdStory as Kbd };

packages/design-system/src/components/kbd.tsx

@@ -4,7 +4,7 @@ const isMac =
   typeof navigator === "object" ? /mac/i.test(navigator.platform) : false;
 
 const shortcutSymbolMap: Record<string, string> = {
-  cmd: isMac ? "⌘" : "Ctrl",
+  meta: isMac ? "⌘" : "Ctrl",
   shift: "⇧",
   alt: isMac ? "⌥" : "Alt",
   backspace: "⌫",