nuxt-ui-tools 0.1.0

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportReferencesStep.vue

@@ -0,0 +1,200 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import {
+  humanizeSpreadsheetKey,
+  resolveSpreadsheetDisplayLabel,
+  snakeCaseSpreadsheetKey
+} from "../../utils/display";
+import SpreadsheetReferencesAccordion from "./references/SpreadsheetReferencesAccordion.vue";
+import SpreadsheetReferencesSummary from "./references/SpreadsheetReferencesSummary.vue";
+const props = defineProps({
+  spreadsheet: { type: Object, required: true }
+});
+const internals = props.spreadsheet.__internals;
+const expandedResolutionKey = ref(void 0);
+function getSourceLabel(sourceField) {
+  const staticColumn = internals.rows.staticColumns.value.find(
+    (column) => column.key === sourceField
+  );
+  if (staticColumn)
+    return resolveSpreadsheetDisplayLabel(
+      staticColumn.label,
+      humanizeSpreadsheetKey(staticColumn.key)
+    );
+  return humanizeSpreadsheetKey(sourceField);
+}
+function getOutputLabel(outputField) {
+  return snakeCaseSpreadsheetKey(outputField);
+}
+function getBestScore(candidates) {
+  if (!candidates.length) return null;
+  return Math.round(Math.max(...candidates.map((candidate) => candidate.score)) * 100);
+}
+function getRowCountLabel(count) {
+  return `${count} row${count === 1 ? "" : "s"}`;
+}
+function getSelectItems(resolution) {
+  const recommendedOptions = resolution.candidates.filter((candidate) => candidate.score > 0).map((candidate) => ({
+    kind: "option",
+    value: candidate.value,
+    label: candidate.label,
+    description: `${Math.round(candidate.score * 100)}% match`
+  }));
+  const remainingOptions = resolution.candidates.filter((candidate) => candidate.score <= 0).map((candidate) => ({
+    kind: "option",
+    value: candidate.value,
+    label: candidate.label
+  }));
+  return [
+    ...recommendedOptions,
+    ...recommendedOptions.length && remainingOptions.length ? [
+      {
+        kind: "divider",
+        label: "Other options",
+        disabled: true
+      }
+    ] : [],
+    ...recommendedOptions.length ? remainingOptions : resolution.candidates.map((candidate) => ({
+      kind: "option",
+      value: candidate.value,
+      label: candidate.label,
+      description: candidate.score > 0 ? `${Math.round(candidate.score * 100)}% match` : void 0
+    }))
+  ];
+}
+const groupedColumns = computed(() => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const resolution of props.spreadsheet.referenceResolutions.value) {
+    const group = groups.get(resolution.referenceField) ?? [];
+    groups.set(resolution.referenceField, [...group, resolution]);
+  }
+  return Array.from(groups.entries()).map(([referenceField, items]) => {
+    const sourceField = items[0]?.sourceField ?? referenceField;
+    const outputField = items[0]?.outputField ?? referenceField;
+    const resolvedCount = items.filter((item) => item.status === "matched").length;
+    const unresolvedCount = items.length - resolvedCount;
+    return {
+      resolutionKey: referenceField,
+      sourceField,
+      outputField,
+      sourceLabel: getSourceLabel(sourceField),
+      outputLabel: getOutputLabel(outputField),
+      resolvedCount,
+      unresolvedCount,
+      progressWidth: `${Math.max(0, Math.min(100, items.length ? resolvedCount / items.length * 100 : 0))}%`,
+      items
+    };
+  });
+});
+const summaryItems = computed(() => [
+  {
+    key: "groups",
+    label: "Columns to reconcile",
+    value: groupedColumns.value.length,
+    barClass: "bg-muted"
+  },
+  {
+    key: "resolved",
+    label: "Values resolved",
+    value: props.spreadsheet.referenceResolutions.value.filter(
+      (resolution) => resolution.status === "matched"
+    ).length,
+    barClass: "bg-success"
+  },
+  {
+    key: "unresolved",
+    label: "Values to resolve",
+    value: props.spreadsheet.unresolvedReferenceResolutions.value.length,
+    barClass: "bg-warning"
+  },
+  {
+    key: "rows",
+    label: "Total rows",
+    value: props.spreadsheet.rowSummary.value.totalRows,
+    barClass: "bg-muted"
+  }
+]);
+const unresolvedGroupKeys = computed(
+  () => groupedColumns.value.filter((group) => group.unresolvedCount > 0).map((group) => group.resolutionKey)
+);
+function getNextExpandableKey(currentKey) {
+  const currentIndex = groupedColumns.value.findIndex((group) => group.resolutionKey === currentKey);
+  if (currentIndex < 0)
+    return unresolvedGroupKeys.value[0] ?? groupedColumns.value[0]?.resolutionKey;
+  for (let index = currentIndex + 1; index < groupedColumns.value.length; index += 1) {
+    const nextGroup = groupedColumns.value[index];
+    if (nextGroup?.unresolvedCount) return nextGroup.resolutionKey;
+  }
+  return unresolvedGroupKeys.value[0] ?? currentKey;
+}
+watch(
+  groupedColumns,
+  (nextGroups, previousGroups) => {
+    if (!nextGroups.length) {
+      expandedResolutionKey.value = void 0;
+      return;
+    }
+    if (!expandedResolutionKey.value) {
+      expandedResolutionKey.value = unresolvedGroupKeys.value[0] ?? nextGroups[0]?.resolutionKey;
+      return;
+    }
+    const currentGroup = nextGroups.find(
+      (group) => group.resolutionKey === expandedResolutionKey.value
+    );
+    if (!currentGroup) {
+      expandedResolutionKey.value = unresolvedGroupKeys.value[0] ?? nextGroups[0]?.resolutionKey;
+      return;
+    }
+    const previousGroup = previousGroups?.find(
+      (group) => group.resolutionKey === expandedResolutionKey.value
+    );
+    if (!previousGroup) return;
+    if (!previousGroup.unresolvedCount || currentGroup.unresolvedCount) return;
+    expandedResolutionKey.value = getNextExpandableKey(currentGroup.resolutionKey);
+  },
+  {
+    immediate: true
+  }
+);
+function getMetaTone(resolution) {
+  if (resolution.status === "matched") return null;
+  const bestScore = getBestScore(resolution.candidates);
+  if (bestScore === null) return { label: "No options available", class: "text-error" };
+  if (bestScore === 0) return null;
+  return { label: `Best match: ${bestScore}%`, class: "text-warning" };
+}
+function getResolutionBadge(resolution) {
+  if (resolution.status === "matched") return { label: "Resolved", color: "success" };
+  const bestScore = getBestScore(resolution.candidates);
+  if (bestScore === null) return { label: "No options", color: "error" };
+  return { label: "Needs review", color: "warning" };
+}
+function handleSelect(resolution, value) {
+  const candidate = resolution.candidates.find((entry) => entry.value === value);
+  if (!candidate) return;
+  props.spreadsheet.selectReference({
+    referenceField: resolution.referenceField,
+    sourceValue: resolution.sourceValue,
+    selectedValue: candidate.value,
+    selectedLabel: candidate.label
+  });
+}
+</script>
+
+<template>
+  <div class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-6">
+    <div class="grid gap-6">
+      <SpreadsheetReferencesSummary :items="summaryItems" />
+
+      <SpreadsheetReferencesAccordion
+        v-model="expandedResolutionKey"
+        :groups="groupedColumns"
+        :get-select-items="getSelectItems"
+        :get-resolution-badge="getResolutionBadge"
+        :get-meta-tone="getMetaTone"
+        :get-row-count-label="getRowCountLabel"
+        @select="({ resolution, value }) => handleSelect(resolution, value)"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportReferencesStep.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportReviewStep.d.vue.ts

