@oronts/vendure-data-hub-plugin 0.1.0

package/dashboard/components/wizards/import-wizard/TriggerStep.tsx

@@ -0,0 +1,51 @@
+import type { ImportConfiguration } from './types';
+import { TRIGGER_TYPE, LOADING_STATE_TYPE } from '../../../constants';
+import { useTriggerTypes } from '../../../hooks';
+import { WizardStepContainer } from '../shared';
+import { TriggerSelector, TriggerSchemaFields } from '../../shared/wizard-trigger';
+import { LoadingState } from '../../shared/feedback';
+import { STEP_CONTENT } from './constants';
+
+interface TriggerStepProps {
+    config: Partial<ImportConfiguration>;
+    updateConfig: (updates: Partial<ImportConfiguration>) => void;
+    errors?: Record<string, string>;
+}
+
+export function TriggerStep({ config, updateConfig, errors = {} }: TriggerStepProps) {
+    const trigger = config.trigger ?? { type: TRIGGER_TYPE.MANUAL };
+    const { importWizardTriggers, triggerSchemas, isLoading } = useTriggerTypes();
+
+    const currentSchema = triggerSchemas.find(s => s.value === trigger.type);
+
+    const handleTriggerTypeChange = (type: string) => {
+        updateConfig({ trigger: { ...trigger, type: type as typeof trigger.type } });
+    };
+
+    const handleFieldChange = (key: string, value: unknown) => {
+        updateConfig({ trigger: { ...trigger, [key]: value } });
+    };
+
+    return (
+        <WizardStepContainer
+            title={STEP_CONTENT.trigger.title}
+            description={STEP_CONTENT.trigger.description}
+        >
+            <TriggerSelector
+                options={importWizardTriggers}
+                value={trigger.type}
+                onChange={handleTriggerTypeChange}
+            />
+
+            {currentSchema && currentSchema.fields.length > 0 ? (
+                <TriggerSchemaFields
+                    fields={currentSchema.fields}
+                    values={trigger as Record<string, unknown>}
+                    onChange={handleFieldChange}
+                />
+            ) : isLoading && trigger.type !== TRIGGER_TYPE.MANUAL ? (
+                <LoadingState type={LOADING_STATE_TYPE.FORM} rows={2} message="" />
+            ) : null}
+        </WizardStepContainer>
+    );
+}

package/dashboard/components/wizards/import-wizard/constants.ts

@@ -0,0 +1,104 @@
+import {
+    Database,
+    Eye,
+    Table,
+    Columns,
+    Zap,
+    Settings,
+    Clock,
+    Check,
+    LayoutTemplate,
+} from 'lucide-react';
+import type { WizardStep, ImportStrategies } from '../../../types/wizard';
+import { CLEANUP_STRATEGY, BATCH_SIZES, UI_DEFAULTS } from '../../../constants';
+
+export const IMPORT_STEP_ID = {
+    TEMPLATE: 'template',
+    SOURCE: 'source',
+    PREVIEW: 'preview',
+    TARGET: 'target',
+    MAPPING: 'mapping',
+    TRANSFORM: 'transform',
+    STRATEGY: 'strategy',
+    TRIGGER: 'trigger',
+    REVIEW: 'review',
+} as const;
+
+export type {
+    TransformTypeOption,
+} from '../shared';
+
+export const WIZARD_STEPS: WizardStep[] = [
+    { id: 'template', label: 'Choose Template', icon: LayoutTemplate },
+    { id: 'source', label: 'Data Source', icon: Database },
+    { id: 'preview', label: 'Preview Data', icon: Eye },
+    { id: 'target', label: 'Target Entity', icon: Table },
+    { id: 'mapping', label: 'Field Mapping', icon: Columns },
+    { id: 'transform', label: 'Transformations', icon: Zap },
+    { id: 'strategy', label: 'Import Strategy', icon: Settings },
+    { id: 'trigger', label: 'Trigger & Schedule', icon: Clock },
+    { id: 'review', label: 'Review & Create', icon: Check },
+];
+
+/** Steps to show when using a template (skips template selection) */
+export const WIZARD_STEPS_FROM_TEMPLATE: WizardStep[] = WIZARD_STEPS.slice(1);
+
+export const STEP_CONTENT = {
+    template: {
+        title: 'Choose a Template',
+        description: 'Start with a pre-built template or create your own custom import',
+    },
+    source: {
+        title: 'Select Data Source',
+        description: 'Choose where your data will come from',
+    },
+    preview: {
+        title: 'Data Preview',
+        emptyTitle: 'No data to preview',
+        emptyDescription: 'Please upload a file first.',
+    },
+    target: {
+        title: 'Select Target Entity',
+        description: 'Choose which Vendure entity to import data into',
+    },
+    mapping: {
+        title: 'Field Mapping',
+        description: 'Map source fields to target entity fields',
+    },
+    transform: {
+        title: 'Data Transformations',
+        description: 'Add transformations to process data before import (optional)',
+        emptyTitle: 'No transformations added',
+        emptyDescription: 'Click a transformation type above to add it to the pipeline',
+    },
+    strategy: {
+        title: 'Import Strategy',
+        description: 'Configure how to handle existing and new records',
+    },
+    trigger: {
+        title: 'Trigger & Schedule',
+        description: 'Configure when and how the import should run',
+    },
+    review: {
+        title: 'Review & Create',
+        description: 'Review your import configuration before creating',
+        cardTitle: 'Import Configuration',
+    },
+} as const;
+
+export const IMPORT_PLACEHOLDERS = {
+    apiUrl: 'https://api.example.com/data',
+    configName: 'My Product Import',
+} as const;
+
+export const DEFAULT_IMPORT_STRATEGIES: ImportStrategies = {
+    existingRecords: 'UPDATE',
+    lookupFields: [],
+    newRecords: 'CREATE',
+    publishAfterImport: false,
+    cleanupStrategy: CLEANUP_STRATEGY.NONE,
+    batchSize: BATCH_SIZES.IMPORT_DEFAULT,
+    parallelBatches: 1,
+    errorThreshold: UI_DEFAULTS.DEFAULT_ERROR_THRESHOLD_PERCENT,
+    continueOnError: true,
+};

