nuxt-ui-tools 1.11.2 → 1.13.0

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

@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import {
+  useSpreadsheetImporter,
+  useSpreadsheetStepsContext
+} from "../../composables/use-spreadsheet-import-context";
+import SpreadsheetImportHeading from "../internal/spreadsheet-import-heading.vue";
+import SpreadsheetImportColumnMapping from "../parts/spreadsheet-import-column-mapping.vue";
+import SpreadsheetImportDropzone from "../parts/spreadsheet-import-dropzone.vue";
+import SpreadsheetImportExpectedColumns from "../parts/spreadsheet-import-expected-columns.vue";
+import SpreadsheetImportExportButton from "../parts/spreadsheet-import-export-button.vue";
+import SpreadsheetImportFileCard from "../parts/spreadsheet-import-file-card.vue";
+import SpreadsheetImportProgress from "../parts/spreadsheet-import-progress.vue";
+import SpreadsheetImportRowInspector from "../parts/spreadsheet-import-row-inspector.vue";
+import SpreadsheetImportSourceSettings from "../parts/spreadsheet-import-source-settings.vue";
+import SpreadsheetImportStats from "../parts/spreadsheet-import-stats.vue";
+import SpreadsheetImportSummary from "../parts/spreadsheet-import-summary.vue";
+import SpreadsheetImportTableToolbar from "../parts/spreadsheet-import-table-toolbar.vue";
+import SpreadsheetImportTable from "../parts/spreadsheet-import-table.vue";
+import SpreadsheetImportTemplateButton from "../parts/spreadsheet-import-template-button.vue";
+import SpreadsheetImportValueMapping from "../parts/spreadsheet-import-value-mapping.vue";
+const props = defineProps({
+  importer: { type: Object, required: false },
+  steps: { type: Object, required: false },
+  headings: { type: Boolean, required: false }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const steps = useSpreadsheetStepsContext(() => props.steps);
+const { t } = useUiToolsLocale();
+const step = computed(() => steps.value?.step ?? null);
+</script>
+
+<template>
+  <div v-if="step" :key="step.key" :data-spreadsheet-step="step.key" class="grid min-w-0 gap-5">
+    <slot :name="step.key" :step="step">
+      <template v-if="step.builtIn === 'file'">
+        <SpreadsheetImportHeading
+          v-if="headings"
+          :title="t('spreadsheet.headings.file.title')"
+          :description="t('spreadsheet.headings.file.description')"
+        >
+          <SpreadsheetImportTemplateButton v-if="!importer.file.loaded" />
+        </SpreadsheetImportHeading>
+        <template v-if="importer.file.loaded">
+          <SpreadsheetImportFileCard />
+          <SpreadsheetImportSourceSettings />
+        </template>
+        <template v-else>
+          <SpreadsheetImportDropzone />
+          <SpreadsheetImportExpectedColumns />
+        </template>
+      </template>
+      <template v-else-if="step.builtIn === 'columns'">
+        <SpreadsheetImportHeading
+          v-if="headings"
+          :title="t('spreadsheet.headings.columns.title')"
+          :description="t('spreadsheet.headings.columns.description')"
+        />
+        <SpreadsheetImportColumnMapping />
+      </template>
+      <template v-else-if="step.builtIn === 'values'">
+        <SpreadsheetImportHeading
+          v-if="headings"
+          :title="t('spreadsheet.headings.values.title')"
+          :description="t('spreadsheet.headings.values.description')"
+        />
+        <SpreadsheetImportValueMapping />
+      </template>
+      <template v-else-if="step.builtIn === 'review'">
+        <SpreadsheetImportHeading
+          v-if="headings"
+          :title="t('spreadsheet.headings.review.title')"
+          :description="t('spreadsheet.headings.review.description')"
+        >
+          <SpreadsheetImportExportButton />
+        </SpreadsheetImportHeading>
+        <SpreadsheetImportStats />
+        <div class="min-w-0 overflow-hidden rounded-xl border border-default">
+          <SpreadsheetImportTableToolbar />
+          <div
+            class="grid min-w-0"
+            :class="importer.review.inspected ? 'lg:grid-cols-[minmax(0,1fr)_24rem]' : ''"
+          >
+            <SpreadsheetImportTable />
+            <SpreadsheetImportRowInspector
+              v-if="importer.review.inspected"
+              class="border-default max-lg:border-t lg:border-s"
+            />
+          </div>
+        </div>
+      </template>
+      <template v-else-if="step.builtIn === 'submit'">
+        <SpreadsheetImportProgress v-if="importer.submit.status !== 'idle'" />
+        <template v-else>
+          <SpreadsheetImportHeading
+            v-if="headings"
+            :title="t('spreadsheet.headings.submit.title')"
+            :description="t('spreadsheet.headings.submit.description')"
+          />
+          <SpreadsheetImportSummary />
+        </template>
+      </template>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+import type { SpreadsheetImporter, SpreadsheetSteps } from '../../types/index.js';
+/**
+ * The current step. A slot named after the step key replaces its content; built-in steps
+ * otherwise render their default parts.
+ */
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    steps?: SpreadsheetSteps;
+    /** Shows the built-in title and description above the default content. */
+    headings?: boolean;
+};
+declare var __VLS_2: string, __VLS_3: {
+    step: import("../../types/index.js").SpreadsheetStepStatus;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => 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/steps/spreadsheet-import-stepper.d.vue.ts

@@ -0,0 +1,15 @@
+import type { SpreadsheetSteps } from '../../types/index.js';
+type __VLS_Props = {
+    steps?: SpreadsheetSteps;
+    /** `vertical` lists steps with their hints from `lg` up, and a row of steps below. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Vertical only: numbers without labels, for a narrow rail. */
+    compact?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    compact: boolean;
+    steps: SpreadsheetSteps;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,131 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useSpreadsheetStepsContext } from "../../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  steps: { type: Object, required: false, default: void 0 },
+  orientation: { type: String, required: false, default: "horizontal" },
+  compact: { type: Boolean, required: false, default: false }
+});
+const steps = useSpreadsheetStepsContext(() => props.steps);
+const { t } = useUiToolsLocale();
+const entries = computed(
+  () => (steps.value?.list ?? []).map((step) => ({
+    ...step,
+    hintText: resolveTextValue(
+      step.hint,
+      step.builtIn ? t(`spreadsheet.stepHints.${step.builtIn}`) : ""
+    ),
+    labelText: resolveTextValue(
+      step.label,
+      step.builtIn ? t(`spreadsheet.steps.${step.builtIn}`) : step.key
+    )
+  }))
+);
+function open(step) {
+  if (step.state === "done") steps.value?.goTo(step.key);
+}
+function markerClass(state) {
+  return {
+    current: "border-primary bg-primary text-[var(--nut-sheet-accent-fg,var(--ui-text-inverted))]",
+    done: "border-inverted bg-inverted text-inverted",
+    skipped: "border-transparent bg-accented text-muted",
+    upcoming: "border-accented bg-default text-muted"
+  }[state];
+}
+</script>
+
+<template>
+  <ol
+    v-if="orientation === 'vertical'"
+    data-spreadsheet-stepper="vertical"
+    class="flex gap-1 overflow-x-auto lg:flex-col lg:gap-0.5 lg:overflow-visible"
+  >
+    <li v-for="entry in entries" :key="entry.key" class="shrink-0 lg:shrink">
+      <button
+        type="button"
+        class="flex w-full items-start gap-3 rounded-lg p-2.5 text-start transition-colors"
+        :class="[
+  entry.state === 'current' ? 'bg-default shadow-xs ring-1 ring-default' : '',
+  entry.state === 'done' ? 'cursor-pointer hover:bg-default/60' : 'cursor-default',
+  compact ? 'lg:justify-center' : ''
+]"
+        :aria-current="entry.state === 'current' ? 'step' : void 0"
+        :tabindex="entry.state === 'done' ? 0 : -1"
+        :title="compact ? entry.labelText : void 0"
+        @click="open(entry)"
+      >
+        <span
+          class="grid size-6 shrink-0 place-items-center rounded-full border-[1.5px] text-[11.5px] font-semibold tabular-nums"
+          :class="markerClass(entry.state)"
+        >
+          <UIcon
+            v-if="entry.state === 'done' || entry.state === 'skipped'"
+            name="i-lucide-check"
+            class="size-3"
+          />
+          <template v-else>{{ entry.position }}</template>
+        </span>
+        <span class="grid min-w-0 gap-px pt-0.5" :class="compact ? 'lg:sr-only' : ''">
+          <span
+            class="flex items-baseline gap-1.5 text-[13.5px] leading-5 whitespace-nowrap"
+            :class="{
+  'font-semibold text-highlighted': entry.state === 'current',
+  'font-medium text-toned': entry.state === 'done',
+  'font-medium text-muted': entry.state === 'upcoming' || entry.state === 'skipped'
+}"
+          >
+            {{ entry.labelText }}
+            <small v-if="entry.skipped" class="text-[11px] font-normal text-dimmed">{{
+              t("spreadsheet.steps.auto")
+            }}</small>
+          </span>
+          <span v-if="entry.hintText" class="hidden text-xs leading-4 text-dimmed lg:block">{{
+            entry.hintText
+          }}</span>
+        </span>
+      </button>
+    </li>
+  </ol>
+  <ol v-else data-spreadsheet-stepper="horizontal" class="flex border-b border-default">
+    <li
+      v-for="entry in entries"
+      :key="entry.key"
+      class="min-w-0 flex-1"
+      :class="entry.state === 'current' ? 'max-sm:flex-[3]' : ''"
+    >
+      <button
+        type="button"
+        class="relative flex w-full items-center gap-2 pb-3 text-start text-sm"
+        :class="[
+  entry.state === 'current' ? 'font-semibold text-highlighted' : 'text-muted',
+  entry.state === 'done' ? 'cursor-pointer text-toned hover:text-highlighted' : 'cursor-default'
+]"
+        :aria-current="entry.state === 'current' ? 'step' : void 0"
+        :tabindex="entry.state === 'done' ? 0 : -1"
+        @click="open(entry)"
+      >
+        <span
+          class="grid size-[22px] shrink-0 place-items-center rounded-full border-[1.5px] text-[11px] font-semibold tabular-nums"
+          :class="markerClass(entry.state)"
+        >
+          <UIcon
+            v-if="entry.state === 'done' || entry.state === 'skipped'"
+            name="i-lucide-check"
+            class="size-3"
+          />
+          <template v-else>{{ entry.position }}</template>
+        </span>
+        <span class="truncate" :class="entry.state === 'current' ? 'inline' : 'hidden sm:inline'">{{
+          entry.labelText
+        }}</span>
+        <span
+          v-if="entry.state === 'current'"
+          class="absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-primary"
+        />
+      </button>
+    </li>
+  </ol>
+</template>

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

