@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/business/import-wizard.d.ts

@@ -0,0 +1,186 @@
+import * as React from "react";
+import { type LabelFn } from "../lib/labels.js";
+import { importCellMessages, type ImportField, type ImportRowResult, type MappingTemplate } from "./import-core.js";
+export declare const importWizardLabels: {
+    stepUpload: string;
+    stepUploadHint: string;
+    stepMap: string;
+    stepMapHint: string;
+    stepReview: string;
+    stepReviewHint: string;
+    stepImport: string;
+    stepImportHint: string;
+    sample: string;
+    parsing: string;
+    parseFailed: string;
+    noFile: string;
+    noRows: string;
+    tooMany: string;
+    fileSummary: string;
+    encoding: string;
+    delimiter: string;
+    sheet: string;
+    header: string;
+    fileLocale: string;
+    fileLocaleHint: string;
+    garbled: string;
+    garbledBody: string;
+    tryEncoding: string;
+    column: string;
+    sampleValue: string;
+    field: string;
+    mapsTo: string;
+    ignore: string;
+    required: string;
+    unmapped: string;
+    mappedCount: string;
+    template: string;
+    applyTemplate: string;
+    saveTemplate: string;
+    templateName: string;
+    templateSaved: string;
+    templatePlaceholder: string;
+    encUtf8: string;
+    enc1254: string;
+    enc1252: string;
+    delimComma: string;
+    delimSemicolon: string;
+    delimTab: string;
+    counts: string;
+    onlyErrors: string;
+    nextError: string;
+    showing: string;
+    row: string;
+    fix: string;
+    allInvalid: string;
+    strategy: string;
+    skip: string;
+    skipHint: string;
+    update: string;
+    updateHint: string;
+    create: string;
+    createHint: string;
+    dryRun: string;
+    dryRunHint: string;
+    willImport: string;
+    start: string;
+    startDry: string;
+    importing: string;
+    cancel: string;
+    cancelled: string;
+    leave: string;
+    reportTitle: string;
+    reportDry: string;
+    reportPartial: string;
+    reportSummary: string;
+    failedRows: string;
+    error: string;
+    downloadFailed: string;
+    again: string;
+    done: string;
+};
+export type ImportWizardLabels = typeof importWizardLabels;
+export type ImportStrategy = "skip" | "update" | "create";
+export interface ImportContext {
+    signal: AbortSignal;
+    /** Report rows written so far within this chunk. */
+    onProgress: (done: number) => void;
+    strategy: ImportStrategy;
+    dryRun: boolean;
+    /** Index of the chunk's first row among all valid rows. */
+    offset: number;
+}
+export interface ImportResult {
+    ok: number;
+    /** `row` = 0-based index within the rows passed in. */
+    failed: {
+        row: number;
+        error: string;
+    }[];
+}
+export interface ImportWizardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    fields: ImportField[];
+    /** Fields that identify an existing record (enables the duplicate strategy). */
+    dedupeKeys?: string[];
+    /** Default 50,000. */
+    maxRows?: number;
+    /** Bytes. Default 20 MB. */
+    maxSize?: number;
+    /** Rows per `onImport` call. Default 200. */
+    chunkSize?: number;
+    /** Called per chunk with typed values. */
+    onImport: (rows: Record<string, unknown>[], ctx: ImportContext) => Promise<ImportResult>;
+    templates?: {
+        list: () => Promise<MappingTemplate[]>;
+        save: (t: MappingTemplate) => Promise<void>;
+    };
+    sampleFile?: {
+        name: string;
+        href: string;
+    };
+    /** Locales offered for number / date parsing. Default: UI locale, en-US, en-GB, tr-TR, de-DE. */
+    fileLocales?: {
+        value: string;
+        label: string;
+    }[];
+    /** After the report: "Done". */
+    onDone?: (report: ImportReport) => void;
+    /** Rows shown in the review table. Default 200. */
+    previewLimit?: number;
+    labels?: Partial<ImportWizardLabels>;
+}
+export interface ImportReport {
+    ok: number;
+    failed: {
+        row: number;
+        error: string;
+        raw: Record<string, string>;
+    }[];
+    skipped: number;
+    dryRun: boolean;
+    cancelled: boolean;
+}
+/**
+ * Imports CSV / XLSX into any collection: upload (encoding, delimiter, sheet, header) → column
+ * mapping (auto + templates) → review with inline fixes → duplicate strategy, dry run and a
+ * chunked, cancellable import → report with a failed-rows download. Built on Multi-step form.
+ *
+ * ```tsx
+ * <ImportWizard fields={contactFields} dedupeKeys={["email"]} onImport={(rows, { signal }) => api.contacts.bulk(rows, { signal })} />
+ * ```
+ */
+export declare const ImportWizard: React.ForwardRefExoticComponent<ImportWizardProps & React.RefAttributes<HTMLDivElement>>;
+export interface ImportMappingProps {
+    headers: string[];
+    /** First data row, shown as a sample. */
+    sample?: string[];
+    fields: ImportField[];
+    mapping: Record<number, string | null>;
+    onMappingChange: (m: Record<number, string | null>) => void;
+    toolbar?: React.ReactNode;
+    labels?: Partial<ImportWizardLabels>;
+}
+/** Column → field mapping: one labelled Select per file column. Usable alone. */
+export declare function ImportMapping({ headers, sample, fields, mapping, onMappingChange, toolbar, labels, t: tProp }: ImportMappingProps & {
+    t?: LabelFn<ImportWizardLabels>;
+}): React.JSX.Element;
+export interface ImportReviewProps {
+    results: ImportRowResult[];
+    /** Mapped fields, as table columns. */
+    fields: ImportField[];
+    onlyErrors: boolean;
+    onOnlyErrorsChange: (v: boolean) => void;
+    errorCount: number;
+    warningCount: number;
+    errorRowCount: number;
+    /** Inline fix: index into `results`. */
+    onFix?: (index: number, field: string, value: string) => void;
+    onNextError?: () => void;
+    limit?: number;
+    labels?: Partial<ImportWizardLabels>;
+}
+/** Validation preview: counts, an "only problems" filter and editable error cells (F8 = next error). */
+export declare function ImportReview({ results, fields, onlyErrors, onOnlyErrorsChange, errorCount, warningCount, errorRowCount, onFix, onNextError, limit, labels, t: tProp }: ImportReviewProps & {
+    t?: LabelFn<ImportWizardLabels>;
+}): React.JSX.Element;
+export { importCellMessages };

