From ea8b463850cd23112bcd572d58d86d64ff1eec76 Mon Sep 17 00:00:00 2001
From: Gediminas Zukas <136955+gzukas@users.noreply.github.com>
Date: Thu, 27 Feb 2025 21:54:15 +0200
Subject: [PATCH 1/2] chore: minor tweaks

---
 apps/web/src/App.tsx                     | 14 +++++++-------
 apps/web/src/components/ImportImages.tsx |  4 ++--
 apps/web/src/components/NoImages.tsx     | 24 ++++++++++++++++++------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 1a11a7b..a18f4c5 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -18,8 +18,8 @@ export function App() {
   return (
     <AppProvider>
       <div className="bg-grid pointer-events-none absolute inset-0 [mask-image:linear-gradient(180deg,#fff_5%,transparent_80%)] select-none"></div>
-      <div className="relative grid h-dvh w-dvw grid-rows-[auto_1fr_auto] overflow-hidden">
-        <header className="grid grid-cols-[1fr_2fr_1fr] items-center p-2.5 sm:p-5">
+      <div className="relative grid h-dvh w-dvw grid-rows-[auto_1fr_auto] overflow-hidden p-5">
+        <header className="grid grid-cols-[1fr_2fr_1fr] items-center">
           <section className="col-start-2 justify-self-center">
             <div className="bg-card flex items-center rounded-md border p-1 shadow-xs sm:gap-1">
               <ImportImages variant="ghost" />
@@ -33,22 +33,22 @@ export function App() {
               <RemoveImages variant="ghost" />
             </div>
           </section>
-          <ChangeTheme className="justify-self-end" />
+          <ChangeTheme className="justify-self-end" variant="outline" />
         </header>
 
-        <main className="grid place-items-center overflow-auto p-20">
+        <main className="grid place-items-center overflow-auto">
           <Suspense
             fallback={<LoaderCircle className="size-12 animate-spin" />}
           >
             <Graphics
-              className="h-full w-full drop-shadow-2xl"
+              className="h-full w-full p-16 drop-shadow-xl md:drop-shadow-2xl"
               fallback={<NoImages />}
             />
           </Suspense>
         </main>
 
-        <footer className="p-5 pb-8 sm:pb-12">
-          <section className="mx-auto grid max-w-4xl grid-cols-1 gap-12 sm:grid-cols-3">
+        <footer className="pb-3 sm:pb-7">
+          <section className="mx-auto grid max-w-4xl grid-cols-1 gap-12 lg:grid-cols-3">
             <Waveform />
           </section>
         </footer>
diff --git a/apps/web/src/components/ImportImages.tsx b/apps/web/src/components/ImportImages.tsx
index 6faa7ec..082d9c0 100644
--- a/apps/web/src/components/ImportImages.tsx
+++ b/apps/web/src/components/ImportImages.tsx
@@ -90,7 +90,7 @@ export function ImportImages(props: ImportImagesProps) {
           <div className="hidden sm:block">
             <Plural
               value={images.length}
-              _0="Import"
+              _0="Open"
               one="# image"
               other="# images"
             />
@@ -204,7 +204,7 @@ export function ImportImages(props: ImportImagesProps) {
                     'animate-spin': isImporting
                   })}
                 />
-                <Trans>Import</Trans>
+                <Trans>Capture</Trans>
               </Button>
             </DialogFooter>
           </form>
diff --git a/apps/web/src/components/NoImages.tsx b/apps/web/src/components/NoImages.tsx
index e07991b..cab0ae1 100644
--- a/apps/web/src/components/NoImages.tsx
+++ b/apps/web/src/components/NoImages.tsx
@@ -1,13 +1,16 @@
 import { useSetAtom } from 'jotai';
 import { ImageOff, Folder } from 'lucide-react';
 import { Trans } from '@lingui/react/macro';
+import { cn } from '@workspace/ui/lib/utils';
 import { Button } from '@workspace/ui/components/button';
 import { Shortcut } from '@/components/Shortcut';
 import { importAtom, importSignalAtom } from '@/atoms/importAtoms';
 import { siteConfig } from '@/config/site';
 import { HOTKEYS } from '@/constants';
 
-export function NoImages() {
+export type NoImagesProps = React.ComponentProps<'div'>;
+
+export function NoImages(props: NoImagesProps) {
   const importImage = useSetAtom(importAtom);
   const toggleImportSignal = useSetAtom(importSignalAtom);
 
@@ -20,21 +23,30 @@ export function NoImages() {
   };
 
   return (
-    <div className="flex max-w-md flex-col items-center gap-6 text-center font-light">
-      <ImageOff className="size-24 text-gray-400" strokeWidth={1.5} />
-      <h1 className="text-4xl">
+    <div
+      {...props}
+      className={cn(
+        'flex max-w-md flex-col items-center gap-6 text-center font-light',
+        props.className
+      )}
+    >
+      <ImageOff
+        className="size-16 text-gray-400 md:size-24"
+        strokeWidth={1.5}
+      />
+      <h1 className="text-3xl">
         <Trans>No images</Trans>
       </h1>
       <p>
         <Trans>
-          Get started by importing your images or check out the example to see
+          Get started by choosing your images or check out the example to see
           how it works.
         </Trans>
       </p>
       <div className="flex w-full flex-col justify-center gap-4 sm:flex-row">
         <Button onClick={handleImportClick}>
           <Folder />
-          Import
+          Open
           <Shortcut keys={HOTKEYS.IMPORT} />
         </Button>
         <Button onClick={handleClick} variant="secondary">

From 31ce5386cc6c27bc24a3ee328531928de0c6ce94 Mon Sep 17 00:00:00 2001
From: Gediminas Zukas <136955+gzukas@users.noreply.github.com>
Date: Sun, 2 Mar 2025 13:23:42 +0200
Subject: [PATCH 2/2] chore: weekly polish

---
 apps/web/index.html                           | 42 +++++-----
 apps/web/src/App.tsx                          | 11 +--
 apps/web/src/atoms/waveAtom.ts                |  5 +-
 apps/web/src/atoms/waveFunctionAtom.ts        |  2 +-
 apps/web/src/components/AtomSlider.tsx        |  5 +-
 .../web/src/components/ChangeWaveFunction.tsx | 11 ++-
 apps/web/src/components/CopyImage.tsx         |  4 +-
 apps/web/src/components/Cos.tsx               |  6 --
 apps/web/src/components/ExportImage.tsx       |  6 +-
 apps/web/src/components/Graphics.tsx          | 22 +++---
 apps/web/src/components/Heartbeat.tsx         |  4 +
 apps/web/src/components/ImportImages.tsx      |  8 +-
 apps/web/src/components/NoImages.tsx          |  8 +-
 .../components/{ => Shortcut}/Shortcut.tsx    | 78 ++++++++++---------
 .../__tests__/Shortcut.test.tsx               | 12 ++-
 .../components/Shortcut/keyDisplayMappings.ts | 31 ++++++++
 apps/web/src/components/Sin.tsx               |  6 +-
 apps/web/src/constants.ts                     |  4 +-
 apps/web/src/utils/waveFunctions.ts           |  4 +
 packages/ui/src/styles/globals.css            |  1 +
 20 files changed, 156 insertions(+), 114 deletions(-)
 delete mode 100644 apps/web/src/components/Cos.tsx
 create mode 100644 apps/web/src/components/Heartbeat.tsx
 rename apps/web/src/components/{ => Shortcut}/Shortcut.tsx (53%)
 rename apps/web/src/components/{ => Shortcut}/__tests__/Shortcut.test.tsx (80%)
 create mode 100644 apps/web/src/components/Shortcut/keyDisplayMappings.ts
 create mode 100644 apps/web/src/utils/waveFunctions.ts

diff --git a/apps/web/index.html b/apps/web/index.html
index 6ad2888..6798375 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -1,26 +1,22 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="Create a screenshot showcasing your app's transition from light to dark theme."
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css2?family=Geist:wght@300;500;600;700&display=swap" rel="stylesheet"
-      as="style"
-      onload="this.onload=null;this.rel='stylesheet'"
-    />
-    <title>Shadowave</title>
-  </head>
 
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Create a screenshot showcasing your app's transition from light to dark theme." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="preload"
+    href="https://fonts.googleapis.com/css2?family=Geist:wght@300;500;600;700&family=Geist+Mono:wght@500&display=swap"
+    rel="stylesheet" as="style" onload="this.onload=null;this.rel='stylesheet'" />
+  <title>Shadowave</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index a18f4c5..9a773bf 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -23,12 +23,13 @@ export function App() {
           <section className="col-start-2 justify-self-center">
             <div className="bg-card flex items-center rounded-md border p-1 shadow-xs sm:gap-1">
               <ImportImages variant="ghost" />
-              <ExportImage />
-              <CopyImage />
               <Separator orientation="vertical" className="h-4" />
-              <ReverseImages variant="ghost" />
               <OptimizeWaveform />
               <ChangeWaveFunction />
+              <ReverseImages variant="ghost" />
+              <Separator orientation="vertical" className="h-4" />
+              <CopyImage />
+              <ExportImage />
               <Separator orientation="vertical" className="h-4" />
               <RemoveImages variant="ghost" />
             </div>
@@ -36,7 +37,7 @@ export function App() {
           <ChangeTheme className="justify-self-end" variant="outline" />
         </header>
 
-        <main className="grid place-items-center overflow-auto">
+        <main className="relative grid place-items-center overflow-auto">
           <Suspense
             fallback={<LoaderCircle className="size-12 animate-spin" />}
           >
@@ -47,7 +48,7 @@ export function App() {
           </Suspense>
         </main>
 
-        <footer className="pb-3 sm:pb-7">
+        <footer className="pb-3 lg:pb-7">
           <section className="mx-auto grid max-w-4xl grid-cols-1 gap-12 lg:grid-cols-3">
             <Waveform />
           </section>
diff --git a/apps/web/src/atoms/waveAtom.ts b/apps/web/src/atoms/waveAtom.ts
index 4a2b591..7e4cbf2 100644
--- a/apps/web/src/atoms/waveAtom.ts
+++ b/apps/web/src/atoms/waveAtom.ts
@@ -2,6 +2,7 @@ import { atom } from 'jotai';
 import { unwrappedLargestImageAtom } from '@/atoms/largestImageAtom';
 import { waveFunctionAtom } from '@/atoms/waveFunctionAtom';
 import { amplitudeAtom, wavelengthAtom } from '@/atoms/waveformAtoms';
+import { sin, heartbeat } from '@/utils/waveFunctions';
 import { WaveFunction } from '@/types';
 
 function round(num: number) {
@@ -9,8 +10,8 @@ function round(num: number) {
 }
 
 const waveFunctionMapping: Record<WaveFunction, (x: number) => number> = {
-  sin: Math.sin,
-  cos: Math.cos
+  sin,
+  heartbeat
 };
 
 export const waveAtom = atom(get => {
diff --git a/apps/web/src/atoms/waveFunctionAtom.ts b/apps/web/src/atoms/waveFunctionAtom.ts
index 311d690..9622dde 100644
--- a/apps/web/src/atoms/waveFunctionAtom.ts
+++ b/apps/web/src/atoms/waveFunctionAtom.ts
@@ -4,7 +4,7 @@ import { WaveFunction } from '@/types';
 
 export const waveFunctionAtom = atomWithStorage<WaveFunction>(
   'waveFunction',
-  WAVE_FUNCTION.SIN,
+  WAVE_FUNCTION.HEARTBEAT,
   undefined,
   { getOnInit: true }
 );
diff --git a/apps/web/src/components/AtomSlider.tsx b/apps/web/src/components/AtomSlider.tsx
index 11a3df6..9aa3cc8 100644
--- a/apps/web/src/components/AtomSlider.tsx
+++ b/apps/web/src/components/AtomSlider.tsx
@@ -5,7 +5,7 @@ import { LabelProps } from '@radix-ui/react-label';
 import { cn } from '@workspace/ui/lib/utils';
 import { Label } from '@workspace/ui/components/label';
 import { Slider } from '@workspace/ui/components/slider';
-import { Shortcut, ShortcutProps } from '@/components/Shortcut';
+import { Shortcut, ShortcutProps } from '@/components/Shortcut/Shortcut';
 
 export interface AtomSliderProps
   extends Omit<React.ComponentProps<typeof Slider>, 'value' | 'onValueChange'> {
@@ -46,7 +46,6 @@ export interface AtomSliderProps
 export function AtomSlider(props: AtomSliderProps) {
   const {
     atom,
-    className,
     label,
     labelProps,
     shortcutProps,
@@ -78,7 +77,7 @@ export function AtomSlider(props: AtomSliderProps) {
   );
 
   return (
-    <div className={cn('grid gap-4', className)}>
+    <div className="grid gap-4">
       <div className="flex items-center justify-between">
         <Label
           {...labelProps}
diff --git a/apps/web/src/components/ChangeWaveFunction.tsx b/apps/web/src/components/ChangeWaveFunction.tsx
index dbbe411..9ce3f03 100644
--- a/apps/web/src/components/ChangeWaveFunction.tsx
+++ b/apps/web/src/components/ChangeWaveFunction.tsx
@@ -5,7 +5,7 @@ import {
   ToggleGroupItem
 } from '@workspace/ui/components/toggle-group';
 import { Sin } from '@/components/Sin';
-import { Cos } from '@/components/Cos';
+import { Heartbeat } from '@/components/Heartbeat';
 import { WAVE_FUNCTION } from '@/constants';
 import { WaveFunction } from '@/types';
 import { unwrappedImagesAtom } from '@/atoms/imagesAtom';
@@ -40,12 +40,15 @@ export function ChangeWaveFunction(props: ChanveWaveFunctionProps) {
       disabled={!images.length}
       {...props}
     >
+      <ToggleGroupItem
+        value={WAVE_FUNCTION.HEARTBEAT}
+        aria-label={t`Heartbeat`}
+      >
+        <Heartbeat />
+      </ToggleGroupItem>
       <ToggleGroupItem value={WAVE_FUNCTION.SIN} aria-label={t`Sine`}>
         <Sin />
       </ToggleGroupItem>
-      <ToggleGroupItem value={WAVE_FUNCTION.COS} aria-label={t`Cosine`}>
-        <Cos />
-      </ToggleGroupItem>
     </ToggleGroup>
   );
 }
diff --git a/apps/web/src/components/CopyImage.tsx b/apps/web/src/components/CopyImage.tsx
index e0ecd75..360aff6 100644
--- a/apps/web/src/components/CopyImage.tsx
+++ b/apps/web/src/components/CopyImage.tsx
@@ -1,5 +1,5 @@
 import { useAtomValue } from 'jotai';
-import { Clipboard } from 'lucide-react';
+import { Copy } from 'lucide-react';
 import { useLingui } from '@lingui/react/macro';
 import { cn } from '@workspace/ui/lib/utils';
 import { Button } from '@workspace/ui/components/button';
@@ -43,7 +43,7 @@ export function CopyImage(props: CopyImageProps) {
       >
         <LoadableIcon
           state={state}
-          fallback={Clipboard}
+          fallback={Copy}
           className={cn({
             'animate-spin': isCopying
           })}
diff --git a/apps/web/src/components/Cos.tsx b/apps/web/src/components/Cos.tsx
deleted file mode 100644
index 687e604..0000000
--- a/apps/web/src/components/Cos.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createGraphIcon } from '@/utils/createGraphIcon';
-
-export const Cos = createGraphIcon(
-  'Sin',
-  x => Math.cos((x / 24) * 2 * Math.PI) * 8
-);
diff --git a/apps/web/src/components/ExportImage.tsx b/apps/web/src/components/ExportImage.tsx
index 641e0c2..b8d7a27 100644
--- a/apps/web/src/components/ExportImage.tsx
+++ b/apps/web/src/components/ExportImage.tsx
@@ -18,7 +18,7 @@ import {
 } from '@/atoms/exportAtoms';
 import { Button } from '@workspace/ui/components/button';
 import { LoadableIcon } from '@/components/LoadableIcon';
-import { Shortcut } from '@/components/Shortcut';
+import { Shortcut } from '@/components/Shortcut/Shortcut';
 import { HOTKEYS, LOADABLE_STATE } from '@/constants';
 
 export function ExportImage() {
@@ -48,7 +48,6 @@ export function ExportImage() {
       <DropdownMenuTrigger asChild disabled={!exportFileHandle}>
         <Button
           variant="ghost"
-          size="icon"
           onClick={createExportClickHandler(null)}
           disabled={disabled}
           aria-label={t`Choose file`}
@@ -60,6 +59,9 @@ export function ExportImage() {
               'animate-spin': isExporting
             })}
           />
+          <div className="hidden sm:block">
+            <Trans>Export</Trans>
+          </div>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-66">
diff --git a/apps/web/src/components/Graphics.tsx b/apps/web/src/components/Graphics.tsx
index 25eccc8..bf863fd 100644
--- a/apps/web/src/components/Graphics.tsx
+++ b/apps/web/src/components/Graphics.tsx
@@ -77,17 +77,17 @@ export function Graphics(props: GraphicsProps) {
           </clipPath>
         ))}
       </defs>
-
-      {orderedImages.map((image, i) => (
-        <image
-          key={image.id}
-          href={image.src}
-          style={{ zIndex: i + 1 }}
-          clipPath={
-            i >= 1 ? `url(#${waveId}${orderedImages.length - i})` : undefined
-          }
-        />
-      ))}
+      <g>
+        {orderedImages.map((image, i) => (
+          <image
+            key={image.id}
+            href={image.src}
+            clipPath={
+              i >= 1 ? `url(#${waveId}${orderedImages.length - i})` : undefined
+            }
+          />
+        ))}
+      </g>
     </svg>
   );
 }
diff --git a/apps/web/src/components/Heartbeat.tsx b/apps/web/src/components/Heartbeat.tsx
new file mode 100644
index 0000000..5dda488
--- /dev/null
+++ b/apps/web/src/components/Heartbeat.tsx
@@ -0,0 +1,4 @@
+import { createGraphIcon } from '@/utils/createGraphIcon';
+import { heartbeat } from '@/utils/waveFunctions';
+
+export const Heartbeat = createGraphIcon('Heartbeat', x => heartbeat(x) * 8);
diff --git a/apps/web/src/components/ImportImages.tsx b/apps/web/src/components/ImportImages.tsx
index 082d9c0..2c3ce55 100644
--- a/apps/web/src/components/ImportImages.tsx
+++ b/apps/web/src/components/ImportImages.tsx
@@ -1,5 +1,5 @@
 import { useAtom, useAtomValue } from 'jotai';
-import { Camera, Folder, Monitor, Smartphone, Tablet } from 'lucide-react';
+import { Camera, Monitor, Smartphone, Tablet, Upload } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Trans, Plural, useLingui } from '@lingui/react/macro';
@@ -86,7 +86,7 @@ export function ImportImages(props: ImportImagesProps) {
     <Dialog open={Boolean(importSignal)} onOpenChange={toggleImportSignal}>
       <DialogTrigger asChild>
         <Button {...props}>
-          <Folder />
+          <Upload />
           <div className="hidden sm:block">
             <Plural
               value={images.length}
@@ -100,7 +100,7 @@ export function ImportImages(props: ImportImagesProps) {
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <Trans>Import</Trans>
+            <Trans>Import Images</Trans>
           </DialogTitle>
           <DialogDescription>
             <Trans>
@@ -125,7 +125,7 @@ export function ImportImages(props: ImportImagesProps) {
                     <span className="text-destructive">*</span>
                   </FormLabel>
                   <FormControl>
-                    <Input required {...field} />
+                    <Input required type="url" {...field} />
                   </FormControl>
                   {fieldState.invalid ? (
                     <FormMessage />
diff --git a/apps/web/src/components/NoImages.tsx b/apps/web/src/components/NoImages.tsx
index cab0ae1..eb5d02c 100644
--- a/apps/web/src/components/NoImages.tsx
+++ b/apps/web/src/components/NoImages.tsx
@@ -1,9 +1,9 @@
 import { useSetAtom } from 'jotai';
-import { ImageOff, Folder } from 'lucide-react';
+import { ImageOff, Upload } from 'lucide-react';
 import { Trans } from '@lingui/react/macro';
 import { cn } from '@workspace/ui/lib/utils';
 import { Button } from '@workspace/ui/components/button';
-import { Shortcut } from '@/components/Shortcut';
+import { Shortcut } from '@/components/Shortcut/Shortcut';
 import { importAtom, importSignalAtom } from '@/atoms/importAtoms';
 import { siteConfig } from '@/config/site';
 import { HOTKEYS } from '@/constants';
@@ -45,12 +45,12 @@ export function NoImages(props: NoImagesProps) {
       </p>
       <div className="flex w-full flex-col justify-center gap-4 sm:flex-row">
         <Button onClick={handleImportClick}>
-          <Folder />
+          <Upload />
           Open
           <Shortcut keys={HOTKEYS.IMPORT} />
         </Button>
         <Button onClick={handleClick} variant="secondary">
-          <Trans>See example</Trans>
+          <Trans>See Example</Trans>
         </Button>
       </div>
     </div>
diff --git a/apps/web/src/components/Shortcut.tsx b/apps/web/src/components/Shortcut/Shortcut.tsx
similarity index 53%
rename from apps/web/src/components/Shortcut.tsx
rename to apps/web/src/components/Shortcut/Shortcut.tsx
index 46f1cb6..fc44dc3 100644
--- a/apps/web/src/components/Shortcut.tsx
+++ b/apps/web/src/components/Shortcut/Shortcut.tsx
@@ -1,22 +1,13 @@
-import { cn } from '@workspace/ui/lib/utils';
 import { cva, VariantProps } from 'class-variance-authority';
-
-type Keys = string;
-export type KeyDisplay = string | { other: string; macos: string };
-export type KeyDisplayMapping = Record<string, KeyDisplay>;
-
-const defaultKeyDisplayMapping: KeyDisplayMapping = {
-  meta: { other: 'Meta', macos: '⌘' },
-  shift: '⇧',
-  alt: { other: 'Alt', macos: '⌥' },
-  ctrl: { other: 'Ctrl', macos: '⌃' },
-  mod: { other: 'Ctrl', macos: '⌘' },
-  arrowup: '↑',
-  arrowdown: '↓'
-};
+import { cn } from '@workspace/ui/lib/utils';
+import {
+  ANY_OTHER_KEY,
+  defaultKeyDisplayMapping,
+  KeyDisplayMapping
+} from '@/components/Shortcut/keyDisplayMappings';
 
 const shortcutVariants = cva(
-  'ml-auto hidden tracking-widest select-none sm:flex px-1 pointer-events-none gap-1 text-muted-foreground',
+  'hidden select-none sm:flex pointer-events-none gap-1 text-muted-foreground font-mono',
   {
     variants: {
       variant: {
@@ -25,7 +16,7 @@ const shortcutVariants = cva(
       },
       size: {
         default: '',
-        sm: 'text-xs'
+        sm: 'text-xs px-1'
       }
     },
 
@@ -47,7 +38,7 @@ export interface ShortcutProps
    * The keys to render in the shortcut. Can be a single key or a combination of keys separated
    * by `combinationKey`.
    */
-  keys: Keys;
+  keys: string;
 
   /**
    * The component used to render each individual key. Defaults to `span`.
@@ -57,6 +48,12 @@ export interface ShortcutProps
   /**
    * A mapping of key names to display values. Allows customization of key display based on the
    * operating system.
+   *
+   * The order of keys within `macos` and `other` determines the sorting order of the displayed keys.
+   * Keys that are defined in the mapping will be sorted according to their position in the object.
+   *
+   * If a key is not found in the mapping, it will be treated as the "any" key. Keys that are not
+   * found will be sorted based on their relative position to the "any" key in the mapping.
    */
   keyDisplayMapping?: KeyDisplayMapping;
 
@@ -75,7 +72,7 @@ export function Shortcut(props: ShortcutProps) {
   const {
     keys,
     keyComponent: KeyComponent = 'span',
-    keyDisplayMapping: keyDisplayMappingProp,
+    keyDisplayMapping = defaultKeyDisplayMapping,
     combinationKey = '+',
     userAgent = navigator.userAgent,
     variant,
@@ -84,31 +81,36 @@ export function Shortcut(props: ShortcutProps) {
     ...other
   } = props;
 
-  const keyDisplayMapping = {
-    ...defaultKeyDisplayMapping,
-    ...keyDisplayMappingProp
-  };
+  const platformKeyMapping = isMacOS(userAgent)
+    ? keyDisplayMapping.macos
+    : keyDisplayMapping.other;
+
+  const platformKeys = Object.keys(platformKeyMapping);
+  const sortedKeys = keys
+    .trim()
+    .split(combinationKey)
+    .map(key => key.trim())
+    .sort((a, b) => {
+      const ai = platformKeys.indexOf(a.toLowerCase());
+      const bi = platformKeys.indexOf(b.toLowerCase());
+
+      const anyIndex = platformKeys.includes(ANY_OTHER_KEY)
+        ? platformKeys.indexOf(ANY_OTHER_KEY)
+        : Infinity;
+
+      return (ai === -1 ? anyIndex : ai) - (bi === -1 ? anyIndex : bi);
+    });
 
   return (
     <kbd
       className={cn(shortcutVariants({ variant, size, className }))}
       {...other}
     >
-      {keys
-        .trim()
-        .split(combinationKey)
-        .map(part => {
-          const display = keyDisplayMapping[part.trim().toLowerCase()] || part;
-          return (
-            <KeyComponent key={part}>
-              {typeof display === 'string'
-                ? display
-                : isMacOS(userAgent)
-                  ? display.macos
-                  : display.other}
-            </KeyComponent>
-          );
-        })}
+      {sortedKeys.map(key => (
+        <KeyComponent key={key}>
+          {platformKeyMapping[key.toLowerCase()] || key}
+        </KeyComponent>
+      ))}
     </kbd>
   );
 }
diff --git a/apps/web/src/components/__tests__/Shortcut.test.tsx b/apps/web/src/components/Shortcut/__tests__/Shortcut.test.tsx
similarity index 80%
rename from apps/web/src/components/__tests__/Shortcut.test.tsx
rename to apps/web/src/components/Shortcut/__tests__/Shortcut.test.tsx
index 58ae32a..9bc78c8 100644
--- a/apps/web/src/components/__tests__/Shortcut.test.tsx
+++ b/apps/web/src/components/Shortcut/__tests__/Shortcut.test.tsx
@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
-import { Shortcut } from '@/components/Shortcut';
+import { Shortcut } from '@/components/Shortcut/Shortcut';
+import { defaultKeyDisplayMapping } from '../keyDisplayMappings';
 
 interface ShortcutTestCase {
   keys: string;
@@ -14,7 +15,7 @@ describe('Shortcut', () => {
     ${'mod'}             | ${['Ctrl']}                  | ${['⌘']}
     ${'ctrl+alt+delete'} | ${['Ctrl', 'Alt', 'delete']} | ${['⌃', '⌥', 'delete']}
     ${'mod+S'}           | ${['Ctrl', 'S']}             | ${['⌘', 'S']}
-    ${'mod+shift+S'}     | ${['Ctrl', '⇧', 'S']}        | ${['⌘', '⇧', 'S']}
+    ${'mod+shift+S'}     | ${['Ctrl', '⇧', 'S']}        | ${['⇧', '⌘', 'S']}
   `(
     'renders $keys correctly',
     ({ keys, expectedOther, expectedMacos }: ShortcutTestCase) => {
@@ -32,8 +33,13 @@ describe('Shortcut', () => {
     const { container } = render(
       <Shortcut
         keys="ctrl+enter"
+        userAgent="Windows"
         keyDisplayMapping={{
-          enter: '⏎'
+          ...defaultKeyDisplayMapping,
+          other: {
+            ...defaultKeyDisplayMapping.other,
+            enter: '⏎'
+          }
         }}
       />
     );
diff --git a/apps/web/src/components/Shortcut/keyDisplayMappings.ts b/apps/web/src/components/Shortcut/keyDisplayMappings.ts
new file mode 100644
index 0000000..d696e81
--- /dev/null
+++ b/apps/web/src/components/Shortcut/keyDisplayMappings.ts
@@ -0,0 +1,31 @@
+export const ANY_OTHER_KEY = 'any';
+
+type OperatingSystemKeyDisplay = Record<string, string | undefined>;
+
+export type KeyDisplayMapping = {
+  macos: OperatingSystemKeyDisplay;
+  other: OperatingSystemKeyDisplay;
+};
+
+export const defaultKeyDisplayMapping: KeyDisplayMapping = {
+  macos: {
+    ctrl: '⌃',
+    alt: '⌥',
+    shift: '⇧',
+    mod: '⌘',
+    meta: '⌘',
+    [ANY_OTHER_KEY]: undefined,
+    arrowup: '↑',
+    arrowdown: '↓'
+  },
+  other: {
+    ctrl: 'Ctrl',
+    mod: 'Ctrl',
+    alt: 'Alt',
+    shift: '⇧',
+    meta: 'Meta',
+    [ANY_OTHER_KEY]: undefined,
+    arrowup: '↑',
+    arrowdown: '↓'
+  }
+};
diff --git a/apps/web/src/components/Sin.tsx b/apps/web/src/components/Sin.tsx
index e241e5e..0861a19 100644
--- a/apps/web/src/components/Sin.tsx
+++ b/apps/web/src/components/Sin.tsx
@@ -1,6 +1,4 @@
 import { createGraphIcon } from '@/utils/createGraphIcon';
+import { sin } from '@/utils/waveFunctions';
 
-export const Sin = createGraphIcon(
-  'Sin',
-  x => Math.sin((x / 24) * 2 * Math.PI) * 8
-);
+export const Sin = createGraphIcon('Sin', x => sin((x / 24) * 2 * Math.PI) * 8);
diff --git a/apps/web/src/constants.ts b/apps/web/src/constants.ts
index b80f6fa..38100c3 100644
--- a/apps/web/src/constants.ts
+++ b/apps/web/src/constants.ts
@@ -10,8 +10,8 @@ export const LOADABLE_STATE = {
 } as const;
 
 export const WAVE_FUNCTION = {
-  SIN: 'sin',
-  COS: 'cos'
+  HEARTBEAT: 'heartbeat',
+  SIN: 'sin'
 } as const;
 
 export const HOTKEYS = {
diff --git a/apps/web/src/utils/waveFunctions.ts b/apps/web/src/utils/waveFunctions.ts
new file mode 100644
index 0000000..e91d500
--- /dev/null
+++ b/apps/web/src/utils/waveFunctions.ts
@@ -0,0 +1,4 @@
+export const sin = Math.sin;
+
+export const heartbeat = (x: number) =>
+  (Math.sin(x) + Math.sin(x * 1.1) + Math.sin(x * 1.9)) / 3;
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 2f878bb..3ad0ced 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -68,6 +68,7 @@
 @theme inline {
   --font-*: initial;
   --font-sans: Geist;
+  --font-mono: 'Geist Mono';
 
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));