nuxt-ui-tools 0.1.0

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

@@ -0,0 +1,393 @@
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import { computed, ref, h } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import SpreadsheetValuePreview from "../components/shared/SpreadsheetValuePreview.vue";
+import { formatSpreadsheetCell, humanizeSpreadsheetKey } from "../utils/display.js";
+import {
+  getSpreadsheetLeafPaths,
+  getSpreadsheetObjectEntries,
+  getSpreadsheetValueAtPath
+} from "../utils/object.js";
+export function useSpreadsheetReview(params) {
+  const { t } = useUiToolsLocale();
+  const activeTab = ref("all");
+  const issueFilter = ref("all");
+  const inspectedRowIndex = ref(null);
+  const manuallyDiscardedRowIndexes = ref([]);
+  const rowSelection = ref({});
+  function isOverflowRow(index) {
+    return index >= params.maxRecords.value;
+  }
+  function isManuallyDiscarded(index) {
+    return manuallyDiscardedRowIndexes.value.includes(index);
+  }
+  function isDiscarded(index) {
+    return isOverflowRow(index) || isManuallyDiscarded(index);
+  }
+  function hasBlockingIssue(issues) {
+    return issues.some((issue) => issue.level === "error");
+  }
+  function hasWarningIssue(issues) {
+    return issues.some((issue) => issue.level === "warning");
+  }
+  function clearSelection() {
+    rowSelection.value = {};
+  }
+  function setActiveTab(value) {
+    activeTab.value = value;
+    clearSelection();
+    if (value === "valid" || value === "discarded") issueFilter.value = "all";
+  }
+  function setIssueFilter(value) {
+    issueFilter.value = value;
+    clearSelection();
+  }
+  function selectAllVisible(checked) {
+    if (checked !== true) {
+      clearSelection();
+      return;
+    }
+    rowSelection.value = Object.fromEntries(
+      visibleRows.value.filter((row) => !isOverflowRow(row.index) || activeTab.value === "discarded").map((row) => [String(row.index), true])
+    );
+  }
+  function discardSelectedRows() {
+    const discardableIndexes = selectedRowIndexes.value.filter((index) => !isDiscarded(index));
+    manuallyDiscardedRowIndexes.value = Array.from(
+      /* @__PURE__ */ new Set([...manuallyDiscardedRowIndexes.value, ...discardableIndexes])
+    );
+    clearSelection();
+  }
+  function restoreSelectedRows() {
+    manuallyDiscardedRowIndexes.value = manuallyDiscardedRowIndexes.value.filter(
+      (index) => !selectedRowIndexes.value.includes(index)
+    );
+    clearSelection();
+  }
+  function discardRow(index) {
+    if (isDiscarded(index)) return;
+    manuallyDiscardedRowIndexes.value = [...manuallyDiscardedRowIndexes.value, index];
+  }
+  function restoreRow(index) {
+    manuallyDiscardedRowIndexes.value = manuallyDiscardedRowIndexes.value.filter(
+      (value) => value !== index
+    );
+  }
+  function inspectRow(index) {
+    inspectedRowIndex.value = index;
+  }
+  function closeInspection() {
+    inspectedRowIndex.value = null;
+  }
+  const reviewRows = computed(
+    () => params.resolvedRows.value.map((row) => ({
+      ...row,
+      rowObject: Object.fromEntries(getSpreadsheetObjectEntries(row.data))
+    }))
+  );
+  const validRows = computed(
+    () => reviewRows.value.filter((row) => row.isValid && !isDiscarded(row.index))
+  );
+  const invalidRows = computed(
+    () => reviewRows.value.filter((row) => !row.isValid && !isDiscarded(row.index))
+  );
+  const discardedRows = computed(() => reviewRows.value.filter((row) => isDiscarded(row.index)));
+  const issueRows = computed(
+    () => reviewRows.value.filter((row) => row.issues.length > 0 && !isDiscarded(row.index))
+  );
+  const inspectedRow = computed(
+    () => inspectedRowIndex.value == null ? null : reviewRows.value.find((row) => row.index === inspectedRowIndex.value) ?? null
+  );
+  const inspectedIssueRowPosition = computed(
+    () => inspectedRow.value == null ? -1 : issueRows.value.findIndex((row) => row.index === inspectedRow.value?.index)
+  );
+  const blockingIssueCount = computed(
+    () => invalidRows.value.reduce(
+      (count, row) => count + row.issues.filter((issue) => issue.level === "error").length,
+      0
+    )
+  );
+  const warningIssueCount = computed(
+    () => invalidRows.value.reduce(
+      (count, row) => count + row.issues.filter((issue) => issue.level === "warning").length,
+      0
+    )
+  );
+  const stats = computed(() => [
+    {
+      key: "ready",
+      value: validRows.value.length,
+      label: t("spreadsheet.steps.review.ready"),
+      hint: t("spreadsheet.steps.review.validRows", { count: validRows.value.length }),
+      valueClass: "text-success",
+      accentClass: "bg-success",
+      cardClass: "border-default/70"
+    },
+    {
+      key: "invalid",
+      value: invalidRows.value.length,
+      label: t("spreadsheet.steps.review.invalid", { count: invalidRows.value.length }),
+      hint: invalidRows.value.length ? `${t("spreadsheet.steps.review.blocking", { count: blockingIssueCount.value })} \xB7 ${t("spreadsheet.steps.review.warnings", { count: warningIssueCount.value })}` : t("spreadsheet.steps.review.noBlockingIssues"),
+      valueClass: "text-error",
+      accentClass: "bg-error",
+      cardClass: "border-default/70"
+    },
+    {
+      key: "discarded",
+      value: discardedRows.value.length,
+      label: t("spreadsheet.steps.review.discarded", { count: discardedRows.value.length }),
+      hint: discardedRows.value.length ? t("spreadsheet.steps.review.willNotBeImported") : t("spreadsheet.steps.review.nothingDiscarded"),
+      valueClass: "text-warning",
+      accentClass: "bg-warning",
+      cardClass: discardedRows.value.length ? "border-warning/40" : "border-default/70"
+    }
+  ]);
+  const hasOverflow = computed(() => reviewRows.value.length > params.maxRecords.value);
+  const overflowCount = computed(
+    () => hasOverflow.value ? reviewRows.value.length - params.maxRecords.value : 0
+  );
+  const tabItems = computed(() => [
+    {
+      key: "all",
+      label: t("spreadsheet.steps.review.allRows", { count: reviewRows.value.length })
+    },
+    {
+      key: "valid",
+      label: t("spreadsheet.steps.review.valid", { count: validRows.value.length })
+    },
+    {
+      key: "invalid",
+      label: t("spreadsheet.steps.review.invalid", { count: invalidRows.value.length })
+    },
+    {
+      key: "discarded",
+      label: t("spreadsheet.steps.review.discarded", { count: discardedRows.value.length })
+    }
+  ]);
+  const issueFilterItems = computed(() => [
+    { key: "all", label: t("spreadsheet.steps.review.allIssues") },
+    {
+      key: "blocking",
+      label: t("spreadsheet.steps.review.blocking", {
+        count: invalidRows.value.filter((row) => hasBlockingIssue(row.issues)).length
+      })
+    },
+    {
+      key: "warning",
+      label: t("spreadsheet.steps.review.warnings", {
+        count: invalidRows.value.filter(
+          (row) => !hasBlockingIssue(row.issues) && hasWarningIssue(row.issues)
+        ).length
+      })
+    }
+  ]);
+  const visibleRows = computed(() => {
+    const baseRows = activeTab.value === "valid" ? validRows.value : activeTab.value === "invalid" ? invalidRows.value : activeTab.value === "discarded" ? discardedRows.value : reviewRows.value;
+    if (activeTab.value === "valid" || activeTab.value === "discarded") return baseRows;
+    if (issueFilter.value === "blocking")
+      return baseRows.filter((row) => hasBlockingIssue(row.issues));
+    if (issueFilter.value === "warning")
+      return baseRows.filter((row) => !hasBlockingIssue(row.issues) && hasWarningIssue(row.issues));
+    return baseRows;
+  });
+  const selectedRowIndexes = computed(
+    () => Object.entries(rowSelection.value).filter(([, selected]) => selected).map(([key]) => Number(key)).filter((index) => !Number.isNaN(index))
+  );
+  const selectedRows = computed(
+    () => visibleRows.value.filter((row) => selectedRowIndexes.value.includes(row.index))
+  );
+  const allVisibleSelected = computed(
+    () => visibleRows.value.length > 0 && visibleRows.value.filter((row) => !isOverflowRow(row.index) || activeTab.value === "discarded").every((row) => rowSelection.value[String(row.index)])
+  );
+  const canDiscardSelection = computed(
+    () => selectedRows.value.some((row) => !isDiscarded(row.index))
+  );
+  const canRestoreSelection = computed(
+    () => selectedRows.value.some((row) => isManuallyDiscarded(row.index))
+  );
+  const tableColumns = computed(() => {
+    const sample = visibleRows.value[0]?.data ?? reviewRows.value[0]?.data ?? {};
+    return getSpreadsheetLeafPaths(sample);
+  });
+  function getRowStatus(index, issues) {
+    if (isDiscarded(index))
+      return {
+        label: t("spreadsheet.steps.review.discardedStatus"),
+        color: "neutral",
+        icon: "i-lucide-ban"
+      };
+    if (hasBlockingIssue(issues))
+      return {
+        label: t("spreadsheet.steps.review.blockingStatus"),
+        color: "error",
+        icon: "i-lucide-circle-x"
+      };
+    if (hasWarningIssue(issues))
+      return {
+        label: t("spreadsheet.steps.review.warningStatus"),
+        color: "warning",
+        icon: "i-lucide-triangle-alert"
+      };
+    return {
+      label: t("spreadsheet.steps.review.validStatus"),
+      color: "success",
+      icon: "i-lucide-circle-check"
+    };
+  }
+  function getIssueBadge(issue) {
+    if (issue.level === "error")
+      return { label: t("spreadsheet.steps.review.issueBadgeBlocking"), color: "error" };
+    return { label: t("spreadsheet.steps.review.issueBadgeWarning"), color: "warning" };
+  }
+  function getIssueValueTone(issue) {
+    if (issue.level === "error") return "bg-error/6";
+    return "bg-warning/10";
+  }
+  function getIssueValue(rowData, issue) {
+    if (!issue.columnKey) return t("spreadsheet.steps.review.noValue");
+    return formatSpreadsheetCell(getSpreadsheetValueAtPath(rowData, issue.columnKey));
+  }
+  function getIssueRawValue(rowData, issue) {
+    if (!issue.columnKey) return void 0;
+    return getSpreadsheetValueAtPath(rowData, issue.columnKey);
+  }
+  function getRelatedIssueCount(issue) {
+    return issueRows.value.filter(
+      (row) => row.issues.some(
+        (candidate) => candidate.code === issue.code && candidate.columnKey === issue.columnKey && candidate.message === issue.message
+      )
+    ).length;
+  }
+  function getRowToneClass(row) {
+    if (isDiscarded(row.index)) return "opacity-45";
+    if (hasBlockingIssue(row.issues)) return "bg-error/5";
+    if (hasWarningIssue(row.issues)) return "bg-warning/5";
+    return "";
+  }
+  const reviewTableColumns = computed(() => [
+    {
+      id: "select",
+      header: () => h("div", { class: "flex justify-center" }, [
+        h(UCheckbox, {
+          modelValue: allVisibleSelected.value,
+          "onUpdate:modelValue": selectAllVisible
+        })
+      ]),
+      cell: ({ row }) => h("div", { class: "flex justify-center" }, [
+        h(UCheckbox, {
+          modelValue: rowSelection.value[String(row.original.index)] ?? false,
+          disabled: isOverflowRow(row.original.index) && activeTab.value !== "discarded",
+          "onUpdate:modelValue": (value) => {
+            rowSelection.value = {
+              ...rowSelection.value,
+              [String(row.original.index)]: value === true
+            };
+          }
+        })
+      ]),
+      meta: {
+        class: {
+          th: "w-12",
+          td: "w-12"
+        }
+      }
+    },
+    {
+      id: "row",
+      header: t("spreadsheet.steps.review.row"),
+      accessorFn: (row) => row.index + 1,
+      cell: ({
+        row
+      }) => {
+        const status = getRowStatus(row.original.index, row.original.issues);
+        const issueCount = row.original.issues.length;
+        const statusLabel = issueCount > 0 ? `${status.label} \xB7 ${issueCount}` : status.label;
+        return h("div", { class: "flex items-center gap-2 whitespace-nowrap leading-none" }, [
+          h("span", { class: "font-mono text-xs text-muted" }, `#${row.original.index + 1}`),
+          h(
+            UBadge,
+            {
+              color: status.color,
+              variant: "soft",
+              size: "sm",
+              icon: status.icon,
+              class: "font-medium"
+            },
+            () => statusLabel
+          )
+        ]);
+      },
+      meta: {
+        class: {
+          th: "w-44",
+          td: "w-44 align-top"
+        }
+      }
+    },
+    ...tableColumns.value.map((column) => ({
+      id: column,
+      header: humanizeSpreadsheetKey(column),
+      accessorFn: (row) => formatSpreadsheetCell(getSpreadsheetValueAtPath(row.data, column)),
+      cell: ({ row }) => h(SpreadsheetValuePreview, {
+        value: getSpreadsheetValueAtPath(row.original.data, column),
+        compact: true
+      }),
+      meta: {
+        class: {
+          th: "min-w-44",
+          td: "min-w-44 max-w-80 align-top text-toned"
+        }
+      }
+    }))
+  ]);
+  function inspectPrevIssueRow() {
+    if (inspectedIssueRowPosition.value <= 0) return;
+    inspectedRowIndex.value = issueRows.value[inspectedIssueRowPosition.value - 1]?.index ?? null;
+  }
+  function inspectNextIssueRow() {
+    if (inspectedIssueRowPosition.value < 0) return;
+    inspectedRowIndex.value = issueRows.value[inspectedIssueRowPosition.value + 1]?.index ?? null;
+  }
+  return {
+    activeTab,
+    issueFilter,
+    inspectedRow,
+    inspectedIssueRowPosition,
+    issueRows,
+    rowSelection,
+    selectedRowIndexes,
+    visibleRows,
+    stats,
+    hasOverflow,
+    overflowCount,
+    tabItems,
+    issueFilterItems,
+    canDiscardSelection,
+    canRestoreSelection,
+    reviewTableColumns,
+    tableColumns,
+    formatSpreadsheetCell,
+    getSpreadsheetObjectEntries,
+    humanizeSpreadsheetKey,
+    getIssueBadge,
+    getIssueValueTone,
+    getIssueValue,
+    getIssueRawValue,
+    getRelatedIssueCount,
+    getRowToneClass,
+    getRowStatus,
+    setActiveTab,
+    setIssueFilter,
+    discardSelectedRows,
+    restoreSelectedRows,
+    discardRow,
+    restoreRow,
+    inspectRow,
+    closeInspection,
+    inspectPrevIssueRow,
+    inspectNextIssueRow,
+    isDiscarded,
+    isManuallyDiscarded
+  };
+}

