markupr 2.1.8 → 2.5.0

package/src/renderer/components/index.ts

@@ -1,99 +0,0 @@
-/**
- * markupr UI Components
- *
- * Re-exports all components for clean imports:
- * import { RecordingOverlay, StatusIndicator, SessionReview, Onboarding, ErrorBoundary, AnnotationOverlay, AudioWaveform } from './components';
- */
-
-export { RecordingOverlay } from './RecordingOverlay';
-export { ProcessingOverlay } from './ProcessingOverlay';
-export { CountdownTimer } from './CountdownTimer';
-export { default as StatusIndicator } from './StatusIndicator';
-export { SessionReview } from './SessionReview';
-export { Onboarding } from './Onboarding';
-export { ErrorBoundary, MinimalErrorBoundary } from './ErrorBoundary';
-export { AnnotationOverlay } from './AnnotationOverlay';
-export { AudioWaveform, CompactAudioIndicator, AudioLevelMeter } from './AudioWaveform';
-export { WindowSelector } from './WindowSelector';
-export { UpdateNotification } from './UpdateNotification';
-export { CrashRecoveryDialog, useCrashRecovery } from './CrashRecoveryDialog';
-export { ExportDialog } from './ExportDialog';
-export { ClarificationQuestions } from './ClarificationQuestions';
-
-// Theme components
-export { ThemeProvider, ThemeToggle, AccentColorPicker } from './ThemeProvider';
-
-// Animation components
-export { default as Skeleton } from './Skeleton';
-export {
-  SkeletonText,
-  SkeletonAvatar,
-  SkeletonThumbnail,
-  SkeletonButton,
-  SkeletonCard,
-  SkeletonListItem,
-  SkeletonFeedbackItem,
-  SkeletonWindowSource,
-} from './Skeleton';
-
-export { default as Tooltip } from './Tooltip';
-export { Tooltip as TooltipComponent, HotkeyTooltip, StatusTooltip } from './Tooltip';
-
-// Keyboard shortcuts panel
-export { KeyboardShortcuts, default as KeyboardShortcutsPanel } from './KeyboardShortcuts';
-
-// Hotkey hint component (platform-aware)
-export { HotkeyHint, ToggleRecordingHint, ManualScreenshotHint, getHotkeyText } from './HotkeyHint';
-
-// Transcription tier selector
-export { TranscriptionTierSelector, type TranscriptionTier } from './TranscriptionTierSelector';
-
-// Settings panel
-export { SettingsPanel, default as SettingsPanelDefault } from './SettingsPanel';
-
-// Donate button
-export { DonateButton, default as DonateButtonDefault } from './DonateButton';
-
-// Session history
-export { SessionHistory } from './SessionHistory';
-
-// Transcription preview (post-processing results viewer)
-export { TranscriptionPreview, TranscriptionPreviewAnimated } from './TranscriptionPreview';
-export type { TranscriptSegment, TranscriptionPreviewProps } from './TranscriptionPreview';
-
-// Model download dialog
-export { ModelDownloadDialog, useModelCheck } from './ModelDownloadDialog';
-
-// Type exports for external use
-export type { default as RecordingOverlayType } from './RecordingOverlay';
-export type { SessionReviewProps } from './SessionReview';
-export type { AudioWaveformProps } from './AudioWaveform';
-export type { TooltipProps, TooltipPlacement, TooltipStatus } from './Tooltip';
-export type {
-  CrashRecoveryDialogProps,
-  RecoverableSession,
-  RecoverableFeedbackItem,
-  UseCrashRecoveryReturn,
-} from './CrashRecoveryDialog';
-export type {
-  KeyboardShortcutsProps,
-  Shortcut,
-  ShortcutCategory,
-} from './KeyboardShortcuts';
-export type {
-  ExportDialogProps,
-  ExportOptions as ExportDialogOptions,
-  ExportFormat as DialogExportFormat,
-} from './ExportDialog';
-export type { CountdownTimerProps } from './CountdownTimer';
-export type {
-  ThemeProviderProps,
-  ThemeToggleProps,
-  AccentColorPickerProps,
-} from './ThemeProvider';
-export type {
-  ClarificationQuestionsProps,
-  ClarificationQuestion,
-  ClarificationType,
-} from './ClarificationQuestions';
-export type { DonateButtonProps } from './DonateButton';

