-
- )
+ );
}
-export default App
+export default App;
diff --git a/app/src/components/FileUpload.tsx b/app/src/components/FileUpload.tsx
new file mode 100644
index 0000000..d22fc9e
--- /dev/null
+++ b/app/src/components/FileUpload.tsx
@@ -0,0 +1,124 @@
+import { useCallback, useRef, useState } from 'react';
+
+const ACCEPTED_TYPES = '.png,.jpg,.jpeg,.bmp,.tiff,.webp,.svg';
+
+interface FileUploadProps {
+ onFileSelect: (file: File, isSvg: boolean) => void;
+ selectedFile: File | null;
+}
+
+function formatFileSize(bytes: number): string {
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+ return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function isSvgFile(file: File): boolean {
+ return (
+ file.type === 'image/svg+xml' ||
+ file.name.toLowerCase().endsWith('.svg')
+ );
+}
+
+export default function FileUpload({ onFileSelect, selectedFile }: FileUploadProps) {
+ const inputRef = useRefKerf Engine
-Import & Convert view coming in T02.
+ {view === 'import' &&View 2: Design Canvas
}
+ {view === 'export' && View 3: Export
}
inputRef.current?.click()}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click();
+ }}
+ aria-label="Upload image file"
+ >
+
+ {selectedFile ? (
+
+ );
+}
diff --git a/app/src/components/PresetSelector.tsx b/app/src/components/PresetSelector.tsx
new file mode 100644
index 0000000..032fbea
--- /dev/null
+++ b/app/src/components/PresetSelector.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { getPresets } from '../api/engine';
+import type { PresetConfig } from '../types/engine';
+
+interface PresetSelectorProps {
+ selectedPreset: string;
+ onPresetSelect: (presetName: string, config: PresetConfig) => void;
+}
+
+export default function PresetSelector({
+ selectedPreset,
+ onPresetSelect,
+}: PresetSelectorProps) {
+ const [presets, setPresets] = useState
+ {thumbnailUrl && (
+ 
+ )}
+
+ ) : (
+
+ {selectedFile.name}
+
+ {formatFileSize(selectedFile.size)}
+
+ {isSvgFile(selectedFile) && (
+ SVG — simplify mode
+ )}
+
+
+ 📁
+
+ )}
+ + Drop an image here or click to browse +
+ PNG, JPG, BMP, TIFF, WebP, or SVG +Loading presets…
+
+ );
+ }
+
+ const entries = Object.entries(presets);
+
+ if (entries.length === 0) {
+ return ⚠ {error}
+No presets available.
+
+ );
+}
diff --git a/app/src/views/ImportConvert.module.css b/app/src/views/ImportConvert.module.css
new file mode 100644
index 0000000..7b828ac
--- /dev/null
+++ b/app/src/views/ImportConvert.module.css
@@ -0,0 +1,48 @@
+/* Import & Convert (View 1) layout */
+
+.container {
+ display: flex;
+ gap: 24px;
+ padding: 24px;
+ min-height: calc(100svh - 80px);
+ box-sizing: border-box;
+}
+
+.leftPanel {
+ flex: 0 0 340px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.rightPanel {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ min-height: 400px;
+ background: var(--code-bg);
+ padding: 16px;
+}
+
+.previewPlaceholder {
+ color: var(--text);
+ font-size: 15px;
+ text-align: center;
+ opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+ .container {
+ flex-direction: column;
+ padding: 16px;
+ }
+
+ .leftPanel {
+ flex: none;
+ width: 100%;
+ }
+}
diff --git a/app/src/views/ImportConvert.tsx b/app/src/views/ImportConvert.tsx
new file mode 100644
index 0000000..2025f0a
--- /dev/null
+++ b/app/src/views/ImportConvert.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import type { PresetConfig } from '../types/engine';
+import FileUpload from '../components/FileUpload';
+import PresetSelector from '../components/PresetSelector';
+import styles from './ImportConvert.module.css';
+
+interface ImportConvertProps {
+ onUseThis: (svgOutput: string, metadata: unknown) => void;
+}
+
+export default function ImportConvert({ onUseThis: _onUseThis }: ImportConvertProps) {
+ const [selectedFile, setSelectedFile] = useStatePreset
+
+ {entries.map(([key, config]) => (
+
+ ))}
+
+
+
+ );
+}
+
+
+
+
+ {selectedFile
+ ? 'Preview will appear here after tracing (T03)'
+ : 'Upload an image to begin vectorization'}
+
+