package/dist/business/import-wizard.js

@@ -0,0 +1,401 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowRight, Download, FileSpreadsheet, RotateCcw, Save, X, CircleAlert, CircleCheck } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { Button } from "../components/button.js";
+import { Alert } from "../components/alert.js";
+import { Badge } from "../components/badge.js";
+import { Checkbox } from "../components/checkbox.js";
+import { Input, Field } from "../components/input.js";
+import { Select } from "../components/select.js";
+import { RadioGroup } from "../components/radio-group.js";
+import { Progress } from "../components/progress.js";
+import { FileUpload } from "../components/file-upload.js";
+import { toCsv } from "../data-table/csv.js";
+import { downloadBlob } from "./export-core.js";
+import { MultiStepForm, MultiStepFormFooter, MultiStepFormStep, MultiStepFormStepper } from "./multi-step-form.js";
+import { applyTemplate, autoMap, decodeText, importCellMessages, looksGarbled, mappingToTemplate, parseCsv, readXlsx, sniffCsv, validateImport, validateImportRow, } from "./import-core.js";
+export const importWizardLabels = {
+    stepUpload: "Upload",
+    stepUploadHint: "CSV or Excel. The first row should hold column names.",
+    stepMap: "Map columns",
+    stepMapHint: "Match each column in your file to a field. Unmapped columns are ignored.",
+    stepReview: "Review",
+    stepReviewHint: "Fix problems inline or leave them out — rows with errors are skipped.",
+    stepImport: "Import",
+    stepImportHint: "Choose how duplicates are handled, then start.",
+    sample: "Download a sample file",
+    parsing: "Reading file…",
+    parseFailed: "Couldn't read this file",
+    noFile: "Choose a file to continue",
+    noRows: "The file has no data rows",
+    tooMany: "This file has {count} rows; the limit is {max}.",
+    fileSummary: "{rows} rows · {columns} columns",
+    encoding: "Encoding",
+    delimiter: "Delimiter",
+    sheet: "Sheet",
+    header: "First row is a header",
+    fileLocale: "Number and date format",
+    fileLocaleHint: "How the file writes 1,234.50 and dates.",
+    garbled: "Characters look wrong?",
+    garbledBody: "This file may use a Turkish Windows encoding.",
+    tryEncoding: "Try Turkish (Windows-1254)",
+    column: "Column",
+    sampleValue: "Sample",
+    field: "Field",
+    mapsTo: "Column “{column}” maps to",
+    ignore: "Don't import",
+    required: "Required",
+    unmapped: "Map the required fields: {fields}",
+    mappedCount: "{mapped} of {total} columns mapped",
+    template: "Mapping template",
+    applyTemplate: "Apply a template",
+    saveTemplate: "Save mapping",
+    templateName: "Template name",
+    templateSaved: "Template saved",
+    templatePlaceholder: "e.g. Legacy CRM export",
+    encUtf8: "UTF-8",
+    enc1254: "Turkish (Windows-1254)",
+    enc1252: "Western (Windows-1252)",
+    delimComma: "Comma ( , )",
+    delimSemicolon: "Semicolon ( ; )",
+    delimTab: "Tab",
+    counts: "{rows} rows · {errors} errors · {warnings} warnings",
+    onlyErrors: "Only rows with problems",
+    nextError: "Next error",
+    showing: "Showing {shown} of {total}",
+    row: "Row",
+    fix: "{field}, row {row}",
+    allInvalid: "Every row has errors. Fix them or go back to the mapping.",
+    strategy: "When a record already exists",
+    skip: "Skip it",
+    skipHint: "Keep what's there; import only new records.",
+    update: "Update it",
+    updateHint: "Overwrite matching records with the file's values.",
+    create: "Create a copy",
+    createHint: "Import every row as a new record.",
+    dryRun: "Dry run",
+    dryRunHint: "Validate against the server without writing anything.",
+    willImport: "{valid} rows will be imported · {skipped} skipped for errors",
+    start: "Import {count} rows",
+    startDry: "Run a dry run",
+    importing: "Importing {done} of {total}…",
+    cancel: "Cancel import",
+    cancelled: "Import cancelled after {done} rows",
+    leave: "An import is running. Leave anyway?",
+    reportTitle: "Import finished",
+    reportDry: "Dry run finished — nothing was written",
+    reportPartial: "Import finished with problems",
+    reportSummary: "{ok} imported · {failed} failed · {skipped} skipped",
+    failedRows: "Failed rows",
+    error: "Error",
+    downloadFailed: "Download failed rows",
+    again: "Import another file",
+    done: "Done",
+};
+const DEFAULT_LOCALES = [
+    { value: "en-US", label: "English (US) · 1,234.50 · 11/10/2026" },
+    { value: "en-GB", label: "English (UK) · 1,234.50 · 10/11/2026" },
+    { value: "tr-TR", label: "Türkçe · 1.234,50 · 10.11.2026" },
+    { value: "de-DE", label: "Deutsch · 1.234,50 · 10.11.2026" },
+];
+/**
+ * Imports CSV / XLSX into any collection: upload (encoding, delimiter, sheet, header) → column
+ * mapping (auto + templates) → review with inline fixes → duplicate strategy, dry run and a
+ * chunked, cancellable import → report with a failed-rows download. Built on Multi-step form.
+ *
+ * ```tsx
+ * <ImportWizard fields={contactFields} dedupeKeys={["email"]} onImport={(rows, { signal }) => api.contacts.bulk(rows, { signal })} />
+ * ```
+ */
+export const ImportWizard = React.forwardRef(function ImportWizard({ fields, dedupeKeys, maxRows = 50_000, maxSize = 20 * 1024 * 1024, chunkSize = 200, onImport, templates, sampleFile, fileLocales, onDone, previewLimit = 200, labels, className, ...props }, ref) {
+    const t = useLabels("importWizard", importWizardLabels, labels);
+    const { locale, format } = useLocale();
+    const [step, setStep] = React.useState("upload");
+    const [uploads, setUploads] = React.useState([]);
+    const [file, setFile] = React.useState(null);
+    const [parsing, setParsing] = React.useState(false);
+    const [parseError, setParseError] = React.useState(null);
+    const [encoding, setEncoding] = React.useState("utf-8");
+    const [delimiter, setDelimiter] = React.useState(",");
+    const [sheet, setSheet] = React.useState(0);
+    const [hasHeader, setHasHeader] = React.useState(true);
+    const [fileLocale, setFileLocale] = React.useState(locale);
+    const [table, setTable] = React.useState([]);
+    const [garbled, setGarbled] = React.useState(false);
+    const [mapping, setMapping] = React.useState({});
+    const [edits, setEdits] = React.useState({});
+    const [onlyErrors, setOnlyErrors] = React.useState(false);
+    const [strategy, setStrategy] = React.useState("skip");
+    const [dryRun, setDryRun] = React.useState(false);
+    const [progress, setProgress] = React.useState(null);
+    const [report, setReport] = React.useState(null);
+    const [tplList, setTplList] = React.useState([]);
+    const [tplName, setTplName] = React.useState("");
+    const [tplNote, setTplNote] = React.useState("");
+    const abortRef = React.useRef(null);
+    const reviewRef = React.useRef(null);
+    const localeItems = React.useMemo(() => {
+        const list = fileLocales ?? DEFAULT_LOCALES;
+        return list.some((l) => l.value === locale) ? list : [{ value: locale, label: locale }, ...list];
+    }, [fileLocales, locale]);
+    React.useEffect(() => {
+        if (templates)
+            void templates.list().then(setTplList).catch(() => setTplList([]));
+    }, [templates]);
+    const headers = React.useMemo(() => (hasHeader ? (table[0] ?? []) : (table[0] ?? []).map((_, i) => `${t("column")} ${i + 1}`)), [table, hasHeader, t]);
+    const body = React.useMemo(() => (hasHeader ? table.slice(1) : table), [table, hasHeader]);
+    // Re-parse when the CSV options or sheet change.
+    const load = React.useCallback(async (f, enc, delim, sheetIndex) => {
+        setParsing(true);
+        setParseError(null);
+        try {
+            let rows;
+            if (f.kind === "csv") {
+                const text = decodeText(f.bytes, enc);
+                setGarbled(enc === "utf-8" ? looksGarbled(text) : false);
+                rows = await parseCsv(text, delim);
+            }
+            else {
+                rows = f.sheets?.[sheetIndex]?.rows ?? [];
+                setGarbled(false);
+            }
+            setTable(rows);
+            setEdits({});
+            const hdr = rows[0] ?? [];
+            setMapping(autoMap(hdr, fields, locale));
+        }
+        catch (e) {
+            setParseError(e instanceof Error ? e.message : String(e));
+            setTable([]);
+        }
+        finally {
+            setParsing(false);
+        }
+    }, [fields, locale]);
+    const onFiles = async (files) => {
+        setUploads(files);
+        const raw = files[0]?.file;
+        if (!raw) {
+            setFile(null);
+            setTable([]);
+            return;
+        }
+        setParsing(true);
+        setParseError(null);
+        try {
+            const isXlsx = /\.xlsx$/i.test(raw.name) || raw.type.includes("spreadsheetml");
+            if (isXlsx) {
+                const sheets = await readXlsx(raw);
+                const f = { name: raw.name, kind: "xlsx", sheets };
+                setFile(f);
+                setSheet(0);
+                await load(f, encoding, delimiter, 0);
+            }
+            else {
+                const bytes = new Uint8Array(await raw.arrayBuffer());
+                const sniff = sniffCsv(bytes);
+                const f = { name: raw.name, kind: "csv", bytes };
+                setFile(f);
+                setEncoding(sniff.encoding);
+                setDelimiter(sniff.delimiter);
+                if (sniff.encoding === "windows-1254" || sniff.delimiter === ";")
+                    setFileLocale(localeItems.find((l) => l.value.startsWith("tr"))?.value ?? fileLocale);
+                await load(f, sniff.encoding, sniff.delimiter, 0);
+            }
+        }
+        catch (e) {
+            setParseError(e instanceof Error ? e.message : String(e));
+            setParsing(false);
+        }
+    };
+    const results = React.useMemo(() => {
+        const base = validateImport(body, mapping, fields, { locale: fileLocale, dedupeKeys });
+        if (!Object.keys(edits).length)
+            return base;
+        const byId = new Map(fields.map((f) => [f.id, f]));
+        return base.map((r, i) => (edits[i] ? validateImportRow({ ...r.raw, ...edits[i] }, r.row, byId, { locale: fileLocale }) : r));
+    }, [body, mapping, fields, fileLocale, dedupeKeys, edits]);
+    const errorRows = results.filter((r) => Object.keys(r.errors).length);
+    const errorCount = results.reduce((n, r) => n + Object.keys(r.errors).length, 0);
+    const warningCount = results.reduce((n, r) => n + Object.keys(r.warnings).length, 0);
+    const validRows = results.filter((r) => !Object.keys(r.errors).length);
+    const mappedFields = fields.filter((f) => Object.values(mapping).includes(f.id));
+    const missingRequired = fields.filter((f) => f.required && !Object.values(mapping).includes(f.id));
+    const steps = [
+        {
+            id: "upload",
+            title: t("stepUpload"),
+            description: t("stepUploadHint"),
+            validate: () => {
+                if (parseError)
+                    return parseError;
+                if (!file)
+                    return t("noFile");
+                if (!body.length)
+                    return t("noRows");
+                if (body.length > maxRows)
+                    return t("tooMany", { count: format.number(body.length), max: format.number(maxRows) });
+                return true;
+            },
+        },
+        {
+            id: "map",
+            title: t("stepMap"),
+            description: t("stepMapHint"),
+            validate: () => (missingRequired.length ? t("unmapped", { fields: format.list(missingRequired.map((f) => f.label)) }) : true),
+        },
+        { id: "review", title: t("stepReview"), description: t("stepReviewHint"), validate: () => (validRows.length ? true : t("allInvalid")) },
+        { id: "import", title: t("stepImport"), description: t("stepImportHint") },
+    ];
+    const runImport = async () => {
+        const ctrl = new AbortController();
+        abortRef.current = ctrl;
+        const total = validRows.length;
+        let ok = 0;
+        const failed = [];
+        setProgress({ done: 0, total });
+        let cancelled = false;
+        try {
+            for (let offset = 0; offset < total; offset += chunkSize) {
+                if (ctrl.signal.aborted) {
+                    cancelled = true;
+                    break;
+                }
+                const chunk = validRows.slice(offset, offset + chunkSize);
+                const res = await onImport(chunk.map((r) => r.values), { signal: ctrl.signal, strategy, dryRun, offset, onProgress: (d) => setProgress({ done: offset + d, total }) });
+                ok += res.ok;
+                for (const f of res.failed) {
+                    const src = chunk[f.row];
+                    if (src)
+                        failed.push({ row: src.row, error: f.error, raw: src.raw });
+                }
+                setProgress({ done: Math.min(total, offset + chunk.length), total });
+            }
+        }
+        catch (e) {
+            if (ctrl.signal.aborted)
+                cancelled = true;
+            else
+                throw e;
+        }
+        finally {
+            abortRef.current = null;
+        }
+        setReport({ ok, failed, skipped: results.length - validRows.length, dryRun, cancelled });
+        setProgress(null);
+    };
+    const reset = () => {
+        setUploads([]);
+        setFile(null);
+        setTable([]);
+        setMapping({});
+        setEdits({});
+        setReport(null);
+        setStep("upload");
+    };
+    const downloadFailed = () => {
+        if (!report)
+            return;
+        const cols = fields.filter((f) => mappedFields.includes(f));
+        const csv = toCsv([[t("row"), ...cols.map((c) => c.label), t("error")], ...report.failed.map((f) => [f.row, ...cols.map((c) => f.raw[c.id] ?? ""), f.error])], { locale: fileLocale });
+        downloadBlob(new Blob([csv], { type: "text/csv;charset=utf-8" }), `${(file?.name ?? "import").replace(/\.[^.]+$/, "")}-failed.csv`);
+    };
+    // F8 → next error cell in the review table.
+    const nextError = () => {
+        const cells = Array.from(reviewRef.current?.querySelectorAll('input[aria-invalid="true"]') ?? []);
+        if (!cells.length)
+            return;
+        const i = cells.indexOf(document.activeElement);
+        cells[(i + 1) % cells.length].focus();
+    };
+    const importing = progress !== null;
+    return (_jsx("div", { ref: ref, "data-slot": "import-wizard", className: cn("vui-import min-w-0", className), ...props, children: _jsxs(MultiStepForm, { steps: steps, value: step, onValueChange: setStep, onComplete: runImport, confirmLeave: importing, labels: { leave: t("leave") }, children: [_jsx(MultiStepFormStepper, {}), _jsx(MultiStepFormStep, { id: "upload", children: _jsxs("div", { className: "flex flex-col gap-5", children: [_jsx(FileUpload, { accept: [".csv", ".tsv", ".txt", ".xlsx", "text/csv"], maxFiles: 1, maxSize: maxSize, value: uploads, onValueChange: (f) => void onFiles(f), invalid: !!parseError }), sampleFile ? (_jsxs("a", { href: sampleFile.href, download: sampleFile.name, className: "focus-ring inline-flex w-fit items-center gap-1.5 rounded-ui-sm text-[13px] text-accent-ink underline-offset-4 hover:underline", children: [_jsx(Download, { "aria-hidden": true, className: "size-3.5" }), " ", t("sample")] })) : null, parsing ? (_jsx("p", { className: "text-sm text-fg-muted", role: "status", children: t("parsing") })) : null, parseError ? (_jsx(Alert, { tone: "danger", title: t("parseFailed"), live: "assertive", children: parseError })) : null, garbled && file?.kind === "csv" ? (_jsx(Alert, { tone: "warning", title: t("garbled"), live: "polite", actions: _jsx(Button, { size: "sm", variant: "secondary", onClick: () => { setEncoding("windows-1254"); void load(file, "windows-1254", delimiter, sheet); }, children: t("tryEncoding") }), children: t("garbledBody") })) : null, file && table.length ? (_jsxs("div", { className: "rounded-ui-lg surface-2 p-4", children: [_jsxs("p", { className: "mb-4 flex items-center gap-2 text-sm text-fg", children: [_jsx(FileSpreadsheet, { "aria-hidden": true, className: "size-4 text-fg-muted" }), _jsx("span", { className: "font-medium", children: file.name }), _jsxs("span", { className: "text-fg-muted tabular", children: ["\u00B7 ", t("fileSummary", { rows: format.number(body.length), columns: headers.length })] })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [file.kind === "csv" ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: t("encoding"), children: _jsx(Select, { value: encoding, onValueChange: (v) => {
+                                                                if (!v)
+                                                                    return;
+                                                                setEncoding(v);
+                                                                void load(file, v, delimiter, sheet);
+                                                            }, items: [
+                                                                { value: "utf-8", label: t("encUtf8") },
+                                                                { value: "windows-1254", label: t("enc1254") },
+                                                                { value: "windows-1252", label: t("enc1252") },
+                                                            ] }) }), _jsx(Field, { label: t("delimiter"), children: _jsx(Select, { value: delimiter, onValueChange: (v) => {
+                                                                if (!v)
+                                                                    return;
+                                                                const d = v;
+                                                                setDelimiter(d);
+                                                                void load(file, encoding, d, sheet);
+                                                            }, items: [
+                                                                { value: ",", label: t("delimComma") },
+                                                                { value: ";", label: t("delimSemicolon") },
+                                                                { value: "\t", label: t("delimTab") },
+                                                            ] }) })] })) : (file.sheets?.length ?? 0) > 1 ? (_jsx(Field, { label: t("sheet"), children: _jsx(Select, { value: String(sheet), onValueChange: (v) => {
+                                                        const i = Number(v ?? 0);
+                                                        setSheet(i);
+                                                        void load(file, encoding, delimiter, i);
+                                                    }, items: (file.sheets ?? []).map((s, i) => ({ value: String(i), label: `${s.name} · ${format.number(Math.max(0, s.rows.length - 1))}` })) }) })) : null, _jsx(Field, { label: t("fileLocale"), hint: t("fileLocaleHint"), children: _jsx(Select, { value: fileLocale, onValueChange: (v) => v && setFileLocale(v), items: localeItems }) }), _jsx("div", { className: "flex items-end pb-2", children: _jsx(Checkbox, { checked: hasHeader, onCheckedChange: (c) => { setHasHeader(c === true); setMapping(autoMap(c === true ? (table[0] ?? []) : [], fields, locale)); }, label: t("header") }) })] })] })) : null] }) }), _jsx(MultiStepFormStep, { id: "map", children: _jsx(ImportMapping, { headers: headers, sample: body[0] ?? [], fields: fields, mapping: mapping, onMappingChange: setMapping, t: t, toolbar: templates ? (_jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [tplList.length ? (_jsx(Field, { label: t("template"), className: "min-w-48", children: _jsx(Select, { placeholder: t("applyTemplate"), value: null, onValueChange: (id) => {
+                                            const tpl = tplList.find((x) => x.id === id);
+                                            if (tpl)
+                                                setMapping(applyTemplate(headers, tpl, locale));
+                                        }, items: tplList.map((x) => ({ value: x.id, label: x.name })) }) })) : null, _jsx(Field, { label: t("templateName"), className: "min-w-40", children: _jsx(Input, { value: tplName, onChange: (e) => setTplName(e.target.value), placeholder: t("templatePlaceholder") }) }), _jsxs(Button, { variant: "secondary", disabled: !tplName.trim(), onClick: async () => {
+                                        const tpl = { id: `tpl-${Date.now().toString(36)}`, name: tplName.trim(), mapping: mappingToTemplate(headers, mapping, locale) };
+                                        await templates.save(tpl);
+                                        setTplList((l) => [...l, tpl]);
+                                        setTplName("");
+                                        setTplNote(t("templateSaved"));
+                                    }, children: [_jsx(Save, {}), " ", t("saveTemplate")] }), _jsx("span", { className: "text-xs text-fg-muted", "aria-live": "polite", children: tplNote })] })) : null }) }), _jsx(MultiStepFormStep, { id: "review", children: _jsx("div", { ref: reviewRef, onKeyDown: (e) => {
+                            if (e.key === "F8") {
+                                e.preventDefault();
+                                nextError();
+                            }
+                        }, children: _jsx(ImportReview, { results: results, fields: mappedFields, onlyErrors: onlyErrors, onOnlyErrorsChange: setOnlyErrors, errorCount: errorCount, warningCount: warningCount, errorRowCount: errorRows.length, onFix: (index, field, v) => setEdits((e) => ({ ...e, [index]: { ...e[index], [field]: v } })), onNextError: nextError, limit: previewLimit, t: t }) }) }), _jsx(MultiStepFormStep, { id: "import", children: report ? (_jsx(ImportReportView, { report: report, fields: mappedFields, t: t, onDownload: downloadFailed, onAgain: reset, onDone: onDone ? () => onDone(report) : undefined })) : (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsx("p", { className: "text-sm text-fg tabular", "aria-live": "polite", children: t("willImport", { valid: format.number(validRows.length), skipped: format.number(results.length - validRows.length) }) }), dedupeKeys?.length ? (_jsxs("fieldset", { className: "m-0 border-0 p-0", children: [_jsx("legend", { className: "mb-2 text-[13px] font-medium text-fg", children: t("strategy") }), _jsx(RadioGroup, { value: strategy, onValueChange: setStrategy, variant: "card", size: "sm", "aria-label": t("strategy"), className: "grid gap-2 sm:grid-cols-3", disabled: importing, items: [
+                                            { value: "skip", label: t("skip"), description: t("skipHint") },
+                                            { value: "update", label: t("update"), description: t("updateHint") },
+                                            { value: "create", label: t("create"), description: t("createHint") },
+                                        ] })] })) : null, _jsx(Checkbox, { checked: dryRun, onCheckedChange: (c) => setDryRun(c === true), label: t("dryRun"), description: t("dryRunHint"), disabled: importing }), progress ? (_jsxs("div", { className: "flex flex-col gap-2 rounded-ui-lg surface-2 p-4", children: [_jsx(Progress, { value: progress.total ? (progress.done / progress.total) * 100 : null, "aria-label": t("importing", { done: progress.done, total: progress.total }) }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-[13px] text-fg-muted tabular", "aria-live": "polite", children: t("importing", { done: format.number(progress.done), total: format.number(progress.total) }) }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => abortRef.current?.abort(), children: [_jsx(X, {}), " ", t("cancel")] })] })] })) : null] })) }), report ? null : _jsx(MultiStepFormFooter, { submitLabel: dryRun ? t("startDry") : t("start", { count: format.number(validRows.length) }) })] }) }));
+});
+/** Column → field mapping: one labelled Select per file column. Usable alone. */
+export function ImportMapping({ headers, sample = [], fields, mapping, onMappingChange, toolbar, labels, t: tProp }) {
+    const own = useLabels("importWizard", importWizardLabels, labels);
+    const t = tProp ?? own;
+    const used = new Set(Object.values(mapping).filter(Boolean));
+    const mapped = Object.values(mapping).filter(Boolean).length;
+    const missing = fields.filter((f) => f.required && !used.has(f.id));
+    return (_jsxs("div", { "data-slot": "import-mapping", className: "flex flex-col gap-4", children: [toolbar, _jsxs("div", { className: "flex flex-wrap items-center gap-2 text-[13px] text-fg-muted tabular", children: [t("mappedCount", { mapped, total: headers.length }), missing.map((f) => (_jsxs(Badge, { tone: "danger", size: "sm", children: [f.label, " \u00B7 ", t("required")] }, f.id)))] }), _jsx("ul", { className: "m-0 flex list-none flex-col divide-y divide-line rounded-ui-lg border border-line p-0", children: headers.map((h, i) => {
+                    const id = `import-map-${i}`;
+                    const value = mapping[i] ?? "__ignore";
+                    return (_jsxs("li", { className: "grid grid-cols-1 items-center gap-x-4 gap-y-1.5 px-3.5 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,15rem)]", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("label", { htmlFor: id, className: "block truncate text-[13px] font-medium text-fg", children: [h || `${t("column")} ${i + 1}`, _jsxs("span", { className: "sr-only", children: [" \u2192 ", t("field")] })] }), _jsx("p", { className: "truncate font-mono text-[11px] text-fg-subtle", children: sample[i] || "—" })] }), _jsx(ArrowRight, { "aria-hidden": true, className: "hidden size-4 text-fg-subtle sm:block rtl:rotate-180" }), _jsx(Select, { id: id, size: "sm", value: value, "aria-label": t("mapsTo", { column: h }), onValueChange: (v) => onMappingChange({ ...mapping, [i]: !v || v === "__ignore" ? null : v }), items: [
+                                    { value: "__ignore", label: t("ignore") },
+                                    ...fields.map((f) => ({ value: f.id, label: f.required ? `${f.label} *` : f.label, disabled: used.has(f.id) && mapping[i] !== f.id })),
+                                ] })] }, i));
+                }) })] }));
+}
+/** Validation preview: counts, an "only problems" filter and editable error cells (F8 = next error). */
+export function ImportReview({ results, fields, onlyErrors, onOnlyErrorsChange, errorCount, warningCount, errorRowCount, onFix, onNextError, limit = 200, labels, t: tProp }) {
+    const own = useLabels("importWizard", importWizardLabels, labels);
+    const t = tProp ?? own;
+    const { format } = useLocale();
+    const indexed = results.map((r, i) => ({ r, i }));
+    const filtered = onlyErrors ? indexed.filter(({ r }) => Object.keys(r.errors).length || Object.keys(r.warnings).length) : indexed;
+    const shown = filtered.slice(0, limit);
+    return (_jsxs("div", { "data-slot": "import-review", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("p", { className: "me-auto flex items-center gap-2 text-sm text-fg tabular", "aria-live": "polite", children: [errorCount ? _jsx(CircleAlert, { "aria-hidden": true, className: "size-4 text-danger" }) : _jsx(CircleCheck, { "aria-hidden": true, className: "size-4 text-success" }), t("counts", { rows: format.number(results.length), errors: format.number(errorCount), warnings: format.number(warningCount) })] }), _jsx(Checkbox, { size: "sm", checked: onlyErrors, onCheckedChange: (c) => onOnlyErrorsChange(c === true), label: _jsx("span", { className: "text-[13px]", children: t("onlyErrors") }), disabled: !errorRowCount && !warningCount }), onNextError ? (_jsxs(Button, { size: "sm", variant: "secondary", onClick: onNextError, disabled: !errorCount, children: [t("nextError"), " ", _jsx("kbd", { className: "ms-1 font-mono text-[10px] text-fg-subtle", children: "F8" })] })) : null] }), _jsx("div", { className: "max-h-[26rem] overflow-auto rounded-ui-lg border border-line bg-surface", children: _jsxs("table", { className: "w-full border-separate border-spacing-0 text-[13px]", children: [_jsx("caption", { className: "sr-only", children: t("stepReview") }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "vui-pm-sticky sticky top-0 z-10 w-14 border-b border-line px-3 py-2 text-start text-[11px] font-medium text-fg-subtle", children: t("row") }), fields.map((f) => (_jsx("th", { scope: "col", className: "vui-pm-sticky sticky top-0 z-10 min-w-36 border-b border-line px-3 py-2 text-start text-[11px] font-medium tracking-[0.04em] text-fg-subtle uppercase", children: f.label }, f.id)))] }) }), _jsx("tbody", { children: shown.map(({ r, i }) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", className: "border-b border-line px-3 py-1.5 text-start font-mono text-[11px] font-normal text-fg-subtle tabular", children: r.row }), fields.map((f) => {
+                                        const err = r.errors[f.id];
+                                        const warn = r.warnings[f.id];
+                                        const v = r.raw[f.id] ?? "";
+                                        return (_jsx("td", { "data-error": err ? "" : undefined, "data-warning": warn && !err ? "" : undefined, className: "vui-import-cell border-b border-line px-1.5 py-1 align-top", children: err && onFix ? (_jsxs(_Fragment, { children: [_jsx(Input, { size: "sm", variant: "ghost", defaultValue: v, invalid: true, "aria-label": t("fix", { field: f.label, row: r.row }), "aria-describedby": `ie-${r.row}-${f.id}`, onBlur: (e) => e.target.value !== v && onFix(i, f.id, e.target.value), onKeyDown: (e) => e.key === "Enter" && e.target.blur() }), _jsx("p", { id: `ie-${r.row}-${f.id}`, className: "px-1.5 pt-0.5 text-[11px] text-danger", children: err })] })) : (_jsxs("span", { className: "block px-1.5 py-1 text-fg [overflow-wrap:anywhere]", children: [v || _jsx("span", { className: "text-fg-subtle", children: "\u2014" }), err ? _jsx("span", { className: "block text-[11px] text-danger", children: err }) : null, warn ? _jsx("span", { className: "block text-[11px] text-warning", children: warn }) : null] })) }, f.id));
+                                    })] }, r.row))) })] }) }), filtered.length > shown.length ? _jsx("p", { className: "text-xs text-fg-subtle tabular", children: t("showing", { shown: format.number(shown.length), total: format.number(filtered.length) }) }) : null] }));
+}
+/* ------------------------------------------------------------------ */
+/* Report                                                              */
+/* ------------------------------------------------------------------ */
+function ImportReportView({ report, fields, t, onDownload, onAgain, onDone }) {
+    const { format } = useLocale();
+    const headingRef = React.useRef(null);
+    React.useEffect(() => headingRef.current?.focus(), []);
+    const title = report.cancelled ? t("cancelled", { done: format.number(report.ok + report.failed.length) }) : report.dryRun ? t("reportDry") : report.failed.length ? t("reportPartial") : t("reportTitle");
+    return (_jsxs("div", { "data-slot": "import-report", className: "flex flex-col gap-4", children: [_jsxs("div", { className: cn("flex items-start gap-3 rounded-ui-lg p-4", report.failed.length ? "tone-warning tone-soft" : "tone-success tone-soft"), children: [report.failed.length ? _jsx(CircleAlert, { "aria-hidden": true, className: "mt-0.5 size-5 shrink-0" }) : _jsx(CircleCheck, { "aria-hidden": true, className: "mt-0.5 size-5 shrink-0" }), _jsxs("div", { children: [_jsx("h3", { ref: headingRef, tabIndex: -1, className: "text-[15px] font-semibold text-fg outline-none", children: title }), _jsx("p", { className: "mt-0.5 text-sm text-fg tabular", children: t("reportSummary", { ok: format.number(report.ok), failed: format.number(report.failed.length), skipped: format.number(report.skipped) }) })] })] }), report.failed.length ? (_jsx("div", { className: "overflow-auto rounded-ui-lg border border-line", children: _jsxs("table", { className: "w-full text-[13px]", children: [_jsx("caption", { className: "px-3 py-2 text-start text-[13px] font-medium text-fg", children: t("failedRows") }), _jsx("thead", { children: _jsxs("tr", { className: "border-y border-line text-[11px] text-fg-subtle", children: [_jsx("th", { scope: "col", className: "px-3 py-1.5 text-start font-medium", children: t("row") }), fields.slice(0, 3).map((f) => (_jsx("th", { scope: "col", className: "px-3 py-1.5 text-start font-medium", children: f.label }, f.id))), _jsx("th", { scope: "col", className: "px-3 py-1.5 text-start font-medium", children: t("error") })] }) }), _jsx("tbody", { children: report.failed.slice(0, 50).map((f) => (_jsxs("tr", { className: "border-b border-line last:border-0", children: [_jsx("td", { className: "px-3 py-1.5 font-mono text-[11px] text-fg-subtle tabular", children: f.row }), fields.slice(0, 3).map((c) => (_jsx("td", { className: "px-3 py-1.5 text-fg", children: f.raw[c.id] }, c.id))), _jsx("td", { className: "px-3 py-1.5 text-danger", children: f.error })] }, f.row))) })] }) })) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [report.failed.length ? (_jsxs(Button, { variant: "secondary", onClick: onDownload, children: [_jsx(Download, {}), " ", t("downloadFailed")] })) : null, _jsxs(Button, { variant: "ghost", onClick: onAgain, children: [_jsx(RotateCcw, {}), " ", t("again")] }), onDone ? (_jsx(Button, { variant: "primary", className: "ms-auto", onClick: onDone, children: t("done") })) : null] })] }));
+}
+export { importCellMessages };

