nuxt-ui-tools 1.12.0 → 1.13.0

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-expected-columns.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: false }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const fields = computed(() => importer.value.columns.fields.filter((field) => !field.from));
+const hasDynamic = computed(() => fields.value.some((field) => field.group?.dynamic));
+</script>
+
+<template>
+  <div v-if="fields.length" data-spreadsheet-expected-columns class="grid gap-2.5">
+    <div class="flex items-center gap-2">
+      <span class="text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase">
+        {{ t("spreadsheet.file.expected") }}
+      </span>
+      <span class="text-xs text-dimmed tabular-nums"
+        >· {{ t("spreadsheet.file.expectedCount", { count: fields.length }) }}</span
+      >
+      <span class="ms-auto"><slot name="actions" /></span>
+    </div>
+    <ul class="flex flex-wrap gap-1.5">
+      <li v-for="field in fields" :key="field.path" :title="field.description || field.label">
+        <slot name="column" :field="field">
+          <span
+            class="inline-flex h-6 items-center gap-1 rounded-md px-2 text-[12px] font-medium whitespace-nowrap"
+            :class="
+  field.group?.dynamic ? 'bg-primary/10 text-primary' : field.required ? 'bg-elevated text-toned ring-1 ring-default ring-inset' : 'text-muted ring-1 ring-default ring-inset'
+"
+          >
+            {{ field.name }}
+            <span v-if="!field.required && !field.group?.dynamic" class="font-normal text-dimmed">
+              · {{ t("spreadsheet.file.optional") }}
+            </span>
+          </span>
+        </slot>
+      </li>
+    </ul>
+    <p v-if="hasDynamic" class="text-xs text-dimmed">{{ t("spreadsheet.file.fromContext") }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+import type { SpreadsheetFieldState, SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    column?: (props: {
+        field: SpreadsheetFieldState;
+    }) => unknown;
+    actions?: () => 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/{shared/spreadsheet-object-preview-table.d.vue.ts → parts/spreadsheet-import-export-button.d.vue.ts}

@@ -1,6 +1,7 @@
-import type { SpreadsheetRecord } from '../../types/index.js';
+import type { SpreadsheetImporter } from '../../types/index.js';
 type __VLS_Props = {
-    rows: readonly SpreadsheetRecord[];
+    importer?: SpreadsheetImporter;
+    label?: string;
 };
 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;

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-export-button.vue

@@ -0,0 +1,34 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+import { downloadSpreadsheetBlob } from "../../utils";
+const props = defineProps({
+  importer: { type: Object, required: false },
+  label: { type: String, required: false }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const count = computed(() => importer.value.rows.invalid.length);
+function download() {
+  const base = importer.value.file.name.replace(/\.[^.]+$/u, "") || importer.value.schema.key;
+  downloadSpreadsheetBlob(
+    importer.value.rows.exportInvalid(),
+    `${base}-${t("spreadsheet.review.export").toLowerCase().replaceAll(" ", "-")}.xlsx`
+  );
+}
+</script>
+
+<template>
+  <UButton
+    v-if="count"
+    data-spreadsheet-export
+    color="neutral"
+    variant="outline"
+    size="sm"
+    icon="i-lucide-download"
+    :label="label ?? `${t('spreadsheet.review.export')} \xB7 ${count}`"
+    @click="download"
+  />
+</template>

package/dist/runtime/spreadsheet/components/{layout/spreadsheet-import-file-bar.vue.d.ts → parts/spreadsheet-import-export-button.vue.d.ts}

@@ -1,8 +1,7 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
 type __VLS_Props = {
-    fileName?: string;
-    totalSheets: number;
-    rowCount: number;
-    hasWorkbook: boolean;
+    importer?: SpreadsheetImporter;
+    label?: string;
 };
 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;

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

@@ -0,0 +1,17 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    actions?: (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/parts/spreadsheet-import-file-card.vue

@@ -0,0 +1,49 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: false }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const extension = computed(
+  () => importer.value.file.name.split(".").pop()?.toUpperCase().slice(0, 4) || "XLSX"
+);
+const summary = computed(
+  () => t("spreadsheet.file.summary", {
+    rows: importer.value.rows.all.length.toLocaleString(),
+    sheets: importer.value.file.sheets.length
+  })
+);
+</script>
+
+<template>
+  <div
+    v-if="importer.file.loaded"
+    data-spreadsheet-file-card
+    class="flex items-center gap-3.5 rounded-xl border border-default bg-default px-4 py-3"
+  >
+    <span
+      class="grid h-11 w-9.5 shrink-0 place-items-center rounded-md bg-success/10 text-[10px] font-bold tracking-wide text-success"
+    >
+      {{ extension }}
+    </span>
+    <div class="grid min-w-0">
+      <span class="truncate font-medium text-highlighted">{{ importer.file.name }}</span>
+      <span class="text-sm text-muted tabular-nums">{{ summary }}</span>
+    </div>
+    <div class="ms-auto flex shrink-0 items-center gap-2">
+      <slot name="actions" />
+      <UButton
+        color="neutral"
+        variant="outline"
+        size="sm"
+        icon="i-lucide-refresh-cw"
+        :label="t('spreadsheet.file.replace')"
+        @click="importer.file.clear()"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    actions?: (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/parts/spreadsheet-import-progress.d.vue.ts

@@ -0,0 +1,18 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    done?: (props: {
+        imported: number;
+    }) => 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-progress.vue

@@ -0,0 +1,101 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UProgress from "@nuxt/ui/components/Progress.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import {
+  useSpreadsheetImporter,
+  useSpreadsheetStepsContext
+} from "../../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: false }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const steps = useSpreadsheetStepsContext();
+const { t } = useUiToolsLocale();
+const submit = computed(() => importer.value.submit);
+const percent = computed(
+  () => submit.value.progress.total ? Math.round(submit.value.progress.done / submit.value.progress.total * 100) : 0
+);
+function retry() {
+  void importer.value.submit.retryRejected();
+}
+function tryAgain() {
+  void importer.value.submit.run();
+}
+function review() {
+  importer.value.review.setTab("invalid");
+  steps.value?.goTo("review");
+}
+</script>
+
+<template>
+  <div
+    v-if="submit.status !== 'idle'"
+    data-spreadsheet-progress
+    class="grid justify-items-center gap-3.5 py-6 text-center"
+  >
+    <template v-if="submit.status === 'running'">
+      <div class="text-4xl font-light tracking-tight text-highlighted tabular-nums">
+        {{
+          t("spreadsheet.progress.count", {
+  done: submit.progress.done,
+  total: submit.progress.total
+})
+        }}
+      </div>
+      <UProgress :model-value="percent" class="w-full max-w-md" />
+      <p class="text-muted">{{ t("spreadsheet.progress.running") }}</p>
+    </template>
+    <template v-else-if="submit.status === 'done'">
+      <span class="grid size-12 place-items-center rounded-full bg-success/10 text-success">
+        <UIcon name="i-lucide-check" class="size-6" />
+      </span>
+      <h3 class="text-xl font-semibold text-highlighted">
+        {{ t("spreadsheet.progress.done", { count: submit.imported.toLocaleString() }) }}
+      </h3>
+      <p v-if="!submit.rejected.length" class="text-muted">
+        {{ t("spreadsheet.progress.doneHint") }}
+      </p>
+      <div
+        v-else
+        class="grid max-w-md gap-2 rounded-xl border border-error/30 bg-error/4 px-4 py-3 text-start"
+      >
+        <b class="text-sm font-semibold text-error">{{
+          t("spreadsheet.progress.rejected", { count: submit.rejected.length })
+        }}</b>
+        <p class="text-sm text-muted">{{ t("spreadsheet.progress.rejectedHint") }}</p>
+        <div class="flex flex-wrap gap-2">
+          <UButton
+            size="sm"
+            color="neutral"
+            variant="outline"
+            :label="t('spreadsheet.progress.retry')"
+            @click="retry"
+          />
+          <UButton
+            v-if="steps"
+            size="sm"
+            color="neutral"
+            variant="ghost"
+            :label="t('spreadsheet.progress.review')"
+            @click="review"
+          />
+        </div>
+      </div>
+      <slot name="done" :imported="submit.imported" />
+    </template>
+    <template v-else>
+      <span class="grid size-12 place-items-center rounded-full bg-error/10 text-error">
+        <UIcon name="i-lucide-circle-x" class="size-6" />
+      </span>
+      <h3 class="text-lg font-semibold text-highlighted">{{ t("spreadsheet.progress.error") }}</h3>
+      <p v-if="submit.error instanceof Error" class="max-w-md text-sm text-muted">
+        {{ submit.error.message }}
+      </p>
+      <UButton :label="t('spreadsheet.progress.tryAgain')" @click="tryAgain" />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    done?: (props: {
+        imported: number;
+    }) => 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-row-inspector.d.vue.ts

@@ -0,0 +1,22 @@
+import type { SpreadsheetImporter, SpreadsheetRowIssue } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    height?: string;
+};
+type __VLS_Slots = {
+    issue?: (props: {
+        issue: SpreadsheetRowIssue;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: string;
+    importer: SpreadsheetImporter;
+}, {}, {}, {}, 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-row-inspector.vue

@@ -0,0 +1,276 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, shallowRef } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import {
+  useSpreadsheetImporter,
+  useSpreadsheetStepsContext
+} from "../../composables/use-spreadsheet-import-context";
+import SpreadsheetImportCellEditor from "../internal/spreadsheet-import-cell-editor.vue";
+import SpreadsheetImportStatusBadge from "../internal/spreadsheet-import-status-badge.vue";
+const LEVELS = ["info", "warning", "error"];
+const props = defineProps({
+  importer: { type: Object, required: false, default: void 0 },
+  height: { type: String, required: false, default: "30rem" }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const steps = useSpreadsheetStepsContext();
+const { t } = useUiToolsLocale();
+const editing = shallowRef(null);
+const row = computed(() => importer.value.review.inspected);
+const fields = computed(() => importer.value.columns.fields);
+const labels = computed(() => new Map(fields.value.map((field) => [field.path, field.label])));
+const issues = computed(
+  () => [...row.value?.issues ?? []].filter((issue) => issue.code !== "value.skipped").sort((left, right) => LEVELS.indexOf(right.level) - LEVELS.indexOf(left.level))
+);
+const counts = computed(
+  () => new Map(importer.value.review.issueTypes.map((type) => [type.id, type.rowCount]))
+);
+const position = computed(() => importer.value.review.position);
+function choicesOf(path) {
+  const field = fields.value.find((entry) => entry.path === path);
+  return field?.kind === "select" && row.value ? importer.value.rows.cell(row.value.index, path).choices.map((option) => option.label) : void 0;
+}
+function commit(path, text) {
+  const current = row.value;
+  if (current && text !== importer.value.rows.cell(current.index, path).text)
+    importer.value.rows.edit(current.index, path, text);
+  editing.value = null;
+}
+function revert(path) {
+  if (row.value) importer.value.rows.revert(row.value.index, path);
+}
+function filterIssue(issue) {
+  importer.value.review.setIssue(`${issue.field}|${issue.code}`);
+}
+function toggleDiscard() {
+  const current = row.value;
+  if (!current) return;
+  if (current.discardReason === "manual") importer.value.rows.restore([current.index]);
+  else importer.value.rows.discard([current.index]);
+}
+function openValues() {
+  steps.value?.goTo("values");
+}
+</script>
+
+<template>
+  <aside
+    v-if="row"
+    data-spreadsheet-inspector
+    class="flex min-w-0 flex-col bg-default"
+    :style="{ height }"
+    :aria-label="t('spreadsheet.inspector.title', { row: row.rowNumber })"
+  >
+    <div class="flex items-center gap-2.5 border-b border-default px-4 py-3">
+      <b class="text-[15px] font-semibold text-highlighted tabular-nums">{{
+        t("spreadsheet.inspector.title", { row: row.rowNumber })
+      }}</b>
+      <SpreadsheetImportStatusBadge :status="row.status" full />
+      <span
+        v-if="row.mode === 'update' && !row.discardReason"
+        class="inline-flex h-5 items-center gap-1 rounded-md bg-info/10 px-1.5 text-[11.5px] font-semibold text-info"
+      >
+        <UIcon name="i-lucide-refresh-cw" class="size-3" />{{ t("spreadsheet.table.modeUpdate") }}
+      </span>
+      <UButton
+        class="ms-auto"
+        size="sm"
+        color="neutral"
+        variant="ghost"
+        square
+        icon="i-lucide-x"
+        :aria-label="t('spreadsheet.inspector.close')"
+        @click="importer.review.inspect(null)"
+      />
+    </div>
+    <div
+      class="flex items-center justify-between gap-2 border-b border-default px-4 py-2 text-[12.5px] text-muted"
+    >
+      <UButton
+        size="xs"
+        color="neutral"
+        variant="outline"
+        square
+        icon="i-lucide-chevron-left"
+        :disabled="position.current <= 1"
+        :aria-label="t('spreadsheet.inspector.previous')"
+        @click="importer.review.previous()"
+      />
+      <span class="tabular-nums">
+        {{
+          position.current ? t("spreadsheet.inspector.position", {
+  current: position.current,
+  total: position.total
+}) : t("spreadsheet.inspector.positionNone", { total: position.total })
+        }}
+      </span>
+      <UButton
+        size="xs"
+        color="neutral"
+        variant="outline"
+        square
+        icon="i-lucide-chevron-right"
+        :disabled="position.current >= position.total"
+        :aria-label="t('spreadsheet.inspector.next')"
+        @click="importer.review.next()"
+      />
+    </div>
+
+    <div class="grid flex-1 content-start gap-4 overflow-auto px-4 pt-3.5 pb-4">
+      <p
+        v-if="row.discardReason"
+        class="flex items-center gap-2 rounded-lg bg-elevated px-3 py-2 text-[13px] text-muted"
+      >
+        <UIcon name="i-lucide-ban" class="size-4 shrink-0" />{{
+          t(`spreadsheet.table.reasons.${row.discardReason}`)
+        }}
+      </p>
+      <section class="grid gap-2">
+        <h5 class="text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase">
+          {{ t("spreadsheet.inspector.issues") }}
+        </h5>
+        <template v-if="issues.length">
+          <div
+            v-for="(issue, index) in issues"
+            :key="`${issue.field}-${issue.code}-${index}`"
+            class="grid gap-1.5 rounded-lg border px-3 py-2.5"
+            :class="
+  issue.level === 'error' ? 'border-error/30 bg-error/4' : issue.level === 'warning' ? 'border-warning/30 bg-warning/4' : 'border-default'
+"
+          >
+            <slot name="issue" :issue="issue">
+              <div class="flex items-start gap-2">
+                <UIcon
+                  :name="issue.level === 'error' ? 'i-lucide-circle-x' : 'i-lucide-triangle-alert'"
+                  class="mt-0.5 size-4 shrink-0"
+                  :class="issue.level === 'error' ? 'text-error' : 'text-warning'"
+                />
+                <div class="grid min-w-0 gap-0.5">
+                  <span v-if="issue.field" class="text-xs font-semibold text-toned">{{
+                    labels.get(issue.field) ?? issue.field
+                  }}</span>
+                  <span class="text-[13px] text-highlighted">{{ issue.message }}</span>
+                </div>
+              </div>
+              <div class="flex flex-wrap gap-x-3 ps-6">
+                <UButton
+                  v-if="steps && issue.code === 'value.unknown'"
+                  variant="link"
+                  size="xs"
+                  class="px-0"
+                  :label="t('spreadsheet.inspector.answerIt')"
+                  @click="openValues"
+                />
+                <UButton
+                  v-if="issue.field && (counts.get(`${issue.field}|${issue.code}`) ?? 0) > 1"
+                  variant="link"
+                  color="neutral"
+                  size="xs"
+                  class="px-0"
+                  :label="
+  t('spreadsheet.inspector.allRows', {
+    count: counts.get(`${issue.field}|${issue.code}`) ?? 0
+  })
+"
+                  @click="filterIssue(issue)"
+                />
+              </div>
+            </slot>
+          </div>
+        </template>
+        <p v-else class="flex items-center gap-2 text-[13px] text-success">
+          <UIcon name="i-lucide-circle-check" class="size-4" />{{
+            t("spreadsheet.inspector.noIssue")
+          }}
+        </p>
+      </section>
+
+      <section class="grid gap-2">
+        <h5 class="text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase">
+          {{ t("spreadsheet.inspector.values") }}
+        </h5>
+        <dl class="divide-y divide-default overflow-hidden rounded-lg border border-default">
+          <div
+            v-for="field in fields"
+            :key="field.path"
+            class="grid gap-0.5 px-3 py-2"
+            :class="row.fieldIssues[field.path]?.level === 'error' ? 'bg-error/4' : ''"
+          >
+            <dt class="text-xs text-muted">{{ field.label }}</dt>
+            <dd class="min-w-0">
+              <div
+                v-if="editing === field.path"
+                class="h-8 overflow-hidden rounded-md ring-2 ring-primary ring-inset"
+              >
+                <SpreadsheetImportCellEditor
+                  :text="importer.rows.cell(row.index, field.path).text"
+                  :choices="choicesOf(field.path)"
+                  @commit="(text) => commit(field.path, text)"
+                  @cancel="editing = null"
+                />
+              </div>
+              <button
+                v-else
+                type="button"
+                class="w-full truncate rounded px-1 py-0.5 text-start text-[13px] text-highlighted hover:bg-elevated"
+                :class="{
+  'italic text-dimmed': !importer.rows.cell(row.index, field.path).display
+}"
+                :disabled="Boolean(row.discardReason)"
+                @click="editing = field.path"
+              >
+                {{
+                  importer.rows.cell(row.index, field.path).display || t("spreadsheet.table.emptyCell")
+                }}
+              </button>
+              <p
+                v-if="importer.rows.cell(row.index, field.path).edited"
+                class="flex items-center gap-1 px-1 text-[11.5px] text-dimmed"
+              >
+                {{
+                  t("spreadsheet.table.edited", {
+  value: importer.rows.cell(row.index, field.path).original || t("spreadsheet.table.emptyCell")
+})
+                }}
+                <UButton
+                  variant="link"
+                  size="xs"
+                  class="px-0"
+                  :label="t('spreadsheet.inspector.revert')"
+                  @click="revert(field.path)"
+                />
+              </p>
+              <p
+                v-else-if="importer.rows.cell(row.index, field.path).stored !== null"
+                class="px-1 text-[11.5px] text-info"
+              >
+                {{
+                  t("spreadsheet.table.stored", {
+  value: importer.rows.cell(row.index, field.path).stored ?? ""
+})
+                }}
+              </p>
+            </dd>
+          </div>
+        </dl>
+      </section>
+    </div>
+    <div class="border-t border-default px-4 py-2.5">
+      <UButton
+        v-if="!row.discardReason || row.discardReason === 'manual'"
+        size="sm"
+        color="neutral"
+        variant="outline"
+        block
+        :icon="row.discardReason ? 'i-lucide-rotate-ccw' : 'i-lucide-ban'"
+        :label="
+  row.discardReason ? t('spreadsheet.inspector.restore') : t('spreadsheet.inspector.discard')
+"
+        @click="toggleDiscard"
+      />
+    </div>
+  </aside>
+</template>