@@ -0,0 +1,7 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportReviewStep.vue

@@ -0,0 +1,186 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UTable from "@nuxt/ui/components/Table.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import TableEmptyState from "../../../table/components/table/TableEmptyState.vue";
+import { useSpreadsheetReview } from "../../composables/use-spreadsheet-review";
+import SpreadsheetReviewInspection from "./review/SpreadsheetReviewInspection.vue";
+import SpreadsheetReviewOverflowAlert from "./review/SpreadsheetReviewOverflowAlert.vue";
+import SpreadsheetReviewStats from "./review/SpreadsheetReviewStats.vue";
+const props = defineProps({
+  spreadsheet: { type: Object, required: true }
+});
+const { t } = useUiToolsLocale();
+function getSchemaMaxRecords(schema) {
+  if ("file" in schema && schema.file && typeof schema.file === "object" && "maxRecords" in schema.file && typeof schema.file.maxRecords === "number")
+    return schema.file.maxRecords;
+  if ("source" in schema && schema.source && typeof schema.source === "object" && "maxRecords" in schema.source && typeof schema.source.maxRecords === "number")
+    return schema.source.maxRecords;
+  return void 0;
+}
+const maxRecords = computed(() => getSchemaMaxRecords(props.spreadsheet.schema.value) ?? Infinity);
+const review = useSpreadsheetReview({
+  resolvedRows: computed(() => props.spreadsheet.resolvedRows.value),
+  maxRecords
+});
+const tableHasRows = computed(() => review.visibleRows.value.length > 0);
+const summaryLimitText = computed(() => {
+  if (!Number.isFinite(maxRecords.value)) return void 0;
+  return t("spreadsheet.steps.review.importLimit", {
+    importable: Math.min(props.spreadsheet.resolvedRows.value.length, maxRecords.value),
+    total: props.spreadsheet.resolvedRows.value.length
+  });
+});
+function showIssueRows() {
+  review.setActiveTab("invalid");
+  review.closeInspection();
+}
+</script>
+
+<template>
+  <div class="grid min-h-0 h-full gap-4">
+    <SpreadsheetReviewOverflowAlert
+      v-if="review.hasOverflow.value"
+      :review-rows-length="props.spreadsheet.resolvedRows.value.length"
+      :max-records="maxRecords"
+      :overflow-count="review.overflowCount.value"
+      @auto-trim="review.setActiveTab('discarded')"
+    />
+
+    <SpreadsheetReviewInspection
+      v-if="review.inspectedRow.value"
+      :inspected-row="review.inspectedRow.value"
+      :table-columns="review.tableColumns.value"
+      :issue-rows-length="review.issueRows.value.length"
+      :inspected-issue-row-position="review.inspectedIssueRowPosition.value"
+      :format-cell="review.formatSpreadsheetCell"
+      :get-object-entries="review.getSpreadsheetObjectEntries"
+      :humanize-key="review.humanizeSpreadsheetKey"
+      :get-issue-badge="review.getIssueBadge"
+      :get-issue-value-tone="review.getIssueValueTone"
+      :get-issue-value="review.getIssueValue"
+      :get-issue-raw-value="review.getIssueRawValue"
+      :get-related-issue-count="review.getRelatedIssueCount"
+      :is-discarded="review.isDiscarded"
+      :is-manually-discarded="review.isManuallyDiscarded"
+      @close="review.closeInspection"
+      @prev="review.inspectPrevIssueRow"
+      @next="review.inspectNextIssueRow"
+      @discard-row="review.discardRow"
+      @restore-row="review.restoreRow"
+      @show-issue-rows="showIssueRows"
+    />
+
+    <div v-else class="grid min-h-0 h-full gap-4 grid-rows-[minmax(0,1fr)_auto]">
+      <div
+        class="grid min-h-0 h-full overflow-hidden rounded-[4px] border border-default/70 bg-default grid-rows-[auto_minmax(0,1fr)]"
+      >
+        <div class="grid gap-0">
+          <div
+            class="flex min-h-11 flex-wrap items-center justify-between gap-2 border-b border-default/70 px-4"
+          >
+            <div class="flex min-w-0 items-center gap-1">
+              <button
+                v-for="item in review.tabItems.value"
+                :key="item.key"
+                type="button"
+                class="h-10 border-b-2 px-3 text-[12px] font-medium transition-colors"
+                :class="
+  review.activeTab.value === item.key ? 'border-highlighted text-highlighted' : 'border-transparent text-muted hover:text-toned'
+"
+                @click="review.setActiveTab(item.key)"
+              >
+                {{ item.label }}
+              </button>
+            </div>
+
+            <div class="flex flex-wrap items-center gap-1.5">
+              <button
+                v-for="item in review.issueFilterItems.value"
+                :key="item.key"
+                type="button"
+                class="rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors"
+                :class="
+  review.issueFilter.value === item.key ? 'bg-elevated text-highlighted' : 'text-muted hover:bg-elevated/60 hover:text-toned'
+"
+                :disabled="
+  review.activeTab.value === 'valid' || review.activeTab.value === 'discarded'
+"
+                @click="review.setIssueFilter(item.key)"
+              >
+                {{ item.label }}
+              </button>
+            </div>
+          </div>
+
+          <div
+            v-if="review.selectedRowIndexes.value.length"
+            class="flex min-h-10 flex-wrap items-center gap-2 border-b border-default/70 bg-elevated/35 px-4 py-1.5"
+          >
+            <span class="font-mono text-[11px] text-muted">
+              {{
+                t("spreadsheet.steps.review.selected", {
+  count: review.selectedRowIndexes.value.length
+})
+              }}
+            </span>
+            <UButton
+              color="error"
+              variant="outline"
+              size="xs"
+              icon="i-lucide-trash-2"
+              :label="t('spreadsheet.steps.review.discard')"
+              :disabled="!review.canDiscardSelection.value"
+              @click="review.discardSelectedRows"
+            />
+            <UButton
+              color="neutral"
+              variant="outline"
+              size="xs"
+              icon="i-lucide-undo-2"
+              :label="t('spreadsheet.steps.review.restore')"
+              :disabled="!review.canRestoreSelection.value"
+              @click="review.restoreSelectedRows"
+            />
+          </div>
+        </div>
+
+        <div class="relative min-h-0 h-full overflow-hidden border-t border-default/70">
+          <UTable
+            :data="review.visibleRows.value"
+            :columns="review.reviewTableColumns.value"
+            :row-selection="review.rowSelection.value"
+            :get-row-id="(row) => String(row.index)"
+            sticky="header"
+            class="h-full min-h-0"
+            :on-select="(_event, row) => review.inspectRow(row.original.index)"
+            :meta="{
+  class: {
+    tr: (row) => review.getRowToneClass(row.original)
+  }
+}"
+            :ui="{
+  root: 'h-full overflow-auto',
+  base: 'min-w-max',
+  tr: 'cursor-pointer border-b border-default/40 text-[12px] transition-colors',
+  td: 'px-3 py-2 align-middle',
+  th: 'bg-elevated/45 px-3 py-2 text-[10px] uppercase tracking-[0.16em] text-muted'
+}"
+            :virtualize="{ enabled: tableHasRows, overscan: 10, estimateSize: () => 41 }"
+          />
+
+          <div
+            v-if="!tableHasRows"
+            class="pointer-events-none absolute inset-x-0 bottom-0 z-10 flex items-center justify-center"
+            style="top: 2.625rem"
+          >
+            <TableEmptyState min-height="20rem" />
+          </div>
+        </div>
+      </div>
+
+      <SpreadsheetReviewStats :items="review.stats.value" :limit-text="summaryLimitText" />
+    </div>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportReviewStep.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportStructureStep.d.vue.ts