package/src/renderer/components/primitives/ApiKeyInput.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import { useTheme } from '../../hooks/useTheme';
-import { styles } from '../settings/settingsStyles';
-
-export interface ApiKeyState {
-  value: string;
-  visible: boolean;
-  testing: boolean;
-  valid: boolean | null;
-  error: string | null;
-}
-
-export const ApiKeyInput: React.FC<{
-  label: string;
-  description?: string;
-  serviceName: string;
-  apiKey: ApiKeyState;
-  onApiKeyChange: (value: string) => void;
-  onToggleVisibility: () => void;
-  onTest: () => void;
-}> = ({ label, description, serviceName, apiKey, onApiKeyChange, onToggleVisibility, onTest }) => {
-  const { colors } = useTheme();
-  return (
-  <div style={styles.settingRowVertical}>
-    <div style={styles.settingInfo}>
-      <span style={styles.settingLabel}>{label}</span>
-      {description && <span style={styles.settingDescription}>{description}</span>}
-    </div>
-    <div style={styles.apiKeyContainer}>
-      <div style={styles.apiKeyInputWrapper}>
-        <input
-          type={apiKey.visible ? 'text' : 'password'}
-          value={apiKey.value}
-          onChange={(e) => onApiKeyChange(e.target.value)}
-          placeholder={`Enter your ${serviceName} API key`}
-          style={{
-            ...styles.apiKeyInput,
-            borderColor: apiKey.error ? colors.status.error : apiKey.valid ? colors.status.success : colors.border.default,
-          }}
-        />
-        <button style={styles.apiKeyVisibilityButton} onClick={onToggleVisibility} title={apiKey.visible ? 'Hide' : 'Show'}>
-          {apiKey.visible ? (
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-              <path
-                d="M2.636 9.364S4.91 5.182 9 5.182s6.364 4.182 6.364 4.182-2.273 4.182-6.364 4.182-6.364-4.182-6.364-4.182z"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-              <circle cx="9" cy="9" r="2" stroke="currentColor" strokeWidth="1.5" />
-            </svg>
-          ) : (
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-              <path
-                d="M2 2l14 14M7.455 7.455a2 2 0 002.828 2.828M14.182 10.727c.6-.527.975-.961 1.182-1.363-1.636-3.273-4.364-5.182-6.364-5.182-.545 0-1.09.127-1.636.382M3.818 5.273C2.818 6.073 2.273 6.909 2 7.636c1.636 3.273 4.364 5.182 6.364 5.182.818 0 1.636-.255 2.454-.727"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
-          )}
-        </button>
-      </div>
-      <button
-        style={{
-          ...styles.apiKeyTestButton,
-          backgroundColor: apiKey.testing ? colors.bg.tertiary : apiKey.valid ? colors.status.success : colors.accent.default,
-          cursor: !apiKey.value ? 'not-allowed' : 'pointer',
-          opacity: !apiKey.value ? 0.5 : 1,
-        }}
-        onClick={onTest}
-        disabled={!apiKey.value}
-      >
-        {apiKey.testing ? (
-          <span style={styles.spinner} />
-        ) : apiKey.valid ? (
-          <>
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-              <path
-                d="M7 2.25a4.75 4.75 0 104.39 2.92"
-                stroke="currentColor"
-                strokeWidth="1.4"
-                strokeLinecap="round"
-              />
-              <path d="M10.7 2.3h1.2v1.2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
-            </svg>
-            Retest
-          </>
-        ) : (
-          'Test Connection'
-        )}
-      </button>
-    </div>
-    {apiKey.error && <span style={styles.apiKeyError}>{apiKey.error}</span>}
-    {apiKey.valid && <span style={styles.apiKeySuccess}>API key verified and saved securely.</span>}
-  </div>
-  );
-};

package/src/renderer/components/primitives/ColorPicker.tsx