package/dist/runtime/spreadsheet/composables/use-spreadsheet-row-state.d.ts

@@ -0,0 +1,24 @@
+import { type ComputedRef } from 'vue';
+import type { SpreadsheetColumnMatch, SpreadsheetDynamicColumnMatch, SpreadsheetParsedRow, SpreadsheetRowSummary } from '../types/index.js';
+export interface UseSpreadsheetRowStateParams {
+    rows: ComputedRef<readonly (readonly unknown[])[]>;
+    contextData: ComputedRef<Record<string, unknown>>;
+    columnMatches: ComputedRef<readonly SpreadsheetColumnMatch[]>;
+    dynamicColumnMatches: ComputedRef<readonly SpreadsheetDynamicColumnMatch[]>;
+    refreshSources: readonly unknown[];
+}
+export declare function useSpreadsheetRowState(params: UseSpreadsheetRowStateParams): {
+    parsedRows: import("vue").ShallowRef<SpreadsheetParsedRow<Record<string, unknown>>[], SpreadsheetParsedRow<Record<string, unknown>>[]>;
+    summary: import("vue").ShallowRef<SpreadsheetRowSummary, SpreadsheetRowSummary>;
+    status: import("vue").ShallowRef<{
+        initialized: boolean;
+        isParsing: boolean;
+        isReady: boolean;
+    }, {
+        initialized: boolean;
+        isParsing: boolean;
+        isReady: boolean;
+    }>;
+    error: import("vue").ShallowRef<unknown, unknown>;
+    refreshRows: () => Promise<void>;
+};

