markupr 2.1.8

package/src/renderer/components/index.ts

@@ -0,0 +1,99 @@
+/**
+ * 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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,10 @@
+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';