package/dashboard/components/wizards/import-wizard/index.ts

@@ -0,0 +1,3 @@
+export { ImportWizard } from './ImportWizard';
+export { TemplateStep } from './TemplateStep';
+export type { ImportConfiguration } from './types';

package/dashboard/components/wizards/import-wizard/types.ts

@@ -0,0 +1,35 @@
+import type { EnhancedSchemaDefinition, TransformationType } from '../../../types';
+import type {
+    ImportFieldMapping,
+    ImportStrategies,
+    ImportSourceConfig,
+    ImportTriggerConfig,
+    WizardTransformationStep,
+} from '../../../types/wizard';
+
+export type SourceType = ImportSourceConfig['type'];
+export type FileFormat = NonNullable<ImportSourceConfig['fileConfig']>['format'];
+export type ApiMethod = NonNullable<ImportSourceConfig['apiConfig']>['method'];
+
+export interface ImportWizardProps {
+    onComplete: (config: ImportConfiguration) => void;
+    onCancel: () => void;
+    initialConfig?: Partial<ImportConfiguration>;
+    isSubmitting?: boolean;
+}
+
+export interface ImportConfiguration {
+    name: string;
+    description?: string;
+    source: ImportSourceConfig;
+    targetEntity: string;
+    targetSchema?: EnhancedSchemaDefinition;
+    mappings: ImportFieldMapping[];
+    strategies: ImportStrategies;
+    trigger: ImportTriggerConfig;
+    transformations: WizardTransformationStep[];
+}
+
+export type { ImportFieldMapping as FieldMapping };
+export type { ImportStrategies };
+export type { TransformationType };

package/dashboard/components/wizards/index.ts

@@ -0,0 +1,7 @@
+export { ImportWizard, TemplateStep } from './import-wizard';
+export type { ImportConfiguration } from './import-wizard';
+
+export { ExportWizard } from './export-wizard';
+export type { ExportConfiguration } from './export-wizard';
+
+export { WizardStepContainer } from './shared';

