@liiift-studio/sanity-font-manager 2.4.0 → 2.5.1

package/src/components/UploadModal.jsx

@@ -0,0 +1,304 @@
+// Upload modal — multi-step state machine: Upload Files → Review → Execute → Map Instances → Summary
+
+import React, { useReducer, useCallback, useState, useMemo, useRef, useEffect } from 'react';
+import { Dialog, Box, Flex, Text, Badge, Button } from '@sanity/ui';
+import { planReducer } from '../utils/planReducer';
+import { createEmptyPlan, PLAN_PHASE } from '../utils/planTypes';
+import { buildUploadPlan } from '../utils/buildUploadPlan';
+import { generateStyleKeywords } from '../utils/generateKeywords';
+import UploadStep1Settings from './UploadStep1Settings';
+import UploadStep2Review from './UploadStep2Review';
+import UploadStep3Execute from './UploadStep3Execute';
+import UploadStep3bInstances from './UploadStep3bInstances';
+import UploadSummary from './UploadSummary';
+
+/** Step labels for the step indicator */
+const STEPS = [
+	{ key: 1, label: 'Upload Files' },
+	{ key: 2, label: 'Review' },
+	{ key: 3, label: 'Upload' },
+	{ key: 4, label: 'Map Instances' },
+];
+
+/** Maps plan phase to active step number */
+function phaseToStep(phase) {
+	switch (phase) {
+		case PLAN_PHASE.IDLE: return 1;
+		case PLAN_PHASE.PROCESSING: return 2;
+		case PLAN_PHASE.REVIEWING: return 2;
+		case PLAN_PHASE.READY: return 2;
+		case PLAN_PHASE.EXECUTING: return 3;
+		case PLAN_PHASE.COMPLETE: return 3;
+		case PLAN_PHASE.ERROR: return 3;
+		default: return 1;
+	}
+}
+
+/**
+ * Upload modal — wraps the 3-step upload workflow in a Sanity UI Dialog.
+ */
+export default function UploadModal({
+	open,
+	onClose,
+	client,
+	docId,
+	typefaceTitle,
+	stylesObject,
+	preferredStyleRef,
+	slug,
+}) {
+	const [plan, dispatch] = useReducer(planReducer, null, () => createEmptyPlan());
+	const [processingCancelled, setProcessingCancelled] = useState(false);
+	const [executionResult, setExecutionResult] = useState(null);
+	const [retryTempIds, setRetryTempIds] = useState(null);
+	const [instanceMappingPhase, setInstanceMappingPhase] = useState(false);
+	const [instanceMappingResult, setInstanceMappingResult] = useState(null);
+	const cancelRef = useRef(false);
+	const focusRef = useRef(null);
+
+	const { weightKeywordList, italicKeywordList } = useMemo(() => generateStyleKeywords(), []);
+	const hasVFs = useMemo(() =>
+		Object.values(plan.fonts).some(f => f.variableFont && f.status !== 'error'),
+		[plan.fonts]
+	);
+	const baseStep = phaseToStep(plan.phase);
+	// Instance mapping is step 4 — only shown after execution completes with VFs
+	const currentStep = instanceMappingPhase ? 4 : (plan.phase === PLAN_PHASE.COMPLETE && !instanceMappingResult ? baseStep : baseStep);
+	const isExecuting = plan.phase === PLAN_PHASE.EXECUTING;
+
+	// Prevent accidental close during upload
+	useEffect(() => {
+		if (!open || !isExecuting) return;
+		const handler = (e) => { e.preventDefault(); e.returnValue = ''; };
+		window.addEventListener('beforeunload', handler);
+		return () => window.removeEventListener('beforeunload', handler);
+	}, [open, isExecuting]);
+
+	// Focus management on step transitions
+	useEffect(() => {
+		if (focusRef.current) {
+			focusRef.current.focus();
+		}
+	}, [currentStep]);
+
+	/** Handle close — confirm if plan has data, block during execution */
+	const handleClose = useCallback(() => {
+		if (isExecuting) return;
+		const hasFonts = Object.keys(plan.fonts).length > 0;
+		if (hasFonts && plan.phase !== PLAN_PHASE.COMPLETE) {
+			if (!window.confirm('Close the upload modal? All progress will be lost.')) return;
+		}
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.IDLE });
+		setExecutionResult(null);
+		onClose();
+	}, [plan, isExecuting, onClose]);
+
+	/** Start processing — transition to Step 2 and build the plan */
+	const handleStartProcessing = useCallback(async (files, settings) => {
+		dispatch({ type: 'SET_SETTINGS', settings: { ...settings, typefaceTitle } });
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.PROCESSING, totalFiles: files.length });
+		cancelRef.current = false;
+		setProcessingCancelled(false);
+		setExecutionResult(null);
+
+		try {
+			const builtPlan = await buildUploadPlan({
+				files,
+				typefaceTitle,
+				docId,
+				settings,
+				client,
+				stylesObject,
+				weightKeywordList,
+				italicKeywordList,
+				onProgress: (event) => {
+					if (cancelRef.current) return;
+					// Update progress counter only — don't add entries yet (they haven't been merged by documentId)
+					if (event.type === 'font-processed' || event.type === 'font-error') {
+						dispatch({ type: 'UPDATE_PROCESSING_PROGRESS', progress: event.progress });
+					}
+				},
+			});
+
+			if (!cancelRef.current) {
+				// Dispatch the final merged plan entries (files with the same documentId are already grouped)
+				for (const [tempId, entry] of Object.entries(builtPlan.fonts)) {
+					dispatch({ type: 'ADD_PROCESSED_FONT', tempId, fontEntry: entry });
+				}
+				dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.REVIEWING });
+			}
+		} catch (err) {
+			console.error('Processing failed:', err);
+			dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.REVIEWING });
+		}
+	}, [typefaceTitle, docId, client, stylesObject, weightKeywordList, italicKeywordList]);
+
+	/** Cancel processing and return to Step 1 */
+	const handleCancelProcessing = useCallback(() => {
+		cancelRef.current = true;
+		setProcessingCancelled(true);
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.IDLE });
+	}, []);
+
+	/** Transition to execution */
+	const handleStartExecution = useCallback(() => {
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.EXECUTING });
+	}, []);
+
+	/** Receive execution result — transition to instance mapping if VFs exist, otherwise complete */
+	const handleExecutionComplete = useCallback((result) => {
+		setExecutionResult(result);
+		if (hasVFs && result.success !== false) {
+			// Show instance mapping step before summary
+			setInstanceMappingPhase(true);
+			dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.COMPLETE });
+		} else {
+			dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.COMPLETE });
+		}
+	}, [hasVFs]);
+
+	/** Handle instance mapping completion */
+	const handleInstanceMappingComplete = useCallback((result) => {
+		setInstanceMappingResult(result);
+		setInstanceMappingPhase(false);
+	}, []);
+
+	if (!open) return null;
+
+	/** Navigate to a step by clicking the step indicator */
+	const handleStepClick = useCallback((stepKey) => {
+		if (isExecuting) return;
+		if (stepKey === currentStep) return;
+		// Can only go back to step 1 (reset to settings)
+		if (stepKey === 1 && currentStep > 1) {
+			if (Object.keys(plan.fonts).length > 0) {
+				if (!window.confirm('Go back to settings? Current review progress will be lost.')) return;
+			}
+			dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.IDLE });
+		}
+	}, [currentStep, isExecuting, plan.fonts, dispatch]);
+
+	return (
+		<Dialog
+			id="upload-modal"
+			header={
+				<Flex direction="column" gap={3} style={{ width: '100%' }}>
+					<Text weight="semibold" size={2}>Upload Fonts</Text>
+					<Flex gap={1} style={{ width: '100%' }}>
+						{STEPS.filter(step => step.key !== 4 || hasVFs).map((step, i) => {
+							const isActive = currentStep === step.key;
+							const isCompleted = currentStep > step.key;
+							const isClickable = !isExecuting && step.key < currentStep;
+							return (
+								<Box
+									key={step.key}
+									as={isClickable ? 'button' : 'div'}
+									onClick={isClickable ? () => handleStepClick(step.key) : undefined}
+									style={{
+										flex: 1,
+										padding: '10px 12px',
+										border: 'none',
+										borderRadius: 4,
+										cursor: isClickable ? 'pointer' : 'default',
+										background: isActive
+											? 'var(--card-badge-primary-bg-color)'
+											: isCompleted
+												? 'var(--card-badge-positive-bg-color)'
+												: 'var(--card-muted-bg-color)',
+										color: isActive || isCompleted
+											? '#fff'
+											: 'var(--card-muted-fg-color)',
+										textAlign: 'center',
+										transition: 'background 0.15s ease',
+										opacity: !isActive && !isCompleted ? 0.6 : 1,
+									}}
+								>
+									<Text
+										size={1}
+										weight={isActive ? 'bold' : 'medium'}
+										style={{ color: 'inherit' }}
+									>
+										{step.key}. {step.label}
+									</Text>
+								</Box>
+							);
+						})}
+					</Flex>
+				</Flex>
+			}
+			width={2}
+			onClose={isExecuting ? undefined : handleClose}
+			onClickOutside={() => {}}
+		>
+			<Box padding={4}>
+				{/* Step 1: Settings & File Selection */}
+				{currentStep === 1 && (
+					<UploadStep1Settings
+						settings={plan.settings}
+						onStartProcessing={handleStartProcessing}
+					/>
+				)}
+
+				{/* Step 2: Processing & Review */}
+				{currentStep === 2 && (
+					<UploadStep2Review
+						plan={plan}
+						dispatch={dispatch}
+						onCancelProcessing={handleCancelProcessing}
+						onStartExecution={handleStartExecution}
+						processingCancelled={processingCancelled}
+					/>
+				)}
+
+				{/* Step 3: Upload Execution */}
+				{currentStep === 3 && plan.phase !== PLAN_PHASE.COMPLETE && (
+					<UploadStep3Execute
+						key={retryTempIds ? 'retry' : 'initial'}
+						plan={plan}
+						client={client}
+						docId={docId}
+						stylesObject={stylesObject}
+						preferredStyleRef={preferredStyleRef}
+						retryTempIds={retryTempIds}
+						onComplete={(result) => {
+							setRetryTempIds(null);
+							handleExecutionComplete(result);
+						}}
+					/>
+				)}
+
+				{/* Step 4: Variable Font Instance Mapping (only if VFs in batch) */}
+				{plan.phase === PLAN_PHASE.COMPLETE && instanceMappingPhase && (
+					<UploadStep3bInstances
+						plan={plan}
+						executionResult={executionResult}
+						client={client}
+						typefaceTitle={typefaceTitle}
+						onComplete={handleInstanceMappingComplete}
+					/>
+				)}
+
+				{/* Post-completion Summary */}
+				{plan.phase === PLAN_PHASE.COMPLETE && !instanceMappingPhase && (
+					<UploadSummary
+						plan={plan}
+						result={executionResult}
+						instanceMappingResult={instanceMappingResult}
+						onClose={handleClose}
+						onRetry={(failedTempIds) => {
+							setRetryTempIds(failedTempIds || null);
+							setExecutionResult(null);
+							setInstanceMappingPhase(false);
+							setInstanceMappingResult(null);
+							dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.EXECUTING });
+						}}
+						client={client}
+						docId={docId}
+						stylesObject={stylesObject}
+						preferredStyleRef={preferredStyleRef}
+					/>
+				)}
+			</Box>
+		</Dialog>
+	);
+}