@@ -0,0 +1,15 @@
+import type { SpreadsheetSteps } from '../../types/index.js';
+type __VLS_Props = {
+    steps?: SpreadsheetSteps;
+    /** `vertical` lists steps with their hints from `lg` up, and a row of steps below. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Vertical only: numbers without labels, for a narrow rail. */
+    compact?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    compact: boolean;
+    steps: SpreadsheetSteps;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/composables/index.d.ts

@@ -1 +1,3 @@
 export * from './use-spreadsheet-import.js';
+export * from './use-spreadsheet-steps.js';
+export * from './use-spreadsheet-import-context.js';

package/dist/runtime/spreadsheet/composables/index.js

@@ -1 +1,3 @@
 export * from "./use-spreadsheet-import.js";
+export * from "./use-spreadsheet-steps.js";
+export * from "./use-spreadsheet-import-context.js";

package/dist/runtime/spreadsheet/composables/use-spreadsheet-answers.d.ts

@@ -0,0 +1,8 @@
+import type { SpreadsheetValueAnswer } from '../types/index.js';
+/** Answers given by the user to values that match no option, by field and normalized value. */
+export declare function useSpreadsheetAnswers(): {
+    answers: import("vue").ShallowRef<Readonly<Record<string, Readonly<Record<string, SpreadsheetValueAnswer>>>>, Readonly<Record<string, Readonly<Record<string, SpreadsheetValueAnswer>>>>>;
+    clear: () => void;
+    remove: (field: string, key: string) => void;
+    set: (field: string, key: string, answer: SpreadsheetValueAnswer) => void;
+};

package/dist/runtime/spreadsheet/composables/use-spreadsheet-answers.js

@@ -0,0 +1,19 @@
+import { shallowRef } from "vue";
+export function useSpreadsheetAnswers() {
+  const answers = shallowRef({});
+  function set(field, key, answer) {
+    answers.value = { ...answers.value, [field]: { ...answers.value[field], [key]: answer } };
+  }
+  function remove(field, key) {
+    const current = answers.value[field];
+    if (!current || !(key in current)) return;
+    answers.value = {
+      ...answers.value,
+      [field]: Object.fromEntries(Object.entries(current).filter(([entry]) => entry !== key))
+    };
+  }
+  function clear() {
+    answers.value = {};
+  }
+  return { answers, clear, remove, set };
+}

package/dist/runtime/spreadsheet/composables/use-spreadsheet-columns.d.ts

@@ -0,0 +1,23 @@
+import type { SpreadsheetFieldState } from '../types/index.js';
+import type { useSpreadsheetContext } from './use-spreadsheet-context.js';
+import type { useSpreadsheetFields } from './use-spreadsheet-fields.js';
+import type { useSpreadsheetLayout } from './use-spreadsheet-layout.js';
+export interface UseSpreadsheetColumnsParams {
+    fields: ReturnType<typeof useSpreadsheetFields>;
+    layout: ReturnType<typeof useSpreadsheetLayout>;
+    context: ReturnType<typeof useSpreadsheetContext>;
+}
+/**
+ * Which column each field reads. Headers name fields exactly; the user can choose another column
+ * or none. Choices are kept while the header texts stay the same.
+ */
+export declare function useSpreadsheetColumns(params: UseSpreadsheetColumnsParams): {
+    assign: (field: string, header: number) => void;
+    clear: () => void;
+    ignore: (field: string) => void;
+    manual: import("vue").ShallowRef<Readonly<Record<string, number | null>>, Readonly<Record<string, number | null>>>;
+    matches: import("vue").ComputedRef<Map<string, number>>;
+    reset: (field: string) => void;
+    states: import("vue").ComputedRef<SpreadsheetFieldState<string>[]>;
+    unusedHeaders: import("vue").ComputedRef<import("..").SpreadsheetHeaderCell[]>;
+};

package/dist/runtime/spreadsheet/composables/use-spreadsheet-columns.js

@@ -0,0 +1,75 @@
+import { computed, shallowRef, watch } from "vue";
+import { matchSpreadsheetHeaders } from "../utils/index.js";
+export function useSpreadsheetColumns(params) {
+  const manual = shallowRef({});
+  const headerSignature = computed(
+    () => params.layout.headers.value.map((header) => header.normalized).join("|")
+  );
+  watch(headerSignature, () => {
+    manual.value = {};
+  });
+  const matches = computed(
+    () => matchSpreadsheetHeaders({
+      ctx: params.context.ctx.value,
+      fields: params.fields.columnFields.value,
+      headers: params.layout.headers.value,
+      manual: manual.value
+    })
+  );
+  function samplesOf(column) {
+    const values = [];
+    for (const row of params.layout.dataRows.value) {
+      const text = String(row[column] ?? "").trim();
+      if (text && !values.includes(text)) values.push(text);
+      if (values.length === 3) break;
+    }
+    return values;
+  }
+  const states = computed(
+    () => params.fields.fields.value.map((field) => {
+      const from = field.select?.from ?? null;
+      const column = from ? matches.value.get(from) : matches.value.get(field.path);
+      const header = column === void 0 ? null : params.layout.headers.value[column] ?? null;
+      const status = header !== null ? "matched" : field.hasDefault ? "default" : field.required ? "missing" : "unmatched";
+      return {
+        assignedBy: header === null ? null : field.path in manual.value ? "user" : "file",
+        description: field.description,
+        example: field.example,
+        from,
+        group: field.group,
+        header,
+        kind: field.kind,
+        label: field.label,
+        name: field.name,
+        path: field.path,
+        required: field.required,
+        samples: column === void 0 ? [] : samplesOf(column),
+        status,
+        suggestion: null
+      };
+    })
+  );
+  const unusedHeaders = computed(() => {
+    const used = new Set(matches.value.values());
+    return params.layout.headers.value.filter((header) => header.text && !used.has(header.index));
+  });
+  function assign(field, header) {
+    const next = {};
+    for (const [path, index] of Object.entries(manual.value))
+      if (index !== header) next[path] = index;
+    next[field] = header;
+    manual.value = next;
+  }
+  function ignore(field) {
+    manual.value = { ...manual.value, [field]: null };
+  }
+  function reset(field) {
+    manual.value = Object.fromEntries(
+      Object.entries(manual.value).filter(([path]) => path !== field)
+    );
+  }
+  function clear() {
+    manual.value = {};
+  }
+  return { assign, clear, ignore, manual, matches, reset, states, unusedHeaders };
+}

package/dist/runtime/spreadsheet/composables/use-spreadsheet-context.d.ts

@@ -1,49 +1,12 @@
-import type { ComputedRef } from 'vue';
-import type { SpreadsheetNormalizedSchema } from '../types/index.js';
+import type { MaybeRefOrGetter } from 'vue';
 export interface UseSpreadsheetContextParams {
-    schema: ComputedRef<SpreadsheetNormalizedSchema>;
+    /** Entries of `options.context`: values, refs, getters, or queries. */
+    input: MaybeRefOrGetter<Readonly<Record<string, unknown>> | undefined>;
 }
+/** The context passed to every schema callback: plain entries as they are, queries once loaded. */
 export declare function useSpreadsheetContext(params: UseSpreadsheetContextParams): {
-    context: Readonly<import("vue").Ref<{
-        key: string;
-        data?: unknown;
-        error?: unknown;
-        isPending?: boolean;
-        isFetching?: boolean;
-        isSuccess?: boolean;
-        isRefetching?: boolean;
-        refetch: () => Promise<import("../types/index.js").SpreadsheetValue>;
-    }[], {
-        key: string;
-        data?: unknown;
-        error?: unknown;
-        isPending?: boolean;
-        isFetching?: boolean;
-        isSuccess?: boolean;
-        isRefetching?: boolean;
-        refetch: () => Promise<import("../types/index.js").SpreadsheetValue>;
-    }[]>>;
-    contextData: ComputedRef<Partial<{
-        [x: string]: unknown;
-    }>>;
-    contextItems: ComputedRef<readonly import("../types/index.js").SpreadsheetContextItem<string, unknown>[]>;
-    contextResults: ComputedRef<{
-        key: string;
-        data?: unknown;
-        error?: unknown;
-        isPending?: boolean;
-        isFetching?: boolean;
-        isSuccess?: boolean;
-        isRefetching?: boolean;
-        refetch: () => Promise<import("../types/index.js").SpreadsheetValue>;
-    }[]>;
-    error: ComputedRef<unknown>;
-    refreshContext: () => Promise<unknown[]>;
-    status: ComputedRef<{
-        initialized: boolean;
-        isFetching: boolean;
-        isPending: boolean;
-        isReady: boolean;
-        isRefreshing: boolean;
-    }>;
+    ctx: import("vue").ComputedRef<Record<string, unknown>>;
+    error: import("vue").ComputedRef<Error | null>;
+    loading: import("vue").ComputedRef<boolean>;
+    ready: import("vue").ComputedRef<boolean>;
 };

package/dist/runtime/spreadsheet/composables/use-spreadsheet-context.js

@@ -1,35 +1,31 @@
-import { useQueries } from "@tanstack/vue-query";
-import { computed } from "vue";
-import {
-  createSpreadsheetContextData,
-  createSpreadsheetContextQueries,
-  createSpreadsheetContextStatus
-} from "../utils/index.js";
+import { computed, toValue } from "vue";
+import { isSpreadsheetQueryDefinition } from "../utils/index.js";
+import { useSpreadsheetQueries } from "./use-spreadsheet-queries.js";
 export function useSpreadsheetContext(params) {
-  const contextItems = computed(() => params.schema.value.context);
-  const context = useQueries({
-    combine: (results) => results.map((result, index) => ({
-      key: contextItems.value[index]?.key,
-      ...result
-    })),
-    queries: () => createSpreadsheetContextQueries(contextItems.value)
-  });
-  const contextResults = computed(() => context.value);
-  const contextData = computed(
-    () => createSpreadsheetContextData(contextItems.value, contextResults.value)
+  const entries = computed(
+    () => Object.entries(toValue(params.input) ?? {}).map(([key, entry]) => {
+      const resolved = toValue(entry);
+      return isSpreadsheetQueryDefinition(resolved) ? { key, kind: "query", query: resolved } : { key, kind: "value", value: resolved };
+    })
+  );
+  const queries = computed(
+    () => entries.value.flatMap((entry) => entry.kind === "query" ? [entry.query] : [])
   );
-  const status = computed(() => createSpreadsheetContextStatus(contextResults.value));
-  const error = computed(() => contextResults.value.find((result) => result.error)?.error);
-  function refreshContext() {
-    return Promise.all(contextResults.value.map((result) => result.refetch()));
-  }
-  return {
-    context,
-    contextData,
-    contextItems,
-    contextResults,
-    error,
-    refreshContext,
-    status
-  };
+  const results = useSpreadsheetQueries(() => queries.value);
+  const ctx = computed(() => {
+    let queryIndex = 0;
+    const data = {};
+    for (const entry of entries.value) {
+      if (entry.kind === "value") data[entry.key] = entry.value;
+      else {
+        data[entry.key] = results.value[queryIndex]?.data;
+        queryIndex += 1;
+      }
+    }
+    return data;
+  });
+  const loading = computed(() => results.value.some((result) => result.pending));
+  const error = computed(() => results.value.find((result) => result.error)?.error ?? null);
+  const ready = computed(() => !loading.value && !error.value);
+  return { ctx, error, loading, ready };
 }

package/dist/runtime/spreadsheet/composables/use-spreadsheet-edits.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Cell edits made in review, by row and field. An edit replaces the cell text and goes through the
+ * same parsing, options, and rules as the file.
+ */
+export declare function useSpreadsheetEdits(): {
+    clear: () => void;
+    count: import("vue").ComputedRef<number>;
+    edits: import("vue").ShallowRef<ReadonlyMap<number, Readonly<Record<string, string>>>, ReadonlyMap<number, Readonly<Record<string, string>>>>;
+    revert: (index: number, field: string) => void;
+    set: (index: number, field: string, text: string) => void;
+};

package/dist/runtime/spreadsheet/composables/use-spreadsheet-edits.js

@@ -0,0 +1,25 @@
+import { computed, shallowRef } from "vue";
+export function useSpreadsheetEdits() {
+  const edits = shallowRef(/* @__PURE__ */ new Map());
+  function set(index, field, text) {
+    const next = new Map(edits.value);
+    next.set(index, { ...next.get(index), [field]: text });
+    edits.value = next;
+  }
+  function revert(index, field) {
+    const current = edits.value.get(index);
+    if (!current || !(field in current)) return;
+    const next = new Map(edits.value);
+    const rest = Object.fromEntries(Object.entries(current).filter(([key]) => key !== field));
+    if (Object.keys(rest).length) next.set(index, rest);
+    else next.delete(index);
+    edits.value = next;
+  }
+  function clear() {
+    edits.value = /* @__PURE__ */ new Map();
+  }
+  const count = computed(
+    () => [...edits.value.values()].reduce((total, fields) => total + Object.keys(fields).length, 0)
+  );
+  return { clear, count, edits, revert, set };
+}

package/dist/runtime/spreadsheet/composables/use-spreadsheet-fields.d.ts

@@ -0,0 +1,16 @@
+import type { ComputedRef } from 'vue';
+import type { UiToolsTranslator } from '#ui-tools/i18n';
+import type { SpreadsheetRuntimeSchema } from '../types/index.js';
+import type { useSpreadsheetContext } from './use-spreadsheet-context.js';
+export interface UseSpreadsheetFieldsParams {
+    schema: ComputedRef<SpreadsheetRuntimeSchema>;
+    context: ReturnType<typeof useSpreadsheetContext>;
+    t: UiToolsTranslator;
+}
+/** The schema's columns resolved for the current context, once the context is loaded. */
+export declare function useSpreadsheetFields(params: UseSpreadsheetFieldsParams): {
+    byPath: ComputedRef<Map<string, import("..").SpreadsheetField>>;
+    columnFields: ComputedRef<import("..").SpreadsheetField[]>;
+    fields: ComputedRef<import("..").SpreadsheetField[]>;
+    groups: ComputedRef<import("..").SpreadsheetFieldGroup[]>;
+};

package/dist/runtime/spreadsheet/composables/use-spreadsheet-fields.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+import { createSpreadsheetColumnsBuilder } from "../schema/builder.js";
+import { resolveSpreadsheetFields } from "../utils/index.js";
+export function useSpreadsheetFields(params) {
+  const builder = createSpreadsheetColumnsBuilder();
+  const entries = computed(() => params.schema.value.columns(builder)["~entries"]);
+  const resolved = computed(() => {
+    if (!params.context.ready.value) return { fields: [], groups: [] };
+    return resolveSpreadsheetFields({
+      ctx: params.context.ctx.value,
+      entries: entries.value,
+      t: params.t
+    });
+  });
+  const fields = computed(() => resolved.value.fields);
+  const groups = computed(() => resolved.value.groups);
+  const byPath = computed(() => new Map(fields.value.map((field) => [field.path, field])));
+  const columnFields = computed(() => fields.value.filter((field) => !field.select?.from));
+  return { byPath, columnFields, fields, groups };
+}

package/dist/runtime/spreadsheet/composables/use-spreadsheet-file.d.ts

@@ -0,0 +1,14 @@
+import type { SpreadsheetFileSource, SpreadsheetWorkbook } from '../types/index.js';
+/** The file being imported: reading, errors, and its sheets. */
+export declare function useSpreadsheetFile(): {
+    clear: () => void;
+    error: import("vue").ShallowRef<unknown, unknown>;
+    load: (source: SpreadsheetFileSource, name?: string) => Promise<void>;
+    paste: (text: string, name?: string) => void;
+    reading: import("vue").ShallowRef<boolean, boolean>;
+    sheets: import("vue").ComputedRef<{
+        name: string;
+        rowCount: number;
+    }[]>;
+    workbook: import("vue").ShallowRef<SpreadsheetWorkbook | null, SpreadsheetWorkbook | null>;
+};