package/dist/runtime/spreadsheet/composables/use-spreadsheet-row-state.js

@@ -0,0 +1,70 @@
+import { shallowRef, watch } from "vue";
+import { createSpreadsheetRowSummary, parseSpreadsheetRows } from "../utils/index.js";
+export function useSpreadsheetRowState(params) {
+  const parsedRows = shallowRef([]);
+  const summary = shallowRef({
+    totalRows: 0,
+    validRows: 0,
+    invalidRows: 0,
+    issueCount: 0
+  });
+  const status = shallowRef({
+    initialized: false,
+    isParsing: false,
+    isReady: false
+  });
+  const error = shallowRef(null);
+  let runId = 0;
+  async function refreshRows() {
+    const nextRunId = runId + 1;
+    runId = nextRunId;
+    status.value = {
+      initialized: true,
+      isParsing: true,
+      isReady: false
+    };
+    error.value = null;
+    try {
+      const nextRows = await parseSpreadsheetRows({
+        rows: params.rows.value,
+        matches: params.columnMatches.value,
+        dynamicMatches: params.dynamicColumnMatches.value,
+        context: params.contextData.value
+      });
+      if (runId !== nextRunId) return;
+      parsedRows.value = nextRows;
+      summary.value = createSpreadsheetRowSummary(nextRows);
+      status.value = {
+        initialized: true,
+        isParsing: false,
+        isReady: true
+      };
+    } catch (nextError) {
+      if (runId !== nextRunId) return;
+      parsedRows.value = [];
+      summary.value = createSpreadsheetRowSummary([]);
+      status.value = {
+        initialized: true,
+        isParsing: false,
+        isReady: false
+      };
+      error.value = nextError;
+    }
+  }
+  watch(
+    params.refreshSources,
+    () => {
+      void refreshRows();
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    parsedRows,
+    summary,
+    status,
+    error,
+    refreshRows
+  };
+}

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

@@ -0,0 +1,32 @@
+import type { ComputedRef } from 'vue';
+import type { SpreadsheetNormalizedSchema } from '../types/index.js';
+export interface UseSpreadsheetRowsParams {
+    schema: ComputedRef<SpreadsheetNormalizedSchema>;
+    contextData: ComputedRef<Record<string, unknown>>;
+    headers: ComputedRef<readonly unknown[]>;
+    rows: ComputedRef<readonly (readonly unknown[])[]>;
+}
+export declare function useSpreadsheetRows(params: UseSpreadsheetRowsParams): {
+    parsedRows: import("vue").ShallowRef<import("../types/index.js").SpreadsheetParsedRow<Record<string, unknown>>[], import("../types/index.js").SpreadsheetParsedRow<Record<string, unknown>>[]>;
+    summary: import("vue").ShallowRef<import("../types/index.js").SpreadsheetRowSummary, import("../types/index.js").SpreadsheetRowSummary>;
+    status: import("vue").ShallowRef<{
+        initialized: boolean;
+        isParsing: boolean;
+        isReady: boolean;
+    }, {
+        initialized: boolean;
+        isParsing: boolean;
+        isReady: boolean;
+    }>;
+    error: import("vue").ShallowRef<unknown, unknown>;
+    refreshRows: () => Promise<void>;
+    headerCells: ComputedRef<import("../types/index.js").SpreadsheetHeaderCell[]>;
+    staticColumns: ComputedRef<import("../types/index.js").SpreadsheetStaticColumn[]>;
+    dynamicColumns: ComputedRef<readonly unknown[]>;
+    manualColumnAssignments: import("vue").ShallowRef<Record<string, string>, Record<string, string>>;
+    columnMatches: ComputedRef<import("../types/index.js").SpreadsheetColumnMatch<import("../types/index.js").SpreadsheetColumnDefinition<string, unknown, boolean, unknown, undefined, unknown, undefined>>[]>;
+    dynamicColumnMatches: ComputedRef<import("../types/index.js").SpreadsheetDynamicColumnMatch<import("../types/index.js").SpreadsheetDynamicOptionGroupsDefinition<string, string, unknown> | import("../types/index.js").SpreadsheetDynamicCollectionDefinition<string, "array" | "record", readonly unknown[], unknown>, import("../types/index.js").SpreadsheetDynamicCollectionItemDefinition<string, import("../types/index.js").SpreadsheetDynamicValueDefinition | ((value: import("../types/index.js").SpreadsheetDynamicValueBuilder) => unknown), unknown, unknown>>[]>;
+    unmatchedColumns: ComputedRef<import("../types/index.js").SpreadsheetUnmatchedColumn<import("../types/index.js").SpreadsheetColumnDefinition<string, unknown, boolean, unknown, undefined, unknown, undefined>>[]>;
+    assignColumn: (headerIndex: number, columnKey: string) => void;
+    clearColumnAssignment: (headerIndex: number) => void;
+};

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

@@ -0,0 +1,26 @@
+import { useSpreadsheetColumnMatching } from "./use-spreadsheet-column-matching.js";
+import { useSpreadsheetRowState } from "./use-spreadsheet-row-state.js";
+export function useSpreadsheetRows(params) {
+  const matching = useSpreadsheetColumnMatching({
+    schema: params.schema,
+    contextData: params.contextData,
+    headers: params.headers
+  });
+  const rowState = useSpreadsheetRowState({
+    rows: params.rows,
+    contextData: params.contextData,
+    columnMatches: matching.columnMatches,
+    dynamicColumnMatches: matching.dynamicColumnMatches,
+    refreshSources: [
+      params.contextData,
+      params.headers,
+      params.rows,
+      matching.columnMatches,
+      matching.manualColumnAssignments
+    ]
+  });
+  return {
+    ...matching,
+    ...rowState
+  };
+}

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

@@ -0,0 +1,27 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { SpreadsheetBinaryRef, SpreadsheetWorkbookData, SpreadsheetWorkbookSelection } from '../types/index.js';
+export interface UseSpreadsheetSourceParams {
+    source: SpreadsheetBinaryRef;
+    fileName?: Ref<string | undefined> | ComputedRef<string | undefined>;
+    initialSelection?: Partial<SpreadsheetWorkbookSelection>;
+}
+export declare function useSpreadsheetSource(params: UseSpreadsheetSourceParams): {
+    workbook: import("vue").ShallowRef<SpreadsheetWorkbookData | null, SpreadsheetWorkbookData | null>;
+    selection: import("vue").ShallowRef<SpreadsheetWorkbookSelection, SpreadsheetWorkbookSelection>;
+    sheet: ComputedRef<import("../types/index.js").SpreadsheetWorkbookSheet | null>;
+    headers: ComputedRef<readonly unknown[]>;
+    rows: ComputedRef<(readonly unknown[])[]>;
+    status: import("vue").ShallowRef<{
+        initialized: boolean;
+        isParsing: boolean;
+        isReady: boolean;
+    }, {
+        initialized: boolean;
+        isParsing: boolean;
+        isReady: boolean;
+    }>;
+    error: import("vue").ShallowRef<unknown, unknown>;
+    refreshWorkbook: () => Promise<void>;
+    setSheetName: (sheetName: string) => void;
+    setHeaderRowIndex: (headerRowIndex: number) => void;
+};

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

@@ -0,0 +1,105 @@
+import { computed, shallowRef, watch } from "vue";
+import {
+  getDefaultSpreadsheetSheetName,
+  getSpreadsheetDataRows,
+  getSpreadsheetHeaders,
+  getSpreadsheetSheet,
+  parseSpreadsheetWorkbook
+} from "../utils/index.js";
+export function useSpreadsheetSource(params) {
+  const workbook = shallowRef(null);
+  const selection = shallowRef({
+    sheetName: params.initialSelection?.sheetName,
+    headerRowIndex: params.initialSelection?.headerRowIndex ?? 0
+  });
+  const status = shallowRef({
+    initialized: false,
+    isParsing: false,
+    isReady: false
+  });
+  const error = shallowRef(null);
+  let runId = 0;
+  const sheet = computed(() => getSpreadsheetSheet(workbook.value, selection.value.sheetName));
+  const headers = computed(() => getSpreadsheetHeaders(sheet.value, selection.value.headerRowIndex));
+  const rows = computed(() => getSpreadsheetDataRows(sheet.value, selection.value.headerRowIndex));
+  async function refreshWorkbook() {
+    const source = params.source.value;
+    const nextRunId = runId + 1;
+    runId = nextRunId;
+    if (!source) {
+      workbook.value = null;
+      error.value = null;
+      status.value = {
+        initialized: true,
+        isParsing: false,
+        isReady: false
+      };
+      return;
+    }
+    status.value = {
+      initialized: true,
+      isParsing: true,
+      isReady: false
+    };
+    error.value = null;
+    try {
+      const nextWorkbook = await parseSpreadsheetWorkbook({
+        source,
+        fileName: params.fileName?.value
+      });
+      if (runId !== nextRunId) return;
+      workbook.value = nextWorkbook;
+      selection.value = {
+        ...selection.value,
+        sheetName: selection.value.sheetName ?? getDefaultSpreadsheetSheetName(nextWorkbook)
+      };
+      status.value = {
+        initialized: true,
+        isParsing: false,
+        isReady: true
+      };
+    } catch (nextError) {
+      if (runId !== nextRunId) return;
+      workbook.value = null;
+      error.value = nextError;
+      status.value = {
+        initialized: true,
+        isParsing: false,
+        isReady: false
+      };
+    }
+  }
+  function setSheetName(sheetName) {
+    selection.value = {
+      ...selection.value,
+      sheetName
+    };
+  }
+  function setHeaderRowIndex(headerRowIndex) {
+    selection.value = {
+      ...selection.value,
+      headerRowIndex
+    };
+  }
+  watch(
+    () => params.source.value,
+    () => {
+      void refreshWorkbook();
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    workbook,
+    selection,
+    sheet,
+    headers,
+    rows,
+    status,
+    error,
+    refreshWorkbook,
+    setSheetName,
+    setHeaderRowIndex
+  };
+}