package/src/components/UploadScriptsComponent.jsx

@@ -2,7 +2,8 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Flex, Grid, Stack, Text, TextInput, MenuButton, Menu, MenuItem, Select } from '@sanity/ui';
-import * as fontkit from 'fontkit';
+import { parseFont } from '../utils/parseFont';
+import { getNameString, getVariationAxes, getItalicAngle, getWeightClass } from '../utils/fontHelpers';
 import slugify from 'slugify';
 import { useSanityClient } from '../hooks/useSanityClient';
 import { useFormValue } from 'sanity';
@@ -91,25 +92,26 @@ export const UploadScriptsComponent = (props) => {
 
                 const file = event.target.files[i];
                 const fontBuffer = await readFontFile(file);
-                const font = fontkit.create(fontBuffer);
+                const font = await parseFont(fontBuffer, file.name);
 
-                console.log('reading font : ', font.fullName +' '+file.name, font.name.records);
+                const fullName = getNameString(font, 4);
+                const familyName = getNameString(font, 1);
+                console.log('Reading font:', fullName, file.name);
 
-                let weightName = font?.name?.records?.preferredSubfamily ? font?.name?.records?.preferredSubfamily: font?.name?.records?.fontSubfamily;
-                weightName = weightName?.en ? weightName.en: weightName.constructor == Object ? weightName[Object.keys(weightName)[0]] : weightName;
-				weightName = weightName?.replace("Italic", "").replace("It", "").trim();
+                let weightName = getNameString(font, 17) || getNameString(font, 2) || '';
+				weightName = weightName.replace("Italic", "").replace("It", "").trim();
 
-				if ((weightName == '' || weightName.toLowerCase() == 'roman') && font?.name?.records?.fullName) {
-					weightName = font?.name?.records?.fullName;
-					weightName = weightName?.en ? weightName.en: weightName.constructor == Object ? weightName[Object.keys(weightName)[0]] : weightName;
-					weightName = weightName?.replace(title + " ", "").replace(title, "").trim();
-					weightName = weightName?.replace("Italic", "").replace("It", "").trim();
+				if ((weightName == '' || weightName.toLowerCase() == 'roman') && fullName) {
+					weightName = fullName.replace(title + " ", "").replace(title, "").trim();
+					weightName = weightName.replace("Italic", "").replace("It", "").trim();
 				}
 
-                let variableFont = font?.variationAxes && Object.keys(font.variationAxes).length > 0 ? true: false;
-                let subfamilyName = font.familyName.toLowerCase().trim().replace(title.toLowerCase().trim(),'').trim();
-                let fontTitle = font?.fullName;
-                let style = (font?.italicAngle !== 0 || font?.fullName.toLowerCase().includes('italic')) ? 'Italic' : 'Regular';
+                const axes = getVariationAxes(font);
+                let variableFont = axes !== null;
+                let subfamilyName = familyName.toLowerCase().trim().replace(title.toLowerCase().trim(),'').trim();
+                let fontTitle = fullName;
+                const italicAngle = getItalicAngle(font);
+                let style = (italicAngle !== 0 || fullName.toLowerCase().includes('italic')) ? 'Italic' : 'Regular';
 
                 if(fontTitle.toLowerCase().trim().includes(script)){
                     fontTitle = fontTitle.toLowerCase().trim().replace(script, '').trim();
@@ -177,8 +179,8 @@ export const UploadScriptsComponent = (props) => {
 				console.log(' ')
 				console.log('font id : ', id);
 				console.log('font title : ', fontTitle);
-				console.log('fontkit fullName : ', font.fullName );
-				console.log('fontkit family name: ', font.familyName);
+				console.log('Full name:', fullName);
+				console.log('Family name:', familyName);
 				console.log('file name : ', file.name);
 				console.log('subfamily : ', subfamilyName);
 				console.log('style : ', style);
@@ -199,11 +201,11 @@ export const UploadScriptsComponent = (props) => {
                         title: fontTitle,
                         slug: {_type:'slug', current:id},
                         typefaceName: title, // Change to match Typeface Document
-                        style: (font?.italicAngle !== 0 || font?.fullName.toLowerCase().includes('italic')) ? 'Italic' : 'Regular',
+                        style: style,
                         variableFont: variableFont,
                         weightName: weightName,
-                        normalWeight:true, // TODO : check if weight is normal ??
-                        weight: font['OS/2']?.usWeightClass ? Number(font['OS/2']?.usWeightClass) :
+                        normalWeight:true,
+                        weight: getWeightClass(font) || (
                             /hairline|extra thin|extrathin/.test(weightName?.toLowerCase()) ? 100 :
                             /thin|extra light|extralight/.test(weightName?.toLowerCase()) ? 200 :
                             /light|book/.test(weightName?.toLowerCase()) ? 300 :
@@ -213,7 +215,7 @@ export const UploadScriptsComponent = (props) => {
                             /bold/.test(weightName?.toLowerCase()) ? 700 :
                             /extra bold|extrabold/.test(weightName?.toLowerCase()) ? 800 :
                             /black|ultra/.test(weightName?.toLowerCase()) ? 900 :
-                            400,
+                            400),
                         files : [file],
                         fontKit: font,
                         scriptFileInput: {[script]:{}},

package/src/components/UploadStep1Settings.jsx

@@ -0,0 +1,272 @@
+// Step 1 — File upload: drag-and-drop zone, file list table, type breakdown with mismatch detection
+
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+import { Box, Flex, Stack, Text, Button, Card, Badge } from '@sanity/ui';
+import { UploadIcon, TrashIcon } from '@sanity/icons';
+
+/** Accepted font file extensions */
+const ACCEPTED_EXTENSIONS = ['ttf', 'otf', 'woff', 'woff2', 'eot', 'svg'];
+
+/** Sort order: TTF/OTF before web formats so metadata is available for webfont fallback */
+const TYPE_ORDER = ['ttf', 'otf', 'eot', 'svg', 'woff', 'woff2'];
+
+/** Returns only files with accepted font extensions */
+const filterFontFiles = (files) =>
+	Array.from(files).filter(f => ACCEPTED_EXTENSIONS.includes(f.name.split('.').pop().toLowerCase()));
+
+/** Sorts font files so TTF/OTF are processed before web formats */
+const sortFilesByType = (files) =>
+	Array.from(files).sort((a, b) => {
+		const aIdx = TYPE_ORDER.indexOf(a.name.split('.').pop().toLowerCase());
+		const bIdx = TYPE_ORDER.indexOf(b.name.split('.').pop().toLowerCase());
+		if (aIdx === bIdx) return a.name.localeCompare(b.name);
+		return aIdx - bIdx;
+	});
+
+/**
+ * Step 1 component — file selection only. Settings are in Step 2.
+ *
+ * @param {object} props
+ * @param {object} props.settings - Current plan settings
+ * @param {function} props.onStartProcessing - Called with (sortedFiles, settings) when user clicks "Process Files"
+ */
+export default function UploadStep1Settings({ settings, onStartProcessing }) {
+	const [pendingFiles, setPendingFiles] = useState([]);
+	const [isDragging, setIsDragging] = useState(false);
+	const [filterType, setFilterType] = useState(null);
+	const fileInputRef = useRef(null);
+
+	const handleFileSelect = useCallback((e) => {
+		const files = filterFontFiles(e.target.files);
+		if (files.length > 0) setPendingFiles(prev => [...prev, ...files]);
+		e.target.value = '';
+	}, []);
+
+	const handleRemoveFile = useCallback((file) => {
+		setPendingFiles(prev => prev.filter(f => f !== file));
+	}, []);
+
+	const handleDragEnter = useCallback((e) => { e.preventDefault(); setIsDragging(true); }, []);
+	const handleDragOver = useCallback((e) => { e.preventDefault(); }, []);
+	const handleDragLeave = useCallback((e) => { e.preventDefault(); setIsDragging(false); }, []);
+	const handleDrop = useCallback((e) => {
+		e.preventDefault();
+		setIsDragging(false);
+		const files = filterFontFiles(e.dataTransfer.files);
+		if (files.length > 0) setPendingFiles(prev => [...prev, ...files]);
+	}, []);
+
+	const handleProcess = useCallback(() => {
+		const sorted = sortFilesByType(pendingFiles);
+		onStartProcessing(sorted, settings);
+	}, [pendingFiles, settings, onStartProcessing]);
+
+	/** Count files by extension and detect outliers (types whose count differs from the majority) */
+	const typeBreakdown = useMemo(() => {
+		const counts = {};
+		pendingFiles.forEach(f => {
+			const ext = f.name.split('.').pop().toLowerCase();
+			counts[ext] = (counts[ext] || 0) + 1;
+		});
+
+		const values = Object.values(counts);
+		if (values.length <= 1) return { counts, modeCount: 0, outlierExts: new Set() };
+
+		// Find the mode (most frequent count) — types matching the mode are normal, others are outliers
+		const freq = {};
+		values.forEach(v => { freq[v] = (freq[v] || 0) + 1; });
+		const modeCount = Number(Object.entries(freq).sort((a, b) => b[1] - a[1])[0][0]);
+
+		const outlierExts = new Set();
+		Object.entries(counts).forEach(([ext, count]) => {
+			if (count !== modeCount) outlierExts.add(ext);
+		});
+
+		return { counts, modeCount, outlierExts };
+	}, [pendingFiles]);
+
+	/** Files filtered by the active type filter — displayed in upload order */
+	const displayedFiles = useMemo(() => {
+		if (!filterType) return pendingFiles;
+		return pendingFiles.filter(f => f.name.split('.').pop().toLowerCase() === filterType);
+	}, [pendingFiles, filterType]);
+
+	const dropZoneStyle = {
+		border: `2px dashed ${isDragging ? 'var(--card-focus-ring-color)' : 'var(--card-border-color)'}`,
+		borderRadius: 4,
+		padding: pendingFiles.length > 0 ? '10px 16px' : '28px 16px',
+		textAlign: 'center',
+		background: isDragging ? 'rgba(100, 153, 255, 0.06)' : 'transparent',
+		transition: 'border-color 0.12s, background 0.12s',
+	};
+
+	return (
+		<Stack space={4}>
+			{/* Drop zone */}
+			<Box
+				onDragEnter={handleDragEnter}
+				onDragOver={handleDragOver}
+				onDragLeave={handleDragLeave}
+				onDrop={handleDrop}
+				style={dropZoneStyle}
+			>
+				<input
+					ref={fileInputRef}
+					type="file"
+					multiple
+					hidden
+					accept=".ttf,.otf,.woff,.woff2,.eot,.svg"
+					onChange={handleFileSelect}
+				/>
+				{pendingFiles.length === 0 ? (
+					<Stack space={3}>
+						<Text size={1} muted>{isDragging ? 'Release to add files' : 'Drop font files here'}</Text>
+						<Flex justify="center">
+							<Button
+								mode="ghost"
+								tone="primary"
+								fontSize={1}
+								padding={2}
+								text="Browse files"
+								onClick={() => fileInputRef.current?.click()}
+							/>
+						</Flex>
+					</Stack>
+				) : (
+					<Flex align="center" justify="center" gap={2}>
+						<Text size={1} muted>{isDragging ? 'Release to add' : 'Drop more files or'}</Text>
+						<Button
+							mode="bleed"
+							tone="primary"
+							fontSize={1}
+							padding={1}
+							text="browse"
+							onClick={() => fileInputRef.current?.click()}
+						/>
+					</Flex>
+				)}
+			</Box>
+
+			{/* File breakdown + list */}
+			{pendingFiles.length > 0 && (
+				<Stack space={3}>
+					{/* Summary: total + type breakdown */}
+					<Flex align="center" justify="space-between">
+						<Flex align="center" gap={2}>
+							<Text size={1} weight="semibold">
+								{filterType
+									? `${displayedFiles.length} of ${pendingFiles.length} files (${filterType.toUpperCase()})`
+									: `${pendingFiles.length} file${pendingFiles.length === 1 ? '' : 's'}`
+								}
+							</Text>
+							<Flex gap={1}>
+								{TYPE_ORDER.filter(ext => typeBreakdown.counts[ext]).map(ext => {
+									const count = typeBreakdown.counts[ext];
+									const isOutlier = typeBreakdown.outlierExts.has(ext);
+									const isActive = filterType === ext;
+									return (
+										<Badge
+											key={ext}
+											tone={isOutlier ? 'critical' : isActive ? 'primary' : 'default'}
+											mode={isActive ? 'default' : isOutlier ? 'default' : 'outline'}
+											fontSize={0}
+											style={{ cursor: 'pointer' }}
+											onClick={() => setFilterType(isActive ? null : ext)}
+										>
+											{count} {ext.toUpperCase()}
+										</Badge>
+									);
+								})}
+								{filterType && (
+									<Badge
+										mode="outline"
+										fontSize={0}
+										style={{ cursor: 'pointer' }}
+										onClick={() => setFilterType(null)}
+									>
+										Clear filter
+									</Badge>
+								)}
+							</Flex>
+						</Flex>
+						<Button
+							mode="bleed"
+							tone="default"
+							fontSize={1}
+							padding={1}
+							text="Clear all"
+							onClick={() => setPendingFiles([])}
+						/>
+					</Flex>
+
+					{/* File table */}
+					<Box style={{ maxHeight: 350, overflowY: 'auto' }}>
+						{/* Table header */}
+						<Flex
+							align="center"
+							gap={2}
+							paddingX={2}
+							paddingY={1}
+							style={{ borderBottom: '1px solid var(--card-border-color)' }}
+						>
+							<Text size={0} weight="semibold" muted style={{ width: 56, flexShrink: 0 }}>Type</Text>
+							<Text size={0} weight="semibold" muted style={{ flex: 1 }}>File Name</Text>
+							<Box style={{ width: 32 }} />
+						</Flex>
+						<Stack space={0}>
+							{displayedFiles.map((file, i) => {
+								const ext = file.name.split('.').pop().toLowerCase();
+								return (
+									<Flex
+										key={`${file.name}-${file.size}-${i}`}
+										align="center"
+										gap={2}
+										paddingX={2}
+										paddingY={2}
+										style={{
+											borderBottom: '1px solid var(--card-border-color)',
+										}}
+									>
+										<Badge
+											tone="primary"
+											mode="outline"
+											fontSize={0}
+											style={{ width: 56, flexShrink: 0, textAlign: 'center' }}
+										>
+											{ext.toUpperCase()}
+										</Badge>
+										<Text size={1} style={{ flex: 1, textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+											{file.name}
+										</Text>
+										<Button
+											mode="bleed"
+											tone="critical"
+											icon={TrashIcon}
+											padding={1}
+											onClick={() => handleRemoveFile(file)}
+											style={{ flexShrink: 0 }}
+										/>
+									</Flex>
+								);
+							})}
+						</Stack>
+					</Box>
+				</Stack>
+			)}
+
+			{/* Process button */}
+			{pendingFiles.length > 0 && (
+				<Button
+					mode="default"
+					tone="primary"
+					icon={UploadIcon}
+					text={`Process ${pendingFiles.length} File${pendingFiles.length === 1 ? '' : 's'}`}
+					style={{ width: '100%' }}
+					fontSize={2}
+					padding={4}
+					onClick={handleProcess}
+				/>
+			)}
+		</Stack>
+	);
+}