@opengeni/react 3.3.2 → 3.4.1-canary.38960406141001

package/src/components/artifacts/spreadsheet-command-queue.ts

@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export type SpreadsheetCommandTarget = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
+type Command = {
+  id: number;
+  target: SpreadsheetCommandTarget | null;
+  overlapped: boolean;
+  covered: boolean;
+  message?: string;
+  retry?: () => void;
+};
+
+function overlaps(a: SpreadsheetCommandTarget, b: SpreadsheetCommandTarget): boolean {
+  return a.top <= b.bottom && a.bottom >= b.top && a.left <= b.right && a.right >= b.left;
+}
+
+function contains(a: SpreadsheetCommandTarget, b: SpreadsheetCommandTarget): boolean {
+  return a.top <= b.top && a.bottom >= b.bottom && a.left <= b.left && a.right >= b.right;
+}
+
+/** Keep independent failures visible without replaying over newer overlapping edits. */
+export function useSpreadsheetCommandQueue({
+  scopeKey,
+  enabled,
+  onCommandError,
+}: {
+  scopeKey: string;
+  enabled: boolean;
+  onCommandError?: ((error: Error) => void) | undefined;
+}) {
+  const [pendingCount, setPendingCount] = useState(0);
+  const [failures, setFailures] = useState<readonly Command[]>([]);
+  const commandsRef = useRef(new Map<number, Command>());
+  const nextIdRef = useRef(0);
+  const mountedRef = useRef(true);
+  const optionsRef = useRef({ scopeKey, enabled, onCommandError });
+  optionsRef.current = { scopeKey, enabled, onCommandError };
+  const scopeRef = useRef({ key: scopeKey, epoch: 0 });
+  if (scopeRef.current.key !== scopeKey) {
+    scopeRef.current = { key: scopeKey, epoch: scopeRef.current.epoch + 1 };
+  }
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    commandsRef.current.clear();
+    setPendingCount(0);
+    setFailures([]);
+  }, [scopeKey]);
+
+  const refreshFailures = useCallback(() => {
+    setFailures(
+      [...commandsRef.current.values()].filter(
+        (command) => command.message !== undefined && !command.covered,
+      ),
+    );
+  }, []);
+
+  const clearPreflightFailure = useCallback(() => {
+    let changed = false;
+    for (const previous of commandsRef.current.values()) {
+      if (previous.target === null && previous.message !== undefined) {
+        commandsRef.current.delete(previous.id);
+        changed = true;
+      }
+    }
+    if (changed) refreshFailures();
+  }, [refreshFailures]);
+
+  const run = useCallback(
+    (
+      invoke: (id: number) => void | Promise<void>,
+      retry: () => void,
+      rollback: (id: number) => void,
+      target?: SpreadsheetCommandTarget | (() => SpreadsheetCommandTarget),
+      accepted?: (id: number) => void,
+    ) => {
+      if (!optionsRef.current.enabled) return;
+      const scope = optionsRef.current.scopeKey;
+      const epoch = scopeRef.current.epoch;
+      const id = ++nextIdRef.current;
+      // A preflight failure never authored a range, so the next action replaces
+      // it. Authored independent failures remain until retried or superseded.
+      clearPreflightFailure();
+      const command: Command = { id, target: null, overlapped: false, covered: false };
+      commandsRef.current.set(id, command);
+      const current = () =>
+        mountedRef.current &&
+        optionsRef.current.scopeKey === scope &&
+        scopeRef.current.epoch === epoch;
+      const fail = (cause: unknown) => {
+        if (!current()) return;
+        rollback(id);
+        if (command.covered) {
+          commandsRef.current.delete(id);
+          return;
+        }
+        const error = cause instanceof Error ? cause : new Error(String(cause));
+        command.message = error.message || "Spreadsheet change failed";
+        command.retry = () => {
+          if (!current() || !optionsRef.current.enabled || command.overlapped) return;
+          commandsRef.current.delete(id);
+          refreshFailures();
+          retry();
+        };
+        refreshFailures();
+        optionsRef.current.onCommandError?.(error);
+      };
+      let result: void | Promise<void>;
+      try {
+        command.target = typeof target === "function" ? target() : (target ?? null);
+        if (command.target) {
+          for (const previous of commandsRef.current.values()) {
+            if (
+              previous.id === id ||
+              !previous.target ||
+              !overlaps(command.target, previous.target)
+            )
+              continue;
+            previous.overlapped = true;
+            previous.covered ||= contains(command.target, previous.target);
+            if (previous.covered && previous.message !== undefined)
+              commandsRef.current.delete(previous.id);
+          }
+          refreshFailures();
+        }
+        result = invoke(id);
+      } catch (cause) {
+        fail(cause);
+        return;
+      }
+      const succeed = () => {
+        if (!current()) return;
+        commandsRef.current.delete(id);
+        accepted?.(id);
+      };
+      if (!result || typeof result.then !== "function") {
+        succeed();
+        return;
+      }
+      setPendingCount((count) => count + 1);
+      void Promise.resolve(result).then(
+        () => {
+          if (!current()) return;
+          setPendingCount((count) => Math.max(0, count - 1));
+          succeed();
+        },
+        (cause) => {
+          if (!current()) return;
+          setPendingCount((count) => Math.max(0, count - 1));
+          fail(cause);
+        },
+      );
+    },
+    [clearPreflightFailure, refreshFailures],
+  );
+
+  const first = failures[0];
+  return {
+    run,
+    clearPreflightFailure,
+    pendingCount,
+    error: first
+      ? {
+          message:
+            failures.length > 1
+              ? `${first.message} (${failures.length} changes not saved)`
+              : first.message!,
+          retry: enabled && !first.overlapped ? first.retry : undefined,
+        }
+      : null,
+  };
+}