@@ -0,0 +1,7 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportStructureStep.vue

@@ -0,0 +1,62 @@
+<script setup>
+import UAlert from "@nuxt/ui/components/Alert.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import SpreadsheetStructurePreviewTable from "./structure/SpreadsheetStructurePreviewTable.vue";
+import SpreadsheetStructureSheetList from "./structure/SpreadsheetStructureSheetList.vue";
+const props = defineProps({
+  spreadsheet: { type: Object, required: true }
+});
+const { t } = useUiToolsLocale();
+const activeSheet = computed(() => props.spreadsheet.activeSheet.value);
+const sheetItems = computed(
+  () => (props.spreadsheet.workbook.value?.sheets ?? []).map((sheet) => ({
+    label: sheet.name,
+    rowCount: Math.max(sheet.rows.length - 1, 0),
+    columnCount: Math.max(...sheet.rows.map((row) => row.length), 0)
+  }))
+);
+const previewRows = computed(
+  () => (activeSheet.value?.rows ?? []).map((row, index) => ({
+    absoluteIndex: index,
+    cells: row
+  }))
+);
+const previewColumnCount = computed(
+  () => Math.max(
+    ...previewRows.value.map((row) => row.cells.length),
+    props.spreadsheet.headers.value.length,
+    0
+  )
+);
+</script>
+
+<template>
+  <div class="grid h-full min-h-0 gap-6">
+    <UAlert
+      v-if="!spreadsheet.workbook.value"
+      color="warning"
+      variant="soft"
+      icon="i-lucide-triangle-alert"
+      :title="t('spreadsheet.steps.structure.loadWorkbookFirstTitle')"
+      :description="t('spreadsheet.steps.structure.loadWorkbookFirstDescription')"
+    />
+
+    <template v-else>
+      <div class="grid min-h-0 gap-6 lg:grid-cols-[240px_minmax(0,1fr)]">
+        <SpreadsheetStructureSheetList
+          :items="sheetItems"
+          :selected-sheet-name="spreadsheet.selection.value.sheetName"
+          @select="spreadsheet.setSheetName"
+        />
+
+        <SpreadsheetStructurePreviewTable
+          :rows="previewRows"
+          :column-count="previewColumnCount"
+          :selected-header-row-index="spreadsheet.selection.value.headerRowIndex"
+          @select-header="spreadsheet.setHeaderRowIndex"
+        />
+      </div>
+    </template>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportStructureStep.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportUploadStep.d.vue.ts