@@ -1,65 +0,0 @@
-import React, { useState } from 'react';
-import { accentColors } from '../../styles/theme';
-import { useTheme } from '../../hooks/useTheme';
-import { styles } from '../settings/settingsStyles';
-
-export const ACCENT_COLORS = [
-  { name: accentColors.blue.name, value: accentColors.blue.default },
-  { name: accentColors.violet.name, value: accentColors.violet.default },
-  { name: accentColors.pink.name, value: accentColors.pink.default },
-  { name: accentColors.red.name, value: accentColors.red.default },
-  { name: accentColors.orange.name, value: accentColors.orange.default },
-  { name: accentColors.amber.name, value: accentColors.amber.default },
-  { name: accentColors.emerald.name, value: accentColors.emerald.default },
-  { name: accentColors.teal.name, value: accentColors.teal.default },
-  { name: accentColors.cyan.name, value: accentColors.cyan.default },
-];
-
-export const ColorPicker: React.FC<{
-  label: string;
-  description?: string;
-  value: string;
-  onChange: (value: string) => void;
-}> = ({ label, description, value, onChange }) => {
-  const [customColor, setCustomColor] = useState(value);
-  const { colors } = useTheme();
-
-  const isPreset = ACCENT_COLORS.some((c) => c.value === value);
-
-  return (
-    <div style={styles.settingRowVertical}>
-      <div style={styles.settingInfo}>
-        <span style={styles.settingLabel}>{label}</span>
-        {description && <span style={styles.settingDescription}>{description}</span>}
-      </div>
-      <div style={styles.colorPickerContainer}>
-        {ACCENT_COLORS.map((color) => (
-          <button
-            key={color.value}
-            style={{
-              ...styles.colorSwatch,
-              backgroundColor: color.value,
-              boxShadow: value === color.value ? `0 0 0 2px ${colors.bg.primary}, 0 0 0 4px ${color.value}` : 'none',
-            }}
-            onClick={() => onChange(color.value)}
-            title={color.name}
-            aria-label={`Select ${color.name} accent color`}
-          />
-        ))}
-        <div style={styles.customColorContainer}>
-          <input
-            type="color"
-            value={isPreset ? customColor : value}
-            onChange={(e) => {
-              setCustomColor(e.target.value);
-              onChange(e.target.value);
-            }}
-            style={styles.customColorInput}
-            title="Custom color"
-          />
-          <span style={styles.customColorLabel}>Custom</span>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/renderer/components/primitives/DangerButton.tsx

@@ -1,45 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { useTheme } from '../../hooks/useTheme';
-import { styles } from '../settings/settingsStyles';
-
-export const DangerButton: React.FC<{
-  label: string;
-  description?: string;
-  buttonText: string;
-  onConfirm: () => void;
-  confirmText?: string;
-}> = ({ label, description, buttonText, onConfirm, confirmText }) => {
-  const [confirming, setConfirming] = useState(false);
-  const { colors } = useTheme();
-
-  const handleClick = useCallback(() => {
-    if (confirming) {
-      onConfirm();
-      setConfirming(false);
-    } else {
-      setConfirming(true);
-      // Auto-reset after 3 seconds
-      setTimeout(() => setConfirming(false), 3000);
-    }
-  }, [confirming, onConfirm]);
-
-  return (
-    <div style={styles.settingRow}>
-      <div style={styles.settingInfo}>
-        <span style={styles.settingLabel}>{label}</span>
-        {description && <span style={styles.settingDescription}>{description}</span>}
-      </div>
-      <button
-        style={{
-          ...styles.dangerButton,
-          backgroundColor: confirming ? colors.status.error : colors.status.errorSubtle,
-          color: confirming ? colors.text.inverse : colors.status.error,
-          borderColor: confirming ? colors.status.error : colors.status.errorSubtle,
-        }}
-        onClick={handleClick}
-      >
-        {confirming ? confirmText || 'Click again to confirm' : buttonText}
-      </button>
-    </div>
-  );
-};

package/src/renderer/components/primitives/DirectoryPicker.tsx

@@ -1,41 +0,0 @@
-import React, { useCallback } from 'react';
-import { styles } from '../settings/settingsStyles';
-
-export const DirectoryPicker: React.FC<{
-  label: string;
-  description?: string;
-  value: string;
-  onChange: (value: string) => void;
-}> = ({ label, description, value, onChange }) => {
-  const handleBrowse = useCallback(async () => {
-    try {
-      const result = await window.markupr.settings.selectDirectory();
-      if (result) {
-        onChange(result);
-      }
-    } catch {
-      // User cancelled or error
-    }
-  }, [onChange]);
-
-  return (
-    <div style={styles.settingRow}>
-      <div style={styles.settingInfo}>
-        <span style={styles.settingLabel}>{label}</span>
-        {description && <span style={styles.settingDescription}>{description}</span>}
-      </div>
-      <div style={styles.directoryPicker}>
-        <input
-          type="text"
-          value={value}
-          readOnly
-          style={styles.directoryInput}
-          placeholder="Select output directory..."
-        />
-        <button style={styles.browseButton} onClick={handleBrowse}>
-          Browse...
-        </button>
-      </div>
-    </div>
-  );
-};

package/src/renderer/components/primitives/Dropdown.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { styles } from '../settings/settingsStyles';
-
-export const DropdownSetting: React.FC<{
-  label: string;
-  description?: string;
-  value: string | number;
-  options: { value: string | number; label: string }[];
-  onChange: (value: string | number) => void;
-  disabled?: boolean;
-}> = ({ label, description, value, options, onChange, disabled }) => (
-  <div style={styles.settingRow}>
-    <div style={styles.settingInfo}>
-      <span style={styles.settingLabel}>{label}</span>
-      {description && <span style={styles.settingDescription}>{description}</span>}
-    </div>
-    <select
-      style={{
-        ...styles.select,
-        opacity: disabled ? 0.5 : 1,
-        cursor: disabled ? 'not-allowed' : 'pointer',
-      }}
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-    >
-      {options.map((opt) => (
-        <option key={opt.value} value={opt.value}>
-          {opt.label}
-        </option>
-      ))}
-    </select>
-  </div>
-);

package/src/renderer/components/primitives/KeyRecorder.tsx

@@ -1,117 +0,0 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { useTheme } from '../../hooks/useTheme';
-import { styles } from '../settings/settingsStyles';
-
-export const KeyRecorder: React.FC<{
-  label: string;
-  description?: string;
-  value: string;
-  onChange: (value: string) => void;
-  conflict?: string | null;
-}> = ({ label, description, value, onChange, conflict }) => {
-  const [recording, setRecording] = useState(false);
-  const { colors } = useTheme();
-  const inputRef = useRef<HTMLButtonElement>(null);
-  const isMac = typeof navigator !== 'undefined' && navigator.platform.toLowerCase().includes('mac');
-
-  const formatHotkey = useCallback((hotkey: string): string => {
-    return hotkey
-      .replace('CommandOrControl', isMac ? 'Cmd' : 'Ctrl')
-      .replace('Command', 'Cmd')
-      .replace('Control', 'Ctrl')
-      .replace('Alt', isMac ? 'Option' : 'Alt')
-      .replace('Shift', 'Shift')
-      .replace(/\+/g, ' + ');
-  }, [isMac]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (!recording) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      const modifiers: string[] = [];
-      if (e.metaKey || e.ctrlKey) modifiers.push('CommandOrControl');
-      if (e.altKey) modifiers.push('Alt');
-      if (e.shiftKey) modifiers.push('Shift');
-
-      // Ignore modifier-only keys
-      const key = e.key;
-      if (['Meta', 'Control', 'Alt', 'Shift'].includes(key)) {
-        return;
-      }
-
-      // Build hotkey string
-      const hotkeyKey = key.length === 1 ? key.toUpperCase() : key;
-      const hotkey = [...modifiers, hotkeyKey].join('+');
-
-      onChange(hotkey);
-      setRecording(false);
-    },
-    [recording, onChange]
-  );
-
-  useEffect(() => {
-    if (recording) {
-      window.addEventListener('keydown', handleKeyDown);
-      return () => window.removeEventListener('keydown', handleKeyDown);
-    }
-  }, [recording, handleKeyDown]);
-
-  // Cancel recording on click outside
-  useEffect(() => {
-    if (!recording) return;
-
-    const handleClickOutside = (e: MouseEvent) => {
-      if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
-        setRecording(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [recording]);
-
-  return (
-    <div style={styles.settingRow}>
-      <div style={styles.settingInfo}>
-        <span style={styles.settingLabel}>{label}</span>
-        {description && <span style={styles.settingDescription}>{description}</span>}
-        {conflict && (
-          <span style={styles.conflictWarning}>
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-              <path
-                d="M7 4.5v3M7 9.5h.005"
-                stroke={colors.status.warning}
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-              <path
-                d="M6.134 1.944L1.06 10.5a1 1 0 00.866 1.5h10.148a1 1 0 00.866-1.5L7.866 1.944a1 1 0 00-1.732 0z"
-                stroke={colors.status.warning}
-                strokeWidth="1.5"
-              />
-            </svg>
-            Conflicts with: {conflict}
-          </span>
-        )}
-      </div>
-      <button
-        ref={inputRef}
-        style={{
-          ...styles.keyRecorder,
-          borderColor: recording ? colors.accent.default : conflict ? colors.status.warning : colors.border.default,
-          backgroundColor: recording ? colors.accent.subtle : colors.surface.inset,
-        }}
-        onClick={() => setRecording(true)}
-      >
-        {recording ? (
-          <span style={styles.keyRecorderRecording}>Press keys...</span>
-        ) : (
-          <span style={styles.keyRecorderValue}>{formatHotkey(value)}</span>
-        )}
-      </button>
-    </div>
-  );
-};

package/src/renderer/components/primitives/SettingsSection.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { styles } from '../settings/settingsStyles';
-
-export const SettingsSection: React.FC<{
-  title: string;
-  description?: string;
-  children: React.ReactNode;
-  onReset?: () => void;
-}> = ({ title, description, children, onReset }) => (
-  <div style={styles.section}>
-    <div style={styles.sectionHeader}>
-      <div>
-        <h3 style={styles.sectionTitle}>{title}</h3>
-        {description && <p style={styles.sectionDescription}>{description}</p>}
-      </div>
-      {onReset && (
-        <button style={styles.resetSectionButton} onClick={onReset} title="Reset section to defaults">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <path
-              d="M1.75 7a5.25 5.25 0 109.006-3.668M7 3.5V1.75L9.625 4.375 7 7"
-              stroke="currentColor"
-              strokeWidth="1.25"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
-      )}
-    </div>
-    <div style={styles.sectionContent}>{children}</div>
-  </div>
-);

package/src/renderer/components/primitives/Slider.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { styles } from '../settings/settingsStyles';
-
-export const SliderSetting: React.FC<{
-  label: string;
-  description?: string;
-  value: number;
-  min: number;
-  max: number;
-  step: number;
-  unit?: string;
-  onChange: (value: number) => void;
-  disabled?: boolean;
-  formatValue?: (value: number) => string;
-}> = ({ label, description, value, min, max, step, unit = '', onChange, disabled, formatValue }) => {
-  const displayValue = formatValue ? formatValue(value) : `${value}${unit}`;
-
-  return (
-    <div style={styles.settingRow}>
-      <div style={styles.settingInfo}>
-        <span style={styles.settingLabel}>{label}</span>
-        {description && <span style={styles.settingDescription}>{description}</span>}
-      </div>
-      <div style={styles.sliderContainer}>
-        <span style={styles.sliderValue}>{displayValue}</span>
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          onChange={(e) => onChange(Number(e.target.value))}
-          disabled={disabled}
-          style={{
-            ...styles.slider,
-            opacity: disabled ? 0.5 : 1,
-            cursor: disabled ? 'not-allowed' : 'pointer',
-          }}
-        />
-      </div>
-    </div>
-  );
-};

package/src/renderer/components/primitives/Toggle.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { styles } from '../settings/settingsStyles';
-
-export const ToggleSetting: React.FC<{
-  label: string;
-  description?: string;
-  value: boolean;
-  onChange: (value: boolean) => void;
-  disabled?: boolean;
-}> = ({ label, description, value, onChange, disabled }) => (
-  <div style={styles.settingRow}>
-    <div style={styles.settingInfo}>
-      <span style={styles.settingLabel}>{label}</span>
-      {description && <span style={styles.settingDescription}>{description}</span>}
-    </div>
-    <button
-      style={{
-        ...styles.toggle,
-        backgroundColor: value ? 'var(--accent-default)' : 'var(--bg-tertiary)',
-        opacity: disabled ? 0.5 : 1,
-        cursor: disabled ? 'not-allowed' : 'pointer',
-      }}
-      onClick={() => !disabled && onChange(!value)}
-      disabled={disabled}
-      role="switch"
-      aria-checked={value}
-    >
-      <span
-        style={{
-          ...styles.toggleKnob,
-          transform: value ? 'translateX(18px)' : 'translateX(2px)',
-        }}
-      />
-    </button>
-  </div>
-);

package/src/renderer/components/primitives/index.ts

@@ -1,10 +0,0 @@
-export { SettingsSection } from './SettingsSection';
-export { ToggleSetting } from './Toggle';
-export { SliderSetting } from './Slider';
-export { DropdownSetting } from './Dropdown';
-export { DirectoryPicker } from './DirectoryPicker';
-export { ColorPicker, ACCENT_COLORS } from './ColorPicker';
-export { KeyRecorder } from './KeyRecorder';
-export { ApiKeyInput } from './ApiKeyInput';
-export type { ApiKeyState } from './ApiKeyInput';
-export { DangerButton } from './DangerButton';