nuxt-ui-tools 0.1.0

package/dist/runtime/spreadsheet/components/SpreadsheetImport.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { computed, ref, nextTick, watch } from "vue";
+import { provideUiToolsLocale, useUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useSpreadsheetView } from "../composables/use-spreadsheet-view";
+import SpreadsheetImportFileBar from "./layout/SpreadsheetImportFileBar.vue";
+import SpreadsheetImportFooter from "./layout/SpreadsheetImportFooter.vue";
+import SpreadsheetImportHeader from "./layout/SpreadsheetImportHeader.vue";
+import SpreadsheetImportSidebar from "./layout/SpreadsheetImportSidebar.vue";
+import SpreadsheetImportMatchingStep from "./steps/SpreadsheetImportMatchingStep.vue";
+import SpreadsheetImportReferencesStep from "./steps/SpreadsheetImportReferencesStep.vue";
+import SpreadsheetImportReviewStep from "./steps/SpreadsheetImportReviewStep.vue";
+import SpreadsheetImportStructureStep from "./steps/SpreadsheetImportStructureStep.vue";
+import SpreadsheetImportUploadStep from "./steps/SpreadsheetImportUploadStep.vue";
+const props = defineProps({
+  spreadsheet: { type: Object, required: true },
+  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 && typeof schema.file === "object" && "maxRecords" in schema.file)
+    return typeof schema.file.maxRecords === "number" ? schema.file.maxRecords : void 0;
+  if ("source" in schema && schema.source && typeof schema.source === "object" && "maxRecords" in schema.source)
+    return typeof schema.source.maxRecords === "number" ? 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)?.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\b\w/g, (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();
+});
+</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"
+          />
+
+          <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>
+      </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>
+</template>

package/dist/runtime/spreadsheet/components/SpreadsheetImport.vue.d.ts

@@ -0,0 +1,18 @@
+import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
+import type { SpreadsheetComponentApi } from './types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+    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, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportFileBar.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    fileName?: string;
+    totalSheets: number;
+    rowCount: number;
+    hasWorkbook: boolean;
+};
+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/layout/SpreadsheetImportFileBar.vue

@@ -0,0 +1,31 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+defineProps({
+  fileName: { type: String, required: false },
+  totalSheets: { type: Number, required: true },
+  rowCount: { type: Number, required: true },
+  hasWorkbook: { type: Boolean, required: true }
+});
+</script>
+
+<template>
+  <div
+    class="flex min-h-10 flex-wrap items-center gap-3 border border-default/70 bg-default px-4 py-2.5"
+  >
+    <template v-if="hasWorkbook">
+      <UIcon name="i-lucide-file-spreadsheet" class="size-4 text-success" />
+      <span class="font-mono text-xs font-medium text-highlighted">
+        {{ fileName ?? "Untitled workbook" }}
+      </span>
+      <div class="h-4 w-px bg-default/70" />
+      <span class="font-mono text-[11px] text-muted">
+        {{ totalSheets }} sheets · {{ rowCount }} rows
+      </span>
+    </template>
+
+    <template v-else>
+      <UIcon name="i-lucide-file-spreadsheet" class="size-[18px] text-muted" />
+      <span class="font-mono text-[11px] text-muted"> No file loaded </span>
+    </template>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportFileBar.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    fileName?: string;
+    totalSheets: number;
+    rowCount: number;
+    hasWorkbook: boolean;
+};
+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/layout/SpreadsheetImportFooter.d.vue.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    hint?: string;
+    showPrevious?: boolean;
+    previousLabel?: string;
+    primaryLabel: string;
+    primaryDisabled?: boolean;
+    primaryLoading?: boolean;
+    showExport?: boolean;
+    exportLabel?: string;
+    metaText?: string;
+    primaryColor?: 'primary' | 'success';
+    primaryIcon?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    primary: () => any;
+    previous: () => any;
+    export: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrimary?: (() => any) | undefined;
+    onPrevious?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportFooter.vue