package/src/components/artifacts/spreadsheet-download.tsx

@@ -0,0 +1,109 @@
+import type { EditableArtifactSession } from "@opengeni/sdk/editable-artifacts";
+import { DownloadIcon, LoaderCircleIcon } from "lucide-react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+
+import { ArtifactButton } from "./artifact-chrome";
+import { useEditableArtifactView } from "./editable-artifact-ui";
+import { useSpreadsheetSubmissions } from "./spreadsheet-submissions";
+
+export type SpreadsheetDownload = (signal: AbortSignal) => Promise<Blob>;
+
+export function SpreadsheetDownloadButton({
+  session,
+  title,
+  download,
+}: {
+  session: EditableArtifactSession;
+  title: string;
+  download: SpreadsheetDownload;
+}) {
+  const view = useEditableArtifactView(session);
+  const submissions = useSpreadsheetSubmissions();
+  const submitting = useSyncExternalStore(
+    submissions.subscribe,
+    submissions.getPending,
+    submissions.getPending,
+  );
+  const active = useRef<AbortController | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(false);
+  const ready =
+    view.state === "live" &&
+    submitting === 0 &&
+    view.pendingTransactions === 0 &&
+    view.blockedPending.length === 0 &&
+    !view.authoringBlockedReason;
+  useEffect(() => () => active.current?.abort(), [session]);
+  useEffect(() => {
+    if (view.state === "failed" || view.state === "closed") {
+      active.current?.abort();
+      active.current = null;
+      setBusy(false);
+    }
+  }, [view.state]);
+
+  const start = async () => {
+    if (active.current || !ready || submissions.getPending()) return;
+    // Re-read the live view: a just-committed edit may precede React's next render.
+    const current = session.getView();
+    if (
+      current.state !== "live" ||
+      current.pendingTransactions ||
+      current.blockedPending.length ||
+      current.authoringBlockedReason
+    )
+      return;
+    const controller = new AbortController();
+    active.current = controller;
+    setBusy(true);
+    setError(false);
+    try {
+      const blob = await download(controller.signal);
+      if (controller.signal.aborted) return;
+      const url = URL.createObjectURL(blob);
+      try {
+        const anchor = document.createElement("a");
+        anchor.href = url;
+        anchor.download = `${
+          title
+            .replace(/[\\/:*?"<>|\u0000-\u001f]/g, "_")
+            .replace(/\.xlsx$/i, "")
+            .trim() || "Workbook"
+        }.xlsx`;
+        anchor.rel = "noopener";
+        anchor.click();
+      } finally {
+        setTimeout(() => URL.revokeObjectURL(url), 0);
+      }
+    } catch {
+      if (!controller.signal.aborted) setError(true);
+    } finally {
+      if (!controller.signal.aborted) {
+        active.current = null;
+        setBusy(false);
+      }
+    }
+  };
+
+  return (
+    <>
+      {error ? (
+        <span role="alert" className="text-og-xs text-og-fg-muted">
+          Download failed. Try again.
+        </span>
+      ) : null}
+      <ArtifactButton
+        onClick={() => void start()}
+        disabled={busy || !ready}
+        title={ready ? "Download workbook as XLSX" : "Wait for workbook changes to sync"}
+      >
+        {busy ? (
+          <LoaderCircleIcon className="animate-spin" aria-hidden />
+        ) : (
+          <DownloadIcon aria-hidden />
+        )}
+        {busy ? "Preparing…" : "Download"}
+      </ArtifactButton>
+    </>
+  );
+}

package/src/components/artifacts/spreadsheet-general-display.ts

@@ -0,0 +1,43 @@
+/**
+ * DISPLAY-ONLY General number formatting for spreadsheet canvas and a11y
+ * labels. This is not numeric arithmetic and must never feed formula-bar /
+ * cell-edit `input`, stored cells, formula results, or serialized exports.
+ *
+ * Policy for independent review:
+ * IEEE-754 cannot represent many decimal fractions exactly, so values such as
+ * `110.00000000000001` and `0.1 + 0.2` leak binary residue through `String(n)`.
+ * General display therefore collapses a finite number to 15 significant decimal
+ * digits — the same bound spreadsheet General uses — via
+ * `String(Number(value.toPrecision(15)))`.
+ *
+ * That mapping yields `110` / `220` / `0.3` for the noisy cases while keeping
+ * exponent-scale values (`1e-20`, `1e21`) and ~15-digit legitimate precision.
+ * Integers stringify without a decimal; `-0` displays as `0`; non-finite
+ * numbers, dates, booleans, errors, and strings keep their existing labels.
+ *
+ * Do not reuse `Intl.NumberFormat({ maximumFractionDigits: 12 })` from the
+ * artifact-tool renderer: 12 fraction digits rounds `1e-20` to `0` and truncates
+ * high-precision values that General should still show.
+ */
+export function formatSpreadsheetGeneralDisplay(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  if (typeof value === "number") {
+    if (Object.is(value, -0) || value === 0) return "0";
+    if (!Number.isFinite(value)) return String(value);
+    const rounded = Number(value.toPrecision(15));
+    // Rounding at the finite IEEE-754 boundary can overflow. A display policy
+    // must not turn a finite source into an infinity label.
+    return String(Number.isFinite(rounded) ? rounded : value);
+  }
+  return String(value);
+}
+
+/** Exact edit/formula-bar source. Numbers stay `String(value)` with no General collapse. */
+export function spreadsheetCellEditSource(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  return String(value);
+}