@invect/ui 0.0.1 → 0.0.3

package/src/components/flow-editor/use-keyboard-shortcuts.ts

@@ -0,0 +1,280 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useReactFlow } from '@xyflow/react';
+import { useFlowEditorStore } from './flow-editor.store';
+import { useFlowActions } from '../../routes/flow-route-layout';
+import { useUIStore } from '~/stores/uiStore';
+import { useTheme } from '~/contexts/ThemeProvider';
+import { useChatStore } from '~/components/chat/chat.store';
+import { SHORTCUTS, getShortcutDisplay } from './keyboard-shortcuts';
+import type { CommandPaletteAction } from './FlowCommandPalette';
+
+// ---------------------------------------------------------------------------
+// Hook that registers all keyboard shortcuts for the flow editor
+// and exposes command palette state + actions.
+// ---------------------------------------------------------------------------
+
+/** Options to control which canvas-level shortcuts to skip (handled elsewhere) */
+interface UseKeyboardShortcutsOptions {
+  /** Whether copy/paste shortcuts are handled by useCopyPaste (avoid double-binding) */
+  copyPasteHandledExternally?: boolean;
+}
+
+export function useKeyboardShortcuts(opts: UseKeyboardShortcutsOptions = {}) {
+  const { copyPasteHandledExternally = true } = opts;
+
+  // --- State for command palette and help dialog ---
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+  const [shortcutsHelpOpen, setShortcutsHelpOpen] = useState(false);
+
+  // --- External hooks ---
+  const reactFlow = useReactFlow();
+  const flowActions = useFlowActions();
+  const toggleNodeSidebar = useUIStore((s) => s.toggleNodeSidebar);
+  const { resolvedTheme, setTheme } = useTheme();
+  const toggleChat = useChatStore((s) => s.togglePanel);
+
+  // --- Actions ---
+  const handleSave = useCallback(() => {
+    if (flowActions?.onSave) {
+      flowActions.onSave();
+    }
+  }, [flowActions]);
+
+  const handleExecute = useCallback(() => {
+    if (flowActions?.onExecute) {
+      flowActions.onExecute();
+    }
+  }, [flowActions]);
+
+  const handleFitView = useCallback(() => {
+    reactFlow.fitView({ padding: 0.2, duration: 200 });
+  }, [reactFlow]);
+
+  const handleZoomIn = useCallback(() => {
+    reactFlow.zoomIn({ duration: 200 });
+  }, [reactFlow]);
+
+  const handleZoomOut = useCallback(() => {
+    reactFlow.zoomOut({ duration: 200 });
+  }, [reactFlow]);
+
+  const handleSelectAll = useCallback(() => {
+    const nodes = useFlowEditorStore.getState().nodes;
+    const changes = nodes.map((n) => ({
+      id: n.id,
+      type: 'select' as const,
+      selected: true,
+    }));
+    useFlowEditorStore.getState().applyNodeChanges(changes);
+  }, []);
+
+  const handleToggleTheme = useCallback(() => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  }, [resolvedTheme, setTheme]);
+
+  const openCommandPalette = useCallback(() => setCommandPaletteOpen(true), []);
+  const openShortcutsHelp = useCallback(() => setShortcutsHelpOpen(true), []);
+
+  // --- Register hotkeys ---
+
+  // General
+  useHotkeys(
+    SHORTCUTS.commandPalette.keys,
+    (e) => {
+      e.preventDefault();
+      openCommandPalette();
+    },
+    { enableOnFormTags: true, enableOnContentEditable: true },
+  );
+
+  useHotkeys(
+    SHORTCUTS.save.keys,
+    (e) => {
+      e.preventDefault();
+      handleSave();
+    },
+    { enableOnFormTags: true, enableOnContentEditable: true },
+  );
+
+  useHotkeys(
+    SHORTCUTS.executeFlow.keys,
+    (e) => {
+      e.preventDefault();
+      handleExecute();
+    },
+    { enableOnFormTags: true, enableOnContentEditable: true },
+  );
+
+  useHotkeys(SHORTCUTS.showShortcuts.keys, (e) => {
+    // Don't fire when typing in inputs — only from canvas
+    const el = e.target as HTMLElement;
+    if (
+      el.tagName === 'INPUT' ||
+      el.tagName === 'TEXTAREA' ||
+      el.isContentEditable ||
+      el.closest('.cm-editor') ||
+      el.closest('[role="dialog"]')
+    ) {
+      return;
+    }
+    e.preventDefault();
+    openShortcutsHelp();
+  });
+
+  // Navigation
+  useHotkeys(SHORTCUTS.fitView.keys, (e) => {
+    e.preventDefault();
+    handleFitView();
+  });
+
+  useHotkeys(SHORTCUTS.zoomIn.keys, (e) => {
+    e.preventDefault();
+    handleZoomIn();
+  });
+
+  useHotkeys(SHORTCUTS.zoomOut.keys, (e) => {
+    e.preventDefault();
+    handleZoomOut();
+  });
+
+  // Editing (only if not handled by useCopyPaste)
+  if (!copyPasteHandledExternally) {
+    // These would be registered here if useCopyPaste was removed.
+    // For now, copy/paste/cut/duplicate/delete are in useCopyPaste.
+  }
+
+  // Select all
+  useHotkeys(SHORTCUTS.selectAll.keys, (e) => {
+    const el = e.target as HTMLElement;
+    if (
+      el.tagName === 'INPUT' ||
+      el.tagName === 'TEXTAREA' ||
+      el.isContentEditable ||
+      el.closest('.cm-editor') ||
+      el.closest('[role="dialog"]')
+    ) {
+      return;
+    }
+    e.preventDefault();
+    handleSelectAll();
+  });
+
+  // View
+  useHotkeys(SHORTCUTS.toggleSidebar.keys, (e) => {
+    e.preventDefault();
+    toggleNodeSidebar();
+  });
+
+  useHotkeys(SHORTCUTS.toggleTheme.keys, (e) => {
+    e.preventDefault();
+    handleToggleTheme();
+  });
+
+  useHotkeys(SHORTCUTS.toggleChat.keys, (e) => {
+    e.preventDefault();
+    toggleChat();
+  });
+
+  // --- Build command palette actions ---
+  const commandPaletteActions: CommandPaletteAction[] = useMemo(
+    () => [
+      {
+        id: SHORTCUTS.save.id,
+        label: SHORTCUTS.save.label,
+        category: SHORTCUTS.save.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.save),
+        onSelect: handleSave,
+        disabled: !flowActions?.onSave,
+      },
+      {
+        id: SHORTCUTS.executeFlow.id,
+        label: SHORTCUTS.executeFlow.label,
+        category: SHORTCUTS.executeFlow.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.executeFlow),
+        onSelect: handleExecute,
+        disabled: !flowActions?.onExecute,
+      },
+      {
+        id: SHORTCUTS.showShortcuts.id,
+        label: SHORTCUTS.showShortcuts.label,
+        category: SHORTCUTS.showShortcuts.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.showShortcuts),
+        onSelect: openShortcutsHelp,
+      },
+      // Editing
+      {
+        id: SHORTCUTS.selectAll.id,
+        label: SHORTCUTS.selectAll.label,
+        category: SHORTCUTS.selectAll.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.selectAll),
+        onSelect: handleSelectAll,
+      },
+      // Navigation
+      {
+        id: SHORTCUTS.fitView.id,
+        label: SHORTCUTS.fitView.label,
+        category: SHORTCUTS.fitView.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.fitView),
+        onSelect: handleFitView,
+      },
+      {
+        id: SHORTCUTS.zoomIn.id,
+        label: SHORTCUTS.zoomIn.label,
+        category: SHORTCUTS.zoomIn.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.zoomIn),
+        onSelect: handleZoomIn,
+      },
+      {
+        id: SHORTCUTS.zoomOut.id,
+        label: SHORTCUTS.zoomOut.label,
+        category: SHORTCUTS.zoomOut.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.zoomOut),
+        onSelect: handleZoomOut,
+      },
+      // View
+      {
+        id: SHORTCUTS.toggleSidebar.id,
+        label: SHORTCUTS.toggleSidebar.label,
+        category: SHORTCUTS.toggleSidebar.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.toggleSidebar),
+        onSelect: toggleNodeSidebar,
+      },
+      {
+        id: SHORTCUTS.toggleTheme.id,
+        label: SHORTCUTS.toggleTheme.label,
+        category: SHORTCUTS.toggleTheme.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.toggleTheme),
+        onSelect: handleToggleTheme,
+      },
+      {
+        id: SHORTCUTS.toggleChat.id,
+        label: SHORTCUTS.toggleChat.label,
+        category: SHORTCUTS.toggleChat.category,
+        shortcutDisplay: getShortcutDisplay(SHORTCUTS.toggleChat),
+        onSelect: toggleChat,
+      },
+    ],
+    [
+      handleSave,
+      handleExecute,
+      openShortcutsHelp,
+      handleSelectAll,
+      handleFitView,
+      handleZoomIn,
+      handleZoomOut,
+      toggleNodeSidebar,
+      handleToggleTheme,
+      toggleChat,
+      flowActions,
+    ],
+  );
+
+  return {
+    commandPaletteOpen,
+    setCommandPaletteOpen,
+    shortcutsHelpOpen,
+    setShortcutsHelpOpen,
+    commandPaletteActions,
+  };
+}

