nuxt-ui-tools 1.12.0 → 1.13.0

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-value-mapping.d.vue.ts

@@ -0,0 +1,27 @@
+import type { SpreadsheetImporter, SpreadsheetRecognizedValue, SpreadsheetValueAnswer, SpreadsheetValueQuestion } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** `open`: only values without an answer; renders nothing when there are none. */
+    only?: 'open';
+    /** Hides the values found in the lists. */
+    noRecognized?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        questions: readonly SpreadsheetValueQuestion[];
+        recognized: readonly SpreadsheetRecognizedValue[];
+        answer: (question: SpreadsheetValueQuestion, answer: SpreadsheetValueAnswer) => void;
+    }) => unknown;
+    question?: (props: {
+        question: SpreadsheetValueQuestion;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-value-mapping.vue

@@ -0,0 +1,162 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, shallowRef } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+import SpreadsheetImportValueRow from "../internal/spreadsheet-import-value-row.vue";
+const props = defineProps({
+  importer: { type: Object, required: false },
+  only: { type: String, required: false },
+  noRecognized: { type: Boolean, required: false }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const showRecognized = shallowRef(false);
+const questions = computed(
+  () => props.only === "open" ? importer.value.values.open : importer.value.values.questions
+);
+function scopeLabel(scope) {
+  const conditions = scope.dependsOn.map(
+    (entry) => t("spreadsheet.values.condition", { label: entry.label, values: entry.values.join(", ") })
+  ).join(" \xB7 ");
+  return conditions ? t("spreadsheet.values.scope", { conditions }) : "";
+}
+const groups = computed(() => {
+  const list = [];
+  for (const question of questions.value) {
+    let group = list.find((entry) => entry.field === question.field);
+    if (!group) {
+      group = {
+        field: question.field,
+        header: question.header,
+        label: question.fieldLabel,
+        scopes: []
+      };
+      list.push(group);
+    }
+    const id = question.scope?.id ?? "";
+    const scope = group.scopes.find((entry) => entry.id === id);
+    if (scope) scope.questions.push(question);
+    else
+      group.scopes.push({
+        id,
+        label: question.scope ? scopeLabel(question.scope) : "",
+        questions: [question]
+      });
+  }
+  return list;
+});
+const labels = computed(
+  () => new Map(importer.value.columns.fields.map((field) => [field.path, field.label]))
+);
+function answer(question, value) {
+  importer.value.values.answer(question, value);
+}
+function search(field) {
+  return (text) => importer.value.values.search(field, text);
+}
+</script>
+
+<template>
+  <div
+    v-if="importer.file.loaded && (only !== 'open' || questions.length)"
+    data-spreadsheet-value-mapping
+    class="grid gap-5"
+  >
+    <slot :questions="questions" :recognized="importer.values.recognized" :answer="answer">
+      <p v-if="importer.values.loading" class="flex items-center gap-2 text-sm text-muted">
+        <span
+          class="size-3.5 animate-spin rounded-full border-2 border-accented border-t-primary"
+        />
+        {{ t("spreadsheet.values.loading") }}
+      </p>
+      <section v-for="group in groups" :key="group.field" class="grid gap-2">
+        <div class="flex flex-wrap items-baseline gap-x-2">
+          <h4 class="text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase">
+            {{ group.label }}
+          </h4>
+          <span v-if="group.header" class="text-xs text-dimmed">· « {{ group.header }} »</span>
+        </div>
+        <div
+          class="divide-y divide-default overflow-hidden rounded-xl border border-default bg-default"
+        >
+          <div
+            class="hidden grid-cols-[minmax(0,1fr)_4.5rem_minmax(0,1.15fr)_6.5rem] gap-x-4 bg-elevated/50 px-4 py-2 text-[11.5px] font-medium text-muted sm:grid"
+          >
+            <span>{{ t("spreadsheet.values.value") }}</span>
+            <span>{{ t("spreadsheet.values.rows") }}</span>
+            <span>{{ t("spreadsheet.values.answer") }}</span>
+            <span />
+          </div>
+          <template v-for="scope in group.scopes" :key="scope.id">
+            <div
+              v-if="scope.label"
+              data-spreadsheet-value-scope
+              class="flex items-center gap-2 bg-elevated/30 px-4 py-1.5 text-xs font-medium text-toned"
+            >
+              <UIcon name="i-lucide-split" class="size-3.5 shrink-0 text-dimmed" />
+              <span class="truncate">{{ scope.label }}</span>
+            </div>
+            <template v-for="question in scope.questions" :key="question.id">
+              <slot name="question" :question="question">
+                <SpreadsheetImportValueRow
+                  :question="question"
+                  :choices="question.choices"
+                  :search="search(question.field)"
+                  @answer="(value2) => answer(question, value2)"
+                />
+              </slot>
+            </template>
+          </template>
+        </div>
+      </section>
+      <div
+        v-if="!groups.length && only !== 'open'"
+        class="flex items-center gap-3 rounded-xl border border-default bg-default px-4 py-3.5"
+      >
+        <span
+          class="grid size-8 shrink-0 place-items-center rounded-full bg-success/10 text-success"
+        >
+          <UIcon name="i-lucide-check" class="size-4" />
+        </span>
+        <span class="font-medium text-highlighted">{{ t("spreadsheet.values.nothing") }}</span>
+      </div>
+      <div
+        v-if="!noRecognized && only !== 'open' && importer.values.recognized.length"
+        class="overflow-hidden rounded-xl border border-default bg-default"
+      >
+        <button
+          type="button"
+          class="flex w-full items-center gap-2 px-4 py-3 text-start text-sm font-medium text-toned hover:bg-elevated/60"
+          :aria-expanded="showRecognized"
+          @click="showRecognized = !showRecognized"
+        >
+          <UIcon
+            name="i-lucide-chevron-right"
+            class="size-4 text-dimmed transition-transform"
+            :class="showRecognized ? 'rotate-90' : ''"
+          />
+          {{ t("spreadsheet.values.recognized", { count: importer.values.recognized.length }) }}
+        </button>
+        <ul v-if="showRecognized" class="divide-y divide-default border-t border-default">
+          <li
+            v-for="value in importer.values.recognized"
+            :key="`${value.field}::${value.scope ?? ''}::${value.value}`"
+            class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-0.5 px-4 py-2.5 text-sm sm:grid-cols-[minmax(0,10rem)_minmax(0,1fr)_minmax(0,1fr)_auto]"
+          >
+            <span class="truncate text-xs text-dimmed">{{ labels.get(value.field) }}</span>
+            <span class="truncate font-medium text-highlighted">{{ value.value }}</span>
+            <span class="flex min-w-0 items-center gap-1.5 text-muted">
+              <UIcon name="i-lucide-arrow-right" class="size-3.5 shrink-0 text-dimmed" />
+              <span class="truncate">{{ value.option.label }}</span>
+            </span>
+            <span class="text-xs text-dimmed tabular-nums">{{
+              t("spreadsheet.values.rowCount", { count: value.rows.length })
+            }}</span>
+          </li>
+        </ul>
+      </div>
+    </slot>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-value-mapping.vue.d.ts

@@ -0,0 +1,27 @@
+import type { SpreadsheetImporter, SpreadsheetRecognizedValue, SpreadsheetValueAnswer, SpreadsheetValueQuestion } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** `open`: only values without an answer; renders nothing when there are none. */
+    only?: 'open';
+    /** Hides the values found in the lists. */
+    noRecognized?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        questions: readonly SpreadsheetValueQuestion[];
+        recognized: readonly SpreadsheetRecognizedValue[];
+        answer: (question: SpreadsheetValueQuestion, answer: SpreadsheetValueAnswer) => void;
+    }) => unknown;
+    question?: (props: {
+        question: SpreadsheetValueQuestion;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/spreadsheet/components/spreadsheet-import-root.d.vue.ts

@@ -0,0 +1,24 @@
+import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
+import type { SpreadsheetImporter, SpreadsheetSteps } from '../types/index.js';
+/**
+ * Provides an importer (and its steps, for a wizard) to every `SpreadsheetImport*` part inside.
+ * Renders nothing of its own.
+ */
+type __VLS_Props = {
+    importer: SpreadsheetImporter;
+    steps?: SpreadsheetSteps;
+    locale?: UiToolsLocale<UiToolsMessages>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/spreadsheet/components/spreadsheet-import-root.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from "vue";
+import { provideUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
+import { provideSpreadsheetImport } from "../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: true },
+  steps: { type: Object, required: false },
+  locale: { type: Object, required: false }
+});
+provideUiToolsLocale(useUiToolsLocaleRef(computed(() => props.locale)));
+provideSpreadsheetImport({
+  get importer() {
+    return props.importer;
+  },
+  get steps() {
+    return props.steps ?? null;
+  }
+});
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/spreadsheet/components/spreadsheet-import-root.vue.d.ts

@@ -0,0 +1,24 @@
+import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
+import type { SpreadsheetImporter, SpreadsheetSteps } from '../types/index.js';
+/**
+ * Provides an importer (and its steps, for a wizard) to every `SpreadsheetImport*` part inside.
+ * Renders nothing of its own.
+ */
+type __VLS_Props = {
+    importer: SpreadsheetImporter;
+    steps?: SpreadsheetSteps;
+    locale?: UiToolsLocale<UiToolsMessages>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/spreadsheet/components/spreadsheet-import.d.vue.ts

@@ -1,18 +1,33 @@
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import type { SpreadsheetComponentApi } from './types.js';
+import type { SpreadsheetImporter, SpreadsheetStep } from '../types/index.js';
+/**
+ * A ready-made import wizard built from the public parts: file, columns and values when needed,
+ * review, and import. Pass `steps` to reorder them or add your own; a slot named after a step key
+ * replaces its content.
+ */
 type __VLS_Props = {
-    spreadsheet: SpreadsheetComponentApi;
+    importer: SpreadsheetImporter;
+    steps?: readonly SpreadsheetStep[];
     title?: string;
-    description?: string;
-    onDownloadTemplate?: () => void;
     closable?: boolean;
-    mode?: 'inline' | 'fullscreen';
     locale?: UiToolsLocale<UiToolsMessages>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_28: string, __VLS_29: {
+    step: import("../types/index.js").SpreadsheetStepStatus;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/spreadsheet/components/spreadsheet-import.vue

@@ -1,277 +1,61 @@
 <script setup>
-import { computed, ref, nextTick, watch } from "vue";
-import { provideUiToolsLocale, useUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
-import { isNumber, isObject } from "#ui-tools/shared";
-import { resolveTextValue } from "#ui-tools/shared/utils/render";
-import { useSpreadsheetView } from "../composables/use-spreadsheet-view";
-import SpreadsheetImportFileBar from "./layout/spreadsheet-import-file-bar.vue";
-import SpreadsheetImportFooter from "./layout/spreadsheet-import-footer.vue";
-import SpreadsheetImportHeader from "./layout/spreadsheet-import-header.vue";
-import SpreadsheetImportSidebar from "./layout/spreadsheet-import-sidebar.vue";
-import SpreadsheetImportMatchingStep from "./steps/spreadsheet-import-matching-step.vue";
-import SpreadsheetImportReferencesStep from "./steps/spreadsheet-import-references-step.vue";
-import SpreadsheetImportReviewStep from "./steps/spreadsheet-import-review-step.vue";
-import SpreadsheetImportStructureStep from "./steps/spreadsheet-import-structure-step.vue";
-import SpreadsheetImportUploadStep from "./steps/spreadsheet-import-upload-step.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetSteps } from "../composables/use-spreadsheet-steps";
+import SpreadsheetImportRoot from "./spreadsheet-import-root.vue";
+import SpreadsheetImportStepNav from "./steps/spreadsheet-import-step-nav.vue";
+import SpreadsheetImportStep from "./steps/spreadsheet-import-step.vue";
+import SpreadsheetImportStepper from "./steps/spreadsheet-import-stepper.vue";
 const props = defineProps({
-  spreadsheet: { type: Object, required: true },
+  importer: { type: Object, required: true },
+  steps: { type: Array, required: false },
   title: { type: String, required: false },
-  description: { type: String, required: false },
-  onDownloadTemplate: { type: Function, required: false },
   closable: { type: Boolean, required: false },
-  mode: { type: String, required: false },
   locale: { type: Object, required: false }
 });
-const locale = useUiToolsLocaleRef(computed(() => props.locale));
-provideUiToolsLocale(locale);
-const { t } = useUiToolsLocale(locale);
 const emit = defineEmits(["close"]);
-const view = useSpreadsheetView({
-  hasReferences: () => props.spreadsheet.referenceResolutions.value.length > 0,
-  stepConfig: () => props.spreadsheet.schema.value.steps,
-  t
-});
-const workspaceTitle = computed(
-  () => props.title ?? humanizeKey(props.spreadsheet.schema.value.importKey)
-);
-const workspaceDescription = computed(() => props.description);
-const { activeStep, activeStepIndex, steps, goToPrevStep, goToNextStep } = view;
-const currentStep = computed(
-  () => steps.value.find((step) => step.value === activeStep.value) ?? steps.value[0]
-);
-const stageTitle = computed(() => {
-  if (activeStep.value === "upload") {
-    return resolveTextValue(
-      props.spreadsheet.schema.value.steps?.upload?.title,
-      t("spreadsheet.steps.upload.stageTitle")
-    );
-  }
-  if (activeStep.value === "structure") {
-    return resolveTextValue(
-      props.spreadsheet.schema.value.steps?.structure?.title,
-      t("spreadsheet.steps.structure.stageTitle")
-    );
-  }
-  return currentStep.value?.title ?? humanizeKey(props.spreadsheet.schema.value.importKey);
-});
-const stageDescription = computed(() => currentStep.value?.description ?? "");
-const renderMode = computed(() => props.mode ?? "inline");
-const isFullscreen = computed(() => renderMode.value === "fullscreen");
-const isClosable = computed(() => props.closable ?? false);
-const isPreparingNextStep = ref(false);
-const hasWorkbook = computed(() => Boolean(props.spreadsheet.workbook.value));
-const hasHeaders = computed(() => props.spreadsheet.headers.value.length > 0);
-function getSchemaMaxRecords(schema) {
-  if ("file" in schema && schema.file && isObject(schema.file) && "maxRecords" in schema.file) {
-    return isNumber(schema.file.maxRecords) ? schema.file.maxRecords : void 0;
-  }
-  if ("source" in schema && schema.source && isObject(schema.source) && "maxRecords" in schema.source) {
-    return isNumber(schema.source.maxRecords) ? schema.source.maxRecords : void 0;
-  }
-  return void 0;
-}
-const canGoNext = computed(() => {
-  if (activeStep.value === "upload") {
-    return hasWorkbook.value;
-  }
-  if (activeStep.value === "structure") {
-    return hasWorkbook.value && hasHeaders.value;
-  }
-  if (activeStep.value === "matching") {
-    return hasWorkbook.value && hasHeaders.value;
-  }
-  if (activeStep.value === "references") {
-    return hasWorkbook.value && hasHeaders.value;
-  }
-  return false;
-});
-const fileName = computed(() => props.spreadsheet.workbook.value?.fileName);
-const maxRecords = computed(() => getSchemaMaxRecords(props.spreadsheet.schema.value) ?? Infinity);
-const importableRowCount = computed(
-  () => Math.min(props.spreadsheet.rowSummary.value.totalRows, maxRecords.value)
-);
-const overflowRowCount = computed(
-  () => Math.max(props.spreadsheet.rowSummary.value.totalRows - importableRowCount.value, 0)
-);
-const sidebarItems = computed(
-  () => steps.value.map((step, index) => ({
-    ...step,
-    disabled: step.value !== "upload" && !hasWorkbook.value,
-    status: index < activeStepIndex.value ? "done" : step.value === activeStep.value ? "active" : "pending"
-  }))
-);
-function humanizeKey(value) {
-  return value.split(".").at(-1)?.replaceAll(/([a-z0-9])([A-Z])/gu, "$1 $2").replaceAll(/[_-]+/gu, " ").replaceAll(/\b\w/gu, (char) => char.toUpperCase()) ?? value;
-}
-const actionHint = computed(() => {
-  if (activeStep.value === "structure") {
-    return t("spreadsheet.common.clickToChangeHeaderRow");
-  }
-  if (activeStep.value === "references") {
-    return t("spreadsheet.common.referencesStepHint");
-  }
-  return void 0;
-});
-const primaryActionLabel = computed(() => {
-  if (activeStep.value === "review") {
-    return t("spreadsheet.common.importRows", { count: importableRowCount.value });
-  }
-  return t("spreadsheet.common.continue");
-});
-const primaryActionColor = computed(
-  () => activeStep.value === "review" ? "success" : "primary"
-);
-const primaryActionBusyLabel = computed(() => t("spreadsheet.common.preparingReview"));
-function getNextStepValue() {
-  return steps.value[activeStepIndex.value + 1]?.value;
-}
-function waitForPaint() {
-  return new Promise(
-    (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
-  );
-}
-async function handlePrimaryAction() {
-  if (activeStep.value === "review") {
-    void props.spreadsheet.refresh();
-    return;
-  }
-  if (!canGoNext.value) {
-    return;
-  }
-  const nextStep = getNextStepValue();
-  if (nextStep === "review") {
-    isPreparingNextStep.value = true;
-    await nextTick();
-    await waitForPaint();
-  }
-  goToNextStep();
-  if (nextStep === "review") {
-    await nextTick();
-    isPreparingNextStep.value = false;
-  }
-}
-function handleClose() {
-  emit("close");
-}
-watch(hasWorkbook, (nextHasWorkbook) => {
-  if (!nextHasWorkbook) {
-    return;
-  }
-  if (activeStep.value !== "upload") {
-    return;
-  }
-  goToNextStep();
-});
+const { t } = useUiToolsLocale();
+const wizard = useSpreadsheetSteps(props.importer, props.steps);
 </script>
 
 <template>
-  <div
-    class="grid h-full overflow-hidden bg-default lg:grid-cols-[320px_minmax(0,1fr)]"
-    :class="
-  isFullscreen ? 'min-h-full' : 'min-h-[44rem] rounded-[var(--ui-radius)] border border-default/70 shadow-sm'
-"
-  >
-    <SpreadsheetImportSidebar
-      :title="workspaceTitle"
-      :description="workspaceDescription"
-      :items="sidebarItems"
-    />
-
-    <div class="grid min-h-0 grid-rows-[minmax(0,1fr)_auto] bg-default">
-      <div
-        class="relative min-h-0"
-        :class="
-  activeStep === 'matching' || activeStep === 'review' ? 'overflow-hidden' : 'overflow-y-auto'
-"
-      >
-        <div
-          v-if="isPreparingNextStep"
-          class="absolute inset-0 z-10 flex items-center justify-center bg-default/72 backdrop-blur-sm"
-        >
-          <div
-            class="flex items-center gap-3 rounded-[var(--ui-radius)] border border-default/70 bg-default px-4 py-3 shadow-sm"
-          >
-            <div
-              class="size-4 animate-spin rounded-full border-2 border-default border-t-primary"
-            />
-            <div class="grid gap-0.5">
-              <span class="text-sm font-medium text-highlighted">{{ primaryActionBusyLabel }}</span>
-              <span class="text-xs text-muted">{{
-                t("spreadsheet.common.preparingReviewDescription")
-              }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="grid px-6 py-5 lg:px-10 lg:py-6"
-          :class="
-  activeStep === 'matching' || activeStep === 'review' ? 'h-full grid-rows-[auto_minmax(0,1fr)] gap-4' : 'gap-4'
-"
-        >
-          <div class="grid gap-3" :class="activeStep === 'upload' ? '' : 'pb-2'">
-            <SpreadsheetImportHeader
-              :title="stageTitle"
-              :description="stageDescription"
-              :closable="isClosable"
-              @close="handleClose"
-            />
-
-            <SpreadsheetImportFileBar
-              v-if="activeStep !== 'upload'"
-              :file-name="fileName"
-              :total-sheets="spreadsheet.workbook.value?.sheets.length ?? 0"
-              :row-count="spreadsheet.rows.value.length"
-              :has-workbook="hasWorkbook"
-            />
-          </div>
-
-          <SpreadsheetImportUploadStep
-            v-if="activeStep === 'upload'"
-            :spreadsheet="spreadsheet"
-            :on-download-template="onDownloadTemplate"
+  <SpreadsheetImportRoot :importer="importer" :steps="wizard" :locale="locale">
+    <div
+      data-spreadsheet-import
+      class="grid min-w-0 overflow-hidden rounded-xl border border-default bg-default"
+    >
+      <div class="grid gap-5 px-5 pt-5 sm:px-7">
+        <div class="flex min-w-0 items-center gap-3">
+          <h2 class="truncate text-base font-semibold text-highlighted">
+            {{ title ?? t("spreadsheet.steps.submit") }}
+          </h2>
+          <span v-if="importer.file.name" class="hidden truncate text-sm text-muted sm:inline">{{
+            importer.file.name
+          }}</span>
+          <UButton
+            v-if="closable"
+            class="ms-auto"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            square
+            icon="i-lucide-x"
+            :aria-label="t('spreadsheet.nav.close')"
+            @click="emit('close')"
           />
-
-          <SpreadsheetImportStructureStep
-            v-else-if="activeStep === 'structure'"
-            :spreadsheet="spreadsheet"
-          />
-
-          <SpreadsheetImportMatchingStep
-            v-else-if="activeStep === 'matching'"
-            :spreadsheet="spreadsheet"
-          />
-
-          <SpreadsheetImportReferencesStep
-            v-else-if="activeStep === 'references'"
-            :spreadsheet="spreadsheet"
-          />
-
-          <SpreadsheetImportReviewStep v-else :spreadsheet="spreadsheet" />
         </div>
+        <SpreadsheetImportStepper />
+      </div>
+      <div class="min-w-0 px-5 py-6 sm:px-7">
+        <SpreadsheetImportStep headings>
+          <template v-for="(_, name) in $slots" #[name]="scope">
+            <slot :name="name" v-bind="scope" />
+          </template>
+        </SpreadsheetImportStep>
+      </div>
+      <div class="border-t border-default bg-elevated/40 px-5 py-4 sm:px-7">
+        <SpreadsheetImportStepNav :closable="closable" @close="emit('close')" />
       </div>
-
-      <SpreadsheetImportFooter
-        v-if="activeStep !== 'upload'"
-        :hint="actionHint"
-        :show-previous="activeStep !== 'upload'"
-        :previous-label="t('spreadsheet.common.previous')"
-        :primary-label="primaryActionLabel"
-        :primary-disabled="activeStep !== 'review' && !canGoNext"
-        :primary-loading="isPreparingNextStep"
-        :primary-color="primaryActionColor"
-        :primary-icon="activeStep === 'review' ? 'i-lucide-check' : 'i-lucide-arrow-right'"
-        :show-export="activeStep === 'review' && overflowRowCount > 0"
-        :export-label="t('spreadsheet.common.exportDiscardedRows', { count: overflowRowCount })"
-        :meta-text="
-  t('spreadsheet.common.importSummary', {
-    importable: importableRowCount,
-    total: spreadsheet.rowSummary.value.totalRows
-  })
-"
-        @previous="goToPrevStep"
-        @primary="handlePrimaryAction"
-      />
     </div>
-  </div>
+  </SpreadsheetImportRoot>
 </template>