emoemu 0.1.0

package/src/ui/CoreSelector/consts.ts

@@ -0,0 +1,2 @@
+/** Core selector box minimum width */
+export const CORE_SELECTOR_MIN_WIDTH = 60;

package/src/ui/CoreSelector/index.tsx

@@ -0,0 +1,251 @@
+/**
+ * Core Selector UI Component
+ *
+ * A dialog for selecting which emulator core to use when multiple cores
+ * support the same ROM format.
+ */
+
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput, useApp, useStdout } from 'ink';
+import type { CoreFactory } from '../../frontend/coreRegistry';
+import { useGamepad } from '../hooks/useGamepad';
+import { cleanupInkInstance } from '../../utils/terminal';
+import { renderDialog, type DialogRenderOptions } from '../NativeDialog';
+import {
+  DEFAULT_TERM_WIDTH,
+  DEFAULT_TERM_HEIGHT,
+  DIALOG_BOX_PADDING,
+} from '..';
+import { CORE_SELECTOR_MIN_WIDTH } from './consts';
+
+export * from './consts';
+
+interface CoreOption {
+  id: string;
+  factory: CoreFactory;
+}
+
+export interface CoreSelection {
+  id: string;
+  factory: CoreFactory;
+  remember: boolean;
+}
+
+interface CoreSelectorProps {
+  cores: CoreOption[];
+  romName: string;
+  onSelect: (selection: CoreSelection) => void;
+  onCancel: () => void;
+}
+
+const CoreSelector = ({ cores, romName, onSelect, onCancel }: CoreSelectorProps) => {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [rememberSelection, setRememberSelection] = useState(false);
+
+  // Force re-render on mount to trigger Ink's terminal setup before user interaction
+  const [, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      exit();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(prev => Math.max(0, prev - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex(prev => Math.min(cores.length - 1, prev + 1));
+      return;
+    }
+
+    // Tab or 'r' to toggle remember checkbox
+    if (key.tab || input === 'r') {
+      setRememberSelection(prev => !prev);
+      return;
+    }
+
+    if (key.return) {
+      const selected = cores[selectedIndex];
+      onSelect({ id: selected.id, factory: selected.factory, remember: rememberSelection });
+      exit();
+      return;
+    }
+
+    // Number keys for quick selection
+    const num = parseInt(input, 10);
+    if (num >= 1 && num <= cores.length) {
+      const selected = cores[num - 1];
+      onSelect({ id: selected.id, factory: selected.factory, remember: rememberSelection });
+      exit();
+    }
+  });
+
+  // Handle gamepad input
+  useGamepad({
+    onUp: () => setSelectedIndex(prev => Math.max(0, prev - 1)),
+    onDown: () => setSelectedIndex(prev => Math.min(cores.length - 1, prev + 1)),
+    onConfirm: () => {
+      const selected = cores[selectedIndex];
+      onSelect({ id: selected.id, factory: selected.factory, remember: rememberSelection });
+      exit();
+    },
+    onCancel: () => {
+      onCancel();
+      exit();
+    },
+  });
+
+  // Get terminal dimensions for full-screen layout - use Ink's stdout for native mode compatibility
+  const termWidth = stdout.columns || DEFAULT_TERM_WIDTH;
+  const termHeight = stdout.rows || DEFAULT_TERM_HEIGHT;
+  const boxWidth = Math.min(CORE_SELECTOR_MIN_WIDTH, termWidth - DIALOG_BOX_PADDING);
+
+  return (
+    <Box
+      flexDirection="column"
+      width={termWidth}
+      height={termHeight}
+      alignItems="center"
+      justifyContent="center"
+    >
+      {/* Header */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="cyan"
+        paddingX={2}
+        paddingY={1}
+        width={boxWidth}
+      >
+        <Box justifyContent="center" marginBottom={1}>
+          <Text bold color="cyan">{'\u{1F3AE}'} Select Emulator Core</Text>
+        </Box>
+
+        <Box>
+          <Text color="gray">Multiple cores can play </Text>
+          <Text color="white" bold>{romName}</Text>
+        </Box>
+      </Box>
+
+      {/* Core Options */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="gray"
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width={boxWidth}
+      >
+        {cores.map((core, index) => {
+          const info = core.factory.getSystemInfo();
+          const isSelected = index === selectedIndex;
+          const corePath = core.factory.path ?? 'native';
+          const isNative = corePath === 'native';
+
+          return (
+            <Box key={core.id} marginBottom={index < cores.length - 1 ? 1 : 0}>
+              <Text
+                color={isSelected ? 'green' : 'gray'}
+                bold={isSelected}
+              >
+                {isSelected ? '\u25B6 ' : '  '}
+                {index + 1}. {info.name}
+              </Text>
+              {isNative && (
+                <Text color="green"> [native]</Text>
+              )}
+              {!isNative && (
+                <Text color="gray" dimColor> (libretro)</Text>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      {/* Remember Selection */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="gray"
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width={boxWidth}
+      >
+        <Box>
+          <Text
+            color={rememberSelection ? 'green' : 'gray'}
+          >
+            {rememberSelection ? '\u2611' : '\u2610'} Remember this selection
+          </Text>
+          <Text color="gray" dimColor>  (Tab to toggle)</Text>
+        </Box>
+      </Box>
+
+      {/* Footer */}
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>
+          {'\u2191\u2193'} Navigate  {'\u23CE'} Select  1-{cores.length} Quick select  ESC Cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * Launch the core selector dialog
+ *
+ * @param cores Array of matching cores
+ * @param romName Name of the ROM file for display
+ * @param options Optional dialog render options (e.g., nativeMode)
+ * @returns Promise that resolves to the CoreSelection, or null if cancelled
+ */
+export const selectCore = async (
+  cores: CoreOption[],
+  romName: string,
+  options: DialogRenderOptions = {}
+): Promise<CoreSelection | null> => new Promise((resolve) => {
+    let selection: CoreSelection | null = null;
+
+    const handleSelect = (sel: CoreSelection) => {
+      selection = sel;
+    };
+
+    const handleCancel = () => {
+      selection = null;
+    };
+
+    // Enter alternate screen buffer and clear (only in terminal mode)
+    if (!options.nativeMode) {
+      process.stdout.write('\x1b[?1049h\x1b[2J\x1b[H');
+    }
+
+    void renderDialog(
+      <CoreSelector
+        cores={cores}
+        romName={romName}
+        onSelect={handleSelect}
+        onCancel={handleCancel}
+      />,
+      { ...options, title: options.title ?? 'emoemu - Select Core' }
+    ).then(({ instance, cleanup }) => {
+      void instance.waitUntilExit().then(() => {
+        cleanup();
+        cleanupInkInstance(instance, resolve, selection, {
+          exitAlternateScreen: !options.nativeMode,
+        });
+      });
+    });
+  });
+
+export default CoreSelector;

package/src/ui/DialogContainer/index.tsx

@@ -0,0 +1,42 @@
+import { Box, useStdout } from 'ink';
+import { useClearTerminal } from '../hooks/useClearTerminal';
+import {
+  DEFAULT_TERM_WIDTH,
+  DEFAULT_TERM_HEIGHT,
+  DIALOG_BOX_PADDING,
+  DIALOG_BOX_MIN_WIDTH,
+} from '..';
+
+interface DialogContainerProps {
+  minWidth?: number;
+  children: (boxWidth: number) => React.ReactNode;
+}
+
+/**
+ * Shared container for dialogs that handles terminal dimension detection,
+ * screen clearing, ready state, and centering layout.
+ */
+export const DialogContainer = ({ minWidth = DIALOG_BOX_MIN_WIDTH, children }: DialogContainerProps): React.JSX.Element | null => {
+  const { stdout } = useStdout();
+  const ready = useClearTerminal();
+
+  const termWidth = stdout.columns || DEFAULT_TERM_WIDTH;
+  const termHeight = stdout.rows || DEFAULT_TERM_HEIGHT;
+  const boxWidth = Math.min(minWidth, termWidth - DIALOG_BOX_PADDING);
+
+  if (!ready) {
+    return null;
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      width={termWidth}
+      height={termHeight}
+      alignItems="center"
+      justifyContent="center"
+    >
+      {children(boxWidth)}
+    </Box>
+  );
+};

package/src/ui/DialogOptionsList/index.tsx

@@ -0,0 +1,61 @@
+import { Box, Text } from 'ink';
+
+interface DialogOption {
+  label: string;
+  choice: string;
+  color: string;
+}
+
+interface DialogOptionsListProps {
+  options: DialogOption[];
+  selectedIndex: number;
+  boxWidth: number;
+  /** Label shown after ESC in the footer (default: "Cancel") */
+  escLabel?: string;
+  /** Prompt shown above options, or false to hide (default: "What would you like to do?") */
+  prompt?: string | false;
+}
+
+export const DialogOptionsList = ({
+  options,
+  selectedIndex,
+  boxWidth,
+  escLabel = 'Cancel',
+  prompt = 'What would you like to do?',
+}: DialogOptionsListProps): React.JSX.Element => (
+  <>
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="gray"
+      paddingX={2}
+      paddingY={1}
+      marginTop={1}
+      width={boxWidth}
+    >
+      {prompt !== false && (
+        <Box marginBottom={1}>
+          <Text bold>{prompt}</Text>
+        </Box>
+      )}
+
+      {options.map((option, index) => (
+        <Box key={option.choice}>
+          <Text
+            color={selectedIndex === index ? option.color : 'gray'}
+            bold={selectedIndex === index}
+          >
+            {selectedIndex === index ? '\u25B6 ' : '  '}
+            {index + 1}. {option.label}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+
+    <Box marginTop={1}>
+      <Text color="gray" dimColor>
+        {'\u2191\u2193'} Navigate  {'\u23CE'} Select  ESC {escLabel}
+      </Text>
+    </Box>
+  </>
+);

package/src/ui/DuplicateCrcPrompt/consts.ts

@@ -0,0 +1,5 @@
+/** Dialog box minimum width (wider than default for path display) */
+export const DIALOG_BOX_MIN_WIDTH = 60;
+
+/** Path label width (accounts for "Existing: " or "New:      " labels) */
+export const PATH_LABEL_WIDTH = 12;

package/src/ui/DuplicateCrcPrompt/index.tsx

@@ -0,0 +1,146 @@
+/**
+ * Duplicate CRC Prompt Component
+ *
+ * Shows when importing a ROM that has the same CRC32 as an existing entry
+ * in the library, where both files exist. Prompts user to either update
+ * the path or skip the import.
+ */
+
+import { Box, Text } from 'ink';
+import { DialogOptionsList } from '../DialogOptionsList';
+import { DialogContainer } from '../DialogContainer';
+import { useDialogNavigation } from '../hooks/useDialogNavigation';
+import { launchDialog, type DialogRenderOptions } from '../NativeDialog';
+import { SEPARATOR_LINE_PADDING } from '..';
+import {
+  DIALOG_BOX_MIN_WIDTH,
+  PATH_LABEL_WIDTH,
+} from './consts';
+
+export type DuplicateCrcChoice = 'update' | 'skip';
+
+export interface DuplicateCrcInfo {
+  /** The new ROM path being imported */
+  newPath: string;
+  /** The existing ROM path in the library */
+  existingPath: string;
+  /** The game label/title */
+  label: string;
+  /** The shared CRC32 value */
+  crc32: string;
+}
+
+interface DuplicateCrcDialogProps {
+  info: DuplicateCrcInfo;
+  onChoice: (choice: DuplicateCrcChoice) => void;
+}
+
+/** Truncate a path to fit within max length, showing ... in the middle */
+const truncatePath = (path: string, maxLength: number): string => {
+  if (path.length <= maxLength) {
+    return path;
+  }
+
+  const ellipsis = '...';
+  const availableLength = maxLength - ellipsis.length;
+  const startLength = Math.ceil(availableLength / 2);
+  const endLength = Math.floor(availableLength / 2);
+
+  return path.slice(0, startLength) + ellipsis + path.slice(-endLength);
+};
+
+const DuplicateCrcDialog = ({ info, onChoice }: DuplicateCrcDialogProps) => {
+  const options: { label: string; choice: DuplicateCrcChoice; color: string }[] = [
+    { label: 'Update path to new location', choice: 'update', color: 'green' },
+    { label: 'Skip (keep existing)', choice: 'skip', color: 'gray' },
+  ];
+
+  const { selectedIndex } = useDialogNavigation({
+    itemCount: options.length,
+    onSelect: (index) => onChoice(options[index].choice),
+    onCancel: () => onChoice('skip'),
+  });
+
+  return (
+    <DialogContainer minWidth={DIALOG_BOX_MIN_WIDTH}>
+      {(boxWidth) => {
+        // Calculate max path length for truncation (accounting for label and padding)
+        const pathMaxLength = boxWidth - SEPARATOR_LINE_PADDING - PATH_LABEL_WIDTH;
+
+        return (
+          <>
+            {/* Header */}
+            <Box
+              flexDirection="column"
+              borderStyle="round"
+              borderColor="yellow"
+              paddingX={2}
+              paddingY={1}
+              width={boxWidth}
+            >
+              <Box justifyContent="center" marginBottom={1}>
+                <Text bold color="yellow">{'\u26A0'} Duplicate ROM Detected</Text>
+              </Box>
+
+              {/* Explanation */}
+              <Box marginBottom={1}>
+                <Text color="white">
+                  A ROM with the same checksum already exists in your library.
+                </Text>
+              </Box>
+
+              {/* Separator */}
+              <Text color="gray" dimColor>{'─'.repeat(boxWidth - SEPARATOR_LINE_PADDING)}</Text>
+
+              {/* Game info */}
+              <Box flexDirection="column" marginY={1}>
+                <Box>
+                  <Text color="gray">{'Game:  '}</Text>
+                  <Text color="white" bold>{info.label}</Text>
+                </Box>
+                <Box>
+                  <Text color="gray">{'CRC32: '}</Text>
+                  <Text color="cyan">{info.crc32}</Text>
+                </Box>
+              </Box>
+
+              {/* Separator */}
+              <Text color="gray" dimColor>{'─'.repeat(boxWidth - SEPARATOR_LINE_PADDING)}</Text>
+
+              {/* Paths */}
+              <Box flexDirection="column" marginY={1}>
+                <Box>
+                  <Text color="gray">{'Existing: '}</Text>
+                  <Text color="white">{truncatePath(info.existingPath, pathMaxLength)}</Text>
+                </Box>
+                <Box>
+                  <Text color="gray">{'New:      '}</Text>
+                  <Text color="green">{truncatePath(info.newPath, pathMaxLength)}</Text>
+                </Box>
+              </Box>
+            </Box>
+
+            <DialogOptionsList options={options} selectedIndex={selectedIndex} boxWidth={boxWidth} escLabel="Skip" />
+          </>
+        );
+      }}
+    </DialogContainer>
+  );
+};
+
+/**
+ * Show the duplicate CRC dialog and get user's choice
+ */
+export const showDuplicateCrcPrompt = (
+  info: DuplicateCrcInfo,
+  options: DialogRenderOptions = {}
+): Promise<DuplicateCrcChoice> => launchDialog<DuplicateCrcChoice>(
+  (onChoice) => <DuplicateCrcDialog info={info} onChoice={onChoice} />,
+  'skip',
+  { ...options, title: options.title ?? 'emoemu - Duplicate ROM' },
+);
+
+export default DuplicateCrcDialog;
+
+// Re-export constants
+export * from './consts';

package/src/ui/GamepadContext/consts.ts

@@ -0,0 +1,15 @@
+/** Delay before repeating starts (ms) */
+export const INITIAL_DELAY_MS = 400;
+
+/** Starting repeat interval (ms) */
+export const INITIAL_REPEAT_MS = 200;
+
+/** Fastest repeat interval (ms) */
+export const MIN_REPEAT_MS = 40;
+
+/** Time to reach max speed (ms) */
+export const ACCELERATION_TIME_MS = 1500;
+
+/** Ease-in-out cubic smoothing factors */
+export const EASE_CUBIC_FACTOR = 3;
+export const EASE_CUBIC_DIVISOR = 2;