From fd2ada4438ed985427434355b9cee31e81e42345 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 23 Feb 2026 08:41:32 +0100
Subject: [PATCH] refactor(pastel): remove keyboard shortcuts and useKeyboard
 hook

---
 app/(app)/pastel/page.tsx       |  31 ----------
 lib/pastel/hooks/useKeyboard.ts | 106 --------------------------------
 lib/pastel/index.ts             |   1 -
 3 files changed, 138 deletions(-)
 delete mode 100644 lib/pastel/hooks/useKeyboard.ts

diff --git a/app/(app)/pastel/page.tsx b/app/(app)/pastel/page.tsx
index e830348..720ef4b 100644
--- a/app/(app)/pastel/page.tsx
+++ b/app/(app)/pastel/page.tsx
@@ -7,7 +7,6 @@ import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
 import { ColorInfo } from '@/components/pastel/color/ColorInfo';
 import { ManipulationPanel } from '@/components/pastel/tools/ManipulationPanel';
 import { useColorInfo } from '@/lib/pastel/api/queries';
-import { useKeyboard } from '@/lib/pastel/hooks/useKeyboard';
 import { useColorHistory } from '@/lib/pastel/stores/historyStore';
 import { Loader2, Share2, History, X } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
@@ -58,28 +57,6 @@ function PlaygroundContent() {
     setColor(randomHex);
   };
 
-  // Keyboard shortcuts
-  useKeyboard([
-    {
-      key: 'c',
-      meta: true,
-      handler: handleCopyColor,
-      description: 'Copy color',
-    },
-    {
-      key: 's',
-      meta: true,
-      handler: handleShare,
-      description: 'Share color',
-    },
-    {
-      key: 'r',
-      meta: true,
-      handler: handleRandomColor,
-      description: 'Random color',
-    },
-  ]);
-
   return (
     <div className="min-h-screen py-12">
       <div className="max-w-7xl mx-auto px-8 space-y-8">
@@ -88,14 +65,6 @@ function PlaygroundContent() {
           <p className="text-muted-foreground">
             Interactive color manipulation and analysis tool
           </p>
-          <div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
-            <kbd className="px-2 py-1 bg-muted rounded border">⌘C</kbd>
-            <span>Copy</span>
-            <kbd className="px-2 py-1 bg-muted rounded border ml-3">⌘S</kbd>
-            <span>Share</span>
-            <kbd className="px-2 py-1 bg-muted rounded border ml-3">⌘R</kbd>
-            <span>Random</span>
-          </div>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
diff --git a/lib/pastel/hooks/useKeyboard.ts b/lib/pastel/hooks/useKeyboard.ts
deleted file mode 100644
index 4bfaa92..0000000
--- a/lib/pastel/hooks/useKeyboard.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useEffect } from 'react';
-
-export interface KeyboardShortcut {
-  key: string;
-  ctrl?: boolean;
-  shift?: boolean;
-  alt?: boolean;
-  meta?: boolean;
-  handler: (event: KeyboardEvent) => void;
-  description?: string;
-}
-
-/**
- * Hook to register keyboard shortcuts
- *
- * @example
- * ```tsx
- * useKeyboard([
- *   {
- *     key: 'c',
- *     meta: true, // Cmd on Mac, Ctrl on Windows
- *     handler: () => copyToClipboard(),
- *     description: 'Copy color',
- *   },
- *   {
- *     key: 'k',
- *     meta: true,
- *     handler: () => openCommandPalette(),
- *     description: 'Open command palette',
- *   },
- * ]);
- * ```
- */
-export function useKeyboard(shortcuts: KeyboardShortcut[]) {
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      for (const shortcut of shortcuts) {
-        const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase();
-
-        // Check if required modifiers match (only check if explicitly required)
-        const ctrlMatches = shortcut.ctrl === true ? event.ctrlKey : true;
-        const shiftMatches = shortcut.shift === true ? event.shiftKey : true;
-        const altMatches = shortcut.alt === true ? event.altKey : true;
-
-        // Handle meta/cmd key with cross-platform support
-        let metaMatches = true;
-        if (shortcut.meta === true) {
-          // On Mac: require Cmd key
-          // On Windows/Linux: accept Ctrl key as Cmd equivalent
-          const isMac = navigator.platform.includes('Mac');
-          metaMatches = isMac ? event.metaKey : event.ctrlKey;
-        }
-
-        // Ensure unwanted modifiers are not pressed (unless explicitly required)
-        const noExtraCtrl = shortcut.ctrl === true || shortcut.meta === true || !event.ctrlKey;
-        const noExtraShift = shortcut.shift === true || !event.shiftKey;
-        const noExtraAlt = shortcut.alt === true || !event.altKey;
-        const noExtraMeta = shortcut.meta === true || !event.metaKey;
-
-        if (
-          keyMatches &&
-          ctrlMatches &&
-          shiftMatches &&
-          altMatches &&
-          metaMatches &&
-          noExtraCtrl &&
-          noExtraShift &&
-          noExtraAlt &&
-          noExtraMeta
-        ) {
-          event.preventDefault();
-          shortcut.handler(event);
-          break;
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [shortcuts]);
-}
-
-/**
- * Hook to register a single keyboard shortcut (convenience wrapper)
- */
-export function useKeyboardShortcut(
-  key: string,
-  handler: (event: KeyboardEvent) => void,
-  modifiers?: {
-    ctrl?: boolean;
-    shift?: boolean;
-    alt?: boolean;
-    meta?: boolean;
-  }
-) {
-  useKeyboard([
-    {
-      key,
-      ...modifiers,
-      handler,
-    },
-  ]);
-}
diff --git a/lib/pastel/index.ts b/lib/pastel/index.ts
index 08ba98d..22c3aa9 100644
--- a/lib/pastel/index.ts
+++ b/lib/pastel/index.ts
@@ -1,5 +1,4 @@
 export * from './api/queries';
 export * from './stores/historyStore';
-export * from './hooks/useKeyboard';
 export * from './utils/color';
 export * from './utils/export';