@lotics/ui 20.0.0 → 20.0.2

package/src/primitives_purity.test.ts

@@ -1,73 +0,0 @@
-import { describe, it, expect } from "vitest";
-import * as fs from "node:fs";
-import * as path from "node:path";
-
-/**
- * Primitives purity test.
- *
- * `@lotics/ui` is the public, published, universal-rendering primitives
- * package. Every file in `src/` is a primitive. It must not import any
- * dependency that ties it to a specific Lotics runtime context: no chat
- * SDK, no analytics, no i18n, and no Lotics domain types (which live in
- * `@lotics/shared`). Lotics-coupled UI is in the workspace-private
- * `@lotics/ui-internal` package, which may import from here and from
- * `@lotics/shared` freely.
- *
- * Markdown (react-markdown/remark) is the one heavy third-party dependency
- * the kit carries on purpose — it's the single canonical renderer for chat,
- * apps, and `AgentRun`. It's generic, not a Lotics coupling; it stays
- * universal via the `markdown.web.tsx` (DOM) / `markdown.tsx` (native
- * plain-text) split and is tree-shaken out of any consumer that doesn't
- * import `./markdown`. So it's allowed — the guards below remain for the
- * genuine context couplings.
- *
- * The ONE allowed `ai` coupling: the `AgentRun` family renders the ai-sdk
- * `UIMessage.parts` shape directly — that IS its contract (both chat and app
- * agents emit it), so there is no bespoke transcript type to keep in sync.
- * `agent_transform.ts` (the single place that folds parts into the render
- * timeline) `import type`s from `ai` — erased at runtime, so no `ai` enters any
- * consumer's bundle. That file alone is exempt from the `ai`-package guard; every
- * other primitive stays ai-free, and the `@ai-sdk/*` runtime packages are never
- * allowed anywhere.
- *
- * The boundary is enforced by this test — without it primitives drift
- * back into the parent app's contexts over months.
- */
-
-const AI_PACKAGE_PATTERN = /from\s+["']ai["']/;
-const FORBIDDEN_PATTERNS = [
-  /from\s+["']posthog-js/,
-  /from\s+["']@lingui\//,
-  /from\s+["']@ai-sdk\//,
-  AI_PACKAGE_PATTERN,
-  /from\s+["']@lotics\/shared/,
-];
-
-// The sole file permitted to `import type` from the `ai` package (see above).
-const AI_PACKAGE_ALLOWED = new Set(["agent_transform.ts"]);
-
-const SRC_DIR = path.resolve(__dirname);
-
-function listTopLevelSourceFiles(): string[] {
-  const entries = fs.readdirSync(SRC_DIR, { withFileTypes: true });
-  return entries
-    .filter((e) => e.isFile() && (e.name.endsWith(".ts") || e.name.endsWith(".tsx")))
-    .filter((e) => !e.name.endsWith(".test.ts") && !e.name.endsWith(".test.tsx"))
-    .map((e) => path.join(SRC_DIR, e.name));
-}
-
-describe("packages/ui primitives — purity", () => {
-  it("no primitive imports posthog, lingui, ai-sdk, or @lotics/shared", () => {
-    const violations: string[] = [];
-    for (const file of listTopLevelSourceFiles()) {
-      const src = fs.readFileSync(file, "utf-8");
-      for (const pattern of FORBIDDEN_PATTERNS) {
-        if (pattern === AI_PACKAGE_PATTERN && AI_PACKAGE_ALLOWED.has(path.basename(file))) continue;
-        if (pattern.test(src)) {
-          violations.push(`${path.basename(file)} matches ${pattern}`);
-        }
-      }
-    }
-    expect(violations).toEqual([]);
-  });
-});

package/src/remark_gfm_safe.test.ts

@@ -1,33 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { unified } from "unified";
-import remarkParse from "remark-parse";
-import { remarkGfmSafe } from "./remark_gfm_safe";
-
-/** Parse markdown to an mdast tree and serialize it, so tests assert on the
- *  resulting document structure without depending on mdast node typings. */
-function parse(markdown: string): string {
-  return JSON.stringify(unified().use(remarkParse).use(remarkGfmSafe).parse(markdown));
-}
-
-describe("remarkGfmSafe", () => {
-  it("autolinks a bare URL in normal text (micromark tokenizer, no lookbehind)", () => {
-    expect(parse("see https://example.com now")).toContain('"url":"https://example.com"');
-  });
-
-  it("autolinks a bare email in normal text (the case the removed sweep also handled)", () => {
-    expect(parse("contact me at a@b.com please")).toContain('"url":"mailto:a@b.com"');
-  });
-
-  it("autolinks a bare www link", () => {
-    expect(parse("visit www.example.com today")).toContain('"url":"http://www.example.com"');
-  });
-
-  it("still parses GFM tables", () => {
-    expect(parse("| a | b |\n| --- | --- |\n| 1 | 2 |")).toContain('"type":"table"');
-  });
-
-  it("still parses strikethrough and task lists", () => {
-    expect(parse("~~gone~~")).toContain('"type":"delete"');
-    expect(parse("- [x] done")).toContain('"checked":true');
-  });
-});

package/src/share_or_download.test.ts

@@ -1,92 +0,0 @@
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { shareOrDownloadFiles, prepareShareFiles, shareFiles } from "./share_or_download";
-
-afterEach(() => {
-  vi.restoreAllMocks();
-  vi.unstubAllGlobals();
-});
-
-describe("shareOrDownloadFiles", () => {
-  it("is a no-op (download/0) when there are no usable files", async () => {
-    expect(await shareOrDownloadFiles([])).toEqual({ delivered: "download", count: 0 });
-    expect(await shareOrDownloadFiles([{ url: "", filename: "x.png" }])).toEqual({ delivered: "download", count: 0 });
-  });
-
-  it("hands the BYTES (not the URL) to the OS share sheet when files can be shared", async () => {
-    vi.stubGlobal("fetch", vi.fn(async () => new Response(new Blob(["img"], { type: "image/png" }))));
-    // navigator.share is a true external boundary — assert WHAT crosses it. Typing
-    // the mock's param makes mock.calls[0][0] the shared payload.
-    const share = vi.fn(async (_data: { files: File[]; title?: string }) => undefined);
-    vi.stubGlobal("navigator", { canShare: () => true, share });
-
-    const res = await shareOrDownloadFiles([{ url: "https://r2/presigned", filename: "a.png", mimeType: "image/png" }], { title: "Ảnh" });
-
-    expect(res).toEqual({ delivered: "share", count: 1 });
-    const shared = share.mock.calls[0][0];
-    expect(shared.files).toHaveLength(1);
-    expect(shared.files[0]).toBeInstanceOf(File); // bytes, not a link → no expiry problem
-    expect(shared.files[0].name).toBe("a.png");
-    expect(shared.title).toBe("Ảnh");
-  });
-
-  it("rides the given credentials on the blob fetch so an auth-gated proxy URL authorizes", async () => {
-    // Type the init param so mock.calls[0][1] is the RequestInit we assert on.
-    const fetchMock = vi.fn(async (_url: string, _init?: RequestInit) => new Response(new Blob(["img"], { type: "image/png" })));
-    vi.stubGlobal("fetch", fetchMock);
-    vi.stubGlobal("navigator", { canShare: () => true, share: vi.fn(async () => undefined) });
-
-    await shareOrDownloadFiles([{ url: "https://api.example/v1/files/k", filename: "a.png" }], { credentials: "include" });
-
-    expect(fetchMock.mock.calls[0][1]).toMatchObject({ credentials: "include" });
-  });
-
-  it("treats a cancelled share sheet (AbortError) as done — never falls back to downloading", async () => {
-    vi.stubGlobal("fetch", vi.fn(async () => new Response(new Blob(["img"], { type: "image/png" }))));
-    const share = vi.fn(async () => { throw new DOMException("cancelled", "AbortError"); });
-    vi.stubGlobal("navigator", { canShare: () => true, share });
-
-    expect(await shareOrDownloadFiles([{ url: "u", filename: "a.png" }])).toEqual({ delivered: "share", count: 0 });
-  });
-});
-
-describe("prepareShareFiles + shareFiles (iOS: fetch ahead of the gesture, share synchronously)", () => {
-  it("prepareShareFiles fetches the bytes into File[] with the given credentials", async () => {
-    const fetchMock = vi.fn(async (_url: string, _init?: RequestInit) => new Response(new Blob(["img"], { type: "image/png" })));
-    vi.stubGlobal("fetch", fetchMock);
-    vi.stubGlobal("navigator", { canShare: () => true, share: vi.fn() });
-
-    const files = await prepareShareFiles([{ url: "https://api/v1/files/k", filename: "a.png" }], { credentials: "include" });
-
-    expect(files).not.toBeNull();
-    expect(files?.[0]).toBeInstanceOf(File);
-    expect(files?.[0].name).toBe("a.png");
-    expect(fetchMock.mock.calls[0][1]).toMatchObject({ credentials: "include" });
-  });
-
-  it("prepareShareFiles returns null when Web Share (files) is unsupported", async () => {
-    vi.stubGlobal("fetch", vi.fn(async () => new Response(new Blob(["img"]))));
-    vi.stubGlobal("navigator", {}); // no canShare / share
-    expect(await prepareShareFiles([{ url: "u", filename: "a.png" }])).toBeNull();
-  });
-
-  it("prepareShareFiles THROWS on a fetch failure (caller logs it, not a silent download)", async () => {
-    vi.stubGlobal("fetch", vi.fn(async () => new Response(null, { status: 401 })));
-    vi.stubGlobal("navigator", { canShare: () => true, share: vi.fn() });
-    await expect(prepareShareFiles([{ url: "u", filename: "a.png" }])).rejects.toThrow(/401/);
-  });
-
-  it("shareFiles shares the SAME pre-fetched File (no re-fetch) and maps cancel/unsupported", async () => {
-    const share = vi.fn(async (_d: { files: File[] }) => undefined);
-    vi.stubGlobal("navigator", { canShare: () => true, share });
-    const file = new File(["x"], "a.png", { type: "image/png" });
-
-    expect(await shareFiles([file], { title: "T" })).toBe("shared");
-    expect(share.mock.calls[0][0].files[0]).toBe(file); // the exact pre-fetched File crosses the boundary
-
-    vi.stubGlobal("navigator", { share: vi.fn(async () => { throw new DOMException("x", "AbortError"); }) });
-    expect(await shareFiles([file])).toBe("cancelled");
-
-    vi.stubGlobal("navigator", {}); // no share
-    expect(await shareFiles([file])).toBe("unsupported");
-  });
-});

package/src/table.test.ts

@@ -1,90 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { computeTableFit, type TableFitColumn } from "./table_fit";
-
-// The canonical register's columns (tpl_item_list): a fixed identity column,
-// a flexible name column, then fixed data columns — plus a 24px leading
-// checkbox gutter and a 132px trailing actions gutter.
-const REGISTER: TableFitColumn[] = [
-  { key: "ma", width: 112 },
-  { key: "khach" }, // flex
-  { key: "trangThai", width: 112 },
-  { key: "viec", width: 82 },
-  { key: "phi", width: 116 },
-  { key: "ngayNhan", width: 72 },
-];
-
-function visible(fit: ReturnType<typeof computeTableFit>): string[] {
-  return REGISTER.filter((c) => fit.visibleKeys.has(c.key)).map((c) => c.key);
-}
-
-describe("computeTableFit", () => {
-  it("keeps every column when the container fits them all", () => {
-    const fit = computeTableFit(REGISTER, 24, 132, 1040);
-    expect(fit.stacked).toBe(false);
-    expect(visible(fit)).toEqual(["ma", "khach", "trangThai", "viec", "phi", "ngayNhan"]);
-  });
-
-  it("drops columns right-to-left by default, one at a time, until the rest fit", () => {
-    // 700px: the full set (908px) and the set minus "ngayNhan" (822px) overflow;
-    // minus "phi" too (692px) fits.
-    const fit = computeTableFit(REGISTER, 24, 132, 700);
-    expect(fit.stacked).toBe(false);
-    expect(visible(fit)).toEqual(["ma", "khach", "trangThai", "viec"]);
-  });
-
-  it("keeps a high-priority column alive while lower-priority ones drop", () => {
-    const withPriority = REGISTER.map((c) => (c.key === "phi" ? { ...c, priority: 1 } : c));
-    const fit = computeTableFit(withPriority, 24, 132, 700);
-    expect(fit.stacked).toBe(false);
-    // "phi" (priority 1) outlives "trangThai"/"viec"/"ngayNhan" (default = index).
-    expect(fit.visibleKeys.has("phi")).toBe(true);
-    expect(fit.visibleKeys.has("trangThai")).toBe(false);
-    expect(fit.visibleKeys.has("viec")).toBe(false);
-    expect(fit.visibleKeys.has("ngayNhan")).toBe(false);
-  });
-
-  it("never drops the first column", () => {
-    // Wide enough for exactly the identity + flex pair, no more.
-    const fit = computeTableFit(REGISTER, 0, 0, 320);
-    expect(fit.stacked).toBe(false);
-    expect(fit.visibleKeys.has("ma")).toBe(true);
-  });
-
-  it("never drops the first column even when it carries the worst priority", () => {
-    const hostile = REGISTER.map((c) => (c.key === "ma" ? { ...c, priority: 99 } : c));
-    const fit = computeTableFit(hostile, 24, 132, 700);
-    expect(fit.stacked).toBe(false);
-    expect(fit.visibleKeys.has("ma")).toBe(true);
-  });
-
-  it("stacks when even the minimum column set overflows (the phone case)", () => {
-    // A 390px phone minus the page padding: the canonical register's identity +
-    // customer + gutters still need ~470px.
-    const fit = computeTableFit(REGISTER, 24, 132, 334);
-    expect(fit.stacked).toBe(true);
-    // Stacked mode shows every column — vertical space is free.
-    expect(visible(fit)).toEqual(["ma", "khach", "trangThai", "viec", "phi", "ngayNhan"]);
-  });
-
-  it("counts the leading/trailing gutters and gaps in the fit math", () => {
-    // Two fixed columns: 40 padding + 100 + 100 + 1 gap (14) = 254 exactly.
-    const two: TableFitColumn[] = [
-      { key: "a", width: 100 },
-      { key: "b", width: 100 },
-    ];
-    expect(computeTableFit(two, 0, 0, 254).stacked).toBe(false);
-    expect(computeTableFit(two, 0, 0, 253).stacked).toBe(true);
-    // Adding a 24px leading gutter adds the gutter and one more gap.
-    expect(computeTableFit(two, 24, 0, 292).stacked).toBe(false);
-    expect(computeTableFit(two, 24, 0, 291).stacked).toBe(true);
-  });
-
-  it("a single-column table fits until the gutters overflow, then stacks", () => {
-    const one: TableFitColumn[] = [{ key: "a" }];
-    // 40 padding + 120 flex minimum = 160.
-    expect(computeTableFit(one, 0, 0, 200).stacked).toBe(false);
-    const tiny = computeTableFit(one, 0, 0, 100);
-    expect(tiny.stacked).toBe(true);
-    expect(tiny.visibleKeys.has("a")).toBe(true);
-  });
-});

package/src/task_metrics.test.ts

@@ -1,48 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { TASK_ROW_BAND, TASK_ROW_GAP, TASK_TITLE_LINE, taskGutter, taskTitleSlack } from "./task_metrics";
-
-describe("task row geometry", () => {
-  it("puts the control's centre and the title's first text line on the SAME y, at every density", () => {
-    for (const band of Object.values(TASK_ROW_BAND)) {
-      // The control centres in the band; the title's first line centres at its slack + half a
-      // line. A density whose band breaks this equality sags the control off its own title.
-      expect(taskTitleSlack(band) + TASK_TITLE_LINE / 2).toBe(band / 2);
-    }
-  });
-
-  it("pins the first line on any band the family builds, not only the density table's", () => {
-    // A sub-field's line is the TALLER of the row band and the control it holds (a 40px inline
-    // editor does not fit a `dense` 32 row), so the law has to hold on bands the density table
-    // never names.
-    for (let band = TASK_TITLE_LINE; band <= 64; band += 2) {
-      expect(taskTitleSlack(band) + TASK_TITLE_LINE / 2).toBe(band / 2);
-    }
-  });
-
-  it("lands every density on whole pixels", () => {
-    for (const band of Object.values(TASK_ROW_BAND)) {
-      expect(Number.isInteger(taskTitleSlack(band))).toBe(true);
-    }
-  });
-
-  it("never pulls a title above its row when the band is shorter than a line of text", () => {
-    expect(taskTitleSlack(TASK_TITLE_LINE - 8)).toBe(0);
-  });
-});
-
-describe("task row gutters", () => {
-  it("gives a pinned control its own width plus the gap that separates it from the content", () => {
-    // ONE rule for BOTH edges: the leading ring's column and the trailing ⋯'s column are the same
-    // arithmetic, which is what lets a row reserve them as plain padding and leave a content box
-    // every line — title, caption, sub-row, detail, nested list — can span exactly.
-    for (const width of [20, 24, 28, 40]) {
-      expect(taskGutter(width)).toBe(width + TASK_ROW_GAP);
-    }
-  });
-
-  it("charges NOTHING for a gutter a list declines", () => {
-    // A list whose rows carry no ⋯ passes `actionWidth={0}` and its content must run to the
-    // container's edge. Leaving the gap behind would bill it 12px for a column it never uses.
-    expect(taskGutter(0)).toBe(0);
-  });
-});

package/src/use_list_keyboard_nav.test.ts

@@ -1,184 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from "vitest";
-import { act, renderHook } from "@testing-library/react";
-import { useListKeyboardNav, type ListKeyboardNavOptions } from "./use_list_keyboard_nav";
-
-function setup(overrides: Partial<ListKeyboardNavOptions> = {}) {
-  const onSelect = vi.fn();
-  const onClose = vi.fn();
-  const onActiveChange = vi.fn();
-  const opts: ListKeyboardNavOptions = {
-    count: 4,
-    onSelect,
-    onClose,
-    onActiveChange,
-    ...overrides,
-  };
-  const view = renderHook((p: ListKeyboardNavOptions) => useListKeyboardNav(p), {
-    initialProps: opts,
-  });
-  return { view, onSelect, onClose, onActiveChange };
-}
-
-describe("useListKeyboardNav", () => {
-  it("starts at index 0", () => {
-    const { view } = setup();
-    expect(view.result.current.activeIndex).toBe(0);
-  });
-
-  it("seats the initial active row at initialIndex", () => {
-    const { view } = setup({ initialIndex: 2 });
-    expect(view.result.current.activeIndex).toBe(2);
-  });
-
-  it("ArrowDown / ArrowUp move within bounds and report handled", () => {
-    const { view } = setup();
-    let handled = false;
-    act(() => {
-      handled = view.result.current.handleKey("ArrowDown");
-    });
-    expect(handled).toBe(true);
-    expect(view.result.current.activeIndex).toBe(1);
-    act(() => void view.result.current.handleKey("ArrowUp"));
-    expect(view.result.current.activeIndex).toBe(0);
-  });
-
-  it("does not move past the ends", () => {
-    const { view } = setup({ count: 2 });
-    act(() => void view.result.current.handleKey("ArrowUp"));
-    expect(view.result.current.activeIndex).toBe(0);
-    act(() => void view.result.current.handleKey("ArrowDown"));
-    act(() => void view.result.current.handleKey("ArrowDown"));
-    expect(view.result.current.activeIndex).toBe(1);
-  });
-
-  it("skips disabled rows", () => {
-    const { view } = setup({ count: 4, isDisabled: (i) => i === 1 || i === 2 });
-    act(() => void view.result.current.handleKey("ArrowDown"));
-    expect(view.result.current.activeIndex).toBe(3);
-  });
-
-  it("Home / End jump to the first / last enabled row", () => {
-    const { view } = setup({ count: 4, isDisabled: (i) => i === 3 });
-    act(() => void view.result.current.handleKey("End"));
-    expect(view.result.current.activeIndex).toBe(2);
-    act(() => void view.result.current.handleKey("Home"));
-    expect(view.result.current.activeIndex).toBe(0);
-  });
-
-  it("Enter selects the active row", () => {
-    const { view, onSelect } = setup();
-    act(() => void view.result.current.handleKey("ArrowDown"));
-    act(() => void view.result.current.handleKey("Enter"));
-    expect(onSelect).toHaveBeenCalledWith(1);
-  });
-
-  it("Enter does not select a disabled active row", () => {
-    const { view, onSelect } = setup({ count: 2, isDisabled: () => true });
-    act(() => void view.result.current.handleKey("Enter"));
-    expect(onSelect).not.toHaveBeenCalled();
-  });
-
-  it("Escape closes and is handled; Tab closes but is not handled", () => {
-    const { view, onClose } = setup();
-    let escHandled = true;
-    let tabHandled = true;
-    act(() => {
-      escHandled = view.result.current.handleKey("Escape");
-    });
-    act(() => {
-      tabHandled = view.result.current.handleKey("Tab");
-    });
-    expect(onClose).toHaveBeenCalledTimes(2);
-    expect(escHandled).toBe(true);
-    expect(tabHandled).toBe(false);
-  });
-
-  it("reports unknown keys as not handled", () => {
-    const { view } = setup();
-    let handled = true;
-    act(() => {
-      handled = view.result.current.handleKey("a");
-    });
-    expect(handled).toBe(false);
-  });
-
-  it("notifies onActiveChange when the active row moves", () => {
-    const { view, onActiveChange } = setup();
-    act(() => void view.result.current.handleKey("ArrowDown"));
-    expect(onActiveChange).toHaveBeenCalledWith(1);
-  });
-
-  it("setActiveIndex moves the active row but skips onActiveChange when scrollIntoView is false (mouse hover)", () => {
-    const { view, onActiveChange } = setup();
-    act(() => view.result.current.setActiveIndex(2, false));
-    expect(view.result.current.activeIndex).toBe(2);
-    expect(onActiveChange).not.toHaveBeenCalled();
-  });
-});
-
-describe("useListKeyboardNav typeahead", () => {
-  const labels = ["Apple", "Banana", "Blueberry", "Cherry"];
-  function setupTypeahead(overrides: Partial<ListKeyboardNavOptions> = {}) {
-    return setup({
-      count: labels.length,
-      typeahead: { labelAt: (i) => labels[i] },
-      ...overrides,
-    });
-  }
-
-  it("jumps to the first label-prefix match and reports the key handled", () => {
-    const { view } = setupTypeahead();
-    let handled = false;
-    act(() => {
-      handled = view.result.current.handleKey("c");
-    });
-    expect(handled).toBe(true);
-    expect(view.result.current.activeIndex).toBe(3); // Cherry
-  });
-
-  it("accumulates the buffer while typing", () => {
-    vi.useFakeTimers();
-    try {
-      const { view } = setupTypeahead();
-      act(() => void view.result.current.handleKey("b")); // "b" → Banana
-      expect(view.result.current.activeIndex).toBe(1);
-      act(() => void view.result.current.handleKey("l")); // "bl" → Blueberry
-      expect(view.result.current.activeIndex).toBe(2);
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it("resets the buffer after the idle timeout", () => {
-    vi.useFakeTimers();
-    try {
-      const { view } = setupTypeahead();
-      act(() => void view.result.current.handleKey("b")); // "b" → Banana
-      expect(view.result.current.activeIndex).toBe(1);
-      act(() => {
-        vi.advanceTimersByTime(700);
-      });
-      act(() => void view.result.current.handleKey("c")); // fresh "c" → Cherry, not "bc"
-      expect(view.result.current.activeIndex).toBe(3);
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it("skips disabled rows when jumping", () => {
-    const { view } = setupTypeahead({ isDisabled: (i) => i === 1 }); // Banana disabled
-    act(() => void view.result.current.handleKey("b"));
-    expect(view.result.current.activeIndex).toBe(2); // Blueberry, the first enabled b*
-  });
-
-  it("without a typeahead option, a printable key is not handled and does not move the row", () => {
-    const { view } = setup(); // no typeahead
-    let handled = true;
-    act(() => {
-      handled = view.result.current.handleKey("b");
-    });
-    expect(handled).toBe(false);
-    expect(view.result.current.activeIndex).toBe(0);
-  });
-});