package/dist/business/index.d.ts

@@ -0,0 +1,11 @@
+export { LineItems, LineItemsSummary, lineItemsLabels, type LineItemsProps, type LineItemsSummaryProps, type LineItemsLabels, type LineItemColumn, } from "./line-items.js";
+export { computeLineTotals, createLineItem, createLineId, isLineValid, trLineTaxPack, vatLineTaxPack, type LineItem, type LineDiscount, type LineDiscountType, type LineTaxPack, type LineTaxRate, type LineWithholding, type LineResult, type LineTotals, type ComputeLineTotalsOptions, } from "./line-items-core.js";
+export { MultiStepForm, MultiStepFormStepper, MultiStepFormStep, MultiStepFormReview, MultiStepFormFooter, useMultiStepForm, multiStepFormLabels, type MultiStepFormProps, type MultiStepFormStepperProps, type MultiStepFormStepProps, type MultiStepFormReviewProps, type MultiStepFormReviewSection, type MultiStepFormFooterProps, type MultiStepFormLabels, type MultiStepStatus, type StepDef, } from "./multi-step-form.js";
+export { ApprovalFlow, ApprovalStage, ApprovalSummary, ApprovalActions, approvalFlowLabels, type ApprovalFlowProps, type ApprovalStageProps, type ApprovalSummaryProps, type ApprovalActionsProps, type ApprovalFlowLabels, type ApprovalStageData, type ApprovalStageStatus, type ApprovalApprover, type ApprovalDecision, type ApprovalDecisionValue, } from "./approval-flow.js";
+export { ImportWizard, ImportMapping, ImportReview, importWizardLabels, type ImportWizardProps, type ImportMappingProps, type ImportReviewProps, type ImportWizardLabels, type ImportContext, type ImportResult, type ImportReport, type ImportStrategy, } from "./import-wizard.js";
+export { sniffCsv, sniffDelimiter, decodeText, looksGarbled, parseCsv, readXlsx, autoMap, parseCell, parseDateCell, validateImport, validateImportRow, applyTemplate, mappingToTemplate, importCellMessages, type ImportField, type ImportFieldType, type ImportSheet, type ImportRowResult, type ImportCellMessages, type CsvEncoding, type CsvSniff, type ParsedCell, type MappingTemplate, type ValidateImportOptions, } from "./import-core.js";
+export { ExportDialog, ExportJobStatus, QuickExportButton, exportLabels, type ExportDialogProps, type ExportJobStatusProps, type QuickExportButtonProps, type ExportLabels, type ExportRequest, type ExportResult, type ExportJobState, type ExportScope, } from "./export.js";
+export { exportToBlob, toExportMatrix, exportFilename, downloadBlob, maskValue, type ExportColumn, type ExportFormat, type CsvExportOptions, type ExportToBlobOptions, } from "./export-core.js";
+export { SetupChecklist, SetupChecklistLauncher, setupChecklistLabels, type SetupChecklistProps, type SetupChecklistLauncherProps, type SetupChecklistLabels, type SetupItem, type SetupItemStatus, } from "./setup-checklist.js";
+export { PermissionMatrix, PermissionMatrixCell, PermissionDiff, PermissionCompare, permissionMatrixLabels, type PermissionMatrixProps, type PermissionMatrixCellProps, type PermissionDiffProps, type PermissionCompareProps, type PermissionMatrixLabels, type PermissionResource, type PermissionAction, } from "./permission-matrix.js";
+export { diffPermissions, applyDependencies, effectiveLevel, scopeRank, isGranted, setMany, setPermission, SCOPE_ORDER, type PermissionScope, type PermissionLevel, type PermissionValue, type PermissionDependency, type PermissionChange, } from "./permission-core.js";

