@peers-app/peers-ui 0.0.14

package/src/command-palette/command-palette-ui.tsx

@@ -0,0 +1,264 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useObservable } from '../hooks';
+import { colorMode } from '../screens/settings/color-mode-dropdown';
+import {
+  closeCommandPalette,
+  commandSearchQuery,
+  Command,
+  executeCommand,
+  isCommandPaletteOpen,
+  searchCommands
+} from './command-palette';
+
+export function CommandPaletteOverlay() {
+  const [isOpen] = useObservable(isCommandPaletteOpen);
+  const [searchQuery, setSearchQuery] = useObservable(commandSearchQuery);
+  const [_colorMode] = useObservable(colorMode);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  
+  const filteredCommands = searchCommands(searchQuery);
+  
+  // Create a flattened list that matches the visual rendering order
+  const visualOrderCommands = Object.entries(
+    filteredCommands.reduce((acc, cmd) => {
+      const category = cmd.category || 'Other';
+      if (!acc[category]) acc[category] = [];
+      acc[category].push(cmd);
+      return acc;
+    }, {} as Record<string, Command[]>)
+  ).flatMap(([, commands]) => commands);
+  
+  // Focus input when opened
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  
+  // Reset selected index when search changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [searchQuery]);
+  
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+    
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex(prev => Math.min(prev + 1, visualOrderCommands.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex(prev => Math.max(prev - 1, 0));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (visualOrderCommands[selectedIndex]) {
+          executeCommand(visualOrderCommands[selectedIndex].id);
+        }
+      }
+    };
+    
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, visualOrderCommands, selectedIndex]);
+  
+  if (!isOpen) return null;
+  
+  const isDark = _colorMode === 'dark';
+  
+  return (
+    <div
+      className="position-fixed w-100 h-100 d-flex align-items-start justify-content-center"
+      style={{
+        top: 0,
+        left: 0,
+        zIndex: 1050,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        backdropFilter: 'blur(4px)',
+        paddingTop: '10vh'
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          closeCommandPalette();
+        }
+      }}
+    >
+      <div
+        className={`${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`}
+        style={{
+          width: '90%',
+          maxWidth: '600px',
+          borderRadius: '12px',
+          boxShadow: isDark 
+            ? '0 20px 40px rgba(0, 0, 0, 0.5)'
+            : '0 20px 40px rgba(0, 0, 0, 0.1)',
+          border: isDark ? '1px solid #495057' : '1px solid #dee2e6',
+          overflow: 'hidden'
+        }}
+      >
+        {/* Search Input */}
+        <div className="p-3 border-bottom" style={{
+          borderBottomColor: isDark ? '#495057' : '#dee2e6'
+        }}>
+          <div className="position-relative">
+            <i 
+              className="bi-search position-absolute" 
+              style={{
+                left: '12px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                color: '#6c757d',
+                zIndex: 1
+              }} 
+            />
+            <input
+              ref={inputRef}
+              type="text"
+              className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+              placeholder="Type a command or search..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                commandSearchQuery(e.target.value);
+              }}
+              style={{
+                paddingLeft: '40px',
+                fontSize: '16px',
+                border: 'none',
+                outline: 'none',
+                boxShadow: 'none',
+                backgroundColor: isDark ? '#343a40' : '#f8f9fa'
+              }}
+            />
+          </div>
+        </div>
+        
+        {/* Commands List */}
+        <div
+          style={{
+            maxHeight: '400px',
+            overflowY: 'auto'
+          }}
+        >
+          {visualOrderCommands.length === 0 ? (
+            <div className="p-4 text-center text-muted">
+              <i className="bi-search mb-2 d-block" style={{ fontSize: '24px' }} />
+              No commands found
+            </div>
+          ) : (
+            <div className="py-2">
+              {/* Group commands by category */}
+              {Object.entries(
+                filteredCommands.reduce((acc, cmd) => {
+                  const category = cmd.category || 'Other';
+                  if (!acc[category]) acc[category] = [];
+                  acc[category].push(cmd);
+                  return acc;
+                }, {} as Record<string, Command[]>)
+              ).map(([category, commands]) => (
+                <div key={category}>
+                  {/* Category Header */}
+                  <div 
+                    className="px-3 py-1 small text-muted fw-bold text-uppercase"
+                    style={{ fontSize: '11px', letterSpacing: '0.5px' }}
+                  >
+                    {category}
+                  </div>
+                  
+                  {/* Commands in Category */}
+                  {commands.map((command) => {
+                    const globalIndex = visualOrderCommands.indexOf(command);
+                    const isSelected = globalIndex === selectedIndex;
+                    
+                    return (
+                      <div
+                        key={command.id}
+                        className={`px-3 py-2 d-flex align-items-center justify-content-between ${
+                          isSelected 
+                            ? (isDark ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-10')
+                            : ''
+                        }`}
+                        style={{
+                          cursor: 'pointer',
+                          transition: 'background-color 0.1s ease'
+                        }}
+                        onClick={() => executeCommand(command.id)}
+                        onMouseEnter={() => setSelectedIndex(globalIndex)}
+                      >
+                        <div className="d-flex align-items-center">
+                          {command.iconClassName && (
+                            <i 
+                              className={`${command.iconClassName} me-3`}
+                              style={{ 
+                                fontSize: '16px',
+                                color: isSelected ? (isDark ? '#ffffff' : '#0d6efd') : '#6c757d',
+                                minWidth: '16px'
+                              }}
+                            />
+                          )}
+                          <div>
+                            <div className="fw-medium">{command.label}</div>
+                            {command.description && (
+                              <div 
+                                className="small text-muted"
+                                style={{ fontSize: '12px' }}
+                              >
+                                {command.description}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                        
+                        {command.shortcut && (
+                          <div 
+                            className={`small px-2 py-1 rounded ${
+                              isDark ? 'bg-secondary bg-opacity-50' : 'bg-light'
+                            }`}
+                            style={{
+                              fontSize: '11px',
+                              fontFamily: 'monospace',
+                              color: isDark ? '#adb5bd' : '#6c757d',
+                              border: isDark ? '1px solid #495057' : '1px solid #dee2e6'
+                            }}
+                          >
+                            {command.shortcut}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        
+        {/* Footer */}
+        <div 
+          className={`px-3 py-2 small text-muted border-top d-flex align-items-center justify-content-between`}
+          style={{
+            borderTopColor: isDark ? '#495057' : '#dee2e6',
+            fontSize: '11px'
+          }}
+        >
+          <div className="d-flex align-items-center gap-3">
+            <span>
+              <kbd className="small">↵</kbd> to select
+            </span>
+            <span>
+              <kbd className="small">↑↓</kbd> to navigate
+            </span>
+            <span>
+              <kbd className="small">esc</kbd> to close
+            </span>
+          </div>
+          <div>
+            {visualOrderCommands.length} command{visualOrderCommands.length !== 1 ? 's' : ''}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/command-palette/command-palette.ts

@@ -0,0 +1,364 @@
+import { deviceVar } from "@peers-app/peers-sdk";
+import { goToTabPath } from '../tabs-layout/tabs-state';
+
+export interface Command {
+  id: string;
+  label: string;
+  description?: string;
+  shortcut?: string;
+  category?: string;
+  iconClassName?: string;
+  action: () => void;
+  isAvailable?: () => boolean;
+}
+
+// Command palette state (using device scope but with temporary defaults)
+export const isCommandPaletteOpen = deviceVar<boolean>('commandPaletteOpen', {
+  defaultValue: false,
+});
+
+export const commandSearchQuery = deviceVar<string>('commandSearchQuery', {
+  defaultValue: '',
+});
+
+// Command registry
+const registeredCommands = new Map<string, Command>();
+
+// Detect platform for keyboard shortcuts  
+const isMac = typeof navigator !== 'undefined' 
+  ? /Mac|iPod|iPhone|iPad/.test(navigator.userAgent)
+  : false;
+const modKey = isMac ? 'Cmd' : 'Ctrl';
+
+// Core system commands
+const coreCommands: Command[] = [
+  {
+    id: 'search',
+    label: 'Search Everything',
+    description: 'Search across all content',
+    shortcut: `${modKey}+K`,
+    iconClassName: 'bi-search',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('search');
+    }
+  },
+  {
+    id: 'close-tab',
+    label: 'Close Tab',
+    description: 'Close the current tab',
+    shortcut: `${modKey}+W`,
+    iconClassName: 'bi-x',
+    category: 'Tabs',
+    action: () => {
+      closeCommandPalette();
+      // Import dynamically to avoid circular dependency
+      import('../tabs-layout/tabs-state').then(({ closeCurrentTab }) => {
+        closeCurrentTab();
+      });
+    }
+  },
+  {
+    id: 'next-tab',
+    label: 'Next Tab',
+    description: 'Switch to next tab',
+    shortcut: 'Ctrl+Tab',
+    iconClassName: 'bi-arrow-right',
+    category: 'Tabs',
+    action: () => {
+      closeCommandPalette();
+      import('../tabs-layout/tabs-state').then(({ switchToNextTab }) => {
+        switchToNextTab();
+      });
+    }
+  },
+  {
+    id: 'previous-tab',
+    label: 'Previous Tab',
+    description: 'Switch to previous tab',
+    shortcut: 'Ctrl+Shift+Tab',
+    iconClassName: 'bi-arrow-left',
+    category: 'Tabs',
+    action: () => {
+      closeCommandPalette();
+      import('../tabs-layout/tabs-state').then(({ switchToPreviousTab }) => {
+        switchToPreviousTab();
+      });
+    }
+  },
+  {
+    id: 'go-home',
+    label: 'Go to Threads',
+    description: 'Navigate to threads/home',
+    shortcut: `${modKey}+H`,
+    iconClassName: 'bi-cpu',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('threads');
+    }
+  },
+  {
+    id: 'go-settings',
+    label: 'Open Settings',
+    description: 'Open application settings',
+    iconClassName: 'bi-gear-fill',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('settings');
+    }
+  },
+  {
+    id: 'go-assistants',
+    label: 'Go to Assistants',
+    description: 'View and manage assistants',
+    iconClassName: 'bi-person-fill-gear',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('assistants');
+    }
+  },
+  {
+    id: 'go-workflows',
+    label: 'Go to Workflows',
+    description: 'View and manage workflows',
+    iconClassName: 'bi-database-fill-gear',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('workflows');
+    }
+  },
+  {
+    id: 'go-tools',
+    label: 'Go to Tools',
+    description: 'View and manage tools',
+    iconClassName: 'bi-tools',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('tools');
+    }
+  },
+  {
+    id: 'go-events',
+    label: 'Go to Events',
+    description: 'View and manage events',
+    iconClassName: 'bi-lightning-charge-fill',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('events');
+    }
+  },
+  {
+    id: 'go-predicates',
+    label: 'Go to Predicates',
+    description: 'View and manage predicates',
+    iconClassName: 'bi-node-plus-fill',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('predicates');
+    }
+  },
+  {
+    id: 'go-peer-types',
+    label: 'Go to Peer Types',
+    description: 'View and manage peer types',
+    iconClassName: 'bi-code-square',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('peer-types');
+    }
+  },
+  {
+    id: 'go-packages',
+    label: 'Go to Packages',
+    description: 'View and manage packages',
+    iconClassName: 'bi-box-fill',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('packages');
+    }
+  },
+  {
+    id: 'go-variables',
+    label: 'Go to Variables',
+    description: 'View and manage variables',
+    iconClassName: 'bi-braces',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('variables');
+    }
+  },
+  {
+    id: 'go-knowledge-values',
+    label: 'Go to Knowledge Values',
+    description: 'View and manage knowledge values',
+    iconClassName: 'bi-journal-bookmark-fill',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('knowledge-values');
+    }
+  },
+  {
+    id: 'go-knowledge-frames',
+    label: 'Go to Knowledge Frames',
+    description: 'View and manage knowledge frames',
+    iconClassName: 'bi-window-dock',
+    category: 'Navigation',
+    action: () => {
+      closeCommandPalette();
+      goToTabPath('knowledge-frames');
+    }
+  }
+];
+
+// Register core commands
+coreCommands.forEach(cmd => registeredCommands.set(cmd.id, cmd));
+
+// Command registration functions
+export function registerCommand(command: Command): void {
+  registeredCommands.set(command.id, command);
+}
+
+export function unregisterCommand(commandId: string): void {
+  registeredCommands.delete(commandId);
+}
+
+export function getCommand(commandId: string): Command | undefined {
+  return registeredCommands.get(commandId);
+}
+
+export function getAllCommands(): Command[] {
+  return Array.from(registeredCommands.values()).filter(cmd => 
+    !cmd.isAvailable || cmd.isAvailable()
+  );
+}
+
+export function searchCommands(query: string): Command[] {
+  if (!query.trim()) return getAllCommands();
+  
+  const lowerQuery = query.toLowerCase();
+  return getAllCommands().filter(cmd => 
+    cmd.label.toLowerCase().includes(lowerQuery) ||
+    cmd.description?.toLowerCase().includes(lowerQuery) ||
+    cmd.category?.toLowerCase().includes(lowerQuery)
+  );
+}
+
+// Command palette controls
+export function openCommandPalette(): void {
+  isCommandPaletteOpen(true);
+  commandSearchQuery('');
+}
+
+export function closeCommandPalette(): void {
+  isCommandPaletteOpen(false);
+  commandSearchQuery('');
+}
+
+export function toggleCommandPalette(): void {
+  if (isCommandPaletteOpen()) {
+    closeCommandPalette();
+  } else {
+    openCommandPalette();
+  }
+}
+
+export function executeCommand(commandId: string): void {
+  const command = getCommand(commandId);
+  if (command) {
+    command.action();
+  }
+}
+
+// Keyboard shortcut handling
+const shortcutToCommandMap = new Map<string, string>();
+
+// Build shortcut map from registered commands
+function buildShortcutMap(): void {
+  shortcutToCommandMap.clear();
+  getAllCommands().forEach(cmd => {
+    if (cmd.shortcut) {
+      shortcutToCommandMap.set(normalizeShortcut(cmd.shortcut), cmd.id);
+    }
+  });
+}
+
+function normalizeShortcut(shortcut: string): string {
+  return shortcut.toLowerCase()
+    .replace('cmd', 'meta')
+    .replace('command', 'meta')
+    .replace(/\s+/g, '');
+}
+
+function getKeyFromEvent(event: KeyboardEvent): string {
+  const parts: string[] = [];
+  
+  if (event.metaKey) parts.push('meta');
+  if (event.ctrlKey) parts.push('ctrl');
+  if (event.altKey) parts.push('alt');
+  if (event.shiftKey) parts.push('shift');
+  
+  parts.push(event.key.toLowerCase());
+  
+  return parts.join('+');
+}
+
+// Global keyboard event handler
+const handleKeyDown = (event: KeyboardEvent) => {
+  const key = getKeyFromEvent(event);
+  
+  // Handle Cmd+K (Mac) / Ctrl+K (Windows/Linux) to open command palette
+  const paletteShortcut = isMac ? 'meta+k' : 'ctrl+k';
+  if (key === paletteShortcut) {
+    event.preventDefault();
+    toggleCommandPalette();
+    return;
+  }
+  
+  // Handle Escape to close command palette
+  if (key === 'escape' && isCommandPaletteOpen()) {
+    event.preventDefault();
+    closeCommandPalette();
+    return;
+  }
+  
+  // If command palette is open, don't handle other shortcuts
+  if (isCommandPaletteOpen()) {
+    return;
+  }
+  
+  // Handle other registered shortcuts
+  const commandId = shortcutToCommandMap.get(key);
+  if (commandId) {
+    event.preventDefault();
+    executeCommand(commandId);
+  }
+};
+
+// Initialize keyboard shortcuts
+export function initializeCommandPalette(): void {
+  buildShortcutMap();
+  document.addEventListener('keydown', handleKeyDown);
+}
+
+// Clean up (for testing or hot reloading)
+export function destroyCommandPalette(): void {
+  document.removeEventListener('keydown', handleKeyDown);
+  shortcutToCommandMap.clear();
+}
+
+// Auto-initialize when this module loads
+if (typeof window !== 'undefined') {
+  initializeCommandPalette();
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,22 @@
+import React from 'react'; 
+import { useObservable } from '../hooks';
+
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  checked: any,
+  type?: React.HTMLInputTypeAttribute
+}
+
+export function Checkbox(props: IProps) {
+  const [checked, setChecked] = useObservable(props.checked);
+  const type = props.type ?? 'checkbox';
+  function onChange(evt: React.ChangeEvent<HTMLInputElement>) {
+    let _value: any = evt.target.checked;
+    if (type === 'checkbox') {
+      _value = !!_value;
+    }
+    setChecked(_value);
+  }
+  return (
+    <input onChange={onChange} type={type} {...props} checked={checked}  />
+  )
+}