@pascal-app/editor 1.0.0-beta.5 → 1.0.0

package/src/components/ui/sidebar/panels/settings-panel/index.tsx

@@ -1,21 +1,41 @@
 import {
   clearSceneHistory,
   emitter,
+  isNodeKindEnabled,
+  nodeRegistry,
+  useRegistryVersion,
   useScene,
+  type ParsedBuildJson,
   validateBuildJson,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { useViewer, viewerPresentationRegistry } from '@pascal-app/viewer'
 import { TreeView, VisualJson } from '@visual-json/react'
-import { Camera, Download, Map as MapIcon, Save, Trash2, Upload } from 'lucide-react'
+import {
+  Camera,
+  Check,
+  ChevronDown,
+  Copy,
+  Download,
+  Map as MapIcon,
+  Save,
+  Trash2,
+  Upload,
+} from 'lucide-react'
 import {
   type KeyboardEvent,
   type SyntheticEvent,
   useCallback,
+  useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from 'react'
-import { exportFloorplanPdf } from '../../../../../lib/floorplan/floorplan-export'
+import {
+  exportFloorplanPdf,
+  type FloorplanExportScope,
+} from '../../../../../lib/floorplan/floorplan-export'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
   Dialog,
@@ -23,12 +43,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from './../../../../../components/ui/primitives/dialog'
+import { Input } from './../../../../../components/ui/primitives/input'
 import { Switch } from './../../../../../components/ui/primitives/switch'
 import useEditor, { selectDefaultBuildingAndLevel } from './../../../../../store/use-editor'
 import useFloorplanMode from './../../../../../store/use-floorplan-mode'
 import { AudioSettingsDialog } from './audio-settings-dialog'
 import { KeyboardShortcutsDialog } from './keyboard-shortcuts-dialog'
 import { LoadBuildDialog, type PendingImport } from './load-build-dialog'
+import { PrintExportButton } from './print-export-button'
 
 type SceneNode = Record<string, unknown> & {
   id?: unknown
@@ -53,6 +75,21 @@ type SceneGraphValue = {
   detachedNodes?: SceneGraphNode[]
 }
 
+const MODEL_EXPORT_FORMATS = [
+  { format: 'glb', label: 'GLB' },
+  { format: 'usdz', label: 'USDZ' },
+  { format: 'stl', label: 'STL' },
+  { format: 'obj', label: 'OBJ' },
+] as const
+
+type ModelExportFormat = (typeof MODEL_EXPORT_FORMATS)[number]['format']
+
+type ExportableNodeType = {
+  type: string
+  label: string
+  supportsGeometryOnly: boolean
+}
+
 const isSceneNode = (value: unknown): value is SceneNode => {
   return (
     typeof value === 'object' &&
@@ -184,18 +221,78 @@ export function SettingsPanel({
   onVisibilityChange,
 }: SettingsPanelProps = {}) {
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const copyResetTimeoutRef = useRef<number | null>(null)
   const nodes = useScene((state) => state.nodes)
   const rootNodeIds = useScene((state) => state.rootNodeIds)
   const installedPlugins = useScene((state) => state.installedPlugins)
+  const materials = useScene((state) => state.materials)
   const setScene = useScene((state) => state.setScene)
   const clearScene = useScene((state) => state.clearScene)
   const resetSelection = useViewer((state) => state.resetSelection)
-  const exportScene = useViewer((state) => state.exportScene)
+  const modelExport = useEditor((state) => state.modelExport)
   const shadows = useViewer((state) => state.shadows)
   const setPhase = useEditor((state) => state.setPhase)
   const floorplanMode = useFloorplanMode((state) => state.mode)
+  const registryVersion = useRegistryVersion()
+  const visibleOnlySwitchId = useId()
+  const includeNodeTypeIdPrefix = useId()
+  const includePresentationIdPrefix = useId()
   const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false)
+  const [exportOnlyVisible, setExportOnlyVisible] = useState(true)
+  const [excludedNodeTypes, setExcludedNodeTypes] = useState<string[]>([])
+  const [includedPresentationIds, setIncludedPresentationIds] = useState<string[]>([])
+  const [activeModelExport, setActiveModelExport] = useState<ModelExportFormat | null>(null)
+  const [modelExportError, setModelExportError] = useState<string | null>(null)
+  const [modelExportWarning, setModelExportWarning] = useState<string | null>(null)
+  const [activeFloorplanExport, setActiveFloorplanExport] = useState<FloorplanExportScope | null>(
+    null,
+  )
+  const [floorplanExportError, setFloorplanExportError] = useState<string | null>(null)
   const [pendingImport, setPendingImport] = useState<PendingImport | null>(null)
+  const [projectIdCopyState, setProjectIdCopyState] = useState<'idle' | 'copied' | 'error'>('idle')
+  const exportableNodeTypes = useMemo(() => {
+    void registryVersion
+    const uniqueTypes = new Set(Object.values(nodes).map((node) => node.type))
+    const options: ExportableNodeType[] = []
+
+    for (const type of uniqueTypes) {
+      const definition = nodeRegistry.get(type)
+      if (
+        !(
+          definition?.bakeGeometry ||
+          definition?.bakeGeometryAsync ||
+          definition?.bake === 'replace'
+        ) ||
+        !isNodeKindEnabled(type, installedPlugins)
+      ) {
+        continue
+      }
+      options.push({
+        type,
+        label: definition.presentation?.label ?? type,
+        supportsGeometryOnly: !definition.bakeGeometryAsync || Boolean(definition.bakeGeometry),
+      })
+    }
+
+    return options.sort((a, b) => {
+      const labelOrder = a.label.localeCompare(b.label)
+      return labelOrder === 0 ? a.type.localeCompare(b.type) : labelOrder
+    })
+  }, [installedPlugins, nodes, registryVersion])
+  const registeredPresentations = useSyncExternalStore(
+    viewerPresentationRegistry.subscribe,
+    viewerPresentationRegistry.getSnapshot,
+    viewerPresentationRegistry.getSnapshot,
+  )
+  const exportablePresentations = useMemo(
+    () =>
+      registeredPresentations.filter(
+        (contribution) =>
+          contribution.staticExport &&
+          (!contribution.pluginId || installedPlugins.includes(contribution.pluginId)),
+      ),
+    [installedPlugins, registeredPresentations],
+  )
   const sceneGraphValue = useMemo(
     () => buildSceneGraphValue(nodes as Record<string, SceneNode>, rootNodeIds),
     [nodes, rootNodeIds],
@@ -211,10 +308,22 @@ export function SettingsPanel({
     }
   }, [])
 
+  useEffect(
+    () => () => {
+      if (copyResetTimeoutRef.current !== null) {
+        window.clearTimeout(copyResetTimeoutRef.current)
+      }
+    },
+    [],
+  )
+
   const isLocalProject = false // Props-based; only show cloud sections when projectId provided
 
   const handleSaveBuild = () => {
-    const sceneData = { nodes, rootNodeIds, installedPlugins }
+    // Materials ride along: nodes reference them by `scene:<id>` slot
+    // refs, so a save without the table produces a file whose custom
+    // finishes revert to defaults on the very Load Build path below.
+    const sceneData = { nodes, rootNodeIds, installedPlugins, materials }
     const json = JSON.stringify(sceneData, null, 2)
     const blob = new Blob([json], { type: 'application/json' })
     const url = URL.createObjectURL(blob)
@@ -270,16 +379,16 @@ export function SettingsPanel({
     e.target.value = ''
   }
 
-  const handleConfirmImport = (parsed: {
-    nodes: Record<string, unknown>
-    rootNodeIds: string[]
-    installedPlugins?: string[]
-  }) => {
+  const handleConfirmImport = (parsed: ParsedBuildJson) => {
     const currentScene = useScene.getState()
     setScene(
       parsed.nodes as Parameters<typeof setScene>[0],
       parsed.rootNodeIds as Parameters<typeof setScene>[1],
       {
+        // Without this, every `scene:<id>` slot ref in the imported file
+        // pointed at a material that no longer existed — custom finishes
+        // silently reverted to defaults on import.
+        materials: parsed.materials,
         installedPlugins: parsed.installedPlugins ?? currentScene.installedPlugins,
         hasExplicitPluginInstallState:
           parsed.installedPlugins !== undefined || currentScene.hasExplicitPluginInstallState,
@@ -310,6 +419,25 @@ export function SettingsPanel({
     setTimeout(() => setIsGeneratingThumbnail(false), 3000)
   }
 
+  const handleCopyProjectId = async () => {
+    if (!projectId) return
+    if (copyResetTimeoutRef.current !== null) {
+      window.clearTimeout(copyResetTimeoutRef.current)
+    }
+
+    try {
+      await navigator.clipboard.writeText(projectId)
+      setProjectIdCopyState('copied')
+    } catch {
+      setProjectIdCopyState('error')
+    }
+
+    copyResetTimeoutRef.current = window.setTimeout(() => {
+      setProjectIdCopyState('idle')
+      copyResetTimeoutRef.current = null
+    }, 2000)
+  }
+
   const handleVisibilityChange = async (
     field: 'isPrivate' | 'showScansPublic' | 'showGuidesPublic',
     value: boolean,
@@ -317,8 +445,105 @@ export function SettingsPanel({
     await onVisibilityChange?.(field, value)
   }
 
+  const handleNodeTypeInclusion = useCallback((type: string, included: boolean) => {
+    setExcludedNodeTypes((current) => {
+      const isExcluded = current.includes(type)
+      if (included) {
+        return isExcluded ? current.filter((excludedType) => excludedType !== type) : current
+      }
+      return isExcluded ? current : [...current, type]
+    })
+  }, [])
+  const handlePresentationInclusion = useCallback((id: string, included: boolean) => {
+    setIncludedPresentationIds((current) => {
+      const isIncluded = current.includes(id)
+      if (included) return isIncluded ? current : [...current, id]
+      return isIncluded ? current.filter((includedId) => includedId !== id) : current
+    })
+  }, [])
+
+  const handleModelExport = async (format: ModelExportFormat, label: string) => {
+    if (!modelExport || activeModelExport) return
+
+    setActiveModelExport(format)
+    setModelExportError(null)
+    setModelExportWarning(null)
+    try {
+      const artifact = await modelExport(format, {
+        onlyVisible: exportOnlyVisible,
+        excludedNodeTypes,
+        includedPresentationIds:
+          format === 'glb' || format === 'usdz'
+            ? includedPresentationIds.filter((id) =>
+                exportablePresentations.some((contribution) => contribution.id === id),
+              )
+            : [],
+      })
+      if (!artifact) {
+        throw new Error('Model export did not produce a file')
+      }
+      if (artifact.warnings?.length) setModelExportWarning(artifact.warnings.join(' '))
+    } catch (error) {
+      setModelExportError(
+        error instanceof Error ? error.message : `Couldn’t export ${label}. Try again.`,
+      )
+    } finally {
+      setActiveModelExport(null)
+    }
+  }
+
+  const handleFloorplanExport = async (scope: FloorplanExportScope) => {
+    if (activeFloorplanExport) return
+
+    setActiveFloorplanExport(scope)
+    setFloorplanExportError(null)
+    try {
+      await exportFloorplanPdf(scope)
+    } catch (error) {
+      setFloorplanExportError(
+        `Couldn’t export the floor plan. ${error instanceof Error ? error.message : 'Try again.'}`,
+      )
+    } finally {
+      setActiveFloorplanExport(null)
+    }
+  }
+
   return (
-    <div className="flex flex-col gap-6 p-3">
+    <div className="subtle-scrollbar min-h-0 flex-1 space-y-6 overflow-x-hidden overflow-y-auto overscroll-contain p-3">
+      {projectId && (
+        <div className="space-y-2">
+          <label className="font-medium text-muted-foreground text-xs uppercase">Project</label>
+          <div className="font-medium text-sm">Project ID</div>
+          <div className="flex items-center gap-2">
+            <Input
+              aria-label="Project ID"
+              className="font-mono text-xs"
+              readOnly
+              value={projectId}
+            />
+            <Button
+              aria-label={projectIdCopyState === 'copied' ? 'Project ID copied' : 'Copy project ID'}
+              className="rounded-full"
+              onClick={() => void handleCopyProjectId()}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              {projectIdCopyState === 'copied' ? (
+                <Check className="size-3.5" />
+              ) : (
+                <Copy className="size-3.5" />
+              )}
+              {projectIdCopyState === 'copied'
+                ? 'Copied'
+                : projectIdCopyState === 'error'
+                  ? 'Try again'
+                  : 'Copy'}
+            </Button>
+          </div>
+        </div>
+      )}
+
       {/* Visibility Section (only for cloud projects) */}
       {projectId && !isLocalProject && (
         <div className="space-y-3">
@@ -331,6 +556,7 @@ export function SettingsPanel({
               </div>
             </div>
             <Switch
+              aria-label="Make project public"
               checked={!(projectVisibility?.isPrivate ?? false)}
               onCheckedChange={(checked) => handleVisibilityChange('isPrivate', !checked)}
             />
@@ -341,6 +567,7 @@ export function SettingsPanel({
               <div className="text-muted-foreground text-xs">Visible to public viewers</div>
             </div>
             <Switch
+              aria-label="Show 3D scans to public viewers"
               checked={projectVisibility?.showScansPublic ?? true}
               onCheckedChange={(checked) => handleVisibilityChange('showScansPublic', checked)}
             />
@@ -351,6 +578,7 @@ export function SettingsPanel({
               <div className="text-muted-foreground text-xs">Visible to public viewers</div>
             </div>
             <Switch
+              aria-label="Show floorplans to public viewers"
               checked={projectVisibility?.showGuidesPublic ?? true}
               onCheckedChange={(checked) => handleVisibilityChange('showGuidesPublic', checked)}
             />
@@ -361,6 +589,7 @@ export function SettingsPanel({
               <div className="text-muted-foreground text-xs">Cast shadows from lights</div>
             </div>
             <Switch
+              aria-label="Enable shadows"
               checked={shadows}
               onCheckedChange={(checked) => useViewer.getState().setShadows(checked)}
             />
@@ -374,30 +603,141 @@ export function SettingsPanel({
 
         <div className="space-y-2">
           <div className="font-medium text-muted-foreground text-xs">3D model</div>
-          <Button
-            className="w-full justify-start gap-2"
-            onClick={() => exportScene?.('glb')}
-            variant="outline"
-          >
-            <Download className="size-4" />
-            Export GLB
-          </Button>
-          <Button
-            className="w-full justify-start gap-2"
-            onClick={() => exportScene?.('stl')}
-            variant="outline"
+          <details
+            className="group"
+            onKeyDownCapture={(event) => {
+              // Keep Space available to the disclosure and switches, not canvas panning.
+              if (event.code === 'Space') event.stopPropagation()
+            }}
           >
-            <Download className="size-4" />
-            Export STL
-          </Button>
-          <Button
-            className="w-full justify-start gap-2"
-            onClick={() => exportScene?.('obj')}
-            variant="outline"
-          >
-            <Download className="size-4" />
-            Export OBJ
-          </Button>
+            <summary className="flex min-h-10 cursor-pointer list-none items-center justify-between rounded-md border px-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-ring">
+              Export options
+              <ChevronDown aria-hidden="true" className="size-4 group-open:rotate-180" />
+            </summary>
+            <div className="space-y-3 pt-3">
+              <div className="flex items-center justify-between gap-4 rounded-md border p-3">
+                <div className="min-w-0">
+                  <label className="font-medium text-sm" htmlFor={visibleOnlySwitchId}>
+                    Visible nodes only
+                  </label>
+                  <div className="text-muted-foreground text-xs">
+                    Exclude hidden furniture and other hidden scene nodes
+                  </div>
+                </div>
+                <Switch
+                  aria-label="Export visible nodes only"
+                  checked={exportOnlyVisible}
+                  id={visibleOnlySwitchId}
+                  onCheckedChange={setExportOnlyVisible}
+                />
+              </div>
+
+              <fieldset className="space-y-2 rounded-md border p-3">
+                <legend className="px-1 font-medium text-sm">Include in file</legend>
+                <p className="text-muted-foreground text-xs">
+                  Choose which procedural content is baked into model files. GLB and USDZ use the
+                  textured portable path; STL and OBJ remain geometry-only.
+                </p>
+                {exportableNodeTypes.length > 0 ? (
+                  <div className="space-y-2 pt-1">
+                    {exportableNodeTypes.map(({ type, label, supportsGeometryOnly }, index) => {
+                      const switchId = `${includeNodeTypeIdPrefix}-${index}`
+                      return (
+                        <div className="flex items-center justify-between gap-4" key={type}>
+                          <label className="min-w-0 font-medium text-sm" htmlFor={switchId}>
+                            {label}
+                            {!supportsGeometryOnly && (
+                              <span className="text-muted-foreground text-xs"> (GLB/USDZ only)</span>
+                            )}
+                          </label>
+                          <Switch
+                            aria-label={`Include ${label} in model files`}
+                            checked={!excludedNodeTypes.includes(type)}
+                            id={switchId}
+                            onCheckedChange={(included) => handleNodeTypeInclusion(type, included)}
+                          />
+                        </div>
+                      )
+                    })}
+                  </div>
+                ) : (
+                  <p className="text-muted-foreground text-xs">
+                    No optional procedural content is present.
+                  </p>
+                )}
+                <p className="text-muted-foreground text-xs">
+                  Viewer surroundings are excluded unless selected separately below.
+                </p>
+              </fieldset>
+              {exportablePresentations.length > 0 ? (
+                <fieldset className="space-y-2 rounded-md border p-3">
+                  <legend className="px-1 font-medium text-sm">Viewer surroundings</legend>
+                  <p className="text-muted-foreground text-xs">
+                    Optional static surroundings are included only in GLB and USDZ.
+                  </p>
+                  <div className="space-y-2 pt-1">
+                    {exportablePresentations.map((contribution, index) => {
+                      const switchId = `${includePresentationIdPrefix}-${index}`
+                      const label = contribution.staticExport!.label
+                      return (
+                        <div
+                          className="flex items-center justify-between gap-4"
+                          key={contribution.id}
+                        >
+                          <label className="min-w-0 font-medium text-sm" htmlFor={switchId}>
+                            {label}
+                          </label>
+                          <Switch
+                            aria-label={`Include ${label} in GLB and USDZ`}
+                            checked={includedPresentationIds.includes(contribution.id)}
+                            id={switchId}
+                            onCheckedChange={(included) =>
+                              handlePresentationInclusion(contribution.id, included)
+                            }
+                          />
+                        </div>
+                      )
+                    })}
+                  </div>
+                </fieldset>
+              ) : null}
+            </div>
+          </details>
+
+          {MODEL_EXPORT_FORMATS.map(({ format, label }) => {
+            const isActive = activeModelExport === format
+            return (
+              <Button
+                aria-busy={isActive}
+                className="w-full justify-start gap-2"
+                disabled={activeModelExport !== null || !modelExport}
+                key={format}
+                onClick={() => void handleModelExport(format, label)}
+                variant="outline"
+              >
+                <Download aria-hidden="true" className="size-4" />
+                {isActive ? `Exporting ${label}…` : `Export ${label}`}
+              </Button>
+            )
+          })}
+
+          {activeModelExport ? (
+            <p className="text-muted-foreground text-xs" role="status">
+              Preparing {activeModelExport.toUpperCase()} file…
+            </p>
+          ) : null}
+          {modelExportError ? (
+            <p className="text-destructive text-xs" role="alert">
+              {modelExportError}
+            </p>
+          ) : null}
+          {modelExportWarning ? (
+            <p className="text-foreground text-xs" role="status">
+              Warning: {modelExportWarning}
+            </p>
+          ) : null}
+
+          <PrintExportButton onlyVisible={exportOnlyVisible} />
         </div>
 
         <div className="space-y-2">
@@ -406,21 +746,35 @@ export function SettingsPanel({
             <span>{floorplanMode === 'default' ? 'Default mode' : 'Expert mode'}</span>
           </div>
           <Button
+            aria-busy={activeFloorplanExport === 'full'}
             className="w-full justify-start gap-2"
-            onClick={() => exportFloorplanPdf('full')}
+            disabled={activeFloorplanExport !== null}
+            onClick={() => void handleFloorplanExport('full')}
             variant="outline"
           >
             <MapIcon className="size-4" />
             Full floor plan
           </Button>
           <Button
+            aria-busy={activeFloorplanExport === 'structure'}
             className="w-full justify-start gap-2"
-            onClick={() => exportFloorplanPdf('structure')}
+            disabled={activeFloorplanExport !== null}
+            onClick={() => void handleFloorplanExport('structure')}
             variant="outline"
           >
             <MapIcon className="size-4" />
             Structure only
           </Button>
+          {activeFloorplanExport ? (
+            <p className="text-muted-foreground text-xs" role="status">
+              Preparing floor-plan PDF…
+            </p>
+          ) : null}
+          {floorplanExportError ? (
+            <p className="break-words text-destructive text-xs" role="alert">
+              {floorplanExportError}
+            </p>
+          ) : null}
         </div>
       </div>
 

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -1,5 +1,4 @@
 import { Keyboard } from 'lucide-react'
-import { useEffect, useState } from 'react'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
   Dialog,
@@ -9,7 +8,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from './../../../../../components/ui/primitives/dialog'
-import { ShortcutToken } from './../../../../../components/ui/primitives/shortcut-token'
+import {
+  ShortcutToken,
+  shortcutDisplayValue,
+} from './../../../../../components/ui/primitives/shortcut-token'
 
 type Shortcut = {
   keys: string[]
@@ -22,14 +24,6 @@ type ShortcutCategory = {
   shortcuts: Shortcut[]
 }
 
-const KEY_DISPLAY_MAP: Record<string, string> = {
-  'Arrow Up': '↑',
-  'Arrow Down': '↓',
-  Esc: '⎋',
-  Shift: '⇧',
-  Space: '␣',
-}
-
 const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
     title: 'Editor Navigation',
@@ -60,10 +54,12 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       {
         keys: ['Esc'],
         action: 'Cancel the active tool and return to Select mode',
+        note: 'Mid-draw it cancels only the chain in progress and keeps the tool armed; press it again to leave the tool.',
       },
       { keys: ['Delete / Backspace'], action: 'Delete selected objects' },
       { keys: ['Cmd/Ctrl', 'Z'], action: 'Undo' },
       { keys: ['Cmd/Ctrl', 'Shift', 'Z'], action: 'Redo' },
+      { keys: ['Cmd/Ctrl', 'S'], action: 'Save' },
     ],
   },
   {
@@ -147,6 +143,19 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
     title: 'Drawing Tools',
     shortcuts: [
+      // Shift and Ctrl each mean one thing held and another tapped, and only
+      // the hold was documented — which read as the taps not existing. Both
+      // taps are listed first because they are the ones nobody discovers.
+      {
+        keys: ['Shift'],
+        action: 'Cycle the snapping mode',
+        note: 'Tap and release without pressing anything else, while a drawing or move gesture is available.',
+      },
+      {
+        keys: ['Cmd/Ctrl'],
+        action: 'Cycle the grid step: 0.5 m → 0.25 m → 0.1 m → 0.05 m',
+        note: 'Tap and release on its own. Use it when the default half-metre grid is too coarse — placing a window, for instance.',
+      },
       {
         keys: ['Shift'],
         action: 'Bypass guided snapping and angle constraints',
@@ -199,25 +208,13 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   },
 ]
 
-function getDisplayKey(key: string, isMac: boolean): string {
-  if (key === 'Cmd/Ctrl') return isMac ? '⌘' : 'Ctrl'
-  if (key === 'Delete / Backspace') return isMac ? '⌫' : 'Backspace'
-  return KEY_DISPLAY_MAP[key] ?? key
-}
-
 function ShortcutKeys({ keys }: { keys: string[] }) {
-  const [isMac, setIsMac] = useState(true)
-
-  useEffect(() => {
-    setIsMac(navigator.platform.toUpperCase().indexOf('MAC') >= 0)
-  }, [])
-
   return (
     <div className="flex flex-wrap items-center gap-1">
       {keys.map((key, index) => (
         <div className="flex items-center gap-1" key={`${key}-${index}`}>
           {index > 0 ? <span className="text-[10px] text-muted-foreground">+</span> : null}
-          <ShortcutToken displayValue={getDisplayKey(key, isMac)} value={key} />
+          <ShortcutToken displayValue={shortcutDisplayValue(key)} value={key} />
         </div>
       ))}
     </div>