@@ -0,0 +1,69 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+defineProps({
+  hint: { type: String, required: false },
+  showPrevious: { type: Boolean, required: false },
+  previousLabel: { type: String, required: false },
+  primaryLabel: { type: String, required: true },
+  primaryDisabled: { type: Boolean, required: false },
+  primaryLoading: { type: Boolean, required: false },
+  showExport: { type: Boolean, required: false },
+  exportLabel: { type: String, required: false },
+  metaText: { type: String, required: false },
+  primaryColor: { type: String, required: false },
+  primaryIcon: { type: String, required: false }
+});
+const emit = defineEmits(["previous", "primary", "export"]);
+const { t } = useUiToolsLocale();
+</script>
+
+<template>
+  <div
+    class="flex flex-wrap items-center justify-between gap-4 border-t border-default/70 bg-default px-6 py-4 lg:px-12"
+  >
+    <div class="flex flex-wrap items-center gap-4 text-sm text-muted">
+      <div v-if="hint" class="flex items-center gap-2">
+        <UIcon name="i-lucide-info" class="size-4" />
+        <span class="text-xs">{{ hint }}</span>
+      </div>
+
+      <template v-if="showExport">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-download"
+          :label="exportLabel"
+          @click="emit('export')"
+        />
+        <span v-if="metaText" class="font-mono text-[11px]">
+          {{ metaText }}
+        </span>
+      </template>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3">
+      <UButton
+        v-if="showPrevious"
+        :label="previousLabel ?? t('spreadsheet.common.previous')"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-arrow-left"
+        :disabled="primaryLoading"
+        @click="emit('previous')"
+      />
+
+      <UButton
+        :label="primaryLabel"
+        :color="primaryColor ?? 'primary'"
+        :icon="primaryIcon"
+        loading-icon="i-lucide-loader-circle"
+        trailing
+        :loading="primaryLoading"
+        :disabled="primaryDisabled || primaryLoading"
+        @click="emit('primary')"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportFooter.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    hint?: string;
+    showPrevious?: boolean;
+    previousLabel?: string;
+    primaryLabel: string;
+    primaryDisabled?: boolean;
+    primaryLoading?: boolean;
+    showExport?: boolean;
+    exportLabel?: string;
+    metaText?: string;
+    primaryColor?: 'primary' | 'success';
+    primaryIcon?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    primary: () => any;
+    previous: () => any;
+    export: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrimary?: (() => any) | undefined;
+    onPrevious?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportHeader.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    closable?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportHeader.vue

@@ -0,0 +1,36 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  closable: { type: Boolean, required: false }
+});
+const { t } = useUiToolsLocale();
+const emit = defineEmits(["close"]);
+</script>
+
+<template>
+  <div class="flex items-start justify-between gap-3">
+    <div class="grid gap-1">
+      <h1 class="text-[1.75rem] font-semibold leading-none tracking-[-0.06em] text-highlighted">
+        {{ title }}
+      </h1>
+      <p v-if="description" class="text-[13px] text-toned">
+        {{ description }}
+      </p>
+    </div>
+
+    <UButton
+      v-if="closable"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      square
+      icon="i-lucide-x"
+      :aria-label="t('spreadsheet.common.closeImport')"
+      :title="t('spreadsheet.common.closeImport')"
+      @click="emit('close')"
+    />
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportHeader.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    closable?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportSidebar.d.vue.ts

@@ -0,0 +1,9 @@
+import type { SpreadsheetStepItem } from '../types.js';
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    items: SpreadsheetStepItem[];
+};
+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/layout/SpreadsheetImportSidebar.vue

