codex-linux 1.0.0

package/src/renderer/lib/accessibility.tsx

@@ -0,0 +1,287 @@
+import React, { useState, useEffect, useCallback, KeyboardEvent, MouseEvent } from 'react';
+
+export interface AriaAttributes {
+  role?: string;
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+  ariaHidden?: boolean;
+  ariaDisabled?: boolean;
+  ariaExpanded?: boolean;
+  ariaPressed?: boolean;
+  ariaSelected?: boolean;
+  ariaChecked?: boolean;
+  ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+  ariaLive?: 'off' | 'polite' | 'assertive';
+  ariaAtomic?: boolean;
+  ariaBusy?: boolean;
+}
+
+export interface KeyboardHandler {
+  onEnter?: () => void;
+  onSpace?: () => void;
+  onEscape?: () => void;
+  onArrowUp?: () => void;
+  onArrowDown?: () => void;
+  onArrowLeft?: () => void;
+  onArrowRight?: () => void;
+  onHome?: () => void;
+  onEnd?: () => void;
+  onTab?: (shiftKey?: boolean) => void;
+  onDelete?: () => void;
+  onBackspace?: () => void;
+  onCharacter?: (char: string) => void;
+}
+
+export function useKeyboard(keyHandlers: KeyboardHandler) {
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    const { key, shiftKey, ctrlKey, metaKey, altKey } = event;
+    
+    if (ctrlKey || metaKey || altKey) {
+      return;
+    }
+
+    switch (key) {
+      case 'Enter':
+        keyHandlers.onEnter?.();
+        event.preventDefault();
+        break;
+      case ' ':
+        keyHandlers.onSpace?.();
+        event.preventDefault();
+        break;
+      case 'Escape':
+        keyHandlers.onEscape?.();
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+        keyHandlers.onArrowUp?.();
+        event.preventDefault();
+        break;
+      case 'ArrowDown':
+        keyHandlers.onArrowDown?.();
+        event.preventDefault();
+        break;
+      case 'ArrowLeft':
+        keyHandlers.onArrowLeft?.();
+        event.preventDefault();
+        break;
+      case 'ArrowRight':
+        keyHandlers.onArrowRight?.();
+        event.preventDefault();
+        break;
+      case 'Home':
+        keyHandlers.onHome?.();
+        event.preventDefault();
+        break;
+      case 'End':
+        keyHandlers.onEnd?.();
+        event.preventDefault();
+        break;
+      case 'Tab':
+        keyHandlers.onTab?.(shiftKey);
+        break;
+      case 'Delete':
+        keyHandlers.onDelete?.();
+        event.preventDefault();
+        break;
+      case 'Backspace':
+        keyHandlers.onBackspace?.();
+        event.preventDefault();
+        break;
+      default:
+        if (key.length === 1) {
+          keyHandlers.onCharacter?.(key);
+        }
+    }
+  }, [keyHandlers]);
+
+  return { handleKeyDown };
+}
+
+export function useFocusTrap(isActive: boolean) {
+  const [focusableElements, setFocusableElements] = useState<HTMLElement[]>([]);
+  const [initialFocus, setInitialFocus] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    const getFocusableElements = () => {
+      const selector = [
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        'a[href]',
+        '[tabindex]:not([tabindex="-1"])'
+      ].join(', ');
+
+      const elements = Array.from(
+        document.querySelectorAll<HTMLElement>(selector)
+      ).filter(el => el.offsetParent !== null);
+
+      setFocusableElements(elements);
+      
+      const firstElement = elements[0];
+      const lastElement = elements[elements.length - 1];
+      
+      setInitialFocus(firstElement || null);
+      
+      return { first: firstElement, last: lastElement };
+    };
+
+    const { first, last } = getFocusableElements();
+
+    const handleTabKey = (e: globalThis.KeyboardEvent): void => {
+      if (e.key !== 'Tab') return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          last?.focus();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === last) {
+          first?.focus();
+          e.preventDefault();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleTabKey as EventListener);
+    first?.focus();
+
+    return () => {
+      document.removeEventListener('keydown', handleTabKey as EventListener);
+      initialFocus?.focus();
+    };
+  }, [isActive]);
+
+  return { focusableElements, initialFocus };
+}
+
+export function useAnnounce(message: string, priority: 'polite' | 'assertive' = 'polite') {
+  const [announcement, setAnnouncement] = useState('');
+
+  useEffect(() => {
+    if (message) {
+      setAnnouncement('');
+      setTimeout(() => setAnnouncement(message), 50);
+    }
+  }, [message]);
+
+  return (
+    <div
+      role="status"
+      aria-live={priority}
+      aria-atomic="true"
+      className="sr-only"
+    >
+      {announcement}
+    </div>
+  );
+}
+
+export interface AriaMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  shortcut?: string;
+  divider?: boolean;
+}
+
+export interface UseMenuProps {
+  items: AriaMenuItem[];
+  onSelect: (id: string) => void;
+}
+
+export function useMenu({ items, onSelect }: UseMenuProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    const enabledItems = items.filter(item => !item.disabled);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setActiveIndex(prev => 
+          prev < enabledItems.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setActiveIndex(prev => 
+          prev > 0 ? prev - 1 : enabledItems.length - 1
+        );
+        break;
+      case 'Home':
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      case 'End':
+        e.preventDefault();
+        setActiveIndex(enabledItems.length - 1);
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        const selectedItem = enabledItems[activeIndex];
+        if (selectedItem) {
+          onSelect(selectedItem.id);
+          setIsOpen(false);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setIsOpen(false);
+        break;
+    }
+  }, [items, activeIndex, onSelect]);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+    setActiveIndex(0);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  return {
+    isOpen,
+    activeIndex,
+    open,
+    close,
+    handleKeyDown,
+    items
+  };
+}
+
+export function useSkipLink(targetId: string) {
+  const handleClick = useCallback((e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const target = document.getElementById(targetId);
+    target?.focus();
+    target?.scrollIntoView({ behavior: 'smooth' });
+  }, [targetId]);
+
+  return { handleClick };
+}
+
+export interface FocusableProps {
+  tabIndex?: number;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export function createAriaProps(
+  type: 'button' | 'dialog' | 'menu' | 'menuitem' | 'tab' | 'treeitem' | 'combobox' | 'listbox' | 'option' | 'gridcell' | 'checkbox' | 'radio' | 'slider' | 'switch' | 'textbox' | 'searchbox' | 'spinbutton',
+  props: AriaAttributes
+): AriaAttributes {
+  return {
+    role: type,
+    ...props
+  };
+}

package/src/renderer/lib/hooks.ts

@@ -0,0 +1,304 @@
+import { useCallback, useMemo, useRef, useEffect, useState, DependencyList } from 'react';
+
+export function useMemoized<T>(factory: () => T, deps: DependencyList): T {
+  return useMemo(factory, deps);
+}
+
+export function useCallbackRef<T extends (...args: unknown[]) => unknown>(
+  callback: T,
+  deps: DependencyList
+): T {
+  return useCallback(callback, deps) as T;
+}
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export function useThrottle<T>(value: T, interval: number): T {
+  const [throttledValue, setThrottledValue] = useState<T>(value);
+  const lastRan = useRef(Date.now());
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      if (Date.now() - lastRan.current >= interval) {
+        lastRan.current = Date.now();
+        setThrottledValue(value);
+      }
+    }, interval - (Date.now() - lastRan.current));
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, interval]);
+
+  return throttledValue;
+}
+
+export function useLazyImport<T>(
+  importFn: () => Promise<{ default: T }>,
+  deps: DependencyList = []
+): { component: T | null; isLoading: boolean; error: Error | null } {
+  const [component, setComponent] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const loadedRef = useRef(false);
+
+  useEffect(() => {
+    if (loadedRef.current) return;
+    loadedRef.current = true;
+    
+    setIsLoading(true);
+    importFn()
+      .then((mod) => {
+        setComponent(mod.default);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setError(err);
+        setIsLoading(false);
+      });
+  }, deps);
+
+  return { component, isLoading, error };
+}
+
+export function useIntersectionObserver(
+  options: IntersectionObserverInit = {}
+): [React.RefObject<HTMLDivElement>, boolean] {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting);
+    }, options);
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [options.root, options.rootMargin, options.threshold]);
+
+  return [ref as React.RefObject<HTMLDivElement>, isIntersecting];
+}
+
+export function useVirtualList<T>(
+  items: T[],
+  itemHeight: number,
+  containerHeight: number
+): {
+  visibleItems: T[];
+  startIndex: number;
+  endIndex: number;
+  totalHeight: number;
+  offsetY: number;
+} {
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const startIndex = Math.floor(scrollTop / itemHeight);
+  const endIndex = Math.min(
+    startIndex + Math.ceil(containerHeight / itemHeight),
+    items.length
+  );
+  const visibleItems = items.slice(startIndex, endIndex);
+  const totalHeight = items.length * itemHeight;
+  const offsetY = startIndex * itemHeight;
+
+  useEffect(() => {
+    setScrollTop(0);
+  }, [items]);
+
+  return {
+    visibleItems,
+    startIndex,
+    endIndex,
+    totalHeight,
+    offsetY,
+  };
+}
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+export function useToggle(initialValue = false): [boolean, () => void, (value: boolean) => void] {
+  const [value, setValue] = useState(initialValue);
+  const toggle = useCallback(() => setValue((v) => !v), []);
+  return [value, toggle, setValue];
+}
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | ((val: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (value: T | ((val: T) => T)) => {
+      try {
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      } catch (error) {
+        console.error('Error saving to localStorage:', error);
+      }
+    },
+    [key, storedValue]
+  );
+
+  return [storedValue, setValue];
+}
+
+export function useAsync<T>(
+  asyncFn: () => Promise<T>,
+  deps: DependencyList = []
+): {
+  execute: () => Promise<void>;
+  status: 'idle' | 'pending' | 'success' | 'error';
+  value: T | null;
+  error: Error | null;
+} {
+  const [status, setStatus] = useState<'idle' | 'pending' | 'success' | 'error'>('idle');
+  const [value, setValue] = useState<T | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  const execute = useCallback(async () => {
+    setStatus('pending');
+    setValue(null);
+    setError(null);
+
+    try {
+      const response = await asyncFn();
+      setValue(response);
+      setStatus('success');
+    } catch (error) {
+      setError(error as Error);
+      setStatus('error');
+    }
+  }, deps);
+
+  return { execute, status, value, error };
+}
+
+export function useWindowSize(): { width: number; height: number } {
+  const [windowSize, setWindowSize] = useState({
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+}
+
+export function useClickOutside(
+  ref: React.RefObject<HTMLElement>,
+  handler: () => void
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}
+
+export function useKeyPress(targetKey: string, handler: () => void): void {
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.key === targetKey) {
+        handler();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [targetKey, handler]);
+}
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+
+  return matches;
+}
+
+export function useIsMounted(): boolean {
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return isMounted.current;
+}
+
+export function useForceUpdate(): () => void {
+  const [, setTick] = useState(0);
+  return useCallback(() => {
+    setTick((tick) => tick + 1);
+  }, []);
+}

package/src/renderer/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/renderer/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js')
+      .then(registration => {
+        console.log('SW registered:', registration);
+      })
+      .catch(error => {
+        console.log('SW registration failed:', error);
+      });
+  });
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);