@lotics/ui 16.0.0 → 16.2.0

package/src/locale.tsx

@@ -69,6 +69,18 @@ export interface LoticsLocale {
   trendFooter: { up: string; down: string };
   /** `SuggestionChip`: the press target's default name and the ✕ tooltip. */
   suggestionChip: { add: (label: string) => string; dismiss: string };
+  /** `ChecklistRow`'s per-row NOTE: the add affordance's name/tooltip, the note
+   *  line's press name (it WRAPS the note text so the line is announced with
+   *  it), and the editor's placeholder — plus the SUBTASK expander's name,
+   *  given the count of unchecked children. The expander's open/closed state
+   *  rides `aria-expanded`, so `subtasks` must NOT name it: one stable name,
+   *  or every toggle re-announces the control. */
+  checklist: {
+    addNote: string;
+    editNote: (note: string) => string;
+    notePlaceholder: string;
+    subtasks: (missing: number) => string;
+  };
   /** `Confidence`: the full level phrase ("High confidence" …). */
   confidence: ConfidenceLabels;
   /** `Finding`: the severity badge word ("Critical" …). */
@@ -162,7 +174,7 @@ export const en: LoticsLocale = {
     descending: ", descending",
   },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
-  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date" },
+  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
@@ -176,6 +188,12 @@ export const en: LoticsLocale = {
   chip: { remove: "Remove" },
   trendFooter: { up: "Up", down: "Down" },
   suggestionChip: { add: (label) => `Add: ${label}`, dismiss: "Dismiss suggestion" },
+  checklist: {
+    addNote: "Add note",
+    editNote: (note) => `Edit note: ${note}`,
+    notePlaceholder: "Add a note…",
+    subtasks: (missing) => (missing > 0 ? `Subtasks: ${missing} left` : "Subtasks: all done"),
+  },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
   remainderMeter: {
     applied: (allocated, total) => `${allocated} of ${total} applied`,
@@ -260,7 +278,7 @@ export const vi: LoticsLocale = {
     descending: " (giảm dần)",
   },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
-  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ" },
+  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },
@@ -274,6 +292,12 @@ export const vi: LoticsLocale = {
   chip: { remove: "Xóa" },
   trendFooter: { up: "Tăng", down: "Giảm" },
   suggestionChip: { add: (label) => `Thêm: ${label}`, dismiss: "Bỏ gợi ý" },
+  checklist: {
+    addNote: "Thêm ghi chú",
+    editNote: (note) => `Sửa ghi chú: ${note}`,
+    notePlaceholder: "Thêm ghi chú…",
+    subtasks: (missing) => (missing > 0 ? `Việc con: còn ${missing}` : "Việc con: đã xong"),
+  },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
   remainderMeter: {
     applied: (allocated, total) => `Đã phân bổ ${allocated}/${total}`,

package/src/pending_commits.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect } from "vitest";
+import { pendingCommits, trackCommit } from "./pending_commits";
+
+/** A field write that lands in `stored` after `ms`, like a save round trip. */
+const commit = (stored: { value: string }, next: string, ms: number) =>
+  new Promise<void>((resolve) =>
+    setTimeout(() => {
+      stored.value = next;
+      resolve();
+    }, ms),
+  );
+
+/** Let the registry's own settle callback run before asserting on it. */
+const tick = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+describe("pendingCommits", () => {
+  it("is null with nothing in flight — a press keeps its synchronous path", () => {
+    expect(pendingCommits()).toBeNull();
+  });
+
+  it("holds until a commit still in flight has landed", async () => {
+    const stored = { value: "BKG CŨ: " };
+    void trackCommit(commit(stored, "BKG CŨ:  SGNA52926200", 20));
+    const gate = pendingCommits();
+    expect(gate).not.toBeNull();
+    await gate;
+    expect(stored.value).toBe("BKG CŨ:  SGNA52926200");
+  });
+
+  it("holds for EVERY commit in flight, not just the first", async () => {
+    const landed: string[] = [];
+    const land = (name: string, ms: number) =>
+      new Promise<void>((resolve) =>
+        setTimeout(() => {
+          landed.push(name);
+          resolve();
+        }, ms),
+      );
+    void trackCommit(land("slow", 30));
+    void trackCommit(land("fast", 5));
+    await pendingCommits();
+    expect([...landed].sort()).toEqual(["fast", "slow"]);
+  });
+
+  it("releases again once the commits have landed", async () => {
+    await trackCommit(Promise.resolve());
+    await tick();
+    expect(pendingCommits()).toBeNull();
+  });
+
+  it("is released by a FAILED commit too — a stuck gate would wedge every action", async () => {
+    const failed = trackCommit(Promise.reject(new Error("Save failed")));
+    // The caller owns the error: the inline editor keeps the edit and shows it.
+    await expect(failed).rejects.toThrow("Save failed");
+    await expect(pendingCommits() ?? Promise.resolve()).resolves.toBeUndefined();
+    await tick();
+    expect(pendingCommits()).toBeNull();
+  });
+
+  it("ignores a commit started AFTER the gate was taken — it holds the press for the edit that caused it, not later work", async () => {
+    const stored = { value: "before" };
+    void trackCommit(commit(stored, "first", 5));
+    const gate = pendingCommits();
+    void trackCommit(commit(stored, "later", 40));
+    await gate;
+    expect(stored.value).toBe("first");
+  });
+});

package/src/pending_commits.ts

@@ -0,0 +1,45 @@
+/**
+ * Inline commits that are still writing, app-wide.
+ *
+ * An inline editor commits on BLUR, so pressing an action while a field is focused
+ * starts TWO things in ONE gesture: the field's write (the blur, on mousedown) and
+ * the action's handler (on mouseup). A handler that re-reads the record — to print a
+ * document, mint an invoice, copy the row — otherwise overtakes the still-in-flight
+ * write and acts on the PRE-EDIT value. It fails silently: the screen shows the new
+ * value and the output carries the old one.
+ *
+ * `useInlineEdit` registers every commit here and `Button`/`IconButton` hold their
+ * press for the ones already in flight, so the press lands AFTER the edit that caused
+ * it. There is nothing for an app to wire up, and nothing it can forget.
+ */
+
+const inFlight = new Set<Promise<void>>();
+
+/**
+ * Register a commit. Returns it UNCHANGED — the caller keeps its own result and error
+ * handling; the gate only needs to know when the write SETTLED, so a failed commit
+ * releases it just like a successful one (the field surfaces its own error).
+ */
+export function trackCommit<T>(commit: Promise<T>): Promise<T> {
+  const settled = commit.then(
+    () => undefined,
+    () => undefined,
+  );
+  inFlight.add(settled);
+  void settled.then(() => {
+    inFlight.delete(settled);
+  });
+  return commit;
+}
+
+/**
+ * The commits in flight RIGHT NOW, or `null` when there are none — a caller takes its
+ * synchronous path on `null`, so a press with nothing pending behaves exactly as it
+ * always did. Commits started after this call are deliberately NOT awaited: the gate
+ * holds a press for the edit that caused it, never for later work.
+ */
+export function pendingCommits(): Promise<void> | null {
+  if (inFlight.size === 0) return null;
+  const snapshot = Array.from(inFlight);
+  return Promise.all(snapshot).then(() => undefined);
+}

package/src/use_gated_press.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { pendingCommits } from "./pending_commits";
+
+/**
+ * Makes an action's press land AFTER any inline commit the same gesture started —
+ * see {@link pendingCommits} for the race it closes.
+ *
+ * With nothing in flight the press dispatches SYNCHRONOUSLY, exactly as before, so the
+ * gate is invisible outside the racing case. While waiting the action reports busy, so
+ * the gesture reads as "working" rather than "ignored" and cannot double-fire.
+ */
+export function useGatedPress<E>(onPress?: (event: E) => void) {
+  const [waiting, setWaiting] = useState(false);
+  // Re-armed on mount: a StrictMode remount must not leave the ref stuck at false.
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const handlePress = useCallback(
+    (event: E) => {
+      const pending = pendingCommits();
+      if (!pending) {
+        onPress?.(event);
+        return;
+      }
+      setWaiting(true);
+      void pending.then(() => {
+        if (!mounted.current) return;
+        setWaiting(false);
+        onPress?.(event);
+      });
+    },
+    [onPress],
+  );
+
+  return { handlePress, waiting };
+}