package/dist/business/index.js

@@ -0,0 +1,20 @@
+// Public API of @vamos-ui/react/business — line items, flows & wizards, permission matrix.
+// Heavy parsers (papaparse, read-excel-file, write-excel-file) load lazily on first use.
+// Line items
+export { LineItems, LineItemsSummary, lineItemsLabels, } from "./line-items.js";
+export { computeLineTotals, createLineItem, createLineId, isLineValid, trLineTaxPack, vatLineTaxPack, } from "./line-items-core.js";
+// Multi-step form
+export { MultiStepForm, MultiStepFormStepper, MultiStepFormStep, MultiStepFormReview, MultiStepFormFooter, useMultiStepForm, multiStepFormLabels, } from "./multi-step-form.js";
+// Approval flow
+export { ApprovalFlow, ApprovalStage, ApprovalSummary, ApprovalActions, approvalFlowLabels, } from "./approval-flow.js";
+// Import wizard
+export { ImportWizard, ImportMapping, ImportReview, importWizardLabels, } from "./import-wizard.js";
+export { sniffCsv, sniffDelimiter, decodeText, looksGarbled, parseCsv, readXlsx, autoMap, parseCell, parseDateCell, validateImport, validateImportRow, applyTemplate, mappingToTemplate, importCellMessages, } from "./import-core.js";
+// Export
+export { ExportDialog, ExportJobStatus, QuickExportButton, exportLabels, } from "./export.js";
+export { exportToBlob, toExportMatrix, exportFilename, downloadBlob, maskValue, } from "./export-core.js";
+// Setup checklist
+export { SetupChecklist, SetupChecklistLauncher, setupChecklistLabels, } from "./setup-checklist.js";
+// Permission matrix
+export { PermissionMatrix, PermissionMatrixCell, PermissionDiff, PermissionCompare, permissionMatrixLabels, } from "./permission-matrix.js";
+export { diffPermissions, applyDependencies, effectiveLevel, scopeRank, isGranted, setMany, setPermission, SCOPE_ORDER, } from "./permission-core.js";