@@ -0,0 +1,63 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  items: { type: Array, required: true }
+});
+const { t } = useUiToolsLocale();
+</script>
+
+<template>
+  <aside
+    class="flex h-full flex-col gap-8 border-b border-default/70 bg-default px-7 py-8 lg:border-b-0 lg:border-r"
+  >
+    <div class="grid gap-2">
+      <h2 class="text-base font-semibold tracking-[-0.04em] text-highlighted">
+        {{ title }}
+      </h2>
+      <p v-if="description" class="max-w-[30ch] text-sm leading-6 text-toned">
+        {{ description }}
+      </p>
+    </div>
+
+    <div class="grid gap-3">
+      <p class="px-3 text-[11px] uppercase tracking-[0.18em] text-muted">
+        {{ t("spreadsheet.common.steps") }}
+      </p>
+
+      <div
+        v-for="(item, index) in items"
+        :key="item.value"
+        :class="item.disabled ? 'opacity-50' : ''"
+      >
+        <div
+          class="flex w-full items-start gap-4 px-4 py-3 text-left"
+          :class="
+  item.status === 'active' ? 'bg-elevated/80 text-default' : item.status === 'pending' ? 'text-toned' : 'text-default'
+"
+        >
+          <div
+            class="flex size-6 shrink-0 items-center justify-center font-mono text-[11px] font-semibold"
+            :class="
+  item.status === 'done' ? 'bg-success text-inverted' : item.status === 'active' ? 'bg-warning/20 text-warning' : 'border border-default/70 bg-default text-muted'
+"
+          >
+            <UIcon v-if="item.status === 'done'" name="i-lucide-check" class="size-3" />
+            <span v-else>{{ index + 1 }}</span>
+          </div>
+
+          <span
+            class="min-w-0 text-sm leading-6"
+            :class="
+  item.status === 'active' ? 'font-medium text-highlighted' : item.status === 'pending' ? 'text-toned' : 'text-highlighted'
+"
+          >
+            {{ item.title }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>

package/dist/runtime/spreadsheet/components/layout/SpreadsheetImportSidebar.vue.d.ts

@@ -0,0 +1,9 @@
+import type { SpreadsheetStepItem } from '../types.js';
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    items: SpreadsheetStepItem[];
+};
+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/shared/SpreadsheetObjectPreviewTable.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    rows: readonly Record<string, unknown>[];
+};
+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/shared/SpreadsheetObjectPreviewTable.vue

@@ -0,0 +1,64 @@
+<script setup>
+import UTable from "@nuxt/ui/components/Table.vue";
+import { computed } from "vue";
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function flattenRecord(value, prefix = "") {
+  return Object.entries(value).reduce((acc, [key, nextValue]) => {
+    const nextKey = prefix ? `${prefix}.${key}` : key;
+    if (Array.isArray(nextValue))
+      return {
+        ...acc,
+        [nextKey]: nextValue.join(", ")
+      };
+    if (isRecord(nextValue))
+      return {
+        ...acc,
+        ...flattenRecord(nextValue, nextKey)
+      };
+    return {
+      ...acc,
+      [nextKey]: nextValue == null ? "" : String(nextValue)
+    };
+  }, {});
+}
+const props = defineProps({
+  rows: { type: Array, required: true }
+});
+const flattenedRows = computed(
+  () => props.rows.map((row, index) => ({
+    __rowLabel: index + 1,
+    ...flattenRecord(row)
+  }))
+);
+const columnKeys = computed(() => {
+  const keys = /* @__PURE__ */ new Set();
+  for (const row of flattenedRows.value) {
+    for (const key of Object.keys(row)) {
+      if (key === "__rowLabel") continue;
+      keys.add(key);
+    }
+  }
+  return Array.from(keys);
+});
+const columns = computed(() => [
+  {
+    accessorKey: "__rowLabel",
+    header: "#"
+  },
+  ...columnKeys.value.map((key) => ({
+    accessorKey: key,
+    header: key
+  }))
+]);
+</script>
+
+<template>
+  <UTable
+    :data="flattenedRows"
+    :columns="columns"
+    sticky="header"
+    class="border-t border-default/70"
+  />
+</template>