@@ -0,0 +1,8 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+    onDownloadTemplate?: () => void;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportUploadStep.vue

@@ -0,0 +1,76 @@
+<script setup>
+import UAlert from "@nuxt/ui/components/Alert.vue";
+import UFileUpload from "@nuxt/ui/components/FileUpload.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, ref, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+const props = defineProps({
+  spreadsheet: { type: Object, required: true },
+  onDownloadTemplate: { type: Function, required: false }
+});
+const { t } = useUiToolsLocale();
+const file = ref(null);
+function getSchemaAccept(schema) {
+  if ("file" in schema && schema.file && typeof schema.file === "object" && "accept" in schema.file && Array.isArray(schema.file.accept))
+    return schema.file.accept;
+  if ("source" in schema && schema.source && typeof schema.source === "object" && "accept" in schema.source && Array.isArray(schema.source.accept))
+    return schema.source.accept;
+  return void 0;
+}
+const accept = computed(
+  () => getSchemaAccept(props.spreadsheet.schema.value)?.join(",") ?? ".xlsx,.xls,.csv"
+);
+watch(file, (nextFile) => {
+  if (!nextFile) return;
+  props.spreadsheet.loadSource({
+    source: nextFile,
+    fileName: nextFile.name
+  });
+});
+</script>
+
+<template>
+  <div class="grid gap-6">
+    <UFileUpload
+      v-model="file"
+      :accept="accept"
+      variant="area"
+      color="neutral"
+      layout="list"
+      :label="t('spreadsheet.upload.dropzoneLabel')"
+      :description="t('spreadsheet.upload.dropzoneDescription')"
+      class="min-h-[20rem]"
+    >
+      <template #leading>
+        <UIcon name="i-lucide-upload" class="size-8 text-muted" />
+      </template>
+    </UFileUpload>
+
+    <UAlert
+      v-if="spreadsheet.sourceError.value"
+      color="error"
+      variant="soft"
+      icon="i-lucide-circle-alert"
+      :title="t('spreadsheet.upload.parsingFailed')"
+      :description="String(spreadsheet.sourceError.value)"
+    />
+
+    <div class="max-w-sm">
+      <button type="button" class="group text-left" @click="onDownloadTemplate?.()">
+        <UCard class="transition-colors group-hover:border-primary/50 group-hover:bg-elevated/60">
+          <div class="flex items-center gap-4">
+            <UIcon name="i-lucide-file-spreadsheet" class="size-5 text-toned" />
+            <div class="grid gap-0.5">
+              <h3 class="text-sm font-medium text-highlighted">
+                {{ t("spreadsheet.upload.downloadTemplate") }}
+              </h3>
+              <p class="text-xs text-muted">
+                {{ t("spreadsheet.upload.downloadTemplateDescription") }}
+              </p>
+            </div>
+          </div>
+        </UCard>
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportUploadStep.vue.d.ts