package/dashboard/components/wizards/shared/WizardStepContainer.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export interface WizardStepContainerProps {
+    title: string;
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function WizardStepContainer({
+    title,
+    description,
+    children,
+    className = '',
+}: WizardStepContainerProps) {
+    return (
+        <div className={`max-w-4xl mx-auto space-y-4 ${className}`}>
+            <div>
+                <h2 className="text-lg font-semibold mb-1">{title}</h2>
+                {description && (
+                    <p className="text-sm text-muted-foreground">{description}</p>
+                )}
+            </div>
+            {children}
+        </div>
+    );
+}

package/dashboard/components/wizards/shared/constants.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared constants for import/export wizards.
+ *
+ * Icon mappings for source types and file formats have been removed.
+ * Source type icons (DATABASE, WEBHOOK, CDC, etc.) now come from backend
+ * adapter metadata via resolveIconName(). Smart-source icons (FILE, API)
+ * live in SourceStep.tsx since they are hand-built UI types, not adapters.
+ * File format icons now come from backend config options (fileFormats.icon).
+ */
+
+export {
+    FILE_FORMAT,
+    SOURCE_TYPE,
+} from '../../../constants';
+
+export type { TransformTypeOption } from '../../../constants/fallbacks';

package/dashboard/components/wizards/shared/index.ts

@@ -0,0 +1,10 @@
+export { WizardStepContainer } from './WizardStepContainer';
+
+export {
+    FILE_FORMAT,
+    SOURCE_TYPE,
+} from './constants';
+
+export type {
+    TransformTypeOption,
+} from './constants';

package/dashboard/constants/colors.ts

@@ -0,0 +1,25 @@
+const LOG_LEVEL_COLORS = {
+    debug: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300',
+    info: 'bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400',
+    warn: 'bg-amber-100 dark:bg-amber-900/40 text-amber-600 dark:text-amber-400',
+    error: 'bg-red-100 dark:bg-red-900/40 text-red-600 dark:text-red-400',
+} as const;
+
+export const FALLBACK_COLORS = {
+    MUTED: '#6b7280',
+    BORDER: '#e5e7eb',
+    UNKNOWN_STEP_COLOR: '#666666',
+    UNKNOWN_STEP_BG: '#f5f5f5',
+    UNKNOWN_STEP_BORDER: '#cccccc',
+} as const;
+
+export const BRANCH_COLORS = {
+    TRUE: '#22c55e',
+    FALSE: '#ef4444',
+} as const;
+
+export function getLogLevelColor(level: string): string {
+    const key = level.toLowerCase() as keyof typeof LOG_LEVEL_COLORS;
+    return LOG_LEVEL_COLORS[key] ?? LOG_LEVEL_COLORS.info;
+}
+

package/dashboard/constants/connection-defaults.ts

@@ -0,0 +1,7 @@
+import { HTTP } from './defaults';
+
+export const HTTP_CONNECTION_DEFAULTS = {
+    TIMEOUT_MS: HTTP.TIMEOUT_MS,
+    BASE_URL_PLACEHOLDER: 'https://api.example.com',
+} as const;
+

package/dashboard/constants/connection-types.ts

@@ -0,0 +1 @@
+export { CONNECTION_TYPE } from '../../shared/constants';

package/dashboard/constants/defaults.ts

@@ -0,0 +1,18 @@
+/**
+ * Dashboard constants - imports shared constants to avoid duplication.
+ * The shared folder can be used by both dashboard and backend.
+ */
+
+/**
+ * Shared constants - re-exported from shared folder
+ * These are used by both dashboard and backend for consistency
+ */
+export {
+    TIME_UNITS,
+    PORTS,
+    HTTP,
+    BATCH,
+    RETENTION,
+    UI_TIMEOUTS,
+} from '../../shared/constants';
+

package/dashboard/constants/editor.ts

@@ -0,0 +1,69 @@
+import { PORTS, HTTP, BATCH, UI_TIMEOUTS, TIME_UNITS } from './defaults';
+
+export const NODE_LAYOUT = {
+    INITIAL_X: 120,
+    INITIAL_Y: 120,
+    SPACING_X: 280,
+    SPACING_Y: 140,
+} as const;
+
+export const UI_DEFAULTS = {
+    PAGE_SIZE: 100,
+    LOG_EXPLORER_PAGE_SIZE: 50,
+    PIPELINE_STATS_DISPLAY_COUNT: 6,
+    EVENT_DISPLAY_LIMIT: 20,
+    RECENT_LOGS_LIMIT: 50,
+    RECENT_ACTIVITY_LIMIT: 10,
+    EVENTS_LIMIT: 50,
+    AUTO_REFRESH_INTERVAL_MS: 10_000,
+    COPY_FEEDBACK_TIMEOUT_MS: UI_TIMEOUTS.COPY_FEEDBACK_MS,
+    PREVIEW_ROWS: 10,
+    IMPORT_PREVIEW_ROWS: 100,
+    EXPORT_BATCH_SIZE: BATCH.EXPORT_BATCH_SIZE,
+    IMPORT_BATCH_SIZE: BATCH.SIZE,
+    DEFAULT_MAX_RETRIES: HTTP.MAX_RETRIES,
+    DEFAULT_ERROR_THRESHOLD_PERCENT: 10,
+    DEFAULT_SFTP_PORT: PORTS.SFTP,
+    DEFAULT_CACHE_TTL_SECONDS: 3600,
+    WEBHOOK_PATH_PREFIX: '/webhooks/data-hub/',
+    CRON_PLACEHOLDER: '0 0 * * *',
+} as const;
+
+export const PIPELINE_RETRY_DEFAULTS = {
+    DELAY_MS: TIME_UNITS.SECOND,
+    MAX_DELAY_MS: HTTP.RETRY_MAX_DELAY_MS,
+    MIN_DELAY_MS: TIME_UNITS.SECOND,
+} as const;
+
+export const PIPELINE_CHECKPOINT_DEFAULTS = {
+    INTERVAL_RECORDS: 1000,
+    INTERVAL_MS: TIME_UNITS.MINUTE,
+    MIN_INTERVAL_MS: TIME_UNITS.SECOND,
+} as const;
+
+export const STEP_CONFIG_DEFAULTS = {
+    THROUGHPUT_BATCH_SIZE: 50,
+    THROUGHPUT_CONCURRENCY: 10,
+    RETRY_MAX_ATTEMPTS: 3,
+    RETRY_DELAY_MS: 1000,
+    GATE_TIMEOUT_SECONDS: 300,
+    GATE_MIN_APPROVERS: 5,
+    GATE_THRESHOLD_PERCENT: 10,
+    GATE_PREVIEW_COUNT: 10,
+} as const;
+
+export const RETENTION_DEFAULTS = {
+    RUNS_DAYS: 7,
+    ERROR_DAYS: 30,
+    LOGS_DAYS: 30,
+} as const;
+
+/** Default edge style for ReactFlow pipeline connections */
+export const EDGE_STYLE = {
+    STROKE_WIDTH: 2,
+} as const;
+
+/** Canvas CSS class for the ReactFlow editor background */
+export const CANVAS_BG_CLASS = 'bg-gray-50 dark:bg-gray-900' as const;
+
+

package/dashboard/constants/enum-maps.ts

@@ -0,0 +1,18 @@
+/**
+ * Enum map constants for type-safe comparisons in wizard components
+ * and across the dashboard. These are NOT option arrays for dropdowns
+ * (which come from the backend via useOptionValues), but rather
+ * constant maps used as type guards in switch/if statements.
+ *
+ * Shared constants are re-exported from shared/constants/enums.ts
+ * to eliminate duplication between dashboard and backend.
+ */
+
+export {
+    FILE_FORMAT,
+    SOURCE_TYPE,
+    EXPORT_FORMAT,
+    CLEANUP_STRATEGY,
+    COMPRESSION_TYPE,
+} from '../../shared/constants';
+

package/dashboard/constants/fallbacks.ts

@@ -0,0 +1,44 @@
+/**
+ * Minimal loading-state fallbacks for page-structural elements only.
+ *
+ * Most option lists (run statuses, log levels, HTTP methods, etc.) no longer
+ * have frontend fallbacks. Their consumers use the backend data directly via
+ * `useOptionValues()` and render loading states (disabled selects, skeletons)
+ * while the GraphQL config query resolves.
+ *
+ * Only two fallbacks remain:
+ * - FALLBACK_ADAPTER_TYPE_TABS: defines page tab structure (empty tabs = broken page)
+ * - FALLBACK_STAGE_CATEGORIES: defines hook stage category layout (empty = broken grid)
+ *
+ * These are intentionally kept because their consumers need structural data
+ * before the page can render at all, and the values change very rarely.
+ */
+
+import type { ConfigOptionValue, HookStageCategoryConfig } from '../hooks/api/use-config-options';
+
+/**
+ * Shape of a selectable transformation type in the wizard UI.
+ */
+export interface TransformTypeOption {
+    id: string;
+    label: string;
+    description: string;
+}
+
+/** Fallback adapter type tabs used while backend data is loading.
+ * Must stay in sync with ADAPTER_TYPE_METADATA in src/constants/enum-metadata.ts. */
+export const FALLBACK_ADAPTER_TYPE_TABS: ConfigOptionValue[] = [
+    { value: 'EXTRACTOR', label: 'Extractors', icon: 'database' },
+    { value: 'OPERATOR', label: 'Operators', icon: 'cog' },
+    { value: 'LOADER', label: 'Loaders', icon: 'upload' },
+    { value: 'EXPORTER', label: 'Exporters', icon: 'download' },
+    { value: 'FEED', label: 'Feeds', icon: 'rss' },
+    { value: 'SINK', label: 'Sinks', icon: 'send' },
+];
+
+/** Fallback hook stage categories used while backend metadata is loading */
+export const FALLBACK_STAGE_CATEGORIES: HookStageCategoryConfig[] = [
+    { key: 'lifecycle', label: 'Lifecycle', color: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400', description: 'Track pipeline start, completion, and failure', gridClass: 'grid-cols-3', order: 1 },
+    { key: 'data', label: 'Data Processing', color: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400', description: 'Intercept data at each processing step', gridClass: 'grid-cols-4', order: 2 },
+    { key: 'error', label: 'Error Handling', color: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400', description: 'Handle errors and retries', gridClass: 'grid-cols-3', order: 3 },
+];

package/dashboard/constants/file-format-registry.ts

@@ -0,0 +1,206 @@
+import { useConfigOptions } from '../hooks/api';
+import { parseCSVLine } from '../../shared/utils/csv-parse';
+import type { FileType } from '../utils/column-analysis';
+
+export interface FileParseResult {
+    headers: string[];
+    rows: Record<string, unknown>[];
+}
+
+export interface FileParseOptions {
+    delimiter?: string;
+    hasHeaders?: boolean;
+    maxRows?: number;
+}
+
+export interface FileFormatEntry {
+    value: string;
+    label: string;
+    extensions: string[];
+    mimeTypes: string[];
+    supportsPreview: boolean;
+    description?: string;
+    parse: (file: File, options?: FileParseOptions) => Promise<FileParseResult>;
+}
+
+// ---------------------------------------------------------------------------
+// Client-side parsers (ONLY formats that need browser preview)
+// ---------------------------------------------------------------------------
+
+const DEFAULT_MAX_ROWS = 100;
+
+async function parseCsvFile(file: File, options?: FileParseOptions): Promise<FileParseResult> {
+    const text = await file.text();
+    const lines = text.split('\n').filter(line => line.trim());
+    const delimiter = options?.delimiter ?? ',';
+    const hasHeaders = options?.hasHeaders ?? true;
+    const maxRows = options?.maxRows ?? DEFAULT_MAX_ROWS;
+
+    const headers = hasHeaders
+        ? parseCSVLine(lines[0], delimiter).map(h => h.replace(/^["']|["']$/g, ''))
+        : parseCSVLine(lines[0], delimiter).map((_, i) => `column_${i + 1}`);
+
+    const dataLines = hasHeaders ? lines.slice(1) : lines;
+    const rows = dataLines.slice(0, maxRows).map(line => {
+        const values = parseCSVLine(line, delimiter).map(v => v.replace(/^["']|["']$/g, ''));
+        const row: Record<string, unknown> = {};
+        headers.forEach((header, i) => {
+            row[header] = values[i] ?? '';
+        });
+        return row;
+    });
+
+    return { headers, rows };
+}
+
+async function parseJsonFile(file: File, options?: FileParseOptions): Promise<FileParseResult> {
+    const text = await file.text();
+    const json = JSON.parse(text);
+    const items: Record<string, unknown>[] = Array.isArray(json) ? json : json.data ?? [json];
+    const maxRows = options?.maxRows ?? DEFAULT_MAX_ROWS;
+    const sampleItems = items.slice(0, maxRows);
+    const headers = [...new Set(sampleItems.flatMap(item => Object.keys(item)))];
+    return { headers, rows: sampleItems };
+}
+
+async function parseXlsxFile(file: File, options?: FileParseOptions): Promise<FileParseResult> {
+    const { read, utils } = await import('xlsx');
+    const buffer = await file.arrayBuffer();
+    const workbook = read(buffer, { type: 'array' });
+    const sheetName = workbook.SheetNames[0];
+    if (!sheetName) throw new Error('Excel file has no sheets');
+    const sheet = workbook.Sheets[sheetName];
+    const jsonRows = utils.sheet_to_json<Record<string, unknown>>(sheet, { defval: '' });
+    const maxRows = options?.maxRows ?? DEFAULT_MAX_ROWS;
+    const sampleItems = jsonRows.slice(0, maxRows);
+    const headers = [...new Set(sampleItems.flatMap(item => Object.keys(item)))];
+    return { headers, rows: sampleItems };
+}
+
+async function parseXmlFile(file: File, _options?: FileParseOptions): Promise<FileParseResult> {
+    void file;
+    return { headers: [], rows: [] };
+}
+
+async function parseNdjsonFile(file: File, options?: FileParseOptions): Promise<FileParseResult> {
+    const text = await file.text();
+    const maxRows = options?.maxRows ?? DEFAULT_MAX_ROWS;
+    const lines = text.split('\n').filter(line => line.trim());
+    const items: Record<string, unknown>[] = [];
+    for (const line of lines) {
+        if (items.length >= maxRows) break;
+        items.push(JSON.parse(line) as Record<string, unknown>);
+    }
+    const headers = [...new Set(items.flatMap(item => Object.keys(item)))];
+    return { headers, rows: items };
+}
+
+const PARSERS: Record<string, (file: File, options?: FileParseOptions) => Promise<FileParseResult>> = {
+    CSV: parseCsvFile,
+    TSV: parseCsvFile,
+    JSON: parseJsonFile,
+    XLSX: parseXlsxFile,
+    XML: parseXmlFile,
+    NDJSON: parseNdjsonFile,
+};
+
+function buildFileFormatRegistry(
+    backendFormats: Array<{
+        value: string;
+        label: string;
+        extensions: string[];
+        mimeTypes: string[];
+        supportsPreview: boolean;
+        requiresClientParser: boolean;
+        description?: string;
+    }>
+): Map<string, FileFormatEntry> {
+    const registry = new Map<string, FileFormatEntry>();
+
+    for (const format of backendFormats) {
+        if (format.requiresClientParser && PARSERS[format.value]) {
+            registry.set(format.value, {
+                ...format,
+                parse: PARSERS[format.value],
+            });
+        }
+    }
+
+    return registry;
+}
+
+export function useFileFormatRegistry(): Map<string, FileFormatEntry> {
+    const { fileFormats } = useConfigOptions();
+    return buildFileFormatRegistry(fileFormats);
+}
+
+export const FILE_FORMAT_REGISTRY = new Map<string, FileFormatEntry>([
+    ['CSV', {
+        value: 'CSV',
+        label: 'CSV',
+        extensions: ['.csv', '.tsv'],
+        mimeTypes: ['text/csv', 'text/tab-separated-values'],
+        supportsPreview: true,
+        parse: parseCsvFile,
+    }],
+    ['JSON', {
+        value: 'JSON',
+        label: 'JSON',
+        extensions: ['.json'],
+        mimeTypes: ['application/json'],
+        supportsPreview: true,
+        parse: parseJsonFile,
+    }],
+    ['XML', {
+        value: 'XML',
+        label: 'XML',
+        extensions: ['.xml'],
+        mimeTypes: ['text/xml', 'application/xml'],
+        supportsPreview: false,
+        parse: parseXmlFile,
+    }],
+    ['XLSX', {
+        value: 'XLSX',
+        label: 'Excel',
+        extensions: ['.xlsx', '.xls'],
+        mimeTypes: ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'],
+        supportsPreview: true,
+        parse: parseXlsxFile,
+    }],
+    ['NDJSON', {
+        value: 'NDJSON',
+        label: 'NDJSON',
+        extensions: ['.ndjson', '.jsonl'],
+        mimeTypes: ['application/x-ndjson'],
+        supportsPreview: true,
+        parse: parseNdjsonFile,
+    }],
+]);
+
+export function buildAcceptString(
+    allowedTypes?: string[],
+    registry: Map<string, FileFormatEntry> = FILE_FORMAT_REGISTRY
+): string {
+    if (!allowedTypes || allowedTypes.length === 0) return '*';
+    const extensions: string[] = [];
+    for (const type of allowedTypes) {
+        const entry = registry.get(type);
+        if (entry) {
+            extensions.push(...entry.extensions);
+        }
+    }
+    return extensions.length > 0 ? extensions.join(',') : '*';
+}
+
+export function detectFileFormat(
+    fileName: string,
+    registry: Map<string, FileFormatEntry> = FILE_FORMAT_REGISTRY
+): FileType {
+    const ext = '.' + (fileName.split('.').pop()?.toLowerCase() ?? '');
+    for (const [format, entry] of registry) {
+        if (entry.extensions.includes(ext)) {
+            return format as NonNullable<FileType>;
+        }
+    }
+    return null;
+}