Function mount

examples/vanilla/formatForDisplay/src/main.ts:43–123

(root: HTMLElement)

}

function mount(root: HTMLElement) {
  let platform: Platform = getStoredPlatform()

  root.innerHTML = `
    <h1>formatForDisplay</h1>
    <p class="lead">
      Mock the viewer's OS to see how the same chord string is shown in the UI.
      Two columns both use <code>formatForDisplay</code> with
      <code>useSymbols: true</code> vs <code>useSymbols: false</code>.
      Uses <code>@tanstack/hotkeys</code> only (no framework).
    </p>
    <fieldset>
      <legend>Display platform</legend>
      <div class="platform-options" id="platform-radios"></div>
    </fieldset>
    <table>
      <thead>
        <tr>
          <th>Raw</th>
          <th><code>formatForDisplay</code> (<code>useSymbols: true</code>)</th>
          <th><code>formatForDisplay</code> (<code>useSymbols: false</code>)</th>
        </tr>
      </thead>
      <tbody id="shortcut-rows"></tbody>
    </table>
  `

  const radiosHost = root.querySelector('#platform-radios')!
  const tbody = root.querySelector('#shortcut-rows')!

  const platforms: Array<{ value: Platform; label: string }> = [
    { value: 'mac', label: 'macOS' },
    { value: 'windows', label: 'Windows' },
    { value: 'linux', label: 'Linux' },
  ]

  for (const { value, label } of platforms) {
    const id = `platform-${value}`
    const wrap = document.createElement('label')
    wrap.innerHTML = `
      <input type="radio" name="platform" id="${id}" value="${value}" ${
        platform === value ? 'checked' : ''
      } />
      <span>${label}</span>
    `
    radiosHost.appendChild(wrap)
  }

  function renderRows() {
    tbody.replaceChildren()
    for (const hotkey of SHORTCUTS) {
      const tr = document.createElement('tr')
      const withSymbols = formatForDisplay(hotkey, {
        platform,
        useSymbols: true,
      })
      const withLabels = formatForDisplay(hotkey, {
        platform,