@@ -0,0 +1,8 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+    onDownloadTemplate?: () => void;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/matching/SpreadsheetMatchingSummary.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    items: Array<{
+        key: string;
+        label: string;
+        value: number;
+        tone: 'success' | 'warning' | 'error' | 'neutral';
+    }>;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/matching/SpreadsheetMatchingSummary.vue

@@ -0,0 +1,32 @@
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: true }
+});
+function getSummaryBarClass(tone) {
+  if (tone === "success") return "bg-success";
+  if (tone === "warning") return "bg-warning";
+  if (tone === "error") return "bg-error";
+  return "bg-muted";
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-6 border-b border-default/70 pb-1">
+    <div
+      v-for="item in props.items"
+      :key="item.key"
+      class="flex min-w-36 flex-1 items-center gap-4 py-2"
+    >
+      <div class="h-8 w-[3px]" :class="getSummaryBarClass(item.tone)" />
+
+      <div class="grid gap-0.5">
+        <span class="text-3xl font-semibold leading-none tracking-[-0.05em] text-highlighted">
+          {{ item.value }}
+        </span>
+        <span class="font-mono text-[11px] font-medium text-muted">
+          {{ item.label }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/steps/matching/SpreadsheetMatchingSummary.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    items: Array<{
+        key: string;
+        label: string;
+        value: number;
+        tone: 'success' | 'warning' | 'error' | 'neutral';
+    }>;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;