package/src/demo/DemoInvect.tsx

@@ -21,10 +21,11 @@
  * ```
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Invect, type InvectProps } from '../Invect';
 import { createDemoApiClient, type DemoData } from './demo-api-client';
 import type { ApiClient } from '../api/client';
+import { useChatStore } from '../components/chat/chat.store';
 
 export interface DemoInvectProps extends Omit<InvectProps, 'apiBaseUrl' | 'apiClient'> {
   /** Static data to power the demo UI */
@@ -38,5 +39,13 @@ export interface DemoInvectProps extends Omit<InvectProps, 'apiBaseUrl' | 'apiCl
 export function DemoInvect({ data, useMemoryRouter = true, ...rest }: DemoInvectProps) {
   const mockClient = useMemo(() => createDemoApiClient(data) as unknown as ApiClient, [data]);
 
+  // Open chat panel and pre-select Anthropic + Claude Sonnet 4.6 for the demo
+  const setOpen = useChatStore((s) => s.setOpen);
+  const updateSettings = useChatStore((s) => s.updateSettings);
+  useEffect(() => {
+    setOpen(true);
+    updateSettings({ credentialId: 'cred-anthropic', model: 'claude-sonnet-4-6' });
+  }, [setOpen, updateSettings]);
+
   return <Invect apiClient={mockClient} useMemoryRouter={useMemoryRouter} {...rest} />;
 }

package/src/demo/demo-api-client.ts

@@ -191,6 +191,7 @@ export function createDemoApiClient(data: DemoData = {}): Record<string, unknown
     // Chat
     getChatStatus: async () => ({ enabled: true }),
     getChatModels: async () => [
+      { id: 'claude-sonnet-4-6', name: 'Claude Sonnet 4.6', provider: 'anthropic' },
       { id: 'claude-sonnet-4-20250514', name: 'Claude Sonnet 4', provider: 'anthropic' },
       { id: 'gpt-4o', name: 'GPT-4o', provider: 'openai' },
     ],

package/src/styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: string;
+export default styles;