flock-core 0.5.0b50__py3-none-any.whl → 0.5.0b52__py3-none-any.whl

flock/frontend/src/components/common/KeyboardShortcutsDialog.css

@@ -0,0 +1,251 @@
+/* ========================================
+   Keyboard Shortcuts Dialog
+   Premium modal design with glassmorphism
+   ======================================== */
+
+/* Overlay */
+.keyboard-shortcuts-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-overlay);
+  backdrop-filter: blur(var(--blur-sm));
+  -webkit-backdrop-filter: blur(var(--blur-sm));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn var(--duration-normal) var(--ease-smooth);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Dialog Container */
+.keyboard-shortcuts-dialog {
+  background: var(--color-bg-surface);
+  border: var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  max-width: 600px;
+  width: 90%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideInUp var(--duration-normal) var(--ease-smooth);
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Header */
+.keyboard-shortcuts-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-layout-sm) var(--space-layout-md);
+  border-bottom: var(--border-subtle);
+}
+
+.keyboard-shortcuts-title {
+  margin: 0;
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.keyboard-shortcuts-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-colors), var(--transition-transform);
+}
+
+.keyboard-shortcuts-close:hover {
+  background: var(--color-bg-overlay);
+  color: var(--color-text-secondary);
+}
+
+.keyboard-shortcuts-close:active {
+  transform: scale(0.95);
+}
+
+.keyboard-shortcuts-close:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-glow-primary);
+}
+
+/* Content */
+.keyboard-shortcuts-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-layout-md);
+}
+
+/* Category */
+.keyboard-shortcuts-category {
+  margin-bottom: var(--space-layout-lg);
+}
+
+.keyboard-shortcuts-category:last-child {
+  margin-bottom: 0;
+}
+
+.keyboard-shortcuts-category-title {
+  margin: 0 0 var(--space-component-md) 0;
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+/* Shortcut List */
+.keyboard-shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.keyboard-shortcut-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-component-sm) var(--space-component-md);
+  background: var(--color-bg-elevated);
+  border: var(--border-subtle);
+  border-radius: var(--radius-md);
+  transition: var(--transition-colors);
+}
+
+.keyboard-shortcut-item:hover {
+  background: var(--color-bg-overlay);
+  border-color: var(--color-border-strong);
+}
+
+/* Keys */
+.keyboard-shortcut-keys {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.keyboard-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  padding: var(--spacing-1) var(--spacing-2);
+  background: var(--color-bg-base);
+  color: var(--color-text-primary);
+  border: var(--border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  box-shadow: var(--shadow-xs),
+              inset 0 -2px 0 0 var(--color-border-default);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.keyboard-key-separator {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Description */
+.keyboard-shortcut-description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-body-sm);
+  text-align: right;
+}
+
+/* Footer */
+.keyboard-shortcuts-footer {
+  padding: var(--space-component-md) var(--space-layout-md);
+  border-top: var(--border-subtle);
+  background: var(--color-bg-elevated);
+}
+
+.keyboard-shortcuts-hint {
+  margin: 0;
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-caption);
+}
+
+/* Scrollbar */
+.keyboard-shortcuts-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.keyboard-shortcuts-content::-webkit-scrollbar-track {
+  background: var(--color-bg-elevated);
+}
+
+.keyboard-shortcuts-content::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: var(--radius-full);
+  transition: var(--transition-colors);
+}
+
+.keyboard-shortcuts-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-strong);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .keyboard-shortcuts-dialog {
+    max-width: 95%;
+    max-height: 90vh;
+  }
+
+  .keyboard-shortcut-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--gap-sm);
+  }
+
+  .keyboard-shortcut-description {
+    text-align: left;
+  }
+}
+
+/* Accessibility - Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .keyboard-shortcuts-overlay,
+  .keyboard-shortcuts-dialog {
+    animation: none;
+  }
+
+  .keyboard-shortcuts-close {
+    transition: none;
+  }
+}

flock/frontend/src/components/common/KeyboardShortcutsDialog.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect } from 'react';
+import './KeyboardShortcutsDialog.css';
+
+interface KeyboardShortcutsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+interface Shortcut {
+  keys: string[];
+  description: string;
+  category: 'Navigation' | 'Panels' | 'General';
+}
+
+const shortcuts: Shortcut[] = [
+  // Navigation
+  {
+    keys: isMac ? ['⌘', 'M'] : ['Ctrl', 'M'],
+    description: 'Toggle Agent/Blackboard View',
+    category: 'Navigation',
+  },
+  {
+    keys: isMac ? ['⌘', 'F'] : ['Ctrl', 'F'],
+    description: 'Focus filter input',
+    category: 'Navigation',
+  },
+
+  // Panels
+  {
+    keys: isMac ? ['⌘', 'Shift', 'P'] : ['Ctrl', 'Shift', 'P'],
+    description: 'Toggle Publish Panel',
+    category: 'Panels',
+  },
+  {
+    keys: isMac ? ['⌘', 'Shift', 'D'] : ['Ctrl', 'Shift', 'D'],
+    description: 'Toggle Agent Details',
+    category: 'Panels',
+  },
+  {
+    keys: isMac ? ['⌘', 'Shift', 'F'] : ['Ctrl', 'Shift', 'F'],
+    description: 'Toggle Filters Panel',
+    category: 'Panels',
+  },
+  {
+    keys: isMac ? ['⌘', ','] : ['Ctrl', ','],
+    description: 'Toggle Settings Panel',
+    category: 'Panels',
+  },
+
+  // General
+  {
+    keys: ['Esc'],
+    description: 'Close panels and windows',
+    category: 'General',
+  },
+  {
+    keys: isMac ? ['⌘', '/'] : ['Ctrl', '/'],
+    description: 'Show this help dialog',
+    category: 'General',
+  },
+];
+
+const KeyboardShortcutsDialog: React.FC<KeyboardShortcutsDialogProps> = ({ isOpen, onClose }) => {
+  // Handle ESC key to close dialog
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, { capture: true });
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const groupedShortcuts = shortcuts.reduce((acc, shortcut) => {
+    if (!acc[shortcut.category]) {
+      acc[shortcut.category] = [];
+    }
+    acc[shortcut.category]!.push(shortcut);
+    return acc;
+  }, {} as Record<string, Shortcut[]>);
+
+  return (
+    <div className="keyboard-shortcuts-overlay" onClick={onClose}>
+      <div className="keyboard-shortcuts-dialog" onClick={(e) => e.stopPropagation()}>
+        <div className="keyboard-shortcuts-header">
+          <h2 className="keyboard-shortcuts-title">Keyboard Shortcuts</h2>
+          <button
+            className="keyboard-shortcuts-close"
+            onClick={onClose}
+            aria-label="Close keyboard shortcuts"
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path
+                d="M15 5L5 15M5 5l10 10"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div className="keyboard-shortcuts-content">
+          {Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
+            <div key={category} className="keyboard-shortcuts-category">
+              <h3 className="keyboard-shortcuts-category-title">{category}</h3>
+              <div className="keyboard-shortcuts-list">
+                {categoryShortcuts.map((shortcut, index) => (
+                  <div key={index} className="keyboard-shortcut-item">
+                    <div className="keyboard-shortcut-keys">
+                      {shortcut.keys.map((key, keyIndex) => (
+                        <React.Fragment key={keyIndex}>
+                          <kbd className="keyboard-key">{key}</kbd>
+                          {keyIndex < shortcut.keys.length - 1 && (
+                            <span className="keyboard-key-separator">+</span>
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                    <div className="keyboard-shortcut-description">{shortcut.description}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="keyboard-shortcuts-footer">
+          <p className="keyboard-shortcuts-hint">
+            Press <kbd className="keyboard-key">Esc</kbd> or click outside to close
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default KeyboardShortcutsDialog;

flock/frontend/src/components/common/LoadingSpinner.module.css

@@ -0,0 +1,97 @@
+/* Loading Spinner Component */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-4);
+  padding: var(--space-layout-md);
+}
+
+.spinner {
+  position: relative;
+  display: inline-block;
+}
+
+/* Size variants */
+.spinner.sm {
+  width: 24px;
+  height: 24px;
+}
+
+.spinner.md {
+  width: 40px;
+  height: 40px;
+}
+
+.spinner.lg {
+  width: 64px;
+  height: 64px;
+}
+
+.ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 3px solid transparent;
+  border-top-color: var(--color-primary-500);
+  border-radius: var(--radius-circle);
+  animation: spin var(--duration-slowest) cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.ring:nth-child(1) {
+  animation-delay: calc(var(--duration-slowest) * -0.45);
+  border-top-color: var(--color-primary-500);
+}
+
+.ring:nth-child(2) {
+  animation-delay: calc(var(--duration-slowest) * -0.3);
+  border-top-color: var(--color-secondary-500);
+}
+
+.ring:nth-child(3) {
+  animation-delay: calc(var(--duration-slowest) * -0.15);
+  border-top-color: var(--color-tertiary-500);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.message {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  margin: 0;
+  text-align: center;
+}
+
+/* Screen reader only class */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .ring {
+    animation: none;
+    border: 3px solid var(--color-primary-500);
+    opacity: 0.7;
+  }
+}

flock/frontend/src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './LoadingSpinner.module.css';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  message?: string;
+}
+
+/**
+ * Beautiful loading spinner component with optional message
+ */
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = 'md',
+  message
+}) => {
+  return (
+    <div className={styles.container} role="status" aria-live="polite">
+      <div className={`${styles.spinner} ${styles[size]}`}>
+        <div className={styles.ring}></div>
+        <div className={styles.ring}></div>
+        <div className={styles.ring}></div>
+      </div>
+      {message && (
+        <p className={styles.message}>{message}</p>
+      )}
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+};