formatForDisplay orders macOS modifiers differently from Apple HIG

[OliverJAsh]

TanStack Hotkeys version

@tanstack/hotkeys v0.8.0

Framework/Library version

React, via @tanstack/react-hotkeys

Describe the bug and the steps to reproduce it

formatForDisplay currently formats multi-modifier shortcuts on macOS in the library's canonical modifier order.

For example:

formatForDisplay("Mod+Shift+S", { platform: "mac" })

currently returns:

⌘ ⇧ S

Apple's Human Interface Guidelines say custom keyboard shortcuts should list modifier keys in this order:

Control, Option, Shift, Command

So on macOS I would expect:

⇧ ⌘ S

Similarly, combinations involving Option/Shift/Command should be displayed in Apple HIG order, while keeping the existing canonical order for parsing/normalization if needed.

Reference:
https://developer.apple.com/design/human-interface-guidelines/keyboards#Custom-keyboard-shortcuts

Minimal reproduction

No sandbox needed; this reproduces with the formatter directly:

import { formatForDisplay } from "@tanstack/hotkeys";

formatForDisplay("Mod+Shift+S", { platform: "mac" });
// actual: "⌘ ⇧ S"
// expected: "⇧ ⌘ S"

Suggested fix

Keep parser/normalization order as-is, but make macOS display formatting sort modifier tokens as:

Control → Option → Shift → Command

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

[IanWorley]

Hey I wouldn't mind taking this issue if it available? @OliverJAsh @KevinVandy

[KevinVandy]

Hey I wouldn't mind taking this issue if it available? @OliverJAsh @KevinVandy

Go for it. Unfortunately, I'm barely able to review hotkeys stuff until the end of the month. Too much on me to do to get table v9 out